:root {
            --bg-base: #050507;
            --bg-surface: #0a0a0f;
            --bg-card: rgba(10, 10, 15, 0.75);
            --border-glow: rgba(255, 255, 255, 0.04);
            --border-active: rgba(20, 184, 166, 0.25);
            --text-primary: #f8fafc;
            --text-secondary: #94a3b8;
            --text-muted: #475569;

            --accent-color: #14b8a6;
            --accent-glow: rgba(20, 184, 166, 0.08);

            --vip-color: #f59e0b;
            --premium-color: #8b5cf6;
            --god-color: #f43f5e;
            --success-color: #10b981;

            --panel-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
            --blur-glass: blur(24px);
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            background-color: var(--bg-base);
            color: var(--text-primary);
            font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
            min-height: 100vh;
            overflow-x: hidden;
            position: relative;
        }

        /* Ambient orbs — replaces old radial-gradient */
        body::before {
            content: '';
            position: fixed;
            top: -8%; left: -8%;
            width: 40vw; height: 40vw;
            border-radius: 50%; filter: blur(90px);
            background: radial-gradient(circle, rgba(20, 184, 166, 0.05) 0%, transparent 68%);
            pointer-events: none; z-index: 0;
            animation: panelOrbFloat 26s ease-in-out infinite;
        }
        body::after {
            content: '';
            position: fixed;
            bottom: -10%; right: -10%;
            width: 44vw; height: 44vw;
            border-radius: 50%; filter: blur(90px);
            background: radial-gradient(circle, rgba(13, 148, 136, 0.04) 0%, transparent 68%);
            pointer-events: none; z-index: 0;
            animation: panelOrbFloat 32s ease-in-out infinite alternate;
        }
        @keyframes panelOrbFloat {
            0%, 100% { transform: translate(0, 0) scale(1); }
            50% { transform: translate(2%, 3%) scale(1.07); }
        }

        /* Layout Grid */
        .app-container {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        /* Top Header */
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.25rem 2rem;
            background: rgba(16, 19, 26, 0.8);
            backdrop-filter: var(--blur-glass);
            border-bottom: 1px solid var(--border-glow);
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .brand-area {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .brand-logo {
            font-size: 1.75rem;
            background: linear-gradient(135deg, #ffffff 0%, #14b8a6 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 800;
            font-family: 'Geist', -apple-system, sans-serif;
            letter-spacing: -0.04em;
        }

        .brand-badge {
            font-size: 0.65rem;
            padding: 2px 8px;
            border-radius: 12px;
            background: rgba(20, 184, 166, 0.08);
            color: var(--accent-color);
            border: 1px solid rgba(20, 184, 166, 0.2);
            font-weight: 700;
            text-transform: uppercase;
        }

        .nav-actions {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 8px 16px;
            font-family: 'Outfit', sans-serif;
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--text-primary);
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s ease;
            text-decoration: none;
            outline: none;
        }

        .btn:hover {
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(255, 255, 255, 0.15);
        }

        .btn-primary {
            background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 100%);
            border: none;
            box-shadow: 0 4px 14px rgba(139, 92, 246, 0.3);
        }

        .btn-primary:hover {
            box-shadow: 0 6px 20px rgba(139, 92, 246, 0.45);
            transform: translateY(-1px);
        }

        .btn-danger {
            color: #fca5a5;
            background: rgba(239, 68, 68, 0.08);
            border-color: rgba(239, 68, 68, 0.2);
        }

        .btn-danger:hover {
            background: rgba(239, 68, 68, 0.15);
            border-color: rgba(239, 68, 68, 0.3);
            color: #fff;
        }

        /* Main Workspace Content Grid */
        .workspace {
            display: grid;
            grid-template-columns: 1fr 480px; /* Increased sidebar from 380px to 480px for readability */
            gap: 1.5rem;
            padding: 2rem;
            flex-grow: 1;
            max-width: 1800px;
            margin: 0 auto;
            width: 100%;
        }

        /* Laptop & Macbook Scale Corrections (1201px - 1440px) */
        @media (min-width: 1201px) and (max-width: 1440px) {
            header {
                padding: 0.9rem 1.5rem !important;
            }
            .brand-logo {
                font-size: 1.45rem !important;
            }
            .workspace {
                grid-template-columns: 1fr 370px !important; /* Compresses sidebar for laptop widths */
                padding: 1.25rem !important;
                gap: 1.25rem !important;
            }
            .console-panel {
                padding: 1.1rem !important;
                gap: 1rem !important;
            }
            table {
                font-size: 0.75rem !important;
            }
            .table-wrapper {
                max-height: calc(100vh - 330px) !important; /* Fluid vertical scroll height for tables */
            }
        }

        @media (max-width: 1200px) {
            .workspace {
                grid-template-columns: 1fr;
            }
        }

        /* Console Panels / Card Container styling */
        .console-panel {
            background: var(--bg-card);
            border: 1px solid var(--border-glow);
            border-radius: 16px;
            box-shadow: var(--panel-shadow);
            backdrop-filter: var(--blur-glass);
            padding: 1.5rem;
            display: flex;
            flex-direction: column;
            gap: 1.25rem;
        }

        .panel-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
            padding-bottom: 0.75rem;
        }

        .panel-title {
            font-family: 'Outfit', sans-serif;
            font-size: 1.2rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--text-primary);
        }

        /* Directory Explorer Explorer Table styles */
        .filters-row {
            display: flex;
            gap: 0.5rem;
            align-items: center;
            flex-wrap: wrap;
        }

        .filter-tag {
            padding: 4px 12px;
            font-size: 0.75rem;
            font-weight: 600;
            border-radius: 20px;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.08);
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .filter-tag.active {
            background: rgba(139, 92, 246, 0.15);
            border-color: rgba(139, 92, 246, 0.35);
            color: #c084fc;
        }

        .table-wrapper {
            max-height: 550px;
            overflow-x: auto;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            max-width: 100%;
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 8px;
            background: rgba(0, 0, 0, 0.2);
        }

        table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.8rem;
            text-align: left;
        }

        th {
            background: rgba(16, 19, 26, 0.9);
            padding: 10px 16px;
            font-weight: 600;
            color: var(--text-secondary);
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            font-family: 'Outfit', sans-serif;
            text-transform: uppercase;
            font-size: 0.72rem;
            letter-spacing: 0.05em;
        }

        td {
            padding: 12px 16px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.04);
            color: var(--text-primary);
            vertical-align: middle;
            word-break: break-word;
            overflow-wrap: anywhere;
        }

        tr:hover td {
            background: rgba(255, 255, 255, 0.02);
        }

        .tier-badge {
            font-size: 0.65rem;
            padding: 2px 6px;
            border-radius: 4px;
            font-weight: 700;
            text-transform: uppercase;
            display: inline-block;
        }

        .tier-badge.vip { background: rgba(251, 191, 36, 0.12); color: var(--vip-color); border: 1px solid rgba(251, 191, 36, 0.25); }
        .tier-badge.premium { background: rgba(168, 85, 247, 0.12); color: var(--premium-color); border: 1px solid rgba(168, 85, 247, 0.25); }
        .tier-badge.god { background: rgba(244, 63, 94, 0.12); color: var(--god-color); border: 1px solid rgba(244, 63, 94, 0.25); }

        .status-badge {
            font-weight: 700;
            font-size: 0.72rem;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

        /* Monospace Logs Terminal */
        .logs-box {
            background: #05070a;
            border: 1px solid rgba(0, 255, 128, 0.15);
            border-radius: 8px;
            padding: 1rem;
            height: 280px;
            overflow-y: auto;
            font-family: 'Fira Code', monospace;
            font-size: 0.72rem;
            color: #00ff80;
            line-height: 1.4;
            box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8);
            scrollbar-width: thin;
        }

        .log-line {
            margin-bottom: 4px;
            border-left: 2px solid rgba(0, 255, 128, 0.3);
            padding: 2px 6px;
        }
        
        .log-line.error {
            color: #f87171;
            border-left-color: #f87171;
            background: rgba(248, 113, 113, 0.12);
            text-shadow: 0 0 4px rgba(248, 113, 113, 0.4);
            border-radius: 4px;
        }

        .log-line.warning {
            color: #fbbf24;
            border-left-color: #fbbf24;
            background: rgba(251, 191, 36, 0.12);
            text-shadow: 0 0 4px rgba(251, 191, 36, 0.4);
            border-radius: 4px;
        }

        .log-line.success {
            color: #34d399;
            border-left-color: #34d399;
            background: rgba(52, 211, 153, 0.12);
            text-shadow: 0 0 4px rgba(52, 211, 153, 0.4);
            border-radius: 4px;
        }

        .log-line.system {
            color: #60a5fa;
            border-left-color: #60a5fa;
        }

        /* Glowing heartbeats & beacons */
        @keyframes onlinePulse {
            0% {
                box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
            }
            70% {
                box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
            }
        }
        @keyframes status-pulse-green {
            0% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
            50% { transform: scale(1.1); box-shadow: 0 0 8px 3px rgba(16, 185, 129, 0.4); }
            100% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
        }
        @keyframes status-pulse-purple {
            0% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.7); }
            50% { transform: scale(1.1); box-shadow: 0 0 8px 3px rgba(139, 92, 246, 0.4); }
            100% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); }
        }
        .active-beacon {
            animation: onlinePulse 2s infinite;
        }

        /* Controls Section Box */
        .controls-group {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            padding: 1rem;
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        .control-label {
            font-size: 0.75rem;
            color: var(--text-secondary);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        /* Code/Inspector Modal Drawer Overlay */
        .inspector-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.7);
            backdrop-filter: blur(8px);
            z-index: 1000;
            display: flex;
            justify-content: flex-end;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }

        .inspector-overlay.active {
            opacity: 1;
            pointer-events: auto;
        }

        .inspector-drawer {
            position: relative;
            width: 850px;
            max-width: 95vw;
            background: #0b0e14;
            border-left: 1px solid rgba(255, 255, 255, 0.1);
            height: 100%;
            display: flex;
            flex-direction: column;
            box-shadow: -10px 0 40px rgba(0,0,0,0.8);
            transform: translateX(100%);
            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            padding: 1.25rem 2rem;
        }

        .inspector-overlay.active .inspector-drawer {
            transform: translateX(0);
        }

        @keyframes pulse-drop {
            0% {
                transform: scale(1);
                box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.4);
            }
            70% {
                transform: scale(1.05);
                box-shadow: 0 0 0 15px rgba(168, 85, 247, 0);
            }
            100% {
                transform: scale(1);
                box-shadow: 0 0 0 0 rgba(168, 85, 247, 0);
            }
        }

        /* Prompt Sandbox Drawer Overlay */
        .sandbox-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.7);
            backdrop-filter: blur(8px);
            z-index: 1000;
            display: flex;
            justify-content: flex-end;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }

        .sandbox-overlay.active {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

        .sandbox-drawer {
            width: 850px;
            max-width: 95vw;
            background: #0b0e14;
            border-left: 1px solid rgba(255, 255, 255, 0.1);
            height: 100%;
            display: flex;
            flex-direction: column;
            box-shadow: -10px 0 40px rgba(0,0,0,0.8);
            transform: translateX(100%);
            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            padding: 2rem;
        }

        .sandbox-overlay.active .sandbox-drawer {
            transform: translateX(0);
        }

        .inspector-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(255,255,255,0.08);
            padding-bottom: 0.75rem;
            margin-bottom: 0.75rem;
        }

        .inspector-title {
            font-family: 'Outfit', sans-serif;
            font-size: 1.3rem;
            font-weight: 700;
        }

        .inspector-tabs {
            display: flex;
            gap: 4px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            padding-bottom: 8px;
            margin-bottom: 0.75rem;
        }

        .inspector-tab {
            padding: 6px 14px;
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 0.8rem;
            font-weight: 600;
            cursor: pointer;
            border-radius: 4px;
            transition: all 0.2s;
        }

        .inspector-tab.active {
            background: rgba(139, 92, 246, 0.15);
            color: #c084fc;
        }

        .inspector-action-btn {
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.08);
            color: var(--text-secondary);
            border-radius: 6px;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
        }

        .inspector-action-btn:hover {
            background: rgba(139, 92, 246, 0.15);
            border-color: rgba(139, 92, 246, 0.3);
            color: #c084fc;
        }

        .code-view {
            flex-grow: 1;
            background: #050608;
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 8px;
            padding: 0.75rem;
            overflow: auto;
            font-family: 'Fira Code', monospace;
            font-size: 0.75rem;
            color: #e2e8f0;
            line-height: 1.4;
            white-space: pre-wrap;
            scrollbar-width: thin;
        }

        .toast-notify {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            background: rgba(139, 92, 246, 0.95);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: #fff;
            padding: 10px 20px;
            border-radius: 8px;
            font-size: 0.85rem;
            font-weight: 600;
            box-shadow: 0 10px 25px rgba(0,0,0,0.5);
            z-index: 10000;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            pointer-events: none;
        }

        .toast-notify.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* ── Raw LLM Markdown sub-UI ─────────────────────────────────── */
        .md-mode-bar {
            display: flex;
            gap: 6px;
            margin-bottom: 6px;
        }

        .md-mode-btn {
            padding: 5px 14px;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: var(--text-secondary);
            font-size: 0.75rem;
            font-weight: 600;
            font-family: 'Plus Jakarta Sans', sans-serif;
            cursor: pointer;
            border-radius: 20px;
            transition: all 0.2s;
        }

        .md-mode-btn:hover:not(:disabled) {
            background: rgba(139, 92, 246, 0.12);
            border-color: rgba(139, 92, 246, 0.35);
            color: #c084fc;
        }

        .md-mode-btn.active {
            background: rgba(139, 92, 246, 0.2);
            border-color: rgba(139, 92, 246, 0.5);
            color: #c084fc;
        }

        .md-mode-btn:disabled {
            opacity: 0.35;
            cursor: not-allowed;
        }

        .md-chunk-tabs-row {
            display: flex;
            gap: 4px;
            margin-bottom: 6px;
            overflow-x: auto;
            scrollbar-width: thin;
            padding-bottom: 4px;
        }

        .md-chunk-tab {
            flex-shrink: 0;
            padding: 4px 12px;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.08);
            color: var(--text-secondary);
            font-size: 0.72rem;
            font-weight: 600;
            font-family: 'Fira Code', monospace;
            cursor: pointer;
            border-radius: 4px;
            transition: all 0.15s;
        }

        .md-chunk-tab:hover {
            background: rgba(6, 182, 212, 0.1);
            border-color: rgba(6, 182, 212, 0.3);
            color: #67e8f9;
        }

        .md-chunk-tab.active {
            background: rgba(6, 182, 212, 0.18);
            border-color: rgba(6, 182, 212, 0.5);
            color: #22d3ee;
        }

        .md-content-area {
            margin: 0;
            white-space: pre-wrap;
            font-family: 'Fira Code', monospace;
            font-size: 0.75rem;
            color: #e2e8f0;
            line-height: 1.4;
        }

        /* Chunk request/response split panels */
        .chunk-panel {
            border-radius: 6px;
            margin-bottom: 14px;
            overflow: hidden;
        }
        .chunk-panel:last-child { margin-bottom: 0; }

        .chunk-panel-header {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 12px;
            font-family: 'Fira Code', monospace;
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
        }

        .chunk-panel.req {
            border: 1px solid rgba(251, 191, 36, 0.25);
            background: rgba(251, 191, 36, 0.04);
        }
        .chunk-panel.req .chunk-panel-header {
            background: rgba(251, 191, 36, 0.1);
            border-bottom: 1px solid rgba(251, 191, 36, 0.2);
            color: #fbbf24;
        }

        .chunk-panel.res {
            border: 1px solid rgba(52, 211, 153, 0.25);
            background: rgba(52, 211, 153, 0.04);
        }
        .chunk-panel.res .chunk-panel-header {
            background: rgba(52, 211, 153, 0.1);
            border-bottom: 1px solid rgba(52, 211, 153, 0.2);
            color: #34d399;
        }

        .chunk-panel pre {
            margin: 0;
            padding: 10px 12px;
            white-space: pre-wrap;
            font-family: 'Fira Code', monospace;
            font-size: 0.74rem;
            line-height: 1.45;
            color: #e2e8f0;
        }

        /* Chunk view-layout toggle (Vertical / Tab View) */
        .chunk-view-bar {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 6px;
        }
        .chunk-view-label {
            font-family: 'Fira Code', monospace;
            font-size: 0.65rem;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.08em;
            margin-right: 2px;
        }
        .chunk-view-btn {
            padding: 4px 12px;
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.09);
            color: var(--text-secondary);
            font-size: 0.7rem;
            font-weight: 600;
            font-family: 'Plus Jakarta Sans', sans-serif;
            cursor: pointer;
            border-radius: 20px;
            transition: all 0.18s;
        }
        .chunk-view-btn:hover {
            background: rgba(6,182,212,0.1);
            border-color: rgba(6,182,212,0.3);
            color: #67e8f9;
        }
        .chunk-view-btn.active {
            background: rgba(6,182,212,0.18);
            border-color: rgba(6,182,212,0.5);
            color: #22d3ee;
        }

        /* Tab View pane selector (📤 Prompt / 📥 Response) */
        .chunk-pane-tabs {
            display: flex;
            gap: 0;
            margin-bottom: 6px;
            border-radius: 6px;
            overflow: hidden;
            border: 1px solid rgba(255,255,255,0.08);
            width: fit-content;
        }
        .chunk-pane-tab {
            padding: 6px 18px;
            background: rgba(255,255,255,0.03);
            border: none;
            color: var(--text-secondary);
            font-size: 0.75rem;
            font-weight: 600;
            font-family: 'Plus Jakarta Sans', sans-serif;
            cursor: pointer;
            transition: all 0.15s;
            border-right: 1px solid rgba(255,255,255,0.08);
        }
        .chunk-pane-tab:last-child { border-right: none; }
        .chunk-pane-tab:hover { background: rgba(255,255,255,0.07); color: #e2e8f0; }
        .chunk-pane-tab.prompt.active {
            background: rgba(251,191,36,0.15);
            color: #fbbf24;
        }
        .chunk-pane-tab.response.active {
            background: rgba(52,211,153,0.15);
            color: #34d399;
        }

        /* Remove code-view's own white-space pre-wrap when hosting the sub-UI */
        .code-view:has(.md-mode-bar),
        .code-view:has(.md-chunk-tabs-row),
        .code-view:has(.chunk-view-bar),
        .code-view:has(.chunk-pane-tabs) {
            white-space: normal;
        }

        /* Role badges and Category badges for Persistent Audit Logs */
        .role-badge {
            font-size: 0.65rem;
            font-weight: 700;
            padding: 1px 6px;
            border-radius: 4px;
            text-transform: uppercase;
            display: inline-block;
        }
        .role-badge.admin {
            background: rgba(168, 85, 247, 0.15);
            color: #c084fc;
            border: 1px solid rgba(168, 85, 247, 0.3);
        }
        .role-badge.system {
            background: rgba(59, 130, 246, 0.15);
            color: #60a5fa;
            border: 1px solid rgba(59, 130, 246, 0.3);
        }
        .role-badge.user {
            background: rgba(16, 185, 129, 0.15);
            color: #34d399;
            border: 1px solid rgba(16, 185, 129, 0.3);
        }
        .role-badge.anonymous {
            background: rgba(100, 116, 139, 0.15);
            color: #94a3b8;
            border: 1px solid rgba(100, 116, 139, 0.3);
        }
        
        .cat-badge {
            font-size: 0.65rem;
            font-weight: 700;
            padding: 2px 8px;
            border-radius: 12px;
            display: inline-block;
            text-transform: uppercase;
            text-align: center;
        }
        .cat-badge.auth {
            background: rgba(245, 158, 11, 0.15);
            color: #fbbf24;
            border: 1px solid rgba(245, 158, 11, 0.3);
        }
        .cat-badge.system {
            background: rgba(59, 130, 246, 0.15);
            color: #60a5fa;
            border: 1px solid rgba(59, 130, 246, 0.3);
        }
        .cat-badge.ai {
            background: rgba(168, 85, 247, 0.15);
            color: #c084fc;
            border: 1px solid rgba(168, 85, 247, 0.3);
        }

        #btn-bulk-analyze:disabled, #btn-bulk-recheck-all:disabled {
            background: rgba(255, 255, 255, 0.04) !important;
            border: 1px solid rgba(255, 255, 255, 0.08) !important;
            color: var(--text-muted) !important;
            cursor: not-allowed !important;
            box-shadow: none !important;
            transform: none !important;
        }

        /* Prompt Sandbox Mobile Overrides */
        @media (max-width: 768px) {
            .sandbox-drawer {
                width: 100vw !important;
                max-width: 100vw !important;
                padding: 1rem !important;
            }
            #sandbox-split-container {
                flex-direction: column !important;
                overflow-y: auto !important;
            }
            .sandbox-comparison-panel {
                flex: none !important;
                height: 250px !important;
            }
        }

        /* Accordion CSS for details/summary */
        .controls-accordion {
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.01);
            overflow: hidden;
            margin-bottom: 0.75rem;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .controls-accordion[open] {
            background: rgba(255, 255, 255, 0.03);
            border-color: rgba(168, 85, 247, 0.3);
            box-shadow: 0 4px 20px rgba(168, 85, 247, 0.05);
        }
        
        .controls-accordion-summary {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.85rem 1rem;
            font-size: 0.8rem;
            font-weight: 700;
            color: var(--text-primary);
            cursor: pointer;
            user-select: none;
            outline: none;
            background: rgba(255, 255, 255, 0.02);
            transition: background 0.2s ease;
        }
        
        .controls-accordion-summary::-webkit-details-marker {
            display: none;
        }
        
        .controls-accordion-summary:hover {
            background: rgba(255, 255, 255, 0.05);
        }
        
        .controls-accordion-arrow {
            font-size: 0.7rem;
            color: var(--text-muted);
            transition: transform 0.2s ease;
        }
        
        .controls-accordion[open] .controls-accordion-arrow {
            transform: rotate(180deg);
            color: var(--premium-color);
        }
        
        .controls-accordion-content {
            padding: 1rem;
            display: flex;
            flex-direction: column;
            gap: 1rem;
            border-top: 1px solid rgba(255, 255, 255, 0.04);
        }

        /* Error cards list dynamic styling (Next.js inspired) */
        .error-card {
            border: 1px solid rgba(239, 68, 68, 0.18);
            background: rgba(15, 20, 28, 0.45);
            border-radius: 10px;
            padding: 14px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            transition: all 0.2s ease;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
        }
        
        .error-card:hover {
            border-color: rgba(239, 68, 68, 0.35);
            background: rgba(15, 20, 28, 0.8);
            box-shadow: 0 4px 25px rgba(239, 68, 68, 0.08);
            transform: translateY(-1px);
        }

        .error-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            padding-bottom: 8px;
            margin-bottom: 2px;
        }

        .error-card-path {
            font-family: 'Fira Code', 'JetBrains Mono', monospace;
            font-size: 0.72rem;
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            gap: 6px;
            font-weight: 500;
        }

        .error-card-title {
            font-size: 0.85rem;
            font-weight: 700;
            color: #fca5a5;
            letter-spacing: -0.01em;
        }

        .error-card-body {
            font-family: 'Fira Code', 'JetBrains Mono', monospace;
            background: rgba(0, 0, 0, 0.35);
            border: 1px solid rgba(239, 68, 68, 0.15);
            border-radius: 8px;
            padding: 10px 12px;
            font-size: 0.74rem;
            line-height: 1.5;
            color: #fca5a5;
            word-break: break-all;
            white-space: pre-wrap;
            box-shadow: inset 0 2px 8px rgba(0,0,0,0.5);
        }

        .error-card-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 4px;
        }

        .error-card-btn {
            padding: 4px 10px;
            font-size: 0.7rem;
            font-weight: 600;
            border-radius: 6px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            transition: all 0.2s ease;
            height: 26px;
            line-height: 1;
            text-decoration: none;
            outline: none;
        }

        .error-card-btn-audio {
            background: rgba(59, 130, 246, 0.08);
            border: 1px solid rgba(59, 130, 246, 0.25);
            color: #60a5fa !important;
        }

        .error-card-btn-audio:hover {
            background: rgba(59, 130, 246, 0.18);
            border-color: rgba(59, 130, 246, 0.4);
            color: #fff !important;
        }

        .error-card-btn-dismiss {
            background: rgba(239, 68, 68, 0.08);
            border: 1px solid rgba(239, 68, 68, 0.25);
            color: #fca5a5;
        }

        .error-card-btn-dismiss:hover {
            background: rgba(239, 68, 68, 0.18);
            border-color: rgba(239, 68, 68, 0.4);
            color: #fff;
        }

        /* Webkit Scrollbars (Chrome, Safari, Edge) */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        
        ::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.2);
            border-radius: 4px;
        }
        
        ::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.12);
            border-radius: 4px;
            border: 1px solid rgba(255, 255, 255, 0.03);
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.22);
        }
        
        /* Firefox scrollbars */
        * {
            scrollbar-width: thin;
            scrollbar-color: rgba(255, 255, 255, 0.12) rgba(0, 0, 0, 0.2);
        }
        
        /* Global native drop-down menu lists (options) */
        select option {
            background-color: #10131a !important;
            color: #f8fafc !important;
        }

        /* Bulk Export Modal Overlay */
        .bulk-export-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.8);
            backdrop-filter: blur(8px);
            z-index: 1100; /* above inspector-overlay */
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }
        .bulk-export-overlay.active {
            opacity: 1;
            pointer-events: auto;
        }
        .bulk-export-modal {
            background: #0d1117;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            width: 500px;
            max-width: 90vw;
            padding: 1.5rem;
            box-shadow: 0 10px 40px rgba(0,0,0,0.6);
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        .bulk-export-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(255,255,255,0.08);
            padding-bottom: 0.75rem;
        }
        .bulk-export-body {
            max-height: 300px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding-right: 4px;
            margin-top: 8px;
        }
        .bulk-export-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            background: rgba(255,255,255,0.02);
            border: 1px solid rgba(255,255,255,0.05);
            border-radius: 6px;
            cursor: pointer;
            user-select: none;
            transition: background 0.2s, border-color 0.2s;
        }
        .bulk-export-item:hover {
            background: rgba(255,255,255,0.06);
            border-color: rgba(255, 255, 255, 0.1);
        }
        .bulk-export-item input {
            cursor: pointer;
        }


/* --- Programmatically Extracted Inline Styles --- */

/* Style Block 1 */
.header-middle-badge {
                            position: absolute;
                            left: 50%;
                            transform: translateX(-50%);
                            display: flex;
                            align-items: center;
                            gap: 6px;
                            z-index: 10;
                        }
                        @media (max-width: 1440px) {
                            header {
                                flex-wrap: wrap !important;
                                gap: 8px !important;
                            }
                            .header-middle-badge {
                                position: static !important;
                                transform: none !important;
                                margin: 6px auto !important;
                            }
                        }
                        .log-line.orange {
                            color: #f97316 !important;
                            border-left-color: #f97316 !important;
                            background: rgba(249, 115, 22, 0.08) !important;
                            text-shadow: 0 0 4px rgba(249, 115, 22, 0.3) !important;
                            border-radius: 4px;
                        }
                        .log-line.complete {
                            color: #d946ef !important;
                            border-left-color: #d946ef !important;
                            background: rgba(217, 70, 239, 0.12) !important;
                            text-shadow: 0 0 4px rgba(217, 70, 239, 0.4) !important;
                            border-radius: 4px;
                            font-weight: 700;
                        }
                        .switch-toggle-sm {
                            position: relative;
                            display: inline-block;
                            width: 32px;
                            height: 18px;
                        }
                        .switch-toggle-sm input {
                            opacity: 0;
                            width: 0;
                            height: 0;
                        }
                        .slider-round-sm {
                            position: absolute;
                            cursor: pointer;
                            top: 0;
                            left: 0;
                            right: 0;
                            bottom: 0;
                            background-color: rgba(255,255,255,0.15);
                            border-radius: 34px;
                            transition: .3s;
                            border: 1px solid rgba(255,255,255,0.08);
                        }
                        .slider-round-sm:before {
                            position: absolute;
                            content: "";
                            height: 12px;
                            width: 12px;
                            left: 2px;
                            bottom: 2px;
                            background-color: white;
                            border-radius: 50%;
                            transition: .3s;
                        }
                        .switch-toggle-sm input:checked + .slider-round-sm {
                            background-color: #a855f7 !important;
                        }
                        .switch-toggle-sm input:checked + .slider-round-sm:before {
                            transform: translateX(14px);
                        }
                        .queue-item-hover:hover {
                            background: rgba(255, 255, 255, 0.03);
                        }
                        .panel-mode-switch .console-tab {
                            flex: 1;
                            border: none;
                            background: transparent;
                            color: var(--text-secondary);
                            font-size: 0.72rem;
                            font-weight: 600;
                            padding: 6px 8px;
                            border-radius: 6px;
                            cursor: pointer;
                            transition: all 0.2s;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            gap: 6px;
                            font-family: inherit;
                        }
                        .panel-mode-switch .console-tab.active {
                            border: 1px solid rgba(255,255,255,0.1);
                            background: rgba(255,255,255,0.08);
                            color: var(--text-primary);
                        }
                        .tracker-show-row {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            padding: 6px 10px;
                            border-radius: 6px;
                            background: rgba(255, 255, 255, 0.01);
                            border: 1px solid rgba(255, 255, 255, 0.03);
                            cursor: pointer;
                            font-size: 0.72rem;
                            transition: all 0.2s ease;
                            gap: 8px;
                        }
                        .tracker-show-row:hover {
                            background: rgba(255, 255, 255, 0.04);
                            border-color: rgba(255, 255, 255, 0.08);
                        }
                        .tracker-show-row.active {
                            background: rgba(168, 85, 247, 0.08);
                            border-color: rgba(168, 85, 247, 0.3);
                            box-shadow: 0 0 10px rgba(168, 85, 247, 0.05);
                        }
                        .tracker-show-row.active:hover {
                            background: rgba(168, 85, 247, 0.12);
                        }
                        .checker-log-line {
                            margin-bottom: 5px;
                            border-left: 2px solid rgba(255,255,255,0.1);
                            padding-left: 8px;
                            font-family: 'Fira Code', monospace;
                            font-size: 0.68rem;
                            animation: fadeIn 0.2s ease-in-out;
                        }

/* Style Block 2 */
.switch-toggle input:checked + .slider-round {
                    background-color: #a855f7 !important;
                }
                .switch-toggle .slider-round:before {
                    position: absolute;
                    content: "";
                    height: 14px;
                    width: 14px;
                    left: 3px;
                    bottom: 3px;
                    background-color: white;
                    border-radius: 50%;
                    transition: .3s;
                }
                .switch-toggle input:checked + .slider-round:before {
                    transform: translateX(22px);
                }

/* Style Block 3 */
.ai-bulk-overlay {
                    position: fixed;
                    top: 0; left: 0; right: 0; bottom: 0;
                    background: rgba(4, 5, 8, 0.85);
                    backdrop-filter: blur(12px);
                    z-index: 1100;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    opacity: 0;
                    pointer-events: none;
                    transition: opacity 0.3s ease;
                }
                .ai-bulk-overlay.active {
                    opacity: 1;
                    pointer-events: auto;
                }
                .ai-bulk-modal {
                    width: 900px;
                    max-width: 95vw;
                    max-height: 90vh;
                    background: linear-gradient(145deg, #0f121d 0%, #07090f 100%);
                    border: 1px solid rgba(255, 255, 255, 0.08);
                    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
                    border-radius: 16px;
                    display: flex;
                    flex-direction: column;
                    overflow: hidden;
                    transform: scale(0.95);
                    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
                    padding: 1.75rem;
                }
                .ai-bulk-overlay.active .ai-bulk-modal {
                    transform: scale(1);
                }
                .ai-stats-container {
                    display: grid;
                    grid-template-columns: repeat(3, 1fr);
                    gap: 12px;
                    margin-bottom: 1.25rem;
                }
                .ai-stat-card {
                    background: rgba(255, 255, 255, 0.02);
                    border: 1px solid rgba(255, 255, 255, 0.05);
                    border-radius: 10px;
                    padding: 12px;
                    text-align: center;
                    transition: all 0.2s ease;
                }
                .ai-stat-card:hover {
                    background: rgba(255, 255, 255, 0.04);
                    border-color: rgba(255, 255, 255, 0.08);
                }
                .ai-stat-val {
                    font-size: 1.5rem;
                    font-weight: 800;
                    margin-bottom: 2px;
                    font-family: 'Outfit', sans-serif;
                }
                .ai-stat-lbl {
                    font-size: 0.72rem;
                    color: var(--text-muted);
                    font-weight: 600;
                    text-transform: uppercase;
                    letter-spacing: 0.05em;
                }
                .ai-table-container {
                    background: rgba(0, 0, 0, 0.35);
                    border: 1px solid rgba(255, 255, 255, 0.06);
                    border-radius: 10px;
                    flex: 1;
                    overflow-y: auto;
                    max-height: 280px;
                    margin-bottom: 1.25rem;
                }
                .ai-table {
                    width: 100%;
                    border-collapse: collapse;
                    font-size: 0.8rem;
                    text-align: left;
                }
                .ai-table th {
                    background: rgba(255, 255, 255, 0.03);
                    padding: 10px 14px;
                    font-weight: 600;
                    color: var(--text-secondary);
                    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
                    position: sticky;
                    top: 0;
                    z-index: 10;
                }
                .ai-table td {
                    padding: 8px 14px;
                    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
                    vertical-align: middle;
                }
                .ai-table tr:hover td {
                    background: rgba(255, 255, 255, 0.02);
                }
                .badge-ai-status {
                    display: inline-flex;
                    align-items: center;
                    gap: 4px;
                    padding: 2px 6px;
                    border-radius: 4px;
                    font-size: 0.68rem;
                    font-weight: 600;
                }
                .badge-ai-status-analyzed {
                    background: rgba(16, 185, 129, 0.12);
                    border: 1px solid rgba(16, 185, 129, 0.25);
                    color: #34d399;
                }
                .badge-ai-status-running {
                    background: rgba(59, 130, 246, 0.15);
                    border: 1px solid rgba(59, 130, 246, 0.35);
                    color: #60a5fa;
                }
                .badge-ai-status-pending {
                    background: rgba(245, 158, 11, 0.12);
                    border: 1px solid rgba(245, 158, 11, 0.25);
                    color: #fbbf24;
                }
                .badge-ai-status-none {
                    background: rgba(107, 114, 128, 0.12);
                    border: 1px solid rgba(107, 114, 128, 0.25);
                    color: #9ca3af;
                }
                .ai-config-row {
                    display: grid;
                    grid-template-columns: 1fr 1fr 1.5fr 2fr;
                    gap: 16px;
                    margin-bottom: 1.25rem;
                }
                .ai-config-group {
                    display: flex;
                    flex-direction: column;
                    gap: 6px;
                }
                .ai-config-group label {
                    font-size: 0.75rem;
                    font-weight: 700;
                    color: var(--text-secondary);
                    text-transform: uppercase;
                    letter-spacing: 0.03em;
                }
                .ai-config-group select, .ai-config-group input {
                    background: rgba(0, 0, 0, 0.4);
                    border: 1px solid rgba(255, 255, 255, 0.1);
                    color: #fff;
                    border-radius: 8px;
                    padding: 8px 12px;
                    font-size: 0.8rem;
                    outline: none;
                    transition: all 0.2s;
                }
                .ai-config-group select {
                    cursor: pointer;
                }
                .ai-config-group select:focus, .ai-config-group input:focus {
                    border-color: #a855f7;
                    box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.25);
                }

/* Style Block 4 */
.deepgram-bulk-overlay {
                    position: fixed;
                    top: 0; left: 0; right: 0; bottom: 0;
                    background: rgba(4, 5, 8, 0.85);
                    backdrop-filter: blur(12px);
                    z-index: 1100;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    opacity: 0;
                    pointer-events: none;
                    transition: opacity 0.3s ease;
                }
                .deepgram-bulk-overlay.active {
                    opacity: 1;
                    pointer-events: auto;
                }
                .deepgram-bulk-modal {
                    width: 900px;
                    max-width: 95vw;
                    max-height: 90vh;
                    background: linear-gradient(145deg, #0f121d 0%, #07090f 100%);
                    border: 1px solid rgba(255, 255, 255, 0.08);
                    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
                    border-radius: 16px;
                    display: flex;
                    flex-direction: column;
                    overflow: hidden;
                    transform: scale(0.95);
                    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
                    padding: 1.75rem;
                }
                .deepgram-bulk-overlay.active .deepgram-bulk-modal {
                    transform: scale(1);
                }
                .deepgram-stats-container {
                    display: grid;
                    grid-template-columns: repeat(3, 1fr);
                    gap: 12px;
                    margin-bottom: 1.25rem;
                }
                .deepgram-stat-card {
                    background: rgba(255, 255, 255, 0.02);
                    border: 1px solid rgba(255, 255, 255, 0.05);
                    border-radius: 10px;
                    padding: 12px;
                    text-align: center;
                    transition: all 0.2s ease;
                }
                .deepgram-stat-card:hover {
                    background: rgba(255, 255, 255, 0.04);
                    border-color: rgba(255, 255, 255, 0.08);
                }
                .deepgram-stat-val {
                    font-size: 1.5rem;
                    font-weight: 800;
                    margin-bottom: 2px;
                    font-family: 'Outfit', sans-serif;
                }
                .deepgram-stat-lbl {
                    font-size: 0.72rem;
                    color: var(--text-muted);
                    font-weight: 600;
                    text-transform: uppercase;
                    letter-spacing: 0.05em;
                }
                .deepgram-table-container {
                    background: rgba(0, 0, 0, 0.35);
                    border: 1px solid rgba(255, 255, 255, 0.06);
                    border-radius: 10px;
                    flex: 1;
                    overflow-y: auto;
                    max-height: 280px;
                    margin-bottom: 1.25rem;
                }
                .deepgram-table {
                    width: 100%;
                    border-collapse: collapse;
                    font-size: 0.8rem;
                    text-align: left;
                }
                .deepgram-table th {
                    background: rgba(255, 255, 255, 0.03);
                    padding: 10px 14px;
                    font-weight: 600;
                    color: var(--text-secondary);
                    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
                    position: sticky;
                    top: 0;
                    z-index: 10;
                }
                .deepgram-table td {
                    padding: 8px 14px;
                    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
                    vertical-align: middle;
                }
                .deepgram-table tr:hover td {
                    background: rgba(255, 255, 255, 0.02);
                }
                .badge-engine {
                    display: inline-flex;
                    align-items: center;
                    gap: 4px;
                    padding: 2px 6px;
                    border-radius: 4px;
                    font-size: 0.68rem;
                    font-weight: 600;
                }
                .badge-engine-cloud {
                    background: rgba(16, 185, 129, 0.12);
                    border: 1px solid rgba(16, 185, 129, 0.25);
                    color: #34d399;
                }
                .badge-engine-local {
                    background: rgba(245, 158, 11, 0.12);
                    border: 1px solid rgba(245, 158, 11, 0.25);
                    color: #fbbf24;
                }
                .badge-engine-none {
                    background: rgba(239, 68, 68, 0.12);
                    border: 1px solid rgba(239, 68, 68, 0.25);
                    color: #f87171;
                }
                .deepgram-config-row {
                    display: grid;
                    grid-template-columns: 1fr 1fr 2fr;
                    gap: 16px;
                    margin-bottom: 1.25rem;
                }
                .deepgram-config-group {
                    display: flex;
                    flex-direction: column;
                    gap: 6px;
                }
                .deepgram-config-group label {
                    font-size: 0.75rem;
                    font-weight: 700;
                    color: var(--text-secondary);
                    text-transform: uppercase;
                    letter-spacing: 0.03em;
                }
                .deepgram-config-group select, .deepgram-config-group input {
                    background: rgba(0, 0, 0, 0.4);
                    border: 1px solid rgba(255, 255, 255, 0.1);
                    color: #fff;
                    border-radius: 8px;
                    padding: 8px 12px;
                    font-size: 0.8rem;
                    outline: none;
                    transition: all 0.2s;
                }
                .deepgram-config-group select {
                    cursor: pointer;
                }
                .deepgram-config-group select:focus, .deepgram-config-group input:focus {
                    border-color: #3b82f6;
                    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
                }

/* Style Block 5 */
.db-reset-overlay {
                    position: fixed;
                    top: 0; left: 0; right: 0; bottom: 0;
                    background: rgba(4, 5, 8, 0.85);
                    backdrop-filter: blur(12px);
                    z-index: 1100;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    opacity: 0;
                    pointer-events: none;
                    transition: opacity 0.3s ease;
                }
                .db-reset-overlay.active {
                    opacity: 1;
                    pointer-events: auto;
                }
                .db-reset-modal {
                    width: 900px;
                    max-width: 95vw;
                    max-height: 90vh;
                    background: linear-gradient(145deg, #1b0f14 0%, #07090f 100%);
                    border: 1px solid rgba(239, 68, 68, 0.15);
                    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
                    border-radius: 16px;
                    display: flex;
                    flex-direction: column;
                    overflow: hidden;
                    transform: scale(0.95);
                    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
                    padding: 1.75rem;
                }
                .db-reset-overlay.active .db-reset-modal {
                    transform: scale(1);
                }

/* Style Block 6 */
.sys-settings-overlay {
                    position: fixed;
                    top: 0; left: 0; right: 0; bottom: 0;
                    background: rgba(4, 5, 8, 0.85);
                    backdrop-filter: blur(12px);
                    z-index: 1100;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    opacity: 0;
                    pointer-events: none;
                    transition: opacity 0.3s ease;
                }
                .sys-settings-overlay.active {
                    opacity: 1;
                    pointer-events: auto;
                }
                .sys-settings-modal {
                    width: 820px;
                    max-width: 95vw;
                    max-height: 90vh;
                    background: linear-gradient(145deg, #120e17 0%, #07090f 100%);
                    border: 1px solid rgba(168, 85, 247, 0.15);
                    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
                    border-radius: 16px;
                    display: flex;
                    flex-direction: column;
                    overflow: hidden;
                    transform: scale(0.95);
                    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
                    padding: 1.75rem;
                }
                .sys-settings-overlay.active .sys-settings-modal {
                    transform: scale(1);
                }
                .sys-settings-modal button:focus,
                .sys-settings-modal select:focus,
                .sys-settings-modal input:focus {
                    outline: none !important;
                    border-color: rgba(168, 85, 247, 0.4) !important;
                    box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.15) !important;
                }
                .settings-section {
                    margin-bottom: 1.5rem;
                    padding-bottom: 1rem;
                    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
                }
                .settings-section-title {
                    font-size: 0.95rem;
                    font-weight: 700;
                    color: #fff;
                    margin-bottom: 0.75rem;
                    display: flex;
                    align-items: center;
                    gap: 8px;
                }
                .settings-grid {
                    display: grid;
                    grid-template-columns: 1fr 1fr;
                    gap: 12px 20px;
                }
                .settings-field {
                    display: flex;
                    flex-direction: column;
                    gap: 6px;
                    border-left: 3px solid transparent;
                    transition: border-color 0.2s, padding-left 0.2s;
                }
                .settings-field.changed {
                    border-left-color: #f59e0b;
                    padding-left: 8px;
                }
                .settings-label {
                    font-size: 0.75rem;
                    color: rgba(255, 255, 255, 0.7);
                    font-weight: 600;
                }
                .settings-input {
                    background: rgba(0, 0, 0, 0.4);
                    border: 1px solid rgba(255, 255, 255, 0.08);
                    border-radius: 6px;
                    padding: 8px 12px;
                    color: #fff;
                    font-size: 0.8rem;
                    font-family: inherit;
                    outline: none;
                    transition: all 0.2s ease;
                }
                .settings-input:focus {
                    border-color: rgba(168, 85, 247, 0.4);
                    background: rgba(0, 0, 0, 0.6);
                }
                .password-wrapper {
                    position: relative;
                    display: flex;
                    align-items: center;
                }
                .password-wrapper .settings-input {
                    width: 100%;
                    padding-right: 80px;
                }
                .password-toggle-btn {
                    position: absolute;
                    right: 48px;
                    background: none;
                    border: none;
                    color: rgba(255, 255, 255, 0.4);
                    cursor: pointer;
                    font-size: 0.9rem;
                    padding: 0;
                    outline: none;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                .password-toggle-btn:hover {
                    color: #fff;
                }
                .test-key-btn {
                    position: absolute;
                    right: 10px;
                    background: rgba(168, 85, 247, 0.1);
                    border: 1px solid rgba(168, 85, 247, 0.3);
                    color: #c084fc;
                    font-weight: 600;
                    font-size: 0.68rem;
                    padding: 2px 6px;
                    border-radius: 4px;
                    cursor: pointer;
                    transition: all 0.2s;
                }
                .test-key-btn:hover {
                    background: rgba(168, 85, 247, 0.2);
                    border-color: rgba(168, 85, 247, 0.5);
                    color: #d8b4fe;
                }
                .toggle-row {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    background: rgba(255, 255, 255, 0.02);
                    padding: 8px 12px;
                    border-radius: 6px;
                    border: 1px solid rgba(255, 255, 255, 0.04);
                }
                .toggle-row-label {
                    display: flex;
                    flex-direction: column;
                    gap: 2px;
                }
                .toggle-row-title {
                    font-size: 0.78rem;
                    color: #fff;
                    font-weight: 600;
                }
                .toggle-row-desc {
                    font-size: 0.65rem;
                    color: rgba(255, 255, 255, 0.4);
                }
                /* Custom switch styling */
                .switch {
                    position: relative;
                    display: inline-block;
                    width: 36px;
                    height: 20px;
                }
                .switch input {
                    opacity: 0;
                    width: 0;
                    height: 0;
                }
                .slider {
                    position: absolute;
                    cursor: pointer;
                    top: 0; left: 0; right: 0; bottom: 0;
                    background-color: rgba(255, 255, 255, 0.1);
                    transition: .3s;
                    border-radius: 20px;
                    border: 1px solid rgba(255, 255, 255, 0.05);
                }
                .slider:before {
                    position: absolute;
                    content: "";
                    height: 12px;
                    width: 12px;
                    left: 3px;
                    bottom: 3px;
                    background-color: rgba(255, 255, 255, 0.6);
                    transition: .3s;
                    border-radius: 50%;
                }
                input:checked + .slider {
                    background-color: rgba(168, 85, 247, 0.2);
                    border-color: rgba(168, 85, 247, 0.4);
                }
                input:checked + .slider:before {
                    transform: translateX(16px);
                    background-color: #a855f7;
                    box-shadow: 0 0 8px rgba(168, 85, 247, 0.4);
                }

                /* Tab navigation styles */
                .settings-tabs-nav {
                    display: flex;
                    gap: 4px;
                    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
                    margin-bottom: 1rem;
                    padding-bottom: 0.25rem;
                    overflow-x: auto;
                }
                .settings-tab-btn {
                    background: transparent;
                    border: none;
                    color: rgba(255, 255, 255, 0.6);
                    padding: 8px 14px;
                    font-family: 'Outfit', sans-serif;
                    font-weight: 600;
                    font-size: 0.8rem;
                    cursor: pointer;
                    border-radius: 6px 6px 0 0;
                    border-bottom: 2px solid transparent;
                    transition: all 0.2s ease;
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    white-space: nowrap;
                }
                .settings-tab-btn:hover {
                    color: #fff;
                    background: rgba(255, 255, 255, 0.03);
                }
                .settings-tab-btn.active {
                    color: #c084fc;
                    border-bottom-color: #a855f7;
                    background: rgba(168, 85, 247, 0.05);
                }
                .settings-tab-content {
                    display: none;
                    flex-direction: column;
                    gap: 1.25rem;
                    animation: settingsFadeIn 0.2s ease-in-out;
                }
                .settings-tab-content.active {
                    display: flex;
                }
                @keyframes settingsFadeIn {
                    from { opacity: 0; transform: translateY(4px); }
                    to { opacity: 1; transform: translateY(0); }
                }

                /* Search Bar styles */
                .tab-search-wrapper {
                    position: relative;
                }
                .tab-search-input {
                    width: 100%;
                    background: rgba(0, 0, 0, 0.4);
                    border: 1px solid rgba(255, 255, 255, 0.08);
                    border-radius: 6px;
                    padding: 8px 12px 8px 32px;
                    color: #fff;
                    font-size: 0.8rem;
                    font-family: inherit;
                    outline: none;
                    transition: all 0.2s;
                }
                .tab-search-input:focus {
                    border-color: rgba(168, 85, 247, 0.4);
                    background: rgba(0, 0, 0, 0.6);
                }
                .tab-search-icon {
                    position: absolute;
                    left: 10px;
                    top: 50%;
                    transform: translateY(-50%);
                    color: rgba(255, 255, 255, 0.4);
                    font-size: 0.85rem;
                    pointer-events: none;
                }

                /* Unsaved changes banner */
                .unsaved-banner {
                    display: none;
                    align-items: center;
                    gap: 6px;
                    color: #f59e0b;
                    font-size: 0.72rem;
                    font-weight: 600;
                    margin-right: auto;
                    padding: 6px 12px;
                    background: rgba(245, 158, 11, 0.1);
                    border: 1px solid rgba(245, 158, 11, 0.2);
                    border-radius: 6px;
                }
                .unsaved-banner.active {
                    display: flex;
                    animation: settingsPulse 2s infinite;
                }
                @keyframes settingsPulse {
                    0% { opacity: 0.7; }
                    50% { opacity: 1; }
                    100% { opacity: 0.7; }
                }

        /* ================= OVERRIDES FOR NEO-BENTO (TEAL THEME) ================= */
        
        /* Buttons */
        .btn-primary {
            background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%) !important;
            box-shadow: 0 4px 14px rgba(20, 184, 166, 0.25) !important;
            border: 1px solid rgba(255, 255, 255, 0.05) !important;
            color: #ffffff !important;
        }
        
        .btn-primary:hover {
            box-shadow: 0 6px 20px rgba(20, 184, 166, 0.4) !important;
            transform: translateY(-1px) !important;
        }

        .filter-tag.active {
            background: rgba(20, 184, 166, 0.12) !important;
            border-color: rgba(20, 184, 166, 0.3) !important;
            color: var(--accent-color) !important;
        }

        /* Console Panels hover border transition */
        .console-panel {
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }
        
        .console-panel:hover {
            border-color: rgba(20, 184, 166, 0.12) !important;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.65), 0 0 20px rgba(20, 184, 166, 0.02) !important;
        }

        /* Logs and Activity feeds */
        .logs-box {
            background: #040406 !important;
            border: 1px solid rgba(20, 184, 166, 0.15) !important;
            color: var(--accent-color) !important;
            font-family: 'Geist Mono', 'Fira Code', monospace !important;
            scrollbar-color: var(--accent-color) rgba(0,0,0,0.2) !important;
            box-shadow: inset 0 2px 8px rgba(0,0,0,0.8) !important;
        }
        
        .log-line {
            border-left-color: rgba(20, 184, 166, 0.3) !important;
        }

        .logs-box::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        .logs-box::-webkit-scrollbar-thumb {
            background: var(--accent-color) !important;
            border-radius: 4px;
        }

        .logs-box::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.3) !important;
        }

        /* Custom Scrollbar for all scrollable boxes on the page */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        
        ::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.08);
            border-radius: 4px;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: var(--accent-color);
        }
        
        ::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.15);
        }

        /* Pulse beacons */
        @keyframes status-pulse-teal {
            0% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(20, 184, 166, 0.7); }
            50% { transform: scale(1.1); box-shadow: 0 0 8px 3px rgba(20, 184, 166, 0.4); }
            100% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(20, 184, 166, 0); }
        }

        #queue-pulse-dot {
            background-color: var(--accent-color) !important;
            box-shadow: 0 0 8px var(--accent-color) !important;
        }

        #queue-status-btn {
            background: rgba(20, 184, 166, 0.08) !important;
            border: 1px solid rgba(20, 184, 166, 0.2) !important;
            color: #ccfbf1 !important;
        }

        /* Highlight lines & links inside active areas */
        .inspector-tab.active {
            background: rgba(20, 184, 166, 0.12) !important;
            color: var(--accent-color) !important;
            border: 1px solid rgba(20, 184, 166, 0.25) !important;
        }

        .inspector-action-btn:hover {
            background: rgba(20, 184, 166, 0.12) !important;
            border-color: rgba(20, 184, 166, 0.3) !important;
            color: var(--accent-color) !important;
        }

        .toast-notify {
            background: rgba(13, 148, 136, 0.95) !important;
            border-color: rgba(20, 184, 166, 0.3) !important;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 15px rgba(20, 184, 166, 0.1) !important;
        }

        /* Preset select and sandbox borders */
        #sandbox-preset-select, #sys-settings-provider, #sys-settings-strategy, #sys-settings-prompt-mode, #sys-settings-transcript-pref {
            border: 1px solid rgba(20, 184, 166, 0.2) !important;
        }
        
        #sandbox-preset-select:focus, #sys-settings-provider:focus {
            border-color: var(--accent-color) !important;
        }

        #active-preset-badge {
            background: rgba(20, 184, 166, 0.12) !important;
            border: 1px solid rgba(20, 184, 166, 0.35) !important;
            color: var(--accent-color) !important;
        }

        #btn-sandbox-test {
            background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%) !important;
            box-shadow: 0 4px 12px rgba(20, 184, 166, 0.2) !important;
        }

        /* Model Badges */
        .model-badge {
            font-size: 0.65rem;
            font-weight: 700;
            padding: 2px 6px;
            border-radius: 4px;
            font-family: 'Outfit', sans-serif;
            letter-spacing: 0.02em;
            white-space: nowrap;
            cursor: default;
            transition: transform 0.15s ease, box-shadow 0.15s ease;
            display: inline-flex;
            align-items: center;
            gap: 3px;
        }
        .model-badge:hover {
            transform: translateY(-1px);
        }
        .badge-muse {
            background: rgba(245, 158, 11, 0.12);
            color: #fbbf24;
            border: 1px solid rgba(245, 158, 11, 0.35);
            box-shadow: 0 2px 6px rgba(245, 158, 11, 0.1);
        }
        .badge-gemini {
            background: rgba(59, 130, 246, 0.12);
            color: #60a5fa;
            border: 1px solid rgba(59, 130, 246, 0.35);
            box-shadow: 0 2px 6px rgba(59, 130, 246, 0.1);
        }
        .badge-deepseek {
            background: rgba(168, 85, 247, 0.12);
            color: #c084fc;
            border: 1px solid rgba(168, 85, 247, 0.35);
            box-shadow: 0 2px 6px rgba(168, 85, 247, 0.1);
        }
        .duration-badge-sub {
            font-size: 0.63rem;
            color: var(--text-muted);
            font-family: monospace;
            margin-left: 2px;
        }

        /* Model Filter Active States */
        .filter-tag-model.active[data-model="muse"] {
            background: rgba(245, 158, 11, 0.18) !important;
            border-color: rgba(245, 158, 11, 0.5) !important;
            color: #fbbf24 !important;
        }
        .filter-tag-model.active[data-model="gemini"] {
            background: rgba(59, 130, 246, 0.18) !important;
            border-color: rgba(59, 130, 246, 0.5) !important;
            color: #60a5fa !important;
        }

        /* Live Queue Status Button & Dot */
        #btn-live-operations {
            background: rgba(16, 185, 129, 0.1);
            border: 1px solid rgba(16, 185, 129, 0.25);
            color: #34d399;
            transition: all 0.2s ease;
        }
        #btn-live-operations:hover {
            background: rgba(16, 185, 129, 0.18);
            border-color: rgba(16, 185, 129, 0.45);
            box-shadow: 0 0 12px rgba(16, 185, 129, 0.2);
        }
        #btn-live-operations.live-idle {
            background: rgba(255, 255, 255, 0.04);
            border-color: rgba(255, 255, 255, 0.1);
            color: var(--text-muted);
        }
        #live-operations-label {
            max-width: 240px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: inline-block;
            vertical-align: middle;
        }
        .live-status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #6b7280;
            display: inline-block;
            position: relative;
        }
        .live-status-dot.active {
            background: #10b981;
            box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
            animation: livePulse 2s infinite;
        }
        @keyframes livePulse {
            0% {
                transform: scale(0.95);
                box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
            }
            70% {
                transform: scale(1);
                box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
            }
            100% {
                transform: scale(0.95);
                box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
            }
        }

        /* Live Operations Drawer Modal */
        .live-ops-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(3, 7, 18, 0.75);
            backdrop-filter: blur(8px);
            z-index: 10000;
            display: none;
            align-items: flex-end;
            justify-content: center;
            transition: opacity 0.25s ease;
        }
        .live-ops-overlay.open {
            display: flex;
        }
        .live-ops-drawer {
            width: 100%;
            max-width: 1280px;
            max-height: 90vh;
            background: #0d111a;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-bottom: none;
            border-radius: 20px 20px 0 0;
            box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.8), 0 0 30px rgba(16, 185, 129, 0.08);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            animation: drawerSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }
        @keyframes drawerSlideUp {
            from {
                transform: translateY(100%);
            }
            to {
                transform: translateY(0);
            }
        }
        .live-ops-header {
            padding: 16px 24px;
            background: rgba(255, 255, 255, 0.02);
            border-bottom: 1px solid rgba(255, 255, 255, 0.07);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
        }
        .live-ops-body {
            padding: 20px 24px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        /* 9-Step Stepper Grid */
        .pipeline-stepper {
            display: grid;
            grid-template-columns: repeat(9, 1fr);
            gap: 8px;
            background: rgba(0, 0, 0, 0.3);
            padding: 14px;
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.05);
        }
        @media (max-width: 1024px) {
            .pipeline-stepper {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        @media (max-width: 640px) {
            .pipeline-stepper {
                grid-template-columns: 1fr;
            }
        }
        .stepper-step {
            display: flex;
            flex-direction: column;
            gap: 4px;
            padding: 10px 8px;
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.06);
            position: relative;
            transition: all 0.2s ease;
            text-align: center;
        }
        .stepper-step.completed {
            background: rgba(16, 185, 129, 0.08);
            border-color: rgba(16, 185, 129, 0.3);
        }
        .stepper-step.completed .step-icon {
            color: #34d399;
        }
        .stepper-step.active {
            background: rgba(20, 184, 166, 0.15);
            border-color: rgba(20, 184, 166, 0.6);
            box-shadow: 0 0 16px rgba(20, 184, 166, 0.25);
            animation: pulseBorder 2s infinite ease-in-out;
        }
        @keyframes pulseBorder {
            0%, 100% { border-color: rgba(20, 184, 166, 0.5); }
            50% { border-color: rgba(20, 184, 166, 1); box-shadow: 0 0 20px rgba(20, 184, 166, 0.4); }
        }
        .stepper-step.pending {
            opacity: 0.5;
        }
        .stepper-step.error {
            background: rgba(239, 68, 68, 0.1);
            border-color: rgba(239, 68, 68, 0.4);
        }
        .step-num-badge {
            font-size: 0.62rem;
            font-weight: 700;
            color: var(--text-muted);
            font-family: monospace;
        }
        .stepper-step.active .step-num-badge {
            color: #2dd4bf;
        }
        .step-title {
            font-size: 0.72rem;
            font-weight: 600;
            color: #fff;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .step-status-tag {
            font-size: 0.62rem;
            font-weight: 700;
            margin-top: 4px;
        }

        /* Telemetry & Metrics Row */
        .live-telemetry-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 12px;
        }
        .live-telemetry-card {
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 10px;
            padding: 12px 16px;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        .live-telemetry-label {
            font-size: 0.68rem;
            color: var(--text-muted);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }
        .live-telemetry-val {
            font-size: 1.15rem;
            font-weight: 700;
            font-family: 'Outfit', sans-serif;
            color: #fff;
        }

        /* cURL and Traces Console */
        .live-trace-box {
            background: #07090e;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 10px;
            padding: 14px 16px;
            font-family: 'SF Mono', Monaco, 'Courier New', monospace;
            font-size: 0.75rem;
            color: #93c5fd;
            overflow-x: auto;
            overflow-y: auto;
            max-height: 160px;
            white-space: pre-wrap;
            word-break: break-all;
            position: relative;
        }
        .live-log-console {
            background: #07090e;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 10px;
            padding: 12px 16px;
            font-family: 'SF Mono', Monaco, 'Courier New', monospace;
            font-size: 0.72rem;
            color: #e2e8f0;
            max-height: 140px;
            overflow-y: auto;
            line-height: 1.5;
        }



/* Inactive Overlay Ghost Spill Prevention */
.inspector-overlay:not(.active),
.sandbox-overlay:not(.active),
.bulk-export-overlay:not(.active),
.ai-bulk-overlay:not(.active),
.deepgram-bulk-overlay:not(.active),
.db-reset-overlay:not(.active),
.sys-settings-overlay:not(.active) {
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

.inspector-overlay.active,
.sandbox-overlay.active,
.bulk-export-overlay.active,
.ai-bulk-overlay.active,
.deepgram-bulk-overlay.active,
.db-reset-overlay.active,
.sys-settings-overlay.active {
    visibility: visible !important;
    pointer-events: auto !important;
    opacity: 1 !important;
}

/* ==========================================================================
   Premium Vault Workspace Segmented Switcher (Panel Header)
   ========================================================================== */
.panel-vault-segmented-toggle {
    display: inline-flex;
    align-items: center;
    background: rgba(13, 17, 26, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.panel-vault-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    border-radius: 7px;
    border: 1px solid transparent;
    background: transparent;
    color: #94a3b8;
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    user-select: none;
    line-height: 1.2;
}

.panel-vault-pill-btn:hover:not(.active) {
    color: #f1f5f9;
    background: rgba(255, 255, 255, 0.06);
}

#panel-btn-vault-stream.active {
    background: rgba(59, 130, 246, 0.2) !important;
    color: #93c5fd !important;
    border-color: rgba(59, 130, 246, 0.45) !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25) !important;
}

#panel-btn-vault-tube.active {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #fca5a5 !important;
    border-color: rgba(239, 68, 68, 0.45) !important;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25) !important;
}

.vault-pill-icon {
    font-size: 0.95rem;
    line-height: 1;
}

.vault-pill-label {
    letter-spacing: -0.01em;
}

/* ==========================================================================
   PANEL MOBILE LAYOUT OPTIMIZATIONS (<768px - Annotations 2, 4, 6, 9, c, e, g, i)
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. Page Scrolling: Allow full natural scrolling on mobile (Annotation 2) */
    body.panel-body,
    html:has(body.panel-body) {
        height: auto !important;
        min-height: 100% !important;
        min-height: 100dvh !important;
        max-height: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body.panel-body .app-container {
        height: auto !important;
        min-height: 100vh !important;
        max-height: none !important;
        overflow: visible !important;
        display: block !important;
    }

    body.panel-body .workspace {
        display: flex !important;
        flex-direction: column !important;
        padding: 0.5rem !important;
        gap: 0.75rem !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    body.panel-body .console-panel {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 0.75rem !important;
        border-radius: 12px !important;
    }

    /* 2. Header Re-Architecture (Annotations 4, 6, 9, c) */
    body.panel-body header {
        display: flex !important;
        flex-direction: column !important;
        padding: 0.45rem 0.6rem !important;
        gap: 0.35rem !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        position: sticky !important;
        top: 0 !important;
        background: rgba(5, 5, 7, 0.95) !important;
        backdrop-filter: blur(16px) !important;
        z-index: 1000 !important;
    }

    /* Hide large brand area on mobile to save space (Annotation 6) */
    body.panel-body header .brand-area {
        display: none !important;
    }

    /* Top Row: Nav actions above AI badge (Annotations 9 & c) */
    body.panel-body header .nav-actions {
        order: 1 !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        gap: 5px !important;
    }

    /* Hide status badge on mobile */
    body.panel-body header .status-badge {
        display: none !important;
    }

    /* Compact Back Button */
    body.panel-body .panel-nav-btn-back {
        flex: 0 0 auto !important;
        height: 30px !important;
        padding: 2px 8px !important;
        font-size: 0.72rem !important;
        gap: 3px !important;
        border-radius: 6px !important;
        white-space: nowrap !important;
    }

    /* Compact Admin Manager Button */
    body.panel-body .panel-nav-btn-admin {
        flex: 0 0 auto !important;
        height: 30px !important;
        padding: 2px 8px !important;
        font-size: 0.72rem !important;
        gap: 3px !important;
        border-radius: 6px !important;
        white-space: nowrap !important;
    }

    /* Compact Queue Dropdown Container */
    body.panel-body header .queue-dropdown-container {
        flex: 0 0 auto !important;
        margin-right: 0 !important;
    }
    body.panel-body #queue-status-btn {
        height: 30px !important;
        padding: 0 7px !important;
        font-size: 0.72rem !important;
        gap: 3px !important;
        border-radius: 6px !important;
    }

    /* Hide segmented pills on mobile, display compact dropdown select (Annotation 4) */
    body.panel-body #panelVaultToggleGroup {
        display: none !important;
    }
    body.panel-body #panel-vault-select-mobile {
        display: inline-block !important;
        flex: 1 1 auto !important;
        max-width: 105px !important;
        min-width: 78px !important;
        height: 30px !important;
        padding: 0 5px !important;
        font-size: 0.72rem !important;
        font-weight: 600 !important;
        background: rgba(13, 17, 26, 0.95) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        color: #f1f5f9 !important;
        border-radius: 6px !important;
        cursor: pointer !important;
        outline: none !important;
    }

    /* Middle AI Badge: Centered below top nav row (Annotation 9) */
    body.panel-body header .header-middle-badge {
        order: 2 !important;
        width: 100% !important;
        font-size: 0.64rem !important;
        padding: 1px 0 !important;
        text-align: center !important;
        justify-content: center !important;
        opacity: 0.85 !important;
    }

    /* 3. Panel Header & Table Title */
    body.panel-body .panel-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
        padding-bottom: 0.4rem !important;
    }
    body.panel-body .panel-title {
        font-size: 0.92rem !important;
    }

    /* 4. Filters Row: 2 Dropdown Menus on the SAME Line (Annotation e) */
    body.panel-body .filters-row {
        display: none !important;
    }
    body.panel-body .mobile-filters-row {
        display: flex !important;
        width: 100% !important;
        gap: 6px !important;
    }
    body.panel-body .mobile-filters-row select {
        flex: 1 1 calc(50% - 3px) !important;
        width: calc(50% - 3px) !important;
        height: 32px !important;
        font-size: 0.75rem !important;
        padding: 0 6px !important;
        background: rgba(13, 17, 26, 0.9) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        color: #f1f5f9 !important;
        border-radius: 8px !important;
        outline: none !important;
    }

    /* 5. Action Buttons: 2x2 Dropdown Menu Grid (2 lines, 2 dropdowns each - Annotation g) */
    body.panel-body .desktop-panel-actions {
        display: none !important;
    }
    body.panel-body .mobile-panel-actions-grid {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 6px !important;
        margin-top: 2px !important;
    }
    body.panel-body .mobile-action-row {
        display: flex !important;
        width: 100% !important;
        gap: 6px !important;
    }
    body.panel-body .panel-mobile-action-select {
        flex: 1 1 calc(50% - 3px) !important;
        width: calc(50% - 3px) !important;
        height: 32px !important;
        font-size: 0.74rem !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        padding: 0 6px !important;
        outline: none !important;
        cursor: pointer !important;
    }

    /* 6. Advanced Filters Row: No redundant labels, 2 per line (Annotation i) */
    body.panel-body .advanced-filters-row {
        display: flex !important;
        flex-direction: column !important;
        padding: 8px 10px !important;
        gap: 6px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    body.panel-body .advanced-filters-title,
    body.panel-body .filter-label {
        display: none !important; /* Suppress labels like Search:, Year:, etc. */
    }
    body.panel-body .filter-row-search {
        display: flex !important;
        width: 100% !important;
        gap: 6px !important;
        margin-right: 0 !important;
    }
    body.panel-body .filter-row-search input {
        flex: 1 1 auto !important;
        width: 100% !important;
        height: 30px !important;
        font-size: 0.76rem !important;
    }
    body.panel-body .filter-row-search .btn-filter-reset {
        flex: 0 0 auto !important;
        height: 30px !important;
        padding: 0 10px !important;
        font-size: 0.72rem !important;
    }
    body.panel-body .filter-row-grid-line {
        display: flex !important;
        width: 100% !important;
        gap: 6px !important;
    }
    body.panel-body .filter-row-grid-line .filter-subgroup {
        flex: 1 1 calc(50% - 3px) !important;
        width: calc(50% - 3px) !important;
    }
    body.panel-body .filter-row-grid-line select {
        width: 100% !important;
        height: 30px !important;
        font-size: 0.74rem !important;
        padding: 0 6px !important;
    }

    /* 7. Bulk Actions Toolbar on Mobile (Annotation 6) */
    body.panel-body .bulk-actions-toolbar {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
        padding: 6px 10px !important;
    }
    body.panel-body .bulk-label-desktop {
        display: none !important;
    }
    body.panel-body .bulk-label-mobile {
        display: inline !important;
    }
    body.panel-body .bulk-actions-toolbar > div:first-child {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
    }
    body.panel-body .bulk-actions-toolbar > div:last-child {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
    }
    body.panel-body .bulk-actions-toolbar > div:last-child .btn {
        padding: 5px 4px !important;
        font-size: 0.68rem !important;
        justify-content: center !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
        overflow: hidden !important;
    }

    /* 8. Queue Dropdown Locked Safely Inside Screen on Mobile (Annotation 2) */
    body.panel-body #queue-dropdown-menu {
        position: fixed !important;
        top: 48px !important;
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        max-width: calc(100vw - 20px) !important;
        margin-top: 0 !important;
        z-index: 100000 !important;
    }
}