html, body { margin: 0; padding: 0; }

        /* Hide homepage content while auth loading screen is active */
        body.auth-loading .content-wrapper {
            visibility: hidden !important;
        }

        /* Mobile block screen */
        #mobileBlockScreen {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(-45deg, #00eff8, #f800b4, #ebf503, #02f6c1, #00eff8, #9400f8);
            background-size: 400% 400%;
            animation: authGradient 30s ease infinite;
            z-index: 999999;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 40px;
        }
        .mobile-block-content {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        @media (max-width: 768px) {
            #mobileBlockScreen {
                display: flex !important;
            }
            #authScreen,
            #mainContainer,
            .content-wrapper,
            .auth-loading-screen,
            .y2k-background {
                display: none !important;
            }
        }

        /* Global Font: Inter */
        body, body * {
            font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
        }

        /* Exception: monospace for code/technical elements + spec tab surfaces.
           The label text lives in child <span>s that carry inline mono, but the
           global `body * !important` Geist above defeats inline styles — so we must
           match the children too (.step-pill span, etc.), not just the container. */
        code, pre, .monospace, input[type="text"], textarea,
        .step-pill, .step-pill *, .mode-btn, .mode-btn * {
            font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace !important;
        }

        /* CSS Custom Properties for Resizable Sidebar */
        :root {
            --sidebar-width: 20vw;
            --sidebar-collapsed: 0;
            /* Theme Variables — warm light mode */
            --bg-primary: #faf9f6;
            --bg-secondary: #f5f4ef;
            --text-primary: #2c2c2a;
            --text-secondary: #5f5e5a;
            --border-color: #e2e0d9;
        }
        
        /* Dark Mode Variables */
        .dark-mode {
            --bg-primary: #2E2E2E;
            --bg-secondary: #1f1f1f;
            --text-primary: rgba(255, 255, 255, 0.9);
            --text-secondary: rgba(255, 255, 255, 0.6);
            --border-color: rgba(255, 255, 255, 0.3);
        }
        
        /* Authentication Screen Styles - Y2K Windows 98 Theme */
        
        /* Video Background for Authentication */
        .auth-video-background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -3;
            filter: blur(16px) saturate(1.2);
            transform: scale(1.15);
        }

        .auth-frost-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(4px);
            z-index: -2;
        }

        /* Fallback gradient background - hidden when video loads */
        .y2k-background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #00ff88 0%, #88ff00 50%, #ff8800 100%);
            z-index: -4;
            opacity: 0;
        }

        /* Windows 98 Style Authentication Dialog */
        .auth-screen {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: start;
        }

        .auth-navbar {
            position: fixed;
            top: 20px;
            left: 20px;
            right: 20px;
            z-index: 200;
            display: flex;
            justify-content: space-between;
            align-items: center;
            pointer-events: auto;
        }

        .auth-navbar-logo {
            height: 40px;
            width: auto;
            object-fit: contain;
            filter: brightness(0) invert(1);
        }

        .auth-navbar-theme-toggle {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 6px;
            padding: 6px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(10px);
        }

        .auth-navbar-theme-toggle:hover {
            background: rgba(255, 255, 255, 0.15);
            border-color: rgba(255, 255, 255, 0.3);
        }

        .auth-navbar-theme-toggle svg {
            width: 15px;
            height: 15px;
            stroke: rgba(255, 255, 255, 0.9);
            transition: all 0.3s ease;
        }

        .auth-screen-logo {
            margin-top: 264px;
            max-width: 500px;
            width: auto;
            margin-bottom: 12px;
            filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.9));
        }

        @media (max-width: 768px) {
            .auth-screen-logo {
                max-width: 280px;
            }
            
            .agency-screen-logo {
                max-width: 280px;
            }
        }

        .window-titlebar {
            background: linear-gradient(90deg, #0040ff 0%, #4080ff 100%);
            color: white;
            padding: 3px 6px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-weight: bold;
            font-size: 11px;
        }

        .window-title {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .title-icon {
            width: 16px;
            height: 16px;
            background: linear-gradient(135deg, #ff00ff 0%, #00ffff 50%, #ffff00 100%);
            border: 1px solid #000;
            font-size: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #000;
            font-weight: 900;
        }

        .window-controls {
            display: flex;
            gap: 2px;
        }

        .control-btn {
            width: 16px;
            height: 14px;
            background: #c0c0c0;
            border: 1px outset #c0c0c0;
            font-size: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-weight: bold;
        }

        .control-btn:active {
            border: 1px inset #c0c0c0;
        }

        .window-content {
            padding: 16px;
            background: #c0c0c0;
        }

        .logo-section {
            text-align: center;
            margin-bottom: 20px;
        }

        .retro-logo {
            width: 80px;
            height: 60px;
            margin: 0 auto 12px;
            background: linear-gradient(135deg, #ff00ff 0%, #00ffff 50%, #ffff00 100%);
            border: 2px inset #c0c0c0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            font-weight: 900;
            color: #000;
            text-shadow: 1px 1px 0px #fff;
        }

        .app-title {
            font-size: 14px;
            font-weight: bold;
            color: #000080;
            margin-bottom: 4px;
        }

        .app-subtitle {
            font-size: 11px;
            color: #666;
        }

        .tab-container {
            margin: 16px 0;
        }

        .tab-buttons {
            display: flex;
            border-bottom: 1px solid #808080;
        }

        .auth-tab {
            background: #c0c0c0;
            border: 1px outset #c0c0c0;
            border-bottom: none;
            padding: 6px 16px;
            font-size: 11px;
            cursor: pointer;
            color: #000;
            font-family: 'MS Sans Serif', sans-serif;
        }

        .auth-tab.active {
            background: #c0c0c0;
            border: 1px inset #c0c0c0;
            border-bottom: 1px solid #c0c0c0;
            margin-bottom: -1px;
        }

        .tab-content {
            background: #c0c0c0;
            border: 1px inset #c0c0c0;
            padding: 16px;
        }

        .form-group {
            margin-bottom: 12px;
        }

        .form-label {
            display: block;
            font-size: 11px;
            font-weight: bold;
            margin-bottom: 4px;
            color: #000;
        }

        .form-input {
            width: 100%;
            padding: 4px;
            border: 2px inset #c0c0c0;
            background: white;
            font-family: 'MS Sans Serif', sans-serif;
            font-size: 11px;
            color: #000;
        }

        .form-input:focus {
            outline: 1px dotted #000;
            outline-offset: -2px;
        }

        .button-group {
            display: flex;
            gap: 8px;
            margin-top: 16px;
        }

        .google-button {
            background: #c0c0c0;
            border: 2px outset #c0c0c0;
            padding: 6px 12px;
            font-size: 11px;
            font-family: 'MS Sans Serif', sans-serif;
            cursor: pointer;
            color: #000;
            display: flex;
            align-items: center;
            gap: 6px;
            width: 100%;
            justify-content: center;
            margin-top: 8px;
        }

        .google-button:active {
            border: 2px inset #c0c0c0;
        }

        .google-icon {
            width: 16px;
            height: 16px;
        }

        .status-bar {
            background: #c0c0c0;
            border-top: 1px inset #c0c0c0;
            padding: 4px 8px;
            font-size: 11px;
            color: #000;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .forgot-password {
            margin-top: 12px;
            text-align: center;
            display: block;
            color: #0000ff;
            text-decoration: underline;
            font-size: 11px;
            cursor: pointer;
        }

        .forgot-password:visited {
            color: #800080;
        }

        .error-message {
            background: #ffcccc;
            border: 1px solid #ff0000;
            padding: 8px;
            margin-bottom: 12px;
            font-size: 11px;
            color: #cc0000;
        }

        .success-message {
            background: #ccffcc;
            border: 1px solid #00aa00;
            padding: 8px;
            margin-bottom: 12px;
            font-size: 11px;
            color: #006600;
        }

        .hidden {
            display: none !important;
        }

        /* Taskbar - only show during authentication */
        .taskbar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 30px;
            background: #c0c0c0;
            border-top: 1px outset #c0c0c0;
            display: none;
            align-items: center;
            padding: 0 4px;
            z-index: 1000;
        }

        .start-button {
            background: #c0c0c0;
            border: 2px outset #c0c0c0;
            padding: 4px 12px;
            font-size: 11px;
            font-weight: bold;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .start-button:active {
            border: 2px inset #c0c0c0;
        }

        .taskbar-time {
            margin-left: auto;
            font-size: 11px;
            padding: 4px 8px;
            border: 1px inset #c0c0c0;
        }

        /* Hide main content when auth is active */
        .auth-screen:not(.hidden) ~ .content-wrapper {
            display: none;
        }

        /* Show taskbar when auth is active */
        .auth-screen:not(.hidden) ~ .taskbar {
            display: flex;
        }

        /* Top Center Toggle Switch with Animated Green Gradient */
        .tier-toggle {
            display: none !important; /* Hidden to force agency mode */
            pointer-events: auto;
            position: absolute;
            top: 15px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(255,255,255,0.1);
            backdrop-filter: blur(15px);
            border-radius: 20px;
            padding: 3px;
            border: 1px solid rgba(255,255,255,0.2);
            align-items: center;
            gap: 0;
            width: 200px;
            height: 40px;
            z-index: 200;
            box-shadow: 0 4px 20px rgba(0,0,0,0.2);
        }

        .tier-option {
            flex: 1;
            text-align: center;
            padding: 6px 12px;
            font-size: 0.8rem;
            font-weight: 600;
            color: white;
            cursor: pointer;
            transition: all 0.4s ease;
            border-radius: 17px;
            font-family: 'Geist', sans-serif;
            position: relative;
            z-index: 2;
        }

        .tier-option.active {
            background: linear-gradient(45deg, #4ade80, #34d399, #16a34a, #34d399);
            background-size: 300% 300%;
            animation: greenGradientShift 3s ease infinite;
            color: white;
            box-shadow: 0 2px 12px rgba(34, 197, 94, 0.4);
            transform: scale(1.01);
        }

        @keyframes greenGradientShift {
            0%, 100% { background-position: 0% 50%; }
            33% { background-position: 100% 50%; }
            66% { background-position: 50% 100%; }
        }

        .tier-option.inactive {
            background: transparent;
            color: rgba(255,255,255,0.7);
        }

        .tier-option:hover {
            color: white;
            background: rgba(255,255,255,0.1);
        }

        /* Agency Workflow Bar */
        .agency-workflow {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            width: 66.67%;
            height: 70px;
            background: linear-gradient(90deg, 
                rgba(102, 126, 234, 0.4) 0%, 
                rgba(118, 75, 162, 0.4) 20%, 
                rgba(240, 147, 251, 0.4) 40%, 
                rgba(245, 87, 108, 0.4) 60%, 
                rgba(79, 172, 254, 0.4) 80%,
                rgba(102, 126, 234, 0.4) 100%);
            border: 2px solid rgba(255,255,255,0.4);
            border-radius: 35px;
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            padding: 0 20px;
            backdrop-filter: blur(12px);
            box-shadow: 0 8px 32px rgba(0,0,0,0.3);
        }

        .workflow-step {
            color: white;
            font-weight: bold;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.3s ease;
            padding: 8px 16px;
            border-radius: 12px;
            text-align: center;
            line-height: 1.2;
            flex: 1;
            margin: 0 5px;
            min-height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .workflow-step:hover {
            background: rgba(255,255,255,0.2);
            transform: scale(1.05);
        }

        .workflow-step.center-chat {
            color: white;
            font-weight: bold;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.3s ease;
            padding: 6px 12px;
            border-radius: 12px;
            text-align: center;
            line-height: 1.2;
            flex: 1.5;
            margin: 0 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255,255,255,0.3);
            box-shadow: 0 4px 16px rgba(255,255,255,0.2);
            border: 1px solid rgba(255,255,255,0.4);
            gap: 6px;
            min-height: 27px;
        }

        .workflow-step.center-chat span {
            font-size: 13px !important;
            font-weight: bold !important;
        }

        .agency-nav-item.center span {
            font-size: 12px !important;
            font-weight: bold !important;
        }

        .workflow-step.center-chat:hover {
            background: rgba(255,255,255,0.4);
            transform: scale(1.08);
        }

        /* Google Drive button styles */
        .gdrive-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 2px;
            min-height: 36px !important;
            width: 100%;
        }

        .gdrive-icon img {
            width: 37.5px !important;
            height: 37.5px !important;
            display: block !important;
        }

        .gdrive-text {
            font-size: 13px !important;
            font-weight: bold !important;
            color: rgba(255,255,255,0.9);
            font-family: 'Geist', sans-serif;
        }

        .agency-nav-item.center {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 1px;
            padding: 8px 16px !important;
        }

        /* Dark mode styles for Google Drive button */
        .gradient-bg-night .gdrive-text {
            color: rgba(255,255,255,0.9) !important;
        }

        /* Hide plus button in agency mode */
        .agency-mode .plus-button {
            display: none;
        }

        /* Override plus button position for bottom left */
        .plus-button {
            bottom: 30px !important;
            left: 30px !important;
        }

        /* Agency Mode - Video Background Interface */
        .agency-static-interface {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 5000; pointer-events: none;
            font-family: 'Geist', sans-serif;
            transition: all 0.3s ease;
        }

        /* Agency Video Background */
        .agency-video-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -1;
            background-color: #000;
        }
        .agency-static-interface::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                radial-gradient(circle at 25% 25%, transparent 45%, rgba(255,255,255,0.015) 45.1%),
                radial-gradient(circle at 75% 75%, transparent 45%, rgba(0,0,0,0.015) 45.1%),
                radial-gradient(circle at 75% 25%, transparent 45%, rgba(255,255,255,0.01) 45.1%),
                radial-gradient(circle at 25% 75%, transparent 45%, rgba(0,0,0,0.01) 45.1%);
            background-size: 16px 16px, 20px 20px, 12px 12px, 18px 18px;
            background-position: 0 0, 5px 5px, 3px 3px, 8px 8px;
            pointer-events: none;
            opacity: 0.2;
            animation: grain 15s steps(8) infinite;
        }

        @keyframes grain {
            0%, 100% { transform: translate(0, 0) rotate(0deg); }
            10% { transform: translate(-1px, 1px) rotate(1deg); }
            20% { transform: translate(1px, 0px) rotate(0deg); }
            30% { transform: translate(0px, -1px) rotate(-1deg); }
            40% { transform: translate(-1px, -1px) rotate(2deg); }
            50% { transform: translate(1px, 1px) rotate(-1deg); }
            60% { transform: translate(0px, 1px) rotate(1deg); }
            70% { transform: translate(1px, -1px) rotate(0deg); }
            80% { transform: translate(-1px, 0px) rotate(-1deg); }
            90% { transform: translate(1px, -1px) rotate(1deg); }
        }

        /* Versionary logo styling */
        .logo-image {
            height: 90px !important;
            width: auto !important;
            object-fit: contain !important;
        }
        
        /* Theme toggle — sun/moon switch */
        .theme-switch {
            display: block;
            --width-of-switch: 3.5em;
            --height-of-switch: 2em;
            --size-of-icon: 1.4em;
            --slider-offset: 0.3em;
            position: relative;
            width: var(--width-of-switch);
            height: var(--height-of-switch);
            cursor: pointer;
            z-index: 100;
        }
        .theme-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        .theme-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #f4f4f5;
            transition: .4s;
            border-radius: 30px;
        }
        .theme-slider:before {
            position: absolute;
            content: "";
            height: var(--size-of-icon, 1.4em);
            width: var(--size-of-icon, 1.4em);
            border-radius: 20px;
            left: var(--slider-offset, 0.3em);
            top: 50%;
            transform: translateY(-50%);
            background: linear-gradient(40deg, #ff0080, #ff8c00 70%);
            transition: .4s;
        }
        .theme-switch input:checked + .theme-slider {
            background-color: #303136;
        }
        .theme-switch input:checked + .theme-slider:before {
            left: calc(100% - (var(--size-of-icon, 1.4em) + var(--slider-offset, 0.3em)));
            background: #303136;
            box-shadow: inset -3px -2px 5px -2px #8983f7, inset -10px -4px 0 0 #a3dafb;
        }
        
        /* Dark mode styles for loading preview */
        .dark-mode .master-console-overlay .loading-preview {
            color: rgba(255, 255, 255, 0.6);
        }
        
        
        /* Comprehensive Dark Mode Console Styling */
        .dark-mode .master-console-overlay {
            background: #2E2E2E;
        }
        
        .dark-mode .master-console-overlay .top-header {
            background: #2E2E2E;
            border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        }
        
        .dark-mode .master-console-overlay .project-name {
            color: rgba(255, 255, 255, 0.9);
        }
        
        .dark-mode .dropdown-icon {
            color: rgba(255, 255, 255, 0.6);
        }
        
        /* Homepage Dropdown Dark Mode - Missing Rules */
        .dark-mode .user-dropdown {
            background: #1f1f1f !important;
            border: 1px solid rgba(255, 255, 255, 0.3) !important;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
        }
        
        .dark-mode .dropdown-item {
            color: rgba(255, 255, 255, 0.9) !important;
        }
        
        .dark-mode .dropdown-item:hover {
            background: rgba(255, 255, 255, 0.1) !important;
        }
        
        /* Missing dark mode rules for dropdown separators and user subscription */
        .dark-mode .dropdown-separator {
            background: rgba(255, 255, 255, 0.2) !important;
        }
        
        .dark-mode .user-subscription {
            color: rgba(255, 255, 255, 0.6) !important;
        }
        
        /* Content wrapper default backgrounds — prevent white flash during auth transition */
        .content-wrapper {
            background: #0d1117;
        }
        body:not(.dark-mode) .content-wrapper {
            background: #f5f5f5;
        }
        /* Homepage Main Console Dark Mode - Complete Rules */
        .dark-mode .content-wrapper {
            background: #0a0a0f !important;
        }
        
        .dark-mode #mainContainer {
            background: rgba(46, 46, 46, 0.95) !important;
            color: rgba(255, 255, 255, 0.9) !important;
        }
        
        .dark-mode .nav-bar {
            background: #2E2E2E !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
        }
        
        .dark-mode .user-info {
            color: rgba(255, 255, 255, 0.9) !important;
        }
        
        .dark-mode .logo-image {
            filter: brightness(0.9) !important;
        }
        
        /* Tier Toggle Dark Mode */
        .dark-mode .tier-toggle {
            background: rgba(46, 46, 46, 0.9) !important;
            border: 1px solid rgba(255, 255, 255, 0.3) !important;
        }
        
        .dark-mode .tier-option {
            color: rgba(255, 255, 255, 0.8) !important;
            background: transparent !important;
        }
        
        .dark-mode .tier-option.active {
            background: #5CE65C !important;
            color: #000000 !important;
        }
        
        .dark-mode .tier-option:hover {
            background: rgba(255, 255, 255, 0.1) !important;
            color: rgba(255, 255, 255, 0.9) !important;
        }
        
        /* Agency Chat Input Dark Mode */
        .dark-mode .agency-chat-input {
            background: #181818 !important;
            border: none !important;
            box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
        }
        
        .dark-mode .agency-chat-input input {
            color: #ffffff !important;
            background: transparent !important;
        }
        
        .dark-mode .agency-chat-input input::placeholder {
            color: rgba(255,255,255,0.6) !important;
        }
        
        .dark-mode .animated-placeholder {
            color: #ffffff !important;
            font-weight: 400 !important;
        }
        
        .dark-mode .agency-chat-input button {
            color: rgba(255,255,255,0.8) !important;
        }
        
        .dark-mode .agency-chat-input button:hover {
            color: #ffffff !important;
            background: rgba(255,255,255,0.1) !important;
        }
        
        .dark-mode .agency-nav-item {
            color: rgba(255,255,255,0.9) !important;
            border-color: rgba(255,255,255,0.3) !important;
            background: rgba(0,0,0,0.2) !important;
        }
        
        .dark-mode .agency-unified-module {
            background: #181818 !important;
            border: none !important;
            box-shadow: 0 12px 40px rgba(0,0,0,0.6) !important;
        }
        
        .dark-mode .agency-chat-header {
            color: rgba(255, 255, 255, 0.9) !important;
        }
        
        .dark-mode .versionary-text {
            background: linear-gradient(90deg, #00ff88, #88ff00) !important;
            background-clip: text !important;
            -webkit-background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
        }
        
        /* Agency Workflow Dark Mode */
        .dark-mode .agency-workflow {
            background: rgba(46, 46, 46, 0.9) !important;
            border: 1px solid rgba(255, 255, 255, 0.3) !important;
        }
        
        .dark-mode .workflow-step {
            color: rgba(255, 255, 255, 0.9) !important;
            background: rgba(255, 255, 255, 0.1) !important;
            border: 1px solid rgba(255, 255, 255, 0.2) !important;
        }
        
        .dark-mode .workflow-step:hover {
            background: rgba(255, 255, 255, 0.2) !important;
            color: #ffffff !important;
        }
        
        .dark-mode .workflow-step.center-chat {
            background: rgba(255, 255, 255, 0.1) !important;
            border: 1px solid rgba(255, 255, 255, 0.3) !important;
        }
        
        .dark-mode .workflow-step.center-chat:hover {
            background: rgba(255, 255, 255, 0.3) !important;
        }
        
        /* Plus Button Dark Mode */
        .dark-mode .plus-button {
            background: rgba(46, 46, 46, 0.9) !important;
            border: 2px solid rgba(255, 255, 255, 0.3) !important;
            color: rgba(255, 255, 255, 0.9) !important;
        }
        
        .dark-mode .plus-button:hover {
            background: rgba(255, 255, 255, 0.1) !important;
            border-color: rgba(255, 255, 255, 0.5) !important;
        }
        
        /* Master Console Pipeline Toolbar — moved to top, old bottom toolbar hidden */
        .master-console-overlay .bottom-toolbar {
            display: none !important;
        }
        
        /* QC Indicator Animation */
        @keyframes pulse-qc {
            0% {
                box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
                border-color: #10b981;
            }
            50% {
                box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
                border-color: #10b981;
            }
            100% {
                box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
                border-color: #e2e0d9;
            }
        }
        
        .qc-ready-input {
            border: 2px solid #10b981 !important;
            background: rgba(16, 185, 129, 0.05) !important;
        }
        
        /* Pipeline Step Color Consistency */
        .master-console-overlay .pipeline-step {
            background: #f9fafb !important;
            color: #374151 !important;
            border: 1px solid #e2e0d9 !important;
        }
        
        .master-console-overlay .pipeline-step:hover {
            background: #f0efe9 !important;
        }
        
        .master-console-overlay .pipeline-step.active {
            background: #111827 !important;
            color: white !important;
        }
        
        .dark-mode .master-console-overlay .pipeline-step {
            background: #374151 !important;
            color: rgba(255, 255, 255, 0.9) !important;
            border: 1px solid rgba(255, 255, 255, 0.2) !important;
        }
        
        .dark-mode .master-console-overlay .pipeline-step:hover {
            background: rgba(255, 255, 255, 0.1) !important;
            color: #ffffff !important;
        }
        
        .dark-mode .master-console-overlay .pipeline-step.active {
            background: #111827 !important;
            color: white !important;
        }
        
        /* Pipeline Step Numbers Color Consistency */
        .master-console-overlay .pipeline-step-number {
            background: #e2e0d9 !important;
            color: #374151 !important;
        }
        
        .master-console-overlay .pipeline-step.active .pipeline-step-number {
            background: white !important;
            color: #111827 !important;
        }
        
        .dark-mode .master-console-overlay .pipeline-step-number {
            background: rgba(255, 255, 255, 0.3) !important;
            color: rgba(255, 255, 255, 0.9) !important;
        }
        
        .dark-mode .master-console-overlay .pipeline-step.active .pipeline-step-number {
            background: white !important;
            color: #111827 !important;
        }
        
        /* Remove Button Outlines from All Console Elements */
        .master-console-overlay button,
        .master-console-overlay input,
        .master-console-overlay textarea,
        .master-console-overlay .pipeline-step,
        .master-console-overlay .header-btn,
        .master-console-overlay .toolbar-btn {
            outline: none !important;
            border: none !important;
        }
        
        .master-console-overlay button:focus,
        .master-console-overlay input:focus,
        .master-console-overlay textarea:focus,
        .master-console-overlay .pipeline-step:focus,
        .master-console-overlay .header-btn:focus,
        .master-console-overlay .toolbar-btn:focus {
            outline: none !important;
            box-shadow: none !important;
        }
        
        /* Restore necessary borders for pipeline steps and inputs */
        .master-console-overlay .pipeline-step {
            border: 1px solid #e2e0d9 !important;
        }
        
        .dark-mode .master-console-overlay .pipeline-step {
            border: 1px solid rgba(255, 255, 255, 0.2) !important;
        }
        
        .master-console-overlay .carousel-indicators-wrapper .carousel-indicators button.indicator-chip,
        .master-console-overlay .carousel-indicators button.indicator-chip,
        .master-console-overlay button.indicator-chip {
            border: 1px solid rgba(0, 0, 0, 0.15) !important;
        }
        
        .master-console-overlay .carousel-indicators-wrapper .carousel-indicators button.indicator-chip:hover,
        .master-console-overlay .carousel-indicators button.indicator-chip:hover,
        .master-console-overlay button.indicator-chip:hover {
            border-color: rgba(0, 0, 0, 0.25) !important;
        }
        
        .master-console-overlay .carousel-indicators-wrapper .carousel-indicators button.indicator-chip.active,
        .master-console-overlay .carousel-indicators button.indicator-chip.active,
        .master-console-overlay button.indicator-chip.active {
            border: 1px solid #60a5fa !important;
        }
        
        .dark-mode .master-console-overlay .carousel-indicators-wrapper .carousel-indicators button.indicator-chip,
        .dark-mode .master-console-overlay .carousel-indicators button.indicator-chip,
        .dark-mode .master-console-overlay button.indicator-chip,
        .main-content.console-dark-mode .master-console-overlay .carousel-indicators-wrapper .carousel-indicators button.indicator-chip,
        .main-content.console-dark-mode .master-console-overlay .carousel-indicators button.indicator-chip,
        .main-content.console-dark-mode .master-console-overlay button.indicator-chip {
            border: 1px solid rgba(255, 255, 255, 0.2) !important;
        }
        
        .dark-mode .master-console-overlay .carousel-indicators-wrapper .carousel-indicators button.indicator-chip:hover,
        .dark-mode .master-console-overlay .carousel-indicators button.indicator-chip:hover,
        .dark-mode .master-console-overlay button.indicator-chip:hover,
        .main-content.console-dark-mode .master-console-overlay .carousel-indicators-wrapper .carousel-indicators button.indicator-chip:hover,
        .main-content.console-dark-mode .master-console-overlay .carousel-indicators button.indicator-chip:hover,
        .main-content.console-dark-mode .master-console-overlay button.indicator-chip:hover {
            border-color: rgba(255, 255, 255, 0.3) !important;
        }
        
        .dark-mode .master-console-overlay .carousel-indicators-wrapper .carousel-indicators button.indicator-chip.active,
        .dark-mode .master-console-overlay .carousel-indicators button.indicator-chip.active,
        .dark-mode .master-console-overlay button.indicator-chip.active,
        .main-content.console-dark-mode .master-console-overlay .carousel-indicators-wrapper .carousel-indicators button.indicator-chip.active,
        .main-content.console-dark-mode .master-console-overlay .carousel-indicators button.indicator-chip.active,
        .main-content.console-dark-mode .master-console-overlay button.indicator-chip.active {
            border: 1px solid #60a5fa !important;
        }
        
        .master-console-overlay input,
        .master-console-overlay textarea {
            border: 1px solid #e2e0d9 !important;
        }
        
        .dark-mode .master-console-overlay input,
        .dark-mode .master-console-overlay textarea {
            border: 1px solid rgba(255, 255, 255, 0.3) !important;
        }
        
        /* Processing Console Styling - MISSING CSS */
        .processing-console {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            z-index: 9999;
            padding: 20px;
            box-sizing: border-box;
        }
        
        .processing-console.active {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .console-content {
            background: #faf9f6;
            border-radius: 12px;
            padding: 30px;
            max-width: 600px;
            width: 100%;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        }
        
        .console-header {
            text-align: center;
            margin-bottom: 30px;
        }
        
        .console-header h2 {
            color: #111827;
            font-size: 24px;
            font-weight: 600;
            margin: 0 0 10px 0;
            font-family: 'Geist', sans-serif;
        }
        
        .batch-id {
            color: #6b7280;
            font-size: 14px;
            font-family: 'Geist', sans-serif;
        }
        
        .progress-bar {
            position: relative;
            background: #f0efe9;
            border-radius: 8px;
            height: 12px;
            margin: 20px 0;
            overflow: hidden;
        }
        
        .progress-fill {
            background: linear-gradient(90deg, #10b981, #059669);
            height: 100%;
            width: 0%;
            border-radius: 8px;
            transition: width 0.3s ease;
        }
        
        .progress-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 12px;
            font-weight: 600;
            color: #111827;
            font-family: 'Geist', sans-serif;
        }
        
        .status-log {
            background: #f9fafb;
            border-radius: 8px;
            padding: 15px;
            max-height: 200px;
            overflow-y: auto;
            font-family: 'Monaco', 'Menlo', monospace;
            font-size: 13px;
            line-height: 1.4;
            color: #374151;
        }
        
        /* Processing Console Dark Mode */
        .dark-mode .console-content {
            background: #2E2E2E;
            border: 1px solid rgba(255, 255, 255, 0.3);
        }
        
        .dark-mode .console-header h2 {
            color: rgba(255, 255, 255, 0.9);
        }
        
        .dark-mode .batch-id {
            color: rgba(255, 255, 255, 0.6);
        }
        
        .dark-mode .progress-bar {
            background: #374151;
        }
        
        .dark-mode .progress-text {
            color: rgba(255, 255, 255, 0.9);
        }
        
        .dark-mode .status-log {
            background: #1f1f1f;
            color: rgba(255, 255, 255, 0.8);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        /* Complete Processing Console Dark Mode Styling */
        .dark-mode .processing-console {
            background: rgba(0, 0, 0, 0.9);
        }
        
        .dark-mode .status-item {
            color: rgba(255, 255, 255, 0.8);
        }
        
        .dark-mode .status-item.pending {
            color: rgba(255, 193, 7, 0.9);
        }
        
        .dark-mode .status-item.active {
            color: rgba(0, 245, 255, 0.9);
        }
        
        .dark-mode .status-item.completed {
            color: rgba(34, 197, 94, 0.9);
        }
        
        .dark-mode .status-item.error {
            color: rgba(239, 68, 68, 0.9);
        }
        
        .dark-mode .progress-fill {
            background: linear-gradient(90deg, #10b981, #00d4aa);
        }

        .dark-mode .master-console-overlay .dropdown-icon {
            color: rgba(255, 255, 255, 0.6);
        }
        
        .dark-mode .master-console-overlay .project-icon {
            filter: brightness(0) invert(1);
        }

        body:not(.dark-mode) .master-console-overlay .project-icon {
            filter: brightness(0);
        }
        
        .dark-mode .master-console-overlay .user-greeting-container:hover {
            background: rgba(255, 255, 255, 0.1);
        }
        
        .dark-mode .master-console-overlay .user-dropdown {
            background: #1f1f1f;
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
        }
        
        .dark-mode .master-console-overlay .dropdown-item {
            color: rgba(255, 255, 255, 0.9);
        }
        
        .dark-mode .master-console-overlay .dropdown-item:hover {
            background: rgba(255, 255, 255, 0.1);
        }
        
        .dark-mode .master-console-overlay .user-subscription {
            color: rgba(255, 255, 255, 0.6);
        }
        
        .dark-mode .master-console-overlay .header-btn {
            color: rgba(255, 255, 255, 0.9);
        }
        
        .dark-mode .master-console-overlay .header-btn:hover {
            background: rgba(255, 255, 255, 0.1);
        }
        
        .dark-mode .master-console-overlay .console-close-btn {
            background: #ef4444;
            color: white;
        }
        
        .dark-mode .master-console-overlay .invite-btn {
            background: #60a5fa;
            color: white;
        }
        
        .dark-mode .master-console-overlay .upgrade-btn {
            color: rgba(255, 255, 255, 0.6);
        }
        
        .dark-mode .master-console-overlay .reset-btn {
            background: #fbbf24;
            color: white;
        }
        
        .dark-mode .master-console-overlay .reset-btn:hover {
            background: #d97706;
        }
        
        .dark-mode .master-console-overlay .main-container {
            background: #2E2E2E;
        }
        
        .dark-mode .master-console-overlay .left-sidebar {
            background: #2E2E2E;
            border-right: 1px solid rgba(255, 255, 255, 0.3);
        }

        .dark-mode .master-console-overlay .sidebar-resize-handle:hover {
            background: rgba(255, 255, 255, 0.3);
        }
        
        .dark-mode .master-console-overlay .main-content {
            background: transparent;
        }
        
        .dark-mode .master-console-overlay .sidebar-bottom {
            background: #2E2E2E;
            border-top: 1px solid rgba(255, 255, 255, 0.3);
        }
        
        
        
        .dark-mode .master-console-overlay .input-placeholder {
            background: #1f1f1f;
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: rgba(255, 255, 255, 0.6);
        }
        
        .dark-mode .master-console-overlay .bottom-toolbar {
            display: none;
        }
        
        .dark-mode .master-console-overlay .pipeline-step {
            color: rgba(255, 255, 255, 0.9);
        }
        
        .dark-mode .master-console-overlay .pipeline-step:hover {
            background: rgba(255, 255, 255, 0.1);
        }
        .dark-mode .master-console-overlay .pipeline-step.active {
            background: #111827;
            color: white;
        }
        
        .dark-mode .master-console-overlay .pipeline-step-number {
            background: rgba(255, 255, 255, 0.3);
            color: rgba(255, 255, 255, 0.9);
        }
        
        .dark-mode .master-console-overlay .pipeline-step.active .pipeline-step-number {
            background: white;
            color: #111827;
        }

        /* Dark mode sidebar chat text */
        .dark-mode .master-console-overlay .agent-name {
            color: rgba(255, 255, 255, 0.9);
        }
        .dark-mode .master-console-overlay .agent-time {
            color: rgba(255, 255, 255, 0.5);
        }
        .dark-mode .master-console-overlay .agent-response {
            color: rgba(255, 255, 255, 0.85);
        }
        .dark-mode .master-console-overlay .thinking-text {
            color: rgba(255, 255, 255, 0.5);
        }
        .dark-mode .master-console-overlay .thinking-icon {
            color: rgba(255, 255, 255, 0.5);
        }

        /* Dark mode input and textarea styling */
        .dark-mode .master-console-overlay input,
        .dark-mode .master-console-overlay textarea {
            background: #1f1f1f !important;
            color: rgba(255, 255, 255, 0.9) !important;
            border: 1px solid rgba(255, 255, 255, 0.3) !important;
        }
        
        .dark-mode .master-console-overlay input::placeholder,
        .dark-mode .master-console-overlay textarea::placeholder {
            color: rgba(255, 255, 255, 0.6) !important;
        }
        
        .dark-mode .master-console-overlay .title-input {
            background: #1f1f1f !important;
            color: rgba(255, 255, 255, 0.9) !important;
            border: 1px solid rgba(255, 255, 255, 0.3) !important;
        }
        
        /* Chat history message styling */
        .dark-mode .master-console-overlay .chat-message.user {
            color: rgba(255, 255, 255, 0.9) !important;
        }
        
        .dark-mode .master-console-overlay .chat-message.assistant {
            color: rgba(255, 255, 255, 0.8) !important;
        }
        
        /* Fix specific console input and button elements */
        .dark-mode .master-console-overlay #consoleChatInput {
            color: rgba(255, 255, 255, 0.9) !important;
        }
        
        .dark-mode .master-console-overlay #consoleChatInput::placeholder {
            color: rgba(255, 255, 255, 0.6) !important;
        }
        
        /* Fix upload button (+ icon) color */
        .dark-mode .master-console-overlay button svg {
            stroke: rgba(255, 255, 255, 0.8) !important;
        }
        
        /* Fix send button background and icon */
        .master-console-overlay button[onclick*="sendChatMessage"] {
            background: #2E2E2E !important;
        }
        
        .dark-mode .master-console-overlay button[onclick*="sendChatMessage"] {
            background: rgba(255, 255, 255, 0.6) !important;
        }
        
        .master-console-overlay button[onclick*="sendChatMessage"] svg {
            color: var(--bg-primary) !important;
        }
        
        .dark-mode .master-console-overlay button[onclick*="sendChatMessage"] svg {
            color: var(--bg-primary) !important;
        }
        
        /* Fix button text colors in dark mode */
        .dark-mode .master-console-overlay button {
            color: rgba(255, 255, 255, 0.8) !important;
        }

        .user-info {
            color: white;
            font-weight: bold;
            font-size: 15px;
            font-family: 'Geist', sans-serif;
            cursor: pointer;
            position: relative;
            display: flex;
            align-items: center;
            gap: 5px;
            padding: 8px 16px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 20px;
            transition: all 0.2s ease;
        }

        .user-info:hover {
            background: rgba(255, 255, 255, 0.15);
            transform: scale(1.02);
        }

        .hamburger-icon {
            font-size: 16px;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            border-radius: 6px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: all 0.2s ease;
        }

        .hamburger-icon:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: scale(1.05);
        }

        .user-dropdown {
            position: absolute;
            top: 100%;
            right: 0;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
            border: 1px solid rgba(255, 255, 255, 0.2);
            min-width: 200px;
            z-index: 1000;
            display: none;
            margin-top: 5px;
        }

        /* Special positioning for console dropdown to prevent cutoff */
        #consoleUserDropdown {
            right: auto;
            left: 0;
        }

        .user-dropdown.active {
            display: block;
        }

        .dropdown-item {
            padding: 12px 16px;
            color: #333;
            cursor: pointer;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            transition: background-color 0.2s ease;
        }

        .dropdown-item:hover {
            background: rgba(0, 0, 0, 0.05);
        }

        .dropdown-item:last-child {
            border-bottom: none;
        }

        .dropdown-separator {
            height: 1px;
            background: rgba(0, 0, 0, 0.1);
            margin: 0;
        }

        .user-profile {
            padding: 16px !important;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }

        .user-profile:hover {
            background: none !important;
            cursor: default !important;
        }

        .user-subscription {
            font-size: 10px;
            color: #666;
            margin-top: 4px;
            padding: 2px 6px;
            background: rgba(0, 150, 255, 0.1);
            border: 1px solid rgba(0, 150, 255, 0.3);
            border-radius: 4px;
            display: inline-block;
        }

        /* ===== NEW USER DROPDOWN PANEL ===== */
        .user-dropdown-panel {
            position: absolute;
            top: 50px;
            right: 0;
            width: 260px;
            background: #1a1a24;
            border-radius: 16px;
            border: 1px solid rgba(255,255,255,0.08);
            box-shadow: 0 20px 60px rgba(0,0,0,0.5);
            z-index: 10000;
            overflow: hidden;
            font-family: 'Geist', sans-serif;
        }
        body:not(.dark-mode) .user-dropdown-panel {
            background: #faf9f6;
            border-color: rgba(0,0,0,0.08);
            box-shadow: 0 20px 60px rgba(0,0,0,0.12);
        }
        .udd-header {
            padding: 20px 20px 16px;
            border-bottom: 1px solid rgba(255,255,255,0.06);
        }
        body:not(.dark-mode) .udd-header { border-bottom-color: rgba(0,0,0,0.06); }
        .udd-avatar {
            width: 44px; height: 44px; border-radius: 50%;
            background: linear-gradient(135deg, #60a5fa, #7c6aef);
            display: flex; align-items: center; justify-content: center;
            color: #fff; font-size: 16px; font-weight: 700; flex-shrink: 0;
        }
        .udd-name { font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.9); }
        body:not(.dark-mode) .udd-name { color: #0a0a0f; }
        .udd-email { font-size: 11px; color: rgba(255,255,255,0.4); margin-top: 1px; }
        body:not(.dark-mode) .udd-email { color: #999; }
        .udd-btn-primary {
            flex: 1; padding: 8px 0; border-radius: 8px;
            background: linear-gradient(135deg, #60a5fa, #6366f1);
            color: #fff; border: none; font-size: 12px; font-weight: 600; cursor: pointer;
        }
        .udd-btn-primary:hover { opacity: 0.9; }
        .udd-btn-secondary {
            flex: 1; padding: 8px 0; border-radius: 8px;
            background: transparent; color: rgba(255,255,255,0.6);
            border: 1px solid rgba(255,255,255,0.1); font-size: 12px; font-weight: 500; cursor: pointer;
        }
        body:not(.dark-mode) .udd-btn-secondary { color: rgba(0,0,0,0.5); border-color: rgba(0,0,0,0.1); }
        .udd-credits {
            padding: 16px 20px;
            border-bottom: 1px solid rgba(255,255,255,0.06);
            color: rgba(255,255,255,0.85);
        }
        body:not(.dark-mode) .udd-credits { border-bottom-color: rgba(0,0,0,0.06); color: #0a0a0f; }
        .udd-credits-spent { color: rgba(255,255,255,0.6); }
        .udd-credits-spent strong { color: rgba(255,255,255,0.9); }
        body:not(.dark-mode) .udd-credits-spent { color: #666; }
        body:not(.dark-mode) .udd-credits-spent strong { color: #0a0a0f; }
        .udd-credits-limit { color: rgba(255,255,255,0.4); }
        body:not(.dark-mode) .udd-credits-limit { color: #999; }
        .udd-credits-bar-bg {
            height: 6px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden;
        }
        body:not(.dark-mode) .udd-credits-bar-bg { background: rgba(0,0,0,0.06); }
        .udd-credits-bar-fill {
            height: 100%; border-radius: 3px;
            background: linear-gradient(90deg, #60a5fa, #7c6aef);
            transition: width 0.4s ease;
        }
        .udd-credits-bar-fill.high { background: linear-gradient(90deg, #ef4444, #f97316); }
        .udd-menu { padding: 8px 0; }
        .udd-menu-item {
            display: flex; align-items: center; padding: 10px 20px; gap: 12px;
            cursor: pointer; transition: background 0.15s, color 0.15s;
            color: rgba(255,255,255,0.4); font-size: 13px; font-weight: 500;
        }
        .udd-menu-item:hover { background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.8); }
        body:not(.dark-mode) .udd-menu-item { color: rgba(0,0,0,0.4); }
        body:not(.dark-mode) .udd-menu-item:hover { background: rgba(0,0,0,0.03); color: rgba(0,0,0,0.8); }
        .udd-menu-item.udd-danger { color: #ef4444; }
        .udd-menu-item.udd-danger:hover { background: rgba(239,68,68,0.06); color: #ef4444; }
        .udd-menu-item span { flex: 1; }
        .udd-badge {
            font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 4px;
            background: rgba(99,102,241,0.15); color: #7c6aef; flex: none !important;
        }
        .udd-toggle { margin-left: auto; flex: none; }
        .udd-toggle-track {
            width: 36px; height: 20px; border-radius: 10px;
            background: rgba(255,255,255,0.1); position: relative;
            cursor: pointer; transition: background 0.2s;
        }
        body:not(.dark-mode) .udd-toggle-track { background: rgba(0,0,0,0.1); }
        .udd-toggle-track.active {
            background: linear-gradient(135deg, #60a5fa, #6366f1);
        }
        .udd-toggle-thumb {
            width: 16px; height: 16px; border-radius: 50%;
            background: #fff; position: absolute; top: 2px; left: 2px;
            transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.3);
        }
        .udd-toggle-track.active .udd-toggle-thumb { transform: translateX(16px); }
        .udd-avatar-ring {
            position: relative; width: 48px; height: 48px; flex-shrink: 0;
        }
        .udd-ring-svg {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            transform: rotate(-90deg);
        }
        .udd-ring-bg { stroke: rgba(255,255,255,0.06); }
        body:not(.dark-mode) .udd-ring-bg { stroke: rgba(0,0,0,0.06); }
        .udd-ring-fill {
            stroke: url(#uddCreditGrad);
            stroke-linecap: round;
            transition: stroke-dashoffset 0.4s ease;
        }
        .udd-avatar-inner {
            position: absolute; top: 4px; left: 4px; width: 40px; height: 40px;
            border-radius: 50%;
            background: linear-gradient(135deg, #60a5fa, #7c6aef);
            display: flex; align-items: center; justify-content: center;
            color: #fff; font-size: 14px; font-weight: 700;
            overflow: hidden; cursor: pointer;
        }
        .udd-avatar-inner img {
            width: 100%; height: 100%; object-fit: cover;
        }

        /* Avatar crop modal */
        .avatar-crop-overlay {
            position: fixed; inset: 0; z-index: 99999;
            display: flex; align-items: center; justify-content: center;
            background: rgba(0,0,0,0.7);
            backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
        }
        .avatar-crop-modal {
            background: rgba(22,22,32,0.95);
            backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 16px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.5);
            padding: 24px;
            width: 340px;
            max-width: 90vw;
        }
        body:not(.dark-mode) .avatar-crop-modal {
            background: rgba(255,255,255,0.95);
            border-color: rgba(0,0,0,0.08);
            box-shadow: 0 20px 60px rgba(0,0,0,0.12);
        }
        .avatar-crop-title {
            font-size: 16px; font-weight: 700;
            color: rgba(255,255,255,0.9);
            text-align: center; margin-bottom: 20px;
        }
        body:not(.dark-mode) .avatar-crop-title { color: #0a0a0f; }
        .avatar-crop-preview {
            width: 280px; height: 280px; margin: 0 auto;
            position: relative; overflow: hidden;
            border-radius: 12px;
            background: #0a0a0f;
            cursor: grab;
            user-select: none; -webkit-user-select: none;
            touch-action: none;
        }
        .avatar-crop-preview:active { cursor: grabbing; }
        body:not(.dark-mode) .avatar-crop-preview { background: #e5e5e5; }
        .avatar-crop-preview img {
            position: absolute;
            transform-origin: center center;
            pointer-events: none;
            will-change: transform;
        }
        .avatar-crop-circle-mask {
            position: absolute; inset: 0;
            pointer-events: none;
            background: radial-gradient(circle 100px at center, transparent 99px, rgba(0,0,0,0.55) 100px);
        }
        body:not(.dark-mode) .avatar-crop-circle-mask {
            background: radial-gradient(circle 100px at center, transparent 99px, rgba(255,255,255,0.55) 100px);
        }
        .avatar-crop-circle-border {
            position: absolute;
            top: 50%; left: 50%;
            width: 200px; height: 200px;
            transform: translate(-50%, -50%);
            border: 2px dashed rgba(255,255,255,0.3);
            border-radius: 50%;
            pointer-events: none;
        }
        body:not(.dark-mode) .avatar-crop-circle-border {
            border-color: rgba(0,0,0,0.2);
        }
        .avatar-crop-zoom {
            display: flex; align-items: center; gap: 10px;
            margin: 16px auto; width: 280px; padding: 0 4px;
        }
        .avatar-crop-zoom svg {
            flex-shrink: 0;
            color: rgba(255,255,255,0.4);
        }
        body:not(.dark-mode) .avatar-crop-zoom svg { color: rgba(0,0,0,0.4); }
        .avatar-crop-zoom input[type="range"] {
            flex: 1; height: 4px;
            -webkit-appearance: none; appearance: none;
            background: rgba(255,255,255,0.1);
            border-radius: 2px; outline: none;
        }
        body:not(.dark-mode) .avatar-crop-zoom input[type="range"] {
            background: rgba(0,0,0,0.1);
        }
        .avatar-crop-zoom input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none; appearance: none;
            width: 16px; height: 16px; border-radius: 50%;
            background: linear-gradient(135deg, #60a5fa, #6366f1);
            cursor: pointer; border: 2px solid #fff;
            box-shadow: 0 1px 4px rgba(0,0,0,0.3);
        }
        .avatar-crop-actions {
            display: flex; gap: 10px; margin-top: 20px;
        }
        .avatar-crop-cancel {
            flex: 1; padding: 10px 0; border-radius: 8px;
            background: transparent;
            border: 1px solid rgba(255,255,255,0.1);
            color: rgba(255,255,255,0.6);
            font-size: 13px; font-weight: 500;
            cursor: pointer; font-family: inherit;
        }
        body:not(.dark-mode) .avatar-crop-cancel {
            border-color: rgba(0,0,0,0.1);
            color: rgba(0,0,0,0.5);
        }
        .avatar-crop-save {
            flex: 1; padding: 10px 0; border-radius: 8px;
            background: linear-gradient(135deg, #60a5fa, #6366f1);
            color: #fff; border: none;
            font-size: 13px; font-weight: 600;
            cursor: pointer; font-family: inherit;
            transition: opacity 0.15s;
        }
        .avatar-crop-save:hover { opacity: 0.9; }

        .udd-divider { height: 1px; background: rgba(255,255,255,0.06); margin: 0 12px; }
        body:not(.dark-mode) .udd-divider { background: rgba(0,0,0,0.06); }

        .agency-static-interface.active {
            display: flex !important;
        }

        /* Hide video background in agency mode */
        .agency-mode .background-video {
            display: none;
        }

        /* Homepage drag overlay — full viewport */
        #dragDropOverlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 9999;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 12px;
            text-align: center;
        }

        /* Homepage drag overlay is hidden/shown via JS based on console state */


        /* Universal drag-drop overlay — shared by homepage and console */
        .drag-drop-overlay .drop-content {
            text-align: center;
            pointer-events: none;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
        }
        .drag-drop-overlay .drop-label {
            font-size: 18px;
            font-weight: 500;
        }
        .drag-drop-overlay .drop-sublabel {
            font-size: 13px;
            margin-top: 8px;
        }

        /* Drag overlay frosted glass — matches .agency-chat-container */
        .drag-drop-overlay {
            background: rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(20px) saturate(1.2);
            -webkit-backdrop-filter: blur(20px) saturate(1.2);
            border: none;
        }
        body:not(.dark-mode) .drag-drop-overlay {
            background: rgba(255, 255, 255, 0.35);
            backdrop-filter: blur(20px) saturate(1.2);
            -webkit-backdrop-filter: blur(20px) saturate(1.2);
            will-change: backdrop-filter;
}
        .drag-drop-overlay .drop-label {
            color: rgba(255, 255, 255, 0.9);
        }
        .drag-drop-overlay .drop-sublabel {
            color: rgba(255, 255, 255, 0.5);
        }
        body:not(.dark-mode) .drag-drop-overlay .drop-label {
            color: rgba(0, 0, 0, 0.75);
        }
        body:not(.dark-mode) .drag-drop-overlay .drop-sublabel {
            color: rgba(0, 0, 0, 0.45);
        }

        #consoleDragOverlay {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 100;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 12px;
            text-align: center;
        }

        /* Console drag overlay inherits .drag-drop-overlay frosted glass styles */

        /* Keep agency interface visible during drag so backdrop-filter can blur the video */

        .agency-mode .upload-modal {
            z-index: 9999;
        }

        /* Show nav elements in agency mode */
        .agency-nav-elements {
pointer-events: auto;
            position: fixed;
            top: 20px;
            left: 20px;
            right: 20px;
            z-index: 200;
            display: none;
            justify-content: space-between;
            align-items: center;
        }

        .agency-mode .agency-nav-elements {
pointer-events: auto;
            display: flex;
        }

        .agency-user-info {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 8px;
            padding: 4px 4px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
            backdrop-filter: blur(10px);
            color: rgba(255, 255, 255, 0.9);
            font-family: 'Geist', sans-serif;
            font-size: 13px;
        }

        .agency-user-info:hover {
            background: rgba(255, 255, 255, 0.15);
            border-color: rgba(255, 255, 255, 0.3);
        }

        .agency-user-avatar {
            width: 28px;
            height: 28px;
            border-radius: 5px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 600;
            font-size: 12px;
            flex-shrink: 0;
        }

        .agency-user-name {
            color: rgba(255, 255, 255, 0.95);
            font-weight: 500;
            white-space: nowrap;
            font-size: 13px;
            text-transform: capitalize;
        }

        .agency-user-info .dropdown-icon {
            width: 12px;
            height: 12px;
            stroke: white;
            color: white;
            transition: all 0.3s ease;
            flex-shrink: 0;
        }

        body:not(.dark-mode) .agency-user-info .dropdown-icon {
            stroke: white;
            color: white;
        }

        body.dark-mode .agency-user-info .dropdown-icon {
            stroke: rgba(255, 255, 255, 0.9);
            color: rgba(255, 255, 255, 0.9);
        }

        /* Time-Adaptive Gradient Background with Animation */
        .gradient-bg-day, .gradient-bg-night {
            transition: opacity 0.25s ease;
        }
        .gradient-bg-day {
            background: radial-gradient(circle at bottom,
                rgba(88, 28, 135, 0.7) 0%,
                rgba(76, 52, 138, 0.8) 25%,
                rgba(130, 76, 160, 0.7) 50%,
                rgba(214, 74, 149, 0.6) 75%,
                rgba(255, 112, 112, 0.5) 100%);
            background-size: 120% 120%;
            animation: gradientShift 20s ease-in-out infinite;
        }

        .gradient-bg-night {
            background: radial-gradient(circle at bottom, 
                rgba(76, 52, 138, 0.8) 0%, 
                rgba(88, 28, 135, 0.9) 25%, 
                rgba(130, 76, 160, 0.8) 50%, 
                rgba(214, 74, 149, 0.7) 75%, 
                rgba(255, 112, 112, 0.6) 100%);
            background-size: 120% 120%;
            animation: gradientShift 20s ease-in-out infinite;
        }

        @keyframes gradientShift {
            0%, 100% { 
                background-position: 0% 0%;
            }
            25% { 
                background-position: 50% 25%;
            }
            50% { 
                background-position: 100% 50%;
            }
            75% { 
                background-position: 25% 75%;
            }
        }

        /* Dark Mode Chat Console Styles */
        .gradient-bg-night .agency-chat-input {
            background: #303030 !important;
            border: none !important;
            box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
        }

        .gradient-bg-night .agency-chat-input input {
            color: #ffffff !important;
            background: transparent !important;
        }

        .gradient-bg-night .agency-chat-input input::placeholder {
            color: rgba(255,255,255,0.6) !important;
        }

        .gradient-bg-night .animated-placeholder {
            color: #ffffff !important;
            font-weight: 400 !important;
        }

        .gradient-bg-night .agency-chat-input button {
            color: rgba(255,255,255,0.8) !important;
            border: none !important;
            outline: none !important;
        }

        .gradient-bg-night .agency-chat-input button:hover {
            color: #ffffff !important;
            background: rgba(255,255,255,0.1) !important;
        }

        .gradient-bg-night .agency-nav-item {
            color: rgba(255,255,255,0.9) !important;
            border-color: rgba(255,255,255,0.3) !important;
            background: rgba(0,0,0,0.2) !important;
        }

        .gradient-bg-night .agency-nav-item:hover {
            color: #ffffff !important;
            background: rgba(255,255,255,0.1) !important;
        }

        /* Dark Mode Container Styles */
        .gradient-bg-night .agency-unified-module {
            background: #303030 !important;
            border: none !important;
            box-shadow: 0 12px 40px rgba(0,0,0,0.6) !important;
        }

        /* Dark Mode Bottom Navigation - Fix white background */
        .gradient-bg-night .agency-bottom-nav {
            background: #333131 !important;
            border: 1px solid rgba(255,255,255,0.2) !important;
        }

        /* Make navigation buttons dark grey in dark mode */
        .gradient-bg-night .agency-nav-item:not(.center) {
            background: #303030 !important;
            color: rgba(255,255,255,0.9) !important;
            border: none !important;
        }
        
        .gradient-bg-night .agency-nav-item.center {
            background: #303030 !important;
            color: rgba(255,255,255,0.9) !important;
            border: 1px solid rgba(255,255,255,0.15) !important;
        }

        /* Public Button Popup Modal */

        .agency-content {
            width: 100vw;
            height: 100vh;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            text-align: center;
            position: fixed;
            padding-top: 180px;
            box-sizing: border-box;
            top: 0;
            left: 0;
            z-index: 100;
            pointer-events: auto;
        }

        .agency-title {
            color: white;
            font-size: 3.5rem;
            font-weight: 300;
            margin: 0 0 10px 0;
            letter-spacing: -0.02em;
        }

        .agency-title .versionary-text {
            background: linear-gradient(45deg, #f97316, #dc2626);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .agency-subtitle {
            display: none;
        }

        .agency-unified-module {
            pointer-events: auto;
            width: 60vw;
            max-width: none;
            background: #faf9f6 !important;
            background: rgba(250, 249, 246, 0.95);
            border: 1px solid rgba(0,0,0,0.12);
            border-radius: 24px;
            padding: 25px;
            backdrop-filter: blur(12px);
            box-shadow: 0 12px 40px rgba(0,0,0,0.2);
            margin: -15px auto 0 auto;
        }

        .agency-chat-input {
            width: 100%;
            background: #faf9f6 !important;
            border-radius: 20px;
            padding: 20px 24px;
            display: flex;
            align-items: flex-start;
            gap: 14px;
            backdrop-filter: blur(15px);
            border: none !important;
            min-height: 75px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
            margin-bottom: 20px;
        }

        .agency-chat-input button {
            background: none;
            border: none;
            color: #374151;
            cursor: pointer;
            padding: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            transition: all 0.2s ease;
        }
        
        .agency-chat-input button:hover {
            color: #1f2937;
            background: rgba(0,0,0,0.08);
        }

        .agency-chat-input input {
            flex: 1;
            border: none;
            outline: none;
            background: transparent;
            color: #333;
            font-size: 16px;
            font-family: 'Geist', sans-serif;
            font-weight: 400;
            line-height: 1.4;
            display: none;
        }

        .agency-chat-input input::placeholder {
            color: #666;
        }

        .animated-placeholder {
            flex: 1;
            color: #4b5563;
            font-size: 13.5px;
            font-family: 'Geist', sans-serif;
            font-weight: 400;
            font-style: italic;
            line-height: 1.4;
            display: flex;
            align-items: center;
        }
        .animated-text {
            display: inline-block;
            position: relative;
        }

        .typing-text {
            display: inline;
            white-space: nowrap;
            height: 1.2em;
            vertical-align: bottom;
            margin-left: 4px;
        }

        .text-carousel {
            display: flex;
            flex-direction: column;
            animation: textSlide 4s infinite;
            position: absolute;
            top: 0;
        }

        @keyframes textSlide {
            0%, 30% { transform: translateY(0); }
            35%, 65% { transform: translateY(-100%); }
            70%, 95% { transform: translateY(-200%); }
            100% { transform: translateY(0); }
        }

        .carousel-item {
            height: 1.2em;
            display: flex;
            align-items: center;
        }

        .agency-chat-input input::placeholder {
            color: rgba(255,255,255,0.5);
        }

        .agency-submit-btn {
            background: #333;
            border: none;
            border-radius: 50%;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s ease;
            color: white;
        }

        .agency-submit-btn:hover {
            background: #faf9f6;
        }
        
        .agency-chat-container {
            width: 100%;
            max-width: 800px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.12);
            backdrop-filter: blur(20px) saturate(1.2);
            -webkit-backdrop-filter: blur(20px) saturate(1.2);
            border-radius: 28px;
            padding: 12px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
            border: 1px solid rgba(255, 255, 255, 0.18);
            pointer-events: auto;
            position: relative;
            z-index: 1;
        }

        .agency-textarea {
            width: 100%;
            padding: 8px;
            border: none;
            border-radius: 0;
            font-size: 15px;
            font-family: 'Geist', sans-serif;
            background: transparent;
            color: var(--text-primary);
            box-sizing: border-box;
            resize: none;
            min-height: 80px;
            margin-bottom: 8px;
        }

        .agency-textarea:focus {
            outline: none;
            background: transparent;
        }

        .agency-textarea::placeholder {
            color: var(--text-secondary);
        }

        .agency-button-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 8px;
        }

        .agency-button-group-left,
        .agency-button-group-right {
            display: flex;
            gap: 6px;
            align-items: center;
        }

        .agency-action-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 6px 14px;
            height: 36px;
            background: transparent;
            border: 1px solid var(--border-color);
            border-radius: 9999px;
            font-size: 13px;
            font-weight: 500;
            font-family: 'Geist', sans-serif;
            cursor: pointer;
            transition: all 0.2s ease;
            color: var(--text-primary);
            pointer-events: auto;
            position: relative;
            z-index: 2;
        }

        .agency-action-btn:hover {
            background: var(--bg-secondary);
            border-color: var(--border-color);
        }

        .agency-action-btn:active {
            opacity: 0.7;
        }

        .agency-action-btn svg {
            flex-shrink: 0;
        }

        .agency-icon-btn {
            width: 36px;
            padding: 0;
            gap: 0;
        }

        .agency-send-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0;
            padding: 0;
            width: 36px;
            height: 36px;
            background: #2E2E2E;
            color: white;
            border: none;
            border-radius: 9999px;
            font-size: 14px;
            font-weight: 600;
            font-family: 'Geist', sans-serif;
            cursor: pointer;
            transition: all 0.2s ease;
            pointer-events: auto;
            position: relative;
            z-index: 2;
        }
        
        .dark-mode .agency-send-btn {
            background: rgba(255, 255, 255, 0.6);
        }

        .agency-send-btn:hover {
            opacity: 0.9;
        }

        .agency-send-btn:active {
            opacity: 0.8;
        }

        .agency-send-btn svg {
            flex-shrink: 0;
            color: var(--bg-primary);
        }

        .dark-mode .agency-chat-container {
            background: rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        body:not(.dark-mode) .agency-chat-container {
            background: rgba(255, 255, 255, 0.55);
            border: 1px solid rgba(255, 255, 255, 0.4);
        }

        .console-chat-container {
            width: 100%;
            margin: 0 auto;
            background: var(--bg-primary);
            border-radius: 16px;
            padding: 6px;
            box-shadow: 
                0 8px 24px rgba(0, 0, 0, 0.1),
                0 0 0 1px var(--border-color);
            pointer-events: auto;
            position: relative;
            z-index: 1;
        }

        #consoleChatInput.console-textarea {
            width: 100%;
            padding: 10px 8px;
            border: none !important;
            border-radius: 0;
            font-size: 11.5px;
            /* Chat composer is body text → Geist per spec. !important overrides the
               global `textarea` mono exception (line 49). */
            font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
            background: none !important;
            color: var(--text-primary);
            transition: all 0.3s ease;
            box-sizing: border-box;
            resize: none;
            min-height: 40px;
            margin-bottom: 12px;
        }

        .console-textarea:focus {
            outline: none;
            background: var(--bg-primary);
        }

        .console-textarea::placeholder {
            color: var(--text-secondary);
        }

        .console-button-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 8px;
        }

        .console-button-group-left,
        .console-button-group-right {
            display: flex;
            gap: 4px;
            align-items: center;
        }

        .console-action-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            padding: 4px 10px;
            height: 28px;
            background: transparent;
            border: 1px solid var(--border-color);
            border-radius: 9999px;
            font-size: 12px;
            font-weight: 500;
            font-family: 'Geist', sans-serif;
            cursor: pointer;
            transition: all 0.2s ease;
            color: var(--text-primary);
            pointer-events: auto;
            position: relative;
            z-index: 2;
        }

        .console-action-btn:hover {
            background: var(--bg-secondary);
            border-color: var(--border-color);
        }

        .console-action-btn:active {
            opacity: 0.7;
        }

        .console-action-btn svg {
            flex-shrink: 0;
        }

        .console-icon-btn {
            width: 28px;
            padding: 0;
            gap: 0;
        }

        #consoleSubmitBtn.console-send-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0;
            padding: 0;
            width: 28px;
            height: 28px;
            background: #2E2E2E;
            color: #ffffff !important;
            border: none;
            border-radius: 9999px;
            font-size: 12px;
            font-weight: 600;
            font-family: 'Geist', sans-serif;
            cursor: pointer;
            transition: all 0.2s ease;
            pointer-events: auto;
            position: relative;
            z-index: 2;
        }
        
        .dark-mode #consoleSubmitBtn.console-send-btn {
            background: rgba(255, 255, 255, 0.6) !important;
        }
        .dark-mode #consoleSubmitBtn.console-send-btn svg {
            color: #2E2E2E !important;
            fill: #2E2E2E !important;
            stroke: #2E2E2E !important;
        }

        .console-send-btn:hover {
            opacity: 0.9;
        }

        .console-send-btn:active {
            opacity: 0.8;
        }

        .console-send-btn svg {
            flex-shrink: 0;
        }

        .dark-mode .console-chat-container {
            background: var(--bg-primary);
        }

        .agency-bottom-container {
            position: relative;
            width: 66.67vw;
            max-width: none;
            margin: 0 auto;
        }

        /* ===== DASHBOARD FULL-SCREEN OVERLAY ===== */
        .dashboard-overlay {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            z-index: 9000;
            display: none;
            transform: translateY(100%);
            transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
            overflow: hidden;
            background: rgba(0, 0, 0, 0.88);
            backdrop-filter: blur(20px) saturate(1.2);
            -webkit-backdrop-filter: blur(20px) saturate(1.2);
            font-family: 'Geist', sans-serif;
            pointer-events: none;
        }
        .dashboard-overlay.dashboard-open {
            transform: translateY(0);
            pointer-events: auto;
        }
        body:not(.dark-mode) .dashboard-overlay {
            background: rgba(245, 245, 247, 0.95);
        }
        .dashboard-overlay-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 24px 32px 16px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }
        body:not(.dark-mode) .dashboard-overlay-header {
            border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        }
        .dashboard-overlay-title {
            font-size: 20px;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.9);
            margin: 0;
        }
        body:not(.dark-mode) .dashboard-overlay-title {
            color: rgba(0, 0, 0, 0.85);
        }
        .dashboard-overlay-close {
            background: rgba(255, 255, 255, 0.1);
            border: none;
            border-radius: 50%;
            width: 36px; height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: rgba(255, 255, 255, 0.7);
            transition: background 200ms;
        }
        .dashboard-overlay-close:hover {
            background: rgba(255, 255, 255, 0.2);
        }
        body:not(.dark-mode) .dashboard-overlay-close {
            background: rgba(0, 0, 0, 0.06);
            color: rgba(0, 0, 0, 0.6);
        }
        body:not(.dark-mode) .dashboard-overlay-close:hover {
            background: rgba(0, 0, 0, 0.12);
        }
        .dashboard-overlay-content {
            padding: 24px 32px;
            overflow-y: auto;
            height: auto;
            flex: 1;
        }
        .dashboard-overlay-content .dashboard-grid {
            /* grid is now built inline by buildJobCardsHTML */
        }
        .dashboard-job-card {
            transition: transform 0.15s;
        }
        .dashboard-job-card:hover {
            transform: translateY(-2px);
        }
        .dashboard-empty {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 300px;
            color: rgba(255, 255, 255, 0.4);
            font-size: 15px;
        }
        body:not(.dark-mode) .dashboard-empty {
            color: rgba(0, 0, 0, 0.35);
        }
        .dashboard-skeleton-card {
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 12px;
            height: 220px;
            animation: skeletonPulse 1.5s ease-in-out infinite;
        }
        body:not(.dark-mode) .dashboard-skeleton-card {
            background: rgba(0, 0, 0, 0.04);
            border: 1px solid rgba(0, 0, 0, 0.06);
        }
        .dash-sidebar-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 16px;
            font-size: 13px;
            font-weight: 500;
            color: rgba(255,255,255,0.4);
            cursor: pointer;
            transition: all 0.15s;
        }
        .dash-sidebar-item:hover {
            background: rgba(255,255,255,0.04);
            color: rgba(255,255,255,0.8);
        }
        .dash-sidebar-item.active {
            background: rgba(59,130,246,0.08);
            color: #60a5fa;
            border-right: 2px solid #60a5fa;
        }
        body:not(.dark-mode) .dash-sidebar-item {
            color: rgba(0,0,0,0.4);
        }
        body:not(.dark-mode) .dash-sidebar-item:hover {
            background: rgba(0,0,0,0.04);
            color: rgba(0,0,0,0.8);
        }
        body:not(.dark-mode) .dash-sidebar-item.active {
            background: rgba(59,130,246,0.06);
            color: #60a5fa;
        }
        #dashboardSidebar {
            border-right: 1px solid rgba(255,255,255,0.06);
        }
        .dash-sidebar-header {
            color: rgba(255,255,255,0.3);
        }
        body:not(.dark-mode) #dashboardSidebar {
            border-right-color: rgba(0,0,0,0.08);
        }
        body:not(.dark-mode) .dash-sidebar-header {
            color: rgba(0,0,0,0.35);
        }

        /* ===== SETTINGS PAGE (Freepik-style) ===== */
        .settings-page {
            width: 100%; height: 100%; display: flex; flex-direction: column;
            background: #0d0d14; color: rgba(255,255,255,0.85);
        }
        body:not(.dark-mode) .settings-page { background: #f8f8f8; color: #0a0a0f; }
        .settings-header {
            display: flex; align-items: center; padding: 16px 32px;
            border-bottom: 1px solid rgba(255,255,255,0.06); gap: 8px;
        }
        body:not(.dark-mode) .settings-header { border-bottom-color: rgba(0,0,0,0.06); }
        .settings-breadcrumb { font-size: 13px; color: rgba(255,255,255,0.4); cursor: pointer; }
        body:not(.dark-mode) .settings-breadcrumb { color: #999; }
        .settings-breadcrumb-sep { font-size: 13px; color: rgba(255,255,255,0.2); }
        body:not(.dark-mode) .settings-breadcrumb-sep { color: #ccc; }
        .settings-breadcrumb-active { font-size: 13px; font-weight: 600; }
        .dash-wordmark {
            height: 16px; margin-left: auto; opacity: 0.4;
            filter: brightness(0) invert(1);
        }
        body:not(.dark-mode) .dash-wordmark {
            filter: brightness(0);
        }
        .settings-close {
            background: none; border: none; font-size: 18px;
            color: rgba(255,255,255,0.4); cursor: pointer; padding: 4px 8px;
        }
        body:not(.dark-mode) .settings-close { color: #999; }
        .settings-layout { display: flex; flex: 1; overflow: hidden; }
        .settings-sidebar {
            width: 220px; flex-shrink: 0; padding: 24px 16px;
            border-right: 1px solid rgba(255,255,255,0.06); overflow-y: auto;
        }
        body:not(.dark-mode) .settings-sidebar { border-right-color: rgba(0,0,0,0.06); }
        .settings-sidebar-group { margin-bottom: 24px; }
        .settings-sidebar-label {
            font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
            color: rgba(255,255,255,0.3); padding: 0 12px; margin-bottom: 8px;
        }
        body:not(.dark-mode) .settings-sidebar-label { color: #999; }
        .settings-sidebar-item {
            display: flex; align-items: center; gap: 10px; padding: 8px 12px;
            border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer;
            color: rgba(255,255,255,0.5); transition: all 0.15s;
        }
        body:not(.dark-mode) .settings-sidebar-item { color: rgba(0,0,0,0.5); }
        .settings-sidebar-item:hover {
            background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.8);
        }
        body:not(.dark-mode) .settings-sidebar-item:hover {
            background: rgba(0,0,0,0.04); color: rgba(0,0,0,0.8);
        }
        .settings-sidebar-item.active {
            background: rgba(99,102,241,0.1); color: #7c6aef;
        }
        body:not(.dark-mode) .settings-sidebar-item.active {
            background: rgba(99,102,241,0.08); color: #6366f1;
        }
        .settings-content { flex: 1; overflow-y: auto; padding: 32px 48px; }
        .settings-section { display: none; }
        .settings-section.active { display: block; }
        .settings-title { font-size: 22px; font-weight: 700; margin: 0 0 16px 0; }
        .settings-subtitle { font-size: 16px; font-weight: 600; margin: 16px 0 12px 0; }
        .settings-divider { height: 1px; background: rgba(255,255,255,0.06); margin: 16px 0; }
        body:not(.dark-mode) .settings-divider { background: rgba(0,0,0,0.06); }
        .settings-field-group { margin-bottom: 20px; }
        .settings-label {
            display: block; font-size: 12px; font-weight: 600; margin-bottom: 8px;
            color: rgba(255,255,255,0.5);
        }
        body:not(.dark-mode) .settings-label { color: #666; }
        .settings-input {
            width: 100%; max-width: 400px; padding: 10px 14px; border-radius: 8px;
            background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
            color: rgba(255,255,255,0.85); font-size: 13px; font-family: inherit;
        }
        body:not(.dark-mode) .settings-input {
            background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.1); color: #0a0a0f;
        }
        .settings-row {
            display: flex; align-items: center; justify-content: space-between; padding: 12px 0;
        }
        .settings-text-primary { color: rgba(255,255,255,0.85); }
        body:not(.dark-mode) .settings-text-primary { color: #0a0a0f; }
        .settings-text-muted { color: rgba(255,255,255,0.4); }
        body:not(.dark-mode) .settings-text-muted { color: #999; }
        .settings-description { font-size: 13px; color: rgba(255,255,255,0.4); margin: 4px 0; }
        body:not(.dark-mode) .settings-description { color: #999; }
        .settings-btn-outline {
            padding: 8px 20px; border-radius: 8px; background: transparent;
            border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.6);
            font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit;
        }
        body:not(.dark-mode) .settings-btn-outline {
            border-color: rgba(0,0,0,0.12); color: rgba(0,0,0,0.5);
        }
        .settings-btn-outline:disabled { opacity: 0.5; cursor: not-allowed; }
        .settings-connected-badge {
            font-size: 11px; padding: 3px 10px; border-radius: 12px;
            background: rgba(34,197,94,0.1); color: #34d399;
        }
        .settings-session-row {
            display: flex; align-items: center; justify-content: space-between;
            padding: 12px 16px; border-radius: 8px; background: rgba(255,255,255,0.02);
            border: 1px solid rgba(255,255,255,0.04); font-size: 13px;
        }
        body:not(.dark-mode) .settings-session-row {
            background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.04);
        }
        .settings-session-active { color: #34d399; font-size: 12px; }
        .settings-member-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
        .settings-credits-bar-bg {
            height: 8px; background: rgba(255,255,255,0.06); border-radius: 4px; overflow: hidden;
        }
        body:not(.dark-mode) .settings-credits-bar-bg { background: rgba(0,0,0,0.06); }
        .settings-credits-bar-fill {
            height: 100%; border-radius: 4px;
            background: linear-gradient(90deg, #60a5fa, #7c6aef);
        }
        .settings-danger-zone {
            padding: 16px 20px; border-radius: 12px;
            border: 1px solid rgba(239,68,68,0.2); background: rgba(239,68,68,0.03);
        }
        .settings-avatar-display { margin-bottom: 8px; }
        #settingsJobGrid { margin-top: 16px; }
        .settings-badge-muted {
            font-size: 11px; padding: 2px 8px; border-radius: 4px;
            background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.4);
        }
        body:not(.dark-mode) .settings-badge-muted {
            background: rgba(0,0,0,0.04); color: #999;
        }

        @keyframes skeletonPulse {
            0%, 100% { opacity: 0.4; }
            50% { opacity: 0.8; }
        }

        .agency-feature-badge {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 9999px;
            padding: 12px;
            margin: 0 auto 24px auto;
            font-family: 'Geist', sans-serif;
            backdrop-filter: blur(6px) drop-shadow(10px 4px 8px rgba(0, 0, 0, 0.9));
        }

        .agency-badge-text {
            color: rgba(255, 255, 255, 0.95);
            font-size: 14px;
        }

        .agency-badge-text span {
            font-weight: 600;
            color: #FEFBEA;
            text-transform: capitalize;
        }

        .agency-screen-logo {
            max-width: 500px;
            width: auto;
            margin: 0 auto 10px auto;
            display: block;
            filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.9));
        }

        .agency-main-title {
            color: #FEFBEA;
            font-size: 5.19rem;
            font-weight: 400;
            margin: 0 auto 20px auto;
            letter-spacing: -0.02em;
            font-family: 'Jersey 25', sans-serif;
            text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
            text-align: center;
        }

        .agency-main-title #dynamicUserName {
            color: #FEFBEA;
            font-size: inherit;
            font-weight: inherit;
            letter-spacing: inherit;
            font-family: inherit;
            text-shadow: inherit;
        }

        .agency-subtitle {
            color: rgba(255,255,255,0.7);
            filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.9));
            font-size: 0.975rem;
            margin: 0 auto 16px auto;
            font-weight: 500;
            font-family: 'Geist', sans-serif;
            display: block;
            text-align: center;
            max-width: 500px;
            width: 100%;
        }

        .agency-chat-header {
            color: white;
            font-size: 2.5rem;
            font-weight: 300;
            text-align: center;
            margin-bottom: 10px;
            letter-spacing: -0.02em;
            display: none;
        }

        .agency-chat-header .versionary-text {
            background: linear-gradient(45deg, #f97316, #dc2626);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .agency-bottom-nav {
            width: calc(100% - 40px);
            max-width: 800px;
            height: 60px;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            padding: 0 20px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(0,0,0,0.15);
            margin: 0 auto;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }

        .agency-nav-item:not(.center) {
            color: #555;
            font-weight: 600;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            padding: 6px 12px;
            border-radius: 10px;
            text-align: center;
            line-height: 1.2;
            flex: 1;
            margin: 0 3px;
            border: none !important;
            position: relative;
            overflow: hidden;
        }
        
        .agency-nav-item::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(92, 230, 92, 0.3);
            transform: translate(-50%, -50%);
            transition: width 0.6s ease-out, height 0.6s ease-out, opacity 0.6s ease-out;
            opacity: 0;
            pointer-events: none;
        }
        
        .agency-nav-item.clicked::after {
            width: 200%;
            height: 200%;
            opacity: 1;
        }
        
        /* Active state */
        .agency-nav-item:active {
            transform: scale(0.95);
        }
        
        .agency-nav-item.center {
            color: #333;
            font-weight: 600;
            font-size: 9px;
            cursor: pointer;
            transition: all 0.3s ease;
            padding: 9px 12px;
            border-radius: 10px;
            text-align: center;
            line-height: 1.2;
            flex: 1.125;
            margin: 0 3px;
            background: #e9ecef;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            border: 1px solid rgba(0,0,0,0.05) !important;
            display: flex;
            align-items: center;
        }

        .agency-nav-item:hover {
            background: rgba(255,255,255,0.2);
            transform: scale(1.05);
        }

        .agency-nav-item.center {
            background: #e9ecef;
            color: #333;
            font-size: 9px;
            padding: 9px 12px;
            border-radius: 10px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            border: 1px solid rgba(0,0,0,0.05);
            flex: 1.125;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: row;
            gap: 4px;
            min-height: 54px;
        }

        .loading-spinner {
            width: 12px;
            height: 12px;
            border: 2px solid #ccc;
            border-top: 2px solid #333;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        @keyframes reframeGrabPulse {
            0%, 100% { border-color: rgba(0, 255, 0, 0.8); box-shadow: inset 0 0 8px rgba(0, 255, 0, 0.3); }
            50% { border-color: rgba(0, 255, 0, 0.4); box-shadow: inset 0 0 4px rgba(0, 255, 0, 0.1); }
        }

        .agency-nav-item.center:hover {
            background: rgba(255,255,255,0.4);
            transform: scale(1.08);
        }

        /* Responsive design for toggle */
        @media (max-width: 768px) {
            .tier-toggle {
pointer-events: auto;
                width: 160px;
                height: 35px;
                top: 12px;
            }
            
            .tier-option {
                font-size: 0.7rem;
                padding: 4px 8px;
            }

            .agency-workflow {
                width: 66.67%;
                height: 60px;
                padding: 0 10px;
            }

            .workflow-step {
                font-size: 11px;
                padding: 6px 8px;
                margin: 0 2px;
                min-height: 30px;
            }

            .workflow-step.center-chat {
                font-size: 11px;
                padding: 6px 8px;
                margin: 0 2px;
                line-height: 1.2;
                text-align: center;
                gap: 4px;
            }

            .workflow-step.center-chat span {
                font-size: 11px !important;
                font-weight: bold !important;
            }

            .agency-title {
                font-size: 2.5rem;
            }

            .agency-content {
                padding-top: 120px;
            }

            .agency-subtitle {
                font-size: 1rem;
                max-width: 300px;
            }

            .agency-bottom-container {
                width: 85%;
            }

            .agency-bottom-nav {
                height: 60px;
                padding: 0 10px;
            }

            .agency-nav-item {
                font-size: 11px;
                padding: 6px 8px;
                margin: 0 2px;
            }

            .agency-nav-item.center {
                font-size: 10px;
                padding: 9px 12px;
                min-height: 45px;
            }

            .agency-feature-badge {
                padding: 6px 12px;
                margin-bottom: 12px;
            }

            .agency-badge-text {
                font-size: 12px;
            }

            .agency-screen-logo {
                max-width: 280px;
                margin-bottom: 20px;
            }

            .agency-main-title {
                font-size: 3.33rem;
                font-family: 'Jersey 25', sans-serif;
                font-weight: 400;
                color: #FEFBEA;
                text-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
                margin-bottom: 16px;
            }

            .agency-main-title #dynamicUserName {
                color: #FEFBEA;
                font-size: inherit;
                font-weight: inherit;
                letter-spacing: inherit;
                font-family: inherit;
                text-shadow: inherit;
            }

            .agency-subtitle {
                color: rgba(255,255,255,0.8);
                font-size: 1.040rem;
                margin-bottom: 30px;
                font-weight: 300;
                font-family: 'Geist', sans-serif;
                text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
            }

            .agency-chat-header {
                font-size: 2rem;
            }
        }

        /* Professional Master Console Styles */
        /* Master Console Overlay - Y2K Professional Interface */
        .master-console-overlay {
            display: none;
            background: #faf9f6;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 10000;
            font-family: 'Geist', sans-serif;
        }

        .master-console-overlay.active {
            display: block;
        }

        /* Top Header */
        .master-console-overlay .top-header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 48px;
            background: #faf9f6;
            border-bottom: 1px solid #e2e0d9;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 13px;
            z-index: 1000;
        }

        .master-console-overlay .header-left {
            display: flex;
            align-items: center;
            gap: 12px;
            flex: 1;
        }
        
        .master-console-overlay .header-center {
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
        }

        .user-greeting-container {
            position: relative;
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 6px;
            transition: background-color 0.2s;
            min-height: 40px;
        }

        .user-greeting-container:hover {
            background: rgba(0, 0, 0, 0.05);
        }

        .master-console-overlay .project-icon {
            width: 28px;
            height: 28px;
            object-fit: contain;
            display: block;
            filter: brightness(0);
        }
        
        @keyframes shimmer {
            0% { transform: translateX(-100%) translateY(-100%); }
            100% { transform: translateX(100%) translateY(100%); }
        }

        @keyframes ellipses {
            0% { content: ''; }
            25% { content: '.'; }
            50% { content: '..'; }
            75% { content: '...'; }
            100% { content: ''; }
        }

        .loading-preview .ellipses::after,
        .master-console-overlay .loading-preview .ellipses::after {
            content: '';
            animation: ellipses 1.5s infinite;
        }

        .master-console-overlay .project-name {
            font-size: 14px;
            font-weight: 500;
            color: #111827;
        }

        .dropdown-icon {
            color: #6b7280;
            width: 12px;
            height: 12px;
            transition: transform 0.2s ease;
        }

        /* Hover effects for dropdown containers */
        .user-info:hover .dropdown-icon,
        .user-greeting-container:hover .dropdown-icon {
            transform: rotate(180deg);
        }

        .master-console-overlay .dropdown-icon {
            color: #6b7280;
            width: 12px;
            height: 12px;
        }

        .master-console-overlay .loading-preview {
            font-size: 13px;
            color: #6b7280;
        }

        .master-console-overlay .header-right {
            display: flex;
            align-items: center;
            gap: 8px;
            flex: 1;
            justify-content: flex-end;
        }
        
        /* Header Text Stack */
        .master-console-overlay .header-text-stack {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }
        
        /* Restore Loading Preview Styling */
        .master-console-overlay .loading-preview {
            font-size: 9px;
            color: #6b7280;
            margin-top: 0px;
        }
        

        .master-console-overlay .header-btn {
            background: none;
            border: none;
            padding: 6px 10px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 11px;
            font-weight: 500;
        }

        .master-console-overlay .console-close-btn {
            background: #ef4444;
            color: white;
        }
        
        .master-console-overlay .invite-btn {
            background: #60a5fa;
            color: white;
        }
        
        .master-console-overlay .upgrade-btn {
            color: #6b7280;
            opacity: 0.4;
            pointer-events: none;
            cursor: default;
        }
        
        .master-console-overlay .reset-btn {
            background: #fbbf24;
            color: white;
        }
        
        .master-console-overlay .reset-btn:hover {
            background: #d97706;
        }
        

        /* Main Container */
        .master-console-overlay .main-container {
            display: flex;
            height: calc(100vh - 48px);
            padding-top: 0;
            position: fixed;
            top: 48px;
            left: 0;
            right: 0;
        }

        /* Left Sidebar */
        .master-console-overlay .left-sidebar {
            width: var(--sidebar-width);
            min-width: 15vw;
            background: #f5f4ef;
            display: flex;
            flex-direction: column;
            border-right: 1px solid #e2e0d9;
            height: 100%;
            overflow-y: auto;
            position: relative;
        }
        
        /* Resize Handle */
        .sidebar-resize-handle {
            position: absolute;
            top: 0;
            right: 0;
            width: 4px;
            height: 100%;
            background: transparent;
            cursor: col-resize;
            z-index: 1001;
            transition: background-color 0.2s;
        }
        
        .sidebar-resize-handle:hover {
            background: #e2e0d9;
        }

        /* Sidebar Collapse Toggle — half-circle tab on main-container */
        .sidebar-collapse-toggle {
            position: absolute;
            left: var(--sidebar-width);
            top: 50%;
            transform: translateY(-50%);
            width: 18px;
            height: 48px;
            border-radius: 0 10px 10px 0;
            background: #21262d;
            border: 1px solid #30363d;
            border-left: none;
            color: #7d8590;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1010;
            transition: background 0.2s, color 0.2s, width 0.2s, left 0.3s ease;
            padding: 0;
            font-size: 14px;
            line-height: 1;
            box-shadow: 2px 0 8px rgba(0,0,0,0.2);
        }
        .sidebar-collapse-toggle:hover {
            background: #30363d;
            color: #c9d1d9;
            width: 22px;
        }
        body:not(.dark-mode) .sidebar-collapse-toggle {
            background: #eae8e1;
            border-color: #d5d3cc;
            color: #656d76;
            box-shadow: 2px 0 8px rgba(0,0,0,0.08);
        }
        body:not(.dark-mode) .sidebar-collapse-toggle:hover {
            background: #dddbd4;
            color: #24292f;
        }

        /* Sidebar collapsed state */
        .left-sidebar.sidebar-collapsed {
            width: 40px !important;
            min-width: 40px !important;
            overflow: hidden !important;
        }
        .left-sidebar.sidebar-collapsed .ai-agent-section,
        .left-sidebar.sidebar-collapsed .user-input-section,
        .left-sidebar.sidebar-collapsed .sidebar-bottom,
        .left-sidebar.sidebar-collapsed .sidebar-resize-handle,
        .left-sidebar.sidebar-collapsed .agent-header,
        .left-sidebar.sidebar-collapsed .cost-notice,
        .left-sidebar.sidebar-collapsed .input-area {
            display: none !important;
        }
        .sidebar-collapsed-badge {
            display: none;
            flex-direction: column;
            align-items: center;
            height: 100%;
            color: #7d8590;
            padding: 12px 0;
        }
        .left-sidebar.sidebar-collapsed .sidebar-collapsed-badge {
            display: flex;
        }
        /* Top section: logo + text, pinned to top */
        .sidebar-collapsed-top {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
        }
        .sidebar-collapsed-badge-icon {
            width: 24px;
            height: 24px;
            background: none;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .sidebar-collapsed-badge-text {
            writing-mode: vertical-rl;
            text-orientation: mixed;
            font-size: 10px;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: #484f58;
            font-weight: 600;
        }
        body:not(.dark-mode) .sidebar-collapsed-badge-text { color: #8b8b85; }
        /* Middle section: history icon + dots, centered */
        .sidebar-collapsed-middle {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
        }
        /* Bottom section: user avatar, pinned to bottom */
        .sidebar-collapsed-bottom {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .sidebar-collapsed-user-icon {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: #30363d;
            border: 1px solid #484f58;
            color: #c9d1d9;
            font-size: 12px;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background 0.2s;
        }
        .sidebar-collapsed-user-icon:hover {
            background: #484f58;
        }
        body:not(.dark-mode) .sidebar-collapsed-user-icon {
            background: #eae8e1;
            border-color: #d5d3cc;
            color: #2c2c2a;
        }
        body:not(.dark-mode) .sidebar-collapsed-user-icon:hover {
            background: #d5d3cc;
        }

        /* Mode toggle (Chat / Sliders) */
        .mode-toggle {
            display: flex;
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.07);
            border-radius: 8px;
            padding: 3px;
            gap: 3px;
            margin: 10px 16px;
        }
        .mode-btn {
            flex: 1;
            padding: 7px 10px;
            border-radius: 6px;
            border: none;
            background: transparent;
            color: #7a7d82;
            font-size: 10px;
            font-weight: 500;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }
        .mode-btn.active {
            background: rgba(255,255,255,0.06);
            color: #f0f0f0;
            border: 1px solid rgba(255,255,255,0.1);
        }
        .mode-btn.active.sliders-mode {
            background: rgba(255, 107, 43, 0.15);
            color: #FF6B2B;
            border-color: rgba(255, 107, 43, 0.4);
        }
        body:not(.dark-mode) .mode-toggle {
            background: rgba(0,0,0,0.04);
            border-color: rgba(0,0,0,0.08);
        }
        body:not(.dark-mode) .mode-btn {
            color: #5f5e5a;
        }
        body:not(.dark-mode) .mode-btn.active {
            background: #faf9f6;
            color: #2c2c2a;
            border-color: rgba(0,0,0,0.12);
            box-shadow: 0 1px 2px rgba(0,0,0,0.06);
        }
        body:not(.dark-mode) .mode-btn.active.sliders-mode {
            background: rgba(255, 107, 43, 0.1);
            color: #FF6B2B;
            border-color: rgba(255, 107, 43, 0.3);
        }
        .left-sidebar.sidebar-collapsed .mode-toggle {
            display: none;
        }
        /* ── Chat History (inside Verne collapsed sidebar) ── */
        .collapsed-history-divider { background: rgba(255,255,255,0.1); }
        body:not(.dark-mode) .collapsed-history-divider { background: rgba(0,0,0,0.1); }
        .collapsed-history-icon {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
            cursor: pointer;
            transition: background 0.15s;
            opacity: 0.5;
            color: #7d8590;
            margin-top: 4px;
        }
        .collapsed-history-icon:hover { opacity: 1; }
        .dark-mode .collapsed-history-icon:hover { background: rgba(255,255,255,0.08); }
        body:not(.dark-mode) .collapsed-history-icon:hover { background: rgba(0,0,0,0.06); }
        .collapsed-history-dots {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
            margin-top: 6px;
        }
        .collapsed-history-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            cursor: pointer;
            transition: transform 0.15s;
        }
        .collapsed-history-dot:hover { transform: scale(1.5); }

        /* History panel inside expanded Verne sidebar */
        .verne-history-panel {
            display: none;
            flex-direction: column;
            flex: 1;
            min-height: 0;
        }
        .verne-history-header {
            padding: 10px 14px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid rgba(255,255,255,0.06);
        }
        body:not(.dark-mode) .verne-history-header {
            border-bottom-color: rgba(0,0,0,0.06);
        }
        .verne-history-back {
            display: flex;
            align-items: center;
            gap: 6px;
            cursor: pointer;
            font-size: 13px;
            font-weight: 600;
            color: #c9d1d9;
        }
        body:not(.dark-mode) .verne-history-back { color: #24292f; }
        .verne-history-back:hover { opacity: 0.8; }
        .verne-history-search {
            padding: 8px 12px;
        }
        .verne-history-search input {
            width: 100%;
            padding: 6px 10px;
            border-radius: 6px;
            font-size: 12px;
            outline: none;
            box-sizing: border-box;
        }
        .dark-mode .verne-history-search input {
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.1);
            color: #c9d1d9;
        }
        body:not(.dark-mode) .verne-history-search input {
            background: rgba(0,0,0,0.03);
            border: 1px solid rgba(0,0,0,0.1);
            color: #24292f;
        }
        .verne-history-list {
            flex: 1;
            overflow-y: auto;
            padding: 0;
        }
        .chat-history-group-header {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: 12px 14px 4px;
            opacity: 0.5;
            font-weight: 600;
        }
        .chat-history-item {
            padding: 10px 14px;
            cursor: pointer;
            border-left: 2px solid transparent;
            border-radius: 0;
            transition: all 0.15s;
        }
        .dark-mode .chat-history-item:hover { background: rgba(255,255,255,0.04); }
        body:not(.dark-mode) .chat-history-item:hover { background: rgba(0,0,0,0.03); }
        .chat-history-item.active {
            border-left-color: #7c6aef;
        }
        .dark-mode .chat-history-item.active { background: rgba(124,106,239,0.08); }
        body:not(.dark-mode) .chat-history-item.active { background: rgba(124,106,239,0.06); }
        .chat-history-item-top {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            margin-bottom: 2px;
        }
        .chat-history-item-name {
            font-weight: 600;
            font-size: 13px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex: 1;
            margin-right: 8px;
        }
        .chat-history-item-time {
            font-size: 11px;
            opacity: 0.5;
            flex-shrink: 0;
        }
        .chat-history-item-preview {
            font-size: 12px;
            opacity: 0.5;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .chat-history-item-pills {
            display: flex;
            gap: 4px;
            margin-top: 4px;
        }
        .chat-history-pill {
            font-size: 9px;
            padding: 1px 5px;
            border-radius: 6px;
            font-weight: 500;
        }
        .verne-history-footer {
            padding: 10px 12px;
            border-top: 0.5px solid rgba(255,255,255,0.08);
        }
        body:not(.dark-mode) .verne-history-footer {
            border-top-color: rgba(0,0,0,0.08);
        }
        .verne-history-new-btn {
            width: 100%;
            padding: 7px;
            border-radius: 6px;
            border: 0.5px solid rgba(255,255,255,0.15);
            background: transparent;
            font-size: 12px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            color: #c9d1d9;
            transition: background 0.15s;
        }
        .verne-history-new-btn:hover { background: rgba(255,255,255,0.06); }
        body:not(.dark-mode) .verne-history-new-btn {
            border-color: rgba(0,0,0,0.12);
            color: #2c2c2a;
        }
        body:not(.dark-mode) .verne-history-new-btn:hover { background: rgba(0,0,0,0.04); }

        /* Slider Panel */
        .vs-slider-context {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: rgba(255,107,43,0.08);
            border: 1px solid rgba(255,107,43,0.25);
            border-radius: 8px;
            padding: 10px 14px;
            margin-bottom: 16px;
        }
        .vs-slider-context-label {
            font-size: 9px;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: #7a7d82;
            margin-bottom: 2px;
        }
        .vs-slider-context-val {
            font-size: 13px;
            font-weight: 700;
            color: #FF6B2B;
        }
        .vs-fmt-chips { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
        .vs-fmt-chip {
            padding: 4px 9px;
            border-radius: 4px;
            font-size: 9px;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            border: 1px solid rgba(255,255,255,0.08);
            background: transparent;
            color: #7a7d82;
            cursor: pointer;
            transition: all 0.15s;
        }
        .vs-fmt-chip.active {
            background: rgba(255,107,43,0.15);
            border-color: rgba(255,107,43,0.4);
            color: #FF6B2B;
        }
        .vs-override-indicator {
            display: flex;
            align-items: center;
            gap: 7px;
            padding: 8px 12px;
            background: rgba(34,197,94,0.08);
            border: 1px solid rgba(34,197,94,0.2);
            border-radius: 6px;
            font-size: 10px;
            color: #34d399;
            letter-spacing: 0.05em;
            margin-bottom: 16px;
        }
        .vs-override-indicator::before {
            content: '';
            width: 6px; height: 6px;
            border-radius: 50%;
            background: #34d399;
            flex-shrink: 0;
        }
        .vs-slider-group { margin-bottom: 22px; }
        .vs-slider-label-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 9px;
        }
        .vs-slider-label {
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #b0b3b8;
        }
        .vs-slider-val { font-size: 11px; color: #FF6B2B; min-width: 40px; text-align: right; }
        .vs-slider-val.at-zero { color: #7a7d82; }
        .vs-slider-track-wrap { position: relative; height: 28px; display: flex; align-items: center; }
        .vs-slider-track {
            position: relative;
            flex: 1;
            height: 4px;
            background: rgba(255,255,255,0.08);
            border-radius: 2px;
            cursor: pointer;
        }
        .vs-slider-center-mark {
            position: absolute;
            left: 50%; top: -4px; bottom: -4px;
            width: 1px;
            background: rgba(255,255,255,0.12);
            pointer-events: none;
        }
        .vs-slider-fill {
            position: absolute;
            height: 100%;
            background: #FF6B2B;
            border-radius: 2px;
            pointer-events: none;
            transition: left 0.04s, width 0.04s;
        }
        .vs-slider-fill-zoom { left: 0; width: 0; }
        .vs-slider-thumb {
            position: absolute;
            top: 50%; transform: translate(-50%, -50%);
            width: 15px; height: 15px;
            border-radius: 50%;
            background: #FF6B2B;
            border: 2px solid rgba(0,0,0,0.3);
            pointer-events: none;
            transition: left 0.04s;
        }
        .vs-slider-track input[type=range] {
            position: absolute; inset: 0;
            width: 100%; height: 100%;
            opacity: 0; cursor: pointer; margin: 0;
        }
        .vs-slider-ends {
            display: flex;
            justify-content: space-between;
            font-size: 9px;
            color: #555;
            letter-spacing: 0.05em;
            margin-top: 4px;
        }
        .vs-slider-actions {
            display: flex;
            gap: 8px;
            margin-top: 4px;
            margin-bottom: 8px;
        }
        .vs-action-btn {
            flex: 1;
            padding: 9px 12px;
            border-radius: 7px;
            border: 1px solid rgba(255,255,255,0.08);
            background: rgba(255,255,255,0.04);
            color: #7a7d82;
            font-size: 10px;
            letter-spacing: 0.07em;
            text-transform: uppercase;
            cursor: pointer;
            transition: all 0.2s;
        }
        .vs-action-btn:hover { color: #f0f0f0; border-color: rgba(255,255,255,0.15); }
        .vs-reset-btn { flex: 0 0 auto; padding: 9px 14px; }
        .vs-apply-btn {
            background: #FF6B2B;
            border-color: #FF6B2B;
            color: #fff;
            font-weight: 600;
        }
        .vs-apply-btn:hover { opacity: 0.85; }
        .vs-slider-footnote {
            font-size: 9px;
            color: #555;
            text-align: center;
            line-height: 1.6;
            letter-spacing: 0.04em;
            margin-bottom: 20px;
        }

        /* Live reframe preview */
        #previewMonitor {
            overflow: hidden;
        }
        #previewMonitor video {
            transform-origin: center center;
            transition: transform 0.08s ease;
            will-change: transform;
        }
        .vs-crop-overlay {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 10;
        }
        .vs-crop-box {
            position: absolute;
            border: 2px solid #FF6B2B;
            box-shadow: 0 0 0 9999px rgba(0,0,0,0.35);
            transition: all 0.08s ease;
            pointer-events: none;
        }
        .vs-crop-label {
            position: absolute;
            top: -22px;
            left: 0;
            font-size: 9px;
            color: #FF6B2B;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            background: rgba(0,0,0,0.6);
            padding: 2px 6px;
            border-radius: 3px;
            white-space: nowrap;
        }

        /* Hot Swap */
        .vs-hotswap-section {
            border-top: 1px solid rgba(255,255,255,0.07);
            padding-top: 18px;
            margin-top: 4px;
        }
        .vs-hotswap-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;
        }
        .vs-hotswap-label {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: #b0b3b8;
            display: flex;
            align-items: center;
            gap: 7px;
        }
        .vs-hs-dot {
            width: 6px; height: 6px;
            border-radius: 50%;
            background: #60a5fa;
            box-shadow: 0 0 6px rgba(59,130,246,0.6);
        }
        .vs-lang-badge {
            font-size: 9px;
            padding: 3px 9px;
            border-radius: 4px;
            background: rgba(59,130,246,0.12);
            border: 1px solid rgba(59,130,246,0.25);
            color: #60a5fa;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            cursor: pointer;
            transition: all 0.15s;
        }
        .vs-lang-badge:hover { background: rgba(59,130,246,0.22); }
        .vs-drop-zone {
            border: 1.5px dashed rgba(59,130,246,0.3);
            border-radius: 10px;
            background: rgba(59,130,246,0.04);
            padding: 16px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 7px;
            cursor: pointer;
            transition: all 0.2s;
            text-align: center;
            font-size: 12px;
            color: #7a7d82;
        }
        .vs-drop-zone:hover, .vs-drop-zone.drag-over {
            border-color: rgba(59,130,246,0.7);
            background: rgba(59,130,246,0.1);
        }
        .vs-drop-zone.has-file {
            border: 1.5px solid rgba(34,197,94,0.45);
            background: rgba(34,197,94,0.05);
        }
        .vs-drop-zone strong { color: #60a5fa; }
        .vs-drop-zone.has-file strong { color: #34d399; }
        .vs-drop-icon { font-size: 18px; opacity: 0.5; }
        .vs-drop-subtext { font-size: 9px; opacity: 0.5; letter-spacing: 0.06em; }
        .vs-file-thumb {
            width: 44px; height: 30px;
            border-radius: 4px;
            background: rgba(34,197,94,0.1);
            border: 1px solid rgba(34,197,94,0.3);
            display: flex; align-items: center; justify-content: center;
            font-size: 8px; color: #34d399;
            font-weight: 600; letter-spacing: 0.06em;
            flex-shrink: 0;
        }
        .vs-file-name {
            font-size: 10px; color: #f0f0f0;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
            margin-bottom: 2px;
        }
        .vs-file-meta { font-size: 9px; color: #555; }
        .vs-file-clear {
            width: 20px; height: 20px;
            border-radius: 50%;
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.08);
            color: #7a7d82; font-size: 10px;
            cursor: pointer; display: flex;
            align-items: center; justify-content: center;
            flex-shrink: 0; transition: all 0.15s;
        }
        .vs-file-clear:hover { background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.4); color: #ef4444; }
        .vs-hotswap-note {
            font-size: 9px; color: #555;
            text-align: center; line-height: 1.6;
            letter-spacing: 0.04em; margin-top: 8px;
        }

        /* Light mode overrides for sliders/hotswap */
        body:not(.dark-mode) .vs-slider-label { color: #374151; }
        body:not(.dark-mode) .vs-slider-track { background: rgba(0,0,0,0.08); }
        body:not(.dark-mode) .vs-slider-center-mark { background: rgba(0,0,0,0.1); }
        body:not(.dark-mode) .vs-slider-ends { color: #9ca3af; }
        body:not(.dark-mode) .vs-slider-footnote { color: #9ca3af; }
        body:not(.dark-mode) .vs-hotswap-note { color: #9ca3af; }
        body:not(.dark-mode) .vs-file-meta { color: #9ca3af; }
        body:not(.dark-mode) .vs-file-name { color: #1f2937; }
        body:not(.dark-mode) .vs-slider-context { background: rgba(255,107,43,0.06); }
        body:not(.dark-mode) .vs-action-btn { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.1); color: #6b7280; }
        body:not(.dark-mode) .vs-action-btn:hover { color: #1f2937; border-color: rgba(0,0,0,0.2); }
        body:not(.dark-mode) .vs-hotswap-section { border-color: rgba(0,0,0,0.08); }
        body:not(.dark-mode) .vs-fmt-chip { border-color: rgba(0,0,0,0.1); color: #6b7280; }

        /* Smooth transitions for sidebar and dependent elements */
        .master-console-overlay .left-sidebar {
            transition: width 0.3s ease, min-width 0.3s ease;
        }
        .pipeline-content,
        #consoleLoaderOverlay {
            transition: left 0.3s ease, width 0.3s ease;
        }

        /* User Input Section */
        .master-console-overlay .user-input-section {
            display: none;
            padding: 0;
            border-bottom: 1px solid #f0efe9;
        }

        .master-console-overlay .user-question {
            font-size: 14px;
            color: #111827;
            line-height: 1.5;
        }
        .dark-mode .master-console-overlay .user-question {
            color: rgba(255, 255, 255, 0.9);
        }

        /* AI Agent Section */
        .master-console-overlay .ai-agent-section {
            padding: 28px 16px 0 16px;
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            max-height: calc(100vh - 200px);
            display: flex;
            flex-direction: column;
        }

        .master-console-overlay .agent-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 0;
        }

        .master-console-overlay .agent-icon {
            width: 20px;
            height: 20px;
            background: #7c6aef;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 9px;
            font-weight: 700;
            letter-spacing: 0.02em;
        }

        .master-console-overlay .agent-name {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-primary);
        }

        .master-console-overlay .agent-time {
            font-size: 10.5px;
            color: var(--text-secondary);
            margin-left: auto;
        }

        .master-console-overlay .thinking-status {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 0;
        }
        .master-console-overlay .thinking-icon {
            width: 16px;
            height: 16px;
            color: #6b7280;
        }

        .master-console-overlay .thinking-text {
            font-size: 13px;
            color: #6b7280;
        }

        .master-console-overlay .agent-response {
            font-size: 11.5px;
            color: var(--text-primary);
            line-height: 1.6;
        }

        /* Bottom Sidebar */
        .master-console-overlay .sidebar-bottom {
            width: 100%;
            height: auto;
            min-height: 80px;
            padding: 8px 16px;
            padding-bottom: 16px;
            border-top: 1px solid #eae8e1;
            background: #f5f4ef;
            margin-top: auto;
            flex-shrink: 0;
        }

        .master-console-overlay .cost-notice {
            padding: 8px 8px;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }

        .master-console-overlay .cost-text {
            text-wrap: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            font-size: 12px;
            color: var(--text-secondary);
            margin: 0;
            text-align: left;
        }
        
        .master-console-overlay .read-more-btn {
            white-space: nowrap;
            background: none;
            color: var(--text-primary);
            border: none;
            padding: 0;
            font-size: 12px;
            cursor: pointer;
            text-decoration: underline;
            font-weight: 500;
            transition: opacity 0.2s ease;
        }

        .master-console-overlay .read-more-btn:hover {
            opacity: 0.7;
        }

        .master-console-overlay .close-notice {
            background: none;
            border: none;
            color: #6b7280;
            cursor: pointer;
            font-size: 16px;
        }

        .master-console-overlay .input-area {
            border-top: none;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 0px;
        }

        .master-console-overlay .input-placeholder {
            background: #f9fafb;
            border: 1px solid #e2e0d9;
            border-radius: 8px;
            padding: 12px;
            font-size: 13px;
            color: #6b7280;
            cursor: text;
        }

        /* Main Content Area - Fixed for pipeline content visibility */
        .master-console-overlay .main-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            position: relative;
            background: transparent;
            height: calc(100vh - 48px); /* 48px header, bottom toolbar removed */
            overflow-y: auto;
            /* padding: 20px; */
            box-sizing: border-box;
        }

        .master-console-overlay .content-center {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            width: 100%;
            margin: 0 auto;
            min-height: 400px; /* Ensure enough space for pipeline content */
            position: relative;
        }

        /* Video Container */
        .master-console-overlay .heart-container {
            margin-bottom: 32px;
        }

        .master-console-overlay .loading-video {
            width: 120px;
            height: 120px;
            object-fit: cover;
            object-position: 46%;
            border-radius: 8px;
        }

        .master-console-overlay .heart-icon {
            width: 120px;
            height: 120px;
            opacity: 0.4;
        }

        /* Status Text */
        .master-console-overlay .status-text {
            font-size: 18px;
            color: #111827;
            font-weight: 500;
            margin-bottom: 48px;
        }
        .dark-mode .master-console-overlay .status-text {
            color: rgba(255, 255, 255, 0.9);
        }

        /* Action Items */
        .master-console-overlay .action-items {
            display: flex;
            flex-direction: column;
            gap: 24px;
            align-items: center;
        }

        .master-console-overlay .action-item {
            display: flex;
            align-items: center;
            gap: 12px;
            color: #6b7280;
            font-size: 14px;
        }

        .master-console-overlay .action-icon {
            width: 20px;
            height: 20px;
            color: #9ca3af;
        }

        /* Bottom Toolbar (legacy — removed) */
        .master-console-overlay .bottom-toolbar { display: none; }

        /* Pipeline Tabs Bar */
        .pipeline-tabs-bar {
            position: fixed;
            top: 0;
            left: var(--sidebar-width);
            right: 0;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: stretch;
            padding: 6px 12px;
            z-index: 1001;
            transition: left 0.3s ease;
        }
        .pipeline-tabs {
            --radius: 8px;
            --border: 4px;
            --height: 38px;
            --speed: 0.25s;
            --ease: linear(0, 0.1641 3.52%, 0.311 7.18%, 0.4413 10.99%, 0.5553 14.96%, 0.6539 19.12%, 0.738 23.5%, 0.8086 28.15%, 0.8662 33.12%, 0.9078 37.92%, 0.9405 43.12%, 0.965 48.84%, 0.9821 55.28%, 0.992 61.97%, 0.9976 70.09%, 1);
            height: var(--height);
            display: grid;
            grid-auto-flow: column;
            grid-auto-columns: 1fr;
            background: #2E2E2E;
            border-radius: var(--radius);
            position: relative;
            border: var(--border) solid #2E2E2E;
            width: 100%;
        }
        .pipeline-tab-input {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border-width: 0;
        }
        .pipeline-tabs:has(:checked:nth-of-type(1)) { --active: 0; }
        .pipeline-tabs:has(:checked:nth-of-type(2)) { --active: 1; }
        .pipeline-tabs:has(:checked:nth-of-type(3)) { --active: 2; }
        .pipeline-tabs:has(:checked:nth-of-type(4)) { --active: 3; }
        .pipeline-tabs :checked + .pipeline-tab-label { --highlight: 1; }
        .pipeline-tabs:has(.pipeline-tab-input:nth-of-type(4)) { --count: 4; }
        .pipeline-tab-label {
            position: relative;
            z-index: 1;
            padding: 0 clamp(10px, 10px + 10px, 20px);
            cursor: pointer;
            text-align: center;
            height: 100%;
            display: grid;
            grid-auto-flow: column;
            gap: 6px;
            border-radius: calc(var(--radius) - var(--border));
            place-items: center;
            color: hsl(0 0% 100% / calc(0.5 + var(--highlight, 0)));
            transition: background 0.25s var(--ease, ease), color 0.25s var(--ease, ease);
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 1px;
            font-family: inherit;
            white-space: nowrap;
        }
        .pipeline-tab-input:not(:checked) + .pipeline-tab-label:hover {
            --highlight: 0.35;
            background: hsl(0 0% 20%);
        }
        .pipeline-tabs::after {
            pointer-events: none;
            content: "";
            width: calc(100% / var(--count));
            height: 100%;
            background: hsl(0 0% 100%);
            position: absolute;
            border-radius: calc(var(--radius) - var(--border));
            mix-blend-mode: difference;
            translate: calc(var(--active, 0) * 100%) 0;
            transition: translate var(--speed) var(--ease, ease);
        }

        body:not(.dark-mode) .pipeline-tabs {
            background: #f5f4ef;
            border-color: #f5f4ef;
        }
        body:not(.dark-mode) .pipeline-tab-label {
            color: rgba(0, 0, 0, 0.5);
        }
        body:not(.dark-mode) .pipeline-tabs :checked + .pipeline-tab-label {
            color: #ffffff;
        }
        body:not(.dark-mode) .pipeline-tab-input:not(:checked) + .pipeline-tab-label:hover {
            background: rgba(0, 0, 0, 0.05);
            color: rgba(0, 0, 0, 0.7);
        }
        body:not(.dark-mode) .pipeline-tabs::after {
            background: #60a5fa;
            mix-blend-mode: normal;
            opacity: 1;
        }

        /* NUCLEAR RESET: All pipeline CSS removed for clean start */

        
        .console-drop-zone {
            /* Content overlay - no borders or background (parent pipeline window handles drop zone styling) */
            border: none !important;
            background: transparent !important;
            padding: 0;
            margin: 0;
            display: flex !important;
            flex-direction: column !important;
            justify-content: center !important;
            align-items: center !important;
            box-sizing: border-box !important;
            width: 100% !important;
            height: 100% !important;
            position: relative !important;
            border-radius: 0 !important;
        }

        .console-drop-zone-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            background: transparent;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            border: none;
            border-radius: 0;
            box-shadow: none;
        }
        
        /* Pipeline window hover states DISABLED - moved to drag only */
        /* .pipeline-content:hover {
            border-color: #60a5fa !important;
            background: #eff6ff !important;
        } */
        
        .pipeline-content.dragover {
            border-color: #60a5fa !important;
            background: #eff6ff !important;
        }
        
        .console-drop-zone h1 {
            font-size: 24px;
            margin-bottom: 10px;
            color: rgba(255, 255, 255, 0.9);
        }
        body:not(.dark-mode) .console-drop-zone h1 {
            color: #111827;
        }

        .console-drop-zone p {
            color: rgba(255, 255, 255, 0.5);
            margin-bottom: 20px;
        }
        body:not(.dark-mode) .console-drop-zone p {
            color: #6b7280;
        }
        
        .browse-files-btn, .translate-btn, .export-btn {
            background: #60a5fa;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
        }
        
        .browse-files-btn:hover, .translate-btn:hover, .export-btn:hover {
            background: #2563eb;
        }
        
        .title-input {
            width: 100%;
            max-width: 400px;
            padding: 12px;
            border: 1px solid #e2e0d9;
            border-radius: 6px;
            font-size: 16px;
        }
        
        .step-batch-content, .step-translate-content, .step-titles-content, .step-export-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: transparent;
            border-radius: 6px;
            padding: 20px;
            margin: 10px auto;
            min-height: 200px;
        }

        .step-batch-content, .step-translate-content, .step-titles-content, .step-export-content {
            max-width: 600px;
            margin: 0 auto;
            padding: 0 20px;
        }


        .translate-options {
            margin-top: 12px;
        }

        .translation-actions {
            margin-top: 12px;
        }

        .title-editor {
            margin-top: 12px;
        }

        /* MAIN CONTENT AREA DARK MODE STYLING */
        .main-content.console-dark-mode {
            background: transparent !important;
            color: #FFFFFF !important;
        }

        .main-content.console-dark-mode .step-batch-content,
        .main-content.console-dark-mode .step-translate-content,
        .main-content.console-dark-mode .step-titles-content,
        .main-content.console-dark-mode .step-export-content {
            background: transparent !important;
            color: #FFFFFF !important;
            border-color: rgba(255, 255, 255, 0.2) !important;
        }

        .main-content.console-dark-mode h1,
        .main-content.console-dark-mode h2,
        .main-content.console-dark-mode h3,
        .main-content.console-dark-mode p,
        .main-content.console-dark-mode label {
            color: #FFFFFF !important;
        }

        .main-content.console-dark-mode select,
        .main-content.console-dark-mode input {
            background: rgba(255, 255, 255, 0.1) !important;
            color: #FFFFFF !important;
            border: 1px solid rgba(255, 255, 255, 0.3) !important;
        }

        .main-content.console-dark-mode button {
            background: #444444 !important;
            color: #FFFFFF !important;
            border: 1px solid rgba(255, 255, 255, 0.3) !important;
        }

        .main-content.console-dark-mode .translate-btn {
            background: #10b981 !important;
        }

        .main-content.console-dark-mode .skip-btn {
            background: #6b7280 !important;
        }
        
        /* MAIN CONTENT DARK MODE - BATCH WINDOW BACKGROUND */
        .main-content.console-dark-mode .pipeline-content {
            /* longhand — the `background` shorthand resets background-image:none,
               wiping the dark dot grid painted by the unified panel rule (8176) */
            background-color: rgba(255, 255, 255, 0.08) !important;
            backdrop-filter: blur(20px) saturate(1.2);
            -webkit-backdrop-filter: blur(20px) saturate(1.2);
            border-color: rgba(255, 255, 255, 0.1) !important;
            color: #FFFFFF !important;
        }

        /* MAIN CONTENT AREA LIGHT MODE TEXT CONTRAST FIXES */
        .main-content:not(.console-dark-mode) {
            color: #4a90e2 !important;
        }

        .main-content:not(.console-dark-mode) h1,
        .main-content:not(.console-dark-mode) h2,
        .main-content:not(.console-dark-mode) h3,
        .main-content:not(.console-dark-mode) p:not([style*="color"]),
        .main-content:not(.console-dark-mode) label {
            color: #4a90e2 !important;
        }

        .main-content:not(.console-dark-mode) select,
        .main-content:not(.console-dark-mode) input {
            color: #4a90e2 !important;
            background: #faf9f6 !important;
            border: 1px solid #4a90e2 !important;
        }
        
        /* Export Summary Text Color Match */
        .main-content:not(.console-dark-mode) #processingSummary {
            color: #4a90e2 !important;
        }
        
        .main-content:not(.console-dark-mode) #processingSummary strong {
            color: #4a90e2 !important;
        }

        /* MAIN CONTENT DARK MODE TOGGLE BUTTON */
        .main-content-dark-mode-toggle {
            position: fixed;
            top: 50px;
            right: 20px;
            background: rgba(255, 255, 255, 0.9);
            border: 1px solid #d1d5db;
            border-radius: 8px;
            color: #4a90e2;
            padding: 8px 12px;
            cursor: pointer;
            font-size: 12px;
            font-weight: 500;
            transition: all 0.3s ease;
            z-index: 1000;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        /* AUTO-SYNC: Main Content with Body Dark Mode */
        .dark-mode .main-content:not(.console-light-mode-override) {
            background: transparent !important;
            color: #FFFFFF !important;
        }

        .dark-mode .main-content:not(.console-light-mode-override) .step-batch-content,
        .dark-mode .main-content:not(.console-light-mode-override) .step-translate-content,
        .dark-mode .main-content:not(.console-light-mode-override) .step-titles-content,
        .dark-mode .main-content:not(.console-light-mode-override) .step-export-content {
            background: transparent !important;
            color: #FFFFFF !important;
            border-color: rgba(255, 255, 255, 0.2) !important;
        }

        .dark-mode .main-content:not(.console-light-mode-override) h1,
        .dark-mode .main-content:not(.console-light-mode-override) h2,
        .dark-mode .main-content:not(.console-light-mode-override) h3,
        .dark-mode .main-content:not(.console-light-mode-override) p,
        .dark-mode .main-content:not(.console-light-mode-override) label {
            color: #FFFFFF !important;
        }

        .dark-mode .main-content:not(.console-light-mode-override) select,
        .dark-mode .main-content:not(.console-light-mode-override) input {
            background: rgba(255, 255, 255, 0.1) !important;
            color: #FFFFFF !important;
            border: 1px solid rgba(255, 255, 255, 0.3) !important;
        }

        .dark-mode .main-content:not(.console-light-mode-override) button {
            background: #444444 !important;
            color: #FFFFFF !important;
            border: 1px solid rgba(255, 255, 255, 0.3) !important;
        }

        .dark-mode .main-content:not(.console-light-mode-override) .translate-btn {
            background: #10b981 !important;
        }

        .dark-mode .main-content:not(.console-light-mode-override) .skip-btn {
            background: #6b7280 !important;
        }
        
        /* AUTO-SYNC: Batch Window Background with Body Dark Mode */
        .dark-mode .main-content:not(.console-light-mode-override) .pipeline-content {
            /* longhand — the `background` shorthand resets background-image:none,
               wiping the dark dot grid painted by the unified panel rule (8176) */
            background-color: rgba(255, 255, 255, 0.08) !important;
            backdrop-filter: blur(20px) saturate(1.2);
            -webkit-backdrop-filter: blur(20px) saturate(1.2);
            border-color: rgba(255, 255, 255, 0.1) !important;
            color: #FFFFFF !important;
        }

        /* console-drop-zone-content is now plain transparent — glassmorphic moved to drag overlay */

        .file-list {
            margin: 0;
            text-align: left;
            overflow-y: auto;
            width: 100%;
            padding: 8px 0;
            box-sizing: border-box;
        }

        .file-item {
            display: flex;
            align-items: center;
            padding: 10px 14px;
            background: #161b22;
            border: 1px solid #21262d;
            border-radius: 6px;
            margin: 6px 0;
            width: 100%;
            font-size: 13px;
            color: #c9d1d9;
            gap: 10px;
            box-sizing: border-box;
        }
        .file-item .file-icon {
            font-size: 18px;
            flex-shrink: 0;
        }
        .file-item .file-name {
            flex: 1;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-family: 'Geist', monospace;
        }
        .file-item .file-size {
            color: #7d8590;
            font-size: 11px;
            white-space: nowrap;
            font-family: monospace;
        }
        .file-item .file-ext {
            background: #21262d;
            color: #7d8590;
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 4px;
            font-weight: 600;
            text-transform: uppercase;
            font-family: monospace;
        }

        /* NUCLEAR RESET: Second conflicting pipeline CSS block removed */
        
        /* Default content has lower z-index */
        .heart-container,
        .status-text,
        .action-items {
            position: relative;
            z-index: 1;
        }
        
        /* NUCLEAR RESET: Broken sibling selector logic removed */
        
        /* NUCLEAR CSS REMOVED - Using Professional Windows */
        
        /* NUCLEAR STEP CONTENT CSS REMOVED */
        
        /* Hide inactive pipeline content */
        .master-console-overlay .content-center .pipeline-content:not(.active) {
            display: none !important;
        }
        
        
        /* NUCLEAR Z-INDEX CSS REMOVED - Using Professional Windows */
        
        .pipeline-content:not(.active),
        .fresh-pipeline-window:not(.active) {
            display: none !important;
        }

        /* ========== LIGHT MODE CONSOLE TABS ========== */
        body:not(.dark-mode) .pipeline-content {
            /* Longhands, NOT the `background` shorthand — the shorthand resets
               background-image to none and wipes the dot grid. Keep the cooler
               white as the base color and paint --dot-grid on top. */
            background-color: rgba(255, 255, 255, 0.85) !important;
            background-image: var(--dot-grid) !important;
            background-size: var(--dot-grid-size) !important;
            backdrop-filter: blur(20px) saturate(1.2);
            -webkit-backdrop-filter: blur(20px) saturate(1.2);
            border: 1px solid rgba(255, 255, 255, 0.5);
        }

        /* Card backgrounds: dark #161b22 -> light white */
        body:not(.dark-mode) .step-export-content div[style*="background:#161b22"],
        body:not(.dark-mode) .step-export-content div[style*="background: #161b22"],
        body:not(.dark-mode) .step-batch-content div[style*="background:#161b22"],
        body:not(.dark-mode) .step-batch-content div[style*="background: #161b22"],
        body:not(.dark-mode) .step-translate-content div[style*="background:#161b22"],
        body:not(.dark-mode) .step-translate-content div[style*="background: #161b22"],
        body:not(.dark-mode) .step-titles-content div[style*="background:#161b22"],
        body:not(.dark-mode) .step-titles-content div[style*="background: #161b22"] {
            background: #f5f4ef !important;
            border-color: #d5d3cc !important;
        }

        /* Inner card backgrounds: #0d1117 -> warm light (not titles — they keep dark) */
        body:not(.dark-mode) .step-export-content div[style*="background:#0d1117"],
        body:not(.dark-mode) .step-batch-content div[style*="background:#0d1117"] {
            background: #f0efe9 !important;
            border-color: #d5d3cc !important;
        }

        /* Text colors: light text -> dark text */
        body:not(.dark-mode) .step-export-content h2,
        body:not(.dark-mode) .step-export-content h3,
        body:not(.dark-mode) .step-batch-content h2,
        body:not(.dark-mode) .step-batch-content h3,
        body:not(.dark-mode) .step-titles-content h2,
        body:not(.dark-mode) .step-titles-content h3,
        body:not(.dark-mode) .step-translate-content h2,
        body:not(.dark-mode) .step-translate-content h3 {
            color: #1f2328 !important;
        }

        body:not(.dark-mode) .step-export-content p,
        body:not(.dark-mode) .step-export-content span,
        body:not(.dark-mode) .step-batch-content p,
        body:not(.dark-mode) .step-batch-content span,
        body:not(.dark-mode) .step-titles-content p,
        body:not(.dark-mode) .step-titles-content span,
        body:not(.dark-mode) .step-translate-content p,
        body:not(.dark-mode) .step-translate-content span {
            color: #656d76 !important;
        }

        /* ===== TRANSLATION COMING SOON OVERLAY ===== */
        .translate-coming-soon-overlay {
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(12px) saturate(1.2);
            -webkit-backdrop-filter: blur(12px) saturate(1.2);
            z-index: 10;
            background: rgba(255, 255, 255, 0.6);
        }
        .dark-mode .translate-coming-soon-overlay {
            background: rgba(13, 17, 23, 0.65);
        }
        .translate-coming-soon-card {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 16px 32px 12px 32px;
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.85);
            border: 1px solid rgba(0, 0, 0, 0.08);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
        }
        .dark-mode .translate-coming-soon-card {
            background: rgba(22, 27, 34, 0.9);
            border: 1px solid #21262d;
            box-shadow: none;
        }
        .translate-coming-soon-title {
            margin: 0;
            font-size: 16px;
            font-weight: 600;
            color: #0a0a0f;
        }
        .dark-mode .translate-coming-soon-title {
            color: #c9d1d9;
        }
        .translate-coming-soon-subtitle {
            margin: 2px 0 0 0;
            font-size: 12px;
            color: #6b7280;
        }
        .dark-mode .translate-coming-soon-subtitle {
            color: #7d8590;
        }

        /* ===== CUSTOM MODAL SYSTEM ===== */
        .v-modal-overlay {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 99999;
            opacity: 0;
            transition: opacity 0.2s ease;
            pointer-events: none;
        }
        .v-modal-overlay.active {
            opacity: 1;
            pointer-events: auto;
        }
        .v-modal {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px) saturate(1.2);
            -webkit-backdrop-filter: blur(20px) saturate(1.2);
            border: 1px solid rgba(0, 0, 0, 0.08);
            border-radius: 16px;
            padding: 32px;
            max-width: 420px;
            width: 90%;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
            transform: scale(0.95) translateY(10px);
            transition: transform 0.25s ease;
            font-family: 'Geist', sans-serif;
        }
        .v-modal-overlay.active .v-modal {
            transform: scale(1) translateY(0);
        }
        .dark-mode .v-modal {
            background: rgba(20, 20, 30, 0.95);
            border-color: rgba(255, 255, 255, 0.1);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
        }
        .v-modal-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 16px;
        }
        .v-modal-icon.warning {
            background: rgba(245, 158, 11, 0.1);
            color: #fbbf24;
        }
        .v-modal-icon.invite {
            background: rgba(34, 197, 94, 0.1);
            color: #34d399;
        }
        .v-modal-title {
            font-size: 18px;
            font-weight: 700;
            color: #0a0a0f;
            margin-bottom: 8px;
        }
        .dark-mode .v-modal-title {
            color: #f0f0f0;
        }
        .v-modal-text {
            font-size: 14px;
            color: #666;
            line-height: 1.5;
            margin-bottom: 24px;
        }
        .dark-mode .v-modal-text {
            color: rgba(255, 255, 255, 0.5);
        }
        .v-modal-actions {
            display: flex;
            gap: 10px;
        }
        .v-modal-btn {
            flex: 1;
            padding: 8px 14px;
            border-radius: 8px;
            font-size: 12px;
            font-weight: 600;
            font-family: 'Geist', sans-serif;
            cursor: pointer;
            transition: all 0.2s;
            border: none;
            text-align: center;
        }
        .v-modal-btn.secondary {
            background: rgba(0, 0, 0, 0.05);
            color: #333;
            border: 1px solid rgba(0, 0, 0, 0.1);
        }
        .v-modal-btn.secondary:hover {
            background: rgba(0, 0, 0, 0.08);
        }
        .dark-mode .v-modal-btn.secondary {
            background: rgba(255, 255, 255, 0.08);
            color: rgba(255, 255, 255, 0.8);
            border-color: rgba(255, 255, 255, 0.1);
        }
        .v-modal-btn.danger {
            background: #EF4444;
            color: #fff;
        }
        .v-modal-btn.danger:hover {
            background: #DC2626;
            box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
        }
        .v-modal-btn.primary {
            background: #34d399;
            color: #fff;
        }
        .v-modal-btn.primary:hover {
            background: #16A34A;
            box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
        }
        .v-modal-input {
            width: 100%;
            padding: 12px 14px;
            border: 2px solid transparent;
            border-radius: 8px;
            background: rgba(0, 0, 0, 0.04);
            font-size: 14px;
            font-family: 'Geist', sans-serif;
            color: #0a0a0f;
            outline: none;
            transition: all 0.2s;
            margin-bottom: 16px;
            box-sizing: border-box;
        }
        .v-modal-input:focus {
            border-color: rgba(34, 197, 94, 0.4);
            background: #faf9f6;
            box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.1);
        }
        .dark-mode .v-modal-input {
            background: rgba(255, 255, 255, 0.06);
            color: #f0f0f0;
        }
        .dark-mode .v-modal-input:focus {
            border-color: rgba(34, 197, 94, 0.4);
            background: rgba(255, 255, 255, 0.1);
        }
        .v-modal-success {
            display: none;
            text-align: center;
            padding: 8px 0;
            color: #34d399;
            font-size: 13px;
            font-weight: 600;
        }

        /* ===== ONBOARDING TAKEOVER ===== */
        .onboarding-overlay {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0, 0, 0, 0.35);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            z-index: 100000;
            display: none;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.4s ease;
        }
        .onboarding-overlay.active {
            display: flex;
            opacity: 1;
        }
        .onboarding-screen {
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            padding: 48px 40px;
            background: none;
            border: none;
            border-radius: 0;
            box-shadow: none;
            font-family: 'Geist', sans-serif;
            text-align: center;
            opacity: 0;
            transition: opacity 0.4s ease;
        }
        .onboarding-screen.active {
            display: flex;
            opacity: 1;
        }
        .dark-mode .onboarding-screen {
            background: none;
            border: none;
            box-shadow: none;
        }
        .onboarding-icon-bubble {
            width: 80px;
            height: 80px;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 24px;
        }
        .onboarding-icon-bubble.green { background: rgba(34, 197, 94, 0.15); color: #4ADE80; }
        .onboarding-icon-bubble.blue { background: rgba(59, 130, 246, 0.15); color: #60A5FA; }
        .onboarding-icon-bubble.purple { background: rgba(124,106,239, 0.15); color: #7c6aef; }
        .onboarding-icon-bubble.amber { background: rgba(245, 158, 11, 0.15); color: #FBBF24; }
        .onboarding-icon-bubble.teal { background: rgba(20, 184, 166, 0.15); color: #2DD4BF; }
        .onboarding-icon-bubble svg {
            width: 36px;
            height: 36px;
            animation: onboarding-bounce 2s ease-in-out infinite;
        }
        @keyframes onboarding-bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-8px); }
        }
        .onboarding-step-label {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: #4ADE80;
            margin-bottom: 12px;
            text-shadow: 0 0 20px rgba(34, 197, 94, 0.3);
        }
        .onboarding-title {
            font-size: 32px;
            font-weight: 800;
            color: #ffffff;
            margin-bottom: 14px;
            line-height: 1.2;
            text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
        }
        .dark-mode .onboarding-title { color: #ffffff; }
        .onboarding-text {
            font-size: 16px;
            color: rgba(255, 255, 255, 0.8);
            line-height: 1.6;
            margin-bottom: 28px;
            max-width: 500px;
            text-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
        }
        .dark-mode .onboarding-text { color: rgba(255, 255, 255, 0.8); }
        .onboarding-sample-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 12px 24px;
            background: rgba(34, 197, 94, 0.15);
            border: 1px solid rgba(34, 197, 94, 0.3);
            border-radius: 12px;
            color: #4ADE80;
            font-size: 14px;
            font-weight: 600;
            font-family: 'Geist', sans-serif;
            text-decoration: none;
            transition: all 0.2s;
            margin-bottom: 28px;
        }
        .onboarding-sample-btn:hover {
            background: rgba(34, 197, 94, 0.18);
            border-color: rgba(34, 197, 94, 0.35);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(34, 197, 94, 0.15);
        }
        .onboarding-dots {
            display: flex;
            gap: 8px;
            margin-bottom: 28px;
        }
        .onboarding-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            transition: all 0.3s;
            cursor: pointer;
        }
        .onboarding-dot.active {
            background: #34d399;
            box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.15);
            transform: scale(1.1);
        }
        .onboarding-dot.completed { background: rgba(34, 197, 94, 0.4); }
        .dark-mode .onboarding-dot { background: rgba(255, 255, 255, 0.12); }
        .onboarding-tag {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 6px;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 1px;
            text-transform: uppercase;
            margin-bottom: 16px;
        }
        .onboarding-tag.coming-soon { background: rgba(124,106,239, 0.1); color: #7c6aef; }
        .onboarding-actions {
            display: flex;
            align-items: center;
            gap: 16px;
            width: 100%;
            max-width: 360px;
        }
        .onboarding-skip {
            flex: 1;
            padding: 14px;
            border: none;
            background: none;
            color: rgba(255, 255, 255, 0.45);
            font-size: 14px;
            font-weight: 500;
            font-family: 'Geist', sans-serif;
            cursor: pointer;
            transition: all 0.2s;
            border-radius: 12px;
        }
        .onboarding-skip:hover { color: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.08); }
        .dark-mode .onboarding-skip:hover { color: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.08); }
        .onboarding-next {
            flex: 1;
            padding: 14px 28px;
            border-radius: 12px;
            font-size: 15px;
            font-weight: 700;
            font-family: 'Geist', sans-serif;
            background: #34d399;
            color: #fff;
            border: none;
            cursor: pointer;
            transition: all 0.2s;
        }
        .onboarding-next:hover {
            background: #16A34A;
            box-shadow: 0 6px 20px rgba(34, 197, 94, 0.3);
            transform: translateY(-1px);
        }
        .onboarding-matrix-preview {
            background: rgba(0, 0, 0, 0.25);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            padding: 14px 18px;
            font-family: 'SF Mono', 'Fira Code', monospace;
            font-size: 11px;
            color: rgba(255, 255, 255, 0.65);
            line-height: 1.7;
            text-align: left;
            margin-bottom: 24px;
            max-width: 440px;
            width: 100%;
            overflow-x: auto;
        }
        .dark-mode .onboarding-matrix-preview {
            background: rgba(0, 0, 0, 0.3);
            border-color: rgba(255, 255, 255, 0.1);
            color: rgba(255, 255, 255, 0.65);
        }
        /* Pointing arrows */
        .onboarding-arrow {
            position: absolute;
            pointer-events: none;
            z-index: 100001;
        }
        .onboarding-arrow svg {
            filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
        }
        .onboarding-arrow.point-left {
            animation: arrow-point-left 1.5s ease-in-out infinite;
        }
        .onboarding-arrow.point-down {
            animation: arrow-point-down 1.5s ease-in-out infinite;
        }
        .onboarding-arrow.point-right {
            animation: arrow-point-right 1.5s ease-in-out infinite;
        }
        @keyframes arrow-point-left {
            0%, 100% { transform: translateX(0); }
            50% { transform: translateX(-12px); }
        }
        @keyframes arrow-point-down {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(12px); }
        }
        @keyframes arrow-point-right {
            0%, 100% { transform: translateX(0); }
            50% { transform: translateX(12px); }
        }

        .translate-skip-btn {
            background: transparent;
            border: 1px solid rgba(0, 0, 0, 0.2);
            color: #0a0a0f;
            padding: 8px 20px;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 600;
            font-size: 13px;
            transition: all 0.15s;
        }
        .translate-skip-btn:hover {
            background: rgba(0, 0, 0, 0.05);
        }
        .dark-mode .translate-skip-btn {
            color: #c9d1d9;
            border-color: #484f58;
        }
        .dark-mode .translate-skip-btn:hover {
            background: rgba(255, 255, 255, 0.05);
        }

        /* File card styling */
        body:not(.dark-mode) .file-item {
            background: #faf9f6 !important;
            border-color: #d5d3cc !important;
            color: #2c2c2a !important;
        }

        body:not(.dark-mode) .file-item .file-name {
            color: #1f2328 !important;
        }

        body:not(.dark-mode) .file-item .file-size {
            color: #656d76 !important;
        }

        body:not(.dark-mode) .file-item .file-ext {
            background: #dddbd4 !important;
            color: #1f2328 !important;
        }

        /* Secondary buttons: dark gray -> light gray */
        body:not(.dark-mode) .pipeline-content button[style*="background:#21262d"],
        body:not(.dark-mode) .pipeline-content button[style*="background: #21262d"] {
            background: #f6f8fa !important;
            color: #1f2328 !important;
            border-color: #d5d3cc !important;
        }

        /* Bottom bar border */
        body:not(.dark-mode) .pipeline-content div[style*="border-top:1px solid #21262d"],
        body:not(.dark-mode) .pipeline-content div[style*="border-top: 1px solid #21262d"] {
            border-top-color: #d5d3cc !important;
        }

        /* ===== TITLES CARD BASE STYLES ===== */
        @keyframes borderRotate {
            0% { transform: translate(-50%, -50%) rotate(0deg); }
            100% { transform: translate(-50%, -50%) rotate(360deg); }
        }
        @keyframes borderPulse {
            0%, 100% { opacity: 0.5; }
            50% { opacity: 1; }
        }
        .title-card {
            position: relative;
            background: transparent;
            border: none;
            border-radius: 12px;
            padding: 2px;
            overflow: hidden;
        }
        .title-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #ef4444;
            animation: borderPulse 2.4s ease-in-out infinite;
        }
        .title-card::after {
            content: '';
            position: absolute;
            inset: 2px;
            background: #0a0a14;
            border-radius: 10px;
            z-index: 0;
        }
        .title-card > * {
            position: relative;
            z-index: 1;
        }
        .title-card > :first-child {
            border-radius: 10px 10px 0 0;
            overflow: hidden;
        }
        .title-card > :last-child {
            border-radius: 0 0 10px 10px;
        }
        .title-card.title-card-approved::before {
            animation: none;
            background: #34d399;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            transform: none;
        }
        .title-card.title-card-needs-review::before {
            background: #ef4444;
        }
        .title-card.title-card-awaiting::before {
            background: #7c6aef;
        }
        .title-card-detail {
            padding: 8px 10px;
            background: #0d1117;
            color: rgba(255, 255, 255, 0.85);
        }
        .tc-title {
            color: #7c6aef;
            font-weight: 600;
            font-size: 12px;
            line-height: 1.4;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-family: 'Space Mono', 'SF Mono', monospace;
            letter-spacing: 0.5px;
        }
        .tc-meta {
            color: #c4b5fd;
            font-size: 10px;
            line-height: 1.4;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            opacity: 0.7;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .tc-line {
            font-size: 10px;
            line-height: 1.4;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .tc-check { color: #7c6aef; }
        .tc-warning { color: #f0883e; }
        .tc-none { color: #484f58; }
        .tc-nr-dot { background: #fbbf24; }
        .title-card-badge {
            padding: 6px 10px 8px;
            background: #0a0a14;
            border-top: 1px solid rgba(124,106,239, 0.15);
        }
        #titlesBottomBar {
            border-top-color: rgba(124,106,239, 0.2);
        }
        #titlesBottomBar p {
            color: rgba(255, 255, 255, 0.8);
        }
        #titlesBottomBar span {
            color: rgba(255, 255, 255, 0.6);
        }
        .overlay-status-badge.needs-review {
            background: linear-gradient(135deg, #ef4444, #f97316);
            color: #fff;
        }

        /* ===== TITLES SEARCH BAR + FILTER ===== */
        #titlesSearchBar { display: none;
            padding: 8px 8px 4px;
            position: sticky;
            top: 0;
            z-index: 10;
            background: inherit;
        }
        .titles-search-group {
            display: flex;
            align-items: center;
            position: relative;
            width: 100%;
            gap: 8px;
        }
        .titles-search-input {
            flex: 1;
            height: 40px;
            line-height: 28px;
            padding: 0 1rem 0 2.5rem;
            border: 2px solid transparent;
            border-radius: 8px;
            outline: none;
            background-color: rgba(255, 255, 255, 0.08);
            color: #e0e0e0;
            font-size: 14px;
            font-family: 'Geist', sans-serif;
            transition: .3s ease;
            box-sizing: border-box;
        }
        .titles-search-input::placeholder { color: rgba(255, 255, 255, 0.35); }
        .titles-search-input:focus,
        .titles-search-input:hover {
            border-color: rgba(34, 197, 94, 0.4);
            background-color: rgba(255, 255, 255, 0.12);
            box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.1);
        }
        .titles-search-icon {
            position: absolute;
            left: 1rem;
            fill: rgba(255, 255, 255, 0.35);
            width: 1rem;
            height: 1rem;
            pointer-events: none;
            z-index: 1;
        }
        /* Light mode search */
        body:not(.dark-mode) .titles-search-input {
            background-color: #f3f3f4;
            color: #0d0c22;
            border-color: transparent;
        }
        body:not(.dark-mode) .titles-search-input::placeholder { color: #9e9ea7; }
        body:not(.dark-mode) .titles-search-input:focus,
        body:not(.dark-mode) .titles-search-input:hover {
            border-color: rgba(34, 197, 94, 0.4);
            background-color: #fff;
            box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.1);
        }
        body:not(.dark-mode) .titles-search-icon { fill: #9e9ea7; }
        /* Filter button */
        .titles-filter-btn {
            display: flex;
            align-items: center;
            gap: 6px;
            height: 40px;
            padding: 0 14px;
            border: 2px solid transparent;
            border-radius: 8px;
            background-color: rgba(255, 255, 255, 0.08);
            color: rgba(255, 255, 255, 0.6);
            font-size: 13px;
            font-family: 'Geist', sans-serif;
            cursor: pointer;
            transition: .3s ease;
            white-space: nowrap;
        }
        .titles-filter-btn:hover {
            border-color: rgba(34, 197, 94, 0.4);
            background-color: rgba(255, 255, 255, 0.12);
            box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.1);
        }
        .titles-filter-btn.active {
            border-color: #34d399;
            color: #4ADE80;
        }
        body:not(.dark-mode) .titles-filter-btn {
            background-color: #f3f3f4;
            color: #555;
        }
        body:not(.dark-mode) .titles-filter-btn:hover {
            border-color: rgba(34, 197, 94, 0.4);
            background-color: #fff;
            box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.1);
        }
        body:not(.dark-mode) .titles-filter-btn.active {
            border-color: #34d399;
            background-color: #fff;
            color: #34d399;
        }
        /* Filter dropdown */
        .titles-filter-dropdown {
            position: absolute;
            right: 0;
            top: 48px;
            background: rgba(30, 30, 30, 0.95);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            padding: 4px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            z-index: 100;
            min-width: 180px;
        }
        body:not(.dark-mode) .titles-filter-dropdown {
            background: rgba(255, 255, 255, 0.95);
            border: 1px solid rgba(0, 0, 0, 0.08);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        .filter-option {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 13px;
            color: #e0e0e0;
            transition: background 0.15s;
        }
        .filter-option:hover { background: rgba(255, 255, 255, 0.08); }
        body:not(.dark-mode) .filter-option { color: #333; }
        body:not(.dark-mode) .filter-option:hover { background: rgba(0, 0, 0, 0.05); }
        .filter-option.active { font-weight: 600; }
        .filter-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            display: inline-block;
        }

        /* ===== TITLES CARD LIGHT MODE OVERRIDES ===== */
        body:not(.dark-mode) .title-card::after {
            background: rgba(255, 255, 255, 0.92);
        }
        body:not(.dark-mode) .title-card-detail {
            background: #f8f8fa;
            color: #333;
        }
        body:not(.dark-mode) .tc-title {
            color: #1a1a2e;
        }
        body:not(.dark-mode) .tc-meta {
            color: #4a4a5a;
        }
        body:not(.dark-mode) .tc-check {
            color: #2d8a2d;
        }
        body:not(.dark-mode) .tc-none {
            color: #999;
        }
        body:not(.dark-mode) .tc-nr-dot {
            background: #fbbf24;
        }
        body:not(.dark-mode) .title-card-badge {
            background: #f0f0f4;
            border-top-color: rgba(0, 180, 0, 0.15);
        }
        body:not(.dark-mode) .title-card .overlay-status-option {
            color: #333;
        }
        body:not(.dark-mode) .title-card .thumb-placeholder {
            color: #888;
        }
        body:not(.dark-mode) .overlay-status-badge.needs-review {
            background: linear-gradient(135deg, #ef4444, #f97316);
            color: #fff;
        }
        body:not(.dark-mode) #titlesBottomBar {
            border-top: 2px solid #1a1a2e !important;
        }
        body:not(.dark-mode) #titlesBottomBar p {
            color: #1a1a2e !important;
        }
        body:not(.dark-mode) #titlesBottomBar span {
            color: #333 !important;
        }

        /* EXCEPTION: Preview monitor stays dark (NLE player) */
        body:not(.dark-mode) #previewMonitor,
        body:not(.dark-mode) .scrub-bar-container {
            background: #212121 !important;
            color: #ffffff !important;
        }

        #previewMonitor video {
            border: 3px solid #00ff00;
            box-sizing: border-box;
        }

        body:not(.dark-mode) .scrub-bar-container span,
        body:not(.dark-mode) .scrub-bar-container button {
            color: #ffffff !important;
        }

        /* Preview background toggle - green slider */
        .preview-bg-toggle-wrapper {
            position: absolute;
            top: 10px;
            right: 10px;
            z-index: 10;
        }
        .preview-switch {
            font-size: 9px;
            position: relative;
            display: inline-block;
            width: 3.5em;
            height: 2em;
        }
        .preview-switch .preview-input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        .preview-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #2e2e2e;
            transition: .4s;
            border-radius: 30px;
        }
        .preview-slider:before {
            position: absolute;
            content: "";
            height: 1.4em;
            width: 1.4em;
            border-radius: 20px;
            left: 0.3em;
            bottom: 0.3em;
            background-color: #4e4;
            transition: .4s;
        }
        .preview-input:checked + .preview-slider {
            background-color: #000;
        }
        .preview-input:focus + .preview-slider {
            box-shadow: 0 0 1px #000;
        }
        .preview-input:checked + .preview-slider:before {
            transform: translateX(1.5em);
        }

        /* Format radio text buttons */
        .format-radio-group {
            display: flex;
            gap: 24px;
            justify-content: center;
            align-items: center;
            padding: 10px 0;
        }
        .format-radio-group label {
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            flex-grow: 0;
        }
        .format-radio-group input {
            display: none;
        }
        .format-radio-group .format-label {
            position: relative;
            font-size: 14px;
            color: rgba(0, 255, 0, 0.5);
            transition: all 0.3s;
            padding-bottom: 4px;
        }
        .format-radio-group input:checked + .format-label {
            color: rgba(0, 255, 0, 1);
        }
        .format-radio-group .format-label::before,
        .format-radio-group .format-label::after {
            content: '';
            display: block;
            position: absolute;
            right: 0;
            bottom: 0;
            border-radius: 3px;
            background: rgba(0, 255, 0, 0.8);
            opacity: 0;
            transition: all 0.3s;
        }
        .format-radio-group .format-label::before {
            width: 100%;
            height: 2px;
        }
        .format-radio-group .format-label::after {
            width: 50%;
            height: 2px;
            bottom: -3px;
            background: rgba(0, 255, 0, 0.4);
        }
        .format-radio-group input:checked + .format-label::before,
        .format-radio-group input:checked + .format-label::after {
            opacity: 1;
        }

        /* Format HUD badge */
        .format-hud {
            position: absolute;
            bottom: 12px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.7);
            color: #0f0;
            font-family: 'SF Mono', 'Courier New', monospace;
            font-size: 11px;
            letter-spacing: 0.5px;
            padding: 4px 12px;
            border-radius: 4px;
            z-index: 10;
            pointer-events: none;
            transition: opacity 0.3s;
            white-space: nowrap;
            max-width: 90%;
        }

        /* ===== DARK MODE: Preview accent green → purple ===== */
        body.dark-mode #previewMonitor video {
            border-color: #7c6aef;
        }
        body.dark-mode .preview-slider:before {
            background-color: #7c6aef;
        }
        body.dark-mode .format-radio-group .format-label {
            color: rgba(124,106,239, 0.5);
        }
        body.dark-mode .format-radio-group input:checked + .format-label {
            color: rgba(124,106,239, 1);
        }
        body.dark-mode .format-radio-group .format-label::before,
        body.dark-mode .format-radio-group .format-label::after {
            background: rgba(124,106,239, 0.8);
        }
        body.dark-mode .format-radio-group input:checked + .format-label::after {
            background: rgba(124,106,239, 0.4);
        }
        body.dark-mode .format-hud {
            color: #7c6aef;
        }
        body.dark-mode #timecodeHUD {
            color: #7c6aef !important;
        }
        /* NLE toolbar dropdown styling */
        body.dark-mode .nle-indicator { }
        body.dark-mode #nleToolbarToggle { color: #bbb; }

        /* NLE-style scrub bar */
        #previewScrubber {
            -webkit-appearance: none;
            appearance: none;
            height: 4px;
            background: rgba(255,255,255,0.12);
            border-radius: 2px;
            outline: none;
            position: relative;
        }
        #previewScrubber::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #fff;
            cursor: pointer;
            box-shadow: 0 0 4px rgba(0,0,0,0.4);
            border: none;
            margin-top: -4px;
            position: relative;
            z-index: 2;
        }
        #previewScrubber::-moz-range-thumb {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #fff;
            cursor: pointer;
            box-shadow: 0 0 4px rgba(0,0,0,0.4);
            border: none;
            margin-top: -4px;
        }
        #previewScrubber::-webkit-slider-runnable-track {
            height: 4px;
            border-radius: 2px;
        }
        #previewScrubber::-moz-range-track {
            height: 4px;
            background: rgba(255,255,255,0.12);
            border-radius: 2px;
            border: none;
        }
        #previewScrubber:hover::-webkit-slider-thumb {
            transform: scale(1.2);
        }
        body.dark-mode #previewScrubber::-webkit-slider-thumb {
            background: #7c6aef;
            box-shadow: 0 0 6px rgba(124,106,239,0.4);
        }
        body.dark-mode #previewScrubber::-moz-range-thumb {
            background: #7c6aef;
            box-shadow: 0 0 6px rgba(124,106,239,0.4);
        }
        /* Shot marker tooltip */
        #shotMarkerTooltip {
            display: none;
            position: fixed;
            background: rgba(0,0,0,0.85);
            color: #00cc66;
            font-family: 'SF Mono','Courier New',monospace;
            font-size: 10px;
            padding: 3px 8px;
            border-radius: 4px;
            pointer-events: none;
            z-index: 30;
            white-space: nowrap;
            box-shadow: 0 2px 8px rgba(0,0,0,0.4);
        }
        body.dark-mode #shotMarkerTooltip {
            color: #7c6aef;
        }

        /* NLE OVR toolbar light mode overrides */
        body:not(.dark-mode) #nleToolbarToggle {
            border-color: rgba(0, 0, 0, 0.15) !important;
            color: #555 !important;
        }
        body:not(.dark-mode) #nleToolbarDropdown .nle-toggle-row span:nth-child(2) {
            color: #0a0a0f !important;
        }
        body:not(.dark-mode) #nleToolbarDropdown .nle-toggle-row span:nth-child(3) {
            color: #888 !important;
        }
        body:not(.dark-mode) #nleToolbarDropdown .nle-toggle-row:hover {
            background: rgba(0, 0, 0, 0.04) !important;
        }

        /* Electric glow on chat frame grab images */
        @keyframes electricBorder {
            0% { border-color: rgba(0, 255, 100, 0.3); box-shadow: 0 0 8px rgba(0, 255, 100, 0.1); }
            25% { border-color: rgba(0, 255, 150, 0.6); box-shadow: 0 0 12px rgba(0, 255, 100, 0.2); }
            50% { border-color: rgba(0, 255, 200, 0.8); box-shadow: 0 0 16px rgba(0, 255, 150, 0.3); }
            75% { border-color: rgba(0, 200, 255, 0.6); box-shadow: 0 0 12px rgba(0, 255, 100, 0.2); }
            100% { border-color: rgba(0, 255, 100, 0.3); box-shadow: 0 0 8px rgba(0, 255, 100, 0.1); }
        }
        @keyframes electricBorderDark {
            0% { border-color: rgba(124,106,239, 0.3); box-shadow: 0 0 8px rgba(124,106,239, 0.1); }
            25% { border-color: rgba(124,106,239, 0.6); box-shadow: 0 0 12px rgba(124,106,239, 0.2); }
            50% { border-color: rgba(99, 102, 241, 0.8); box-shadow: 0 0 16px rgba(99, 102, 241, 0.3); }
            75% { border-color: rgba(59, 130, 246, 0.6); box-shadow: 0 0 12px rgba(99, 102, 241, 0.2); }
            100% { border-color: rgba(124,106,239, 0.3); box-shadow: 0 0 8px rgba(124,106,239, 0.1); }
        }
        .reframe-tag-hidden { display: none !important; }
        .chat-approval-image {
            border: 3px solid rgba(0, 255, 100, 0.3);
            border-radius: 6px;
            animation: electricBorder 4s ease-in-out infinite;
        }
        body.dark-mode .chat-approval-image {
            border-color: rgba(124,106,239, 0.3);
            animation: electricBorderDark 4s ease-in-out infinite;
        }

        /* Text overlay preview items */
        .text-overlay-item {
            position: absolute;
            pointer-events: none;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
            z-index: 10;
        }

        /* Active adjustments HUD */
        #activeAdjustmentsDisplay {
            background: rgba(0, 255, 0, 0.08);
            color: rgba(0, 255, 0, 0.7);
            border: 1px solid rgba(0, 255, 0, 0.2);
        }
        body.dark-mode #activeAdjustmentsDisplay {
            background: rgba(124,106,239, 0.15);
            color: rgba(255, 255, 255, 0.7);
            border: 1px solid rgba(124,106,239, 0.3);
        }

        /* Before/After toggle */
        #beforeAfterToggle {
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        #beforeAfterToggle.showing-original {
            opacity: 0.5;
        }
        body.dark-mode #beforeAfterToggle {
            background: rgba(124,106,239, 0.2);
            color: #7c6aef;
            border-color: rgba(124,106,239, 0.4);
        }
        body:not(.dark-mode) #beforeAfterToggle {
            background: rgba(0, 255, 0, 0.1);
            color: #3a9a3a;
            border-color: rgba(0, 255, 0, 0.3);
        }

        /* Title card names keep green in both modes */

        /* Title card metadata text */
        body:not(.dark-mode) .step-titles-content div[style*="color: #7d8590"],
        body:not(.dark-mode) .step-titles-content div[style*="color:#7d8590"] {
            color: #656d76 !important;
        }

        /* Title cards keep dark background in light mode — handled by .title-card overrides */


        /* ===== PROFESSIONAL PIPELINE WINDOWS STYLING ===== */
        /* Target the REAL professional windows - NUCLEAR CSS REMOVED */
        .pipeline-content {
            position: fixed !important;
            top: 48px !important;
            left: var(--sidebar-width) !important;
            width: calc(100vw - var(--sidebar-width)) !important;
            bottom: 0 !important;
            background: rgba(255, 255, 255, 0.08) !important;
            backdrop-filter: blur(20px) saturate(1.2);
            -webkit-backdrop-filter: blur(20px) saturate(1.2);
            border-radius: 16px;
            color: #ffffff !important;
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
            overflow: hidden !important;
        }

        .content-center .step-batch-content,
        .content-center .step-translate-content,
        .content-center .step-titles-content,
        .content-center .step-export-content {
            width: 100% !important;
            max-width: none !important;
            height: 100% !important;
            padding: 0 !important;
            box-sizing: border-box !important;
            background: transparent !important;
            color: #ffffff !important;
            overflow-y: auto !important;
            justify-content: flex-start !important;
            align-items: stretch !important;
        }
        /* Console loader overlay */
        #consoleLoaderOverlay {
            position: fixed;
            /* Match the .pipeline-content panel bounds exactly so the loader sits
               INSIDE the work console (not spilling past L/R, not short T/B). */
            top: 12px;
            left: calc(var(--sidebar-width) + 12px);
            right: 12px;
            bottom: 12px;
            width: auto;
            border-radius: 14px;
            overflow: hidden;
            /* Warm, lifted dark (not a cold near-black) so the encoding/loading
               screen reads soft in dark mode. */
            background: rgba(33, 29, 32, 0.97);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 55;
            opacity: 0;
            pointer-events: none;
            transition: opacity 300ms ease;
        }
        #consoleLoaderOverlay.active {
            opacity: 1;
            pointer-events: all;
        }
        #consoleLoaderOverlay video {
            width: 220px;
            height: auto;
            display: none !important;
        }
        #consoleLoaderOverlay .loader-lottie {
            width: 120px;
            height: 120px;
            display: block;
        }
        #consoleLoaderOverlay .loader-message {
            color: #ffffff;
            font-family: 'Geist', sans-serif;
            font-size: 14px;
            margin-top: 20px;
            text-align: center;
            opacity: 0.9;
        }
        /* Light mode loader */
        #consoleLoaderOverlay.light-mode {
            background: rgba(252, 252, 252, 0.97);
        }
        #consoleLoaderOverlay.light-mode .loader-lottie {
            display: block;
        }
        #consoleLoaderOverlay.light-mode .loader-message {
            color: #1a1a2e;
        }
        /* Dark-mode guard: showConsoleLoader() adds .light-mode from _isLightMode(),
           which can misfire (returns light when body lacks .dark-mode at show time),
           painting the encoding/loading screen bright white over a dark app. When the
           app is in dark mode, force the warm dark surface + light text regardless. */
        body.dark-mode #consoleLoaderOverlay.light-mode {
            background: rgba(33, 29, 32, 0.97);
        }
        body.dark-mode #consoleLoaderOverlay.light-mode .loader-message {
            color: #f0f0f3;
        }

        /* Titles tab layout — parent is flex column, grid scrolls, bar stays fixed.
           padding-top clears the fixed pill progress bar (#pipelineTabsBar, top:0,
           ~54px tall) that floats over the panel, so the search bar + grid slide
           down below the pill bar's bottom line instead of tucking behind it. */
        #step-titles .step-titles-content {
            overflow: hidden !important;
            display: flex !important;
            flex-direction: column !important;
            padding: 54px 0 0 0 !important;
        }

        /* Export tab layout — same pattern + same pill-bar clearance so the preview
           window and the right-side deliverable cards slide down clear of the bar. */
        #step-export .step-export-content {
            overflow: hidden !important;
            display: flex !important;
            flex-direction: column !important;
            padding: 54px 0 0 0 !important;
        }

        /* ===== EXPORT TAB TWO-COLUMN LAYOUT ===== */
        .export-layout {
            display: grid;
            grid-template-columns: 1fr 300px;
            gap: 14px;
            flex: 1;
            min-height: 0;
            padding: 14px;
            overflow: hidden;
            position: relative;
            align-items: start;
        }

        .export-left {
            display: flex;
            flex-direction: column;
            gap: 8px;
            overflow: hidden;
            min-width: 0;
        }

        .export-right {
            display: flex;
            flex-direction: column;
            gap: 0;
            overflow: hidden;
            min-height: 0;
            min-width: 0;
            align-self: stretch;
        }

        /* Preview player */
        .export-preview-container {
            position: relative;
            width: 100%;
            aspect-ratio: 16/9;
            background: rgba(0, 0, 0, 0.04);
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid rgba(0, 0, 0, 0.08);
            flex-shrink: 0;
        }

        .dark-mode .export-preview-container,
        .console-dark-mode .export-preview-container {
            background: rgba(255, 255, 255, 0.04);
            border-color: rgba(255, 255, 255, 0.08);
        }

        .export-preview-video {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: none;
        }

        .export-preview-video.active {
            display: block;
        }

        .export-preview-empty {
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 12px;
            color: rgba(0, 0, 0, 0.3);
            font-size: 14px;
            font-family: 'Geist', sans-serif;
        }

        .dark-mode .export-preview-empty,
        .console-dark-mode .export-preview-empty {
            color: rgba(255, 255, 255, 0.3);
        }

        /* Master selectors */
        .export-masters {
            display: flex;
            gap: 4px;
            overflow-x: auto;
            padding: 0;
            flex-shrink: 0;
            min-width: 0;
        }

        .export-master-card {
            flex: 1;
            min-width: 0;
            cursor: pointer;
            border-radius: 6px;
            overflow: hidden;
            border: 1px solid rgba(0, 0, 0, 0.06);
            transition: all 0.2s;
            background: rgba(0, 0, 0, 0.03);
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 8px;
        }

        .export-master-card:hover {
            background: rgba(0, 0, 0, 0.06);
            border-color: rgba(124,106,239, 0.3);
        }

        .export-master-card.active {
            border-color: rgba(124,106,239, 0.5);
            background: rgba(124,106,239, 0.06);
            box-shadow: 0 0 8px rgba(124,106,239, 0.15);
        }

        .export-master-thumb {
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .export-master-label {
            font-size: 9px;
            font-weight: 600;
            font-family: 'JetBrains Mono', monospace;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #555;
        }

        .dark-mode .export-master-card,
        .console-dark-mode .export-master-card {
            background: rgba(255, 255, 255, 0.03);
            border-color: rgba(255, 255, 255, 0.06);
        }

        .dark-mode .export-master-card:hover,
        .console-dark-mode .export-master-card:hover {
            background: rgba(255, 255, 255, 0.06);
        }

        .dark-mode .export-master-card.active,
        .console-dark-mode .export-master-card.active {
            background: rgba(124,106,239, 0.08);
            border-color: rgba(124,106,239, 0.4);
        }

        .dark-mode .export-master-label,
        .console-dark-mode .export-master-label {
            color: rgba(255, 255, 255, 0.6);
        }

        /* Job details */
        .export-job-details {
            background: rgba(0, 0, 0, 0.03);
            border-radius: 8px;
            padding: 10px 14px;
            border: 1px solid rgba(0, 0, 0, 0.06);
            flex-shrink: 0;
        }

        .dark-mode .export-job-details,
        .console-dark-mode .export-job-details {
            background: rgba(255, 255, 255, 0.04);
            border-color: rgba(255, 255, 255, 0.06);
        }

        .export-job-title {
            font-size: 15px;
            font-weight: 700;
            font-family: 'Geist', sans-serif;
            margin-bottom: 8px;
            color: #0a0a0f;
        }

        .dark-mode .export-job-title,
        .console-dark-mode .export-job-title {
            color: rgba(255, 255, 255, 0.9);
        }

        .export-job-meta {
            font-size: 13px;
            font-family: 'Geist', sans-serif;
            color: #666;
            line-height: 1.6;
        }

        .dark-mode .export-job-meta,
        .console-dark-mode .export-job-meta {
            color: rgba(255, 255, 255, 0.5);
        }

        /* Action buttons */
        .export-actions {
            display: flex;
            gap: 6px;
            flex-shrink: 0;
        }

        .export-share-btn,
        .export-download-btn {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 7px 10px;
            border-radius: 6px;
            font-size: 11px;
            font-weight: 600;
            font-family: 'Geist', sans-serif;
            cursor: pointer;
            transition: all 0.2s;
            border: none;
        }

        .export-share-btn {
            background: rgba(0, 0, 0, 0.05);
            color: #333;
            border: 1px solid rgba(0, 0, 0, 0.1);
        }

        .export-share-btn:hover {
            background: rgba(0, 0, 0, 0.08);
        }

        .dark-mode .export-share-btn,
        .console-dark-mode .export-share-btn {
            background: rgba(255, 255, 255, 0.06);
            color: rgba(255, 255, 255, 0.7);
            border-color: rgba(255, 255, 255, 0.08);
        }

        .dark-mode .export-share-btn:hover,
        .console-dark-mode .export-share-btn:hover {
            background: rgba(255, 255, 255, 0.1);
        }

        .export-download-btn {
            background: #34d399;
            color: #fff;
        }

        .export-download-btn:hover {
            background: #16A34A;
            box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
        }

        /* Deliverables list */
        .export-deliverables-list {
            flex: 1;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 4px;
            padding: 6px;
            min-height: 0;
        }

        .export-deliverable-row {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 7px 10px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 1px solid transparent;
            background: rgba(0, 0, 0, 0.02);
            flex-shrink: 0;
            position: relative;
            overflow: hidden;
        }

        .export-deliverable-row:hover {
            background: rgba(0, 0, 0, 0.05);
        }

        .export-deliverable-row.active {
            border-color: var(--deliv-color, rgba(34, 197, 94, 0.3));
            background: var(--deliv-bg, rgba(34, 197, 94, 0.06));
            box-shadow: 0 0 8px var(--deliv-glow, rgba(34, 197, 94, 0.15)), 0 0 20px var(--deliv-glow, rgba(34, 197, 94, 0.08));
        }

        .dark-mode .export-deliverable-row,
        .console-dark-mode .export-deliverable-row {
            background: rgba(255, 255, 255, 0.03);
        }

        .dark-mode .export-deliverable-row:hover,
        .console-dark-mode .export-deliverable-row:hover {
            background: rgba(255, 255, 255, 0.06);
        }

        .dark-mode .export-deliverable-row.active,
        .console-dark-mode .export-deliverable-row.active {
            background: var(--deliv-bg, rgba(34, 197, 94, 0.08));
            border-color: var(--deliv-color, rgba(34, 197, 94, 0.35));
            box-shadow: 0 0 10px var(--deliv-glow, rgba(34, 197, 94, 0.2)), 0 0 25px var(--deliv-glow, rgba(34, 197, 94, 0.1));
        }

        .export-deliverable-icon {
            width: 36px;
            height: 24px;
            border-radius: 3px;
            background: rgba(0, 0, 0, 0.04);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            overflow: hidden;
            border: 1px solid rgba(0, 0, 0, 0.06);
            transition: all 0.3s ease;
        }

        .export-deliverable-row.active .export-deliverable-icon {
            border-color: var(--deliv-color, rgba(34, 197, 94, 0.3));
        }

        .export-deliverable-icon img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .dark-mode .export-deliverable-icon,
        .console-dark-mode .export-deliverable-icon {
            background: rgba(255, 255, 255, 0.04);
            border-color: rgba(255, 255, 255, 0.06);
        }

        .export-deliverable-name {
            font-size: 10px;
            font-weight: 600;
            font-family: 'Geist', sans-serif;
            color: #555;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            transition: color 0.3s;
        }

        .export-deliverable-row.active .export-deliverable-name {
            color: #0a0a0f;
        }

        .dark-mode .export-deliverable-name,
        .console-dark-mode .export-deliverable-name {
            color: #888;
        }

        .dark-mode .export-deliverable-row.active .export-deliverable-name,
        .console-dark-mode .export-deliverable-row.active .export-deliverable-name {
            color: #e8e8ec;
        }

        .export-deliverable-meta {
            font-size: 8px;
            font-family: 'JetBrains Mono', monospace;
            color: #aaa;
            margin-top: 1px;
            transition: color 0.3s;
        }

        .dark-mode .export-deliverable-meta,
        .console-dark-mode .export-deliverable-meta {
            color: #555;
        }

        .export-deliverable-format {
            padding: 1px 5px;
            border-radius: 2px;
            font-size: 8px;
            font-weight: 700;
            font-family: 'JetBrains Mono', monospace;
            flex-shrink: 0;
            transition: all 0.3s;
        }

        /* Encoding shimmer animation */
        .export-deliverable-row.encoding {
            opacity: 0.7;
            cursor: default;
        }
        .export-deliverable-row.encoding::after {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.04) 40%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 60%, transparent 100%);
            background-size: 200% 100%;
            animation: exportShimmer 1.8s ease-in-out infinite;
        }
        @keyframes exportShimmer {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }
        @keyframes exportSpin {
            to { transform: rotate(360deg); }
        }

        /* Glow pulse on selection */
        @keyframes exportGlowPulse {
            0% { box-shadow: 0 0 4px var(--deliv-glow, rgba(34,197,94,0.1)), 0 0 10px var(--deliv-glow, rgba(34,197,94,0.05)); }
            50% { box-shadow: 0 0 12px var(--deliv-glow, rgba(34,197,94,0.25)), 0 0 30px var(--deliv-glow, rgba(34,197,94,0.12)); }
            100% { box-shadow: 0 0 8px var(--deliv-glow, rgba(34,197,94,0.15)), 0 0 20px var(--deliv-glow, rgba(34,197,94,0.08)); }
        }
        .export-deliverable-row.active {
            animation: exportGlowPulse 0.6s ease-out;
        }

        /* Scrollbar styling for deliverables list */
        .export-deliverables-list::-webkit-scrollbar {
            width: 3px;
        }
        .export-deliverables-list::-webkit-scrollbar-track {
            background: transparent;
        }
        .export-deliverables-list::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.1);
            border-radius: 2px;
        }
        .dark-mode .export-deliverables-list::-webkit-scrollbar-thumb,
        .console-dark-mode .export-deliverables-list::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.1);
        }

        /* Export empty/processing state */
        .export-processing-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 12px;
            padding: 40px 20px;
            text-align: center;
            color: #888;
            font-size: 14px;
            font-family: 'Geist', sans-serif;
        }
        .dark-mode .export-processing-state,
        .console-dark-mode .export-processing-state {
            color: rgba(255, 255, 255, 0.4);
        }

        /* Batch tab — ensure preview wrapper fills height and pins its bottom bar */
        #step-batch .step-batch-content {
            overflow: hidden !important;
            display: flex !important;
            flex-direction: column !important;
            padding: 0 !important;
            height: 100% !important;
        }
        .console-drop-zone {
            flex: 1 !important;
            min-height: 0 !important;
            overflow-y: auto !important;
        }
        .console-drop-zone.preview-mode {
            overflow: hidden !important;
        }

        /* Titles tab status badges */
        .overlay-status-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 3px 8px;
            border-radius: 12px;
            font-size: 10px;
            font-weight: 500;
            cursor: pointer;
            border: none;
            position: relative;
            user-select: none;
            line-height: 1;
        }
        /* needs-review colors handled in title card CSS section above */
        .overlay-status-badge.in-progress { background: linear-gradient(135deg, #7c6aef, #60a5fa); color: #fff; }
        .overlay-status-badge.approved { background: rgba(0,200,80,0.15); color: #00c850; }

        .status-dropdown-container {
            position: relative;
            display: inline-block;
        }
        .overlay-status-menu {
            position: absolute;
            bottom: 100%;
            left: 0;
            margin-bottom: 4px;
            background: #161b22;
            border: 1px solid #30363d;
            border-radius: 6px;
            overflow: hidden;
            z-index: 100;
            min-width: 140px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.5);
            display: none;
        }
        .overlay-status-menu.open { display: block; }
        .overlay-status-option {
            padding: 6px 10px;
            font-size: 11px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            color: #e6edf3;
            border: none;
            background: none;
            width: 100%;
            text-align: left;
        }
        .overlay-status-option:hover { background: #30363d; }
        /* Light mode dropdown overrides */
        body:not(.dark-mode) .overlay-status-menu {
            background: rgba(255, 255, 255, 0.95);
            border: 1px solid rgba(0, 0, 0, 0.1);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        body:not(.dark-mode) .overlay-status-option {
            color: #0a0a0f;
        }
        body:not(.dark-mode) .overlay-status-option:hover {
            background: rgba(0, 0, 0, 0.05);
        }
        .overlay-status-option .status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            flex-shrink: 0;
        }

        /* ===== PIPELINE ACTION BUTTON — gradient border with glow ===== */
        .pipeline-action-btn {
            position: relative;
            text-decoration: none;
            color: #fff;
            background: linear-gradient(45deg, #0ce39a, #69007f, #fc0987);
            padding: 8px 14px;
            border-radius: 8px;
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0.5px;
            cursor: pointer;
            border: none;
            outline: none;
            white-space: nowrap;
            z-index: 1;
            flex-shrink: 0;
        }
        .pipeline-action-btn span {
            position: relative;
            z-index: 1;
        }
        .pipeline-action-btn::before {
            content: "";
            position: absolute;
            inset: 1px;
            background: #272727;
            border-radius: 7px;
            transition: 0.5s;
        }
        .pipeline-action-btn:hover::before {
            opacity: 0.7;
        }
        .pipeline-action-btn::after {
            content: "";
            position: absolute;
            inset: 0px;
            background: linear-gradient(45deg, #0ce39a, #69007f, #fc0987);
            border-radius: 8px;
            transition: 0.5s;
            opacity: 0;
            filter: blur(10px);
            z-index: -1;
        }
        .pipeline-action-btn:hover::after {
            opacity: 0.5;
        }
        /* Light mode variant */
        body:not(.dark-mode) .pipeline-action-btn::before {
            background: #f0f0f2;
        }
        body:not(.dark-mode) .pipeline-action-btn {
            color: #1a1a2e;
        }
        body:not(.dark-mode) .pipeline-action-btn span {
            color: #1a1a2e;
        }
        body:not(.dark-mode) .pipeline-action-btn:hover::before {
            opacity: 0.5;
        }
        body:not(.dark-mode) .pipeline-action-btn:hover span {
            color: #fff;
        }
        /* Dark mode (default) */
        body.dark-mode .pipeline-action-btn::before {
            background: #272727;
        }
        body.dark-mode .pipeline-action-btn {
            color: #fff;
        }

        /* ===== PIPELINE SECONDARY BUTTON — gradient border (subtle) ===== */
        .pipeline-secondary-btn {
            position: relative;
            text-decoration: none;
            color: #fff;
            background: linear-gradient(45deg, #0ce39a, #69007f, #fc0987);
            padding: 8px 14px;
            border-radius: 8px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            border: none;
            outline: none;
            white-space: nowrap;
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }
        .pipeline-secondary-btn span {
            position: relative;
            z-index: 1;
        }
        .pipeline-secondary-btn::before {
            content: "";
            position: absolute;
            inset: 1px;
            background: #272727;
            border-radius: 7px;
            transition: 0.5s;
        }
        .pipeline-secondary-btn:hover::before {
            opacity: 0.7;
        }
        body:not(.dark-mode) .pipeline-secondary-btn::before {
            background: #f0f0f2;
        }
        body:not(.dark-mode) .pipeline-secondary-btn {
            color: #1a1a2e;
        }
        body:not(.dark-mode) .pipeline-secondary-btn span {
            color: #1a1a2e;
        }
        body:not(.dark-mode) .pipeline-secondary-btn:hover span {
            color: #fff;
        }

        /* ===== PIPELINE BOTTOM BAR DIVIDERS (unified) ===== */
        /* Solid opaque surface so the panel's dot grid can't bleed through the
           action bar (dots stop at the divider) and the bar color is identical
           on titles + export. Opaque = covers the grid behind it. */
        #previewBottomBar,
        #titlesBottomBar,
        #exportBottomBar,
        .batch-file-bar {
            border-top: 2px solid rgba(255, 255, 255, 0.15) !important;
            background: #101018 !important;
        }
        body:not(.dark-mode) #previewBottomBar,
        body:not(.dark-mode) #titlesBottomBar,
        body:not(.dark-mode) #exportBottomBar,
        body:not(.dark-mode) .batch-file-bar {
            border-top: 2px solid rgba(0, 0, 0, 0.1) !important;
            background: #fdfcfa !important;
        }

        /* Localize action bar (#loc-action-bar, built inline in localize-overhaul.js
           with no background) — same opaque treatment so the panel dots don't bleed
           through it, matching every other pipeline bar. */
        #loc-action-bar {
            background: #101018 !important;
            border-top: 2px solid rgba(255, 255, 255, 0.15) !important;
        }
        body:not(.dark-mode) #loc-action-bar {
            background: #fdfcfa !important;
            border-top: 2px solid rgba(0, 0, 0, 0.1) !important;
        }

        /* Remove the card-flip player's built-in footer ("4 formats · Smart Reframe
           complete" + SKIP LOCALIZATION + Process). It duplicates #loc-action-bar's
           Skip/Process. The React bundle can't be edited, so hide the footer — it's
           the last child of the player container (mount > root > playerContainer). */
        #loc-flip-player-mount > div > div > div:last-child {
            display: none !important;
        }

        /* Titles tab thumbnail grid cards */
        .thumb-container {
            width: 100%;
            aspect-ratio: 1 / 1;
            background: #000;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            border-radius: 6px 6px 0 0;
        }
        .thumb-container img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            display: block;
        }
        .thumb-container .thumb-placeholder {
            color: #484f58;
            font-size: 10px;
            text-align: center;
            max-width: 90%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /* Ensure batch step can expand to full width for previews */
        .content-center .step-batch-content {
            max-width: none !important;
        }

        .carousel-container {
            margin-top: 20px;
            position: relative;
            width: 100%;
            max-width: 100%;
            overflow: hidden;
        }

        .carousel-controls-row {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            width: 100%;
        }

        .carousel-preview-row {
            width: 100%;
            position: relative;
        }

        .aspect-ratio-previews {
            display: flex;
            gap: 80px;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            -ms-overflow-style: none;
            margin: 0;
            flex-wrap: nowrap;
            justify-content: flex-start;
            position: relative;
        }
        
        .aspect-ratio-previews::before,
        .aspect-ratio-previews::after {
            content: '';
            flex: 0 0 calc(50% - 250px);
            min-width: 100px;
        }

        .aspect-ratio-previews::-webkit-scrollbar {
            display: none;
        }

        .aspect-preview {
            flex: 0 0 auto;
            scroll-snap-align: center;
            scroll-snap-stop: always;
            transform: scale(0.9);
            transition: all 0.3s ease;
        }

        .aspect-preview.active {
            transform: scale(1);
        }

        .preview-container {
            height: 400px;
            width: auto;
        }

        .preview-container[data-aspect-ratio="9:16"] {
            width: 225px;
        }

        .preview-container[data-aspect-ratio="4:5"] {
            width: 320px;
        }

        .preview-container[data-aspect-ratio="1:1"] {
            width: 400px;
        }

        .carousel-arrow {
            background: rgba(0, 0, 0, 0.05);
            border: 1px solid rgba(0, 0, 0, 0.15);
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: #1f2937;
            transition: all 0.3s ease;
            flex-shrink: 0;
            z-index: 10;
        }

        .carousel-arrow:hover {
            background: rgba(0, 0, 0, 0.1);
            border-color: rgba(0, 0, 0, 0.25);
            transform: scale(1.1);
        }

        .carousel-arrow:active {
            transform: scale(0.95);
        }

        .carousel-arrow:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }

        .dark-mode .carousel-arrow,
        .main-content.console-dark-mode .carousel-arrow {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: #ffffff;
        }

        .dark-mode .carousel-arrow:hover,
        .main-content.console-dark-mode .carousel-arrow:hover {
            background: rgba(255, 255, 255, 0.2);
            border-color: rgba(255, 255, 255, 0.4);
        }

        .dark-mode .carousel-arrow:disabled,
        .main-content.console-dark-mode .carousel-arrow:disabled {
            opacity: 0.3;
        }

        .carousel-indicators-wrapper {
            display: flex;
            justify-content: center;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
            scrollbar-width: none;
            -ms-overflow-style: none;
            min-width: 0;
        }

        .carousel-indicators-wrapper::-webkit-scrollbar {
            display: none;
        }

        .carousel-indicators {
            display: flex;
            gap: 12px;
            padding: 8px 16px;
            align-items: center;
        }

        .indicator-chip,
        .master-console-overlay .indicator-chip,
        .master-console-overlay .carousel-indicators .indicator-chip,
        .master-console-overlay .carousel-indicators-wrapper .indicator-chip,
        .master-console-overlay button.indicator-chip {
            flex: 0 0 auto;
            scroll-snap-align: center;
            background: rgba(0, 0, 0, 0.05);
            border: 1px solid rgba(0, 0, 0, 0.15);
            border-radius: 20px;
            padding: 8px 16px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
            min-width: 80px;
        }

        .indicator-chip:hover,
        .master-console-overlay .indicator-chip:hover,
        .master-console-overlay .carousel-indicators .indicator-chip:hover,
        .master-console-overlay .carousel-indicators-wrapper .indicator-chip:hover,
        .master-console-overlay button.indicator-chip:hover {
            background: rgba(0, 0, 0, 0.1);
            border-color: rgba(0, 0, 0, 0.25);
        }

        .indicator-chip.active,
        .master-console-overlay .indicator-chip.active,
        .master-console-overlay .carousel-indicators .indicator-chip.active,
        .master-console-overlay .carousel-indicators-wrapper .indicator-chip.active,
        .master-console-overlay button.indicator-chip.active {
            border: 1px solid #1d4ed8 !important;
            transform: scale(1.05);
        }

        .indicator-label {
            font-size: 12px;
            font-weight: 600;
            color: #1f2937;
        }

        .indicator-subtitle {
            font-size: 10px;
            color: rgba(0, 0, 0, 0.6);
        }

        .dark-mode .indicator-chip,
        .dark-mode .master-console-overlay .indicator-chip,
        .dark-mode .master-console-overlay .carousel-indicators .indicator-chip,
        .dark-mode .master-console-overlay .carousel-indicators-wrapper .indicator-chip,
        .dark-mode .master-console-overlay button.indicator-chip,
        .main-content.console-dark-mode .indicator-chip,
        .main-content.console-dark-mode .master-console-overlay .indicator-chip,
        .main-content.console-dark-mode .master-console-overlay .carousel-indicators .indicator-chip,
        .main-content.console-dark-mode .master-console-overlay .carousel-indicators-wrapper .indicator-chip,
        .main-content.console-dark-mode .master-console-overlay button.indicator-chip {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .dark-mode .indicator-chip:hover,
        .dark-mode .master-console-overlay .indicator-chip:hover,
        .dark-mode .master-console-overlay .carousel-indicators .indicator-chip:hover,
        .dark-mode .master-console-overlay .carousel-indicators-wrapper .indicator-chip:hover,
        .dark-mode .master-console-overlay button.indicator-chip:hover,
        .main-content.console-dark-mode .indicator-chip:hover,
        .main-content.console-dark-mode .master-console-overlay .indicator-chip:hover,
        .main-content.console-dark-mode .master-console-overlay .carousel-indicators .indicator-chip:hover,
        .main-content.console-dark-mode .master-console-overlay .carousel-indicators-wrapper .indicator-chip:hover,
        .main-content.console-dark-mode .master-console-overlay button.indicator-chip:hover {
            background: rgba(255, 255, 255, 0.15);
            border-color: rgba(255, 255, 255, 0.3);
        }

        .dark-mode .indicator-chip.active,
        .dark-mode .master-console-overlay .indicator-chip.active,
        .dark-mode .master-console-overlay .carousel-indicators .indicator-chip.active,
        .dark-mode .master-console-overlay .carousel-indicators-wrapper .indicator-chip.active,
        .dark-mode .master-console-overlay button.indicator-chip.active,
        .main-content.console-dark-mode .indicator-chip.active,
        .main-content.console-dark-mode .master-console-overlay .indicator-chip.active,
        .main-content.console-dark-mode .master-console-overlay .carousel-indicators .indicator-chip.active,
        .main-content.console-dark-mode .master-console-overlay .carousel-indicators-wrapper .indicator-chip.active,
        .main-content.console-dark-mode .master-console-overlay button.indicator-chip.active {
            background: rgba(255, 255, 255, 0.25);
            border: 1px solid #60a5fa !important;
        }

        .dark-mode .indicator-label,
        .main-content.console-dark-mode .indicator-label {
            color: #ffffff;
        }

        .dark-mode .indicator-subtitle,
        .main-content.console-dark-mode .indicator-subtitle {
            color: rgba(255, 255, 255, 0.7);
        }

        @media (max-width: 768px) {
            .carousel-controls-row {
                gap: 15px;
                margin-bottom: 20px;
            }
            
            .carousel-arrow {
                width: 32px;
                height: 32px;
            }
            
            .carousel-arrow svg {
                width: 18px;
                height: 18px;
            }
            
            .aspect-ratio-previews {
                gap: 50px;
                padding: 30px 0;
            }
            
            .aspect-ratio-previews::before,
            .aspect-ratio-previews::after {
                flex: 0 0 calc(50% - 200px);
                min-width: 80px;
            }
            
            .preview-container {
                height: 400px;
            }
            
            .preview-container[data-aspect-ratio="9:16"] {
                width: 225px;
            }
            
            .preview-container[data-aspect-ratio="4:5"] {
                width: 320px;
            }
            
            .preview-container[data-aspect-ratio="1:1"] {
                width: 400px;
            }
        }

        @media (max-width: 480px) {
            .carousel-controls-row {
                gap: 10px;
                margin-bottom: 15px;
            }
            
            .carousel-arrow {
                display: none;
            }
            
            .aspect-ratio-previews {
                gap: 40px;
                padding: 20px 0;
            }
            
            .aspect-ratio-previews::before,
            .aspect-ratio-previews::after {
                flex: 0 0 calc(50% - 175px);
                min-width: 60px;
            }
            
            .preview-container {
                height: 350px;
            }
            
            .preview-container[data-aspect-ratio="9:16"] {
                width: 196.875px;
            }
            
            .preview-container[data-aspect-ratio="4:5"] {
                width: 280px;
            }
            
            .preview-container[data-aspect-ratio="1:1"] {
                width: 350px;
            }
        }

        /* Top-align preview content so it doesn't get vertically clipped */
        .console-drop-zone.preview-mode {
            justify-content: flex-start !important;
            align-items: stretch !important;
            padding: 0 !important;
            border-radius: 0 !important;
        }
        .console-drop-zone.preview-mode ~ *,
        .step-batch-content:has(.preview-mode) {
            padding: 0 !important;
        }
        
        /* Ensure batch step can expand to full width for previews */
        .content-center .step-batch-content {
            max-width: none !important;
        }
        /* Old loading screen CSS removed — replaced by .auth-loading-screen */
        
        .versionary-logo-svg {
            width: 100%;
            height: 100%;
            opacity: 0.9;
        }
        
        .versionary-logo-svg .line-element {
            fill: rgba(255, 255, 255, 0.8);
            stroke: none;
        }
        
        .loading-logo::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, 
                transparent 0%, 
                rgba(249, 115, 22, 0.8) 20%, 
                rgba(255, 255, 255, 0.9) 50%, 
                rgba(220, 38, 38, 0.8) 80%, 
                transparent 100%);
            animation: logoSweep 3s ease-in-out infinite;
            z-index: 2;
        }
        
        .loading-logo::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, 
                rgba(255,255,255,0) 0%,
                rgba(255,255,255,0.1) 50%,
                rgba(255,255,255,0) 100%);
            animation: logoPulse 2s ease-in-out infinite alternate;
            z-index: 1;
        }
        
        @keyframes logoSweep {
            0% {
                left: -100%;
                opacity: 0;
            }
            10% {
                opacity: 1;
            }
            90% {
                opacity: 1;
            }
            100% {
                left: 100%;
                opacity: 0;
            }
        }
        
        @keyframes logoPulse {
            0% {
                opacity: 0.3;
                transform: scaleX(1);
            }
            100% {
                opacity: 0.6;
                transform: scaleX(1.02);
            }
        }
        
        .loading-text {
            font-size: 1.8rem;
            font-weight: 300;
            margin: 0 0 10px 0;
            opacity: 0.95;
            animation: textPulse 2s ease-in-out infinite;
        }
        
        .loading-subtext {
            font-size: 1rem;
            font-weight: 300;
            margin: 0;
            opacity: 0.7;
            animation: textPulse 2s ease-in-out infinite 0.5s;
        }
        
        @keyframes textPulse {
            0%, 100% {
                opacity: 0.7;
                transform: translateY(0px);
            }
            50% {
                opacity: 1;
                transform: translateY(-2px);
            }
        }
        
        .loading-progress {
            width: 300px;
            height: 4px;
            background: rgba(255,255,255,0.1);
            border-radius: 2px;
            margin: 30px auto 0;
            overflow: hidden;
            position: relative;
        }
        
        .loading-progress::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, 
                transparent, 
                rgba(255,255,255,0.8), 
                transparent);
            animation: progressSweep 2s ease-in-out infinite;
        }
        
        @keyframes progressSweep {
            0% {
                left: -100%;
            }
            100% {
                left: 100%;
            }
        }
        
        /* Agency Interface - Hidden until loaded */
        .agency-static-interface {
            opacity: 0;
            transition: opacity 0.8s ease-in;
        }
        
        .agency-static-interface.loaded {
            opacity: 1;
        }

        .agency-nav-item:not(.center) {
            color: #374151 !important;
            border: none !important;
            background: rgba(255,255,255,0.9) !important;
        }
        
        .agency-nav-item:not(.center):hover {
            color: #1f2937 !important;
            background: rgba(255,255,255,1) !important;
        }
        
        .agency-nav-item.center {
            color: #374151 !important;
            border: 1px solid rgba(0,0,0,0.15) !important;
            background: rgba(255,255,255,0.9) !important;
        }
        
        .agency-nav-item.center:hover {
            color: #1f2937 !important;
            background: rgba(255,255,255,1) !important;
            border-color: rgba(0,0,0,0.2) !important;
        }
        
        .gradient-bg-night .agency-nav-item:hover {
            color: rgba(255,255,255,0.9) !important;
            background: #303030 !important;
            border-color: rgba(255,255,255,0.25) !important;
        }
        
        .gradient-bg-night .agency-nav-item.center:hover {
            color: #ffffff !important;
            background: #404040 !important;
            border-color: rgba(255,255,255,0.25) !important;
        }

        .auth-buttons-container {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 16px;
            border-radius: 99999px;
            padding: 12px;
            margin-bottom: -100px;
            background: var(--bg-primary);
            box-shadow: 
                0 20px 60px rgba(0, 0, 0, 0.2),
                0 0 0 1px var(--border-color);
        }

        .auth-btn {
            font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
            font-size: 0.95rem;
            font-weight: 500;
            padding: 12px 24px;
            border-radius: 99999px;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            letter-spacing: 0.5px;
            position: relative;
            overflow: hidden;
            min-width: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .auth-btn-icon {
            width: 18px;
            height: 18px;
            flex-shrink: 0;
        }

        .auth-btn-signup {
            background-color: var(--text-primary);
            color: var(--bg-primary);
            border: 1px solid var(--text-primary);
        }

        .auth-btn-signup:hover {
            background-color: var(--text-secondary);
            border-color: var(--text-secondary);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        .auth-btn-login {
            background-color: var(--bg-secondary);
            color: var(--text-primary);
            border: 1px solid var(--border-color);
        }

        .auth-btn-login:hover {
            background-color: var(--bg-primary);
            border-color: var(--text-primary);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .auth-btn-docs {
            background-color: var(--bg-secondary);
            color: var(--text-primary);
            border: 1px solid var(--border-color);
        }

        .auth-btn-docs:hover {
            background-color: var(--bg-primary);
            border-color: var(--text-primary);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .auth-btn:active {
            transform: translateY(1px);
        }

        .dark-mode .auth-btn-signup {
            background-color: rgba(255, 255, 255, 0.95);
            color: #000000;
            border-color: rgba(255, 255, 255, 0.95);
        }

        .dark-mode .auth-btn-signup:hover {
            background-color: #ffffff;
            border-color: #ffffff;
        }

        .dark-mode .auth-btn-login {
            background-color: rgba(255, 255, 255, 0.1);
            color: rgba(255, 255, 255, 0.9);
            border-color: rgba(255, 255, 255, 0.3);
        }

        .dark-mode .auth-btn-login:hover {
            background-color: rgba(255, 255, 255, 0.15);
            border-color: rgba(255, 255, 255, 0.5);
        }

        .dark-mode .auth-btn-docs {
            background-color: rgba(255, 255, 255, 0.1);
            color: rgba(255, 255, 255, 0.9);
            border-color: rgba(255, 255, 255, 0.3);
        }

        .dark-mode .auth-btn-docs:hover {
            background-color: rgba(255, 255, 255, 0.15);
            border-color: rgba(255, 255, 255, 0.5);
        }

        .auth-dialog-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .auth-dialog-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .auth-dialog {
            position: relative;
            width: 90%;
            max-width: 420px;
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 24px;
            padding: 40px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            transform: scale(0.9) translateY(20px);
            opacity: 0;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            overflow: hidden;
        }

        .auth-dialog-overlay.active .auth-dialog {
            transform: scale(1) translateY(0);
            opacity: 1;
        }

        .auth-dialog-content {
            position: relative;
            z-index: 1;
        }

        .auth-dialog-header {
            text-align: center;
            margin-bottom: 32px;
        }

        .auth-dialog-title {
            font-family: 'Geist', sans-serif;
            font-size: 28px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 8px;
            letter-spacing: -0.5px;
        }

        .auth-dialog-subtitle {
            font-size: 14px;
            color: var(--text-secondary);
            font-weight: 400;
        }

        .auth-form-group {
            margin-bottom: 20px;
        }

        .auth-form-label {
            display: block;
            font-size: 13px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 8px;
            font-family: 'Geist', sans-serif;
        }

        .auth-form-input {
            width: 100%;
            padding: 14px 16px;
            border: 2px solid var(--border-color);
            border-radius: 12px;
            font-size: 15px;
            font-family: 'Geist', sans-serif;
            background: var(--bg-secondary);
            color: var(--text-primary);
            transition: all 0.3s ease;
            box-sizing: border-box;
        }

        .auth-form-input:focus {
            outline: none;
            border-color: #667eea;
            background: var(--bg-primary);
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
        }

        .auth-form-input::placeholder {
            color: var(--text-secondary);
        }

        .auth-form-submit {
            width: 100%;
            padding: 14px 24px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 12px;
            font-size: 15px;
            font-weight: 600;
            font-family: 'Geist', sans-serif;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 8px;
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
        }

        .auth-form-submit:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
        }

        .auth-form-submit:active {
            transform: translateY(0);
        }

        .auth-divider {
            display: flex;
            align-items: center;
            margin: 24px 0;
            color: var(--text-secondary);
            font-size: 13px;
        }

        .auth-divider::before,
        .auth-divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background: var(--border-color);
        }

        .auth-divider span {
            padding: 0 16px;
        }

        .auth-google-button {
            width: 100%;
            padding: 14px 24px;
            background: var(--bg-secondary);
            border: 2px solid var(--border-color);
            border-radius: 12px;
            font-size: 15px;
            font-weight: 600;
            font-family: 'Geist', sans-serif;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            color: var(--text-primary);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }

        .auth-google-button:hover {
            background: var(--bg-primary);
            border-color: var(--border-color);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .auth-google-icon {
            width: 20px;
            height: 20px;
        }

        .auth-google-button .loading-spinner {
            width: 18px;
            height: 18px;
            border: 2px solid rgba(0, 0, 0, 0.3);
            border-top: 2px solid rgba(0, 0, 0, 0.9);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        .dark-mode .auth-google-button .loading-spinner {
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-top: 2px solid rgba(255, 255, 255, 0.9);
        }

        .auth-dialog-close {
            position: absolute;
            top: 16px;
            right: 16px;
            width: 32px;
            height: 32px;
            border: none;
            background: var(--bg-secondary);
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            z-index: 2;
        }

        .auth-dialog-close:hover {
            background: var(--bg-secondary);
            transform: rotate(90deg);
        }

        .auth-dialog-close svg {
            width: 18px;
            height: 18px;
            stroke: var(--text-secondary);
        }

        .dark-mode .auth-dialog-overlay {
            background: rgba(0, 0, 0, 0.4);
        }

        .dark-mode .auth-dialog {
            background: rgba(30, 30, 30, 0.85);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

    
/* ============================================================================ */
/* NEW AUTH SYSTEM STYLES - PIN-based Authentication */
/* ============================================================================ */

/* Updated Login Modal Styles - PIN-based Auth */
.dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.2s ease-out;
}

.dialog-container {
    background: #2D2D2D;
    border-radius: 16px;
    width: 90%;
    max-width: 480px;
    padding: 32px;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: slideUp 0.3s ease-out;
}

.dialog-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: transparent;
    border: none;
    color: #9CA3AF;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.2s;
}

.dialog-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #E5E7EB;
}

.dialog-header {
    margin-bottom: 32px;
    text-align: center;
}

.dialog-title {
    font-size: 28px;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0 0 8px 0;
}

.dialog-subtitle {
    font-size: 14px;
    color: #9CA3AF;
    margin: 0;
}

.auth-step {
    animation: fadeIn 0.3s ease-out;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #E5E7EB;
    margin-bottom: 8px;
}

.form-input {
    width: 100%;
    padding: 12px 16px;
    background: #1F1F1F;
    border: 2px solid #3F3F3F;
    border-radius: 8px;
    color: #FFFFFF;
    font-size: 16px;
    transition: all 0.2s;
    box-sizing: border-box;
}

.form-input:focus {
    outline: none;
    border-color: #7c6aef;
    background: #252525;
}

.form-input::placeholder {
    color: #6B7280;
}

.pin-input {
    font-size: 24px;
    letter-spacing: 8px;
    text-align: center;
    font-weight: 600;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.btn {
    padding: 14px 24px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-primary {
    background: linear-gradient(135deg, #7c6aef 0%, #6D28D9 100%);
    color: #FFFFFF;
}

.btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(124,106,239, 0.4);
}

.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-google {
    background: #FFFFFF;
    color: #1F1F1F;
    border: 2px solid #E5E7EB;
}

.btn-google:hover {
    background: #F9FAFB;
    border-color: #D1D5DB;
}

.btn-block {
    width: 100%;
}

.btn-link {
    background: none;
    border: none;
    color: #7c6aef;
    font-size: 14px;
    cursor: pointer;
    padding: 8px;
    text-decoration: none;
}

.btn-link:hover {
    color: #7c6aef;
    text-decoration: underline;
}

.divider {
    display: flex;
    align-items: center;
    margin: 24px 0;
    color: #6B7280;
    font-size: 14px;
}

.divider::before,
.divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #3F3F3F;
}

.divider span {
    padding: 0 16px;
}

.resend-section {
    margin-top: 16px;
    text-align: center;
}

.status-message {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 14px;
    animation: slideDown 0.3s ease-out;
}

.status-message.success {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid #34d399;
    color: #34d399;
}

.status-message.error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid #EF4444;
    color: #EF4444;
}

.status-message.info {
    background: rgba(124,106,239, 0.1);
    border: 1px solid #7c6aef;
    color: #7c6aef;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideDown {
    from {
        transform: translateY(-10px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Auth loading screen - animated gradient + Lottie triangle loader */
.auth-loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    will-change: opacity;
}

/* Loading spinner for buttons */
.btn-loading::after {
    content: '';
    width: 16px;
    height: 16px;
    margin-left: 12px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}




/* Pill bar toggle replaces the ui-overhaul injected simple/pipeline toggle */
#ui-overhaul-toggle-simple { display: none !important; }

/* ═══ CONSOLE SHELL (Refined Violet) ═══
   Warm cream root + rounded work-console card + dot-grid content area.
   Mapped from component-reference.html "RIGHT: WORK CONSOLE" onto V1 containers:
   root = .master-console-overlay, console card = .main-content. */
.master-console-overlay {
    background: var(--root-bg);
}
.master-console-overlay .top-header {
    background: var(--root-bg);
}
.master-console-overlay .main-content {
    background-color: var(--console-bg);
    border: 1px solid var(--console-border);
    border-radius: 14px;
    /* Explicit height, NOT auto: this flex row does not stretch its items
       (V1's original rule used height:calc(100vh-48px) for the same reason).
       height:auto collapsed the card to 2px. 68px = 48 header + 14 top + 6 bottom margin. */
    height: calc(100vh - 68px);
    box-sizing: border-box;
    margin: 14px 6px 6px 6px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

/* Content area fills the card and carries the dot grid (design: dots ONLY here). */
.master-console-overlay .content-center#consoleContentArea {
    flex: 1;
    min-height: 0;
    width: 100%;
    background-image: var(--dot-grid);
    background-size: var(--dot-grid-size);
}

/* ── SIMPLE VIEW: batch step stays PINNED (V1 default) ──
   Reverted the earlier un-pin experiment. V1 pins .pipeline-content with
   position:fixed (v1-main.css:5997); un-pinning #step-batch dropped it into
   the flex-collapsed .main-content card (2px tall) and it vanished. Leaving
   the batch panel pinned so it renders visibly, exactly like stock V1, while
   the real in-card layout is rebuilt separately. */

/* Action bar docked at the bottom of the card, on solid surface (no dots). */
.master-console-overlay .batch-file-bar {
    flex-shrink: 0;
    border-top: 1px solid var(--border-light);
    background: var(--console-bg);
}

/* ── Action bar buttons: flat secondary / violet primary (design spec) ── */
.master-console-overlay .batch-file-bar .pipeline-secondary-btn,
.master-console-overlay .batch-file-bar .pipeline-action-btn {
    padding: 5px 14px !important;
    border-radius: 7px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: normal !important;
    font-family: 'Geist', sans-serif !important;
    transition: all 0.15s !important;
}
.master-console-overlay .batch-file-bar .pipeline-secondary-btn::before,
.master-console-overlay .batch-file-bar .pipeline-secondary-btn::after,
.master-console-overlay .batch-file-bar .pipeline-action-btn::before,
.master-console-overlay .batch-file-bar .pipeline-action-btn::after {
    display: none !important;
}
.master-console-overlay .batch-file-bar .pipeline-secondary-btn {
    background: var(--btn-secondary-bg) !important;
    border: 1px solid var(--border-light) !important;
    color: var(--text-secondary) !important;
    box-shadow: var(--btn-secondary-shadow) !important;
}
.master-console-overlay .batch-file-bar .pipeline-secondary-btn span {
    color: var(--text-secondary) !important;
}
.master-console-overlay .batch-file-bar .pipeline-action-btn {
    background: rgba(108,92,231,0.12) !important;
    border: 1px solid rgba(108,92,231,0.3) !important;
    color: #6c5ce7 !important;
}
.master-console-overlay .batch-file-bar .pipeline-action-btn span {
    color: #6c5ce7 !important;
}

/* ═══ CONSOLE RAISE + LOGO-ONLY HEADER + PILL INSIDE CARD (Simple View) ═══
   Target: component-reference.html / screenshots/01-simple-view.png.
   The old full-width top bar is gone; VE logo + greeting + dropdown stay put on
   the background layer (top-left). The work-console card rises to the top padding
   and the pipeline pill bar now sits at the card's top interior instead of
   floating over the header. The batch panel stays PINNED (position:fixed is
   load-bearing for its flex height chain) but is re-inset into the card. */

/* Header → just the logo/greeting, no bar. Kept fixed top-left on background. */
.master-console-overlay .top-header {
    right: auto;
    width: auto;
    height: 48px;
    background: transparent;
    border-bottom: none;
    padding: 8px 0 0 13px;
    z-index: 1000;
}
.master-console-overlay .header-center,
.master-console-overlay .header-right { display: none; }

/* Reclaim the 48px the header used to reserve: container fills the viewport. */
.master-console-overlay .main-container {
    top: 0;
    height: 100vh;
}
/* Card gap is uniform 6px top and bottom (matches the bottom margin).
   Card surface + border are recolored to the root cream so the ONLY non-cream
   element left on the shell is the dotted-grid content — everything around the
   console reads as one continuous warm surface with the sidebar. */
/* Console card = the one surface distinct from the shell. Per the reference it
   is --console-bg with a --console-border hairline (NOT recolored to the cream
   shell). Tokens auto-swap: #f5f2ec / rgba(0,0,0,0.06) light, #101018 /
   rgba(255,255,255,0.06) dark. */
.master-console-overlay .main-content {
    height: calc(100vh - 24px) !important;
    margin: 12px 12px 12px 12px !important;
    background-color: var(--console-bg) !important;
    border-color: var(--console-border) !important;
}
/* Sidebar content clears the logo that now floats over its top-left corner,
   and the sidebar itself spans the full viewport height to the bottom edge.
   border-box so the 48px top padding does NOT push total height past 100vh. */
.master-console-overlay .left-sidebar {
    padding-top: 48px;
    height: 100vh !important;
    box-sizing: border-box !important;
}
/* Clip the overlay: no element can spill a scrollbar band (the gray strip at
   the browser bottom came from 100vw content forcing a horizontal scrollbar). */
.master-console-overlay {
    overflow: hidden !important;
}

/* Pill bar: was a floating fixed bar over the header; now pinned to the card's
   top interior (tracks sidebar width on resize/collapse). */
#pipelineTabsBar {
    top: 12px !important;
    left: calc(var(--sidebar-width) + 12px) !important;
    right: 12px !important;
    z-index: 6 !important;
}
#pipelineTabsBar > div[style*="padding:10px"] {
    padding: 10px 8px 0 8px !important;
}

/* Batch panel: keep it PINNED but fill the ENTIRE card (edge to edge, top to
   bottom) so its cream dot-grid IS the single console surface. The pill floats
   over the empty top area — one continuous card, no separate strip. */
.master-console-overlay .pipeline-content {
    top: 12px !important;
    left: calc(var(--sidebar-width) + 12px) !important;
    right: 12px !important;
    /* width:auto is critical — base rule (v1-main.css:6001) pins
       width:calc(100vw - var(--sidebar-width)) !important. With left+width both
       set, `right` is ignored and the box runs past the viewport → no right
       gutter + a horizontal scrollbar (the gray strip). auto lets left+right win. */
    width: auto !important;
    bottom: 12px !important;
    /* height:auto lets top+bottom define the box. localize-overhaul.js sets an
       inline height:100% on #step-translate, which on a position:fixed panel = full
       viewport height, so it ignores bottom:12px and spills ~24px below the console.
       auto !important overrides that inline height and re-clamps to top/bottom. */
    height: auto !important;
    border-radius: 14px !important;
    /* The step panels are position:fixed and pinned OVER #consoleContentArea,
       which collapses behind them — so the grid painted there never shows. Paint
       the unified surface (cooler-white --console-bg + --dot-grid) directly on
       each panel so EVERY step (batch/titles/localize/export) shares it. Content
       cards sit on top; dots show in the gaps, like the pipeline/react view. */
    background-color: var(--console-bg) !important;
    background-image: var(--dot-grid) !important;
    background-size: var(--dot-grid-size) !important;
    background-repeat: repeat !important;
    /* Clip React canvases (localize/export) that render larger than the card so
       they can't spill past the rounded panel bounds. */
    overflow: hidden !important;
}

/* Unify the shell (both modes): the backdrop and the chat sidebar are ONE
   surface (--root-bg) with no border seam — per the reference the sidebar has
   no background of its own and shows the shell through. This resolves the
   "subtle sidebar-vs-background color difference" (base .left-sidebar had its
   own tint) and removes the border-top hairline above the chat input. Tokens
   auto-swap: cream #f0ebe0 light / near-black #0c0c12 dark. */
.master-console-overlay .left-sidebar {
    background: var(--root-bg) !important;
    border-right: none !important;
}
.master-console-overlay .sidebar-bottom {
    background: var(--root-bg) !important;
    border-top: none !important;
}

/* Kill the document horizontal scrollbar: the gray band at the browser bottom
   is that scrollbar, not a short sidebar (the sidebar computes to a full 100vh).
   This is a full-screen fixed overlay app, so page scroll is never used. */
html, body {
    overflow-x: hidden !important;
}

/* THE gray field root cause: styles.css:35 paints .main-container with
   background: linear-gradient(45deg, rgba(0,0,0,0.25), rgba(0,0,0,0.15)) — a
   ~20% black veil. The field is transparent down to it, so the veil darkened
   cream #f0ebe0 to #c0bcb3 (the exact eyedropper reading). Repaint the shell
   container to --root-bg. Now token-based so it also covers dark (#0c0c12).
   Scope to #masterConsoleOverlay > .main-container so the agency-interface
   main-container (elsewhere in the DOM) is untouched. */
#masterConsoleOverlay > .main-container {
    background: var(--root-bg) !important;
}

/* Batch tree field — the React tree bakes an inline cream base + its own dots at
   mount (#f5f2ec, warmer than the panel). Make it transparent so the single
   surface is the .pipeline-content panel underneath (#fdfcfa + --dot-grid),
   keeping every step's field one identical color + grid. */
#ui-overhaul-tree-mount > div {
    background: transparent !important;
}

/* File-tree glass card (> div > div). Per reference --card-bg: a translucent
   white so it reads cooler/whiter than the field it sits on. LIGHT
   rgba(255,255,255,0.6) / DARK rgba(255,255,255,0.03) with a 6%-white hairline. */
body:not(.dark-mode) #ui-overhaul-tree-mount > div > div {
    background: rgba(255,255,255,0.6) !important;
}
body.dark-mode #ui-overhaul-tree-mount > div > div {
    background: rgba(255,255,255,0.03) !important;
    border-color: rgba(255,255,255,0.06) !important;
}

/* "System documentation available" was truncating to an ellipsis; shrink the
   font so all three words fit on one line beside the Read more link. */
.master-console-overlay .cost-text {
    font-size: 10px !important;
}

/* Chat input: match the console's 6px gutters (sidebar-bottom was 16px sides)
   and grow the box ~20% taller (textarea 40->52, container pad 6->10). */
.master-console-overlay .sidebar-bottom {
    padding-left: 6px !important;
    padding-right: 6px !important;
    padding-bottom: 6px !important;
}
.master-console-overlay .console-chat-container {
    padding: 10px !important;
}
.master-console-overlay #consoleChatInput.console-textarea {
    min-height: 52px !important;
}

/* DARK simple-view chat input: kill the "hard white lines". The base
   .console-chat-container (v1-main.css:2427) fills with --bg-primary (#2E2E2E,
   a light-gray block in dark) and rings itself with box-shadow
   `0 0 0 1px var(--border-color)` where dark --border-color is
   rgba(255,255,255,0.3) — a bright 30%-white outline. Per the reference the
   dark input is rgba(255,255,255,0.04) with a soft ~8%-white hairline. */
body.dark-mode .master-console-overlay .console-chat-container {
    background: rgba(255,255,255,0.04) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.08) !important;
}

/* ═══ DARK MODE (Simple View) token corrections ═══
   The live design-tokens.css dark block redefines --root-bg/--console-bg/
   --console-border/--border-light but NOT the pill + text-tertiary family — so
   in dark those fall back to their LIGHT (black-on-black) values, making
   inactive pill labels invisible and painting the pill tray a mismatched dark
   rectangle. Redefine the variables on the console scope so the inline
   `var(...)` references in the pill bar (#pipelineTabsBar is a descendant of
   #masterConsoleOverlay) resolve to dark-appropriate colors. No !important
   needed — redefining the custom property cascades into inline var() reads. */
body.dark-mode #masterConsoleOverlay {
    --text-secondary: rgba(255,255,255,0.6);
    --text-tertiary: rgba(255,255,255,0.45);  /* inactive pill labels now legible */
    --pill-bar-bg: transparent;               /* tray blends into the shell */
    --pill-bar-border: transparent;           /* no mismatched rectangle/line */
    --pill-toggle-tray: rgba(255,255,255,0.04);
    --pill-divider: rgba(255,255,255,0.08);
    /* Lift the console surface OFF the shell: shell stays --root-bg #0c0c12,
       the card + dotted field become a lighter black (#1b1b24) so the 6px
       gutter is perceptible all around. Redefining --console-bg here cascades
       to .main-content, the field gradient, and the active pills (all read
       var(--console-bg)) so they lighten together. */
    --console-bg: #1b1b24;
}

/* #3: the faint white line at the console card's top edge is the card border
   (var(--console-border) = rgba(255,255,255,0.06)). Match it to the shell hex
   so it disappears — the gutter is now shown by the card/shell color contrast
   (lighter --console-bg above), not by a drawn line. */
body.dark-mode .master-console-overlay .main-content {
    border-color: var(--root-bg) !important;
}

/* TOP-LEFT "card too light + white line" — the ACTUAL source (found after
   several mis-guesses). It is the fixed .top-header (VE logo + "Hi, Alex!"
   greeting box). The base dark rule at v1-main.css:783 paints it
   `background:#2E2E2E` with `border-bottom:1px solid rgba(255,255,255,0.3)` —
   a light-gray card with a bright 30%-white line. That rule (specificity
   0,3,0) OUT-SPECIFIES the light-mode transparency override at 8055 (0,2,0),
   so in dark mode it wins and the gray card + white line show. Force the header
   transparent/borderless in dark with !important. Also neutralize the #2E2E2E
   overlay backdrop (v1-main.css:779) so no gray leaks into any gutter/edge. */
body.dark-mode .master-console-overlay {
    background: var(--root-bg) !important;
}
body.dark-mode .master-console-overlay .top-header {
    background: transparent !important;
    border-bottom: none !important;
}

/* The Chat/Tools mode toggle (.mode-toggle base: rgba(255,255,255,0.05) fill +
   rgba(255,255,255,0.07) border) is also in the top-left; dissolve its
   container into the shell so the whole top-left reads as one background. The
   active button keeps its own subtle fill as the only state indicator. */
body.dark-mode .master-console-overlay .mode-toggle {
    background: transparent !important;
    border-color: transparent !important;
}

/* Send button (bottom-left of chat input). Base dark rule (v1-main.css:2542)
   paints it rgba(255,255,255,0.6) — a bright white circle that pops on black.
   Use the reference send-btn tint (subtle violet) so it blends into the shell,
   and flip the arrow icon back to light (base rule darkened it to #2E2E2E). */
body.dark-mode .master-console-overlay #consoleSubmitBtn.console-send-btn {
    background: rgba(124,106,239,0.15) !important;
}
body.dark-mode .master-console-overlay #consoleSubmitBtn.console-send-btn svg {
    color: rgba(255,255,255,0.85) !important;
    fill: rgba(255,255,255,0.85) !important;
    stroke: none !important;
}

/* #1: light-mode pill bar tray was a grey container — #pillBar reads
   --pill-bar-bg (rgba(0,0,0,0.03)) + --pill-bar-border (rgba(0,0,0,0.04)) from
   :root. Dark mode already dissolves these to transparent (block above); mirror
   that in light so the pills float directly on the console surface with no grey
   box. Redefining the vars on the console scope cascades into the inline var()
   reads in the pill markup — no !important needed. */
body:not(.dark-mode) #masterConsoleOverlay {
    --pill-bar-bg: transparent;
    --pill-bar-border: transparent;
}

/* Verne "thinking" loading blob (chat sidebar). Copied verbatim from
   component-reference.html:115-129. The blob is a 21px div that morphs its
   border-radius (organic wobble) while cycling a violet->green->orange->blue
   gradient; the typewriter text carries a blinking block cursor. Rendered by
   updateChatHistory() for msg.type === 'loading'. Replaces the old Lottie
   spinner + cyan "Verne is thinking..." text. */
@keyframes morphBlob {
    0%   { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
    25%  { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
    50%  { border-radius: 50% 60% 30% 60% / 30% 50% 70% 50%; }
    75%  { border-radius: 60% 30% 60% 40% / 70% 40% 50% 60%; }
    100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}
@keyframes blobColor {
    0%   { background: linear-gradient(135deg, #7c6aef, #9785f5); }
    25%  { background: linear-gradient(135deg, #059669, #34d399); }
    50%  { background: linear-gradient(135deg, #b45309, #fbbf24); }
    75%  { background: linear-gradient(135deg, #2563eb, #60a5fa); }
    100% { background: linear-gradient(135deg, #7c6aef, #9785f5); }
}
@keyframes typingCursor { 0%,100% { opacity: 1; } 50% { opacity: 0; } }

/* ===== UNIFIED CONSOLE DOT GRID =====
   One grid for every working-console surface (Simple + Pipeline, light + dark):
   base = --console-bg, dots = --dot-grid @ --dot-grid-size (0.06 alpha, 20px).
   The batch React views bake their own grid at mount (inline radial-gradient for
   the node animation; React Flow <Background> for localize/export), so they used
   different alphas AND a different cream base (#f2f0eb), and went stale on an
   in-app theme toggle because their theme is read once at mount. Overriding here
   in CSS keyed to body.dark-mode normalizes them all and re-themes live. */

/* Batch node animation empty-state + any inline dot-grid div (circle = dots, not
   the ellipse ambient glows). Make transparent so the .pipeline-content panel
   (#fdfcfa + --dot-grid) shows through as the single grid surface, instead of the
   div's own baked-in cream (#f2f0eb) + mismatched-alpha dots. */
#masterConsoleOverlay div[style*="radial-gradient(circle"] {
    background: transparent !important;
}
/* React Flow canvases (localize / export pipeline views): let the PANEL's grid
   show through as the single source. Transparent canvas + suppress React Flow's
   own dot pattern so there's exactly one grid (the panel's), perfectly aligned
   and identical across every step. */
#masterConsoleOverlay .react-flow__background {
    background-color: transparent !important;
}
#masterConsoleOverlay .react-flow__background-pattern.dots {
    fill: transparent !important;
}