/* CSS Variables for Light Theme (Default) */
        :root {
            --bg-primary: #f8fafc;
            --bg-secondary: #ffffff;
            --bg-tertiary: #f1f5f9;
            --bg-card: #ffffff;
            --bg-sidebar: #ffffff;
            --bg-input: #f1f5f9;
            --bg-hover: #e2e8f0;
            --bg-gradient: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #f8fafc 100%);
            --text-primary: #1e293b;
            --text-secondary: #475569;
            --text-muted: #64748b;
            --text-inverse: #ffffff;
            --border-color: #e2e8f0;
            --border-light: #f1f5f9;
            --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
            --shadow-md: 0 4px 6px rgba(0,0,0,0.07);
            --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
            --accent-primary: #6366f1;
            --accent-secondary: #8b5cf6;
            --accent-gradient: linear-gradient(135deg, #6366f1, #8b5cf6);
            --success: #10b981;
            --warning: #f59e0b;
            --error: #ef4444;
            --info: #3b82f6;
            --viz-bg: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
            --viz-bg-alt: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #f8fafc 100%);
            --overlay-bg: rgba(226, 232, 240, 0.6);
            --overlay-bg-light: rgba(226, 232, 240, 0.5);
        }

        /* Dark Theme */
        [data-theme="dark"] {
            --bg-primary: #0f172a;
            --bg-secondary: #1e293b;
            --bg-tertiary: #334155;
            --bg-card: rgba(255,255,255,0.05);
            --bg-sidebar: rgba(15, 23, 42, 0.95);
            --bg-input: rgba(255,255,255,0.1);
            --bg-hover: rgba(255,255,255,0.1);
            --bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
            --text-primary: #f1f5f9;
            --text-secondary: #cbd5e1;
            --text-muted: #94a3b8;
            --text-inverse: #0f172a;
            --border-color: rgba(255,255,255,0.1);
            --border-light: rgba(255,255,255,0.05);
            --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
            --shadow-md: 0 4px 6px rgba(0,0,0,0.4);
            --shadow-lg: 0 10px 15px rgba(0,0,0,0.5);
            --viz-bg: linear-gradient(180deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.8) 100%);
            --viz-bg-alt: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 27, 75, 0.9) 50%, rgba(15, 23, 42, 0.95) 100%);
            --overlay-bg: rgba(15, 23, 42, 0.6);
            --overlay-bg-light: rgba(15, 23, 42, 0.5);
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: var(--bg-gradient);
            color: var(--text-primary);
            min-height: 100vh;
            overflow: hidden;
            transition: background 0.3s ease, color 0.3s ease;
        }
        .app-container { display: flex; height: 100vh; }

        /* SIDEBAR */
        .sidebar {
            width: 260px;
            background: var(--bg-sidebar);
            border-right: 1px solid var(--border-color);
            display: flex;
            flex-direction: column;
            flex-shrink: 0;
            box-shadow: var(--shadow-sm);
            transition: background 0.3s ease, border-color 0.3s ease;
        }
        .sidebar-header { padding: 16px; border-bottom: 1px solid var(--border-color); }
        .logo-section { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
        .logo-icon {
            width: 32px; height: 32px;
            background: linear-gradient(135deg, #6366f1, #10b981);
            border-radius: 8px;
            display: flex; align-items: center; justify-content: center;
        }
        .logo-icon i { color: white; font-size: 16px; }
        .logo-text { font-size: 18px; font-weight: 700; color: var(--text-primary); }
        .logo-subtitle { font-size: 10px; color: #10b981; margin-top: 2px; }

        /* Compact header row for org + credits */
        .sidebar-compact-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }
        .compact-org-switcher {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 10px;
            background: var(--bg-tertiary);
            border-radius: 8px;
            cursor: pointer;
            flex: 1;
            max-width: 140px;
        }
        .compact-org-switcher:hover { background: var(--bg-hover); }
        .compact-org-logo {
            width: 24px;
            height: 24px;
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 11px;
            font-weight: 600;
        }
        .compact-org-name {
            font-size: 12px;
            font-weight: 500;
            color: var(--text-primary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .compact-org-switcher i { font-size: 10px; color: var(--text-muted); }
        .compact-credits {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 10px;
            background: var(--bg-tertiary);
            border-radius: 8px;
            cursor: pointer;
        }
        .compact-credits:hover { background: var(--bg-hover); }
        .compact-credits i { color: #f59e0b; font-size: 12px; }
        .compact-credits-value {
            font-size: 12px;
            font-weight: 600;
            color: var(--text-primary);
        }
        .compact-credits-chevron { font-size: 10px; color: var(--text-muted); }

        /* Credits expanded panel (hidden by default) */
        .credits-expanded {
            display: none;
            padding: 12px;
            background: var(--bg-tertiary);
            border-radius: 8px;
            margin-top: 8px;
        }
        .credits-expanded.visible { display: block; }
        .credits-bar-mini {
            height: 4px;
            background: rgba(99, 102, 241, 0.2);
            border-radius: 2px;
            overflow: hidden;
            margin-bottom: 6px;
        }
        .credits-bar-mini-fill {
            height: 100%;
            background: linear-gradient(90deg, #6366f1, #8b5cf6);
            border-radius: 2px;
        }
        .credits-expanded-text {
            font-size: 11px;
            color: var(--text-muted);
            display: flex;
            justify-content: space-between;
        }

        .sidebar-nav { flex: 0 0 auto; padding: 12px; overflow-y: auto; }
        .nav-item {
            display: flex; align-items: center; gap: 12px;
            padding: 10px 14px; border-radius: 8px;
            color: var(--text-muted); text-decoration: none; font-size: 13px;
            margin-bottom: 2px; cursor: pointer; transition: all 0.2s;
        }
        .nav-item:hover { background: var(--bg-hover); color: var(--text-primary); }
        .nav-item.active { background: rgba(99, 102, 241, 0.15); color: var(--accent-primary); }
        .nav-item i { width: 20px; text-align: center; font-size: 15px; }

        /* Secondary nav for less-used items */
        .secondary-nav {
            padding: 0 12px 8px;
            border-top: 1px solid var(--border-color);
            margin-top: 4px;
            padding-top: 8px;
        }
        .secondary-nav .nav-item {
            padding: 8px 14px;
            font-size: 12px;
            color: var(--text-muted);
            opacity: 0.85;
        }
        .secondary-nav .nav-item i { font-size: 13px; }

        .projects-section { padding: 16px 12px; border-top: 1px solid var(--border-color); }
        .projects-header { display: flex; justify-content: space-between; align-items: center; padding: 0 16px; margin-bottom: 12px; }
        .projects-title { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
        .projects-add-btn {
            width: 20px; height: 20px; background: rgba(99, 102, 241, 0.2);
            border: none; border-radius: 4px; color: #818cf8; cursor: pointer;
            display: flex; align-items: center; justify-content: center; font-size: 14px;
        }
        .project-item {
            display: flex; align-items: center; gap: 10px;
            padding: 10px 16px; border-radius: 8px; color: var(--text-muted);
            font-size: 13px; cursor: pointer; transition: all 0.2s;
        }
        .project-item:hover { background: var(--bg-hover); color: var(--text-primary); }
        .project-item.active { background: rgba(99, 102, 241, 0.15); color: var(--accent-primary); }

        /* NEW CHAT BUTTON */
        .new-chat-section { padding: 12px; }
        .new-chat-btn {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 12px 16px;
            background: var(--accent-gradient);
            border: none;
            border-radius: 10px;
            color: white;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
        }
        .new-chat-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
        }
        .new-chat-btn i { font-size: 12px; }

        /* CONVERSATION SEARCH */
        .conversation-search {
            padding: 0 12px 12px;
        }
        .conversation-search-input {
            width: 100%;
            padding: 10px 12px 10px 36px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            color: var(--text-primary);
            font-size: 13px;
            outline: none;
            transition: all 0.2s;
        }
        .conversation-search-input::placeholder { color: var(--text-muted); }
        .conversation-search-input:focus { border-color: var(--accent-primary); }
        .conversation-search-wrapper {
            position: relative;
        }
        .conversation-search-wrapper i {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-muted);
            font-size: 12px;
        }

        /* CONVERSATION LIST */
        .conversations-section {
            flex: 1;
            overflow-y: auto;
            padding: 0 12px;
        }
        .conversation-group { margin-bottom: 16px; }
        .conversation-group-label {
            font-size: 10px;
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: 8px 4px 6px;
        }
        .conversation-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            border-radius: 8px;
            color: var(--text-secondary);
            font-size: 13px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .conversation-item:hover { background: var(--bg-hover); color: var(--text-primary); }
        .conversation-item.active { background: rgba(99, 102, 241, 0.15); color: var(--accent-primary); }
        .conversation-item i { font-size: 14px; color: var(--text-muted); }
        .conversation-item.active i { color: var(--accent-primary); }
        .conversation-item-title {
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .conversation-item-menu {
            opacity: 0;
            padding: 4px;
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            border-radius: 4px;
        }
        .conversation-item:hover .conversation-item-menu { opacity: 1; }
        .conversation-item-menu:hover { background: var(--bg-hover); color: var(--text-primary); }

        /* EXPANDABLE PROJECTS */
        .projects-section-new {
            padding: 12px;
            border-top: 1px solid var(--border-color);
        }
        .project-group {
            margin-bottom: 4px;
        }
        .project-header {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 12px;
            border-radius: 8px;
            color: var(--text-secondary);
            font-size: 13px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .project-header:hover { background: var(--bg-hover); color: var(--text-primary); }
        .project-header.active { background: rgba(99, 102, 241, 0.15); color: var(--accent-primary); }
        .project-expand-icon {
            font-size: 10px;
            color: var(--text-muted);
            transition: transform 0.2s;
            width: 12px;
        }
        .project-group.expanded .project-expand-icon { transform: rotate(90deg); }
        .project-color-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            flex-shrink: 0;
        }
        .project-name { flex: 1; }
        .project-settings-btn {
            opacity: 0;
            padding: 4px 6px;
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            border-radius: 4px;
            font-size: 11px;
        }
        .project-header:hover .project-settings-btn { opacity: 1; }
        .project-settings-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
        .project-conversations {
            display: none;
            padding-left: 20px;
        }
        .project-group.expanded .project-conversations { display: block; }
        .project-conversation-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            border-radius: 6px;
            color: var(--text-muted);
            font-size: 12px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .project-conversation-item:hover { background: var(--bg-hover); color: var(--text-primary); }
        .project-conversation-item.active { color: var(--accent-primary); }
        .project-conversation-item i { font-size: 12px; }
        .add-project-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 12px;
            color: var(--text-muted);
            font-size: 13px;
            cursor: pointer;
            border-radius: 8px;
            transition: all 0.2s;
        }
        .add-project-btn:hover { background: var(--bg-hover); color: var(--accent-primary); }
        .add-project-btn i { font-size: 12px; }

        /* CHAT HEADER */
        .chat-header {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 20px;
            background: var(--bg-secondary);
            border-bottom: 1px solid var(--border-color);
        }
        .chat-header-back {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            color: var(--text-muted);
            cursor: pointer;
            transition: all 0.2s;
        }
        .chat-header-back:hover { color: var(--text-primary); background: var(--bg-hover); }
        .chat-project-badge {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 4px 10px;
            background: rgba(99, 102, 241, 0.1);
            border: 1px solid rgba(99, 102, 241, 0.2);
            border-radius: 6px;
            font-size: 11px;
            font-weight: 500;
            color: #818cf8;
        }
        .chat-project-badge .project-color-dot { width: 6px; height: 6px; }
        .chat-title-wrapper { flex: 1; }
        .chat-title {
            font-size: 15px;
            font-weight: 600;
            color: var(--text-primary);
            background: none;
            border: none;
            outline: none;
            width: 100%;
            padding: 4px 0;
        }
        .chat-title:hover { background: var(--bg-tertiary); border-radius: 4px; padding: 4px 8px; margin: 0 -8px; }
        .chat-title:focus { background: var(--bg-tertiary); border-radius: 4px; padding: 4px 8px; margin: 0 -8px; }
        .chat-title-hint {
            font-size: 11px;
            color: var(--text-muted);
            display: none;
        }
        .chat-title:focus + .chat-title-hint { display: block; }
        .chat-header-actions {
            display: flex;
            gap: 8px;
        }
        .chat-header-btn {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            color: var(--text-muted);
            cursor: pointer;
            transition: all 0.2s;
        }
        .chat-header-btn:hover { color: var(--text-primary); background: var(--bg-hover); }

        /* ========================================
           ADVANCED SEARCH MODAL
           ======================================== */
        .search-modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(4px);
            display: none;
            align-items: flex-start;
            justify-content: center;
            padding-top: 10vh;
            z-index: 3000;
        }
        .search-modal-overlay.open { display: flex; }
        .search-modal {
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            width: 90%;
            max-width: 700px;
            max-height: 70vh;
            overflow: hidden;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
        }
        .search-modal-header {
            padding: 16px 20px;
            border-bottom: 1px solid var(--border-color);
        }
        .search-input-main {
            display: flex;
            align-items: center;
            gap: 12px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 12px 16px;
        }
        .search-input-main i { color: var(--text-muted); font-size: 16px; }
        .search-input-main input {
            flex: 1;
            background: none;
            border: none;
            color: var(--text-primary);
            font-size: 15px;
            outline: none;
        }
        .search-input-main input::placeholder { color: var(--text-muted); }
        .search-input-main .search-shortcut {
            font-size: 11px;
            color: var(--text-muted);
            background: var(--bg-hover);
            padding: 4px 8px;
            border-radius: 4px;
        }
        .search-filters {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 12px;
            flex-wrap: wrap;
        }
        .search-scope-tabs {
            display: flex;
            gap: 4px;
            background: var(--bg-tertiary);
            padding: 3px;
            border-radius: 8px;
        }
        .search-scope-tab {
            padding: 6px 12px;
            font-size: 12px;
            border: none;
            background: none;
            color: var(--text-muted);
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .search-scope-tab:hover { color: var(--text-primary); }
        .search-scope-tab.active {
            background: var(--bg-secondary);
            color: var(--accent-primary);
            box-shadow: var(--shadow-sm);
        }
        .search-filter-btn {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            font-size: 12px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.2s;
        }
        .search-filter-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
        .search-filter-btn.active { border-color: var(--accent-primary); color: var(--accent-primary); }
        .search-filter-btn i { font-size: 10px; }
        .search-results {
            max-height: 50vh;
            overflow-y: auto;
            padding: 12px;
        }
        .search-results-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 12px;
            font-size: 12px;
            color: var(--text-muted);
        }
        .search-results-sort {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .search-results-sort select {
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: 4px;
            padding: 4px 8px;
            font-size: 11px;
            color: var(--text-secondary);
        }
        .search-result-item {
            padding: 14px 16px;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.2s;
            margin-bottom: 8px;
            border: 1px solid transparent;
        }
        .search-result-item:hover,
        .search-result-item.keyboard-focus {
            background: var(--bg-hover);
            border-color: var(--border-color);
        }
        .search-result-item.keyboard-focus {
            outline: 2px solid var(--accent-primary);
            outline-offset: -2px;
        }
        .search-result-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 6px;
        }
        .search-result-icon {
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(99, 102, 241, 0.1);
            border-radius: 6px;
            color: #818cf8;
            font-size: 12px;
        }
        .search-result-icon.doc { background: rgba(16, 185, 129, 0.1); color: #34d399; }
        .search-result-title {
            flex: 1;
            font-size: 14px;
            font-weight: 500;
            color: var(--text-primary);
        }
        .search-result-title mark {
            background: rgba(251, 191, 36, 0.3);
            color: inherit;
            padding: 0 2px;
            border-radius: 2px;
        }
        .search-result-time {
            font-size: 11px;
            color: var(--text-muted);
        }
        .search-result-snippet {
            font-size: 13px;
            color: var(--text-secondary);
            line-height: 1.5;
            margin-bottom: 6px;
        }
        .search-result-snippet mark {
            background: rgba(251, 191, 36, 0.3);
            color: inherit;
            padding: 0 2px;
            border-radius: 2px;
        }
        .search-result-meta {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 11px;
            color: var(--text-muted);
        }
        .search-result-meta span { display: flex; align-items: center; gap: 4px; }
        .search-no-results {
            text-align: center;
            padding: 40px 20px;
            color: var(--text-muted);
        }
        .search-no-results i { font-size: 32px; margin-bottom: 12px; opacity: 0.5; }
        .search-no-results h4 { font-size: 14px; color: var(--text-secondary); margin-bottom: 6px; }
        .search-no-results p { font-size: 12px; }

        /* ========================================
           CONTEXT MENU
           ======================================== */
        .context-menu {
            position: fixed;
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            box-shadow: var(--shadow-lg);
            min-width: 180px;
            padding: 6px;
            z-index: 4000;
            display: none;
        }
        .context-menu.open { display: block; }
        .context-menu-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            border-radius: 6px;
            font-size: 13px;
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.15s;
        }
        .context-menu-item:hover { background: var(--bg-hover); color: var(--text-primary); }
        .context-menu-item.danger { color: #ef4444; }
        .context-menu-item.danger:hover { background: rgba(239, 68, 68, 0.1); }
        .context-menu-item i { width: 16px; text-align: center; font-size: 12px; }
        .context-menu-divider { height: 1px; background: var(--border-color); margin: 6px 0; }

        /* ========================================
           DOCUMENT LIST IN KB PANEL
           ======================================== */
        .kb-document-list {
            flex: 1;
            overflow-y: auto;
            padding: 12px 0;
        }
        .kb-document-item {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 12px 16px;
            border-bottom: 1px solid var(--border-color);
            cursor: pointer;
            transition: all 0.2s;
        }
        .kb-document-item:hover { background: var(--bg-hover); }
        .kb-document-checkbox {
            width: 16px;
            height: 16px;
            margin-top: 2px;
            accent-color: var(--accent-primary);
        }
        .kb-document-icon {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(99, 102, 241, 0.1);
            border-radius: 8px;
            color: #818cf8;
            font-size: 14px;
            flex-shrink: 0;
        }
        .kb-document-icon.pdf { background: rgba(239, 68, 68, 0.1); color: #f87171; }
        .kb-document-icon.doc { background: rgba(59, 130, 246, 0.1); color: #60a5fa; }
        .kb-document-icon.sheet { background: rgba(16, 185, 129, 0.1); color: #34d399; }
        .kb-document-info { flex: 1; min-width: 0; }
        .kb-document-name {
            font-size: 13px;
            font-weight: 500;
            color: var(--text-primary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-bottom: 4px;
        }
        .kb-document-meta {
            font-size: 11px;
            color: var(--text-muted);
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }
        .kb-document-status {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 10px;
            font-weight: 500;
        }
        .kb-document-status.current { background: rgba(16, 185, 129, 0.1); color: #10b981; }
        .kb-document-status.outdated { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
        .kb-document-status.stale { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
        .kb-document-status.processing { background: rgba(99, 102, 241, 0.1); color: #818cf8; }
        .kb-document-actions {
            display: flex;
            gap: 4px;
            opacity: 0;
            transition: opacity 0.2s;
        }
        .kb-document-item:hover .kb-document-actions { opacity: 1; }
        .kb-document-action-btn {
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            color: var(--text-muted);
            cursor: pointer;
            font-size: 11px;
            transition: all 0.2s;
        }
        .kb-document-action-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
        .kb-document-action-btn.update { color: #f59e0b; }
        .kb-document-action-btn.update:hover { background: rgba(245, 158, 11, 0.1); }

        /* Knowledge Base Health Banner */
        .kb-health-banner {
            margin: 12px 16px;
            padding: 12px 16px;
            background: rgba(245, 158, 11, 0.1);
            border: 1px solid rgba(245, 158, 11, 0.2);
            border-radius: 10px;
        }
        .kb-health-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
        }
        .kb-health-title {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            font-weight: 500;
            color: #f59e0b;
        }
        .kb-health-action {
            font-size: 11px;
            color: #f59e0b;
            background: none;
            border: none;
            cursor: pointer;
            text-decoration: underline;
        }
        .kb-health-details {
            font-size: 12px;
            color: var(--text-secondary);
        }

        /* BULK ACTIONS BAR */
        .kb-bulk-actions {
            display: none;
            align-items: center;
            gap: 12px;
            padding: 10px 16px;
            background: var(--accent-gradient);
            color: white;
            font-size: 13px;
            position: sticky;
            top: 0;
            z-index: 10;
        }
        .kb-bulk-actions.visible { display: flex; }
        .kb-bulk-count {
            font-weight: 600;
            margin-right: auto;
        }
        .kb-bulk-btn {
            padding: 6px 12px;
            background: rgba(255, 255, 255, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 6px;
            color: white;
            font-size: 12px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: all 0.2s;
        }
        .kb-bulk-btn:hover { background: rgba(255, 255, 255, 0.3); }
        .kb-bulk-btn.danger { background: rgba(239, 68, 68, 0.8); border-color: #ef4444; }
        .kb-bulk-btn.danger:hover { background: #ef4444; }
        .kb-bulk-close {
            width: 24px;
            height: 24px;
            background: rgba(255, 255, 255, 0.2);
            border: none;
            border-radius: 4px;
            color: white;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* SELECT ALL HEADER */
        .kb-select-all-header {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 16px;
            border-bottom: 1px solid var(--border-color);
            font-size: 12px;
            color: var(--text-muted);
        }
        .kb-select-all-header input { accent-color: var(--accent-primary); }

        /* DOCUMENT DETAILS MODAL */
        .doc-details-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(4px);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 3500;
        }
        .doc-details-overlay.open { display: flex; }
        .doc-details-modal {
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            width: 90%;
            max-width: 600px;
            max-height: 85vh;
            overflow: hidden;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
        }
        .doc-details-header {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 20px 24px;
            border-bottom: 1px solid var(--border-color);
        }
        .doc-details-icon {
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(239, 68, 68, 0.1);
            border-radius: 12px;
            color: #f87171;
            font-size: 20px;
        }
        .doc-details-title-section { flex: 1; }
        .doc-details-title {
            font-size: 16px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 4px;
        }
        .doc-details-subtitle {
            font-size: 12px;
            color: var(--text-muted);
        }
        .doc-details-close {
            width: 32px;
            height: 32px;
            background: var(--bg-tertiary);
            border: none;
            border-radius: 8px;
            color: var(--text-muted);
            cursor: pointer;
        }
        .doc-details-body {
            padding: 20px 24px;
            max-height: 60vh;
            overflow-y: auto;
        }
        .doc-details-section {
            margin-bottom: 20px;
        }
        .doc-details-section-title {
            font-size: 11px;
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 12px;
        }
        .doc-details-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }
        .doc-details-item {
            padding: 12px;
            background: var(--bg-tertiary);
            border-radius: 8px;
        }
        .doc-details-item-label {
            font-size: 11px;
            color: var(--text-muted);
            margin-bottom: 4px;
        }
        .doc-details-item-value {
            font-size: 14px;
            font-weight: 500;
            color: var(--text-primary);
        }
        .doc-details-item-value.status-current { color: #10b981; }
        .doc-details-item-value.status-outdated { color: #f59e0b; }
        .doc-details-item-value.status-stale { color: #ef4444; }
        .doc-details-usage-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 0;
            border-bottom: 1px solid var(--border-color);
        }
        .doc-details-usage-item:last-child { border-bottom: none; }
        .doc-details-usage-item i { color: var(--text-muted); width: 16px; }
        .doc-details-usage-item span { flex: 1; font-size: 13px; color: var(--text-secondary); }
        .doc-details-usage-item strong { font-size: 13px; color: var(--text-primary); }
        .doc-details-version-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 12px;
            background: var(--bg-tertiary);
            border-radius: 8px;
            margin-bottom: 8px;
        }
        .doc-details-version-current {
            border: 1px solid rgba(16, 185, 129, 0.3);
            background: rgba(16, 185, 129, 0.05);
        }
        .doc-details-version-badge {
            padding: 2px 8px;
            background: rgba(16, 185, 129, 0.1);
            color: #10b981;
            font-size: 10px;
            font-weight: 600;
            border-radius: 4px;
        }
        .doc-details-version-info { flex: 1; }
        .doc-details-version-name { font-size: 13px; color: var(--text-primary); }
        .doc-details-version-date { font-size: 11px; color: var(--text-muted); }
        .doc-details-version-restore {
            font-size: 11px;
            color: var(--accent-primary);
            background: none;
            border: none;
            cursor: pointer;
        }
        .doc-details-actions {
            display: flex;
            gap: 8px;
            padding: 16px 24px;
            border-top: 1px solid var(--border-color);
            flex-wrap: wrap;
        }
        .doc-details-action-btn {
            padding: 10px 16px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            color: var(--text-secondary);
            font-size: 13px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.2s;
        }
        .doc-details-action-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
        .doc-details-action-btn.primary {
            background: var(--accent-gradient);
            border: none;
            color: white;
        }
        .doc-details-action-btn.danger { color: #ef4444; }
        .doc-details-action-btn.danger:hover { background: rgba(239, 68, 68, 0.1); }

        /* SEARCH FILTER DROPDOWNS */
        .search-filter-dropdown {
            position: absolute;
            top: 100%;
            left: 0;
            margin-top: 8px;
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            box-shadow: var(--shadow-lg);
            min-width: 200px;
            padding: 8px;
            z-index: 100;
            display: none;
        }
        .search-filter-dropdown.open { display: block; }
        .search-filter-option {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            border-radius: 6px;
            font-size: 13px;
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.15s;
        }
        .search-filter-option:hover { background: var(--bg-hover); color: var(--text-primary); }
        .search-filter-option.selected { background: rgba(99, 102, 241, 0.1); color: var(--accent-primary); }
        .search-filter-option i { width: 16px; color: var(--text-muted); }
        .search-filter-option.selected i { color: var(--accent-primary); }
        .filter-btn-wrapper { position: relative; }

        /* DOCUMENT CONTEXT MENU */
        .document-context-menu {
            position: fixed;
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            box-shadow: var(--shadow-lg);
            min-width: 200px;
            padding: 6px;
            z-index: 4000;
            display: none;
        }
        .document-context-menu.open { display: block; }

        /* NO RESULTS STATE */
        .search-no-results {
            text-align: center;
            padding: 40px 20px;
        }
        .search-no-results-icon {
            width: 64px;
            height: 64px;
            margin: 0 auto 16px;
            background: var(--bg-tertiary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-muted);
            font-size: 24px;
        }
        .search-no-results h4 {
            font-size: 15px;
            color: var(--text-primary);
            margin-bottom: 8px;
        }
        .search-no-results p {
            font-size: 13px;
            color: var(--text-muted);
            margin-bottom: 16px;
        }
        .search-no-results-suggestions {
            text-align: left;
            background: var(--bg-tertiary);
            border-radius: 8px;
            padding: 12px 16px;
            margin-bottom: 16px;
        }
        .search-no-results-suggestions li {
            font-size: 12px;
            color: var(--text-secondary);
            padding: 4px 0;
            list-style: none;
        }
        .search-no-results-suggestions li::before {
            content: "•";
            color: var(--text-muted);
            margin-right: 8px;
        }
        .search-no-results-actions {
            display: flex;
            gap: 8px;
            justify-content: center;
        }
        .search-no-results-btn {
            padding: 8px 16px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            color: var(--text-secondary);
            font-size: 12px;
            cursor: pointer;
        }
        .search-no-results-btn:hover { background: var(--bg-hover); }
        .search-no-results-btn.primary { background: var(--accent-primary); border: none; color: white; }

        /* RECENT SEARCHES */
        .search-recent {
            padding: 12px;
            border-bottom: 1px solid var(--border-color);
        }
        .search-recent-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
        }
        .search-recent-title {
            font-size: 11px;
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
        }
        .search-recent-clear {
            font-size: 11px;
            color: var(--text-muted);
            background: none;
            border: none;
            cursor: pointer;
        }
        .search-recent-clear:hover { color: var(--accent-primary); }
        .search-recent-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 10px;
            border-radius: 6px;
            font-size: 13px;
            color: var(--text-secondary);
            cursor: pointer;
        }
        .search-recent-item:hover { background: var(--bg-hover); }
        .search-recent-item i { color: var(--text-muted); font-size: 12px; }

        /* AI SEARCH BADGE */
        .ai-search-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 4px 10px;
            background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(99, 102, 241, 0.15));
            border: 1px solid rgba(139, 92, 246, 0.3);
            border-radius: 20px;
            font-size: 11px;
            font-weight: 500;
            color: #a78bfa;
        }
        .ai-search-badge i { font-size: 10px; }

        /* SEARCH FILTER WRAPPER & DROPDOWN ENHANCEMENTS */
        .search-filter-wrapper {
            position: relative;
        }
        .filter-option {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            border-radius: 6px;
            font-size: 13px;
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.15s;
        }
        .filter-option:hover {
            background: var(--bg-hover);
            color: var(--text-primary);
        }
        .filter-option i { width: 16px; color: var(--text-muted); }
        .filter-divider {
            height: 1px;
            background: var(--border-color);
            margin: 8px 0;
        }
        .filter-search {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            background: var(--bg-tertiary);
            border-radius: 6px;
            margin-bottom: 8px;
        }
        .filter-search i { color: var(--text-muted); font-size: 12px; }
        .filter-search input {
            flex: 1;
            background: none;
            border: none;
            font-size: 13px;
            color: var(--text-primary);
            outline: none;
        }
        .filter-count {
            margin-left: auto;
            font-size: 11px;
            color: var(--text-muted);
            background: var(--bg-tertiary);
            padding: 2px 6px;
            border-radius: 4px;
        }
        .project-color {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            flex-shrink: 0;
        }

        /* SEARCH RECENT ENHANCEMENTS */
        .search-recent-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 16px 8px;
            font-size: 11px;
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .search-clear-history {
            font-size: 11px;
            color: var(--text-muted);
            background: none;
            border: none;
            cursor: pointer;
            text-transform: none;
            font-weight: normal;
        }
        .search-clear-history:hover { color: var(--accent-primary); }
        .search-recent-list { padding: 0 8px 8px; }
        .search-recent-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.15s;
        }
        .search-recent-item:hover { background: var(--bg-hover); }
        .search-recent-item i { color: var(--text-muted); font-size: 12px; width: 16px; }
        .search-recent-item span:first-of-type {
            flex: 1;
            font-size: 13px;
            color: var(--text-secondary);
        }
        .search-recent-time {
            font-size: 11px;
            color: var(--text-muted);
        }
        .search-suggestions-header {
            padding: 12px 16px 8px;
            font-size: 11px;
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            border-top: 1px solid var(--border-color);
        }
        .search-badge {
            font-size: 10px;
            padding: 2px 8px;
            border-radius: 10px;
        }
        .search-badge.warning {
            background: rgba(245, 158, 11, 0.1);
            color: #f59e0b;
        }

        /* NO RESULTS STATE ENHANCEMENTS */
        .search-no-results {
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 60px 40px;
            text-align: center;
        }
        .no-results-icon {
            width: 80px;
            height: 80px;
            background: var(--bg-tertiary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
        }
        .no-results-icon i {
            font-size: 32px;
            color: var(--text-muted);
        }
        .search-no-results h3 {
            font-size: 18px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 8px;
        }
        .search-no-results p {
            font-size: 14px;
            color: var(--text-muted);
            margin-bottom: 24px;
        }
        .no-results-suggestions {
            text-align: left;
            background: var(--bg-tertiary);
            padding: 16px 20px;
            border-radius: 10px;
            margin-bottom: 20px;
        }
        .no-results-label {
            font-size: 11px;
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            display: block;
            margin-bottom: 8px;
        }
        .no-results-suggestions ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .no-results-suggestions li {
            font-size: 13px;
            color: var(--text-secondary);
            padding: 4px 0;
        }
        .no-results-suggestions li::before {
            content: "•";
            color: var(--accent-primary);
            margin-right: 8px;
        }
        .no-results-action {
            padding: 10px 20px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            font-size: 13px;
            color: var(--text-secondary);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .no-results-action:hover {
            background: var(--bg-hover);
            color: var(--text-primary);
        }

        /* DOC DETAILS CONTENT ENHANCEMENTS */
        .doc-details-content {
            padding: 20px 24px;
            max-height: 60vh;
            overflow-y: auto;
        }
        .doc-details-section {
            margin-bottom: 24px;
        }
        .doc-details-section:last-child { margin-bottom: 0; }
        .doc-details-section h4 {
            font-size: 11px;
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 12px;
        }
        .doc-details-status {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-top: 4px;
        }
        .doc-details-updated {
            font-size: 12px;
            color: var(--text-muted);
        }
        .doc-detail-row {
            display: flex;
            justify-content: space-between;
            padding: 10px 0;
            border-bottom: 1px solid var(--border-color);
        }
        .doc-detail-row:last-child { border-bottom: none; }
        .doc-detail-label {
            font-size: 13px;
            color: var(--text-muted);
        }
        .doc-detail-value {
            font-size: 13px;
            font-weight: 500;
            color: var(--text-primary);
        }
        .doc-source-info {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 16px;
            background: var(--bg-tertiary);
            border-radius: 8px;
            font-size: 13px;
            color: var(--text-secondary);
        }
        .doc-source-info i { color: var(--text-muted); }
        .doc-action-btn {
            padding: 10px 16px;
            border-radius: 8px;
            font-size: 13px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            border: 1px solid var(--border-color);
            transition: all 0.2s;
        }
        .doc-action-btn.secondary {
            background: var(--bg-tertiary);
            color: var(--text-secondary);
        }
        .doc-action-btn.secondary:hover {
            background: var(--bg-hover);
            color: var(--text-primary);
        }
        .doc-action-btn.danger {
            background: none;
            color: #ef4444;
            border-color: rgba(239, 68, 68, 0.3);
        }
        .doc-action-btn.danger:hover {
            background: rgba(239, 68, 68, 0.1);
        }
        .kb-doc-count {
            margin-left: auto;
            font-size: 11px;
            color: var(--text-muted);
        }

        /* DUPLICATE DETECTION */
        .kb-document-status.duplicate {
            color: #8b5cf6;
            background: rgba(139, 92, 246, 0.1);
        }
        .duplicate-warning {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 10px;
            color: #8b5cf6;
            margin-top: 4px;
            padding: 4px 8px;
            background: rgba(139, 92, 246, 0.08);
            border-radius: 4px;
            border: 1px dashed rgba(139, 92, 246, 0.3);
        }
        .duplicate-warning i { font-size: 10px; }
        .duplicate-link {
            color: #8b5cf6;
            text-decoration: underline;
            cursor: pointer;
        }
        .duplicate-link:hover { color: #a78bfa; }

        /* VERSION HISTORY */
        .version-history-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .version-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 12px;
            background: var(--bg-tertiary);
            border-radius: 8px;
        }
        .version-item.current {
            border: 1px solid rgba(16, 185, 129, 0.3);
            background: rgba(16, 185, 129, 0.05);
        }
        .version-badge {
            padding: 2px 8px;
            background: rgba(16, 185, 129, 0.1);
            color: #10b981;
            font-size: 10px;
            font-weight: 600;
            border-radius: 4px;
        }
        .version-info { flex: 1; }
        .version-name {
            font-size: 13px;
            color: var(--text-primary);
        }
        .version-date {
            font-size: 11px;
            color: var(--text-muted);
        }
        .version-restore {
            font-size: 11px;
            color: var(--accent-primary);
            background: none;
            border: none;
            cursor: pointer;
        }
        .version-restore:hover { text-decoration: underline; }

        /* ========================================
           MESSAGE ACTIONS
           ======================================== */
        .message-actions {
            display: flex;
            gap: 4px;
            margin-top: 8px;
            opacity: 0;
            transition: opacity 0.2s;
        }
        .message:hover .message-actions { opacity: 1; }
        .message-action-btn {
            padding: 4px 8px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: 4px;
            font-size: 11px;
            color: var(--text-muted);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 4px;
            transition: all 0.2s;
        }
        .message-action-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
        .message-action-btn.feedback-positive.active { background: rgba(16, 185, 129, 0.1); color: #10b981; border-color: #10b981; }
        .message-action-btn.feedback-negative.active { background: rgba(239, 68, 68, 0.1); color: #ef4444; border-color: #ef4444; }
        .message-sources {
            margin-top: 8px;
            padding: 10px 12px;
            background: var(--bg-tertiary);
            border-radius: 8px;
            font-size: 12px;
        }
        .message-sources-header {
            display: flex;
            align-items: center;
            gap: 6px;
            color: var(--text-muted);
            margin-bottom: 8px;
        }
        .message-sources-header i { font-size: 10px; }
        .message-source-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 0;
            color: var(--text-secondary);
        }
        .message-source-item i { color: #818cf8; font-size: 11px; }

        /* ========================================
           COMMAND PALETTE
           ======================================== */
        .command-palette-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(4px);
            display: none;
            align-items: flex-start;
            justify-content: center;
            padding-top: 15vh;
            z-index: 5000;
        }
        .command-palette-overlay.open { display: flex; }
        .command-palette {
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            width: 90%;
            max-width: 560px;
            overflow: hidden;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
        }
        .command-palette-input-wrapper {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 16px 20px;
            border-bottom: 1px solid var(--border-color);
        }
        .command-palette-input-wrapper i { color: var(--text-muted); font-size: 16px; }
        .command-palette-input {
            flex: 1;
            background: none;
            border: none;
            color: var(--text-primary);
            font-size: 16px;
            outline: none;
        }
        .command-palette-input::placeholder { color: var(--text-muted); }
        .command-palette-results {
            max-height: 50vh;
            overflow-y: auto;
            padding: 8px;
        }
        .command-palette-section {
            padding: 8px 12px 4px;
            font-size: 10px;
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .command-palette-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 14px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.15s;
        }
        .command-palette-item:hover, .command-palette-item.selected {
            background: var(--bg-hover);
        }
        .command-palette-item-icon {
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--bg-tertiary);
            border-radius: 6px;
            color: var(--text-muted);
            font-size: 12px;
        }
        .command-palette-item-content { flex: 1; }
        .command-palette-item-title { font-size: 13px; color: var(--text-primary); }
        .command-palette-item-desc { font-size: 11px; color: var(--text-muted); }
        .command-palette-item-shortcut {
            font-size: 11px;
            color: var(--text-muted);
            background: var(--bg-tertiary);
            padding: 3px 8px;
            border-radius: 4px;
        }

        /* ========================================
           LOADING STATES
           ======================================== */
        .skeleton {
            background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-hover) 50%, var(--bg-tertiary) 75%);
            background-size: 200% 100%;
            animation: skeleton-loading 1.5s infinite;
            border-radius: 4px;
        }
        @keyframes skeleton-loading {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }
        .loading-spinner {
            display: inline-block;
            width: 16px;
            height: 16px;
            border: 2px solid var(--border-color);
            border-top-color: var(--accent-primary);
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        .search-loading {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 40px 20px;
            color: var(--text-muted);
        }
        .search-loading .loading-spinner {
            width: 24px;
            height: 24px;
            margin-bottom: 12px;
        }

        .user-section {
            padding: 10px 12px;
            border-top: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .user-avatar-small {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: var(--accent-gradient);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 12px;
            font-weight: 600;
            flex-shrink: 0;
        }
        .user-info-compact { flex: 1; min-width: 0; }
        .user-email-compact {
            font-size: 12px;
            color: var(--text-secondary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .user-role-compact {
            font-size: 10px;
            color: var(--text-muted);
        }
        .logout-btn-compact {
            padding: 6px;
            color: var(--text-muted);
            background: none;
            border: none;
            cursor: pointer;
            border-radius: 6px;
        }
        .logout-btn-compact:hover {
            color: var(--error);
            background: rgba(239, 68, 68, 0.1);
        }
        /* Hidden remnants of an earlier user block. Kept because the selectors are still referenced
           by the design's markup; display:none is the honest state, not a compatibility promise. */
        .user-label { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; display: none; }
        .user-email { font-size: 13px; color: var(--text-secondary); margin-bottom: 12px; word-break: break-all; display: none; }
        .logout-btn {
            display: none; align-items: center; gap: 8px; color: var(--text-muted);
            font-size: 13px; background: none; border: none; cursor: pointer;
        }
        .logout-btn:hover { color: var(--text-primary); }

        /* MAIN CONTENT */
        .main-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; background: var(--bg-primary); }

        .top-bar {
            display: flex; justify-content: flex-end; align-items: center; gap: 12px;
            padding: 12px 24px; background: var(--bg-secondary);
            border-bottom: 1px solid var(--border-color);
            box-shadow: var(--shadow-sm);
        }

        /* Theme Toggle Button */
        .theme-toggle {
            width: 40px; height: 40px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            color: var(--text-muted);
            cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            font-size: 18px;
            transition: all 0.3s ease;
        }
        .theme-toggle:hover {
            background: var(--bg-hover);
            color: var(--accent-primary);
            transform: rotate(15deg);
        }
        .theme-toggle .fa-sun { display: none; }
        .theme-toggle .fa-moon { display: block; }
        [data-theme="dark"] .theme-toggle .fa-sun { display: block; }
        [data-theme="dark"] .theme-toggle .fa-moon { display: none; }
        .status-badge {
            display: flex; align-items: center; gap: 8px;
            padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 500;
        }
        .status-badge.green { background: rgba(16, 185, 129, 0.15); color: #34d399; }
        .status-badge.green::before { content: ''; width: 8px; height: 8px; background: #10b981; border-radius: 50%; }
        .status-badge.purple { background: rgba(168, 85, 247, 0.15); color: #c084fc; }
        .status-badge.yellow { background: rgba(234, 179, 8, 0.15); color: #fbbf24; }
        .status-badge.red { background: rgba(239, 68, 68, 0.15); color: #f87171; }
        .status-badge.red::before { content: ''; width: 8px; height: 8px; background: #ef4444; border-radius: 50%; }

        /* Enterprise Badge */
        .enterprise-badge {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 14px;
            background: linear-gradient(135deg, rgba(234, 179, 8, 0.2), rgba(245, 158, 11, 0.15));
            border: 1px solid rgba(234, 179, 8, 0.3);
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            color: #fbbf24;
        }
        .enterprise-badge i { font-size: 11px; }

        /* Notification Bell */
        .notification-btn {
            position: relative;
            width: 40px;
            height: 40px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            color: var(--text-muted);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            transition: all 0.2s;
        }
        .notification-btn:hover {
            background: var(--bg-hover);
            color: var(--accent-primary);
        }
        .notification-badge {
            position: absolute;
            top: -4px;
            right: -4px;
            min-width: 18px;
            height: 18px;
            padding: 0 5px;
            background: #ef4444;
            color: white;
            font-size: 10px;
            font-weight: 700;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Usage Mini Meter */
        .usage-mini-meter {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 6px 14px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: 20px;
        }
        .usage-mini-bar {
            width: 60px;
            height: 6px;
            background: var(--bg-hover);
            border-radius: 3px;
            overflow: hidden;
        }
        .usage-mini-fill {
            height: 100%;
            background: linear-gradient(90deg, #10b981, #06b6d4);
            border-radius: 3px;
            transition: width 0.3s;
        }
        .usage-mini-label {
            font-size: 11px;
            color: var(--text-muted);
            white-space: nowrap;
        }

        /* Active Sessions */
        .active-sessions {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 14px;
            background: rgba(16, 185, 129, 0.1);
            border: 1px solid rgba(16, 185, 129, 0.2);
            border-radius: 20px;
            font-size: 12px;
            color: #34d399;
        }
        .active-sessions i { font-size: 11px; }

        /* Compliance Badges */
        .compliance-badges {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }
        .compliance-badge {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 4px 10px;
            background: rgba(16, 185, 129, 0.1);
            border: 1px solid rgba(16, 185, 129, 0.2);
            border-radius: 6px;
            font-size: 11px;
            font-weight: 500;
            color: #34d399;
        }
        .compliance-badge i { font-size: 10px; }

        /* Admin Quick Actions */
        .admin-quick-actions {
            display: flex;
            gap: 6px;
            padding: 8px 16px;
            margin-bottom: 8px;
        }
        .quick-action-btn {
            width: 32px;
            height: 32px;
            background: rgba(99, 102, 241, 0.1);
            border: 1px solid rgba(99, 102, 241, 0.2);
            border-radius: 8px;
            color: #818cf8;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            transition: all 0.2s;
        }
        .quick-action-btn:hover {
            background: rgba(99, 102, 241, 0.2);
            transform: translateY(-1px);
        }

        /* Nav Count Badge */
        .nav-count-badge {
            margin-left: auto;
            padding: 2px 8px;
            background: rgba(99, 102, 241, 0.15);
            color: #818cf8;
            font-size: 11px;
            font-weight: 600;
            border-radius: 10px;
        }

        /* Org Dropdown */
        .org-dropdown {
            position: absolute;
            top: calc(100% + 8px);
            left: 16px;
            right: 16px;
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            box-shadow: var(--shadow-lg);
            z-index: 100;
            display: none;
            overflow: hidden;
        }
        .org-dropdown.open { display: block; }
        .org-dropdown-header {
            padding: 12px 16px;
            font-size: 11px;
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            border-bottom: 1px solid var(--border-color);
        }
        .org-dropdown-list { padding: 8px; }
        .org-dropdown-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 12px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .org-dropdown-item:hover { background: var(--bg-hover); }
        .org-dropdown-item.active { background: rgba(99, 102, 241, 0.1); }
        .org-dropdown-logo {
            width: 36px;
            height: 36px;
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 700;
            font-size: 14px;
        }
        .org-dropdown-info { flex: 1; }
        .org-dropdown-name {
            display: block;
            font-size: 14px;
            font-weight: 500;
            color: var(--text-primary);
        }
        .org-dropdown-role {
            display: block;
            font-size: 12px;
            color: var(--text-muted);
        }
        .org-dropdown-item i.fa-check {
            color: #10b981;
            font-size: 14px;
        }
        .org-dropdown-divider {
            height: 1px;
            background: var(--border-color);
            margin: 8px 0;
        }
        .org-dropdown-action {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 16px;
            color: var(--text-secondary);
            font-size: 14px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .org-dropdown-action:hover {
            background: var(--bg-hover);
            color: var(--text-primary);
        }
        .org-dropdown-action i { width: 16px; text-align: center; }

        /* Credits Modal */
        .credits-modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(4px);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 2000;
        }
        .credits-modal-overlay.open { display: flex; }
        .credits-modal {
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            width: 90%;
            max-width: 500px;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: var(--shadow-lg);
        }
        .credits-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 24px;
            border-bottom: 1px solid var(--border-color);
        }
        .credits-modal-title {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 18px;
            font-weight: 600;
            color: var(--text-primary);
        }
        .credits-modal-title i { color: #fbbf24; }
        .credits-modal-close {
            width: 32px;
            height: 32px;
            background: var(--bg-tertiary);
            border: none;
            border-radius: 8px;
            color: var(--text-muted);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .credits-modal-close:hover { color: var(--text-primary); }
        .credits-modal-body { padding: 24px; }
        .credits-current {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px;
            background: var(--bg-tertiary);
            border-radius: 10px;
            margin-bottom: 24px;
        }
        .credits-current span { color: var(--text-secondary); font-size: 14px; }
        .credits-current strong { color: #10b981; font-size: 18px; }
        .credits-packages {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            margin-bottom: 24px;
        }
        @media (max-width: 500px) {
            .credits-packages { grid-template-columns: 1fr; }
        }
        .credit-package {
            position: relative;
            cursor: pointer;
        }
        .credit-package input { display: none; }
        .package-content {
            padding: 20px 16px;
            background: var(--bg-tertiary);
            border: 2px solid var(--border-color);
            border-radius: 12px;
            text-align: center;
            transition: all 0.2s;
        }
        .credit-package:hover .package-content { border-color: rgba(99, 102, 241, 0.3); }
        .credit-package input:checked + .package-content {
            border-color: #6366f1;
            background: rgba(99, 102, 241, 0.1);
        }
        .credit-package.popular .popular-badge {
            position: absolute;
            top: -10px;
            left: 50%;
            transform: translateX(-50%);
            padding: 4px 12px;
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            color: white;
            font-size: 10px;
            font-weight: 600;
            border-radius: 10px;
            white-space: nowrap;
        }
        .package-amount {
            font-size: 24px;
            font-weight: 700;
            color: var(--text-primary);
        }
        .package-label {
            font-size: 12px;
            color: var(--text-muted);
            margin-bottom: 12px;
        }
        .package-price {
            font-size: 20px;
            font-weight: 600;
            color: #10b981;
        }
        .package-per {
            font-size: 11px;
            color: var(--text-muted);
            margin-top: 4px;
        }
        .credits-auto-reload {
            padding: 16px;
            background: var(--bg-tertiary);
            border-radius: 10px;
            margin-bottom: 24px;
        }
        .toggle-option {
            display: flex;
            align-items: center;
            gap: 12px;
            cursor: pointer;
            font-size: 14px;
            color: var(--text-secondary);
        }
        .credits-modal-actions {
            display: flex;
            gap: 12px;
            justify-content: flex-end;
        }
        .credits-modal-btn {
            padding: 12px 24px;
            border-radius: 10px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }
        .credits-modal-btn.cancel {
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            color: var(--text-secondary);
        }
        .credits-modal-btn.cancel:hover { background: var(--bg-hover); }
        .credits-modal-btn.purchase {
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            border: none;
            color: white;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .credits-modal-btn.purchase:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4); }

        /* ===== ADMIN TABLES & COMPONENTS ===== */
        .admin-toolbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24px;
            flex-wrap: wrap;
            gap: 16px;
        }
        .admin-toolbar-left {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
        }
        .admin-toolbar-right {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .admin-search {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 16px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            min-width: 280px;
        }
        .admin-search i { color: var(--text-muted); }
        .admin-search input {
            background: none;
            border: none;
            outline: none;
            color: var(--text-primary);
            font-size: 14px;
            width: 100%;
        }
        .admin-search input::placeholder { color: var(--text-muted); }
        .admin-filter-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 16px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            color: var(--text-secondary);
            font-size: 14px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .admin-filter-btn:hover { border-color: var(--accent-primary); color: var(--text-primary); }
        .admin-filter-btn.active { background: rgba(99, 102, 241, 0.1); border-color: var(--accent-primary); color: var(--accent-primary); }
        .admin-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 20px;
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            border: none;
            border-radius: 10px;
            color: white;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }
        .admin-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4); }
        .admin-btn.secondary {
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            color: var(--text-secondary);
        }
        .admin-btn.secondary:hover { background: var(--bg-hover); color: var(--text-primary); box-shadow: none; transform: none; }

        /* Admin Stats Row */
        .admin-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 16px;
            margin-bottom: 24px;
        }
        .admin-stat-card {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 20px;
        }
        .admin-stat-label {
            font-size: 12px;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 8px;
        }
        .admin-stat-value {
            font-size: 28px;
            font-weight: 700;
            color: var(--text-primary);
        }
        .admin-stat-value.green { color: #10b981; }
        .admin-stat-value.purple { color: #8b5cf6; }
        .admin-stat-value.yellow { color: #f59e0b; }
        .admin-stat-change {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 12px;
            margin-top: 8px;
            padding: 2px 8px;
            border-radius: 10px;
        }
        .admin-stat-change.up { background: rgba(16, 185, 129, 0.1); color: #10b981; }
        .admin-stat-change.down { background: rgba(239, 68, 68, 0.1); color: #ef4444; }

        /* Admin Data Table */
        .admin-table-container {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            overflow: hidden;
        }
        .admin-table {
            width: 100%;
            border-collapse: collapse;
        }
        .admin-table th {
            text-align: left;
            padding: 14px 20px;
            font-size: 11px;
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            background: var(--bg-tertiary);
            border-bottom: 1px solid var(--border-color);
        }
        .admin-table td {
            padding: 16px 20px;
            font-size: 14px;
            color: var(--text-primary);
            border-bottom: 1px solid var(--border-color);
        }
        .admin-table tr:last-child td { border-bottom: none; }
        .admin-table tr:hover td { background: var(--bg-hover); }
        .admin-table .user-cell {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .admin-table .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 14px;
            color: white;
        }
        .admin-table .user-info { flex: 1; }
        .admin-table .user-name { font-weight: 500; color: var(--text-primary); }
        .admin-table .user-email { font-size: 13px; color: var(--text-muted); }
        .admin-table .role-badge {
            display: inline-flex;
            align-items: center;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
        }
        .role-badge.admin { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
        .role-badge.manager { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
        .role-badge.member { background: rgba(99, 102, 241, 0.1); color: #818cf8; }
        .role-badge.viewer { background: rgba(107, 114, 128, 0.1); color: #9ca3af; }
        .status-dot {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
        }
        .status-dot::before {
            content: '';
            width: 8px;
            height: 8px;
            border-radius: 50%;
        }
        .status-dot.online::before { background: #10b981; }
        .status-dot.offline::before { background: #6b7280; }
        .status-dot.away::before { background: #f59e0b; }
        .admin-table .action-btns {
            display: flex;
            gap: 8px;
        }
        .admin-table .action-btn {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            border: 1px solid var(--border-color);
            background: var(--bg-tertiary);
            color: var(--text-muted);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }
        .admin-table .action-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
        .admin-table .action-btn.danger:hover { background: rgba(239, 68, 68, 0.1); color: #ef4444; border-color: rgba(239, 68, 68, 0.3); }

        /* Pagination */
        .admin-pagination {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 20px;
            border-top: 1px solid var(--border-color);
        }
        .pagination-info { font-size: 14px; color: var(--text-muted); }
        .pagination-btns {
            display: flex;
            gap: 8px;
        }
        .pagination-btn {
            padding: 8px 14px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            color: var(--text-secondary);
            font-size: 13px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .pagination-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
        .pagination-btn.active { background: var(--accent-primary); border-color: var(--accent-primary); color: white; }
        .pagination-btn:disabled { opacity: 0.5; cursor: not-allowed; }

        /* Audit Log Styles */
        .audit-log-list {
            display: flex;
            flex-direction: column;
            gap: 1px;
            background: var(--border-color);
            border-radius: 12px;
            overflow: hidden;
        }
        .audit-log-item {
            display: flex;
            align-items: flex-start;
            gap: 16px;
            padding: 16px 20px;
            background: var(--bg-card);
            transition: all 0.2s;
        }
        .audit-log-item:hover { background: var(--bg-hover); }
        .audit-log-icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .audit-log-icon.login { background: rgba(16, 185, 129, 0.1); color: #10b981; }
        .audit-log-icon.logout { background: rgba(107, 114, 128, 0.1); color: #9ca3af; }
        .audit-log-icon.create { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
        .audit-log-icon.update { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
        .audit-log-icon.delete { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
        .audit-log-icon.security { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; }
        .audit-log-icon.api { background: rgba(6, 182, 212, 0.1); color: #06b6d4; }
        .audit-log-icon.export { background: rgba(236, 72, 153, 0.1); color: #ec4899; }
        .audit-log-content { flex: 1; min-width: 0; }
        .audit-log-action {
            font-size: 14px;
            color: var(--text-primary);
            margin-bottom: 4px;
        }
        .audit-log-action strong { font-weight: 600; }
        .audit-log-meta {
            display: flex;
            align-items: center;
            gap: 16px;
            font-size: 13px;
            color: var(--text-muted);
        }
        .audit-log-meta span {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .audit-log-time {
            font-size: 13px;
            color: var(--text-muted);
            white-space: nowrap;
        }
        .audit-severity {
            display: inline-flex;
            align-items: center;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
        }
        .audit-severity.info { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
        .audit-severity.warning { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
        .audit-severity.critical { background: rgba(239, 68, 68, 0.1); color: #ef4444; }

        /* Filter Pills */
        .filter-pills {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-bottom: 20px;
        }
        .filter-pill {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 14px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: 20px;
            font-size: 13px;
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.2s;
        }
        .filter-pill:hover { border-color: var(--accent-primary); }
        .filter-pill.active { background: rgba(99, 102, 241, 0.1); border-color: var(--accent-primary); color: var(--accent-primary); }
        .filter-pill .count {
            background: var(--bg-hover);
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 11px;
            font-weight: 600;
        }
        .filter-pill.active .count { background: rgba(99, 102, 241, 0.2); }

        /* Date Range Picker */
        .date-range-picker {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 14px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            font-size: 13px;
            color: var(--text-secondary);
            cursor: pointer;
        }
        .date-range-picker:hover { border-color: var(--accent-primary); }

        @media (max-width: 768px) {
            .admin-toolbar { flex-direction: column; align-items: stretch; }
            .admin-toolbar-left, .admin-toolbar-right { width: 100%; }
            .admin-search { min-width: auto; width: 100%; }
            .admin-table { display: block; overflow-x: auto; }
            .admin-stats { grid-template-columns: repeat(2, 1fr); }
        }

        /* ===== BILLING & USAGE COMPONENTS ===== */
        .billing-grid {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 24px;
            margin-bottom: 24px;
        }
        @media (max-width: 1024px) {
            .billing-grid { grid-template-columns: 1fr; }
        }
        .billing-card {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 24px;
        }
        .billing-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        .billing-card-title {
            font-size: 16px;
            font-weight: 600;
            color: var(--text-primary);
        }
        .billing-card-subtitle {
            font-size: 13px;
            color: var(--text-muted);
            margin-top: 4px;
        }
        .usage-chart {
            height: 200px;
            display: flex;
            align-items: flex-end;
            gap: 8px;
            padding: 20px 0;
        }
        .usage-bar-wrapper {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
        }
        .usage-bar {
            width: 100%;
            background: var(--bg-tertiary);
            border-radius: 4px;
            height: 160px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            overflow: hidden;
        }
        .usage-bar-fill {
            width: 100%;
            background: linear-gradient(180deg, #6366f1 0%, #8b5cf6 100%);
            border-radius: 4px 4px 0 0;
            transition: height 0.3s;
        }
        .usage-bar-label {
            font-size: 11px;
            color: var(--text-muted);
        }
        .plan-card {
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
            border: 1px solid rgba(99, 102, 241, 0.2);
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 16px;
        }
        .plan-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 16px;
        }
        .plan-name {
            font-size: 14px;
            font-weight: 600;
            color: var(--accent-primary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .plan-price {
            font-size: 32px;
            font-weight: 700;
            color: var(--text-primary);
        }
        .plan-price span {
            font-size: 14px;
            font-weight: 400;
            color: var(--text-muted);
        }
        .plan-features {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .plan-feature {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 13px;
            color: var(--text-secondary);
        }
        .plan-feature i { color: #10b981; font-size: 12px; }
        .usage-meter {
            margin-top: 20px;
        }
        .usage-meter-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
        }
        .usage-meter-label {
            font-size: 13px;
            color: var(--text-secondary);
        }
        .usage-meter-value {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-primary);
        }
        .usage-meter-bar {
            height: 8px;
            background: var(--bg-tertiary);
            border-radius: 4px;
            overflow: hidden;
        }
        .usage-meter-fill {
            height: 100%;
            border-radius: 4px;
            transition: width 0.3s;
        }
        .usage-meter-fill.green { background: linear-gradient(90deg, #10b981, #06b6d4); }
        .usage-meter-fill.yellow { background: linear-gradient(90deg, #f59e0b, #eab308); }
        .usage-meter-fill.red { background: linear-gradient(90deg, #ef4444, #f97316); }
        .invoice-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .invoice-item {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 16px;
            background: var(--bg-tertiary);
            border-radius: 10px;
            transition: all 0.2s;
        }
        .invoice-item:hover { background: var(--bg-hover); }
        .invoice-icon {
            width: 40px;
            height: 40px;
            background: rgba(99, 102, 241, 0.1);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--accent-primary);
        }
        .invoice-info { flex: 1; }
        .invoice-date {
            font-size: 14px;
            font-weight: 500;
            color: var(--text-primary);
        }
        .invoice-id {
            font-size: 12px;
            color: var(--text-muted);
        }
        .invoice-amount {
            font-size: 16px;
            font-weight: 600;
            color: var(--text-primary);
        }
        .invoice-status {
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 11px;
            font-weight: 600;
        }
        .invoice-status.paid { background: rgba(16, 185, 129, 0.1); color: #10b981; }
        .invoice-status.pending { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
        .invoice-download {
            width: 36px;
            height: 36px;
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            color: var(--text-muted);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }
        .invoice-download:hover { color: var(--accent-primary); border-color: var(--accent-primary); }
        .payment-method-card {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 16px;
            background: var(--bg-tertiary);
            border-radius: 10px;
            margin-bottom: 12px;
        }
        .card-brand {
            width: 48px;
            height: 32px;
            background: var(--bg-card);
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 12px;
            color: var(--text-primary);
        }
        .card-info { flex: 1; }
        .card-number {
            font-size: 14px;
            font-weight: 500;
            color: var(--text-primary);
            font-family: monospace;
        }
        .card-expiry {
            font-size: 12px;
            color: var(--text-muted);
        }
        .card-default {
            padding: 4px 10px;
            background: rgba(16, 185, 129, 0.1);
            color: #10b981;
            font-size: 11px;
            font-weight: 600;
            border-radius: 20px;
        }

        /* ===== HIPAA COMPLIANCE COMPONENTS ===== */
        .hipaa-banner {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 20px;
            background: linear-gradient(90deg, rgba(139, 92, 246, 0.1), rgba(99, 102, 241, 0.1));
            border: 1px solid rgba(139, 92, 246, 0.2);
            border-radius: 10px;
            margin-bottom: 20px;
        }
        .hipaa-banner-icon {
            width: 40px;
            height: 40px;
            background: rgba(139, 92, 246, 0.2);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #8b5cf6;
        }
        .hipaa-banner-content { flex: 1; }
        .hipaa-banner-title {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-primary);
        }
        .hipaa-banner-text {
            font-size: 13px;
            color: var(--text-secondary);
        }
        .hipaa-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(99, 102, 241, 0.15));
            border: 1px solid rgba(139, 92, 246, 0.3);
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            color: #a78bfa;
        }
        .hipaa-badge i { font-size: 11px; }
        .baa-status-card {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 16px;
        }
        .baa-status-header {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 16px;
        }
        .baa-icon {
            width: 48px;
            height: 48px;
            background: rgba(16, 185, 129, 0.1);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #10b981;
            font-size: 20px;
        }
        .baa-info { flex: 1; }
        .baa-title {
            font-size: 16px;
            font-weight: 600;
            color: var(--text-primary);
        }
        .baa-subtitle {
            font-size: 13px;
            color: var(--text-muted);
        }
        .baa-status-active {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            background: rgba(16, 185, 129, 0.1);
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            color: #10b981;
        }
        .baa-details {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
            padding-top: 16px;
            border-top: 1px solid var(--border-color);
        }
        @media (max-width: 600px) {
            .baa-details { grid-template-columns: 1fr; }
        }
        .baa-detail-item {
            text-align: center;
        }
        .baa-detail-label {
            font-size: 11px;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .baa-detail-value {
            font-size: 14px;
            font-weight: 500;
            color: var(--text-primary);
            margin-top: 4px;
        }
        .phi-indicator {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 14px;
            background: rgba(239, 68, 68, 0.1);
            border: 1px solid rgba(239, 68, 68, 0.2);
            border-radius: 8px;
            font-size: 12px;
            color: #f87171;
        }
        .phi-indicator.safe {
            background: rgba(16, 185, 129, 0.1);
            border-color: rgba(16, 185, 129, 0.2);
            color: #34d399;
        }
        .security-checklist {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .security-check-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 16px;
            background: var(--bg-tertiary);
            border-radius: 10px;
        }
        .security-check-icon {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .security-check-icon.pass { background: rgba(16, 185, 129, 0.1); color: #10b981; }
        .security-check-icon.warn { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
        .security-check-icon.fail { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
        .security-check-text { flex: 1; font-size: 14px; color: var(--text-primary); }
        .security-check-status {
            font-size: 12px;
            font-weight: 500;
        }
        .security-check-status.pass { color: #10b981; }
        .security-check-status.warn { color: #f59e0b; }
        .security-check-status.fail { color: #ef4444; }

        .warning-banner {
            display: flex; align-items: center; justify-content: center; gap: 12px;
            padding: 12px 24px; background: rgba(245, 158, 11, 0.1);
            border-bottom: 1px solid rgba(245, 158, 11, 0.2);
        }
        .warning-banner i { color: #f59e0b; }
        .warning-banner span { color: #fbbf24; font-size: 14px; }
        .warning-banner code { background: rgba(0,0,0,0.3); padding: 2px 8px; border-radius: 4px; color: #f87171; font-family: monospace; }
        .retry-btn {
            display: flex; align-items: center; gap: 6px; padding: 6px 12px;
            background: transparent; border: 1px solid rgba(245, 158, 11, 0.3);
            border-radius: 6px; color: #fbbf24; font-size: 13px; cursor: pointer;
        }

        /* VIEW CONTAINER */
        .view-container { flex: 1; overflow-y: auto; padding: 24px 32px; background: var(--bg-primary); }
        .view { display: none; }
        .view.active { display: block; }

        /* WORKSPACE VIEW */
        .workspace-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; }
        .workspace-title h1 { font-size: 28px; font-weight: 600; margin-bottom: 4px; color: var(--text-primary); }
        .workspace-title p { color: var(--text-muted); font-size: 14px; }
        .workspace-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
        .project-dropdown {
            display: flex; align-items: center; gap: 8px; padding: 10px 16px;
            background: var(--bg-tertiary); border: 1px solid var(--border-color);
            border-radius: 8px; color: var(--text-primary); font-size: 14px; cursor: pointer;
        }
        .doc-count { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 14px; }
        .doc-count i { color: #818cf8; }
        .icon-btn {
            width: 36px; height: 36px; background: transparent; border: none;
            color: var(--text-muted); cursor: pointer; border-radius: 6px;
            display: flex; align-items: center; justify-content: center;
        }
        .icon-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
        .action-btn {
            display: flex; align-items: center; gap: 8px; padding: 10px 16px;
            background: transparent; border: 1px solid rgba(99, 102, 241, 0.5);
            border-radius: 8px; color: #818cf8; font-size: 14px; cursor: pointer;
        }
        .action-btn:hover { background: rgba(99, 102, 241, 0.1); }

        .chat-container { max-width: 900px; margin: 0 auto; }
        .message { display: flex; gap: 16px; margin-bottom: 24px; }
        .message-avatar {
            width: 40px; height: 40px;
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
        }
        .message-avatar i { color: white; font-size: 18px; }
        .message-content {
            flex: 1; background: var(--bg-card);
            border: 1px solid var(--border-color); border-radius: 12px; padding: 16px 20px;
            box-shadow: var(--shadow-sm);
        }
        .message-text { font-size: 15px; line-height: 1.6; color: var(--text-secondary); margin-bottom: 12px; }
        .message-meta { font-size: 13px; color: var(--text-muted); }
        .message-meta div { margin-bottom: 4px; }
        .meta-link { color: #818cf8; text-decoration: none; margin-right: 16px; }
        .meta-link:hover { text-decoration: underline; }

        .chat-input-area {
            position: fixed; bottom: 0; left: 220px; right: 0; padding: 20px 32px;
            background: linear-gradient(transparent, var(--bg-secondary) 20%);
        }
        .chat-input-wrapper {
            display: flex; align-items: center; gap: 12px; max-width: 900px; margin: 0 auto;
            background: var(--bg-card); border: 1px solid var(--border-color);
            border-radius: 16px; padding: 12px 16px;
            box-shadow: var(--shadow-md);
        }
        .attach-btn { width: 40px; height: 40px; background: transparent; border: none; color: var(--text-muted); cursor: pointer; }
        .chat-input { flex: 1; background: transparent; border: none; color: var(--text-primary); font-size: 15px; outline: none; }
        .chat-input::placeholder { color: var(--text-muted); }
        .send-hint { color: var(--text-muted); font-size: 12px; margin-right: 12px; }
        .send-btn {
            display: flex; align-items: center; gap: 8px; padding: 10px 20px;
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            border: none; border-radius: 10px; color: white; font-size: 14px; font-weight: 500; cursor: pointer;
        }

        /* FLOATING BUTTONS */
        .floating-buttons {
            position: fixed; right: 24px; top: 50%; transform: translateY(-50%);
            display: flex; flex-direction: column; gap: 12px; z-index: 50;
        }
        .floating-btn {
            width: 48px; height: 48px; background: rgba(99, 102, 241, 0.9);
            border: none; border-radius: 12px; color: white; font-size: 18px;
            cursor: pointer; display: flex; align-items: center; justify-content: center;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        }
        .floating-btn.secondary { background: rgba(168, 85, 247, 0.9); }

        /* OTHER VIEWS - GENERIC STYLING */
        .view-header { margin-bottom: 32px; }
        .view-header h1 { font-size: 28px; font-weight: 600; margin-bottom: 8px; color: var(--text-primary); }
        .view-header p { color: var(--text-muted); font-size: 14px; }

        .cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-bottom: 32px; }
        .card {
            background: var(--bg-card); backdrop-filter: blur(24px);
            border: 1px solid var(--border-color); border-radius: 16px; padding: 24px;
            box-shadow: var(--shadow-sm);
            transition: background 0.3s ease, border-color 0.3s ease;
        }
        .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
        .card-title { font-size: 16px; font-weight: 600; color: var(--text-primary); }
        .card-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
        .card-icon.purple { background: rgba(168, 85, 247, 0.2); color: #c084fc; }
        .card-icon.blue { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }
        .card-icon.green { background: rgba(16, 185, 129, 0.2); color: #34d399; }
        .card-icon.orange { background: rgba(249, 115, 22, 0.2); color: #fb923c; }
        .card-icon.red { background: rgba(239, 68, 68, 0.2); color: #f87171; }
        .card-icon.cyan { background: rgba(6, 182, 212, 0.2); color: #22d3ee; }
        .card-value { font-size: 32px; font-weight: 700; margin-bottom: 4px; color: var(--text-primary); }
        .card-label { font-size: 13px; color: var(--text-muted); }
        .card-trend { font-size: 12px; margin-top: 8px; }
        .card-trend.up { color: #34d399; }
        .card-trend.down { color: #f87171; }

        .section-title { font-size: 18px; font-weight: 600; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; color: var(--text-primary); }

        .tier-card {
            background: var(--bg-card); border: 1px solid var(--border-color);
            border-radius: 12px; padding: 20px; margin-bottom: 16px;
            box-shadow: var(--shadow-sm);
        }
        .tier-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
        .tier-name { font-size: 16px; font-weight: 600; color: var(--text-primary); }
        .tier-status { padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 500; }
        .tier-status.online { background: rgba(16, 185, 129, 0.2); color: #34d399; }
        .tier-progress { height: 8px; background: var(--bg-tertiary); border-radius: 4px; overflow: hidden; margin: 12px 0; }
        .tier-progress-fill { height: 100%; border-radius: 4px; transition: width 0.3s; }
        .tier-progress-fill.hot { background: linear-gradient(90deg, #ef4444, #f97316); }
        .tier-progress-fill.warm { background: linear-gradient(90deg, #f59e0b, #eab308); }
        .tier-progress-fill.cold { background: linear-gradient(90deg, #3b82f6, #6366f1); }
        .tier-stats { display: flex; gap: 24px; font-size: 13px; color: var(--text-muted); }

        .agent-card {
            background: var(--bg-card); border: 1px solid var(--border-color);
            border-radius: 12px; padding: 20px;
            box-shadow: var(--shadow-sm);
        }
        .agent-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
        .agent-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
        .agent-name { font-size: 15px; font-weight: 600; }
        .agent-status { font-size: 12px; color: #64748b; }
        .agent-efficiency { font-size: 24px; font-weight: 700; color: #34d399; }

        .provider-card {
            background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
            border-radius: 12px; padding: 20px;
        }
        .provider-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
        .provider-logo { width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
        .provider-name { font-size: 15px; font-weight: 600; }
        .provider-model { font-size: 12px; color: #64748b; }
        .provider-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
        .provider-stat-value { font-size: 16px; font-weight: 600; }
        .provider-stat-label { font-size: 11px; color: #64748b; }

        .activity-item {
            display: flex; align-items: flex-start; gap: 12px; padding: 12px 0;
            border-bottom: 1px solid rgba(255,255,255,0.05);
        }
        .activity-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .activity-content { flex: 1; }
        .activity-text { font-size: 14px; margin-bottom: 4px; }
        .activity-time { font-size: 12px; color: #64748b; }

        /* KB PANEL */
        .kb-panel {
            position: fixed; top: 0; right: -400px; width: 400px; height: 100vh;
            background: var(--bg-secondary); border-left: 1px solid var(--border-color);
            z-index: 100; display: flex; flex-direction: column; transition: right 0.3s ease;
            box-shadow: var(--shadow-lg);
        }
        .kb-panel.open { right: 0; }
        .kb-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid var(--border-color); }
        .kb-close { width: 32px; height: 32px; background: transparent; border: none; color: var(--text-muted); cursor: pointer; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
        .kb-section { padding: 20px 24px; border-bottom: 1px solid var(--border-color); }
        .kb-label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-bottom: 8px; }
        .kb-select { width: 100%; padding: 10px 12px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-primary); font-size: 14px; }
        .kb-actions { display: flex; gap: 12px; padding: 20px 24px; }
        .kb-btn { flex: 1; padding: 12px; border: none; border-radius: 10px; font-size: 14px; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; }
        .kb-btn.upload { background: linear-gradient(135deg, #6366f1, #8b5cf6); color: white; }
        .kb-btn.add { background: linear-gradient(135deg, #ec4899, #f43f5e); color: white; }
        .kb-search { display: flex; align-items: center; gap: 10px; margin: 0 24px 16px; padding: 10px 14px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 8px; }
        .kb-search i { color: var(--text-muted); }
        .kb-search input { flex: 1; background: transparent; border: none; color: var(--text-primary); font-size: 14px; outline: none; }
        .kb-filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 24px 20px; }
        .kb-filter { padding: 6px 12px; background: var(--bg-tertiary); border: none; border-radius: 6px; color: var(--text-muted); font-size: 13px; cursor: pointer; }
        .kb-filter.active { background: rgba(99, 102, 241, 0.2); color: #818cf8; }
        .kb-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px; text-align: center; }
        .kb-empty-icon { width: 64px; height: 64px; background: var(--bg-tertiary); border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
        .kb-empty-icon i { font-size: 28px; color: var(--text-muted); }
        .kb-empty h3 { font-size: 16px; margin-bottom: 8px; color: var(--text-primary); }
        .kb-empty p { font-size: 13px; color: var(--text-muted); }

        .overlay {
            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
            background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); z-index: 90;
            opacity: 0; pointer-events: none; transition: opacity 0.3s;
        }
        .overlay.open { opacity: 1; pointer-events: auto; }

        /* MODAL */
        .modal-overlay {
            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
            background: rgba(0,0,0,0.7); backdrop-filter: blur(8px); z-index: 200;
            display: none; align-items: center; justify-content: center;
        }
        .modal-overlay.open { display: flex; }
        .modal { width: 100%; max-width: 480px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 16px; padding: 32px; box-shadow: var(--shadow-lg); }
        .modal-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
        .modal-title { font-size: 22px; font-weight: 600; color: var(--text-primary); }
        .modal-close { width: 32px; height: 32px; background: transparent; border: none; color: var(--text-muted); cursor: pointer; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
        .modal-desc { color: var(--text-muted); font-size: 14px; line-height: 1.6; margin-bottom: 24px; }
        .form-group { margin-bottom: 24px; }
        .form-label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 8px; color: var(--text-primary); }
        .form-label span { color: #f43f5e; }
        .form-input { width: 100%; padding: 14px 16px; background: var(--bg-tertiary); border: 2px solid var(--border-color); border-radius: 10px; color: var(--text-primary); font-size: 15px; outline: none; }
        .form-input:focus { border-color: #6366f1; }
        .modal-actions { display: flex; gap: 12px; }
        .modal-btn { flex: 1; padding: 14px; border-radius: 10px; font-size: 15px; font-weight: 500; cursor: pointer; }
        .modal-btn.cancel { background: var(--bg-tertiary); border: 1px solid var(--border-color); color: var(--text-secondary); }
        .modal-btn.create { background: linear-gradient(135deg, #6366f1, #8b5cf6); border: none; color: white; }

        /* PAYMENT SCHEDULE PANEL */
        .payment-panel {
            position: fixed; top: 0; right: -520px; width: 520px; height: 100vh;
            background: var(--bg-secondary); border-left: 1px solid var(--border-color);
            z-index: 100; display: flex; flex-direction: column; transition: right 0.3s ease;
            box-shadow: var(--shadow-lg);
        }
        .payment-panel.open { right: 0; }
        .payment-header {
            display: flex; justify-content: space-between; align-items: center;
            padding: 20px 24px; border-bottom: 1px solid var(--border-color);
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(168, 85, 247, 0.1));
        }
        .payment-header h2 { font-size: 18px; font-weight: 700; color: var(--text-primary); }
        .payment-header h2 i { color: #6366f1; margin-right: 8px; }
        .payment-close { width: 32px; height: 32px; background: transparent; border: none; color: var(--text-muted); cursor: pointer; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
        .payment-close:hover { background: var(--bg-hover); color: var(--text-primary); }
        .payment-summary {
            padding: 20px 24px; border-bottom: 1px solid var(--border-color);
            background: var(--bg-tertiary);
        }
        .payment-project-name { font-size: 16px; font-weight: 600; color: var(--accent-primary); margin-bottom: 16px; }
        .payment-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
        .payment-stat { text-align: center; padding: 12px; background: var(--bg-card); border-radius: 10px; border: 1px solid var(--border-color); }
        .payment-stat-value { font-size: 20px; font-weight: 700; color: var(--text-primary); }
        .payment-stat-value.green { color: #10b981; }
        .payment-stat-label { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
        .payment-content { flex: 1; overflow-y: auto; padding: 20px 24px; }
        .payment-phase {
            margin-bottom: 24px; padding-bottom: 20px;
            border-bottom: 1px solid var(--border-color);
        }
        .payment-phase:last-child { border-bottom: none; }
        .phase-header {
            display: flex; align-items: center; gap: 12px;
            margin-bottom: 16px; padding: 12px 16px;
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(168, 85, 247, 0.05));
            border-radius: 10px; border-left: 4px solid #6366f1;
        }
        .phase-icon { font-size: 20px; }
        .phase-title { font-size: 14px; font-weight: 700; color: var(--text-primary); }
        .phase-subtitle { font-size: 12px; color: var(--text-muted); }
        .week-item {
            display: flex; align-items: flex-start; gap: 16px;
            padding: 14px 16px; margin-bottom: 8px;
            background: var(--bg-card); border: 1px solid var(--border-color);
            border-radius: 10px; transition: all 0.2s;
        }
        .week-item:hover { border-color: var(--accent-primary); box-shadow: var(--shadow-sm); }
        .week-number {
            min-width: 48px; height: 48px;
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            border-radius: 10px; display: flex; flex-direction: column;
            align-items: center; justify-content: center; color: white;
        }
        .week-number span:first-child { font-size: 10px; font-weight: 500; opacity: 0.8; }
        .week-number span:last-child { font-size: 16px; font-weight: 700; }
        .week-details { flex: 1; }
        .week-phase { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
        .week-focus { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
        .week-amount {
            text-align: right; min-width: 80px;
        }
        .week-amount-value { font-size: 16px; font-weight: 700; color: #10b981; }
        .milestone-badge {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 4px 10px; margin-top: 8px;
            background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.2);
            border-radius: 6px; font-size: 11px; color: #10b981;
        }
        .milestone-badge i { font-size: 10px; }
        .deliverables-list { margin-top: 10px; padding-left: 16px; }
        .deliverables-list li {
            font-size: 11px; color: var(--text-muted);
            margin-bottom: 4px; list-style-type: none; position: relative;
        }
        .deliverables-list li::before {
            content: '✓'; color: #10b981; position: absolute; left: -16px;
        }

        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: rgba(51, 65, 85, 0.3); }
        ::-webkit-scrollbar-thumb { background: rgba(99, 102, 241, 0.5); border-radius: 3px; }

        /* MEMORY DASHBOARD STYLES */
        .memory-hero {
            display: flex; justify-content: space-between; align-items: flex-start;
            padding: 32px; background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; margin-bottom: 24px;
        }
        .memory-hero-title {
            font-size: 36px; font-weight: 700;
            background: linear-gradient(135deg, #a855f7, #ec4899);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            background-clip: text; margin-bottom: 8px;
        }
        .memory-hero-subtitle { color: #94a3b8; font-size: 16px; margin-bottom: 20px; }
        .memory-hero-badges { display: flex; gap: 12px; }
        .hero-badge {
            display: inline-flex; align-items: center; gap: 8px;
            padding: 8px 16px; border-radius: 20px; font-size: 14px; font-weight: 500;
        }
        .hero-badge.green { background: rgba(16, 185, 129, 0.15); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.3); }
        .hero-badge.purple { background: rgba(168, 85, 247, 0.15); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.3); }
        .badge-dot { width: 8px; height: 8px; background: #10b981; border-radius: 50%; }
        .memory-hero-efficiency { text-align: right; }
        .efficiency-big { font-size: 48px; font-weight: 700; color: #94a3b8; }
        .efficiency-label-big { font-size: 14px; color: #64748b; }

        .memory-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px; }
        .metric-card {
            position: relative; background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 24px;
        }
        .metric-value { font-size: 32px; font-weight: 700; margin-bottom: 4px; }
        .metric-label { font-size: 14px; color: #94a3b8; margin-bottom: 8px; }
        .metric-trend { color: #10b981; font-size: 12px; }
        .metric-icon {
            position: absolute; top: 24px; right: 24px;
            width: 48px; height: 48px; border-radius: 12px;
            display: flex; align-items: center; justify-content: center; font-size: 20px;
        }
        .metric-icon.purple { background: rgba(168, 85, 247, 0.2); color: #c084fc; }
        .metric-icon.blue { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }
        .metric-icon.green { background: rgba(16, 185, 129, 0.2); color: #34d399; }
        .metric-icon.orange { background: rgba(249, 115, 22, 0.2); color: #fb923c; }

        .tier-section-title {
            font-size: 20px; font-weight: 600; margin-bottom: 20px;
            display: flex; align-items: center; gap: 12px;
        }
        .tier-section-title i { color: #818cf8; }
        .tier-cards-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
        .tier-card-new {
            background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
            border-radius: 16px; padding: 24px;
        }
        .tier-card-header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 12px; }
        .tier-icon {
            width: 48px; height: 48px; border-radius: 12px;
            display: flex; align-items: center; justify-content: center; font-size: 20px;
        }
        .tier-icon.hot { background: linear-gradient(135deg, #ef4444, #f97316); color: white; }
        .tier-icon.warm { background: linear-gradient(135deg, #f59e0b, #eab308); color: white; }
        .tier-icon.cold { background: linear-gradient(135deg, #3b82f6, #06b6d4); color: white; }
        .tier-info { flex: 1; }
        .tier-name-new { font-size: 18px; font-weight: 600; }
        .tier-tech { font-size: 13px; color: #64748b; }
        .tier-health { text-align: right; }
        .health-label { font-size: 11px; color: #64748b; margin-bottom: 4px; }
        .health-value { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
        .health-dot { width: 8px; height: 8px; border-radius: 50%; }
        .health-dot.green { background: #10b981; }
        .tier-desc { font-size: 13px; color: #64748b; margin-bottom: 16px; }
        .tier-util-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 13px; color: #94a3b8; }
        .util-value.cyan { color: #22d3ee; }
        .tier-util-bar { height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden; margin-bottom: 20px; }
        .tier-util-fill { height: 100%; border-radius: 3px; }
        .tier-stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
        .tier-stat { text-align: center; }
        .stat-value { font-size: 18px; font-weight: 600; margin-bottom: 2px; }
        .stat-value.cyan { color: #22d3ee; }
        .stat-label { font-size: 12px; color: #94a3b8; }
        .stat-sub { font-size: 11px; color: #64748b; }
        .tier-trend-section { margin-bottom: 16px; }
        .trend-label { font-size: 12px; color: #64748b; margin-bottom: 8px; }
        .trend-chart {
            position: relative; height: 40px; background: rgba(0,0,0,0.2);
            border-radius: 8px; border: 1px solid rgba(255,255,255,0.05);
        }
        .trend-dot {
            position: absolute; width: 8px; height: 8px; border-radius: 50%;
            transform: translate(-50%, -50%);
        }
        .trend-dot.orange { background: #f97316; }
        .trend-dot.yellow { background: #eab308; }
        .trend-dot.blue { background: #3b82f6; }
        .tier-footer { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
        .tier-warning { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #94a3b8; }
        .warning-dot { width: 8px; height: 8px; background: #eab308; border-radius: 50%; }
        .tier-status-healthy { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #10b981; }
        .tier-capacity { font-size: 13px; color: #64748b; }
        .tier-expand {
            display: flex; align-items: center; justify-content: center; gap: 8px;
            color: #818cf8; font-size: 14px; cursor: pointer; padding-top: 12px;
            border-top: 1px solid rgba(255,255,255,0.1);
        }
        .tier-expand:hover { color: #a5b4fc; }

        /* AI AGENTS STYLES */
        .agents-section-title {
            font-size: 24px; font-weight: 700; margin-bottom: 24px;
            display: flex; align-items: center; gap: 12px; color: white;
        }
        .agents-section-title i { color: #34d399; }
        .agents-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
        @media (min-width: 1280px) { .agents-grid { grid-template-columns: repeat(4, 1fr); } }
        .agent-card-new {
            background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
            border-radius: 16px; padding: 24px; transition: all 0.3s;
        }
        .agent-card-new:hover { background: rgba(255,255,255,0.08); }
        .agent-card-new.purple { border-color: rgba(168, 85, 247, 0.3); }
        .agent-card-new.cyan { border-color: rgba(6, 182, 212, 0.3); }
        .agent-card-new.green { border-color: rgba(16, 185, 129, 0.3); }
        .agent-card-new.pink { border-color: rgba(244, 63, 94, 0.3); }
        .agent-card-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
        .agent-icon-new {
            width: 48px; height: 48px; border-radius: 12px;
            display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0;
        }
        .agent-icon-new.purple { background: linear-gradient(135deg, #a855f7, #6366f1); color: white; }
        .agent-icon-new.cyan { background: linear-gradient(135deg, #06b6d4, #3b82f6); color: white; }
        .agent-icon-new.green { background: linear-gradient(135deg, #10b981, #22c55e); color: white; }
        .agent-icon-new.pink { background: linear-gradient(135deg, #ec4899, #f43f5e); color: white; }
        .agent-info { flex: 1; min-width: 0; }
        .agent-name-new { font-size: 16px; font-weight: 600; color: white; margin-bottom: 2px; }
        .agent-desc { font-size: 13px; color: #94a3b8; }
        .agent-status-badge {
            display: flex; align-items: center; gap: 6px;
            font-size: 12px; color: #94a3b8; white-space: nowrap;
        }
        .status-dot { width: 10px; height: 10px; border-radius: 50%; }
        .status-dot.active { background: #10b981; animation: pulse 2s infinite; }
        .status-dot.idle { background: #64748b; }
        @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
        .agent-capabilities { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
        .capability-tag {
            padding: 4px 10px; background: rgba(255,255,255,0.08);
            border-radius: 4px; font-size: 11px; color: #94a3b8;
        }
        .agent-efficiency-section { margin-bottom: 16px; }
        .efficiency-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 13px; color: #94a3b8; }
        .efficiency-value { font-size: 18px; font-weight: 700; }
        .efficiency-value.purple { color: #a855f7; }
        .efficiency-value.cyan { color: #06b6d4; }
        .efficiency-value.green { color: #10b981; }
        .efficiency-value.pink { color: #f43f5e; }
        .efficiency-bar { height: 10px; background: rgba(255,255,255,0.1); border-radius: 5px; overflow: hidden; }
        .efficiency-fill { height: 100%; border-radius: 5px; transition: width 1s ease-out; }
        .efficiency-fill.purple { background: linear-gradient(90deg, #a855f7, #6366f1); }
        .efficiency-fill.cyan { background: linear-gradient(90deg, #06b6d4, #3b82f6); }
        .efficiency-fill.green { background: linear-gradient(90deg, #10b981, #22c55e); }
        .efficiency-fill.pink { background: linear-gradient(90deg, #ec4899, #f43f5e); }
        .agent-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 16px; }
        .agent-stat { text-align: center; }
        .agent-stat .stat-value { font-size: 20px; font-weight: 700; margin-bottom: 2px; }
        .agent-stat .stat-value.purple { color: #a855f7; }
        .agent-stat .stat-value.cyan { color: #06b6d4; }
        .agent-stat .stat-value.green { color: #10b981; }
        .agent-stat .stat-value.pink { color: #f43f5e; }
        .agent-stat .stat-label { font-size: 11px; color: #94a3b8; }
        .agent-stat .stat-sub { font-size: 10px; color: #64748b; }
        .agent-trend { margin-bottom: 16px; }
        .trend-chart-small {
            height: 40px; background: rgba(0,0,0,0.2); border-radius: 8px;
            border: 1px solid rgba(255,255,255,0.05); position: relative; overflow: hidden;
        }
        .trend-line {
            position: absolute; bottom: 50%; left: 10%; right: 10%; height: 2px;
            transform: translateY(50%);
        }
        .trend-line.purple { background: linear-gradient(90deg, transparent, #a855f7, transparent); }
        .trend-line.cyan { background: linear-gradient(90deg, transparent, #06b6d4, transparent); }
        .trend-line.green { background: linear-gradient(90deg, transparent, #10b981, transparent); }
        .trend-line.pink { background: linear-gradient(90deg, transparent, #f43f5e, transparent); }
        .agent-timestamps {
            display: flex; justify-content: space-between;
            font-size: 11px; color: #64748b; margin-bottom: 16px;
        }
        .agent-expand {
            display: flex; align-items: center; justify-content: center; gap: 8px;
            padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.1);
            font-size: 13px; cursor: pointer; transition: color 0.2s;
        }
        .agent-card-new.purple .agent-expand { color: #a855f7; }
        .agent-card-new.cyan .agent-expand { color: #06b6d4; }
        .agent-card-new.green .agent-expand { color: #10b981; }
        .agent-card-new.pink .agent-expand { color: #f43f5e; }
        .agent-expand:hover { color: white; }

        /* CONTEXT ANALYTICS STYLES */
        .context-layout { display: grid; grid-template-columns: 1fr 2fr; gap: 24px; }
        @media (max-width: 1024px) { .context-layout { grid-template-columns: 1fr; } }
        .context-intelligence-card {
            background: rgba(255,255,255,0.05); border: 1px solid rgba(99, 102, 241, 0.3);
            border-radius: 16px; padding: 24px;
        }
        .ci-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 24px; }
        .ci-icon {
            width: 48px; height: 48px; border-radius: 12px;
            background: linear-gradient(135deg, #6366f1, #a855f7);
            display: flex; align-items: center; justify-content: center;
            color: white; font-size: 20px;
        }
        .ci-info { flex: 1; }
        .ci-info h3 { font-size: 18px; font-weight: 600; color: white; margin-bottom: 4px; }
        .ci-info p { font-size: 13px; color: #94a3b8; }
        .ci-budget { text-align: right; }
        .budget-label { font-size: 11px; color: #64748b; }
        .budget-value { font-size: 14px; font-weight: 600; color: white; }
        .ci-section { margin-bottom: 24px; }
        .ci-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 13px; color: #94a3b8; }
        .ci-value { font-size: 20px; font-weight: 700; }
        .ci-value.indigo { color: #818cf8; }
        .ci-value.purple { color: #a855f7; }
        .ci-value-small { font-size: 14px; color: #818cf8; }
        .ci-bar { height: 8px; background: rgba(255,255,255,0.1); border-radius: 4px; overflow: hidden; }
        .ci-fill { height: 100%; border-radius: 4px; }
        .ci-fill.indigo { background: linear-gradient(90deg, #6366f1, #a855f7); }
        .ci-fill.green { background: linear-gradient(90deg, #10b981, #22c55e); }
        .ci-fill.purple { background: linear-gradient(90deg, #a855f7, #ec4899); }
        .ci-sub-row { display: flex; justify-content: space-between; font-size: 11px; color: #64748b; margin-top: 4px; }
        .ci-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 16px; }
        .ci-stat { text-align: center; padding: 12px; background: rgba(255,255,255,0.05); border-radius: 12px; }
        .ci-stat-label { font-size: 11px; color: #64748b; margin-bottom: 4px; }
        .ci-stat-value { font-size: 18px; font-weight: 700; }
        .ci-stat-value.indigo { color: #818cf8; }
        .ci-stat-value.green { color: #34d399; }
        .ci-footer { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
        .ci-footer-label { font-size: 11px; color: #64748b; }
        .ci-footer-value { font-size: 13px; color: #94a3b8; }
        .ci-network { font-size: 12px; color: #64748b; display: flex; align-items: center; gap: 6px; }
        .ci-status {
            display: flex; align-items: center; gap: 8px;
            padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.1);
            font-size: 12px; color: #64748b;
        }
        .ci-status .status-dot.green { width: 8px; height: 8px; }
        .ci-badge { margin-left: auto; font-size: 11px; color: #64748b; }
        .context-charts { display: flex; flex-direction: column; gap: 24px; }
        .chart-card {
            background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
            border-radius: 16px; padding: 24px;
        }
        .chart-card h3 { font-size: 18px; font-weight: 600; color: white; margin-bottom: 16px; }
        .chart-placeholder {
            height: 200px; display: flex; flex-direction: column;
            align-items: center; justify-content: center; color: #64748b;
        }
        .chart-placeholder i { font-size: 48px; margin-bottom: 12px; opacity: 0.5; }
        .chart-placeholder p { font-size: 14px; }

        /* PROVIDER ROUTING STYLES */
        .routing-section-title {
            font-size: 24px; font-weight: 700; margin-bottom: 24px;
            display: flex; align-items: center; gap: 12px; color: white;
        }
        .routing-section-title i { color: #34d399; }
        .routing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
        @media (max-width: 1024px) { .routing-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 640px) { .routing-grid { grid-template-columns: 1fr; } }
        .routing-card {
            background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
            border-radius: 16px; padding: 24px;
        }
        .routing-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
        .routing-header h3 { font-size: 18px; font-weight: 600; color: white; }
        .routing-status .status-dot { width: 12px; height: 12px; }
        .routing-stats { display: flex; flex-direction: column; gap: 12px; }
        .routing-stat { display: flex; justify-content: space-between; align-items: center; }
        .routing-label { font-size: 13px; color: #94a3b8; }
        .routing-value { font-size: 14px; font-weight: 600; color: white; }
        .routing-value.green { color: #34d399; }
        .routing-value.blue { color: #60a5fa; }

        /* AI AGENTS PAGE HEADER */
        .agents-page-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; }
        .agents-title-section h1 { font-size: 28px; font-weight: 700; color: white; margin-bottom: 4px; }
        .agents-title-section p { font-size: 14px; color: #94a3b8; }
        .setup-agent-btn {
            padding: 12px 20px; background: linear-gradient(135deg, #ec4899, #f43f5e);
            border: none; border-radius: 12px; color: white; font-weight: 600; font-size: 14px;
            cursor: pointer; display: flex; align-items: center; gap: 8px; transition: all 0.2s;
        }
        .setup-agent-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(236, 72, 153, 0.3); }

        /* AI AGENTS TABS */
        .agents-tabs { display: flex; gap: 8px; margin-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 16px; }
        .agents-tab {
            padding: 10px 16px; background: transparent; border: none; border-radius: 8px;
            color: #94a3b8; font-size: 14px; font-weight: 500; cursor: pointer;
            display: flex; align-items: center; gap: 8px; transition: all 0.2s;
        }
        .agents-tab:hover { color: white; background: rgba(255,255,255,0.05); }
        .agents-tab.active { color: white; background: rgba(99, 102, 241, 0.2); border-bottom: 2px solid #6366f1; }
        .agents-tab-content { display: none; }
        .agents-tab-content.active { display: block; }

        /* AGENT OFFLINE BADGE */
        .agent-offline-badge { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #64748b; }
        .offline-dot { width: 8px; height: 8px; background: #64748b; border-radius: 50%; }
        .trend-dot-single { width: 8px; height: 8px; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
        .trend-dot-single.purple { background: #a855f7; }
        .trend-dot-single.cyan { background: #06b6d4; }
        .trend-dot-single.green { background: #10b981; }
        .trend-dot-single.pink { background: #ec4899; }

        /* CONFIGURATION TAB */
        .config-panel { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 24px; margin-bottom: 24px; }
        .config-panel h2 { font-size: 20px; font-weight: 600; color: white; margin-bottom: 8px; }
        .config-panel p { font-size: 14px; color: #94a3b8; margin-bottom: 20px; }
        .agent-selector-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
        .agent-selector {
            display: flex; align-items: center; gap: 12px; padding: 16px;
            background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1);
            border-radius: 12px; cursor: pointer; transition: all 0.2s;
        }
        .agent-selector:hover { background: rgba(255,255,255,0.08); }
        .agent-selector.active { background: rgba(99, 102, 241, 0.15); border-color: rgba(99, 102, 241, 0.5); }
        .selector-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; }
        .selector-icon.purple { background: linear-gradient(135deg, #a855f7, #6366f1); color: white; }
        .selector-icon.cyan { background: linear-gradient(135deg, #06b6d4, #3b82f6); color: white; }
        .selector-icon.green { background: linear-gradient(135deg, #10b981, #22c55e); color: white; }
        .selector-icon.pink { background: linear-gradient(135deg, #ec4899, #f43f5e); color: white; }
        .selector-info { display: flex; flex-direction: column; }
        .selector-info span:first-child { font-size: 13px; font-weight: 500; color: white; }
        .selector-eff { font-size: 11px; color: #64748b; }
        .config-presets { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 24px; margin-bottom: 24px; }
        .config-presets h3 { font-size: 16px; font-weight: 600; color: white; margin-bottom: 16px; }
        .preset-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
        .preset-option {
            display: flex; align-items: center; gap: 16px; padding: 20px;
            background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1);
            border-radius: 12px; cursor: pointer; transition: all 0.2s;
        }
        .preset-option:hover { background: rgba(255,255,255,0.08); }
        .preset-option.active { background: rgba(168, 85, 247, 0.15); border-color: rgba(168, 85, 247, 0.5); }
        .preset-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
        .preset-icon.blue { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }
        .preset-icon.purple { background: rgba(168, 85, 247, 0.2); color: #c084fc; }
        .preset-icon.orange { background: rgba(249, 115, 22, 0.2); color: #fb923c; }
        .preset-name { font-size: 15px; font-weight: 600; color: white; margin-bottom: 4px; }
        .preset-desc { font-size: 12px; color: #94a3b8; }
        .config-parameters { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 24px; }
        .param-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
        .param-header h3 { font-size: 16px; font-weight: 600; color: white; }
        .impact-toggle { font-size: 13px; color: #94a3b8; display: flex; align-items: center; gap: 8px; cursor: pointer; }
        .impact-toggle input { accent-color: #6366f1; }
        .param-item { padding: 16px 0; border-top: 1px solid rgba(255,255,255,0.1); }
        .param-label { font-size: 14px; font-weight: 500; color: white; margin-bottom: 4px; }
        .param-unit { font-size: 12px; color: #64748b; font-weight: 400; }
        .param-desc { font-size: 12px; color: #94a3b8; margin-bottom: 16px; }
        .param-slider { width: 100%; height: 6px; -webkit-appearance: none; background: rgba(255,255,255,0.1); border-radius: 3px; outline: none; }
        .param-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; background: white; border-radius: 50%; cursor: pointer; }
        .param-value { font-size: 13px; color: white; margin-top: 8px; }
        .param-impact { font-size: 11px; color: #64748b; margin-top: 8px; }

        /* COORDINATION TAB */
        .coordination-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; }
        .coordination-header h2 { font-size: 20px; font-weight: 600; color: white; margin-bottom: 8px; }
        .coordination-header p { font-size: 14px; color: #94a3b8; margin-bottom: 12px; }
        .coord-legend { display: flex; gap: 20px; font-size: 12px; color: #94a3b8; }
        .coord-legend span { display: flex; align-items: center; gap: 6px; }
        .coord-stats { display: flex; gap: 24px; }
        .coord-stat { text-align: right; }
        .coord-stat-value { font-size: 28px; font-weight: 700; }
        .coord-stat-value.cyan { color: #06b6d4; }
        .coord-stat-value.green { color: #10b981; }
        .coord-stat-value.white { color: white; }
        .coord-stat-label { font-size: 11px; color: #64748b; }
        .coordination-visual {
            position: relative; height: 500px;
            background: var(--viz-bg);
            border: 1px solid var(--border-color); border-radius: 16px; overflow: hidden;
        }
        .coord-lines-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
        .coord-line { opacity: 0.8; }
        .pulse-line { animation: linePulse 3s ease-in-out infinite; }
        @keyframes linePulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
        .pulse-dot { animation: dotPulse 2s ease-in-out infinite; }
        @keyframes dotPulse { 0%, 100% { r: 5; opacity: 0.6; } 50% { r: 8; opacity: 1; } }
        .conflict-point { animation: conflictPulse 1s ease-in-out infinite; }
        @keyframes conflictPulse { 0%, 100% { r: 6; opacity: 0.8; } 50% { r: 10; opacity: 1; } }

        /* Agent Nodes */
        .agent-node {
            position: absolute; z-index: 10;
            display: flex; flex-direction: column; align-items: center;
            transform: translate(-50%, -50%);
        }
        .node-glow {
            position: absolute; width: 180px; height: 180px; border-radius: 50%;
            animation: glowPulse 3s ease-in-out infinite;
        }
        .agent-node.purple .node-glow { background: radial-gradient(circle, rgba(168, 85, 247, 0.4) 0%, transparent 70%); }
        .agent-node.cyan .node-glow { background: radial-gradient(circle, rgba(6, 182, 212, 0.4) 0%, transparent 70%); }
        .agent-node.green .node-glow { background: radial-gradient(circle, rgba(16, 185, 129, 0.4) 0%, transparent 70%); }
        .agent-node.pink .node-glow { background: radial-gradient(circle, rgba(236, 72, 153, 0.4) 0%, transparent 70%); }
        @keyframes glowPulse { 0%, 100% { transform: scale(0.9); opacity: 0.5; } 50% { transform: scale(1.1); opacity: 1; } }

        .node-inner {
            width: 120px; height: 120px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 32px; color: white; position: relative; z-index: 2;
            animation: nodeBreathe 4s ease-in-out infinite;
        }
        .agent-node.purple .node-inner {
            background: radial-gradient(circle at 30% 30%, rgba(192, 132, 252, 0.9), rgba(168, 85, 247, 0.7), rgba(124, 58, 237, 0.5));
            box-shadow: 0 0 40px rgba(168, 85, 247, 0.6), inset 0 0 30px rgba(255,255,255,0.1);
            border: 2px solid rgba(192, 132, 252, 0.5);
        }
        .agent-node.cyan .node-inner {
            background: radial-gradient(circle at 30% 30%, rgba(34, 211, 238, 0.9), rgba(6, 182, 212, 0.7), rgba(8, 145, 178, 0.5));
            box-shadow: 0 0 40px rgba(6, 182, 212, 0.6), inset 0 0 30px rgba(255,255,255,0.1);
            border: 2px solid rgba(34, 211, 238, 0.5);
        }
        .agent-node.green .node-inner {
            background: radial-gradient(circle at 30% 30%, rgba(52, 211, 153, 0.9), rgba(16, 185, 129, 0.7), rgba(5, 150, 105, 0.5));
            box-shadow: 0 0 40px rgba(16, 185, 129, 0.6), inset 0 0 30px rgba(255,255,255,0.1);
            border: 2px solid rgba(52, 211, 153, 0.5);
        }
        .agent-node.pink .node-inner {
            background: radial-gradient(circle at 30% 30%, rgba(244, 114, 182, 0.9), rgba(236, 72, 153, 0.7), rgba(219, 39, 119, 0.5));
            box-shadow: 0 0 40px rgba(236, 72, 153, 0.6), inset 0 0 30px rgba(255,255,255,0.1);
            border: 2px solid rgba(244, 114, 182, 0.5);
        }
        @keyframes nodeBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

        .node-label {
            margin-top: 12px; font-size: 14px; font-weight: 600; color: white;
            text-shadow: 0 2px 4px rgba(0,0,0,0.5); white-space: nowrap;
        }
        .node-eff { font-size: 12px; color: rgba(255,255,255,0.7); margin-top: 2px; }

        /* DECISION LOG TAB */
        .decision-filters { display: flex; gap: 16px; margin-bottom: 24px; }
        .decision-search {
            flex: 1; padding: 12px 16px; background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.1); border-radius: 8px;
            color: white; font-size: 14px; outline: none;
        }
        .decision-search::placeholder { color: #64748b; }
        .decision-search:focus { border-color: rgba(99, 102, 241, 0.5); }
        .decision-select {
            padding: 12px 16px; background: rgba(30, 41, 59, 0.9);
            border: 1px solid rgba(255,255,255,0.1); border-radius: 8px;
            color: white; font-size: 14px; min-width: 180px; cursor: pointer;
            -webkit-appearance: none; appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2394a3b8' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
            background-repeat: no-repeat; background-position: right 12px center; background-size: 20px;
            padding-right: 40px;
        }
        .decision-select:focus { outline: none; border-color: rgba(99, 102, 241, 0.5); }
        .decision-list { display: flex; flex-direction: column; gap: 8px; }
        .decision-item {
            display: flex; align-items: center; gap: 16px; padding: 16px 20px;
            background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
            border-radius: 12px; transition: background 0.2s;
        }
        .decision-item:hover { background: rgba(255,255,255,0.06); }
        .decision-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
        .decision-dot.pink { background: #ec4899; }
        .decision-dot.cyan { background: #06b6d4; }
        .decision-dot.green { background: #10b981; }
        .decision-dot.purple { background: #a855f7; }
        .decision-content { flex: 1; }
        .decision-agent { font-size: 15px; font-weight: 600; color: white; margin-bottom: 4px; }
        .decision-desc { font-size: 13px; color: #94a3b8; margin-bottom: 2px; }
        .decision-time { font-size: 11px; color: #64748b; }
        .decision-impact { padding: 4px 12px; border-radius: 4px; font-size: 11px; font-weight: 600; text-transform: lowercase; }
        .decision-impact.high { background: rgba(239, 68, 68, 0.2); color: #f87171; }
        .decision-impact.medium { background: rgba(234, 179, 8, 0.2); color: #fbbf24; }
        .decision-impact.low { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }

        /* ===== CONTEXT ANALYTICS PAGE STYLES ===== */
        .page-header-section {
            display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px;
        }
        .page-header-section h1 {
            font-size: 28px; font-weight: 700; color: white; margin-bottom: 4px;
        }
        .page-header-section p {
            font-size: 14px; color: #94a3b8;
        }

        /* Context Analytics Tabs */
        .context-tabs {
            display: flex; gap: 8px; margin-bottom: 24px;
            border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 16px;
        }
        .context-tab {
            padding: 10px 20px; background: transparent; border: none; border-radius: 8px;
            color: #94a3b8; font-size: 14px; font-weight: 500; cursor: pointer;
            display: flex; align-items: center; gap: 8px; transition: all 0.2s;
        }
        .context-tab:hover { color: white; background: rgba(255,255,255,0.05); }
        .context-tab.active {
            color: white; background: rgba(99, 102, 241, 0.2);
            border-bottom: 2px solid #6366f1;
        }
        .context-tab-content { display: none; }
        .context-tab-content.active { display: block; }

        /* Metrics Panel */
        .metrics-panel {
            background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1);
            border-radius: 16px; padding: 24px; margin-bottom: 24px;
        }
        .metrics-header {
            display: flex; justify-content: space-between; align-items: flex-start;
            margin-bottom: 20px; flex-wrap: wrap; gap: 20px;
        }
        .metrics-header h2 {
            font-size: 20px; font-weight: 600; color: white; margin-bottom: 4px;
        }
        .metrics-header p {
            font-size: 14px; color: #94a3b8; max-width: 500px;
        }
        .metrics-stats {
            display: flex; gap: 24px;
        }
        .metric-stat {
            text-align: center;
        }
        .metric-stat-value {
            font-size: 24px; font-weight: 700; color: white;
        }
        .metric-stat-value.green { color: #34d399; }
        .metric-stat-label {
            font-size: 12px; color: #64748b;
        }

        /* Metrics Controls */
        .metrics-controls {
            display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
            padding: 16px 20px; background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; margin-bottom: 20px;
        }
        .control-group {
            display: flex; flex-direction: column; gap: 6px;
        }
        .control-group label {
            font-size: 11px; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px;
        }
        .slider-group {
            display: flex; align-items: center; gap: 12px;
        }
        .slider-group span {
            font-size: 14px; color: white; font-weight: 500; min-width: 40px;
        }

        /* Styled Select (Modern Dropdowns) */
        .styled-select {
            padding: 10px 40px 10px 14px; background: rgba(30, 41, 59, 0.9);
            border: 1px solid rgba(255,255,255,0.15); border-radius: 8px;
            color: white; font-size: 14px; cursor: pointer;
            -webkit-appearance: none; appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2394a3b8' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
            background-repeat: no-repeat; background-position: right 10px center; background-size: 20px;
            transition: all 0.2s;
        }
        .styled-select:hover { border-color: rgba(99, 102, 241, 0.5); }
        .styled-select:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2); }
        .styled-select.wide { min-width: 180px; }

        /* Styled Slider */
        .styled-slider {
            width: 120px; height: 6px; -webkit-appearance: none;
            background: rgba(255,255,255,0.1); border-radius: 3px; outline: none;
        }
        .styled-slider::-webkit-slider-thumb {
            -webkit-appearance: none; width: 16px; height: 16px;
            background: linear-gradient(135deg, #6366f1, #a855f7);
            border-radius: 50%; cursor: pointer; box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
        }

        /* Checkbox Label */
        .checkbox-label {
            display: flex; align-items: center; gap: 8px;
            font-size: 13px; color: #94a3b8; cursor: pointer;
        }
        .checkbox-label input {
            accent-color: #6366f1; width: 16px; height: 16px;
        }
        .last-updated {
            margin-left: auto; font-size: 11px; color: #64748b; text-align: right;
        }

        /* Sub-tabs */
        .sub-tabs {
            display: flex; gap: 4px; background: rgba(0,0,0,0.2);
            border-radius: 10px; padding: 4px;
        }
        .sub-tab {
            padding: 10px 16px; background: transparent; border: none;
            border-radius: 8px; color: #94a3b8; font-size: 13px;
            cursor: pointer; display: flex; align-items: center; gap: 6px;
            transition: all 0.2s;
        }
        .sub-tab:hover { color: white; background: rgba(255,255,255,0.05); }
        .sub-tab.active {
            color: white; background: rgba(99, 102, 241, 0.3);
        }

        /* Extraction Metrics Grid */
        .extraction-metrics-grid {
            display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px;
        }
        @media (max-width: 1200px) { .extraction-metrics-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 640px) { .extraction-metrics-grid { grid-template-columns: 1fr; } }

        .extraction-card {
            background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1);
            border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 12px;
        }
        .ext-icon {
            width: 44px; height: 44px; border-radius: 10px;
            display: flex; align-items: center; justify-content: center; font-size: 18px;
        }
        .ext-icon.blue { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }
        .ext-icon.green { background: rgba(16, 185, 129, 0.2); color: #34d399; }
        .ext-icon.pink { background: rgba(236, 72, 153, 0.2); color: #f472b6; }
        .ext-data { flex: 1; }
        .ext-value { font-size: 28px; font-weight: 700; color: white; margin-bottom: 2px; }
        .ext-label { font-size: 13px; color: #94a3b8; }
        .ext-note {
            display: flex; align-items: center; gap: 6px;
            font-size: 11px; padding: 8px 10px; border-radius: 6px;
        }
        .ext-note.green { background: rgba(16, 185, 129, 0.1); color: #34d399; }
        .ext-note.yellow { background: rgba(234, 179, 8, 0.1); color: #fbbf24; }

        /* Trends Section */
        .trends-section {
            background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1);
            border-radius: 16px; padding: 24px;
        }
        .trends-section h3 {
            font-size: 18px; font-weight: 600; color: white; margin-bottom: 16px;
        }

        /* ===== PROVIDER ROUTING PAGE STYLES ===== */
        .gradient-title {
            font-size: 32px; font-weight: 700;
            background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            background-clip: text; margin-bottom: 8px;
        }
        .page-subtitle {
            font-size: 16px; color: #94a3b8; margin-bottom: 32px;
        }

        /* Top Metrics Grid */
        .top-metrics-grid {
            display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px;
        }
        @media (max-width: 1024px) { .top-metrics-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 640px) { .top-metrics-grid { grid-template-columns: 1fr; } }

        .top-metric-card {
            background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
            border-radius: 12px; padding: 20px;
        }
        .tmc-header {
            display: flex; justify-content: space-between; align-items: center;
            margin-bottom: 12px; font-size: 13px; color: #94a3b8;
        }
        .tmc-header i { color: #64748b; }
        .tmc-value {
            font-size: 28px; font-weight: 700; color: white; margin-bottom: 4px;
        }
        .tmc-value.green { color: #34d399; }
        .tmc-value.orange { color: #fb923c; }
        .tmc-label { font-size: 12px; color: #64748b; }

        /* Dashboard Section */
        .dashboard-section {
            background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1);
            border-radius: 16px; padding: 24px; margin-bottom: 24px;
        }
        .dashboard-header {
            display: flex; justify-content: space-between; align-items: flex-start;
            margin-bottom: 20px; flex-wrap: wrap; gap: 16px;
        }
        .dashboard-header h2 {
            font-size: 20px; font-weight: 600; color: white; margin-bottom: 4px;
        }
        .dashboard-header p { font-size: 14px; color: #94a3b8; }
        .dashboard-controls {
            display: flex; align-items: center; gap: 16px;
        }
        .ai-badge {
            display: flex; align-items: center; gap: 8px;
            padding: 8px 14px; background: rgba(16, 185, 129, 0.15);
            border: 1px solid rgba(16, 185, 129, 0.3); border-radius: 20px;
            font-size: 13px; color: #34d399; font-weight: 500;
        }
        .ai-dot {
            width: 8px; height: 8px; background: #10b981;
            border-radius: 50%; animation: pulse 2s infinite;
        }

        /* Charts Row */
        .charts-row {
            display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
        }
        @media (max-width: 900px) { .charts-row { grid-template-columns: 1fr; } }

        .chart-panel {
            background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.08);
            border-radius: 12px; padding: 20px;
        }
        .chart-panel h3 {
            font-size: 15px; font-weight: 600; color: white; margin-bottom: 16px;
        }
        .chart-placeholder.small {
            height: 180px; position: relative;
        }
        .chart-axis-y {
            position: absolute; left: 0; top: 0; bottom: 40px;
            display: flex; flex-direction: column; justify-content: space-between;
            font-size: 11px; color: #64748b; padding-right: 8px;
        }
        .chart-tooltip {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            background: rgba(30, 41, 59, 0.95); border: 1px solid rgba(255,255,255,0.1);
            border-radius: 8px; padding: 12px 16px; font-size: 12px; color: #94a3b8;
            line-height: 1.6;
        }
        .chart-legend {
            display: flex; flex-wrap: wrap; gap: 16px;
            font-size: 11px; color: #94a3b8;
        }
        .chart-legend span { display: flex; align-items: center; gap: 6px; }

        /* Two Panel Row */
        .two-panel-row {
            display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px;
        }
        @media (max-width: 1100px) { .two-panel-row { grid-template-columns: 1fr; } }

        .panel-left, .panel-right {
            background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1);
            border-radius: 16px; padding: 24px;
        }
        .panel-left h2, .panel-right h2 {
            font-size: 18px; font-weight: 600; color: white; margin-bottom: 20px;
        }
        .panel-left h4 {
            font-size: 13px; color: #64748b; text-transform: uppercase;
            letter-spacing: 0.5px; margin-bottom: 12px;
        }

        /* Key Items */
        .key-item {
            display: flex; align-items: center; gap: 16px;
            padding: 12px 16px; background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.08); border-radius: 10px;
            margin-bottom: 8px;
        }
        .key-name { font-size: 14px; font-weight: 500; color: white; min-width: 120px; }
        .key-stats {
            flex: 1; display: flex; gap: 20px; font-size: 13px; color: #94a3b8;
        }
        .key-stats b { color: white; }
        .key-stats b.green { color: #34d399; }
        .key-stats b.orange { color: #fb923c; }
        .key-badge {
            padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 600;
            text-transform: lowercase;
        }
        .key-badge.active { background: rgba(16, 185, 129, 0.2); color: #34d399; }

        /* Recommendation Cards */
        .recommendation-card {
            background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
            border-radius: 12px; padding: 16px; margin-bottom: 12px;
        }
        .rec-header {
            display: flex; justify-content: space-between; align-items: center;
            margin-bottom: 8px;
        }
        .rec-header span:first-child {
            font-size: 14px; font-weight: 600; color: white;
        }
        .impact-badge {
            padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 600;
        }
        .impact-badge.high { background: rgba(239, 68, 68, 0.2); color: #f87171; }
        .impact-badge.medium { background: rgba(234, 179, 8, 0.2); color: #fbbf24; }
        .recommendation-card p {
            font-size: 13px; color: #94a3b8; line-height: 1.5; margin-bottom: 12px;
        }
        .rec-footer {
            display: flex; justify-content: space-between; align-items: center;
        }
        .savings {
            font-size: 12px; color: #64748b;
        }
        .savings b { color: #34d399; }
        .rec-btn {
            padding: 6px 14px; background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.2); border-radius: 6px;
            color: white; font-size: 12px; cursor: pointer; transition: all 0.2s;
        }
        .rec-btn:hover { background: rgba(255,255,255,0.15); }
        .rec-btn.blue { background: rgba(59, 130, 246, 0.2); border-color: rgba(59, 130, 246, 0.3); color: #60a5fa; }
        .rec-btn.cyan { background: rgba(6, 182, 212, 0.2); border-color: rgba(6, 182, 212, 0.3); color: #22d3ee; }
        .rec-btn.purple { background: rgba(168, 85, 247, 0.2); border-color: rgba(168, 85, 247, 0.3); color: #c084fc; }

        /* Decisions Section */
        .decisions-section {
            background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1);
            border-radius: 16px; padding: 24px; margin-bottom: 24px;
        }
        .section-header {
            display: flex; justify-content: space-between; align-items: flex-start;
            margin-bottom: 16px;
        }
        .section-header h2 {
            font-size: 18px; font-weight: 600; color: white; margin-bottom: 4px;
        }
        .section-header p { font-size: 13px; color: #94a3b8; }
        .section-header > span { font-size: 13px; color: #64748b; }

        /* Config Section */
        .config-section {
            background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1);
            border-radius: 16px; padding: 24px; margin-bottom: 24px;
        }
        .config-columns {
            display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
        }
        @media (max-width: 900px) { .config-columns { grid-template-columns: 1fr; } }

        .config-col h4 {
            font-size: 14px; font-weight: 600; color: white; margin-bottom: 16px;
            padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.1);
        }
        .config-row {
            display: flex; justify-content: space-between; align-items: center;
            padding: 10px 0; font-size: 13px;
        }
        .config-row > span:first-child { color: #94a3b8; }
        .config-row > span:last-child { color: white; font-weight: 500; }
        .val-enabled {
            display: flex; align-items: center; gap: 6px; color: #34d399 !important;
        }
        .val-enabled .dot {
            width: 8px; height: 8px; background: #10b981; border-radius: 50%;
        }
        .val-blue { color: #60a5fa !important; }
        .val-pink { color: #f472b6 !important; }

        /* Related Section */
        .related-section {
            margin-top: 32px;
        }
        .related-section h2 {
            font-size: 20px; font-weight: 600; color: white; margin-bottom: 8px;
        }
        .related-section > p {
            font-size: 14px; color: #94a3b8; margin-bottom: 20px;
        }
        .related-grid {
            display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
        }
        @media (max-width: 800px) { .related-grid { grid-template-columns: 1fr; } }

        .related-card {
            display: flex; align-items: center; gap: 16px;
            padding: 20px; background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.1); border-radius: 12px;
            cursor: pointer; transition: all 0.2s;
        }
        .related-card:hover {
            background: rgba(255,255,255,0.06); border-color: rgba(99, 102, 241, 0.3);
        }
        .related-card i {
            font-size: 24px; color: #818cf8; width: 48px; height: 48px;
            background: rgba(99, 102, 241, 0.15); border-radius: 12px;
            display: flex; align-items: center; justify-content: center;
        }
        .related-card h4 {
            font-size: 15px; font-weight: 600; color: white; margin-bottom: 4px;
        }
        .related-card p {
            font-size: 13px; color: #94a3b8;
        }

        /* ===== BUSINESS INTELLIGENCE PAGE STYLES ===== */
        .bi-hero {
            display: flex; justify-content: space-between; align-items: flex-start;
            margin-bottom: 24px; gap: 40px;
        }
        .bi-hero-content { flex: 1; }
        .bi-hero-title {
            font-size: 36px; font-weight: 700;
            background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            background-clip: text; margin-bottom: 12px;
        }
        .bi-hero-subtitle { font-size: 16px; color: #94a3b8; margin-bottom: 20px; max-width: 700px; }
        .bi-hero-badges { display: flex; flex-wrap: wrap; gap: 12px; }
        .bi-badge {
            display: inline-flex; align-items: center; gap: 8px;
            padding: 8px 14px; border-radius: 20px; font-size: 13px; font-weight: 500;
        }
        .bi-badge.green { background: rgba(16, 185, 129, 0.15); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.3); }
        .bi-badge.blue { background: rgba(59, 130, 246, 0.15); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.3); }
        .bi-badge.purple { background: rgba(168, 85, 247, 0.15); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.3); }
        .bi-hero-score { text-align: right; }
        .bi-score-value { font-size: 48px; font-weight: 700; color: #94a3b8; }
        .bi-score-label { font-size: 14px; color: #64748b; margin-bottom: 16px; }
        .bi-score-stats { display: flex; gap: 20px; }
        .bi-stat { text-align: center; }
        .bi-stat-num { display: block; font-size: 20px; font-weight: 700; }
        .bi-stat-num.pink { color: #f472b6; }
        .bi-stat-num.cyan { color: #22d3ee; }
        .bi-stat-num.white { color: white; }
        .bi-stat-text { font-size: 11px; color: #64748b; }

        /* BI Tabs */
        .bi-tabs {
            display: flex; gap: 8px; margin-bottom: 24px;
            background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1);
            border-radius: 12px; padding: 6px;
        }
        .bi-tab {
            flex: 1; padding: 12px 16px; background: transparent; border: none;
            border-radius: 8px; color: #94a3b8; font-size: 14px; font-weight: 500;
            cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
            transition: all 0.2s;
        }
        .bi-tab:hover { color: white; background: rgba(255,255,255,0.05); }
        .bi-tab.active { color: white; background: rgba(99, 102, 241, 0.3); }
        .bi-tab-content { display: none; }
        .bi-tab-content.active { display: block; }

        /* BI Metrics Grid */
        .bi-metrics-grid {
            display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px;
        }
        @media (max-width: 1100px) { .bi-metrics-grid { grid-template-columns: repeat(2, 1fr); } }
        .bi-metric-card {
            background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1);
            border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 12px;
        }
        .bi-metric-icon {
            width: 44px; height: 44px; border-radius: 10px;
            display: flex; align-items: center; justify-content: center; font-size: 18px;
        }
        .bi-metric-icon.blue { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }
        .bi-metric-icon.green { background: rgba(16, 185, 129, 0.2); color: #34d399; }
        .bi-metric-icon.purple { background: rgba(168, 85, 247, 0.2); color: #c084fc; }
        .bi-metric-icon.pink { background: rgba(236, 72, 153, 0.2); color: #f472b6; }
        .bi-metric-data { flex: 1; }
        .bi-metric-value { font-size: 28px; font-weight: 700; color: white; margin-bottom: 2px; }
        .bi-metric-label { font-size: 13px; color: #94a3b8; }
        .bi-metric-note {
            display: flex; align-items: center; gap: 6px;
            font-size: 12px; color: #94a3b8;
        }
        .bi-metric-note.green { color: #34d399; }
        .bi-metric-note.yellow { color: #fbbf24; }
        .bi-metric-note.pink { color: #f472b6; }

        /* BI Two Column */
        .bi-two-col {
            display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px;
        }
        @media (max-width: 1000px) { .bi-two-col { grid-template-columns: 1fr; } }

        .bi-panel {
            background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1);
            border-radius: 16px; padding: 24px; margin-bottom: 24px;
        }
        .bi-panel h3, .bi-panel h4 {
            font-size: 18px; font-weight: 600; color: white; margin-bottom: 20px;
        }
        .bi-panel h4 { font-size: 15px; }
        .bi-panel h2 { font-size: 22px; font-weight: 600; color: white; margin-bottom: 8px; }
        .bi-panel-desc { font-size: 14px; color: #94a3b8; margin-bottom: 20px; }

        /* Pipeline List */
        .bi-pipeline-list { display: flex; flex-direction: column; gap: 12px; }
        .bi-pipeline-item {
            display: flex; align-items: center; gap: 16px;
            padding: 12px 16px; background: rgba(255,255,255,0.02);
            border: 1px solid rgba(255,255,255,0.06); border-radius: 10px;
        }
        .bi-pipeline-icon {
            width: 40px; height: 40px; border-radius: 10px;
            display: flex; align-items: center; justify-content: center; font-size: 16px;
        }
        .bi-pipeline-icon.cyan { background: rgba(6, 182, 212, 0.2); color: #22d3ee; }
        .bi-pipeline-icon.blue { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }
        .bi-pipeline-icon.purple { background: rgba(168, 85, 247, 0.2); color: #c084fc; }
        .bi-pipeline-icon.pink { background: rgba(236, 72, 153, 0.2); color: #f472b6; }
        .bi-pipeline-info { flex: 1; }
        .bi-pipeline-name { font-size: 14px; font-weight: 500; color: white; margin-bottom: 2px; }
        .bi-pipeline-desc { font-size: 12px; color: #64748b; }
        .bi-pipeline-value { text-align: right; }
        .bi-pipeline-value span:first-child { display: block; font-size: 18px; font-weight: 600; color: white; }
        .bi-pipeline-sub { display: block; font-size: 11px; color: #64748b; }

        /* Quality List */
        .bi-quality-list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 20px; }
        .bi-quality-item {
            display: flex; align-items: center; gap: 16px;
        }
        .bi-quality-item > span:first-child { width: 140px; font-size: 14px; color: #94a3b8; }
        .bi-quality-bar {
            flex: 1; height: 8px; background: rgba(255,255,255,0.1);
            border-radius: 4px; overflow: hidden;
        }
        .bi-quality-fill { height: 100%; border-radius: 4px; }
        .bi-quality-fill.orange { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
        .bi-quality-value { width: 60px; text-align: right; font-size: 14px; font-weight: 600; }
        .bi-quality-value.green { color: #34d399; }
        .bi-quality-value.cyan { color: #22d3ee; }

        /* Excellence Badge */
        .bi-excellence-badge {
            display: flex; align-items: center; gap: 16px;
            padding: 16px 20px; background: linear-gradient(135deg, rgba(234, 179, 8, 0.15), rgba(245, 158, 11, 0.1));
            border: 1px solid rgba(234, 179, 8, 0.3); border-radius: 12px;
        }
        .bi-excellence-badge i { font-size: 24px; color: #fbbf24; }
        .bi-excellence-badge strong { display: block; font-size: 14px; color: #fbbf24; margin-bottom: 2px; }
        .bi-excellence-badge span { font-size: 12px; color: #94a3b8; }

        /* Empty State */
        .bi-empty-state {
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            padding: 40px; color: #64748b; text-align: center;
        }
        .bi-empty-state i { font-size: 32px; margin-bottom: 12px; opacity: 0.5; }

        /* Knowledge Graph */
        .bi-graph-header {
            display: flex; justify-content: space-between; align-items: flex-start;
            margin-bottom: 20px; gap: 24px;
        }
        .bi-graph-header h2 { margin-bottom: 8px; }
        .bi-graph-header p { font-size: 14px; color: #94a3b8; max-width: 600px; }
        .bi-graph-stats { display: flex; gap: 24px; }
        .bi-graph-controls {
            display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap;
            padding: 16px 20px; background: rgba(0,0,0,0.2);
            border-radius: 10px; margin-bottom: 16px;
        }
        .styled-input {
            padding: 10px 14px; background: rgba(30, 41, 59, 0.9);
            border: 1px solid rgba(255,255,255,0.15); border-radius: 8px;
            color: white; font-size: 14px; min-width: 180px;
        }
        .styled-input::placeholder { color: #64748b; }
        .styled-input:focus { outline: none; border-color: #6366f1; }
        .bi-graph-legend {
            display: flex; flex-wrap: wrap; gap: 20px;
            font-size: 13px; color: #94a3b8; margin-bottom: 16px;
        }
        .bi-graph-legend span { display: flex; align-items: center; gap: 8px; }
        .legend-dot {
            width: 10px; height: 10px; border-radius: 50%;
        }
        .legend-dot.blue { background: #3b82f6; }
        .legend-dot.green { background: #10b981; }
        .legend-dot.orange { background: #f59e0b; }
        .legend-dot.purple { background: #a855f7; }
        .legend-dot.red { background: #ef4444; }
        .legend-dot.cyan { background: #06b6d4; }
        .bi-graph-canvas {
            height: 250px; background: rgba(0,0,0,0.2);
            border: 1px solid rgba(255,255,255,0.08); border-radius: 12px;
            display: flex; align-items: center; justify-content: center;
        }
        .bi-graph-canvas.small { height: 180px; }
        .error-message { color: #f87171; font-size: 14px; }

        /* Three Column */
        .bi-three-col {
            display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
        }
        @media (max-width: 900px) { .bi-three-col { grid-template-columns: 1fr; } }
        .bi-three-col .bi-panel { margin-bottom: 0; }

        /* Distribution List */
        .bi-dist-list { display: flex; flex-direction: column; gap: 10px; }
        .bi-dist-item {
            display: flex; align-items: center; gap: 10px; font-size: 13px;
        }
        .bi-dist-item span:nth-child(2) { flex: 1; color: #94a3b8; }
        .bi-dist-item span:last-child { color: white; font-weight: 500; }
        .bi-dist-item small { color: #64748b; font-weight: 400; }

        /* Health List */
        .bi-health-list { display: flex; flex-direction: column; gap: 12px; }
        .bi-health-item {
            display: flex; justify-content: space-between; font-size: 13px;
        }
        .bi-health-item span:first-child { color: #94a3b8; }
        .bi-health-item span:last-child { color: white; font-weight: 500; }
        .bi-health-item .red { color: #f87171; }

        /* Bar Chart */
        .bi-chart-area {
            display: flex; gap: 16px; padding: 20px 0;
        }
        .bi-chart-y-axis {
            display: flex; flex-direction: column; justify-content: space-between;
            font-size: 12px; color: #64748b; padding: 10px 0;
        }
        .bi-bar-chart {
            flex: 1; display: flex; justify-content: space-around; align-items: flex-end;
            height: 200px; border-bottom: 1px solid rgba(255,255,255,0.1);
            border-left: 1px solid rgba(255,255,255,0.1); padding: 0 40px;
        }
        .bi-bar-item { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 120px; }
        .bi-bar {
            width: 100%; background: linear-gradient(180deg, #3b82f6, #6366f1);
            border-radius: 4px 4px 0 0;
        }
        .bi-bar-item span { font-size: 13px; color: #94a3b8; }

        /* Insights List */
        .bi-insights-list { display: flex; flex-direction: column; gap: 12px; }
        .bi-insight-card {
            display: flex; justify-content: space-between; align-items: center;
            padding: 16px 20px; background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.08); border-radius: 12px;
        }
        .bi-insight-header { display: flex; align-items: center; gap: 16px; }
        .bi-insight-header strong { font-size: 15px; color: white; margin-bottom: 2px; display: block; }
        .bi-insight-header p { font-size: 13px; color: #94a3b8; margin: 0; }
        .bi-insight-badge {
            padding: 4px 12px; border-radius: 4px; font-size: 11px; font-weight: 600;
        }
        .bi-insight-badge.high { background: rgba(239, 68, 68, 0.2); color: #f87171; }
        .bi-insight-badge.medium { background: rgba(234, 179, 8, 0.2); color: #fbbf24; }
        .bi-insight-value { font-size: 18px; font-weight: 700; }
        .bi-insight-value.green { color: #34d399; }
        .bi-insight-value.cyan { color: #22d3ee; }
        .bi-insight-value.purple { color: #c084fc; }

        /* Trend Items */
        .bi-trend-items { display: flex; flex-direction: column; gap: 16px; }
        .bi-trend-item {
            display: flex; gap: 16px;
            padding: 16px 20px; background: rgba(255,255,255,0.02);
            border: 1px solid rgba(255,255,255,0.06); border-radius: 12px;
        }
        .bi-trend-icon {
            width: 40px; height: 40px; border-radius: 10px;
            display: flex; align-items: center; justify-content: center; font-size: 16px;
            flex-shrink: 0;
        }
        .bi-trend-icon.green { background: rgba(16, 185, 129, 0.2); color: #34d399; }
        .bi-trend-icon.yellow { background: rgba(234, 179, 8, 0.2); color: #fbbf24; }
        .bi-trend-icon.blue { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }
        .bi-trend-item strong { display: block; font-size: 15px; color: white; margin-bottom: 4px; }
        .bi-trend-item p { font-size: 13px; color: #94a3b8; margin: 0; line-height: 1.5; }

        /* Recommendation Cards */
        .bi-rec-cards {
            display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
        }
        @media (max-width: 800px) { .bi-rec-cards { grid-template-columns: 1fr; } }
        .bi-rec-card {
            background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1);
            border-radius: 16px; padding: 24px;
        }
        .bi-rec-card.blue { border-color: rgba(59, 130, 246, 0.3); }
        .bi-rec-card.yellow { border-color: rgba(234, 179, 8, 0.3); }
        .bi-rec-card.red { border-color: rgba(239, 68, 68, 0.3); }
        .bi-rec-header {
            display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
        }
        .bi-rec-card.blue .bi-rec-header i { color: #60a5fa; }
        .bi-rec-card.yellow .bi-rec-header i { color: #fbbf24; }
        .bi-rec-card.red .bi-rec-header i { color: #f87171; }
        .bi-rec-header i { font-size: 20px; }
        .bi-rec-header span { font-size: 16px; font-weight: 600; color: white; }
        .bi-rec-value {
            font-size: 40px; font-weight: 700; margin-bottom: 12px;
        }
        .bi-rec-card.blue .bi-rec-value { color: #60a5fa; }
        .bi-rec-card.yellow .bi-rec-value { color: #fbbf24; }
        .bi-rec-card.red .bi-rec-value { color: #f87171; }
        .bi-rec-card p { font-size: 13px; color: #94a3b8; margin: 0; line-height: 1.5; }

        /* ===== STUNNING CHART ANIMATIONS ===== */
        /* Knowledge Graph */
        .knowledge-graph-viz { background: var(--viz-bg); }
        .graph-line { opacity: 0.6; }
        .graph-node { transform-origin: center; }
        .node-breathe { animation: nodeBreatheBi 4s ease-in-out infinite; }
        @keyframes nodeBreatheBi { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
        .data-particle { opacity: 0.9; }

        /* Trend Chart */
        .trend-chart-viz { background: var(--viz-bg); }
        .area-animate { animation: areaFadeIn 1.5s ease-out forwards; opacity: 0; }
        @keyframes areaFadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
        .line-draw { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: lineDraw 2s ease-out forwards; }
        @keyframes lineDraw { to { stroke-dashoffset: 0; } }
        .data-point-pulse { animation: pointPulse 2s ease-in-out infinite; }
        @keyframes pointPulse { 0%, 100% { r: 6; opacity: 1; } 50% { r: 9; opacity: 0.7; } }

        /* Neural Network */
        .neural-viz { background: var(--viz-bg-alt); }
        .neural-line { opacity: 0.4; animation: neuralPulse 3s ease-in-out infinite; }
        @keyframes neuralPulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.8; } }
        .node-pulse { animation: nodePulseAi 2s ease-in-out infinite; }
        @keyframes nodePulseAi { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; filter: brightness(1.3); } }
        .output-node { animation: outputGlow 1.5s ease-in-out infinite; }
        @keyframes outputGlow { 0%, 100% { filter: drop-shadow(0 0 10px #ec4899); } 50% { filter: drop-shadow(0 0 25px #ec4899) drop-shadow(0 0 40px #a855f7); } }
        .signal-pulse { opacity: 0.9; }

        /* Business Insights Bar Chart */
        .insights-chart-viz {
            background: var(--viz-bg);
            border-radius: 12px;
        }
        .bar-group rect { transition: filter 0.3s ease; }
        .bar-group:hover rect { filter: url(#barGlow) brightness(1.2); }

        /* ===== API PLAYGROUND STYLES ===== */
        .api-hero { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; gap: 24px; flex-wrap: wrap; }
        .api-hero-left { display: flex; align-items: center; gap: 20px; }
        .api-play-icon {
            width: 64px; height: 64px; border-radius: 16px;
            background: linear-gradient(135deg, #10b981, #06b6d4);
            display: flex; align-items: center; justify-content: center;
            font-size: 24px; color: white;
        }
        .api-hero-title {
            font-size: 32px; font-weight: 700;
            background: linear-gradient(135deg, #10b981, #06b6d4);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            background-clip: text; margin-bottom: 4px;
        }
        .api-hero-subtitle { font-size: 14px; color: #94a3b8; }
        .api-hero-right { text-align: right; }
        .api-hero-badges { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; justify-content: flex-end; }
        .api-badge {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 6px 12px; border-radius: 16px; font-size: 12px; font-weight: 500;
        }
        .api-badge.green { background: rgba(16, 185, 129, 0.15); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.3); }
        .api-badge.purple { background: rgba(168, 85, 247, 0.15); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.3); }
        .api-badge.blue { background: rgba(59, 130, 246, 0.15); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.3); }
        .api-badge.orange { background: rgba(245, 158, 11, 0.15); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.3); }
        .api-hero-stats { display: flex; gap: 24px; justify-content: flex-end; }
        .api-stat { text-align: center; }
        .api-stat-num { display: block; font-size: 24px; font-weight: 700; color: #f472b6; }
        .api-stat-label { font-size: 11px; color: #64748b; }

        /* API Suite */
        .api-suite {
            background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1);
            border-radius: 16px; padding: 24px;
        }
        .api-suite-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
        .api-suite-header h2 { font-size: 20px; font-weight: 600; color: white; }
        .api-status { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #94a3b8; }
        .status-dot { width: 8px; height: 8px; border-radius: 50%; }
        .status-dot.green { background: #10b981; }

        /* API Tabs */
        .api-tabs {
            display: flex; gap: 8px; margin-bottom: 20px;
            background: rgba(0,0,0,0.2); border-radius: 10px; padding: 4px;
        }
        .api-tab {
            flex: 1; padding: 12px 20px; background: transparent; border: none;
            border-radius: 8px; color: #94a3b8; font-size: 14px; font-weight: 500;
            cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
            transition: all 0.2s;
        }
        .api-tab:hover { color: white; background: rgba(255,255,255,0.05); }
        .api-tab.active { color: white; background: linear-gradient(135deg, #6366f1, #8b5cf6); }
        .api-tab-content { display: none; }
        .api-tab-content.active { display: block; }
        .api-tab-desc { font-size: 13px; color: #94a3b8; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }
        .desc-dot { width: 6px; height: 6px; background: #6366f1; border-radius: 50%; }

        /* API Config Panel */
        .api-config-panel {
            background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.08);
            border-radius: 12px; overflow: hidden;
        }
        .config-header {
            padding: 16px 20px; background: rgba(255,255,255,0.03);
            border-bottom: 1px solid rgba(255,255,255,0.08);
            font-size: 15px; font-weight: 600; color: white;
            display: flex; align-items: center; gap: 10px;
        }
        .config-section-inner { padding: 20px; border-bottom: 1px solid rgba(255,255,255,0.05); }
        .config-label { display: block; font-size: 13px; color: #94a3b8; margin-bottom: 12px; }
        .api-textarea {
            width: 100%; min-height: 100px; padding: 16px;
            background: rgba(30, 41, 59, 0.8); border: 1px solid rgba(255,255,255,0.1);
            border-radius: 10px; color: white; font-size: 14px; resize: vertical;
        }
        .api-textarea::placeholder { color: #64748b; }
        .api-textarea:focus { outline: none; border-color: #6366f1; }

        /* Provider Options */
        .provider-options { display: flex; flex-direction: column; gap: 8px; }
        .provider-option {
            display: flex; align-items: center; gap: 16px;
            padding: 14px 16px; background: rgba(255,255,255,0.02);
            border: 1px solid rgba(255,255,255,0.06); border-radius: 10px;
            cursor: pointer; transition: all 0.2s;
        }
        .provider-option:hover { background: rgba(255,255,255,0.04); }
        .provider-option.selected { background: rgba(99, 102, 241, 0.1); border-color: rgba(99, 102, 241, 0.3); }
        .provider-option input { display: none; }
        .provider-icon {
            width: 36px; height: 36px; border-radius: 8px;
            display: flex; align-items: center; justify-content: center; font-size: 16px;
        }
        .provider-icon.auto { background: linear-gradient(135deg, #6366f1, #a855f7); color: white; }
        .provider-icon.openai { background: rgba(16, 185, 129, 0.2); }
        .provider-icon.claude { background: rgba(245, 158, 11, 0.2); }
        .provider-icon.gemini { background: rgba(59, 130, 246, 0.2); }
        .provider-icon.cohere { background: rgba(234, 179, 8, 0.2); }
        .provider-info { flex: 1; }
        .provider-info strong { display: block; font-size: 14px; color: white; margin-bottom: 2px; }
        .provider-info span { display: block; font-size: 12px; color: #94a3b8; }
        .provider-info small { font-size: 11px; color: #64748b; display: flex; align-items: center; gap: 6px; margin-top: 4px; }
        .key-dots { display: inline-flex; gap: 3px; }
        .key-dots .dot { width: 6px; height: 6px; border-radius: 50%; }
        .key-dots .dot.green { background: #10b981; }
        .key-dots .dot.orange { background: #f59e0b; }

        /* Routing Modes */
        .routing-modes { display: flex; gap: 12px; flex-wrap: wrap; }
        .routing-option {
            display: flex; align-items: center; gap: 12px;
            padding: 12px 16px; background: rgba(255,255,255,0.02);
            border: 1px solid rgba(255,255,255,0.06); border-radius: 10px;
            cursor: pointer; flex: 1; min-width: 180px; transition: all 0.2s;
        }
        .routing-option:hover { background: rgba(255,255,255,0.04); }
        .routing-option.selected { background: rgba(99, 102, 241, 0.1); border-color: rgba(99, 102, 241, 0.3); }
        .routing-option input { display: none; }
        .routing-icon { font-size: 18px; }
        .routing-option div strong { display: block; font-size: 13px; color: white; }
        .routing-option div span { font-size: 11px; color: #64748b; }

        /* Debug Option */
        .debug-option {
            display: flex; align-items: center; gap: 12px;
            padding: 12px 16px; background: rgba(255,255,255,0.02);
            border: 1px solid rgba(255,255,255,0.06); border-radius: 10px;
            cursor: pointer; transition: all 0.2s;
        }
        .debug-option:hover { background: rgba(255,255,255,0.04); }
        .debug-option input { width: 18px; height: 18px; accent-color: #6366f1; }
        .debug-icon { font-size: 18px; }
        .debug-option div strong { display: block; font-size: 13px; color: white; }
        .debug-option div span { font-size: 11px; color: #64748b; }

        /* Context Options */
        .context-options { display: flex; flex-direction: column; gap: 8px; }
        .context-option {
            display: flex; align-items: center; gap: 12px;
            padding: 12px 16px; background: rgba(255,255,255,0.02);
            border: 1px solid rgba(255,255,255,0.06); border-radius: 10px;
            cursor: pointer; transition: all 0.2s;
        }
        .context-option:hover { background: rgba(255,255,255,0.04); }
        .context-option.selected { background: rgba(99, 102, 241, 0.1); border-color: rgba(99, 102, 241, 0.3); }
        .context-option input { display: none; }
        .context-option div strong { display: block; font-size: 13px; color: white; }
        .context-option div span { font-size: 11px; color: #64748b; }

        /* Send Request Button */
        .send-request-btn {
            width: 100%; padding: 16px;
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            border: none; border-radius: 10px;
            color: white; font-size: 15px; font-weight: 600;
            cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px;
            transition: all 0.2s; margin: 20px; width: calc(100% - 40px);
        }
        .send-request-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3); }

        /* Keys Stats Grid */
        .keys-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
        @media (max-width: 800px) { .keys-stats-grid { grid-template-columns: repeat(2, 1fr); } }
        .keys-stat-card {
            background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1);
            border-radius: 10px; padding: 16px;
        }
        .keys-stat-card.green { border-left: 3px solid #10b981; }
        .keys-stat-card.red { border-left: 3px solid #ef4444; }
        .keys-stat-card.blue { border-left: 3px solid #3b82f6; }
        .keys-stat-label { display: block; font-size: 12px; color: #64748b; margin-bottom: 4px; }
        .keys-stat-value { font-size: 28px; font-weight: 700; color: white; }
        .keys-stat-card.green .keys-stat-value { color: #10b981; }
        .keys-stat-card.red .keys-stat-value { color: #ef4444; }
        .keys-stat-card.blue .keys-stat-value { color: #3b82f6; }

        /* Provider Key Section */
        .provider-key-section {
            background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1);
            border-radius: 12px; margin-bottom: 16px; overflow: hidden;
        }
        .provider-key-header {
            display: flex; justify-content: space-between; align-items: center;
            padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,0.08);
        }
        .provider-key-info { display: flex; align-items: center; gap: 14px; }
        .provider-avatar {
            width: 40px; height: 40px; border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            font-size: 14px; font-weight: 700; color: white;
        }
        .provider-avatar.openai { background: linear-gradient(135deg, #10b981, #06b6d4); }
        .provider-avatar.claude { background: linear-gradient(135deg, #f59e0b, #ef4444); }
        .provider-avatar.gemini { background: linear-gradient(135deg, #3b82f6, #6366f1); }
        .provider-avatar.cohere { background: linear-gradient(135deg, #f59e0b, #ec4899); }
        .provider-avatar.small { width: 32px; height: 32px; font-size: 11px; }
        .provider-key-info div strong { display: block; font-size: 15px; color: white; }
        .provider-key-info div span { font-size: 12px; color: #64748b; }
        .provider-key-actions { display: flex; align-items: center; gap: 12px; }
        .key-count { font-size: 13px; color: #94a3b8; }
        .key-inactive { font-size: 12px; color: #64748b; }
        .add-key-btn {
            padding: 8px 16px; background: linear-gradient(135deg, #6366f1, #8b5cf6);
            border: none; border-radius: 6px; color: white; font-size: 13px; font-weight: 500;
            cursor: pointer; transition: all 0.2s;
        }
        .add-key-btn:hover { transform: translateY(-1px); }
        .refresh-btn {
            width: 36px; height: 36px; background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.1); border-radius: 8px;
            color: #94a3b8; cursor: pointer; transition: all 0.2s;
        }
        .refresh-btn:hover { color: white; background: rgba(255,255,255,0.1); }
        .provider-key-empty {
            padding: 40px 20px; text-align: center; color: #64748b;
        }
        .provider-key-empty i { font-size: 32px; margin-bottom: 12px; opacity: 0.5; display: block; }
        .provider-key-empty strong { display: block; font-size: 15px; color: #94a3b8; margin-bottom: 4px; }
        .provider-key-empty span { font-size: 13px; display: block; margin-bottom: 16px; }
        .add-first-key-btn {
            padding: 10px 20px; background: linear-gradient(135deg, #6366f1, #8b5cf6);
            border: none; border-radius: 8px; color: white; font-size: 14px; font-weight: 500;
            cursor: pointer; transition: all 0.2s;
        }
        .add-first-key-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(99, 102, 241, 0.3); }

        /* Performance Cards Grid */
        .perf-cards-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
        @media (max-width: 900px) { .perf-cards-grid { grid-template-columns: 1fr; } }
        .perf-card {
            background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1);
            border-radius: 12px; padding: 20px;
        }
        .perf-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
        .perf-provider { display: flex; align-items: center; gap: 10px; }
        .perf-provider strong { font-size: 15px; color: white; }
        .perf-status { width: 10px; height: 10px; border-radius: 50%; }
        .perf-status.green { background: #10b981; box-shadow: 0 0 10px rgba(16, 185, 129, 0.5); }
        .perf-status.red { background: #ef4444; box-shadow: 0 0 10px rgba(239, 68, 68, 0.5); }
        .perf-metric { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
        .perf-metric > span:first-child { width: 90px; font-size: 13px; color: #94a3b8; }
        .perf-bar { flex: 1; height: 8px; background: rgba(255,255,255,0.1); border-radius: 4px; overflow: hidden; }
        .perf-fill { height: 100%; border-radius: 4px; }
        .perf-fill.green { background: linear-gradient(90deg, #10b981, #34d399); }
        .perf-fill.orange { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
        .perf-fill.purple { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }
        .perf-fill.yellow { background: linear-gradient(90deg, #eab308, #fbbf24); }
        .perf-fill.cyan { background: linear-gradient(90deg, #06b6d4, #22d3ee); }
        .perf-value { width: 60px; text-align: right; font-size: 13px; font-weight: 600; color: white; }
        .perf-value.green { color: #34d399; }
        .perf-value.yellow { color: #fbbf24; }
        .perf-row { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px solid rgba(255,255,255,0.05); }
        .perf-row span:first-child { font-size: 13px; color: #64748b; }
        .perf-row span:last-child { font-size: 13px; color: white; font-weight: 500; }

        /* ========== SETTINGS PAGE ========== */
        .settings-tabs {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }
        .settings-tab {
            padding: 10px 16px;
            background: transparent;
            border: none;
            color: #94a3b8;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.2s;
            border-radius: 8px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .settings-tab i { font-size: 13px; }
        .settings-tab:hover { color: white; background: rgba(255,255,255,0.05); }
        .settings-tab.active { color: #6366f1; }
        .settings-tab-content { display: none; }
        .settings-tab-content.active { display: block; }

        .settings-section {
            background: var(--overlay-bg);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 24px;
            margin-bottom: 24px;
        }
        .settings-section-header {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 24px;
        }
        .settings-icon-box {
            width: 48px;
            height: 48px;
            background: rgba(99, 102, 241, 0.15);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .settings-icon-box i { color: #818cf8; font-size: 20px; }
        .settings-section-header h3 { margin: 0; font-size: 18px; font-weight: 600; color: white; }
        .settings-section-header p { margin: 4px 0 0 0; font-size: 14px; color: #94a3b8; }

        /* Theme Selection Grid */
        .theme-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
        }
        @media (max-width: 800px) { .theme-grid { grid-template-columns: 1fr; } }

        .theme-card {
            display: block;
            cursor: pointer;
            background: var(--overlay-bg-light);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            overflow: hidden;
            transition: all 0.2s;
        }
        .theme-card:hover { border-color: rgba(255,255,255,0.15); }
        .theme-card.selected { border-color: #14b8a6; }
        .theme-card input { display: none; }

        .theme-card-inner {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 16px;
        }
        .theme-radio {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 2px solid rgba(255,255,255,0.3);
            flex-shrink: 0;
        }
        .theme-radio.blue { background: #3b82f6; border-color: #3b82f6; }
        .theme-radio.purple { background: #a855f7; border-color: #a855f7; }
        .theme-info { flex: 1; }
        .theme-info strong { display: block; color: white; font-size: 14px; margin-bottom: 2px; }
        .theme-info span { font-size: 12px; color: #94a3b8; }
        .theme-check {
            width: 24px;
            height: 24px;
            background: #14b8a6;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .theme-check i { color: white; font-size: 12px; }

        .theme-preview {
            height: 80px;
            margin: 0 16px 16px 16px;
            border-radius: 8px;
        }
        .theme-preview.blue { background: #3b82f6; }
        .theme-preview.white { background: linear-gradient(135deg, #f8fafc, #e2e8f0); }
        .theme-preview.gradient { background: linear-gradient(135deg, #8b5cf6, #ec4899); }
        .theme-preview.dark { background: linear-gradient(135deg, #1e293b, #334155); }

        .section-title {
            font-size: 16px;
            font-weight: 600;
            color: white;
            margin: 0 0 20px 0;
        }

        .option-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 0;
            border-bottom: 1px solid rgba(255,255,255,0.05);
        }
        .option-row:last-child { border-bottom: none; }
        .option-info strong { display: block; color: white; font-size: 14px; margin-bottom: 2px; }
        .option-info span { font-size: 13px; color: #94a3b8; }

        .upload-btn {
            padding: 10px 20px;
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            border: none;
            border-radius: 8px;
            color: white;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .upload-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(99,102,241,0.4); }

        .gradient-btn {
            background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
            color: white !important;
            border: none !important;
        }
        .outline-btn {
            background: transparent !important;
            border: 1px solid rgba(99,102,241,0.5) !important;
            color: #818cf8 !important;
        }
        .outline-btn:hover { background: rgba(99,102,241,0.1) !important; }
        .outline-btn.small { padding: 8px 16px; font-size: 13px; }
        .text-btn {
            background: none;
            border: none;
            color: #818cf8;
            cursor: pointer;
            font-size: 14px;
        }
        .text-btn:hover { color: #a5b4fc; }

        /* Toggle Switch */
        .toggle-switch {
            position: relative;
            display: inline-block;
            width: 48px;
            height: 26px;
        }
        .toggle-switch input { opacity: 0; width: 0; height: 0; }
        .toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(255,255,255,0.1);
            border-radius: 26px;
            transition: 0.3s;
        }
        .toggle-slider:before {
            position: absolute;
            content: "";
            height: 20px;
            width: 20px;
            left: 3px;
            bottom: 3px;
            background: white;
            border-radius: 50%;
            transition: 0.3s;
        }
        .toggle-switch input:checked + .toggle-slider { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
        .toggle-switch input:checked + .toggle-slider:before { transform: translateX(22px); }

        /* Team Management */
        .team-member-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px;
            background: rgba(255,255,255,0.03);
            border-radius: 12px;
            margin-bottom: 16px;
        }
        .team-member-info { display: flex; align-items: center; gap: 12px; }
        .team-avatar {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 600;
            font-size: 14px;
        }
        .team-member-info strong { display: block; color: white; font-size: 14px; }
        .team-member-info span { font-size: 12px; color: #94a3b8; }
        .role-badge {
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
        }
        .role-badge.owner { background: rgba(99,102,241,0.2); color: #818cf8; }

        /* Billing */
        .plan-card {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(139,92,246,0.1));
            border: 1px solid rgba(99,102,241,0.2);
            border-radius: 12px;
            margin-bottom: 20px;
        }
        .plan-badge {
            padding: 6px 12px;
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            color: white;
            margin-bottom: 8px;
            display: inline-block;
        }
        .plan-price { font-size: 28px; font-weight: 700; color: white; }
        .plan-price span { font-size: 14px; font-weight: 400; color: #94a3b8; }

        /* Integrations */
        .integration-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 0;
            border-bottom: 1px solid rgba(255,255,255,0.05);
        }
        .integration-row:last-child { border-bottom: none; }
        .integration-info { display: flex; align-items: center; gap: 12px; }
        .integration-icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }
        .integration-icon.slack { background: rgba(74,21,75,0.3); color: #e91e63; }
        .integration-icon.github { background: rgba(255,255,255,0.1); color: white; }
        .integration-icon.google { background: rgba(66,133,244,0.2); color: #4285f4; }
        .integration-info strong { display: block; color: white; font-size: 14px; }
        .integration-info span { font-size: 12px; color: #94a3b8; }
        .connected-badge {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            background: rgba(16,185,129,0.15);
            border-radius: 20px;
            color: #34d399;
            font-size: 13px;
        }

        /* API Key Field */
        .api-key-field {
            display: flex;
            gap: 8px;
        }
        .api-key-field .form-input { flex: 1; }
        .api-key-field .form-input.mono { font-family: monospace; }
        .copy-btn {
            padding: 0 16px;
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 8px;
            color: #94a3b8;
            cursor: pointer;
            transition: all 0.2s;
        }
        .copy-btn:hover { background: rgba(255,255,255,0.1); color: white; }

        .form-input.mini { width: 140px; }

        /* ===== ENTERPRISE FEATURES ===== */
        /* Organization Switcher */
        .org-switcher {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 16px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            margin: 0 16px 16px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .org-switcher:hover { border-color: var(--accent-primary); }
        .org-switcher i { transition: transform 0.2s; }
        .org-logo {
            width: 36px;
            height: 36px;
            background: linear-gradient(135deg, #3b82f6, #6366f1);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 700;
            font-size: 14px;
        }
        .org-info { flex: 1; min-width: 0; }
        .org-name { font-weight: 600; font-size: 14px; color: var(--text-primary); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .org-tier { font-size: 11px; color: var(--accent-primary); background: rgba(99, 102, 241, 0.15); padding: 2px 8px; border-radius: 4px; }
        .org-switcher i { color: var(--text-muted); font-size: 12px; }

        /* Credits Display */
        .credits-display {
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(6, 182, 212, 0.1));
            border: 1px solid rgba(16, 185, 129, 0.2);
            border-radius: 10px;
            padding: 12px 16px;
            margin: 0 16px 16px;
        }
        .credits-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
        .credits-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
        .credits-value { font-size: 20px; font-weight: 700; color: #10b981; }
        .credits-bar { height: 4px; background: var(--bg-tertiary); border-radius: 2px; margin: 8px 0; overflow: hidden; }
        .credits-bar-fill { height: 100%; background: linear-gradient(90deg, #10b981, #06b6d4); border-radius: 2px; transition: width 0.3s; }
        .credits-footer { display: flex; align-items: center; justify-content: space-between; }
        .credits-remaining { font-size: 12px; color: var(--text-secondary); }
        .buy-credits-btn {
            font-size: 11px;
            padding: 4px 10px;
            background: linear-gradient(135deg, #10b981, #06b6d4);
            border: none;
            border-radius: 6px;
            color: white;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }
        .buy-credits-btn:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); }
        .credits-help-btn {
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 0;
            font-size: 14px;
            transition: color 0.2s;
        }
        .credits-help-btn:hover { color: var(--accent-primary); }
        .credits-tooltip {
            position: absolute;
            left: 16px;
            right: 16px;
            top: 100%;
            margin-top: 8px;
            z-index: 100;
        }
        .credits-tooltip-content {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 16px;
            box-shadow: var(--shadow-lg);
        }
        .credits-tooltip-content h4 {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-primary);
            margin: 0 0 8px 0;
        }
        .credits-tooltip-content p {
            font-size: 12px;
            color: var(--text-secondary);
            margin: 0 0 8px 0;
            line-height: 1.4;
        }
        .credits-tooltip-content ul {
            font-size: 12px;
            color: var(--text-secondary);
            margin: 0 0 8px 0;
            padding-left: 16px;
        }
        .credits-tooltip-content li { margin-bottom: 4px; }
        .tooltip-close {
            width: 100%;
            padding: 8px;
            background: var(--accent-primary);
            border: none;
            border-radius: 6px;
            color: white;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            margin-top: 8px;
        }

        /* Admin Navigation */
        .admin-nav {
            margin: 16px 0;
            padding-top: 16px;
            border-top: 1px solid var(--border-color);
        }
        .admin-nav-label {
            font-size: 10px;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--text-muted);
            padding: 8px 16px;
            margin-bottom: 4px;
            display: flex;
            align-items: center;
            gap: 8px;
            border-radius: 6px;
            transition: background 0.2s;
        }
        .admin-nav-label:hover {
            background: var(--bg-hover);
        }
        .admin-nav-label i {
            margin-left: auto;
            transition: transform 0.2s;
        }
        .admin-badge {
            font-size: 9px;
            padding: 2px 6px;
            background: rgba(239, 68, 68, 0.15);
            color: #ef4444;
            border-radius: 4px;
            font-weight: 600;
        }

        /* Demo Data Badge */
        .demo-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 10px;
            padding: 3px 8px;
            background: rgba(251, 191, 36, 0.15);
            color: #f59e0b;
            border-radius: 4px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .demo-badge i { font-size: 8px; }

        /* Dismissible Warning Banner */
        .warning-banner {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 16px;
            background: rgba(239, 68, 68, 0.1);
            border: 1px solid rgba(239, 68, 68, 0.2);
            border-radius: 10px;
            margin: 0 24px 16px;
            color: #fca5a5;
            font-size: 13px;
        }
        .warning-banner.hidden { display: none; }
        .warning-banner i { color: #ef4444; }
        .warning-banner code { background: rgba(0,0,0,0.3); padding: 2px 8px; border-radius: 4px; font-size: 12px; }
        .retry-btn {
            padding: 6px 12px;
            background: rgba(239, 68, 68, 0.2);
            border: 1px solid rgba(239, 68, 68, 0.3);
            border-radius: 6px;
            color: #fca5a5;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .retry-btn:hover { background: rgba(239, 68, 68, 0.3); }
        .dismiss-btn {
            padding: 4px;
            background: transparent;
            border: none;
            color: #fca5a5;
            cursor: pointer;
            opacity: 0.7;
            margin-left: auto;
        }
        .dismiss-btn:hover { opacity: 1; }

        /* Confirmation Modal */
        .confirm-modal {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.7);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 2000;
        }
        .confirm-modal.open { display: flex; }
        .confirm-dialog {
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 24px;
            max-width: 400px;
            width: 90%;
            text-align: center;
        }
        .confirm-icon {
            width: 56px;
            height: 56px;
            background: rgba(239, 68, 68, 0.15);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 16px;
        }
        .confirm-icon i { color: #ef4444; font-size: 24px; }
        .confirm-title { font-size: 18px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; }
        .confirm-message { font-size: 14px; color: var(--text-secondary); margin-bottom: 24px; line-height: 1.5; }
        .confirm-actions { display: flex; gap: 12px; justify-content: center; }
        .confirm-btn {
            padding: 10px 24px;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }
        .confirm-btn.cancel {
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            color: var(--text-primary);
        }
        .confirm-btn.cancel:hover { background: var(--bg-hover); }
        .confirm-btn.danger {
            background: #ef4444;
            border: none;
            color: white;
        }
        .confirm-btn.danger:hover { background: #dc2626; }

        /* Loading Skeleton */
        .skeleton {
            background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-hover) 50%, var(--bg-tertiary) 75%);
            background-size: 200% 100%;
            animation: skeleton-loading 1.5s infinite;
            border-radius: 6px;
        }
        @keyframes skeleton-loading {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }
        @keyframes slideIn {
            from { transform: translateX(100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }
        @keyframes fadeOut {
            from { opacity: 1; }
            to { opacity: 0; transform: translateY(10px); }
        }
        .skeleton-text { height: 16px; margin-bottom: 8px; }
        .skeleton-text.short { width: 60%; }
        .skeleton-card { height: 120px; border-radius: 12px; }

        /* Empty State with CTA */
        .empty-state {
            text-align: center;
            padding: 48px 24px;
        }
        .empty-state-icon {
            width: 80px;
            height: 80px;
            background: var(--bg-tertiary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 24px;
        }
        .empty-state-icon i { font-size: 32px; color: var(--text-muted); }
        .empty-state h3 { font-size: 18px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; }
        .empty-state p { font-size: 14px; color: var(--text-secondary); margin-bottom: 24px; max-width: 300px; margin-left: auto; margin-right: auto; }
        .empty-state .action-btn { display: inline-flex; }

        /* Admin Placeholder Styles */
        .admin-placeholder {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 80px 40px;
            text-align: center;
            background: var(--bg-tertiary);
            border-radius: 16px;
            border: 2px dashed var(--border-color);
        }
        .admin-placeholder i {
            font-size: 64px;
            color: var(--accent-primary);
            margin-bottom: 24px;
            opacity: 0.7;
        }
        .admin-placeholder h3 {
            font-size: 24px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 12px;
        }
        .admin-placeholder p {
            font-size: 16px;
            color: var(--text-secondary);
            max-width: 400px;
            line-height: 1.6;
        }
        .admin-placeholder .coming-soon-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-top: 24px;
            padding: 8px 16px;
            background: rgba(99, 102, 241, 0.15);
            color: var(--accent-primary);
            border-radius: 20px;
            font-size: 13px;
            font-weight: 500;
        }
        .admin-feature-preview {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 16px;
            margin-top: 32px;
            width: 100%;
            max-width: 600px;
        }
        .admin-feature-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 16px;
            background: var(--bg-card);
            border-radius: 10px;
            border: 1px solid var(--border-color);
        }
        .admin-feature-item i {
            font-size: 20px;
            color: var(--accent-primary);
            margin-bottom: 0;
            opacity: 1;
        }
        .admin-feature-item span {
            font-size: 14px;
            color: var(--text-secondary);
        }

        /* ===== MOBILE RESPONSIVENESS ===== */
        /* Mobile menu toggle button */
        .mobile-menu-toggle {
            display: none;
            position: fixed;
            top: 12px;
            left: 12px;
            z-index: 1001;
            width: 44px;
            height: 44px;
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            color: var(--text-primary);
            cursor: pointer;
            align-items: center;
            justify-content: center;
            font-size: 20px;
        }

        /* Tablet and below */
        @media (max-width: 1024px) {
            .sidebar {
                position: fixed;
                left: -280px;
                top: 0;
                bottom: 0;
                z-index: 1000;
                width: 280px;
                transition: left 0.3s ease;
            }
            .sidebar.open { left: 0; }

            .mobile-menu-toggle { display: flex; }

            .main-content {
                margin-left: 0;
                width: 100%;
            }

            .top-bar {
                padding-left: 60px;
                flex-wrap: wrap;
                gap: 8px;
            }

            .status-badge { font-size: 11px; padding: 4px 8px; }

            .memory-metrics {
                grid-template-columns: repeat(2, 1fr);
            }

            .tier-cards-row {
                grid-template-columns: 1fr;
            }

            .agents-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        /* Mobile phones */
        @media (max-width: 640px) {
            .mobile-menu-toggle { left: 8px; top: 8px; }

            .top-bar {
                padding: 8px 8px 8px 56px;
                justify-content: flex-end;
            }

            .top-bar .status-badge:not(:last-child) { display: none; }

            .memory-metrics {
                grid-template-columns: 1fr;
            }

            .agents-grid {
                grid-template-columns: 1fr;
            }

            .gradient-title { font-size: 24px; }
            .page-subtitle { font-size: 13px; }

            .workspace-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 12px;
            }

            .workspace-actions {
                flex-wrap: wrap;
                width: 100%;
            }

            .action-btn {
                flex: 1;
                min-width: 120px;
                justify-content: center;
            }

            .warning-banner {
                flex-direction: column;
                text-align: center;
                gap: 8px;
            }

            .chat-messages { padding: 12px; }
            .message { max-width: 100%; }

            .bi-metrics-grid { grid-template-columns: 1fr; }
            .bi-three-col { grid-template-columns: 1fr; }

            .api-hero { padding: 16px; }
            .api-hero-badges { flex-wrap: wrap; gap: 6px; }
            .api-hero-stats { gap: 16px; }
        }

        /* Overlay for mobile menu */
        .mobile-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 999;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .mobile-overlay.open {
            display: block;
            opacity: 1;
        }

        /* ===========================================
           VALUE PROPOSITION COMPONENTS
           =========================================== */

        /* 100% Uptime Hero Section */
        .uptime-hero {
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(6, 182, 212, 0.1));
            border: 2px solid rgba(16, 185, 129, 0.3);
            border-radius: 16px;
            padding: 32px;
            margin-bottom: 24px;
            position: relative;
            overflow: hidden;
        }
        .uptime-hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #10b981, #06b6d4, #10b981);
            background-size: 200% 100%;
            animation: shimmer 3s linear infinite;
        }
        @keyframes shimmer {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }
        .uptime-hero-header {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 16px;
        }
        .uptime-shield {
            width: 64px;
            height: 64px;
            background: linear-gradient(135deg, #10b981, #059669);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            color: white;
            box-shadow: 0 4px 20px rgba(16, 185, 129, 0.4);
        }
        .uptime-title {
            font-size: 2rem;
            font-weight: 800;
            background: linear-gradient(135deg, #10b981, #06b6d4);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin: 0;
        }
        .uptime-subtitle {
            color: var(--text-secondary);
            font-size: 1.1rem;
            margin: 8px 0 0 0;
        }
        .uptime-stats {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            margin-top: 24px;
        }
        .uptime-stat {
            text-align: center;
            padding: 20px;
            background: var(--bg-card);
            border-radius: 12px;
            border: 1px solid var(--border-color);
        }
        .uptime-stat-value {
            font-size: 2rem;
            font-weight: 700;
            color: #10b981;
            display: block;
        }
        .uptime-stat-value.zero {
            color: #10b981;
        }
        .uptime-stat-value.failover {
            color: #06b6d4;
        }
        .uptime-stat-value.saved {
            color: #f59e0b;
        }
        .uptime-stat-value.days {
            color: #8b5cf6;
        }
        .uptime-stat-label {
            font-size: 0.85rem;
            color: var(--text-secondary);
            margin-top: 4px;
            display: block;
        }
        .uptime-guarantee-badge {
            position: absolute;
            top: 20px;
            right: 20px;
            background: linear-gradient(135deg, #10b981, #059669);
            color: white;
            padding: 8px 16px;
            border-radius: 20px;
            font-weight: 700;
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
        }

        /* Provider Status Panel */
        .provider-status-panel {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 24px;
        }
        .provider-status-panel h3 {
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 0 0 16px 0;
            font-size: 1.1rem;
        }
        .provider-status-panel h3 .live-dot {
            width: 8px;
            height: 8px;
            background: #10b981;
            border-radius: 50%;
            animation: pulse-live 2s infinite;
        }
        @keyframes pulse-live {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.5; transform: scale(1.2); }
        }
        .provider-status-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .provider-status-item {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 14px 16px;
            background: var(--bg-tertiary);
            border-radius: 10px;
            transition: all 0.2s ease;
        }
        .provider-status-item:hover {
            background: var(--bg-hover);
        }
        .provider-status-item.warning {
            background: rgba(245, 158, 11, 0.1);
            border: 1px solid rgba(245, 158, 11, 0.3);
        }
        .provider-status-item.error {
            background: rgba(239, 68, 68, 0.1);
            border: 1px solid rgba(239, 68, 68, 0.3);
        }
        .provider-logo {
            width: 36px;
            height: 36px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }
        .provider-logo.openai { background: rgba(16, 185, 129, 0.2); color: #10b981; }
        .provider-logo.claude { background: rgba(168, 85, 247, 0.2); color: #a855f7; }
        .provider-logo.gemini { background: rgba(59, 130, 246, 0.2); color: #3b82f6; }
        .provider-logo.cohere { background: rgba(245, 158, 11, 0.2); color: #f59e0b; }
        .provider-name {
            font-weight: 600;
            min-width: 140px;
        }
        .status-indicator {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 0.85rem;
            min-width: 120px;
        }
        .status-indicator.green { color: #10b981; }
        .status-indicator.yellow { color: #f59e0b; }
        .status-indicator.red { color: #ef4444; }
        .provider-latency {
            font-weight: 600;
            min-width: 80px;
            text-align: right;
        }
        .provider-latency.good { color: #10b981; }
        .provider-latency.medium { color: #f59e0b; }
        .provider-latency.slow { color: #ef4444; }
        .failover-indicator {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #06b6d4;
            font-size: 0.85rem;
            margin-left: auto;
            padding: 4px 10px;
            background: rgba(6, 182, 212, 0.1);
            border-radius: 6px;
        }
        .failover-indicator i {
            animation: rotate-failover 1s ease-in-out;
        }
        @keyframes rotate-failover {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(180deg); }
        }

        /* Failover Notification Toast */
        .failover-notification {
            position: fixed;
            bottom: 100px;
            right: 20px;
            background: linear-gradient(135deg, #06b6d4, #0891b2);
            color: white;
            padding: 16px 20px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            gap: 12px;
            box-shadow: 0 8px 32px rgba(6, 182, 212, 0.4);
            z-index: 1000;
            animation: slideInRight 0.3s ease;
            max-width: 400px;
        }
        @keyframes slideInRight {
            from { transform: translateX(100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }
        .failover-notification i {
            font-size: 1.2rem;
        }
        .failover-notification-content {
            flex: 1;
        }
        .failover-notification-title {
            font-weight: 600;
            display: block;
        }
        .failover-notification-time {
            font-size: 0.8rem;
            opacity: 0.8;
        }

        /* Unlimited Context Hero */
        .unlimited-hero {
            background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(168, 85, 247, 0.1));
            border: 2px solid rgba(139, 92, 246, 0.3);
            border-radius: 16px;
            padding: 32px;
            margin-bottom: 24px;
            position: relative;
            overflow: hidden;
        }
        .unlimited-hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #8b5cf6, #a855f7, #8b5cf6);
            background-size: 200% 100%;
            animation: shimmer 3s linear infinite;
        }
        .unlimited-hero-header {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 16px;
        }
        .unlimited-icon {
            width: 64px;
            height: 64px;
            background: linear-gradient(135deg, #8b5cf6, #7c3aed);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            color: white;
            box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4);
        }
        .unlimited-title {
            font-size: 2rem;
            font-weight: 800;
            background: linear-gradient(135deg, #8b5cf6, #a855f7);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin: 0;
        }
        .unlimited-subtitle {
            color: var(--text-secondary);
            font-size: 1.1rem;
            margin: 8px 0 0 0;
        }
        .unlimited-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-top: 24px;
        }
        .unlimited-stat {
            text-align: center;
            padding: 20px;
            background: var(--bg-card);
            border-radius: 12px;
            border: 1px solid var(--border-color);
        }
        .unlimited-stat-value {
            font-size: 1.8rem;
            font-weight: 700;
            color: #8b5cf6;
            display: block;
        }
        .unlimited-stat-label {
            font-size: 0.85rem;
            color: var(--text-secondary);
            margin-top: 4px;
            display: block;
        }
        .unlimited-badge {
            position: absolute;
            top: 20px;
            right: 20px;
            background: linear-gradient(135deg, #8b5cf6, #7c3aed);
            color: white;
            padding: 8px 16px;
            border-radius: 20px;
            font-weight: 700;
            font-size: 1.2rem;
            display: flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
        }

        /* Competitor Comparison Table */
        .comparison-card {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 24px;
            margin-bottom: 24px;
        }
        .comparison-card h3 {
            margin: 0 0 16px 0;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .comparison-table {
            width: 100%;
            border-collapse: collapse;
        }
        .comparison-table th,
        .comparison-table td {
            padding: 14px 16px;
            text-align: center;
            border-bottom: 1px solid var(--border-color);
        }
        .comparison-table th {
            background: var(--bg-tertiary);
            font-weight: 600;
            color: var(--text-secondary);
        }
        .comparison-table th:first-child,
        .comparison-table td:first-child {
            text-align: left;
        }
        .comparison-table th:last-child {
            background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(99, 102, 241, 0.15));
            color: #8b5cf6;
        }
        .comparison-table td.highlight {
            background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(99, 102, 241, 0.1));
            color: #8b5cf6;
            font-weight: 700;
        }
        .comparison-table td.limited {
            color: var(--text-secondary);
        }
        .comparison-table .infinity {
            font-size: 1.3rem;
            font-weight: 700;
        }

        /* Token Savings Card */
        .token-savings-card {
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(234, 179, 8, 0.1));
            border: 1px solid rgba(245, 158, 11, 0.3);
            border-radius: 12px;
            padding: 24px;
            margin-bottom: 24px;
        }
        .token-savings-card h3 {
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 0 0 16px 0;
            color: #f59e0b;
        }
        .savings-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
        }
        .savings-stat {
            text-align: center;
            padding: 16px;
            background: var(--bg-card);
            border-radius: 10px;
        }
        .savings-value {
            font-size: 1.8rem;
            font-weight: 700;
            color: #10b981;
            display: block;
        }
        .savings-label {
            font-size: 0.85rem;
            color: var(--text-secondary);
            display: block;
            margin-top: 4px;
        }
        .savings-desc {
            margin: 16px 0 0 0;
            color: var(--text-secondary);
            font-size: 0.95rem;
        }
        .savings-percent {
            color: #10b981;
            font-weight: 700;
        }

        /* Memory Capacity Visualization */
        .memory-capacity-card {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 24px;
            margin-bottom: 24px;
        }
        .capacity-bar-container {
            position: relative;
            height: 40px;
            background: var(--bg-tertiary);
            border-radius: 20px;
            overflow: hidden;
            margin-bottom: 16px;
        }
        .capacity-bar-fill {
            height: 100%;
            background: linear-gradient(90deg, #8b5cf6, #a855f7, #c084fc);
            background-size: 200% 100%;
            animation: gradientMove 3s ease infinite;
            border-radius: 20px;
        }
        @keyframes gradientMove {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }
        .capacity-infinity {
            position: absolute;
            right: 16px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 1.5rem;
            font-weight: 700;
            color: white;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        }
        .capacity-stats {
            display: flex;
            justify-content: center;
            gap: 24px;
            color: var(--text-secondary);
            font-size: 0.95rem;
        }
        .capacity-stats span {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        /* Top Bar Uptime Badge */
        .uptime-status-badge {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 14px;
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(6, 182, 212, 0.15));
            border: 1px solid rgba(16, 185, 129, 0.4);
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 600;
            color: #10b981;
        }
        .uptime-status-badge i {
            font-size: 1rem;
        }
        .uptime-status-badge .uptime-days {
            font-weight: 700;
            color: #06b6d4;
        }

        @media (max-width: 768px) {
            .uptime-stats { grid-template-columns: repeat(2, 1fr); }
            .unlimited-stats { grid-template-columns: 1fr; }
            .comparison-table { font-size: 0.85rem; }
            .comparison-table th, .comparison-table td { padding: 10px 8px; }
        }

        /* ===== MEMORY ADVANTAGE HERO ===== */
        .memory-advantage-hero {
            background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(99, 102, 241, 0.1));
            border: 2px solid rgba(139, 92, 246, 0.3);
            border-radius: 20px;
            padding: 32px;
            margin-bottom: 24px;
            position: relative;
            overflow: hidden;
        }
        .memory-advantage-hero::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 4px;
            background: linear-gradient(90deg, #8b5cf6, #6366f1, #8b5cf6);
            background-size: 200% 100%;
            animation: shimmer 3s linear infinite;
        }
        .memory-advantage-content {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-bottom: 24px;
        }
        .memory-advantage-icon {
            width: 72px; height: 72px;
            background: linear-gradient(135deg, #8b5cf6, #6366f1);
            border-radius: 18px;
            display: flex; align-items: center; justify-content: center;
            font-size: 32px; color: white;
            box-shadow: 0 8px 32px rgba(139, 92, 246, 0.4);
            flex-shrink: 0;
        }
        .memory-advantage-text h2 {
            font-size: 1.8rem; font-weight: 800;
            background: linear-gradient(135deg, #8b5cf6, #6366f1);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            background-clip: text; margin: 0 0 8px 0;
        }
        .memory-advantage-text p {
            font-size: 1rem; color: var(--text-secondary); margin: 0; line-height: 1.5;
        }
        .memory-advantage-text strong { color: #8b5cf6; }
        .memory-stats-row {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px;
        }
        @media (max-width: 1024px) { .memory-stats-row { grid-template-columns: repeat(2, 1fr); } }
        .memory-stat-item {
            text-align: center;
            padding: 16px;
            background: var(--bg-card);
            border-radius: 12px;
            border: 1px solid var(--border-color);
        }
        .memory-stat-value {
            display: block;
            font-size: 1.6rem; font-weight: 700;
            color: #8b5cf6; line-height: 1; margin-bottom: 6px;
        }
        .memory-stat-label {
            font-size: 0.75rem; color: var(--text-muted);
            text-transform: uppercase; letter-spacing: 0.5px;
        }

        /* Empty State Card */
        .empty-state-card {
            background: var(--bg-card);
            border: 2px dashed var(--border-color);
            border-radius: 20px;
            padding: 48px 32px;
            text-align: center;
            margin-bottom: 24px;
        }
        .empty-state-card .empty-state-icon {
            width: 80px; height: 80px;
            background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(99, 102, 241, 0.1));
            border-radius: 20px;
            display: flex; align-items: center; justify-content: center;
            margin: 0 auto 24px;
        }
        .empty-state-card .empty-state-icon i { font-size: 36px; color: #8b5cf6; }
        .empty-state-card h3 { font-size: 1.4rem; font-weight: 700; color: var(--text-primary); margin: 0 0 12px 0; }
        .empty-state-card > p { font-size: 1rem; color: var(--text-secondary); max-width: 480px; margin: 0 auto 32px; line-height: 1.6; }
        .empty-state-actions { display: flex; justify-content: center; gap: 16px; margin-bottom: 32px; flex-wrap: wrap; }
        .empty-state-actions .action-btn { padding: 14px 28px; border-radius: 12px; font-size: 15px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; transition: all 0.2s; }
        .empty-state-actions .action-btn.primary { background: linear-gradient(135deg, #8b5cf6, #6366f1); border: none; color: white; box-shadow: 0 4px 20px rgba(139, 92, 246, 0.3); }
        .empty-state-actions .action-btn.primary:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(139, 92, 246, 0.4); }
        .empty-state-actions .action-btn.secondary { background: var(--bg-tertiary); border: 1px solid var(--border-color); color: var(--text-primary); }
        .empty-state-options { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; }
        .option-item { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 0.9rem; }
        .option-item i { color: var(--accent-primary); font-size: 1.1rem; }

        /* Chat Container & Messages */
        .chat-container { display: flex; flex-direction: column; flex: 1; min-height: 400px; background: var(--bg-card); border-radius: 16px; border: 1px solid var(--border-color); overflow: hidden; }
        .messages-list { flex: 1; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 20px; }
        .message { display: flex; gap: 14px; max-width: 85%; }
        .message.user { margin-left: auto; flex-direction: row-reverse; }
        .message-avatar { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 16px; }
        .message.user .message-avatar { background: linear-gradient(135deg, #6366f1, #8b5cf6); color: white; }
        .message.ai .message-avatar { background: linear-gradient(135deg, #10b981, #06b6d4); color: white; }
        .message-content { flex: 1; }
        .message-text { padding: 16px 20px; border-radius: 16px; font-size: 0.95rem; line-height: 1.6; }
        .message.user .message-text { background: linear-gradient(135deg, #6366f1, #8b5cf6); color: white; border-bottom-right-radius: 4px; }
        .message.ai .message-text { background: var(--bg-tertiary); color: var(--text-primary); border-bottom-left-radius: 4px; }

        /* Chat Input Area */
        .chat-input-area { padding: 20px 24px; background: var(--bg-secondary); border-top: 1px solid var(--border-color); }
        .chat-input-wrapper { display: flex; gap: 12px; align-items: center; }
        .chat-input { flex: 1; padding: 14px 20px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 12px; color: var(--text-primary); font-size: 0.95rem; transition: all 0.2s; }
        .chat-input:focus { outline: none; border-color: #8b5cf6; box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15); }
        .chat-input::placeholder { color: var(--text-muted); }
        .send-btn { width: 48px; height: 48px; background: linear-gradient(135deg, #8b5cf6, #6366f1); border: none; border-radius: 12px; color: white; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
        .send-btn:hover { transform: scale(1.05); box-shadow: 0 4px 16px rgba(139, 92, 246, 0.4); }
        .chat-input-hint { display: flex; gap: 20px; margin-top: 10px; font-size: 0.75rem; color: var(--text-muted); }
        .chat-input-hint span { display: flex; align-items: center; gap: 6px; }
        .chat-input-hint i { color: #8b5cf6; }

        /* ===== API KEYS VIEW ===== */
        .api-keys-hero { display: flex; justify-content: space-between; align-items: center; gap: 24px; background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(234, 179, 8, 0.1)); border: 2px solid rgba(245, 158, 11, 0.3); border-radius: 20px; padding: 32px; margin-bottom: 24px; }
        .api-keys-hero-content { display: flex; align-items: center; gap: 20px; }
        .api-keys-hero-icon { width: 64px; height: 64px; background: linear-gradient(135deg, #f59e0b, #eab308); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 28px; color: white; box-shadow: 0 8px 24px rgba(245, 158, 11, 0.3); }
        .api-keys-hero-text h2 { font-size: 1.6rem; font-weight: 700; color: var(--text-primary); margin: 0 0 8px 0; }
        .api-keys-hero-text p { font-size: 0.95rem; color: var(--text-secondary); margin: 0; max-width: 500px; }

        /* Failover Configuration */
        .failover-config-section { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 16px; padding: 24px; }
        .failover-config-section h3 { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; color: var(--text-primary); margin: 0 0 20px 0; }
        .failover-config-section h3 i { color: var(--accent-primary); }
        .failover-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
        @media (max-width: 768px) { .failover-grid { grid-template-columns: 1fr; } }
        .failover-option { padding: 16px; background: var(--bg-tertiary); border-radius: 10px; }
        .failover-option-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
        .failover-option-header span { font-weight: 600; color: var(--text-primary); }
        .failover-option p { font-size: 0.85rem; color: var(--text-muted); margin: 0; }
        .toggle-switch { position: relative; width: 44px; height: 24px; }
        .toggle-switch input { opacity: 0; width: 0; height: 0; }
        .toggle-slider { position: absolute; cursor: pointer; inset: 0; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 24px; transition: 0.3s; }
        .toggle-slider::before { content: ''; position: absolute; height: 18px; width: 18px; left: 2px; bottom: 2px; background: white; border-radius: 50%; transition: 0.3s; }
        .toggle-switch input:checked + .toggle-slider { background: #10b981; border-color: #10b981; }
        .toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }

        /* ===== ANALYTICS VIEW ===== */
        .analytics-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; gap: 24px; }
        .analytics-title h2 { display: flex; align-items: center; gap: 12px; font-size: 1.6rem; font-weight: 700; color: var(--text-primary); margin: 0 0 8px 0; }
        .analytics-title h2 i { color: var(--accent-primary); }
        .analytics-title p { font-size: 0.95rem; color: var(--text-secondary); margin: 0; }
        .analytics-controls { display: flex; gap: 12px; }
        .analytics-tabs { display: flex; gap: 8px; padding: 8px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; margin-bottom: 24px; }
        .analytics-tab { flex: 1; padding: 12px 20px; background: transparent; border: none; border-radius: 8px; color: var(--text-muted); font-size: 0.9rem; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.2s; }
        .analytics-tab:hover { color: var(--text-primary); background: var(--bg-tertiary); }
        .analytics-tab.active { background: var(--accent-primary); color: white; }
        .analytics-empty-state { background: var(--bg-card); border: 2px dashed var(--border-color); border-radius: 20px; padding: 64px 32px; text-align: center; }
        .analytics-empty-state .empty-state-icon { width: 80px; height: 80px; background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.1)); border-radius: 20px; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; }
        .analytics-empty-state .empty-state-icon i { font-size: 36px; color: var(--accent-primary); }
        .analytics-empty-state h3 { font-size: 1.4rem; font-weight: 700; color: var(--text-primary); margin: 0 0 12px 0; }
        .analytics-empty-state p { font-size: 1rem; color: var(--text-secondary); max-width: 480px; margin: 0 auto 32px; line-height: 1.6; }

        /* ===== ROUTING EMPTY STATES ===== */
        .routing-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; gap: 24px; }
        .routing-title h2 { display: flex; align-items: center; gap: 12px; font-size: 1.6rem; font-weight: 700; color: var(--text-primary); margin: 0 0 8px 0; }
        .routing-title h2 i { color: #10b981; }
        .routing-title p { font-size: 0.95rem; color: var(--text-secondary); margin: 0; }
        .routing-controls { display: flex; gap: 12px; }
        .routing-empty-state { background: var(--bg-card); border: 2px dashed var(--border-color); border-radius: 20px; padding: 64px 32px; text-align: center; }
        .routing-empty-state .empty-state-icon { width: 80px; height: 80px; background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(6, 182, 212, 0.1)); border-radius: 20px; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; }
        .routing-empty-state .empty-state-icon i { font-size: 36px; color: #10b981; }
        .routing-empty-state h3 { font-size: 1.4rem; font-weight: 700; color: var(--text-primary); margin: 0 0 12px 0; }
        .routing-empty-state > p { font-size: 1rem; color: var(--text-secondary); max-width: 500px; margin: 0 auto 32px; line-height: 1.6; }
        .routing-features { display: flex; justify-content: center; gap: 40px; margin-top: 40px; flex-wrap: wrap; }
        .feature-item { text-align: center; max-width: 180px; }
        .feature-item i { width: 48px; height: 48px; background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(6, 182, 212, 0.1)); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; color: #10b981; font-size: 20px; }
        .feature-item span { display: block; font-size: 1rem; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
        .feature-item p { font-size: 0.85rem; color: var(--text-muted); margin: 0; }

        /* ===== MISSION CONTROL VIEW ===== */
        .mission-control-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 32px;
            padding-bottom: 20px;
            border-bottom: 1px solid var(--border-color);
        }
        .mission-control-header h1 {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 12px;
            margin: 0;
        }
        .mission-control-header h1 i { color: var(--accent-primary); }
        .mission-control-header p {
            font-size: 1rem;
            color: var(--text-secondary);
            margin: 8px 0 0 0;
        }
        .live-indicator {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            background: rgba(16, 185, 129, 0.1);
            border-radius: 20px;
            font-size: 0.85rem;
            color: #10b981;
        }
        .live-dot-pulse {
            width: 8px;
            height: 8px;
            background: #10b981;
            border-radius: 50%;
            animation: pulse 2s ease-in-out infinite;
        }
        @keyframes pulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.5; transform: scale(1.2); }
        }

        /* Value Props Grid */
        .value-props-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 24px;
            margin-bottom: 32px;
        }
        @media (max-width: 1200px) {
            .value-props-grid { grid-template-columns: 1fr; }
        }
        .value-prop-card {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 20px;
            padding: 28px;
            transition: all 0.3s ease;
        }
        .value-prop-card.active { border-color: transparent; }
        .value-prop-card.reliability.active {
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(16, 185, 129, 0.05));
            border: 1px solid rgba(99, 102, 241, 0.2);
        }
        .value-prop-card.memory.active {
            background: linear-gradient(135deg, rgba(139, 92, 246, 0.05), rgba(6, 182, 212, 0.05));
            border: 1px solid rgba(139, 92, 246, 0.2);
        }
        .value-prop-card.setup-needed { border-style: dashed; }

        .value-prop-header {
            display: flex;
            align-items: flex-start;
            gap: 16px;
            margin-bottom: 24px;
        }
        .value-prop-icon {
            width: 56px;
            height: 56px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-size: 24px;
            color: white;
        }
        .value-prop-icon.reliability { background: linear-gradient(135deg, #6366f1, #10b981); }
        .value-prop-icon.memory { background: linear-gradient(135deg, #8b5cf6, #06b6d4); }
        .value-prop-title h2 {
            font-size: 1.4rem;
            font-weight: 700;
            color: var(--text-primary);
            margin: 0 0 6px 0;
        }
        .value-prop-title p {
            font-size: 0.95rem;
            color: var(--text-secondary);
            margin: 0;
            line-height: 1.4;
        }

        /* Value Prop Setup (Empty State) */
        .value-prop-setup {
            text-align: center;
            padding: 24px 0;
        }
        .setup-icon {
            width: 64px;
            height: 64px;
            background: var(--bg-tertiary);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            font-size: 28px;
            color: var(--text-muted);
        }
        .value-prop-setup h3 {
            font-size: 1.2rem;
            font-weight: 600;
            color: var(--text-primary);
            margin: 0 0 10px 0;
        }
        .value-prop-setup p {
            font-size: 0.95rem;
            color: var(--text-secondary);
            max-width: 280px;
            margin: 0 auto 24px;
            line-height: 1.5;
        }
        .setup-actions {
            display: flex;
            gap: 12px;
            justify-content: center;
            flex-wrap: wrap;
        }

        /* Quick Actions Section */
        .quick-actions-section { margin-bottom: 32px; }
        .quick-actions-section h3 {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--text-primary);
            margin: 0 0 16px 0;
        }
        .quick-actions-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px;
        }
        @media (max-width: 1200px) { .quick-actions-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 768px) { .quick-actions-grid { grid-template-columns: 1fr; } }
        .quick-action-card {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 18px 20px;
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.2s ease;
            text-align: left;
            width: 100%;
        }
        .quick-action-card:hover {
            border-color: var(--accent-primary);
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }
        .qa-icon {
            width: 42px;
            height: 42px;
            background: var(--accent-gradient);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .qa-icon i { color: white; font-size: 18px; }
        .qa-content { flex: 1; min-width: 0; }
        .qa-title {
            display: block;
            font-weight: 600;
            color: var(--text-primary);
            font-size: 0.95rem;
        }
        .qa-desc {
            display: block;
            font-size: 0.8rem;
            color: var(--text-muted);
            margin-top: 2px;
        }
        .quick-action-card > i {
            color: var(--text-muted);
            font-size: 14px;
            transition: transform 0.2s ease;
        }
        .quick-action-card:hover > i {
            transform: translateX(4px);
            color: var(--accent-primary);
        }

        /* How It Works Section */
        .how-it-works-section {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 20px;
            padding: 32px;
        }
        .how-it-works-section h3 {
            font-size: 1.2rem;
            font-weight: 600;
            color: var(--text-primary);
            margin: 0 0 24px 0;
            text-align: center;
        }
        .how-it-works-grid {
            display: flex;
            align-items: flex-start;
            justify-content: center;
            gap: 20px;
        }
        @media (max-width: 900px) {
            .how-it-works-grid { flex-direction: column; align-items: stretch; }
            .hiw-arrow { display: none !important; }
        }
        .hiw-step {
            flex: 1;
            max-width: 280px;
            display: flex;
            gap: 16px;
        }
        .hiw-number {
            width: 32px;
            height: 32px;
            background: var(--accent-gradient);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 700;
            font-size: 0.9rem;
            flex-shrink: 0;
        }
        .hiw-content h4 {
            font-size: 1rem;
            font-weight: 600;
            color: var(--text-primary);
            margin: 0 0 8px 0;
        }
        .hiw-content p {
            font-size: 0.9rem;
            color: var(--text-secondary);
            margin: 0;
            line-height: 1.5;
        }
        .hiw-arrow {
            display: flex;
            align-items: center;
            color: var(--text-muted);
            font-size: 20px;
            padding-top: 4px;
        }

        /* ========================================
           SMART API KEY PASTE DETECTION
           ======================================== */
        .api-key-paste-zone {
            border: 2px dashed var(--border-color);
            border-radius: 16px;
            padding: 32px;
            text-align: center;
            background: var(--bg-card);
            transition: all 0.3s ease;
            margin-bottom: 24px;
            position: relative;
        }
        .api-key-paste-zone:hover,
        .api-key-paste-zone.dragover {
            border-color: var(--accent-primary);
            background: rgba(99, 102, 241, 0.05);
        }
        .api-key-paste-zone.dragover {
            transform: scale(1.01);
            box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2);
        }
        .paste-zone-icon {
            font-size: 48px;
            color: var(--text-muted);
            margin-bottom: 16px;
        }
        .paste-zone-title {
            font-size: 1.2rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 8px;
        }
        .paste-zone-subtitle {
            color: var(--text-secondary);
            font-size: 14px;
            margin-bottom: 16px;
        }
        .paste-zone-hint {
            display: flex;
            gap: 16px;
            justify-content: center;
            flex-wrap: wrap;
        }
        .paste-hint-item {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            color: var(--text-muted);
            padding: 6px 12px;
            background: var(--bg-tertiary);
            border-radius: 20px;
        }
        .paste-hint-item i { font-size: 10px; }

        /* Key Detection Feedback */
        .key-detection-feedback {
            display: none;
            padding: 20px;
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            margin-top: 16px;
            animation: slideDown 0.3s ease;
        }
        .key-detection-feedback.visible { display: block; }
        @keyframes slideDown {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .detection-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 16px;
        }
        .detection-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: white;
        }
        .detection-icon.openai { background: #10a37f; }
        .detection-icon.anthropic { background: #cc785c; }
        .detection-icon.google { background: #4285f4; }
        .detection-icon.cohere { background: #39594d; }
        .detection-icon.mistral { background: #f97316; }
        .detection-icon.unknown { background: var(--text-muted); }
        .detection-info h4 {
            font-size: 16px;
            font-weight: 600;
            color: var(--text-primary);
            margin: 0 0 4px 0;
        }
        .detection-status {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
        }
        .detection-status.validating { color: var(--warning); }
        .detection-status.valid { color: var(--success); }
        .detection-status.invalid { color: var(--error); }
        .detection-status i { animation: spin 1s linear infinite; }
        .detection-status.valid i,
        .detection-status.invalid i { animation: none; }
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        .detection-actions {
            display: flex;
            gap: 12px;
            margin-top: 16px;
        }
        .detection-actions button {
            padding: 10px 20px;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }
        .detection-actions .btn-add-key {
            background: var(--accent-gradient);
            border: none;
            color: white;
        }
        .detection-actions .btn-add-key:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
        }
        .detection-actions .btn-cancel {
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            color: var(--text-primary);
        }
        .detection-actions .btn-cancel:hover {
            background: var(--bg-hover);
        }

        /* Multi-key detection */
        .multi-key-list {
            margin-top: 12px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            overflow: hidden;
        }
        .multi-key-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 16px;
            border-bottom: 1px solid var(--border-color);
            background: var(--bg-card);
        }
        .multi-key-item:last-child { border-bottom: none; }
        .multi-key-item .provider-icon {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            color: white;
        }
        .multi-key-item .key-info {
            flex: 1;
        }
        .multi-key-item .key-name {
            font-size: 14px;
            font-weight: 500;
            color: var(--text-primary);
        }
        .multi-key-item .key-preview {
            font-size: 12px;
            color: var(--text-muted);
            font-family: monospace;
        }
        .multi-key-item .key-status {
            font-size: 12px;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .multi-key-item .key-status.valid { color: var(--success); }
        .multi-key-item .key-status.invalid { color: var(--error); }
        .multi-key-item .key-status.validating { color: var(--warning); }

        /* Global paste toast */
        .paste-toast {
            position: fixed;
            top: 80px;
            left: 50%;
            transform: translateX(-50%) translateY(-20px);
            background: var(--bg-secondary);
            border: 1px solid var(--accent-primary);
            border-radius: 12px;
            padding: 16px 24px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
            z-index: 4000;
            display: none;
            align-items: center;
            gap: 12px;
            animation: slideDownToast 0.3s ease;
        }
        .paste-toast.visible {
            display: flex;
        }
        @keyframes slideDownToast {
            from { opacity: 0; transform: translateX(-50%) translateY(-30px); }
            to { opacity: 1; transform: translateX(-50%) translateY(0); }
        }
        .paste-toast-icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            color: white;
        }
        .paste-toast-content {
            flex: 1;
        }
        .paste-toast-title {
            font-weight: 600;
            color: var(--text-primary);
            font-size: 14px;
        }
        .paste-toast-message {
            font-size: 12px;
            color: var(--text-secondary);
        }
        .paste-toast-actions {
            display: flex;
            gap: 8px;
        }
        .paste-toast-actions button {
            padding: 8px 16px;
            border-radius: 6px;
            font-size: 13px;
            cursor: pointer;
        }
        .paste-toast .btn-add {
            background: var(--accent-gradient);
            border: none;
            color: white;
        }
        .paste-toast .btn-dismiss {
            background: transparent;
            border: 1px solid var(--border-color);
            color: var(--text-secondary);
        }

        /* Sidebar Empty States */
        .sidebar-empty-state {
            padding: 20px 16px;
            text-align: center;
        }
        .sidebar-empty-icon {
            font-size: 28px;
            color: var(--text-muted);
            margin-bottom: 12px;
            opacity: 0.5;
        }
        .sidebar-empty-title {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-secondary);
            margin-bottom: 6px;
        }
        .sidebar-empty-text {
            font-size: 12px;
            color: var(--text-muted);
            line-height: 1.4;
            margin-bottom: 12px;
        }
        .sidebar-empty-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 14px;
            background: var(--bg-tertiary);
            border: 1px dashed var(--border-color);
            border-radius: 6px;
            color: var(--text-muted);
            font-size: 12px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .sidebar-empty-btn:hover {
            border-color: var(--accent-primary);
            color: var(--accent-primary);
            background: rgba(99, 102, 241, 0.05);
        }

        /* ========================================
           AI CHAT VIEW - NEW DESIGN
           ======================================== */

        /* AI Chat Container */
        .ai-chat-container {
            display: flex;
            height: 100%;
            background: var(--bg-primary);
        }

        /* AI Chat Main Area */
        .ai-chat-main {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-width: 0;
        }

        /* AI Chat Top Bar */
        .ai-chat-topbar {
            height: 60px;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            padding: 0 24px;
            gap: 16px;
            background: var(--bg-secondary);
        }

        .ai-chat-status {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            color: var(--success);
            font-weight: 500;
        }

        .ai-chat-status .status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--success);
        }

        .ai-chat-breadcrumb {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-left: 24px;
        }

        .ai-chat-back-btn {
            background: transparent;
            border: none;
            color: var(--text-secondary);
            cursor: pointer;
            padding: 6px;
            border-radius: 6px;
            font-size: 18px;
        }

        .ai-chat-back-btn:hover {
            background: var(--bg-hover);
        }

        .ai-chat-project-badge {
            padding: 5px 12px;
            background: rgba(139, 92, 246, 0.1);
            border-radius: 16px;
            font-size: 13px;
            color: #8b5cf6;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .ai-chat-project-badge .project-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #8b5cf6;
        }

        .ai-chat-title {
            color: var(--text-primary);
            font-size: 15px;
            font-weight: 500;
        }

        .ai-chat-search-btn {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 14px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            color: var(--text-secondary);
            cursor: pointer;
            font-size: 13px;
        }

        .ai-chat-search-btn:hover {
            border-color: var(--accent-primary);
        }

        .ai-chat-search-btn .shortcut {
            padding: 3px 8px;
            background: var(--bg-secondary);
            border-radius: 6px;
            font-size: 11px;
            font-weight: 500;
        }

        .ai-chat-kb-toggle {
            padding: 8px 14px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            color: var(--text-secondary);
            cursor: pointer;
            font-size: 13px;
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 500;
        }

        .ai-chat-kb-toggle.active {
            background: rgba(139, 92, 246, 0.1);
            border-color: #8b5cf6;
            color: #8b5cf6;
        }

        .ai-chat-usage {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 13px;
            color: var(--text-muted);
        }

        .ai-chat-usage-bar {
            width: 80px;
            height: 4px;
            background: var(--bg-tertiary);
            border-radius: 2px;
            overflow: hidden;
        }

        .ai-chat-usage-fill {
            height: 100%;
            background: var(--success);
        }

        /* AI Chat Messages Area */
        .ai-chat-messages {
            flex: 1;
            overflow-y: auto;
            padding: 24px;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        /* Message Styles */
        .ai-message {
            display: flex;
            gap: 14px;
            position: relative;
        }

        .ai-message-avatar {
            width: 36px;
            height: 36px;
            border-radius: 12px;
            background: linear-gradient(135deg, #8b5cf6, #7c3aed);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            box-shadow: 0 2px 8px rgba(139, 92, 246, 0.25);
            color: white;
            font-size: 16px;
        }

        .ai-message-content {
            flex: 1;
            min-width: 0;
        }

        .ai-message-bubble {
            background: var(--bg-tertiary);
            border-radius: 4px 20px 20px 20px;
            padding: 18px;
            font-size: 15px;
            line-height: 1.65;
            color: var(--text-primary);
            position: relative;
            border: 1px solid var(--border-color);
        }

        .ai-message-bubble .quick-save-btn {
            position: absolute;
            top: 12px;
            right: 12px;
            opacity: 0;
            transition: opacity 0.15s ease;
        }

        .ai-message-bubble:hover .quick-save-btn {
            opacity: 1;
        }

        .quick-save-btn {
            padding: 6px 10px;
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            color: var(--text-secondary);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            font-weight: 500;
            box-shadow: 0 2px 6px rgba(0,0,0,0.08);
        }

        .quick-save-btn:hover {
            border-color: var(--accent-primary);
            color: var(--accent-primary);
        }

        /* Code Block in Messages */
        .ai-message-code {
            background: #1e1b4b;
            border-radius: 12px;
            padding: 16px;
            overflow: auto;
            font-size: 13px;
            margin: 16px 0;
            position: relative;
        }

        .ai-message-code code {
            color: #06b6d4;
            font-family: 'SF Mono', 'Fira Code', Monaco, monospace;
            white-space: pre-wrap;
        }

        .ai-message-code .code-save-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            padding: 5px 10px;
            background: rgba(255,255,255,0.1);
            border: none;
            border-radius: 6px;
            color: rgba(255,255,255,0.7);
            cursor: pointer;
            font-size: 11px;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .ai-message-code .code-save-btn:hover {
            background: rgba(255,255,255,0.2);
            color: white;
        }

        /* Message Sources */
        .ai-message-sources {
            margin-top: 12px;
            padding: 14px;
            background: var(--bg-secondary);
            border-radius: 12px;
            border: 1px solid var(--border-color);
        }

        .ai-message-sources-header {
            font-size: 12px;
            font-weight: 600;
            color: var(--text-secondary);
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .ai-message-source-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            background: var(--bg-tertiary);
            border-radius: 10px;
            font-size: 13px;
            color: var(--text-secondary);
            cursor: pointer;
            transition: background 0.15s ease;
            margin-bottom: 8px;
        }

        .ai-message-source-item:last-child {
            margin-bottom: 0;
        }

        .ai-message-source-item:hover {
            background: var(--bg-hover);
        }

        .ai-message-source-item i {
            color: #8b5cf6;
        }

        .ai-message-source-item .source-name {
            font-weight: 500;
            color: var(--text-primary);
        }

        .ai-message-source-item .source-meta {
            color: var(--text-muted);
        }

        /* User Message */
        .user-message {
            display: flex;
            justify-content: flex-end;
        }

        .user-message-bubble {
            max-width: 70%;
            padding: 14px 20px;
            background: linear-gradient(135deg, #8b5cf6, #7c3aed);
            border-radius: 20px 20px 4px 20px;
            font-size: 15px;
            line-height: 1.5;
            color: white;
            box-shadow: 0 2px 8px rgba(139, 92, 246, 0.25);
        }

        /* AI Chat Input Area */
        .ai-chat-input-area {
            padding: 16px 24px 28px;
            border-top: 1px solid var(--border-color);
            background: var(--bg-secondary);
        }

        .ai-chat-input-wrapper {
            background: var(--bg-tertiary);
            border-radius: 16px;
            border: 1px solid var(--border-color);
            padding: 14px 18px;
        }

        .ai-chat-input-row {
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .ai-chat-upload-btn {
            background: transparent;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 4px;
            font-size: 18px;
        }

        .ai-chat-upload-btn:hover {
            color: var(--accent-primary);
        }

        .ai-chat-input {
            flex: 1;
            background: transparent;
            border: none;
            outline: none;
            color: var(--text-primary);
            font-size: 15px;
        }

        .ai-chat-input::placeholder {
            color: var(--text-muted);
        }

        .ai-chat-send-btn {
            width: 40px;
            height: 40px;
            border-radius: 12px;
            background: linear-gradient(135deg, #8b5cf6, #7c3aed);
            border: none;
            color: white;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
            font-size: 16px;
        }

        .ai-chat-send-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
        }

        .ai-chat-input-hints {
            display: flex;
            gap: 16px;
            margin-top: 12px;
            padding-top: 12px;
            border-top: 1px solid var(--border-color);
        }

        .ai-chat-hint {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            font-weight: 500;
        }

        .ai-chat-hint.primary {
            color: #06b6d4;
        }

        .ai-chat-hint.secondary {
            color: var(--text-muted);
        }

        /* Knowledge Base Panel */
        .ai-chat-kb-panel {
            width: 320px;
            background: var(--bg-secondary);
            border-left: 1px solid var(--border-color);
            display: flex;
            flex-direction: column;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
            position: relative;
        }

        .ai-chat-kb-panel.drag-over {
            border-color: #8b5cf6;
            box-shadow: inset 0 0 0 2px #8b5cf6;
        }

        /* Drag & Drop Zone */
        .ai-chat-kb-dropzone {
            position: absolute;
            inset: 0;
            background: rgba(139, 92, 246, 0.08);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 10;
            pointer-events: none;
        }

        .ai-chat-kb-panel.drag-over .ai-chat-kb-dropzone {
            display: flex;
        }

        .ai-chat-kb-dropzone-content {
            padding: 32px 48px;
            background: var(--bg-secondary);
            border-radius: 20px;
            border: 2px dashed #8b5cf6;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 14px;
            box-shadow: 0 12px 40px rgba(139, 92, 246, 0.2);
            animation: dropzonePulse 1.5s ease-in-out infinite;
        }

        @keyframes dropzonePulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.02); }
        }

        .ai-chat-kb-dropzone-icon {
            width: 64px;
            height: 64px;
            border-radius: 16px;
            background: linear-gradient(135deg, #8b5cf6, #7c3aed);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 28px;
        }

        .ai-chat-kb-dropzone-text {
            font-size: 16px;
            font-weight: 600;
            color: var(--text-primary);
        }

        .ai-chat-kb-dropzone-hint {
            font-size: 13px;
            color: var(--text-muted);
        }

        /* Auto-organization Preview */
        .ai-chat-kb-auto-org-preview {
            position: fixed;
            bottom: 100px;
            right: 24px;
            width: 320px;
            background: var(--bg-secondary);
            border-radius: 16px;
            border: 1px solid var(--border-color);
            box-shadow: 0 12px 40px rgba(0,0,0,0.15);
            z-index: 3200;
            display: none;
            animation: slideInRight 0.3s ease;
        }

        .ai-chat-kb-auto-org-preview.open {
            display: block;
        }

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

        .ai-chat-kb-auto-org-header {
            padding: 16px 20px;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .ai-chat-kb-auto-org-header i {
            color: #8b5cf6;
            font-size: 18px;
        }

        .ai-chat-kb-auto-org-header span {
            font-weight: 600;
            font-size: 15px;
            color: var(--text-primary);
            flex: 1;
        }

        .ai-chat-kb-auto-org-close {
            background: transparent;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 4px;
        }

        .ai-chat-kb-auto-org-body {
            padding: 16px 20px;
            max-height: 300px;
            overflow-y: auto;
        }

        .ai-chat-kb-auto-org-file {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px;
            background: var(--bg-tertiary);
            border-radius: 10px;
            margin-bottom: 10px;
        }

        .ai-chat-kb-auto-org-file:last-child {
            margin-bottom: 0;
        }

        .ai-chat-kb-auto-org-file-icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
        }

        .ai-chat-kb-auto-org-file-icon.pdf {
            background: rgba(239, 68, 68, 0.1);
            color: #ef4444;
        }

        .ai-chat-kb-auto-org-file-icon.code {
            background: rgba(16, 185, 129, 0.1);
            color: #10b981;
        }

        .ai-chat-kb-auto-org-file-icon.doc {
            background: rgba(59, 130, 246, 0.1);
            color: #3b82f6;
        }

        .ai-chat-kb-auto-org-file-icon.image {
            background: rgba(245, 158, 11, 0.1);
            color: #f59e0b;
        }

        .ai-chat-kb-auto-org-file-icon.default {
            background: rgba(139, 92, 246, 0.1);
            color: #8b5cf6;
        }

        .ai-chat-kb-auto-org-file-info {
            flex: 1;
            min-width: 0;
        }

        .ai-chat-kb-auto-org-file-name {
            font-size: 14px;
            font-weight: 500;
            color: var(--text-primary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .ai-chat-kb-auto-org-file-folder {
            font-size: 12px;
            color: #8b5cf6;
            display: flex;
            align-items: center;
            gap: 4px;
            margin-top: 2px;
        }

        .ai-chat-kb-auto-org-file-folder i {
            font-size: 10px;
        }

        .ai-chat-kb-auto-org-file-folder select {
            background: transparent;
            border: none;
            color: #8b5cf6;
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
            padding: 2px 4px;
            border-radius: 4px;
        }

        .ai-chat-kb-auto-org-file-folder select:hover {
            background: rgba(139, 92, 246, 0.1);
        }

        .ai-chat-kb-auto-org-file-folder select:focus {
            outline: none;
            background: rgba(139, 92, 246, 0.15);
        }

        .ai-chat-kb-auto-org-actions {
            padding: 16px 20px;
            border-top: 1px solid var(--border-color);
            display: flex;
            gap: 10px;
        }

        .ai-chat-kb-auto-org-btn {
            flex: 1;
            padding: 10px 16px;
            border-radius: 10px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .ai-chat-kb-auto-org-btn.secondary {
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            color: var(--text-secondary);
        }

        .ai-chat-kb-auto-org-btn.primary {
            background: linear-gradient(135deg, #8b5cf6, #7c3aed);
            border: none;
            color: white;
            box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
        }

        .ai-chat-kb-auto-org-progress {
            padding: 20px;
            text-align: center;
        }

        .ai-chat-kb-auto-org-progress-bar {
            width: 100%;
            height: 6px;
            background: var(--bg-tertiary);
            border-radius: 3px;
            overflow: hidden;
            margin-bottom: 12px;
        }

        .ai-chat-kb-auto-org-progress-fill {
            height: 100%;
            background: linear-gradient(135deg, #8b5cf6, #7c3aed);
            border-radius: 3px;
            transition: width 0.3s ease;
        }

        .ai-chat-kb-auto-org-progress-text {
            font-size: 13px;
            color: var(--text-secondary);
        }

        /* Folder highlight during drag */
        .ai-chat-kb-folder-btn.drag-target {
            background: rgba(139, 92, 246, 0.15);
            border: 1px dashed #8b5cf6;
        }

        .ai-chat-kb-header {
            padding: 18px;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .ai-chat-kb-header h3 {
            font-weight: 600;
            font-size: 15px;
            flex: 1;
            color: var(--text-primary);
            margin: 0;
        }

        .ai-chat-kb-header button {
            background: transparent;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 4px;
            font-size: 16px;
        }

        .ai-chat-kb-header button:hover {
            color: var(--text-primary);
        }

        .ai-chat-kb-search {
            padding: 14px 18px;
        }

        .ai-chat-kb-search-input {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 14px;
            background: var(--bg-tertiary);
            border-radius: 10px;
            border: 1px solid var(--border-color);
        }

        .ai-chat-kb-search-input input {
            flex: 1;
            background: transparent;
            border: none;
            outline: none;
            color: var(--text-primary);
            font-size: 14px;
        }

        .ai-chat-kb-search-input input::placeholder {
            color: var(--text-muted);
        }

        .ai-chat-kb-search-input .shortcut {
            font-size: 11px;
            color: var(--text-muted);
        }

        .ai-chat-kb-view-toggle {
            padding: 0 18px 14px;
            display: flex;
            gap: 6px;
        }

        .ai-chat-kb-view-btn {
            padding: 6px 12px;
            background: var(--bg-tertiary);
            border: none;
            border-radius: 8px;
            color: var(--text-secondary);
            cursor: pointer;
            font-size: 12px;
            text-transform: capitalize;
            font-weight: 500;
        }

        .ai-chat-kb-view-btn.active {
            background: #8b5cf6;
            color: white;
        }

        .ai-chat-kb-folders {
            flex: 1;
            overflow-y: auto;
            padding: 0 10px;
        }

        .ai-chat-kb-folder-btn {
            width: 100%;
            padding: 10px 12px;
            display: flex;
            align-items: center;
            gap: 10px;
            background: transparent;
            border: none;
            border-radius: 8px;
            color: var(--text-primary);
            cursor: pointer;
            font-size: 14px;
            text-align: left;
        }

        .ai-chat-kb-folder-btn:hover {
            background: var(--bg-hover);
        }

        .ai-chat-kb-folder-btn i.chevron {
            color: var(--text-muted);
            font-size: 12px;
            width: 16px;
        }

        .ai-chat-kb-folder-btn i.folder-icon {
            color: #8b5cf6;
        }

        .ai-chat-kb-folder-btn .folder-name {
            flex: 1;
            font-weight: 500;
        }

        .ai-chat-kb-folder-btn .folder-count {
            font-size: 12px;
            color: var(--text-muted);
            padding: 2px 8px;
            background: var(--bg-tertiary);
            border-radius: 12px;
        }

        .ai-chat-kb-folder-items {
            margin-left: 32px;
            margin-bottom: 6px;
        }

        .ai-chat-kb-item {
            padding: 8px 12px;
            display: flex;
            align-items: center;
            gap: 10px;
            border-radius: 8px;
            color: var(--text-secondary);
            cursor: pointer;
            font-size: 13px;
            transition: background 0.15s ease;
        }

        .ai-chat-kb-item:hover {
            background: var(--bg-hover);
            color: var(--text-primary);
        }

        .ai-chat-kb-item i {
            color: var(--text-muted);
        }

        .ai-chat-kb-item span {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .ai-chat-kb-health {
            padding: 14px 18px;
            border-top: 1px solid var(--border-color);
            background: rgba(245, 158, 11, 0.08);
        }

        .ai-chat-kb-health-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
        }

        .ai-chat-kb-health-header i {
            color: #f59e0b;
        }

        .ai-chat-kb-health-header span {
            font-size: 13px;
            color: #f59e0b;
            font-weight: 500;
        }

        .ai-chat-kb-health-btn {
            width: 100%;
            padding: 10px;
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            color: var(--text-primary);
            cursor: pointer;
            font-size: 13px;
            font-weight: 500;
        }

        .ai-chat-kb-health-btn:hover {
            border-color: var(--accent-primary);
        }

        /* AI Chat Search Modals */
        .ai-chat-search-modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.4);
            backdrop-filter: blur(4px);
            display: none;
            align-items: flex-start;
            justify-content: center;
            padding-top: 10vh;
            z-index: 3000;
        }

        .ai-chat-search-modal-overlay.open {
            display: flex;
        }

        .ai-chat-search-modal {
            width: 640px;
            max-height: 70vh;
            background: var(--bg-secondary);
            border-radius: 20px;
            border: 1px solid var(--border-color);
            box-shadow: 0 24px 48px rgba(0,0,0,0.15);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            animation: modalScaleIn 0.2s ease;
        }

        @keyframes modalScaleIn {
            from { opacity: 0; transform: scale(0.95); }
            to { opacity: 1; transform: scale(1); }
        }

        .ai-chat-search-header {
            padding: 20px;
            border-bottom: 1px solid var(--border-color);
        }

        .ai-chat-search-input-row {
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .ai-chat-search-input-row i {
            color: #8b5cf6;
            font-size: 18px;
        }

        .ai-chat-search-input-row input {
            flex: 1;
            background: transparent;
            border: none;
            outline: none;
            color: var(--text-primary);
            font-size: 17px;
        }

        .ai-chat-search-filters {
            display: flex;
            gap: 10px;
            margin-top: 16px;
        }

        .ai-chat-search-filter-btn {
            padding: 8px 16px;
            background: var(--bg-tertiary);
            border: none;
            border-radius: 10px;
            color: var(--text-secondary);
            cursor: pointer;
            font-size: 14px;
            text-transform: capitalize;
            font-weight: 500;
        }

        .ai-chat-search-filter-btn.active {
            background: #8b5cf6;
            color: white;
        }

        .ai-chat-search-results {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
        }

        .ai-chat-search-group-label {
            font-size: 12px;
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 14px;
        }

        .ai-chat-search-result-item {
            padding: 14px 16px;
            background: var(--bg-tertiary);
            border-radius: 14px;
            cursor: pointer;
            transition: background 0.15s ease;
            border: 1px solid var(--border-color);
            margin-bottom: 10px;
        }

        .ai-chat-search-result-item:hover {
            background: var(--bg-hover);
        }

        .ai-chat-search-result-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 8px;
        }

        .ai-chat-search-result-title {
            font-weight: 500;
            color: var(--text-primary);
            flex: 1;
        }

        .ai-chat-search-result-time {
            font-size: 12px;
            color: var(--text-muted);
        }

        .ai-chat-search-result-snippet {
            font-size: 13px;
            color: var(--text-secondary);
            line-height: 1.5;
        }

        /* Intra-chat search bar */
        .ai-chat-intra-search {
            position: fixed;
            top: 80px;
            right: 340px;
            z-index: 100;
            animation: slideDown 0.2s ease;
            display: none;
        }

        .ai-chat-intra-search.open {
            display: block;
        }

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

        .ai-chat-intra-search-box {
            background: var(--bg-secondary);
            border-radius: 14px;
            border: 1px solid var(--border-color);
            padding: 8px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.12);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .ai-chat-intra-search-box i {
            color: var(--text-muted);
            margin-left: 10px;
        }

        .ai-chat-intra-search-box input {
            width: 240px;
            background: transparent;
            border: none;
            outline: none;
            color: var(--text-primary);
            font-size: 15px;
        }

        .ai-chat-intra-search-nav {
            display: flex;
            gap: 4px;
        }

        .ai-chat-intra-search-nav button {
            background: var(--bg-tertiary);
            border: none;
            border-radius: 6px;
            padding: 6px;
            color: var(--text-secondary);
            cursor: pointer;
        }

        .ai-chat-intra-search-nav button:hover {
            background: var(--bg-hover);
        }

        .ai-chat-intra-search-close {
            background: transparent;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 6px;
        }

        .ai-chat-intra-search-hint {
            margin-top: 6px;
            font-size: 11px;
            color: var(--text-muted);
            text-align: right;
            padding-right: 10px;
        }

        /* Knowledge Capture Modal */
        .ai-chat-capture-modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.5);
            backdrop-filter: blur(4px);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 3100;
        }

        .ai-chat-capture-modal-overlay.open {
            display: flex;
        }

        .ai-chat-capture-modal {
            width: 480px;
            background: var(--bg-secondary);
            border-radius: 20px;
            border: 1px solid var(--border-color);
            box-shadow: 0 24px 48px rgba(0,0,0,0.2);
            overflow: hidden;
        }

        .ai-chat-capture-header {
            padding: 20px 24px;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .ai-chat-capture-icon {
            width: 44px;
            height: 44px;
            border-radius: 12px;
            background: linear-gradient(135deg, #8b5cf6, #7c3aed);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 18px;
        }

        .ai-chat-capture-header h3 {
            font-size: 18px;
            font-weight: 600;
            color: var(--text-primary);
            margin: 0;
        }

        .ai-chat-capture-header p {
            font-size: 13px;
            color: var(--text-muted);
            margin: 4px 0 0;
        }

        .ai-chat-capture-close {
            margin-left: auto;
            background: transparent;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 8px;
            font-size: 16px;
        }

        .ai-chat-capture-body {
            padding: 24px;
        }

        .ai-chat-capture-preview {
            padding: 14px;
            background: var(--bg-tertiary);
            border-radius: 12px;
            margin-bottom: 20px;
            max-height: 120px;
            overflow: hidden;
            font-size: 14px;
            color: var(--text-secondary);
            line-height: 1.5;
            border-left: 3px solid #8b5cf6;
        }

        .ai-chat-capture-form-group {
            margin-bottom: 18px;
        }

        .ai-chat-capture-label {
            display: block;
            font-size: 13px;
            font-weight: 500;
            color: var(--text-secondary);
            margin-bottom: 8px;
        }

        .ai-chat-capture-input {
            width: 100%;
            padding: 12px 14px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            color: var(--text-primary);
            font-size: 14px;
        }

        .ai-chat-capture-input:focus {
            outline: none;
            border-color: #8b5cf6;
        }

        .ai-chat-capture-select {
            width: 100%;
            padding: 12px 14px;
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            color: var(--text-primary);
            font-size: 14px;
            cursor: pointer;
        }

        .ai-chat-capture-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .ai-chat-capture-tag {
            padding: 6px 12px;
            background: rgba(139, 92, 246, 0.1);
            border: 1px solid rgba(139, 92, 246, 0.2);
            border-radius: 20px;
            font-size: 13px;
            color: #8b5cf6;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .ai-chat-capture-tag button {
            background: none;
            border: none;
            color: #8b5cf6;
            cursor: pointer;
            padding: 0;
            font-size: 12px;
        }

        .ai-chat-capture-actions {
            display: flex;
            gap: 12px;
            justify-content: flex-end;
            padding: 20px 24px;
            border-top: 1px solid var(--border-color);
        }

        .ai-chat-capture-btn {
            padding: 12px 24px;
            border-radius: 10px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
        }

        .ai-chat-capture-btn.secondary {
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            color: var(--text-secondary);
        }

        .ai-chat-capture-btn.primary {
            background: linear-gradient(135deg, #8b5cf6, #7c3aed);
            border: none;
            color: white;
            box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
        }

        /* Maintenance Alerts */
        .ai-chat-maintenance-alerts {
            position: fixed;
            bottom: 24px;
            left: 260px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            z-index: 50;
        }

        .ai-chat-maintenance-alert {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px 18px;
            background: var(--bg-secondary);
            border-radius: 14px;
            border: 1px solid var(--border-color);
            box-shadow: 0 4px 16px rgba(0,0,0,0.1);
            animation: slideUp 0.3s ease;
        }

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

        .ai-chat-maintenance-icon {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
        }

        .ai-chat-maintenance-icon.warning {
            background: rgba(245, 158, 11, 0.1);
            color: #f59e0b;
        }

        .ai-chat-maintenance-icon.info {
            background: rgba(59, 130, 246, 0.1);
            color: #3b82f6;
        }

        .ai-chat-maintenance-content {
            flex: 1;
        }

        .ai-chat-maintenance-title {
            font-weight: 600;
            font-size: 14px;
            color: var(--text-primary);
        }

        .ai-chat-maintenance-desc {
            font-size: 13px;
            color: var(--text-secondary);
        }

        .ai-chat-maintenance-dismiss {
            background: transparent;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            padding: 4px;
            font-size: 14px;
        }

    

/* The sign-in card's styles are gone with the card. L100 renders no authentication
   surface of its own; see tests/no_authentication_ceremony.rs. */

.l100-lane-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 700;
    letter-spacing: .02em; color: var(--warning);
    background: color-mix(in srgb, var(--warning) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--warning) 34%, transparent);
}