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

        *:focus-visible {
            outline: 2px solid #6366f1;
            outline-offset: 2px;
        }

        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }
        .sr-only:focus, .sr-only.focus\:not-sr-only:focus {
            position: absolute;
            width: auto;
            height: auto;
            padding: 0.5rem;
            margin: 0;
            overflow: visible;
            clip: auto;
            white-space: normal;
        }

        :root {
            /* Color System */
            --primary: #667eea;
            --primary-hover: #5568d3;
            --accent: #00D084;
            --accent-cyan: #64ffda;
            --accent-blue: #00d4ff;
            --success: #10B981;
            --warning: #F59E0B;
            --error: #EF4444;

            /* Backgrounds */
            --bg-primary: #0a0e27;
            --bg-secondary: #151932;
            --bg-card: rgba(30, 41, 59, 0.5);
            --bg-card-solid: #1a1a1a;

            /* Borders & Text */
            --border: rgba(100, 255, 218, 0.2);
            --border-solid: rgba(255, 255, 255, 0.1);
            --text-primary: #e0e6ed;
            --text-secondary: #94a3b8;
            --text-tertiary: #71717A;

            /* Effects */
            --radius-lg: 16px;
            --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
            color: var(--text-primary);
            min-height: 100vh;
            overflow-x: hidden;
        }

        /* ========== SKELETON LOADING STATES ========== */
        .skeleton {
            background: linear-gradient(90deg, #1a1a2e 25%, #2a2a3e 50%, #1a1a2e 75%);
            background-size: 200% 100%;
            animation: shimmer 1.5s infinite;
            border-radius: 4px;
            min-height: 1em;
            color: transparent !important;
        }
        .skeleton * { color: transparent !important; }
        @keyframes shimmer {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }

        /* ========== API ERROR STATES ========== */
        .api-error {
            background: rgba(239, 68, 68, 0.1);
            border: 1px solid rgba(239, 68, 68, 0.3);
            border-radius: 12px;
            padding: 1.5rem;
            text-align: center;
            color: var(--text-secondary);
        }
        .api-error p {
            margin: 0 0 1rem 0;
            font-size: 0.9rem;
        }
        .api-error button {
            background: rgba(239, 68, 68, 0.2);
            border: 1px solid rgba(239, 68, 68, 0.4);
            color: #f87171;
            padding: 0.5rem 1.25rem;
            border-radius: 8px;
            cursor: pointer;
            font-size: 0.875rem;
            font-weight: 600;
            transition: all var(--transition-base);
        }
        .api-error button:hover {
            background: rgba(239, 68, 68, 0.3);
        }

        /* ========== ACCOUNT INFO BADGE (HEADER) ========== */
        .header-account {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-left: auto;
            padding-left: 1rem;
        }
        .header-account-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: linear-gradient(135deg, #6366f1, #4f46e5);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 0.75rem;
            color: #fff;
            flex-shrink: 0;
        }
        .header-account-info {
            display: flex;
            flex-direction: column;
            line-height: 1.3;
        }
        .header-account-email {
            font-size: 0.8rem;
            color: var(--text-primary);
            font-weight: 500;
            max-width: 180px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .header-account-tier {
            font-size: 0.65rem;
            color: var(--accent-cyan);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        @media (max-width: 768px) {
            .header-account-info { display: none; }
        }

        /* ========== STICKY HEADER ========== */
        .header {
            background: rgba(10, 14, 39, 0.95);
            backdrop-filter: blur(20px);
            border-bottom: 1px solid var(--border);
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        .header-top {
            padding: 1rem 2rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .logo-section {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        /* ========== HAMBURGER MENU ========== */
        .hamburger-btn {
            width: 40px;
            height: 40px;
            background: rgba(100, 255, 218, 0.1);
            border: 1px solid var(--border);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all var(--transition-base);
            margin-right: 1rem;
        }

        .hamburger-btn:hover {
            background: rgba(100, 255, 218, 0.2);
            border-color: var(--accent-cyan);
        }

        .hamburger-btn i {
            color: var(--accent-cyan);
            font-size: 1.2rem;
        }

        /* ========== ADMIN SIDEBAR ========== */
        .admin-sidebar {
            position: fixed;
            top: 0;
            left: -400px;
            width: 400px;
            height: 100vh;
            background: rgba(10, 14, 39, 0.98);
            backdrop-filter: blur(20px);
            border-right: 1px solid var(--border);
            z-index: 2000;
            transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            overflow-y: auto;
            box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
        }

        .admin-sidebar.open {
            left: 0;
        }

        .sidebar-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(4px);
            z-index: 1999;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

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

        .sidebar-header {
            padding: 1.5rem;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .sidebar-title {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--accent-cyan);
        }

        .sidebar-close {
            width: 32px;
            height: 32px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid var(--border);
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all var(--transition-base);
        }

        .sidebar-close:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: var(--error);
        }

        .sidebar-close i {
            color: var(--text-secondary);
        }

        .sidebar-close:hover i {
            color: var(--error);
        }

        .sidebar-content {
            padding: 1rem;
        }

        .sidebar-section {
            margin-bottom: 1.5rem;
        }

        .sidebar-section-title {
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: 0.5rem 1rem;
            margin-bottom: 0.5rem;
        }

        .sidebar-menu-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.75rem 1rem;
            color: var(--text-primary);
            text-decoration: none;
            border-radius: 8px;
            transition: all var(--transition-base);
            cursor: pointer;
            margin-bottom: 0.25rem;
        }

        .sidebar-menu-item:hover {
            background: rgba(100, 255, 218, 0.1);
            color: var(--accent-cyan);
        }

        .sidebar-menu-item.active {
            background: rgba(100, 255, 218, 0.15);
            color: var(--accent-cyan);
            border-left: 3px solid var(--accent-cyan);
        }

        .sidebar-menu-item i {
            width: 20px;
            text-align: center;
            font-size: 1rem;
        }

        .sidebar-menu-item .badge {
            margin-left: auto;
            padding: 0.25rem 0.5rem;
            background: var(--primary);
            color: white;
            font-size: 0.7rem;
            font-weight: 600;
            border-radius: 10px;
        }

        .sidebar-menu-item .badge.new {
            background: var(--accent);
        }

        .sidebar-menu-item .badge.warning {
            background: var(--warning);
        }

        .sidebar-menu-item .badge.soon {
            background: rgba(100, 116, 139, 0.3);
            color: #94a3b8;
            font-size: 0.6rem;
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }

        .sidebar-menu-item.coming-soon {
            opacity: 0.55;
        }

        .sidebar-menu-item.coming-soon:hover {
            opacity: 0.75;
        }

        .logo {
            width: 40px;
            height: 40px;
        }

        .brand-name {
            font-size: 1.5rem;
            font-weight: bold;
            background: linear-gradient(90deg, var(--accent-cyan), var(--accent-blue));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .ai-status {
            display: flex;
            align-items: center;
            gap: 2rem;
        }

        .ai-status-indicator {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 1rem;
            background: rgba(100, 255, 218, 0.1);
            border: 1px solid rgba(100, 255, 218, 0.3);
            border-radius: 20px;
            font-size: 0.9rem;
        }

        .status-dot {
            width: 8px;
            height: 8px;
            background: var(--accent-cyan);
            border-radius: 50%;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.5; transform: scale(1.2); }
        }

        /* ========== NAVIGATION TABS ========== */
        .nav-tabs {
            display: flex;
            gap: 0;
            padding: 0 2rem;
            border-bottom: 1px solid var(--border);
            overflow-x: auto;
        }

        .nav-tab {
            position: relative;
            padding: 1rem 1.5rem;
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 0.95rem;
            font-weight: 600;
            cursor: pointer;
            transition: all var(--transition-base);
            white-space: nowrap;
            font-family: inherit;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .nav-tab:hover {
            color: var(--text-primary);
            background: rgba(255, 255, 255, 0.03);
        }

        .nav-tab.active {
            color: var(--accent-cyan);
        }

        .nav-tab.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--accent-cyan), var(--accent-blue));
        }

        .pro-badge {
            display: inline-block;
            padding: 0.15rem 0.5rem;
            background: linear-gradient(135deg, var(--primary), var(--accent));
            color: white;
            font-size: 0.7rem;
            font-weight: 700;
            border-radius: 4px;
            text-transform: uppercase;
        }

        /* ========== VIEW CONTAINERS ========== */
        .view {
            display: none;
            animation: fadeIn 0.5s ease;
        }

        .view.active {
            display: block;
        }

        .admin-view {
            display: none;
            animation: fadeIn 0.5s ease;
        }

        .admin-view.active {
            display: block;
        }

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

        .container {
            max-width: 1600px;
            margin: 0 auto;
            padding: 2rem;
        }

        /* ========== SECTION TITLES ========== */
        .section-title {
            font-size: 1.2rem;
            color: var(--accent-cyan);
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        /* ========== AI MODULES GRID ========== */
        .modules-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

        @media (max-width: 1200px) {
            .modules-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

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

        .module-card {
            background: var(--bg-card);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(100, 255, 218, 0.1);
            border-radius: 12px;
            padding: 1.5rem;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .module-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--accent-cyan), var(--accent-blue));
            transform: scaleX(0);
            transition: transform 0.3s ease;
        }

        .module-card.active::before {
            transform: scaleX(1);
        }

        .module-header {
            display: flex;
            justify-content: space-between;
            align-items: start;
            margin-bottom: 1rem;
        }

        .module-name {
            font-size: 1.1rem;
            font-weight: 600;
            color: #fff;
        }

        .module-status {
            padding: 0.25rem 0.75rem;
            background: rgba(100, 255, 218, 0.1);
            border: 1px solid rgba(100, 255, 218, 0.3);
            border-radius: 20px;
            font-size: 0.75rem;
            color: var(--accent-cyan);
        }

        .module-metrics {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
            margin-top: 1rem;
        }

        .metric-item {
            display: flex;
            flex-direction: column;
        }

        .metric-label {
            font-size: 0.75rem;
            color: var(--text-secondary);
            margin-bottom: 0.25rem;
        }

        .metric-value {
            font-size: 1.25rem;
            font-weight: bold;
            color: var(--accent-cyan);
        }

        .metric-unit {
            font-size: 0.75rem;
            color: var(--text-secondary);
            margin-left: 0.25rem;
        }

        /* ========== PERFORMANCE CARDS ========== */
        .performance-section {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

        .perf-card {
            background: rgba(30, 41, 59, 0.3);
            border: 1px solid rgba(100, 255, 218, 0.1);
            border-radius: 8px;
            padding: 1.5rem;
            text-align: center;
        }

        .perf-title {
            font-size: 0.875rem;
            color: var(--text-secondary);
            margin-bottom: 0.5rem;
        }

        .perf-value {
            font-size: 2rem;
            font-weight: bold;
            background: linear-gradient(90deg, var(--accent-cyan), var(--accent-blue));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .perf-change {
            font-size: 0.75rem;
            color: var(--success);
            margin-top: 0.5rem;
        }

        /* ========== SYNERGY VISUALIZATION ========== */
        .synergy-container {
            background: rgba(30, 41, 59, 0.3);
            border: 1px solid rgba(100, 255, 218, 0.1);
            border-radius: 12px;
            padding: 2rem;
            margin-bottom: 2rem;
        }

        .synergy-diagram {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
            margin: 2rem 0;
        }

        @media (max-width: 768px) {
            .synergy-diagram {
                grid-template-columns: 1fr;
            }
        }

        .synergy-node {
            background: rgba(10, 14, 39, 0.8);
            border: 2px solid rgba(100, 255, 218, 0.3);
            border-radius: 50%;
            width: 120px;
            height: 120px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            transition: all 0.3s ease;
        }

        .synergy-node:hover {
            border-color: var(--accent-cyan);
            transform: scale(1.1);
            box-shadow: 0 0 30px rgba(100, 255, 218, 0.4);
        }

        .synergy-value {
            font-size: 1.5rem;
            font-weight: bold;
            color: var(--accent-cyan);
        }

        .synergy-label {
            font-size: 0.75rem;
            color: var(--text-secondary);
            margin-top: 0.25rem;
        }

        /* ========== INTELLIGENCE BUS ========== */
        .bus-container {
            background: rgba(30, 41, 59, 0.3);
            border: 1px solid rgba(100, 255, 218, 0.1);
            border-radius: 12px;
            padding: 1.5rem;
            margin-bottom: 2rem;
        }

        .bus-activity {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            max-height: 300px;
            overflow-y: auto;
        }

        .bus-message {
            background: rgba(10, 14, 39, 0.5);
            border-left: 3px solid var(--accent-cyan);
            padding: 0.75rem;
            border-radius: 4px;
            font-size: 0.875rem;
            animation: slideIn 0.3s ease;
        }

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

        .bus-timestamp {
            color: #64a3b8;
            font-size: 0.75rem;
        }

        .bus-source {
            color: var(--accent-cyan);
            font-weight: 600;
        }

        /* ========== BUSINESS IMPACT ========== */
        .impact-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

        .impact-card {
            background: linear-gradient(135deg, rgba(100, 255, 218, 0.1), rgba(0, 212, 255, 0.1));
            border: 1px solid rgba(100, 255, 218, 0.2);
            border-radius: 12px;
            padding: 1.5rem;
            position: relative;
            overflow: hidden;
        }

        .impact-card::after {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(100, 255, 218, 0.1), transparent);
            animation: rotate 10s linear infinite;
        }

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

        .impact-title {
            font-size: 1rem;
            color: var(--text-secondary);
            margin-bottom: 1rem;
            position: relative;
            z-index: 1;
        }

        .impact-value {
            font-size: 2.5rem;
            font-weight: bold;
            background: linear-gradient(90deg, var(--accent-cyan), var(--accent-blue));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            position: relative;
            z-index: 1;
        }

        .impact-description {
            font-size: 0.875rem;
            color: var(--text-primary);
            margin-top: 0.5rem;
            position: relative;
            z-index: 1;
        }

        /* ========== COMPLIANCE TRACKER ========== */
        .compliance-container {
            background: rgba(30, 41, 59, 0.3);
            border: 1px solid rgba(100, 255, 218, 0.1);
            border-radius: 12px;
            padding: 1.5rem;
            margin-bottom: 2rem;
        }

        .compliance-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
        }

        .compliance-score {
            font-size: 2rem;
            font-weight: bold;
            color: var(--accent-cyan);
        }

        .compliance-items {
            display: grid;
            gap: 1rem;
        }

        .compliance-item {
            display: grid;
            grid-template-columns: auto 1fr auto;
            align-items: center;
            gap: 1rem;
            padding: 0.75rem;
            background: rgba(10, 14, 39, 0.3);
            border-radius: 8px;
        }

        .compliance-check {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .compliance-check.met {
            background: rgba(16, 185, 129, 0.2);
            color: var(--success);
        }

        .compliance-check.partial {
            background: rgba(251, 191, 36, 0.2);
            color: var(--warning);
        }

        .compliance-requirement {
            color: var(--text-primary);
        }

        .compliance-status {
            font-size: 0.875rem;
            color: var(--text-secondary);
        }

        /* ========== GEO DEPLOYMENT STYLES ========== */
        .action-bar {
            background: var(--bg-card-solid);
            border: 1px solid var(--border-solid);
            border-radius: var(--radius-lg);
            padding: 1.5rem;
            margin-bottom: 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .action-bar-left {
            display: flex;
            align-items: center;
            gap: 2rem;
        }

        .stat {
            display: flex;
            flex-direction: column;
        }

        .stat-label {
            font-size: 0.875rem;
            color: var(--text-secondary);
            margin-bottom: 0.25rem;
        }

        .stat-value {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--text-primary);
        }

        .stat-value.accent {
            color: var(--accent);
        }

        .action-buttons {
            display: flex;
            gap: 1rem;
        }

        .btn {
            padding: 0.75rem 2rem;
            border: none;
            border-radius: 12px;
            font-size: 1rem;
            font-weight: 700;
            cursor: pointer;
            transition: all var(--transition-base);
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-family: inherit;
        }

        .btn-primary {
            background: var(--primary);
            color: white;
        }

        .btn-primary:hover {
            background: var(--primary-hover);
            transform: translateY(-2px);
        }

        .btn-primary:disabled {
            background: rgba(102, 126, 234, 0.3);
            cursor: not-allowed;
            transform: none;
        }

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

        .btn-secondary:hover {
            background: var(--bg-card-solid);
        }

        /* ========== REGION GRID ========== */
        .region-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1rem;
            margin-bottom: 2rem;
        }

        .region-card {
            background: var(--bg-card-solid);
            border: 2px solid var(--border-solid);
            border-radius: var(--radius-lg);
            padding: 1.25rem;
            cursor: pointer;
            transition: all var(--transition-base);
        }

        .region-card:hover {
            border-color: var(--primary);
            transform: translateY(-4px);
            box-shadow: 0 8px 24px rgba(102, 126, 234, 0.2);
        }

        .region-card.selected {
            border-color: var(--accent);
            background: linear-gradient(135deg, rgba(0, 208, 132, 0.1), rgba(102, 126, 234, 0.1));
        }

        .region-card.deploying {
            border-color: var(--warning);
            background: rgba(245, 158, 11, 0.05);
        }

        .region-card.deployed {
            border-color: var(--success);
            background: rgba(16, 185, 129, 0.1);
        }

        .region-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 1rem;
        }

        .region-name {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--text-primary);
        }

        .region-status {
            font-size: 0.875rem;
            padding: 0.25rem 0.75rem;
            border-radius: 12px;
            font-weight: 600;
        }

        .region-status.available {
            background: rgba(255, 255, 255, 0.1);
            color: var(--text-secondary);
        }

        .region-status.selected {
            background: rgba(102, 126, 234, 0.2);
            color: var(--primary);
        }

        .region-status.deploying {
            background: rgba(245, 158, 11, 0.2);
            color: var(--warning);
        }

        .region-status.active {
            background: rgba(0, 208, 132, 0.2);
            color: var(--accent);
        }

        /* ========== HEALTH INDICATORS ========== */
        .region-health {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-top: 0.75rem;
            padding: 0.5rem 0.75rem;
            background: rgba(255, 255, 255, 0.03);
            border-radius: 8px;
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        .health-indicator {
            display: inline-block;
            position: relative;
            width: 8px;
            height: 8px;
            min-width: 8px;
            min-height: 8px;
            max-width: 8px;
            max-height: 8px;
            border-radius: 50%;
            flex-shrink: 0;
            margin-right: 8px;
            vertical-align: middle;
        }

        .health-indicator.excellent {
            background: #10b981;
            box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
        }

        .health-indicator.excellent::before {
            content: '';
            position: absolute;
            inset: -4px;
            border-radius: 50%;
            border: 2px solid #10b981;
            animation: health-pulse-green 2s ease-out infinite;
        }

        .health-indicator.good {
            background: #3b82f6;
            box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
        }

        .health-indicator.good::before {
            content: '';
            position: absolute;
            inset: -4px;
            border-radius: 50%;
            border: 2px solid #3b82f6;
            animation: health-pulse-blue 2.5s ease-out infinite;
        }

        .health-indicator.degraded {
            background: #f59e0b;
            box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
        }

        .health-indicator.degraded::before {
            content: '';
            position: absolute;
            inset: -4px;
            border-radius: 50%;
            border: 2px solid #f59e0b;
            animation: health-pulse-yellow 1.5s ease-out infinite;
        }

        .health-indicator.critical {
            background: #ef4444;
            box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
        }

        .health-indicator.critical::before {
            content: '';
            position: absolute;
            inset: -4px;
            border-radius: 50%;
            border: 2px solid #ef4444;
            animation: health-pulse-red 1s ease-out infinite;
        }

        @keyframes health-pulse-green {
            0% { transform: scale(1); opacity: 1; }
            100% { transform: scale(2); opacity: 0; }
        }

        @keyframes health-pulse-yellow {
            0% { transform: scale(1); opacity: 1; }
            100% { transform: scale(2.2); opacity: 0; }
        }

        @keyframes health-pulse-red {
            0% { transform: scale(1); opacity: 1; }
            100% { transform: scale(2.5); opacity: 0; }
        }

        .health-label {
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .health-label.excellent { color: #10b981; }
        .health-label.excellent::before { content: '\2714 '; }
        .health-label.good { color: #22c55e; }
        .health-label.good::before { content: '\2714 '; }
        .health-label.degraded { color: #f59e0b; }
        .health-label.degraded::before { content: '\26A0 '; }
        .health-label.critical { color: #ef4444; }
        .health-label.critical::before { content: '\2716 '; }

        .health-latency {
            margin-left: auto;
            font-size: 0.75rem;
            color: var(--text-tertiary);
            font-weight: 500;
        }

        .health-latency span {
            font-weight: 700;
            color: var(--text-secondary);
        }

        /* Traffic Mini Bar */
        .region-traffic {
            margin-top: 0.75rem;
            padding-top: 0.75rem;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
        }

        .traffic-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.5rem;
        }

        /* Traffic Bar Container for Region Cards */
        .traffic-bar-container {
            position: relative;
            height: 20px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 4px;
            margin: 0.5rem 0 0.75rem 0;
            overflow: hidden;
        }

        .traffic-bar-container .traffic-bar {
            height: 100%;
            background: linear-gradient(90deg,
                rgba(102, 126, 234, 0.6) 0%,
                rgba(0, 208, 132, 0.6) 50%,
                rgba(102, 126, 234, 0.6) 100%);
            border-radius: 4px;
            transition: width 0.5s ease;
        }

        .traffic-bar-container .traffic-label {
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 0.7rem;
            font-weight: 600;
            color: var(--text-primary);
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
        }

        .traffic-label {
            font-size: 0.7rem;
            color: var(--text-tertiary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .traffic-value {
            font-size: 0.75rem;
            font-weight: 700;
            color: var(--text-secondary);
        }

        .traffic-bar {
            height: 4px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 2px;
            overflow: hidden;
        }

        .traffic-fill {
            height: 100%;
            border-radius: 2px;
            background: linear-gradient(90deg, var(--primary), var(--accent));
            transition: width 0.5s ease;
        }

        /* ========== REGION TEMPLATES ========== */
        .templates-dropdown {
            position: relative;
        }

        .templates-btn {
            padding: 0.75rem 1.25rem;
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.15), rgba(0, 208, 132, 0.15));
            border: 1px solid rgba(102, 126, 234, 0.3);
            border-radius: 12px;
            color: var(--text-primary);
            font-size: 0.9rem;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            transition: all 0.2s ease;
        }

        .templates-btn:hover {
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.25), rgba(0, 208, 132, 0.25));
            border-color: rgba(102, 126, 234, 0.5);
            transform: translateY(-2px);
        }

        .templates-menu {
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            width: 320px;
            background: var(--bg-card-solid);
            border: 1px solid var(--border-solid);
            border-radius: 16px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
            transition: all 0.25s ease;
        }

        .templates-menu.active,
        .templates-menu.show {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .templates-menu-header {
            padding: 1rem 1.25rem;
            border-bottom: 1px solid var(--border-solid);
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .templates-menu-header i { color: var(--accent); }
        .templates-menu-header span { font-weight: 700; color: var(--text-primary); }

        .templates-list {
            padding: 0.5rem;
            max-height: 400px;
            overflow-y: auto;
        }

        .template-item {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
            padding: 1rem;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .template-item:hover { background: rgba(102, 126, 234, 0.1); }

        .template-icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            flex-shrink: 0;
        }

        .template-icon.global { background: linear-gradient(135deg, #6366f1, #8b5cf6); color: white; }
        .template-icon.america { background: linear-gradient(135deg, #3b82f6, #06b6d4); color: white; }
        .template-icon.europe { background: linear-gradient(135deg, #10b981, #059669); color: white; }
        .template-icon.asia { background: linear-gradient(135deg, #f59e0b, #ef4444); color: white; }
        .template-icon.gdpr { background: linear-gradient(135deg, #8b5cf6, #ec4899); color: white; }
        .template-icon.budget { background: linear-gradient(135deg, #22c55e, #16a34a); color: white; }

        .template-name { font-weight: 700; color: var(--text-primary); margin-bottom: 0.25rem; font-size: 0.95rem; }
        .template-desc { font-size: 0.8rem; color: var(--text-tertiary); line-height: 1.4; }

        .template-regions { display: flex; gap: 0.25rem; margin-top: 0.5rem; flex-wrap: wrap; }

        .template-region-badge {
            padding: 0.2rem 0.5rem;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 4px;
            font-size: 0.65rem;
            font-weight: 600;
            color: var(--text-secondary);
        }

        .region-info {
            display: grid;
            gap: 0.5rem;
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px solid var(--border-solid);
        }

        .region-info-item {
            display: flex;
            justify-content: space-between;
            font-size: 0.875rem;
        }

        .region-info-label {
            color: var(--text-secondary);
        }

        .region-info-value {
            color: var(--text-primary);
            font-weight: 600;
        }

        .provider-badge {
            display: inline-block;
            padding: 0.25rem 0.5rem;
            border-radius: 6px;
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
        }

        .provider-aws { background: #FF9900; color: #000; }
        .provider-gcp { background: #4285F4; color: #fff; }
        .provider-azure { background: #0078D4; color: #fff; }
        .provider-cloudflare { background: #F38020; color: #fff; }
        .provider-fly { background: #8B5CF6; color: #fff; }

        /* ========== TIMELINE ========== */
        .timeline {
            background: var(--bg-card-solid);
            border: 1px solid var(--border-solid);
            border-radius: var(--radius-lg);
            padding: 1.5rem;
            max-height: 400px;
            overflow-y: auto;
        }

        .timeline-title {
            font-size: 1.25rem;
            font-weight: 700;
            margin-bottom: 1rem;
        }

        .timeline-item {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
            padding: 1rem;
            border-left: 2px solid var(--border-solid);
            margin-left: 0.5rem;
            position: relative;
        }

        .timeline-item:before {
            content: '';
            position: absolute;
            left: -6px;
            top: 1.25rem;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: var(--primary);
        }

        .timeline-time {
            font-size: 0.875rem;
            color: var(--text-tertiary);
            min-width: 80px;
        }

        .timeline-content {
            flex: 1;
            color: var(--text-secondary);
        }

        /* Loading Spinner */
        .spinner {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top-color: white;
            animation: spin 1s linear infinite;
        }

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

        /* ========== WHITE LABEL WIZARD ========== */
        .wizard-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.9);
            backdrop-filter: blur(8px);
            z-index: 3000;
            display: none;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .wizard-modal.active {
            display: flex;
            opacity: 1;
        }

        .wizard-container {
            width: 90%;
            max-width: 1200px;
            max-height: 90vh;
            background: var(--bg-primary);
            border: 1px solid var(--border);
            border-radius: 20px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            box-shadow: 0 20px 80px rgba(0, 0, 0, 0.8);
        }

        .wizard-header {
            padding: 2rem;
            background: linear-gradient(135deg, rgba(100, 255, 218, 0.1), rgba(0, 212, 255, 0.1));
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .wizard-header-left h2 {
            font-size: 1.8rem;
            font-weight: 800;
            color: var(--accent-cyan);
            margin-bottom: 0.5rem;
        }

        .wizard-header-left p {
            color: var(--text-secondary);
            font-size: 0.95rem;
        }

        .wizard-close-btn {
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid var(--border);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all var(--transition-base);
        }

        .wizard-close-btn:hover {
            background: var(--error);
            border-color: var(--error);
        }

        .wizard-close-btn i {
            color: var(--text-secondary);
        }

        .wizard-close-btn:hover i {
            color: white;
        }

        .wizard-progress {
            padding: 1.5rem 2rem;
            background: var(--bg-secondary);
            border-bottom: 1px solid var(--border);
        }

        .wizard-steps {
            display: flex;
            justify-content: space-between;
            margin-bottom: 1rem;
        }

        .wizard-step {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
        }

        .wizard-step:not(:last-child)::after {
            content: '';
            position: absolute;
            top: 20px;
            left: 50%;
            width: 100%;
            height: 2px;
            background: var(--border);
            z-index: 0;
        }

        .wizard-step.completed:not(:last-child)::after {
            background: var(--accent);
        }

        .wizard-step-circle {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--bg-card-solid);
            border: 2px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 0.9rem;
            color: var(--text-secondary);
            position: relative;
            z-index: 1;
            transition: all var(--transition-base);
            margin-bottom: 0.5rem;
        }

        .wizard-step.active .wizard-step-circle {
            background: linear-gradient(135deg, var(--primary), var(--accent));
            border-color: var(--accent);
            color: white;
            box-shadow: 0 0 20px rgba(100, 255, 218, 0.4);
            animation: pulse-wizard 2s infinite;
        }

        .wizard-step.completed .wizard-step-circle {
            background: var(--accent);
            border-color: var(--accent);
            color: white;
        }

        @keyframes pulse-wizard {
            0%, 100% { box-shadow: 0 0 20px rgba(100, 255, 218, 0.4); }
            50% { box-shadow: 0 0 30px rgba(100, 255, 218, 0.6); }
        }

        .wizard-step-label {
            font-size: 0.75rem;
            color: var(--text-tertiary);
            text-align: center;
        }

        .wizard-step.active .wizard-step-label {
            color: var(--accent-cyan);
            font-weight: 600;
        }

        .wizard-progress-bar {
            width: 100%;
            height: 8px;
            background: var(--bg-card-solid);
            border-radius: 10px;
            overflow: hidden;
        }

        .wizard-progress-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--accent), var(--accent-cyan));
            transition: width 0.5s ease;
        }

        .wizard-body {
            flex: 1;
            overflow-y: auto;
            padding: 2rem;
        }

        .wizard-step-content {
            display: none;
        }

        .wizard-step-content.active {
            display: block;
            animation: fadeIn 0.4s ease;
        }

        .wizard-form-group {
            margin-bottom: 1.5rem;
        }

        .wizard-form-label {
            display: block;
            color: var(--text-primary);
            font-weight: 600;
            margin-bottom: 0.5rem;
            font-size: 0.95rem;
        }

        .wizard-form-label .required {
            color: var(--error);
            margin-left: 0.25rem;
        }

        .wizard-form-input {
            width: 100%;
            padding: 0.875rem 1rem;
            background: var(--bg-card-solid);
            border: 2px solid var(--border-solid);
            border-radius: 10px;
            color: var(--text-primary);
            font-size: 1rem;
            font-family: inherit;
            transition: all var(--transition-base);
        }

        .wizard-form-input:focus {
            outline: none;
            border-color: var(--accent-cyan);
            box-shadow: 0 0 0 3px rgba(100, 255, 218, 0.1);
        }

        .wizard-form-textarea {
            min-height: 100px;
            resize: vertical;
        }

        .wizard-form-select {
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364ffda' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 1rem center;
            padding-right: 3rem;
        }

        .wizard-upload-area {
            border: 2px dashed var(--border);
            border-radius: 10px;
            padding: 2rem;
            text-align: center;
            cursor: pointer;
            transition: all var(--transition-base);
        }

        .wizard-upload-area:hover {
            border-color: var(--accent-cyan);
            background: rgba(100, 255, 218, 0.05);
        }

        .wizard-upload-area.has-file {
            border-color: var(--accent);
            background: rgba(0, 208, 132, 0.05);
        }

        .wizard-upload-preview {
            max-width: 200px;
            max-height: 100px;
            margin: 1rem auto;
            border-radius: 8px;
        }

        .wizard-color-inputs {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
        }

        .wizard-color-picker-group {
            display: flex;
            gap: 1rem;
            align-items: center;
        }

        .wizard-color-picker {
            width: 60px;
            height: 60px;
            border-radius: 10px;
            border: 2px solid var(--border);
            cursor: pointer;
            transition: all var(--transition-base);
        }

        .wizard-color-picker:hover {
            transform: scale(1.05);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }

        .wizard-plan-cards {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem;
            margin-top: 1rem;
        }

        .wizard-plan-card {
            background: var(--bg-card-solid);
            border: 2px solid var(--border-solid);
            border-radius: 12px;
            padding: 1.5rem;
            cursor: pointer;
            transition: all var(--transition-base);
        }

        .wizard-plan-card:hover {
            border-color: var(--primary);
            transform: translateY(-4px);
        }

        .wizard-plan-card.selected {
            border-color: var(--accent);
            background: rgba(0, 208, 132, 0.1);
        }

        .wizard-plan-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
        }

        .wizard-plan-name {
            font-weight: 700;
            font-size: 1.1rem;
            color: var(--text-primary);
        }

        .wizard-plan-price {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--accent-cyan);
            margin-bottom: 0.5rem;
        }

        .wizard-plan-features {
            list-style: none;
            font-size: 0.9rem;
            color: var(--text-secondary);
        }

        .wizard-plan-features li {
            padding: 0.5rem 0;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .wizard-plan-features li::before {
            content: '✓';
            color: var(--accent);
            font-weight: 700;
        }

        .wizard-footer {
            padding: 1.5rem 2rem;
            background: var(--bg-secondary);
            border-top: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .wizard-btn {
            padding: 0.875rem 2rem;
            border: none;
            border-radius: 10px;
            font-size: 1rem;
            font-weight: 700;
            cursor: pointer;
            transition: all var(--transition-base);
            font-family: inherit;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .wizard-btn-primary {
            background: linear-gradient(135deg, var(--primary), var(--accent));
            color: white;
        }

        .wizard-btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
        }

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

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

        .wizard-btn-secondary:hover {
            background: rgba(255, 255, 255, 0.05);
        }

        .wizard-summary-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.5rem;
        }

        .wizard-summary-item {
            background: var(--bg-card-solid);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 1rem;
        }

        .wizard-summary-label {
            font-size: 0.85rem;
            color: var(--text-secondary);
            margin-bottom: 0.5rem;
        }

        .wizard-summary-value {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--text-primary);
        }

        .wizard-help-text {
            font-size: 0.85rem;
            color: var(--text-tertiary);
            margin-top: 0.5rem;
        }

        .wizard-success-icon {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, var(--accent), var(--success));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.5rem;
            animation: scaleIn 0.5s ease;
        }

        @keyframes scaleIn {
            from { transform: scale(0); }
            to { transform: scale(1); }
        }

        .wizard-success-icon i {
            font-size: 3rem;
            color: white;
        }

        /* ========== COMPLIANCE WARNING BANNER ========== */
        .compliance-banner {
            position: fixed;
            top: 80px;
            left: 0;
            right: 0;
            background: linear-gradient(135deg, rgba(239, 68, 68, 0.95), rgba(251, 146, 60, 0.95));
            backdrop-filter: blur(10px);
            border-bottom: 2px solid rgba(255, 255, 255, 0.2);
            padding: 1rem 2rem;
            z-index: 1500;
            display: none;
            animation: slideDown 0.4s ease;
            box-shadow: 0 4px 20px rgba(239, 68, 68, 0.4);
        }

        .compliance-banner.active {
            display: block;
        }

        .compliance-banner.warning {
            background: linear-gradient(135deg, rgba(251, 191, 36, 0.95), rgba(245, 158, 11, 0.95));
            box-shadow: 0 4px 20px rgba(251, 191, 36, 0.4);
        }

        .compliance-banner.info {
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.95), rgba(37, 99, 235, 0.95));
            box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4);
        }

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

        .compliance-banner-content {
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            gap: 1.5rem;
        }

        .compliance-banner-icon {
            width: 48px;
            height: 48px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .compliance-banner-icon i {
            font-size: 1.5rem;
            color: white;
        }

        .compliance-banner-text {
            flex: 1;
        }

        .compliance-banner-title {
            font-size: 1rem;
            font-weight: 700;
            color: white;
            margin-bottom: 0.25rem;
        }

        .compliance-banner-message {
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.95);
            line-height: 1.4;
        }

        .compliance-banner-regions {
            display: inline-flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-top: 0.5rem;
        }

        .compliance-region-tag {
            background: rgba(255, 255, 255, 0.2);
            padding: 0.25rem 0.75rem;
            border-radius: 12px;
            font-size: 0.75rem;
            font-weight: 600;
            color: white;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

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

        .compliance-btn {
            padding: 0.6rem 1.2rem;
            border-radius: 8px;
            font-size: 0.9rem;
            font-weight: 600;
            cursor: pointer;
            transition: all var(--transition-base);
            white-space: nowrap;
            border: none;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .compliance-btn-primary {
            background: white;
            color: #1a1a1a;
        }

        .compliance-btn-primary:hover {
            background: rgba(255, 255, 255, 0.9);
            transform: translateY(-1px);
        }

        .compliance-btn-secondary {
            background: rgba(255, 255, 255, 0.2);
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        .compliance-btn-secondary:hover {
            background: rgba(255, 255, 255, 0.3);
        }

        .compliance-banner-close {
            width: 32px;
            height: 32px;
            background: rgba(255, 255, 255, 0.2);
            border: none;
            border-radius: 8px;
            color: white;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all var(--transition-base);
            flex-shrink: 0;
        }

        .compliance-banner-close:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: rotate(90deg);
        }

        /* Adjust main content when banner is visible */
        body.compliance-banner-visible {
            padding-top: 140px;
        }

        /* ========== PERFORMANCE OVERVIEW DASHBOARD ========== */
        .performance-overview {
            background: linear-gradient(135deg, rgba(100, 255, 218, 0.1), rgba(102, 126, 234, 0.1));
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 2rem;
            margin-bottom: 2rem;
        }

        .performance-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
        }

        .performance-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .performance-live-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: rgba(16, 185, 129, 0.2);
            border: 1px solid var(--success);
            padding: 0.4rem 0.8rem;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--success);
        }

        .performance-live-dot {
            width: 8px;
            height: 8px;
            background: var(--success);
            border-radius: 50%;
            animation: pulse-live 2s infinite;
        }

        @keyframes pulse-live {
            0%, 100% { opacity: 1; box-shadow: 0 0 8px var(--success); }
            50% { opacity: 0.5; box-shadow: 0 0 4px var(--success); }
        }

        .performance-stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

        .perf-stat-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 1.5rem;
            transition: all var(--transition-base);
        }

        .perf-stat-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 24px rgba(100, 255, 218, 0.2);
            border-color: var(--accent-cyan);
        }

        .perf-stat-label {
            font-size: 0.85rem;
            color: var(--text-secondary);
            margin-bottom: 0.5rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .perf-stat-value {
            font-size: 2rem;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 0.5rem;
        }

        .perf-stat-change {
            font-size: 0.8rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .perf-stat-change.positive {
            color: var(--success);
        }

        .perf-stat-change.negative {
            color: var(--error);
        }

        .perf-stat-trend {
            font-size: 0.75rem;
            color: var(--text-tertiary);
        }

        .performance-chart-container {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 1.5rem;
            height: 200px;
            position: relative;
            overflow: hidden;
        }

        .performance-chart-title {
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--text-secondary);
            margin-bottom: 1rem;
        }

        .chart-bars {
            display: flex;
            align-items: flex-end;
            gap: 0.5rem;
            height: 140px;
        }

        .chart-bar {
            flex: 1;
            background: linear-gradient(180deg, var(--accent-cyan), rgba(100, 255, 218, 0.3));
            border-radius: 4px 4px 0 0;
            position: relative;
            transition: all 0.3s ease;
            min-height: 20px;
        }

        .chart-bar:hover {
            filter: brightness(1.2);
        }

        .chart-bar-value {
            position: absolute;
            top: -20px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 0.7rem;
            font-weight: 600;
            color: var(--accent-cyan);
            white-space: nowrap;
        }

        /* Enhanced Impact Metrics */
        .impact-grid-enhanced {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1.5rem;
        }

        .impact-card-enhanced {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 2rem;
            position: relative;
            overflow: hidden;
            transition: all var(--transition-base);
        }

        .impact-card-enhanced::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--accent-cyan), var(--primary));
        }

        .impact-card-enhanced:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 32px rgba(100, 255, 218, 0.3);
            border-color: var(--accent-cyan);
        }

        .impact-icon-large {
            width: 56px;
            height: 56px;
            background: linear-gradient(135deg, var(--accent-cyan), var(--primary));
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.75rem;
            margin-bottom: 1.5rem;
        }

        .impact-value-large {
            font-size: 3rem;
            font-weight: 700;
            background: linear-gradient(135deg, var(--accent-cyan), var(--primary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 0.5rem;
        }

        .impact-subtitle {
            font-size: 0.9rem;
            color: var(--text-secondary);
            margin-bottom: 1rem;
        }

        .impact-details {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .impact-detail-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.5rem 0;
            border-bottom: 1px solid var(--border);
        }

        .impact-detail-row:last-child {
            border-bottom: none;
        }

        .impact-detail-label {
            font-size: 0.85rem;
            color: var(--text-tertiary);
        }

        .impact-detail-value {
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--text-primary);
        }

        /* Enhanced Patent Compliance */
        .compliance-enhanced {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 2rem;
        }

        .compliance-score-ring {
            width: 150px;
            height: 150px;
            margin: 0 auto 2rem;
            position: relative;
        }

        .compliance-score-circle {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: conic-gradient(var(--accent-cyan) 0% var(--compliance-percent, 95%), var(--bg-primary) var(--compliance-percent, 95%) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .compliance-score-circle::before {
            content: '';
            position: absolute;
            width: 80%;
            height: 80%;
            background: var(--bg-card);
            border-radius: 50%;
        }

        .compliance-score-text {
            position: absolute;
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--accent-cyan);
            z-index: 1;
        }

        /* ========== BILLING & PAYMENT VIEWS ========== */
        .billing-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
            padding-bottom: 1.5rem;
            border-bottom: 1px solid var(--border);
        }

        .billing-title {
            font-size: 2rem;
            font-weight: 700;
            color: var(--text-primary);
        }

        .billing-subtitle {
            font-size: 1rem;
            color: var(--text-secondary);
            margin-top: 0.5rem;
        }

        .billing-summary-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

        .billing-summary-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 1.5rem;
            transition: all var(--transition-base);
        }

        .billing-summary-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(100, 255, 218, 0.15);
        }

        .billing-summary-label {
            font-size: 0.85rem;
            color: var(--text-secondary);
            margin-bottom: 0.75rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .billing-summary-value {
            font-size: 2rem;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 0.5rem;
        }

        .billing-summary-detail {
            font-size: 0.85rem;
            color: var(--text-tertiary);
        }

        .billing-table-container {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 12px;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            margin-bottom: 2rem;
        }

        .billing-table-header {
            background: rgba(100, 255, 218, 0.05);
            padding: 1rem 1.5rem;
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .billing-table-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--text-primary);
        }

        .billing-table {
            width: 100%;
            border-collapse: collapse;
        }

        .billing-table th {
            text-align: left;
            padding: 1rem 1.5rem;
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--text-secondary);
            border-bottom: 1px solid var(--border);
            background: var(--bg-primary);
        }

        .billing-table td {
            padding: 1rem 1.5rem;
            font-size: 0.9rem;
            color: var(--text-primary);
            border-bottom: 1px solid var(--border);
        }

        .billing-table tr:last-child td {
            border-bottom: none;
        }

        .billing-table tr:hover {
            background: rgba(100, 255, 218, 0.03);
        }

        .invoice-status {
            display: inline-flex;
            align-items: center;
            padding: 0.35rem 0.75rem;
            border-radius: 12px;
            font-size: 0.75rem;
            font-weight: 600;
            gap: 0.5rem;
        }

        .invoice-status.paid {
            background: rgba(16, 185, 129, 0.1);
            color: var(--success);
            border: 1px solid rgba(16, 185, 129, 0.2);
        }

        .invoice-status.pending {
            background: rgba(251, 191, 36, 0.1);
            color: var(--warning);
            border: 1px solid rgba(251, 191, 36, 0.2);
        }

        .invoice-status.overdue {
            background: rgba(239, 68, 68, 0.1);
            color: var(--error);
            border: 1px solid rgba(239, 68, 68, 0.2);
        }

        .payment-method-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 1.5rem;
            margin-bottom: 1rem;
            transition: all var(--transition-base);
            position: relative;
        }

        .payment-method-card.primary {
            border-color: var(--accent-cyan);
            background: linear-gradient(135deg, rgba(100, 255, 218, 0.05), rgba(102, 126, 234, 0.05));
        }

        .payment-method-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(100, 255, 218, 0.15);
        }

        .payment-card-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 1rem;
        }

        .payment-card-brand {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .payment-card-icon {
            width: 48px;
            height: 32px;
            background: linear-gradient(135deg, var(--primary), var(--accent-cyan));
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.85rem;
            font-weight: 700;
            color: white;
        }

        .payment-card-info {
            flex: 1;
        }

        .payment-card-number {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 0.25rem;
        }

        .payment-card-expiry {
            font-size: 0.85rem;
            color: var(--text-secondary);
        }

        .payment-badge {
            display: inline-block;
            padding: 0.35rem 0.75rem;
            border-radius: 12px;
            font-size: 0.75rem;
            font-weight: 600;
            background: rgba(100, 255, 218, 0.1);
            color: var(--accent-cyan);
            border: 1px solid rgba(100, 255, 218, 0.2);
        }

        .payment-actions {
            display: flex;
            gap: 0.75rem;
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px solid var(--border);
        }

        .btn-action {
            padding: 0.5rem 1rem;
            border-radius: 8px;
            font-size: 0.85rem;
            font-weight: 600;
            cursor: pointer;
            transition: all var(--transition-base);
            border: 1px solid var(--border);
            background: var(--bg-card);
            color: var(--text-primary);
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .btn-action:hover {
            background: rgba(100, 255, 218, 0.1);
            border-color: var(--accent-cyan);
            transform: translateY(-1px);
        }

        .btn-action.primary {
            background: linear-gradient(135deg, var(--accent-cyan), var(--primary));
            border-color: transparent;
            color: white;
        }

        .btn-action.primary:hover {
            filter: brightness(1.1);
        }

        .btn-action.danger {
            color: var(--error);
        }

        .btn-action.danger:hover {
            background: rgba(239, 68, 68, 0.1);
            border-color: var(--error);
        }

/* ========== PHASE B: COST TAGS & USAGE QUOTAS STYLES ========== */

/* Tag Badges */
.tag-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-right: 0.5rem;
    margin-bottom: 0.25rem;
}

.tag-badge.blue {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.tag-badge.green {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.tag-badge.yellow {
    background: rgba(234, 179, 8, 0.1);
    color: #eab308;
    border: 1px solid rgba(234, 179, 8, 0.2);
}

.tag-badge.purple {
    background: rgba(168, 85, 247, 0.1);
    color: #a855f7;
    border: 1px solid rgba(168, 85, 247, 0.2);
}

.tag-badge.cyan {
    background: rgba(6, 182, 212, 0.1);
    color: #06b6d4;
    border: 1px solid rgba(6, 182, 212, 0.2);
}

.tag-badge.orange {
    background: rgba(249, 115, 22, 0.1);
    color: #f97316;
    border: 1px solid rgba(249, 115, 22, 0.2);
}

.tag-badge.gray {
    background: rgba(156, 163, 175, 0.1);
    color: #9ca3af;
    border: 1px solid rgba(156, 163, 175, 0.2);
}

.tag-more {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-style: italic;
}

/* Category Badges */
.category-badge {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.category-badge.system {
    background: rgba(100, 255, 218, 0.1);
    color: var(--accent-cyan);
    border: 1px solid rgba(100, 255, 218, 0.2);
}

.category-badge.custom {
    background: rgba(102, 126, 234, 0.1);
    color: var(--primary);
    border: 1px solid rgba(102, 126, 234, 0.2);
}

.category-badge.compliance {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

/* Tab Navigation */
.tab-nav {
    display: flex;
    gap: 0.5rem;
    border-bottom: 2px solid var(--border);
    padding-bottom: 0.5rem;
}

.tab-btn {
    padding: 0.75rem 1.5rem;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-weight: 500;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    transition: all var(--transition-base);
    position: relative;
}

.tab-btn:hover {
    background: rgba(100, 255, 218, 0.05);
    color: var(--text-primary);
}

.tab-btn.active {
    color: var(--accent-cyan);
    background: rgba(100, 255, 218, 0.1);
}

.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent-cyan);
}

/* Quota Cards */
.quota-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all var(--transition-base);
}

.quota-card:hover {
    border-color: var(--accent-cyan);
    box-shadow: 0 4px 12px rgba(100, 255, 218, 0.1);
    transform: translateY(-2px);
}

.quota-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.quota-title {
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
}

.quota-subtitle {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin: 0;
}

.quota-status {
    padding: 0.35rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.quota-status.success {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.quota-status.warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.quota-status.danger {
    background: rgba(239, 68, 68, 0.1);
    color: var(--error);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Quota Progress */
.quota-progress-container {
    margin-bottom: 1rem;
}

.quota-progress-bar {
    width: 100%;
    height: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.quota-progress-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.3s ease;
    position: relative;
}

.quota-progress-fill.success {
    background: linear-gradient(90deg, var(--success), rgba(16, 185, 129, 0.7));
}

.quota-progress-fill.warning {
    background: linear-gradient(90deg, var(--warning), rgba(245, 158, 11, 0.7));
}

.quota-progress-fill.danger {
    background: linear-gradient(90deg, var(--error), rgba(239, 68, 68, 0.7));
}

.quota-progress-text {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.quota-details {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

.quota-detail-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.quota-detail-item i {
    color: var(--accent-cyan);
    font-size: 0.9rem;
}

.quota-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.quota-percentage {
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.85rem;
}

.quota-percentage.success {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.quota-percentage.warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.quota-percentage.danger {
    background: rgba(239, 68, 68, 0.1);
    color: var(--error);
}

/* Info Banner */
.info-banner {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 12px;
    color: var(--text-primary);
}

.info-banner i {
    color: #3b82f6;
    font-size: 1.25rem;
    margin-top: 0.1rem;
}

/* Alert Banner */
.alert-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    border-radius: 12px;
    border: 1px solid;
}

.alert-banner.warning {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.2);
    color: var(--text-primary);
}

.alert-banner i {
    color: var(--warning);
    font-size: 1.5rem;
}

.alert-banner .btn-text {
    margin-left: auto;
    color: var(--accent-cyan);
    font-weight: 600;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    transition: all var(--transition-base);
}

.alert-banner .btn-text:hover {
    background: rgba(100, 255, 218, 0.1);
}

/* Button Variants */
.btn-secondary.warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.btn-secondary.warning:hover {
    background: rgba(245, 158, 11, 0.2);
    border-color: var(--warning);
}

/* Status Badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    gap: 0.5rem;
}

.status-badge.success {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.status-badge.warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
    border: 1px solid rgba(245, 158, 11, 0.2);
}
        /* Responsive */
        @media (max-width: 768px) {
            .header-top {
                flex-direction: column;
                gap: 1rem;
            }

            .ai-status {
                flex-direction: column;
                gap: 0.5rem;
            }

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

            .action-bar {
                flex-direction: column;
                align-items: flex-start;
            }

            .wizard-steps {
                flex-wrap: wrap;
                gap: 1rem;
            }

            .wizard-step {
                flex-basis: 30%;
            }

            .wizard-plan-cards {
                grid-template-columns: 1fr;
            }

            .wizard-summary-grid {
                grid-template-columns: 1fr;
            }

            .wizard-color-inputs {
                grid-template-columns: 1fr;
            }
        }
/* ========== PHASE C: GLOBAL SETTINGS & DEPLOYMENT RULES STYLES ========== */

/* Settings Navigation */
.settings-nav {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 2rem;
    background: var(--bg-card);
    padding: 0.5rem;
    border-radius: 12px;
    border: 1px solid var(--border);
    overflow-x: auto;
}

.settings-nav-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.5rem;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-weight: 500;
    cursor: pointer;
    border-radius: 8px;
    transition: all var(--transition-base);
    white-space: nowrap;
}

.settings-nav-btn:hover {
    background: rgba(100, 255, 218, 0.05);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.settings-nav-btn.active {
    background: linear-gradient(135deg, rgba(100, 255, 218, 0.15), rgba(102, 126, 234, 0.15));
    color: var(--accent-cyan);
    box-shadow: 0 4px 12px rgba(100, 255, 218, 0.2);
}

.settings-nav-btn i {
    font-size: 1.1rem;
}

/* Settings Tab Content */
.settings-tab-content {
    display: none;
    animation: fadeIn 0.3s ease-in;
}

.settings-tab-content.active {
    display: block;
}

/* Settings Section */
.settings-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
    transition: all var(--transition-base);
}

.settings-section:hover {
    border-color: rgba(100, 255, 218, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.settings-section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.settings-section-title {
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
}

.settings-section-subtitle {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0;
}

.settings-badge {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.settings-badge.updated {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.settings-badge.security {
    background: rgba(239, 68, 68, 0.1);
    color: var(--error);
    border: 1px solid rgba(239, 68, 68, 0.2);
    animation: pulse-security 2s infinite;
}

@keyframes pulse-security {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
    50% { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1); }
}

/* Settings Grid */
.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.settings-item {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.settings-item.full-width {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.settings-label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.label-text {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.95rem;
}

.label-text i {
    color: var(--accent-cyan);
}

.label-hint {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.settings-input,
/* Modern custom select — kills native OS dropdown */
select,
.settings-select,
.filter-select,
.form-select,
.condition-select,
.operator-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%2364ffda' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 12px;
    padding-right: 2.25rem !important;
    cursor: pointer;
}

select option,
.settings-select option {
    background: #1a1a2e;
    color: #e5e5e5;
    padding: 0.5rem;
}

.settings-select {
    padding: 0.875rem 1rem;
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.95rem;
    transition: all var(--transition-base);
}

.settings-input:focus,
.settings-select:focus,
select:focus {
    outline: none;
    border-color: var(--accent-cyan);
    box-shadow: 0 0 0 3px rgba(100, 255, 218, 0.1);
    background-color: rgba(255, 255, 255, 0.05);
}

select:hover,
.settings-select:hover {
    border-color: rgba(100, 255, 218, 0.3);
    background-color: rgba(255, 255, 255, 0.04);
}

.settings-select.compact {
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
}

.input-with-unit {
    display: flex;
    align-items: stretch;
}

.input-with-unit .settings-input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}

.input-unit {
    padding: 0.875rem 1rem;
    background: rgba(100, 255, 218, 0.1);
    border: 1px solid var(--accent-cyan);
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    color: var(--accent-cyan);
    font-weight: 700;
    font-size: 0.85rem;
}

/* Toggle Switch */
.toggle-group {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
}

.toggle-switch.large {
    width: 64px;
    height: 34px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.1);
    transition: 0.3s;
    border-radius: 34px;
    border: 1px solid var(--border);
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 3px;
    background-color: var(--text-secondary);
    transition: 0.3s;
    border-radius: 50%;
}

.toggle-switch.large .toggle-slider:before {
    height: 26px;
    width: 26px;
    left: 3px;
    bottom: 3px;
}

.toggle-switch input:checked + .toggle-slider {
    background: linear-gradient(135deg, var(--accent-cyan), var(--primary));
    border-color: var(--accent-cyan);
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(24px);
    background-color: white;
}

.toggle-switch.large input:checked + .toggle-slider:before {
    transform: translateX(30px);
}

.toggle-label {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

/* Settings List */
.settings-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.settings-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: all var(--transition-base);
}

.settings-list-item:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--accent-cyan);
    transform: translateX(4px);
}

/* Document Card Hover Effects */
.doc-card:hover {
    border-color: var(--accent-cyan) !important;
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.2);
}

.settings-list-content {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.settings-list-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.settings-list-icon.security {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(239, 68, 68, 0.1));
    color: var(--error);
}

.settings-list-text {
    flex: 1;
}

.settings-list-title {
    color: var(--text-primary);
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
}

.settings-list-subtitle {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0;
}

/* Performance Cards */
.performance-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.performance-card {
    background: linear-gradient(135deg, rgba(100, 255, 218, 0.05), rgba(102, 126, 234, 0.05));
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all var(--transition-base);
}

.performance-card:hover {
    border-color: var(--accent-cyan);
    box-shadow: 0 8px 24px rgba(100, 255, 218, 0.15);
    transform: translateY(-4px);
}

.performance-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.performance-card-header i {
    font-size: 1.5rem;
    color: var(--accent-cyan);
}

.performance-card-header h3 {
    color: var(--text-primary);
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
}

.performance-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.performance-metric {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.metric-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.metric-value {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1rem;
}

.metric-value.success {
    color: var(--success);
}

/* Deployment Stats Grid */
.deployment-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.deployment-stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    transition: all var(--transition-base);
}

.deployment-stat-card:hover {
    border-color: var(--accent-cyan);
    box-shadow: 0 4px 12px rgba(100, 255, 218, 0.1);
    transform: translateY(-2px);
}

.stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.stat-icon.success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.1));
    color: var(--success);
}

.stat-icon.primary {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(102, 126, 234, 0.1));
    color: var(--primary);
}

.stat-icon.warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(245, 158, 11, 0.1));
    color: var(--warning);
}

.stat-icon.error {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(239, 68, 68, 0.1));
    color: var(--error);
}

.stat-content {
    flex: 1;
}

.stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.stat-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.stat-change {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.stat-change.positive {
    color: var(--success);
}

.stat-change.negative {
    color: var(--error);
}

/* Rules Container */
.rules-container {
    margin-bottom: 2rem;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.section-title i {
    color: var(--accent-cyan);
}

/* Rule Card */
.rule-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 1.5rem;
    overflow: hidden;
    transition: all var(--transition-base);
}

.rule-card.active {
    border-color: rgba(100, 255, 218, 0.3);
}

.rule-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.rule-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid var(--border);
}

.rule-status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.rule-status-indicator.active {
    background: var(--success);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
    animation: pulse-status 2s infinite;
}

.rule-status-indicator.inactive {
    background: var(--text-secondary);
}

@keyframes pulse-status {
    0%, 100% { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2); }
    50% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.1); }
}

.rule-header-content {
    flex: 1;
}

.rule-title {
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
}

.rule-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.rule-tag {
    padding: 0.25rem 0.75rem;
    background: rgba(100, 255, 218, 0.1);
    border: 1px solid rgba(100, 255, 218, 0.2);
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent-cyan);
}

.rule-tag.production {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.2);
    color: var(--error);
}

.rule-tag.staging {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.2);
    color: var(--warning);
}

.rule-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.rule-card-body {
    padding: 1.5rem;
}

/* Workflow */
.rule-workflow {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    overflow-x: auto;
}

.workflow-step {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 140px;
}

.workflow-step-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(100, 255, 218, 0.2), rgba(102, 126, 234, 0.2));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-cyan);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.workflow-step-content {
    flex: 1;
}

.workflow-step-title {
    color: var(--accent-cyan);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.workflow-step-text {
    color: var(--text-primary);
    font-size: 0.9rem;
}

.workflow-step-text code {
    background: rgba(100, 255, 218, 0.1);
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    color: var(--accent-cyan);
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
}

.workflow-arrow {
    color: var(--text-secondary);
    font-size: 1.25rem;
    font-weight: 700;
    flex-shrink: 0;
}

.rule-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.rule-stat {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.rule-stat i {
    color: var(--accent-cyan);
}

/* Templates Section */
.templates-section {
    margin-top: 3rem;
}

.template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}

.template-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    transition: all var(--transition-base);
}

.template-card:hover {
    border-color: var(--accent-cyan);
    box-shadow: 0 8px 24px rgba(100, 255, 218, 0.15);
    transform: translateY(-4px);
}

.template-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(100, 255, 218, 0.2), rgba(102, 126, 234, 0.2));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-cyan);
    font-size: 1.75rem;
}

.template-title {
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 0.75rem 0;
}

.template-description {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 1.25rem;
}

        /* ========== WHITE LABEL WIZARD STYLES ========== */
        .step-complete {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        }
/* ========== PHASE D: AUTO-SCALING & FAILOVER STYLES ========== */

/* Scaling Overview */
.scaling-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.scaling-stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all var(--transition-base);
}

.scaling-stat-card:hover {
    border-color: var(--accent-cyan);
    box-shadow: 0 8px 24px rgba(100, 255, 218, 0.12);
    transform: translateY(-4px);
}

.scaling-stat-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.scaling-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.scaling-stat-icon.success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.05));
    color: var(--success);
}

.scaling-stat-icon.primary {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(102, 126, 234, 0.05));
    color: var(--primary);
}

.scaling-stat-icon.warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(245, 158, 11, 0.05));
    color: var(--warning);
}

.scaling-stat-icon.info {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(6, 182, 212, 0.05));
    color: #06b6d4;
}

.scaling-stat-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.scaling-stat-value {
    color: var(--text-primary);
    font-size: 2rem;
    font-weight: 800;
}

.scaling-stat-footer {
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.trend-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.trend-indicator.positive {
    color: var(--success);
}

.trend-indicator.negative {
    color: var(--error);
}

.trend-indicator.neutral {
    color: var(--text-secondary);
}

/* Policy Cards */
.policies-container {
    margin-bottom: 2rem;
}

.policy-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 2rem;
    overflow: hidden;
    transition: all var(--transition-base);
}

.policy-card.active {
    border-color: rgba(100, 255, 218, 0.3);
}

.policy-card:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.policy-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid var(--border);
}

.policy-status-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
}

.policy-status-dot.active {
    background: var(--success);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2);
    animation: pulse-dot 2s infinite;
}

.policy-status-dot.inactive {
    background: var(--text-secondary);
}

@keyframes pulse-dot {
    0%, 100% { box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2); }
    50% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0.05); }
}

.policy-header-content {
    flex: 1;
}

.policy-title {
    color: var(--text-primary);
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
}

.policy-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.policy-badge {
    padding: 0.25rem 0.75rem;
    background: rgba(100, 255, 218, 0.1);
    border: 1px solid rgba(100, 255, 218, 0.2);
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent-cyan);
}

.policy-badge.production {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.2);
    color: var(--error);
}

.policy-badge.staging {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.2);
    color: var(--warning);
}

.policy-card-body {
    padding: 1.5rem;
}

/* Metrics Chart */
.metrics-chart {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.chart-header h4 {
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.chart-legend {
    display: flex;
    gap: 1.5rem;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.legend-dot.blue { background: #3b82f6; }
.legend-dot.green { background: var(--success); }
.legend-dot.cyan { background: var(--accent-cyan); }

.chart-visual {
    position: relative;
    height: 180px;
    margin-bottom: 0.5rem;
}

.chart-bars {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    height: 100%;
    gap: 0.5rem;
}

.chart-bar {
    position: relative;
    flex: 1;
    background: linear-gradient(to top, var(--accent-cyan), rgba(100, 255, 218, 0.4));
    border-radius: 4px 4px 0 0;
    transition: all 0.3s ease;
    animation: chartBarGrow 0.8s ease-out backwards;
}

@keyframes chartBarGrow {
    from { height: 0 !important; opacity: 0; }
    to { opacity: 1; }
}

.chart-bar:nth-child(1) { animation-delay: 0.1s; }
.chart-bar:nth-child(2) { animation-delay: 0.15s; }
.chart-bar:nth-child(3) { animation-delay: 0.2s; }
.chart-bar:nth-child(4) { animation-delay: 0.25s; }
.chart-bar:nth-child(5) { animation-delay: 0.3s; }
.chart-bar:nth-child(6) { animation-delay: 0.35s; }
.chart-bar:nth-child(7) { animation-delay: 0.4s; }
.chart-bar:nth-child(8) { animation-delay: 0.45s; }
.chart-bar:nth-child(9) { animation-delay: 0.5s; }
.chart-bar:nth-child(10) { animation-delay: 0.55s; }
.chart-bar:nth-child(11) { animation-delay: 0.6s; }
.chart-bar:nth-child(12) { animation-delay: 0.65s; }

.chart-bar:hover {
    background: linear-gradient(to top, var(--primary), rgba(102, 126, 234, 0.4));
    transform: scaleY(1.05);
}

.spike-label {
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(16, 185, 129, 0.2);
    color: var(--success);
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}

.spike-label.down {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.chart-threshold {
    position: absolute;
    top: 30%;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--success);
    opacity: 0.3;
}

.chart-threshold::before {
    content: '70% Target';
    position: absolute;
    right: 0;
    top: -20px;
    font-size: 0.75rem;
    color: var(--success);
}

/* Scaling Rules */
.scaling-rules {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.scaling-rule {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: all var(--transition-base);
}

.scaling-rule:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--accent-cyan);
    transform: translateX(4px);
}

.rule-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.rule-icon.scale-up {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.1));
    color: var(--success);
}

.rule-icon.scale-down {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.1));
    color: #3b82f6;
}

.rule-content {
    flex: 1;
}

.rule-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}

.rule-description {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.rule-stats {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.stat-item {
    background: rgba(100, 255, 218, 0.1);
    padding: 0.35rem 0.75rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent-cyan);
}

/* Activity Timeline */
.policy-activity {
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

.activity-title {
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
}

.activity-timeline {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.timeline-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.timeline-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 4px;
}

.timeline-dot.success {
    background: var(--success);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

.timeline-dot.info {
    background: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.timeline-content {
    flex: 1;
}

.timeline-text {
    color: var(--text-primary);
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.timeline-time {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

/* Schedule Grid */
.schedule-grid {
    display: grid;
    gap: 1rem;
}

.schedule-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: all var(--transition-base);
}

.schedule-item:hover {
    background: rgba(255, 255, 218, 0.04);
    border-color: var(--accent-cyan);
    transform: translateX(4px);
}

.schedule-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(100, 255, 218, 0.2), rgba(102, 126, 234, 0.2));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-cyan);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.schedule-content {
    flex: 1;
}

.schedule-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.schedule-time {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.schedule-action {
    color: var(--accent-cyan);
    font-size: 0.9rem;
}

/* Failover Health */
.failover-health {
    margin-bottom: 2.5rem;
}

.health-indicator {
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: 16px;
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

.health-indicator.healthy {
    border-color: var(--success);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), rgba(16, 185, 129, 0.02));
}

.health-pulse {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.1) 0%, transparent 70%);
    animation: healthPulse 4s ease-in-out infinite;
}

@keyframes healthPulse {
    0%, 100% { transform: scale(0.8); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 0.8; }
}

.health-content {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.health-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(16, 185, 129, 0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--success);
    font-size: 2rem;
}

.health-title {
    color: var(--success);
    font-size: 1.75rem;
    font-weight: 800;
    margin: 0 0 0.25rem 0;
}

.health-subtitle {
    color: var(--text-secondary);
    font-size: 1rem;
    margin: 0;
}

.health-stats {
    position: relative;
    display: flex;
    gap: 3rem;
}

.health-stat {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-label {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.stat-value {
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 700;
}

/* Topology */
.topology-section {
    margin-bottom: 2.5rem;
}

.topology-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr 1fr;
    gap: 2rem;
    align-items: center;
}

.region-card {
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: 16px;
    padding: 1.5rem;
    position: relative;
    transition: all var(--transition-base);
}

.region-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

.region-card.primary {
    border-color: var(--accent-cyan);
    background: linear-gradient(135deg, rgba(100, 255, 218, 0.05), rgba(102, 126, 234, 0.05));
}

.region-card.secondary {
    border-color: rgba(245, 158, 11, 0.4);
}

.region-card.backup {
    border-color: rgba(156, 163, 175, 0.4);
}

.region-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.region-badge.primary {
    background: linear-gradient(135deg, var(--accent-cyan), var(--primary));
    color: white;
}

.region-badge.secondary {
    background: linear-gradient(135deg, var(--warning), rgba(245, 158, 11, 0.8));
    color: white;
}

.region-badge.backup {
    background: linear-gradient(135deg, #6b7280, #9ca3af);
    color: white;
}

.region-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-top: 0.5rem;
}

.region-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(100, 255, 218, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-cyan);
    font-size: 1.5rem;
}

.region-name {
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.25rem 0;
}

.region-location {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin: 0;
}

.region-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.region-metric {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.metric-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
    flex-shrink: 0;
}

.metric-icon.success {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.metric-label {
    color: var(--text-secondary);
    font-size: 0.75rem;
    margin-bottom: 0.125rem;
}

.metric-value {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 0.9rem;
}

.metric-value.success {
    color: var(--success);
}

.region-footer {
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

/* Failover Arrow */
.failover-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.arrow-line {
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, var(--accent-cyan), transparent, var(--accent-cyan));
}

.arrow-head {
    color: var(--accent-cyan);
    font-size: 2rem;
    animation: arrowPulse 2s ease-in-out infinite;
}

@keyframes arrowPulse {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(8px); }
}

.arrow-label {
    background: rgba(100, 255, 218, 0.1);
    color: var(--accent-cyan);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
}

/* Failover Rules */
.failover-rules-section {
    margin-bottom: 2.5rem;
}

.failover-rule-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    transition: all var(--transition-base);
}

.failover-rule-card:hover {
    border-color: var(--accent-cyan);
    box-shadow: 0 4px 12px rgba(100, 255, 218, 0.1);
}

.rule-config {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.config-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
}

.config-label {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.config-value {
    color: var(--accent-cyan);
    font-weight: 600;
    font-size: 0.9rem;
}

/* DR Metrics */
.dr-section {
    margin-bottom: 2rem;
}

.dr-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.dr-metric-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    transition: all var(--transition-base);
}

.dr-metric-card:hover {
    border-color: var(--success);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
    transform: translateY(-2px);
}

.dr-metric-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(100, 255, 218, 0.2), rgba(102, 126, 234, 0.2));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-cyan);
    font-size: 1.75rem;
    flex-shrink: 0;
}

.dr-metric-content {
    flex: 1;
}

.dr-metric-label {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.dr-metric-value {
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 0.25rem;
}

.dr-metric-detail {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.dr-metric-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
}

.dr-metric-status.success {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .topology-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .failover-arrow {
        transform: rotate(90deg);
        margin: 1rem 0;
    }
}
        .step-active {
            background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
            box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2);
            animation: pulse 2s infinite;
        }

/* ========== PHASE E: CACHE TTL & COMPLIANCE TEMPLATES STYLES ========== */

/* Cache TTL Policies Styles */

/* Compact Stats Bar */
.ttl-stats-compact {
    display: flex;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.25rem 2rem;
    margin-bottom: 1.5rem;
    gap: 2rem;
}

.ttl-stat-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.ttl-stat-item i {
    font-size: 1.5rem;
    color: var(--accent-cyan);
    opacity: 0.8;
}

.ttl-stat-data {
    flex: 1;
}

.ttl-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 0.25rem;
}

.ttl-stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ttl-stat-trend {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
}

.ttl-stat-trend.positive {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.ttl-stat-meta {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.ttl-stat-divider {
    width: 1px;
    height: 40px;
    background: var(--border);
}

/* Compact Category Cards */
.policy-categories-compact {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.category-compact-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem;
    transition: all 0.3s ease;
    cursor: pointer;
}

.category-compact-card:hover {
    border-color: var(--accent-cyan);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.category-compact-card.active {
    border-color: var(--accent-cyan);
    background: linear-gradient(135deg, rgba(100, 255, 218, 0.05), rgba(102, 126, 234, 0.05));
}

.category-compact-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.category-compact-header i {
    font-size: 1.5rem;
    color: var(--accent-cyan);
}

.category-compact-header h3 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
}

.category-count {
    font-size: 0.7rem;
    color: var(--text-secondary);
    display: block;
    margin-top: 0.125rem;
}

.category-compact-stats {
    display: flex;
    gap: 1rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.category-compact-stats div {
    flex: 1;
}

.category-compact-stats span {
    color: var(--text-primary);
    font-weight: 600;
    display: block;
    margin-bottom: 0.125rem;
}

.policy-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.policy-category-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.5rem;
    transition: all 0.3s ease;
    cursor: pointer;
}

.policy-category-card:hover {
    border-color: var(--accent-cyan);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    transform: translateY(-4px);
}

.policy-category-card.active-category {
    border-color: var(--accent-cyan);
    background: linear-gradient(135deg, rgba(100, 255, 218, 0.05), rgba(102, 126, 234, 0.05));
}

.category-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.category-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--accent-cyan), var(--primary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: white;
    flex-shrink: 0;
}

.category-info {
    flex: 1;
    min-width: 0;
}

.category-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
}

.category-subtitle {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
}

.category-badge {
    background: rgba(100, 255, 218, 0.1);
    color: var(--accent-cyan);
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.category-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.category-stat {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.category-stat .stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.category-stat .stat-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* TTL Policy Cards */
.ttl-policies-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.ttl-policy-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.ttl-policy-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}

.ttl-policy-card.priority-high {
    border-left: 4px solid var(--accent-cyan);
}

.ttl-policy-card.priority-medium {
    border-left: 4px solid var(--warning);
}

.ttl-policy-card.priority-low {
    border-left: 4px solid var(--info);
}

.policy-main {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.policy-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-top: 0.5rem;
    flex-shrink: 0;
}

.active-indicator {
    background: var(--success);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
    animation: indicatorPulse 2s ease-in-out infinite;
}

@keyframes indicatorPulse {
    0%, 100% {
        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.1);
    }
}

.policy-details {
    flex: 1;
    min-width: 0;
}

.policy-name-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.policy-name {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.priority-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.priority-badge.high {
    background: rgba(100, 255, 218, 0.1);
    color: var(--accent-cyan);
}

.priority-badge.medium {
    background: rgba(234, 179, 8, 0.1);
    color: var(--warning);
}

.priority-badge.low {
    background: rgba(59, 130, 246, 0.1);
    color: var(--info);
}

.policy-pattern-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.policy-pattern {
    background: rgba(100, 255, 218, 0.1);
    border: 1px solid rgba(100, 255, 218, 0.2);
    color: var(--accent-cyan);
    padding: 0.375rem 0.75rem;
    border-radius: 8px;
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 0.875rem;
}

.policy-scope {
    font-size: 0.875rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.policy-scope::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--text-secondary);
    border-radius: 50%;
    opacity: 0.5;
}

.policy-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.meta-item {
    font-size: 0.875rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.meta-item i {
    color: var(--accent-cyan);
    opacity: 0.6;
}

.meta-item strong {
    color: var(--text-primary);
    font-weight: 600;
}

.policy-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

/* Hit Rate Circle */
.policy-hit-rate {
    position: relative;
}

.hit-rate-circle {
    position: relative;
    width: 64px;
    height: 64px;
}

.hit-rate-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.hit-rate-bg {
    fill: none;
    stroke: rgba(100, 255, 218, 0.1);
    stroke-width: 3;
}

.hit-rate-fill {
    fill: none;
    stroke: var(--accent-cyan);
    stroke-width: 3;
    stroke-linecap: round;
    animation: hitRateGrow 1.5s ease-out;
}

@keyframes hitRateGrow {
    from {
        stroke-dasharray: 0, 100;
    }
}

.hit-rate-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--accent-cyan);
}

.policy-footer {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.footer-stat {
    font-size: 0.875rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.footer-stat i {
    color: var(--accent-cyan);
    opacity: 0.6;
}

/* Cache Invalidation Rules */
.invalidation-rules {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.invalidation-rule {
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.invalidation-rule:hover {
    border-color: var(--accent-cyan);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.rule-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.purge-icon {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.2));
    color: var(--danger);
}

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

.rule-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.rule-description {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0 0 0.75rem 0;
}

.rule-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.meta-tag {
    background: rgba(100, 255, 218, 0.1);
    color: var(--accent-cyan);
    padding: 0.25rem 0.75rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 500;
}

.rule-status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}

.count-badge {
    background: rgba(100, 255, 218, 0.1);
    color: var(--text-secondary);
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Compliance Templates Styles */
.compliance-status-banner {
    background: linear-gradient(135deg,
        rgba(16, 185, 129, 0.15),
        rgba(5, 150, 105, 0.1)
    );
    border: 2px solid var(--success);
    border-radius: 20px;
    padding: 2rem;
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}

.compliance-status-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top right, rgba(16, 185, 129, 0.1), transparent);
    pointer-events: none;
}

.compliance-status-icon {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--success), rgba(5, 150, 105, 0.8));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: white;
    flex-shrink: 0;
    animation: complianceIconPulse 3s ease-in-out infinite;
}

@keyframes complianceIconPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
    }
}

.compliance-status-content {
    flex: 1;
    min-width: 0;
}

.compliance-status-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.compliance-status-text {
    font-size: 1rem;
    color: var(--text-secondary);
    margin: 0 0 1rem 0;
}

.compliance-status-progress {
    width: 100%;
    max-width: 500px;
}

.compliance-progress-bar {
    width: 100%;
    height: 32px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
}

.compliance-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--success), rgba(16, 185, 129, 0.7));
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 1rem;
    position: relative;
    animation: complianceProgressGrow 1.5s ease-out;
}

@keyframes complianceProgressGrow {
    from {
        width: 0 !important;
    }
}

.compliance-progress-text {
    font-size: 0.875rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.compliance-status-score {
    flex-shrink: 0;
}

.score-circle {
    position: relative;
    width: 120px;
    height: 120px;
}

.score-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.score-bg {
    fill: none;
    stroke: rgba(100, 255, 218, 0.1);
    stroke-width: 8;
}

.score-fill {
    fill: none;
    stroke: var(--success);
    stroke-width: 8;
    stroke-linecap: round;
    animation: scoreCircleGrow 2s ease-out;
}

@keyframes scoreCircleGrow {
    from {
        stroke-dasharray: 0, 282.74;
    }
}

.score-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.score-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--success);
    line-height: 1;
}

.score-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

/* Compliance Frameworks */
/* Compact Compliance Stats Bar */
.compliance-stats-compact {
    display: flex;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.25rem 2rem;
    margin-bottom: 1.5rem;
    gap: 2rem;
}

.compliance-stat-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.compliance-stat-item.highlight {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(5, 150, 105, 0.1));
    border-radius: 12px;
    padding: 0.75rem 1rem;
}

.compliance-score-badge {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--success), rgba(5, 150, 105, 0.8));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}

.compliance-stat-item i {
    font-size: 1.5rem;
    color: var(--accent-cyan);
    opacity: 0.8;
}

.compliance-stat-data {
    flex: 1;
}

.compliance-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 0.25rem;
}

.compliance-stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.compliance-stat-meta {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.compliance-stat-divider {
    width: 1px;
    height: 40px;
    background: var(--border);
}

.compliance-frameworks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.framework-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.framework-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--success), rgba(16, 185, 129, 0.5));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.framework-card.status-excellent::before {
    opacity: 1;
    background: linear-gradient(180deg, var(--success), rgba(16, 185, 129, 0.5));
}

.framework-card.status-good::before {
    opacity: 1;
    background: linear-gradient(180deg, var(--warning), rgba(234, 179, 8, 0.5));
}

.framework-card:hover {
    border-color: var(--accent-cyan);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.framework-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.framework-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--accent-cyan), var(--primary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    color: white;
    flex-shrink: 0;
}

.framework-info {
    flex: 1;
    min-width: 0;
}

.framework-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.125rem 0;
}

.framework-subtitle {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin: 0;
}

.framework-status {
    flex-shrink: 0;
}

.status-badge {
    padding: 0.5rem 1rem;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.status-badge.excellent {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.status-badge.good {
    background: rgba(234, 179, 8, 0.15);
    color: var(--warning);
    border: 1px solid rgba(234, 179, 8, 0.3);
}

.status-badge.active {
    background: rgba(100, 255, 218, 0.15);
    color: var(--accent-cyan);
    border: 1px solid rgba(100, 255, 218, 0.3);
}

.framework-progress {
    margin-bottom: 0.75rem;
}

.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.375rem;
}

.progress-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.progress-value {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
}

.progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(100, 255, 218, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 1s ease-out;
    animation: progressBarGrow 1.5s ease-out;
}

@keyframes progressBarGrow {
    from {
        width: 0 !important;
    }
}

.framework-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.category-chip {
    padding: 0.375rem 0.75rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    transition: all 0.3s ease;
}

.category-chip.excellent {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.category-chip.warning {
    background: rgba(234, 179, 8, 0.1);
    color: var(--warning);
    border: 1px solid rgba(234, 179, 8, 0.2);
}

.category-chip:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.framework-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

.footer-item {
    font-size: 0.75rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.footer-item i {
    color: var(--accent-cyan);
    opacity: 0.6;
}

.btn-link {
    background: transparent;
    border: none;
    color: var(--accent-cyan);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    transition: all 0.3s ease;
}

.btn-link:hover {
    color: var(--primary);
    gap: 0.75rem;
}

/* Audit Timeline */
.audit-timeline {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
}

.audit-timeline::before {
    content: '';
    position: absolute;
    left: 52px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--accent-cyan), transparent);
}

.audit-event {
    display: flex;
    gap: 1.5rem;
    padding: 1rem;
    border-radius: 12px;
    transition: all 0.3s ease;
    position: relative;
}

.audit-event:hover {
    background: rgba(100, 255, 218, 0.05);
}

.event-indicator {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 0.25rem;
    position: relative;
    z-index: 1;
}

.event-indicator.success {
    background: var(--success);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2);
}

.event-indicator.warning {
    background: var(--warning);
    box-shadow: 0 0 0 4px rgba(234, 179, 8, 0.2);
}

.event-indicator.info {
    background: var(--info);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
}

.event-time {
    width: 120px;
    font-size: 0.875rem;
    color: var(--text-secondary);
    flex-shrink: 0;
}

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

.event-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.event-description {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0 0 0.75rem 0;
}

.event-badge {
    display: inline-block;
    background: rgba(100, 255, 218, 0.1);
    color: var(--accent-cyan);
    padding: 0.25rem 0.75rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .compliance-status-banner {
        flex-direction: column;
        text-align: center;
    }

    .compliance-frameworks {
        grid-template-columns: 1fr;
    }

    .policy-categories {
        grid-template-columns: 1fr;
    }

    .policy-main {
        flex-direction: column;
    }

    .policy-actions {
        align-self: flex-start;
    }

    .audit-timeline::before {
        left: 8px;
    }

    .event-time {
        width: auto;
    }
}
        .step-inactive {
            background: #374151;
        }

/* ========== PHASE F: CUSTOM RULE BUILDER & SECURITY POLICIES STYLES ========== */

/* Rule Builder Workspace */
.rule-builder-workspace {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 2rem;
    margin-bottom: 2rem;
}

.workspace-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid var(--border);
}

.workspace-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
}

.workspace-title i {
    color: var(--accent-cyan);
}

.workspace-actions {
    display: flex;
    gap: 1rem;
}

/* Rule Builder Canvas */
.rule-builder-canvas {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2.5rem;
    background: linear-gradient(135deg, rgba(100, 255, 218, 0.02), rgba(102, 126, 234, 0.02));
    border-radius: 16px;
    border: 2px dashed rgba(100, 255, 218, 0.2);
    margin-bottom: 2rem;
}

/* Rule Blocks */
.rule-block {
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    animation: blockFadeIn 0.5s ease-out;
}

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

.rule-block:hover {
    border-color: var(--accent-cyan);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.condition-block {
    border-left: 4px solid var(--warning);
}

.action-block {
    border-left: 4px solid var(--accent-cyan);
}

.result-block {
    border-left: 4px solid var(--success);
}

.block-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(100, 255, 218, 0.05), transparent);
    border-bottom: 1px solid var(--border);
}

.block-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--accent-cyan), var(--primary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: white;
    flex-shrink: 0;
}

.condition-block .block-icon {
    background: linear-gradient(135deg, var(--warning), rgba(234, 179, 8, 0.7));
}

.result-block .block-icon {
    background: linear-gradient(135deg, var(--success), rgba(16, 185, 129, 0.7));
}

.block-info {
    flex: 1;
}

.block-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
}

.block-subtitle {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
}

.block-menu-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 0.5rem;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.block-menu-btn:hover {
    background: rgba(100, 255, 218, 0.1);
    color: var(--accent-cyan);
}

.block-content {
    padding: 1.5rem;
}

/* Condition Group */
.condition-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}

.condition-row {
    display: grid;
    grid-template-columns: 2fr 1fr 2fr auto;
    gap: 1rem;
    align-items: center;
}

.condition-select,
.operator-select,
.value-input {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    color: var(--text-primary);
    font-size: 0.875rem;
    transition: all 0.3s ease;
}

.condition-select:focus,
.operator-select:focus,
.value-input:focus {
    outline: none;
    border-color: var(--accent-cyan);
    box-shadow: 0 0 0 3px rgba(100, 255, 218, 0.1);
}

.value-input {
    font-family: 'Monaco', 'Menlo', monospace;
    color: var(--accent-cyan);
}

.btn-icon-danger {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--danger);
    padding: 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-icon-danger:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: var(--danger);
}

.add-condition-btn,
.add-action-btn {
    background: rgba(100, 255, 218, 0.1);
    border: 2px dashed rgba(100, 255, 218, 0.3);
    color: var(--accent-cyan);
    padding: 0.875rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
}

.add-condition-btn:hover,
.add-action-btn:hover {
    background: rgba(100, 255, 218, 0.15);
    border-color: var(--accent-cyan);
    transform: translateY(-2px);
}

/* Rule Connector */
.rule-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    margin: -0.75rem 0;
    position: relative;
}

.connector-line {
    width: 2px;
    height: 40px;
    background: linear-gradient(180deg, var(--accent-cyan), transparent);
    animation: lineGrow 0.5s ease-out;
}

@keyframes lineGrow {
    from {
        height: 0;
    }
}

.connector-arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-cyan), var(--primary));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
    animation: arrowBounce 2s ease-in-out infinite;
}

@keyframes arrowBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(8px);
    }
}

/* Action List */
.action-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}

.action-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.action-item:hover {
    border-color: var(--accent-cyan);
    background: rgba(100, 255, 218, 0.05);
}

.action-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: white;
    flex-shrink: 0;
}

.action-icon.cache {
    background: linear-gradient(135deg, var(--accent-cyan), var(--primary));
}

.action-icon.transform {
    background: linear-gradient(135deg, var(--warning), rgba(234, 179, 8, 0.7));
}

.action-icon.modify {
    background: linear-gradient(135deg, var(--purple), rgba(147, 51, 234, 0.7));
}

.action-details {
    flex: 1;
}

.action-name {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.action-config {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.config-item {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.config-item strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* Result Preview */
.result-preview {
    padding: 1.5rem;
    background: rgba(16, 185, 129, 0.05);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 12px;
}

.preview-label {
    font-weight: 600;
    color: var(--success);
    margin-bottom: 0.75rem;
}

.preview-text {
    color: var(--text-primary);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.preview-text code {
    background: rgba(100, 255, 218, 0.1);
    color: var(--accent-cyan);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 0.875rem;
}

.preview-stats {
    display: flex;
    gap: 2rem;
}

.preview-stat {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.preview-stat i {
    color: var(--success);
}

.preview-stat strong {
    color: var(--success);
    font-weight: 600;
}

/* Workspace Footer */
.workspace-footer {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

/* Custom Rules List */
.custom-rules-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.custom-rule-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.custom-rule-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}

.custom-rule-card.active-rule {
    border-left: 4px solid var(--accent-cyan);
}

.rule-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(100, 255, 218, 0.03), transparent);
}

.rule-status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.rule-status-indicator.active {
    background: var(--success);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
    animation: statusPulse 2s ease-in-out infinite;
}

@keyframes statusPulse {
    0%, 100% {
        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.1);
    }
}

.rule-card-info {
    flex: 1;
    min-width: 0;
}

.rule-card-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.rule-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.meta-tag {
    background: rgba(100, 255, 218, 0.1);
    color: var(--accent-cyan);
    padding: 0.25rem 0.75rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.rule-card-stats {
    display: flex;
    gap: 2rem;
}

.card-stat {
    text-align: center;
}

.card-stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.card-stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.rule-card-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.rule-card-body {
    padding: 1.5rem;
    border-top: 1px solid var(--border);
}

.rule-logic-display {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.25rem;
    background: var(--bg-primary);
    border-radius: 12px;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.logic-segment {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.logic-label {
    font-weight: 700;
    color: var(--accent-cyan);
    padding: 0.25rem 0.75rem;
    background: rgba(100, 255, 218, 0.15);
    border-radius: 6px;
    font-size: 0.75rem;
}

.logic-item {
    font-size: 0.875rem;
    color: var(--text-primary);
}

.logic-item code {
    background: rgba(100, 255, 218, 0.1);
    color: var(--accent-cyan);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-family: 'Monaco', 'Menlo', monospace;
}

.logic-operator {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.logic-arrow {
    color: var(--accent-cyan);
    font-size: 1.5rem;
    font-weight: 700;
}

.rule-card-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

.footer-info {
    font-size: 0.875rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.footer-info i {
    color: var(--accent-cyan);
    opacity: 0.6;
}

/* Rule Templates Grid */
.rule-templates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.template-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
}

.template-card:hover {
    border-color: var(--accent-cyan);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    transform: translateY(-4px);
}

.template-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--accent-cyan), var(--primary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: white;
    margin: 0 auto 1rem;
}

.template-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.75rem 0;
}

.template-description {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 1rem 0;
}

.template-tags {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.template-tag {
    background: rgba(100, 255, 218, 0.1);
    color: var(--accent-cyan);
    padding: 0.25rem 0.75rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 500;
}

.template-use-btn {
    width: 100%;
    background: linear-gradient(135deg, var(--accent-cyan), var(--primary));
    border: none;
    color: white;
    padding: 0.875rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.template-use-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(100, 255, 218, 0.3);
}

/* Security Policies Styles */

/* Security Status Dashboard */
.security-status-dashboard {
    margin-bottom: 2rem;
}

.security-health-indicator {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(5, 150, 105, 0.1));
    border: 2px solid var(--success);
    border-radius: 20px;
    padding: 2rem;
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
}

.security-health-indicator.healthy::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top right, rgba(16, 185, 129, 0.1), transparent);
    pointer-events: none;
}

.health-pulse-effect {
    position: absolute;
    top: 50%;
    left: 80px;
    transform: translate(-50%, -50%);
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.2), transparent);
    animation: healthPulse 3s ease-in-out infinite;
}

@keyframes healthPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0.5;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.8;
    }
}

.health-shield {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--success), rgba(5, 150, 105, 0.8));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: white;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    animation: shieldPulse 3s ease-in-out infinite;
}

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

.health-info {
    flex: 1;
}

.health-status-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.health-status-text {
    font-size: 1rem;
    color: var(--text-secondary);
    margin: 0;
}

.health-timestamp {
    font-size: 0.875rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.health-timestamp i {
    color: var(--success);
}

/* Security Metrics Grid */
.security-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}

.security-metric {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s ease;
}

.security-metric:hover {
    border-color: var(--accent-cyan);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.metric-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    flex-shrink: 0;
}

.metric-icon.blocked {
    background: linear-gradient(135deg, var(--danger), rgba(220, 38, 38, 0.7));
}

.metric-icon.safe {
    background: linear-gradient(135deg, var(--success), rgba(5, 150, 105, 0.7));
}

.metric-icon.warning {
    background: linear-gradient(135deg, var(--warning), rgba(202, 138, 4, 0.7));
}

.metric-icon.protected {
    background: linear-gradient(135deg, var(--accent-cyan), var(--primary));
}

.metric-content {
    flex: 1;
}

.metric-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.metric-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.metric-change {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.metric-change.positive {
    color: var(--success);
}

.metric-change i {
    font-size: 0.875rem;
}

/* Threat Feed */
.threat-feed {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.threat-event {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.threat-event:hover {
    border-color: var(--accent-cyan);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.threat-event.blocked {
    border-left: 4px solid var(--danger);
}

.threat-event.allowed {
    border-left: 4px solid var(--success);
}

.threat-indicator {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
    position: relative;
}

.threat-event.blocked .threat-indicator {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.2));
    color: var(--danger);
}

.threat-event.allowed .threat-indicator {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.2));
    color: var(--success);
}

.threat-pulse {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: inherit;
    animation: threatPulse 2s ease-in-out infinite;
}

@keyframes threatPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0;
        transform: scale(1.3);
    }
}

.threat-details {
    flex: 1;
    min-width: 0;
}

.threat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.threat-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.threat-time {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.threat-info {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.threat-tag {
    padding: 0.25rem 0.75rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.threat-tag.danger {
    background: rgba(239, 68, 68, 0.15);
    color: var(--danger);
}

.threat-tag.critical {
    background: rgba(220, 38, 38, 0.15);
    color: var(--danger);
    animation: criticalBlink 2s ease-in-out infinite;
}

@keyframes criticalBlink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

.threat-tag.warning {
    background: rgba(234, 179, 8, 0.15);
    color: var(--warning);
}

.threat-source,
.threat-target {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.threat-action {
    font-size: 0.875rem;
    color: var(--text-secondary);
    padding: 0.75rem;
    background: rgba(100, 255, 218, 0.05);
    border-left: 3px solid var(--accent-cyan);
    border-radius: 4px;
}

.threat-action strong {
    color: var(--accent-cyan);
    font-weight: 600;
}

/* Security Policies List */
.security-policies-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.security-policy-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.security-policy-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}

.security-policy-card.critical-policy {
    border-left: 4px solid var(--danger);
}

.security-policy-card.high-policy {
    border-left: 4px solid var(--warning);
}

.security-policy-card.medium-policy {
    border-left: 4px solid var(--info);
}

.policy-header-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.policy-severity {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: white;
    flex-shrink: 0;
}

.policy-severity.critical {
    background: linear-gradient(135deg, var(--danger), rgba(220, 38, 38, 0.7));
}

.policy-severity.high {
    background: linear-gradient(135deg, var(--warning), rgba(202, 138, 4, 0.7));
}

.policy-severity.medium {
    background: linear-gradient(135deg, var(--info), rgba(37, 99, 235, 0.7));
}

.policy-info-section {
    flex: 1;
    min-width: 0;
}

.policy-name {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.policy-description {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
}

.policy-stats-section {
    display: flex;
    gap: 2rem;
}

.policy-stat {
    text-align: center;
}

.policy-stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.policy-stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.policy-details-row {
    display: flex;
    gap: 2rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
}

.policy-rules {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.policy-rule-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.policy-rule-item i {
    color: var(--accent-cyan);
    width: 20px;
    text-align: center;
}

.policy-metrics {
    width: 280px;
}

.metric-bar {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.metric-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.metric-progress {
    width: 100%;
    height: 24px;
    background: rgba(100, 255, 218, 0.1);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

.metric-fill {
    height: 100%;
    border-radius: 12px;
    transition: width 1s ease-out;
    animation: metricGrow 1.5s ease-out;
}

@keyframes metricGrow {
    from {
        width: 0 !important;
    }
}

.metric-value {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-primary);
    text-align: right;
}

.policy-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.policy-footer-item {
    font-size: 0.875rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.policy-footer-item i {
    color: var(--accent-cyan);
    opacity: 0.6;
}

/* Security Recommendations */
.recommendations-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.recommendation-card {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.recommendation-card:hover {
    border-color: var(--accent-cyan);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.recommendation-card.low-priority {
    border-left: 4px solid var(--info);
}

.recommendation-card.medium-priority {
    border-left: 4px solid var(--warning);
}

.recommendation-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.recommendation-card.low-priority .recommendation-icon {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(37, 99, 235, 0.2));
    color: var(--info);
}

.recommendation-card.medium-priority .recommendation-icon {
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.2), rgba(202, 138, 4, 0.2));
    color: var(--warning);
}

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

.recommendation-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.recommendation-description {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .condition-row {
        grid-template-columns: 1fr;
    }

    .rule-logic-display {
        flex-direction: column;
        align-items: flex-start;
    }

    .logic-arrow {
        transform: rotate(90deg);
    }

    .policy-header-row {
        flex-wrap: wrap;
    }

    .policy-details-row {
        flex-direction: column;
    }

    .policy-metrics {
        width: 100%;
    }

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

    .rule-card-stats {
        flex-direction: column;
        gap: 1rem;
    }
}
        @keyframes pulse {
            0%, 100% { box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2); }
            50% { box-shadow: 0 0 0 8px rgba(99, 102, 241, 0.1); }
        }

/* ========== PHASE G: API KEYS & AUDIT LOGS STYLES ========== */

/* API Keys Compact Stats */
.api-stats-compact {
    display: flex;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.25rem 2rem;
    margin-bottom: 1.5rem;
    gap: 2rem;
}

.api-stat-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.api-stat-item i {
    font-size: 1.5rem;
    color: var(--accent-cyan);
    opacity: 0.8;
}

.api-stat-data {
    flex: 1;
}

.api-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 0.25rem;
}

.api-stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.api-stat-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    white-space: nowrap;
}

.api-stat-badge.warning {
    background: rgba(234, 179, 8, 0.1);
    color: var(--warning);
}

.api-stat-badge.success {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.api-stat-divider {
    width: 1px;
    height: 40px;
    background: var(--border);
}

/* API Keys List */
.api-keys-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.api-key-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.api-key-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}

.api-key-card.expiring {
    border-color: var(--warning);
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.03), transparent);
}

.api-key-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(100, 255, 218, 0.03), transparent);
    border-bottom: 1px solid var(--border);
}

.key-status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.key-status-indicator.active {
    background: var(--success);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
    animation: statusPulse 2s ease-in-out infinite;
}

.key-status-indicator.expiring {
    background: var(--warning);
    box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.2);
    animation: warningPulse 1.5s ease-in-out infinite;
}

@keyframes warningPulse {
    0%, 100% {
        box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.2);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(234, 179, 8, 0.1);
    }
}

.key-info {
    flex: 1;
    min-width: 0;
}

.key-name {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.key-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.key-meta-item {
    font-size: 0.875rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.key-meta-item i {
    color: var(--accent-cyan);
    opacity: 0.6;
}

.expiring-badge {
    background: rgba(234, 179, 8, 0.15);
    color: var(--warning);
    padding: 0.25rem 0.75rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    animation: warningBlink 2s ease-in-out infinite;
}

@keyframes warningBlink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

.key-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.api-key-body {
    padding: 1.5rem;
}

.key-value-section {
    margin-bottom: 1.5rem;
}

.key-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.key-value-display {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.75rem 1rem;
}

.key-value {
    flex: 1;
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 0.875rem;
    color: var(--accent-cyan);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.btn-copy {
    background: rgba(100, 255, 218, 0.1);
    border: 1px solid rgba(100, 255, 218, 0.3);
    color: var(--accent-cyan);
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-copy:hover {
    background: rgba(100, 255, 218, 0.15);
    transform: translateY(-1px);
}

.key-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 1rem;
    background: rgba(100, 255, 218, 0.03);
    border-radius: 8px;
}

.key-detail {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.detail-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.warning-text {
    color: var(--warning);
}

.danger-text {
    color: var(--danger);
}

.permission-badge {
    display: inline-block;
    background: rgba(100, 255, 218, 0.1);
    color: var(--accent-cyan);
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    margin-right: 0.5rem;
}

.key-usage-bar {
    margin-top: 1rem;
}

.usage-bar-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.usage-bar-label span:first-child {
    color: var(--text-secondary);
}

.usage-bar-label span:last-child {
    font-weight: 700;
    color: var(--text-primary);
}

.usage-progress {
    width: 100%;
    height: 8px;
    background: rgba(100, 255, 218, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.usage-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-cyan), rgba(100, 255, 218, 0.7));
    border-radius: 4px;
    transition: width 1s ease-out;
    animation: usageGrow 1.5s ease-out;
}

.usage-fill.warning {
    background: linear-gradient(90deg, var(--warning), rgba(234, 179, 8, 0.7));
}

@keyframes usageGrow {
    from {
        width: 0 !important;
    }
}

/* Test Keys Grid */
.test-keys-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.test-key-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem;
    transition: all 0.3s ease;
}

.test-key-card:hover {
    border-color: var(--accent-cyan);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.test-key-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.test-key-header i {
    font-size: 1.25rem;
    color: var(--accent-cyan);
}

.test-key-header h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.test-key-value {
    display: block;
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 0.8rem;
    color: var(--accent-cyan);
    background: var(--bg-primary);
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    margin-bottom: 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.test-key-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.btn-icon-small {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 0.375rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-icon-small:hover {
    background: rgba(100, 255, 218, 0.1);
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
}

/* Info Banner */
.info-banner {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(37, 99, 235, 0.05));
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.info-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--info), rgba(37, 99, 235, 0.8));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    flex-shrink: 0;
}

.info-content {
    flex: 1;
}

.info-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.75rem 0;
}

.info-list {
    margin: 0;
    padding-left: 1.5rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.8;
}

.info-list li {
    margin-bottom: 0.5rem;
}

/* Audit Logs Styles */

/* Audit Stats Compact */
.audit-stats-compact {
    display: flex;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.25rem 2rem;
    margin-bottom: 1.5rem;
    gap: 2rem;
}

.audit-stat-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.audit-stat-item i {
    font-size: 1.5rem;
    color: var(--accent-cyan);
    opacity: 0.8;
}

.audit-stat-data {
    flex: 1;
}

.audit-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 0.25rem;
}

.audit-stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.audit-stat-meta {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.audit-stat-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    white-space: nowrap;
}

.audit-stat-badge.warning {
    background: rgba(234, 179, 8, 0.1);
    color: var(--warning);
}

.audit-stat-divider {
    width: 1px;
    height: 40px;
    background: var(--border);
}

/* Audit Filters */
.audit-filters {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1.25rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    min-width: 160px;
}

.filter-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-select {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.625rem 1rem;
    color: var(--text-primary);
    font-size: 0.875rem;
    transition: all 0.3s ease;
}

.filter-select:focus {
    outline: none;
    border-color: var(--accent-cyan);
    box-shadow: 0 0 0 3px rgba(100, 255, 218, 0.1);
}

/* Audit Timeline */
.timeline-date {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.audit-timeline {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: relative;
}

.audit-timeline::before {
    content: '';
    position: absolute;
    left: 90px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--accent-cyan), transparent);
}

.audit-event {
    display: flex;
    gap: 1.5rem;
    padding: 1rem;
    border-radius: 12px;
    transition: all 0.3s ease;
    position: relative;
}

.audit-event:hover {
    background: rgba(100, 255, 218, 0.05);
}

.event-time {
    width: 80px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    font-family: 'Monaco', 'Menlo', monospace;
    flex-shrink: 0;
}

.event-indicator {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.event-indicator.info {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(37, 99, 235, 0.2));
    color: var(--info);
}

.event-indicator.success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.2));
    color: var(--success);
}

.event-indicator.warning {
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.2), rgba(202, 138, 4, 0.2));
    color: var(--warning);
}

.event-indicator.danger {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.2));
    color: var(--danger);
}

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

.event-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.event-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.event-category {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 8px;
    background: rgba(100, 255, 218, 0.1);
    color: var(--accent-cyan);
}

.event-description {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0 0 0.75rem 0;
}

.event-description strong {
    color: var(--text-primary);
    font-weight: 600;
}

.event-details {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.event-detail-item {
    font-size: 0.8rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.event-detail-item i {
    color: var(--accent-cyan);
    opacity: 0.6;
}

/* Timeline Load More */
.timeline-load-more {
    display: flex;
    justify-content: center;
    padding-top: 1.5rem;
    margin-top: 1.5rem;
    border-top: 1px solid var(--border);
}

/* Security Events Grid */
.security-events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.security-event-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.25rem;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.security-event-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
}

.security-event-card.low::before {
    background: var(--info);
}

.security-event-card.warning::before {
    background: var(--warning);
}

.security-event-card.info::before {
    background: var(--accent-cyan);
}

.security-event-card.success::before {
    background: var(--success);
}

.security-event-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.security-event-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.security-event-header i {
    font-size: 1.5rem;
    color: var(--accent-cyan);
}

.security-event-count {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
}

.security-event-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.security-event-period {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .api-stats-compact,
    .audit-stats-compact {
        flex-direction: column;
        gap: 1rem;
    }

    .api-stat-divider,
    .audit-stat-divider {
        width: 100%;
        height: 1px;
    }

    .audit-timeline::before {
        left: 20px;
    }

    .event-time {
        width: auto;
        font-size: 0.75rem;
    }

    .key-details-grid {
        grid-template-columns: 1fr;
    }

    .audit-filters {
        flex-direction: column;
    }
}
        .fade-in {
            animation: fadeIn 0.5s ease-in;
        }

        /* ========== PHASE H: ALERT RULES & NOTIFICATION SETTINGS ========== */

        /* Alert Rules View */
        .alert-stats-compact {
            display: flex;
            align-items: center;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 1.25rem 2rem;
            margin-bottom: 1.5rem;
            gap: 2rem;
            flex-wrap: wrap;
        }

        /* ========== PHASE I: PERFORMANCE REPORTS & SLACK INTEGRATION ========== */

        /* Performance Reports View */
        .performance-stats-compact {
            display: flex;
            align-items: center;
            background: linear-gradient(135deg, var(--bg-card) 0%, rgba(6, 182, 212, 0.03) 100%);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 1.5rem 2rem;
            margin-bottom: 2rem;
            gap: 2rem;
            flex-wrap: wrap;
            position: relative;
            overflow: hidden;
        }

        /* ========== PHASE J: GITHUB INTEGRATION & WEBHOOKS ========== */

        /* GitHub Integration View */
        .github-status-compact {
            display: flex;
            align-items: center;
            background: linear-gradient(135deg, var(--bg-card) 0%, rgba(36, 41, 47, 0.5) 100%);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 1.5rem 2rem;
            margin-bottom: 2rem;
            gap: 2rem;
            flex-wrap: wrap;
            position: relative;
            overflow: hidden;
        }

        /* ========== PHASE K: TEAM MEMBERS & ROLES & PERMISSIONS ========== */

        /* Team Members View */
        .team-stats-compact {
            display: flex;
            align-items: center;
            background: linear-gradient(135deg, var(--bg-card) 0%, rgba(124, 58, 237, 0.03) 100%);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 1.5rem 2rem;
            margin-bottom: 2rem;
            gap: 2rem;
            flex-wrap: wrap;
            position: relative;
            overflow: hidden;
        }

        /* ========== PHASE L: ORGANIZATION SETTINGS & DOCUMENTATION ========== */

        /* Organization Settings View */
        .org-stats-compact {
            display: flex;
            align-items: center;
            background: linear-gradient(135deg, var(--bg-card) 0%, rgba(99, 102, 241, 0.03) 100%);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 1.5rem 2rem;
            margin-bottom: 2rem;
            gap: 2rem;
            flex-wrap: wrap;
            position: relative;
            overflow: hidden;
        }

        /* ========== PHASE M: HELP CENTER & CONTACT SUPPORT ========== */

        /* Help Center View */
        .help-stats-compact {
            display: flex;
            align-items: center;
            background: linear-gradient(135deg, var(--bg-card) 0%, rgba(236, 72, 153, 0.03) 100%);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 1.5rem 2rem;
            margin-bottom: 2rem;
            gap: 2rem;
            flex-wrap: wrap;
            position: relative;
            overflow: hidden;
        }

        .help-stats-compact::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, #ec4899, #8b5cf6, #ec4899);
            background-size: 200% 100%;
            animation: shimmer 3s ease infinite;
        }

        .help-stat-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            flex: 1;
            min-width: 180px;
        }

        .help-stat-item.highlight {
            background: rgba(236, 72, 153, 0.08);
            padding: 1rem 1.5rem;
            border-radius: 12px;
            border: 1px solid rgba(236, 72, 153, 0.2);
        }

        .help-stat-item i {
            font-size: 1.75rem;
            color: #ec4899;
            opacity: 0.9;
        }

        .help-stat-data {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }

        .help-stat-value {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--text-primary);
            line-height: 1;
        }

        .help-stat-label {
            font-size: 0.875rem;
            color: var(--text-secondary);
            font-weight: 500;
        }

        .help-stat-badge {
            margin-left: auto;
            padding: 0.5rem;
            border-radius: 50%;
            font-size: 1.25rem;
        }

        .help-stat-badge.success {
            background: rgba(34, 197, 94, 0.15);
            color: #22c55e;
        }

        .help-stat-divider {
            width: 1px;
            height: 50px;
            background: var(--border);
        }

        /* Help Topics Grid - 3x2 */
        .help-topics-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
            margin-bottom: 3rem;
        }

        .help-topic-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 1.75rem;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            flex-direction: column;
        }

        .help-topic-card:hover {
            border-color: #ec4899;
            box-shadow: 0 8px 24px rgba(236, 72, 153, 0.2);
            transform: translateY(-6px);
        }

        .topic-icon {
            width: 64px;
            height: 64px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.75rem;
            color: white;
            margin-bottom: 1.25rem;
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .help-topic-card:hover .topic-icon {
            transform: scale(1.1) rotate(-5deg);
        }

        .topic-icon.setup {
            background: linear-gradient(135deg, #ec4899, #f472b6);
        }

        .topic-icon.billing {
            background: linear-gradient(135deg, #f59e0b, #fbbf24);
        }

        .topic-icon.security {
            background: linear-gradient(135deg, #22c55e, #4ade80);
        }

        .topic-icon.performance {
            background: linear-gradient(135deg, #06b6d4, #22d3ee);
        }

        .topic-icon.troubleshooting {
            background: linear-gradient(135deg, #ef4444, #f87171);
        }

        .topic-icon.api {
            background: linear-gradient(135deg, #8b5cf6, #a78bfa);
        }

        .topic-title {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--text-primary);
            margin: 0 0 0.75rem 0;
        }

        .topic-description {
            font-size: 0.9375rem;
            color: var(--text-secondary);
            line-height: 1.6;
            margin-bottom: 1rem;
        }

        .topic-stats {
            display: flex;
            gap: 1rem;
            margin-bottom: 1.25rem;
        }

        .topic-stat {
            font-size: 0.8125rem;
            color: var(--text-secondary);
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 0.375rem;
        }

        .topic-stat i {
            color: #ec4899;
        }

        .topic-articles {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            margin-bottom: 1.25rem;
            padding: 1rem;
            background: var(--bg-secondary);
            border-radius: 10px;
        }

        .topic-article-link {
            font-size: 0.875rem;
            color: var(--text-primary);
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            transition: all 0.3s ease;
        }

        .topic-article-link:hover {
            color: #ec4899;
            transform: translateX(4px);
        }

        .topic-article-link i {
            font-size: 0.75rem;
            color: #ec4899;
        }

        .topic-btn {
            width: 100%;
            padding: 0.875rem 1rem;
            background: linear-gradient(135deg, #ec4899, #f472b6);
            border: none;
            border-radius: 12px;
            font-size: 0.9375rem;
            font-weight: 700;
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.625rem;
        }

        .topic-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(236, 72, 153, 0.4);
        }

        /* FAQs Grid - 2x2 */
        .faqs-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.5rem;
            margin-bottom: 3rem;
        }

        .faq-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 1.75rem;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            flex-direction: column;
        }

        .faq-card:hover {
            border-color: #ec4899;
            box-shadow: 0 8px 24px rgba(236, 72, 153, 0.15);
            transform: translateY(-4px);
        }

        .faq-icon {
            width: 56px;
            height: 56px;
            background: linear-gradient(135deg, #ec4899, #f472b6);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: white;
            margin-bottom: 1.25rem;
            transition: transform 0.3s ease;
        }

        .faq-card:hover .faq-icon {
            transform: scale(1.1) rotate(-5deg);
        }

        .faq-question {
            font-size: 1.125rem;
            font-weight: 700;
            color: var(--text-primary);
            margin: 0 0 0.75rem 0;
        }

        .faq-answer {
            font-size: 0.9375rem;
            color: var(--text-secondary);
            line-height: 1.6;
            margin-bottom: 1.25rem;
            flex: 1;
        }

        .faq-btn {
            width: 100%;
            padding: 0.875rem 1rem;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 12px;
            font-size: 0.9375rem;
            font-weight: 700;
            color: var(--text-primary);
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.625rem;
        }

        .faq-btn:hover {
            background: var(--bg-card);
            border-color: #ec4899;
            color: #ec4899;
        }

        /* Help Contact Options */
        .help-contact-options {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 1.75rem;
        }

        .contact-option-header {
            margin-bottom: 1.5rem;
        }

        .contact-options-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
        }

        .contact-option-card {
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 1.5rem;
            text-align: center;
            transition: all 0.3s ease;
        }

        .contact-option-card:hover {
            border-color: #ec4899;
            transform: translateY(-2px);
        }

        .contact-option-icon {
            width: 64px;
            height: 64px;
            margin: 0 auto 1rem;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.75rem;
            color: white;
        }

        .contact-option-icon.live-chat {
            background: linear-gradient(135deg, #ec4899, #f472b6);
        }

        .contact-option-icon.email {
            background: linear-gradient(135deg, #06b6d4, #22d3ee);
        }

        .contact-option-icon.phone {
            background: linear-gradient(135deg, #22c55e, #4ade80);
        }

        .contact-option-title {
            font-size: 1.125rem;
            font-weight: 700;
            color: var(--text-primary);
            margin: 0 0 0.5rem 0;
        }

        .contact-option-description {
            font-size: 0.875rem;
            color: var(--text-secondary);
            margin-bottom: 1rem;
        }

        .contact-option-btn {
            width: 100%;
            padding: 0.75rem 1rem;
            background: linear-gradient(135deg, #ec4899, #f472b6);
            border: none;
            border-radius: 10px;
            font-size: 0.875rem;
            font-weight: 700;
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }

        .contact-option-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(236, 72, 153, 0.4);
        }

        /* Contact Support View */
        .support-stats-compact {
            display: flex;
            align-items: center;
            background: linear-gradient(135deg, var(--bg-card) 0%, rgba(59, 130, 246, 0.03) 100%);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 1.5rem 2rem;
            margin-bottom: 2rem;
            gap: 2rem;
            flex-wrap: wrap;
            position: relative;
            overflow: hidden;
        }

        .support-stats-compact::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, #3b82f6, #06b6d4, #3b82f6);
            background-size: 200% 100%;
            animation: shimmer 3s ease infinite;
        }

        .support-stat-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            flex: 1;
            min-width: 180px;
        }

        .support-stat-item.highlight {
            background: rgba(59, 130, 246, 0.08);
            padding: 1rem 1.5rem;
            border-radius: 12px;
            border: 1px solid rgba(59, 130, 246, 0.2);
        }

        .support-stat-item i {
            font-size: 1.75rem;
            color: #3b82f6;
            opacity: 0.9;
        }

        .support-stat-data {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }

        .support-stat-value {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--text-primary);
            line-height: 1;
        }

        .support-stat-label {
            font-size: 0.875rem;
            color: var(--text-secondary);
            font-weight: 500;
        }

        .support-stat-badge {
            margin-left: auto;
            padding: 0.5rem;
            border-radius: 50%;
            font-size: 1.25rem;
        }

        .support-stat-badge.success {
            background: rgba(34, 197, 94, 0.15);
            color: #22c55e;
        }

        .support-stat-divider {
            width: 1px;
            height: 50px;
            background: var(--border);
        }

        /* Contact Methods Grid - 2x2 */
        .contact-methods-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.5rem;
            margin-bottom: 3rem;
        }

        .contact-method-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 1.75rem;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            flex-direction: column;
            position: relative;
        }

        .contact-method-card:hover {
            border-color: #3b82f6;
            box-shadow: 0 8px 24px rgba(59, 130, 246, 0.2);
            transform: translateY(-4px);
        }

        .contact-method-card.priority {
            border-color: rgba(236, 72, 153, 0.3);
        }

        .priority-badge {
            position: absolute;
            top: 1rem;
            right: 1rem;
            padding: 0.5rem 1rem;
            background: linear-gradient(135deg, #ec4899, #f472b6);
            color: white;
            border-radius: 10px;
            font-size: 0.75rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .method-icon {
            width: 64px;
            height: 64px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.75rem;
            color: white;
            margin-bottom: 1.25rem;
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .contact-method-card:hover .method-icon {
            transform: scale(1.1) rotate(-5deg);
        }

        .method-icon.live-chat {
            background: linear-gradient(135deg, #ec4899, #f472b6);
        }

        .method-icon.email {
            background: linear-gradient(135deg, #06b6d4, #22d3ee);
        }

        .method-icon.phone {
            background: linear-gradient(135deg, #22c55e, #4ade80);
        }

        .method-icon.ticket {
            background: linear-gradient(135deg, #f59e0b, #fbbf24);
        }

        .method-title {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--text-primary);
            margin: 0 0 0.75rem 0;
        }

        .method-description {
            font-size: 0.9375rem;
            color: var(--text-secondary);
            line-height: 1.6;
            margin-bottom: 1.25rem;
        }

        .method-details {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            padding: 1rem;
            background: var(--bg-secondary);
            border-radius: 10px;
            margin-bottom: 1.25rem;
        }

        .method-detail {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            font-size: 0.875rem;
            color: var(--text-secondary);
        }

        .method-detail i {
            color: #3b82f6;
            width: 16px;
        }

        .method-btn {
            width: 100%;
            padding: 0.875rem 1rem;
            background: linear-gradient(135deg, #3b82f6, #06b6d4);
            border: none;
            border-radius: 12px;
            font-size: 0.9375rem;
            font-weight: 700;
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.625rem;
            margin-top: auto;
        }

        .method-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
        }

        .method-btn.primary {
            background: linear-gradient(135deg, #ec4899, #f472b6);
        }

        .method-btn.primary:hover {
            box-shadow: 0 4px 12px rgba(236, 72, 153, 0.4);
        }

        /* Support Form */
        .support-form-section {
            margin-bottom: 3rem;
        }

        .support-form-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 2rem;
        }

        .support-form {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .form-row {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.5rem;
        }

        .form-textarea {
            padding: 0.75rem 1rem;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 10px;
            color: var(--text-primary);
            font-size: 0.9375rem;
            font-family: inherit;
            resize: vertical;
            transition: all 0.3s ease;
        }

        .form-textarea:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

        .file-upload-area {
            padding: 2rem;
            background: var(--bg-secondary);
            border: 2px dashed var(--border);
            border-radius: 10px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .file-upload-area:hover {
            border-color: #3b82f6;
            background: var(--bg-card);
        }

        .file-upload-area i {
            font-size: 2.5rem;
            color: #3b82f6;
            margin-bottom: 1rem;
        }

        .file-upload-area p {
            font-size: 0.9375rem;
            color: var(--text-primary);
            margin: 0 0 0.5rem 0;
        }

        .file-upload-hint {
            font-size: 0.8125rem;
            color: var(--text-secondary);
        }

        .support-form-submit {
            padding: 1rem 2rem;
            background: linear-gradient(135deg, #3b82f6, #06b6d4);
            border: none;
            border-radius: 12px;
            font-size: 1rem;
            font-weight: 700;
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
        }

        .support-form-submit:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
        }

        /* Recent Tickets */
        .recent-tickets-section {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 1.75rem;
        }

        .recent-tickets-list {
            display: flex;
            flex-direction: column;
            gap: 1.25rem;
        }

        .ticket-item {
            display: flex;
            gap: 1.5rem;
            padding: 1.5rem;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 12px;
            transition: all 0.3s ease;
        }

        .ticket-item:hover {
            border-color: #3b82f6;
            box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
        }

        .ticket-status {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
            padding-right: 1.5rem;
            border-right: 1px solid var(--border);
        }

        .status-indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
        }

        .status-indicator.open {
            background: #3b82f6;
            box-shadow: 0 0 12px rgba(59, 130, 246, 0.5);
            animation: pulse 2s ease infinite;
        }

        .status-indicator.in-progress {
            background: #f59e0b;
            box-shadow: 0 0 12px rgba(245, 158, 11, 0.5);
        }

        .status-indicator.resolved {
            background: #22c55e;
        }

        .status-label {
            font-size: 0.75rem;
            font-weight: 700;
            color: var(--text-secondary);
            text-transform: uppercase;
        }

        .ticket-content {
            flex: 1;
        }

        .ticket-header-row {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 0.75rem;
            flex-wrap: wrap;
        }

        .ticket-id {
            font-size: 0.875rem;
            font-weight: 700;
            color: #3b82f6;
            font-family: monospace;
        }

        .ticket-subject {
            font-size: 1rem;
            font-weight: 700;
            color: var(--text-primary);
            flex: 1;
        }

        .ticket-time {
            font-size: 0.8125rem;
            color: var(--text-secondary);
        }

        .ticket-preview {
            font-size: 0.875rem;
            color: var(--text-secondary);
            margin: 0 0 1rem 0;
            line-height: 1.5;
        }

        .ticket-meta {
            display: flex;
            align-items: center;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .meta-tag {
            padding: 0.25rem 0.75rem;
            border-radius: 6px;
            font-size: 0.75rem;
            font-weight: 700;
        }

        .meta-tag.priority-high {
            background: rgba(239, 68, 68, 0.15);
            color: #ef4444;
            border: 1px solid rgba(239, 68, 68, 0.3);
        }

        .meta-tag.priority-medium {
            background: rgba(245, 158, 11, 0.15);
            color: #f59e0b;
            border: 1px solid rgba(245, 158, 11, 0.3);
        }

        .meta-tag.priority-low {
            background: rgba(34, 197, 94, 0.15);
            color: #22c55e;
            border: 1px solid rgba(34, 197, 94, 0.3);
        }

        .meta-tag:not([class*="priority"]) {
            background: var(--bg-card);
            color: var(--text-secondary);
            border: 1px solid var(--border);
        }

        .meta-info {
            font-size: 0.8125rem;
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .meta-info i {
            color: #3b82f6;
        }

        .ticket-btn {
            padding: 0.875rem 1.25rem;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 10px;
            font-size: 0.875rem;
            font-weight: 700;
            color: var(--text-primary);
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            white-space: nowrap;
        }

        .ticket-btn:hover {
            background: var(--bg-secondary);
            border-color: #3b82f6;
            color: #3b82f6;
        }

        .org-stats-compact::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, #6366f1, #8b5cf6, #6366f1);
            background-size: 200% 100%;
            animation: shimmer 3s ease infinite;
        }

        .org-stat-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            flex: 1;
            min-width: 200px;
        }

        .org-stat-item.highlight {
            background: rgba(99, 102, 241, 0.08);
            padding: 1rem 1.5rem;
            border-radius: 12px;
            border: 1px solid rgba(99, 102, 241, 0.2);
        }

        .org-icon {
            width: 48px;
            height: 48px;
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: white;
        }

        .org-stat-item i {
            font-size: 1.75rem;
            color: #6366f1;
            opacity: 0.9;
        }

        .org-stat-data {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }

        .org-stat-value {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--text-primary);
            line-height: 1;
        }

        .org-stat-label {
            font-size: 0.875rem;
            color: var(--text-secondary);
            font-weight: 500;
        }

        .org-stat-badge {
            margin-left: auto;
            padding: 0.5rem;
            border-radius: 50%;
            font-size: 1.25rem;
        }

        .org-stat-badge.premium {
            background: linear-gradient(135deg, #f59e0b, #fbbf24);
            color: white;
        }

        .org-stat-badge.success {
            background: rgba(34, 197, 94, 0.15);
            color: #22c55e;
        }

        .org-stat-divider {
            width: 1px;
            height: 50px;
            background: var(--border);
        }

        /* Organization Settings Grid - 2x2 */
        .org-settings-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.5rem;
            margin-bottom: 3rem;
        }

        .org-setting-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 1.75rem;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            flex-direction: column;
        }

        .org-setting-card:hover {
            border-color: #6366f1;
            box-shadow: 0 8px 24px rgba(99, 102, 241, 0.15);
            transform: translateY(-4px);
        }

        .setting-header {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

        .setting-icon {
            width: 56px;
            height: 56px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: white;
            flex-shrink: 0;
            transition: transform 0.3s ease;
        }

        .org-setting-card:hover .setting-icon {
            transform: scale(1.1) rotate(-5deg);
        }

        .setting-icon.profile {
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
        }

        .setting-icon.contact {
            background: linear-gradient(135deg, #06b6d4, #22d3ee);
        }

        .setting-icon.security {
            background: linear-gradient(135deg, #22c55e, #4ade80);
        }

        .setting-icon.preferences {
            background: linear-gradient(135deg, #f59e0b, #fbbf24);
        }

        .setting-title {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--text-primary);
            margin: 0;
        }

        .setting-form {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

        .form-group {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .form-label {
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--text-primary);
        }

        .form-input {
            padding: 0.75rem 1rem;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 10px;
            color: var(--text-primary);
            font-size: 0.9375rem;
            transition: all 0.3s ease;
        }

        .form-input:focus {
            outline: none;
            border-color: #6366f1;
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
        }

        .form-select {
            padding: 0.75rem 1rem;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 10px;
            color: var(--text-primary);
            font-size: 0.9375rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .form-select:hover {
            border-color: #6366f1;
        }

        .form-toggle {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem;
            background: var(--bg-secondary);
            border-radius: 10px;
        }

        .toggle-info {
            flex: 1;
        }

        .toggle-label {
            font-size: 0.9375rem;
            font-weight: 600;
            color: var(--text-primary);
            display: block;
            margin-bottom: 0.25rem;
        }

        .toggle-description {
            font-size: 0.8125rem;
            color: var(--text-secondary);
            margin: 0;
        }

        .form-toggle input[type="checkbox"] {
            width: 50px;
            height: 28px;
            appearance: none;
            background: var(--bg-card);
            border-radius: 14px;
            position: relative;
            cursor: pointer;
            transition: background 0.3s ease;
            border: 1px solid var(--border);
        }

        .form-toggle input[type="checkbox"]:checked {
            background: #6366f1;
            border-color: #6366f1;
        }

        .form-toggle input[type="checkbox"]::before {
            content: '';
            position: absolute;
            width: 22px;
            height: 22px;
            background: white;
            border-radius: 50%;
            top: 2px;
            left: 2px;
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        .form-toggle input[type="checkbox"]:checked::before {
            transform: translateX(22px);
        }

        .setting-btn {
            width: 100%;
            padding: 0.875rem 1rem;
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            border: none;
            border-radius: 12px;
            font-size: 0.9375rem;
            font-weight: 700;
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.625rem;
        }

        .setting-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
        }

        /* Billing Section */
        .org-billing-section {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 1.75rem;
        }

        .billing-card {
            background: var(--bg-secondary);
            border-radius: 12px;
            padding: 2rem;
        }

        .billing-current {
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }

        .billing-plan {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .plan-badge {
            padding: 0.75rem 1.5rem;
            border-radius: 12px;
            font-size: 1rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .plan-badge.enterprise {
            background: linear-gradient(135deg, #f59e0b, #fbbf24);
            color: white;
        }

        .plan-price {
            font-size: 2.5rem;
            font-weight: 800;
            color: var(--text-primary);
        }

        .plan-price span {
            font-size: 1.25rem;
            font-weight: 500;
            color: var(--text-secondary);
        }

        .billing-details {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .billing-detail {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem;
            background: var(--bg-card);
            border-radius: 10px;
        }

        .billing-detail .detail-label {
            font-size: 0.9375rem;
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .billing-detail .detail-label i {
            color: #6366f1;
        }

        .billing-detail .detail-value {
            font-size: 0.9375rem;
            font-weight: 700;
            color: var(--text-primary);
        }

        .billing-actions {
            display: flex;
            gap: 1rem;
        }

        .billing-btn {
            flex: 1;
            padding: 0.875rem 1rem;
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            border: none;
            border-radius: 12px;
            font-size: 0.9375rem;
            font-weight: 700;
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.625rem;
        }

        .billing-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
        }

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

        .billing-btn.secondary:hover {
            background: var(--bg-secondary);
            border-color: #6366f1;
            box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
        }

        /* Documentation View */
        .docs-stats-compact {
            display: flex;
            align-items: center;
            background: linear-gradient(135deg, var(--bg-card) 0%, rgba(20, 184, 166, 0.03) 100%);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 1.5rem 2rem;
            margin-bottom: 2rem;
            gap: 2rem;
            flex-wrap: wrap;
            position: relative;
            overflow: hidden;
        }

        .docs-stats-compact::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, #14b8a6, #06b6d4, #14b8a6);
            background-size: 200% 100%;
            animation: shimmer 3s ease infinite;
        }

        .docs-stat-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            flex: 1;
            min-width: 180px;
        }

        .docs-stat-item.highlight {
            background: rgba(20, 184, 166, 0.08);
            padding: 1rem 1.5rem;
            border-radius: 12px;
            border: 1px solid rgba(20, 184, 166, 0.2);
        }

        .docs-stat-item i {
            font-size: 1.75rem;
            color: #14b8a6;
            opacity: 0.9;
        }

        .docs-stat-data {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }

        .docs-stat-value {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--text-primary);
            line-height: 1;
        }

        .docs-stat-label {
            font-size: 0.875rem;
            color: var(--text-secondary);
            font-weight: 500;
        }

        .docs-stat-badge {
            margin-left: auto;
            padding: 0.5rem;
            border-radius: 50%;
            font-size: 1.25rem;
        }

        .docs-stat-badge.success {
            background: rgba(34, 197, 94, 0.15);
            color: #22c55e;
        }

        .docs-stat-divider {
            width: 1px;
            height: 50px;
            background: var(--border);
        }

        /* Documentation Categories Grid - 3x2 */
        .docs-categories-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
            margin-bottom: 3rem;
        }

        .doc-category-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 1.75rem;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            flex-direction: column;
            position: relative;
            overflow: hidden;
        }

        .doc-category-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at top right, rgba(20, 184, 166, 0.1) 0%, transparent 60%);
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        .doc-category-card:hover {
            border-color: #14b8a6;
            box-shadow: 0 8px 24px rgba(20, 184, 166, 0.2);
            transform: translateY(-6px);
        }

        .doc-category-card:hover::before {
            opacity: 1;
        }

        .doc-category-icon {
            width: 64px;
            height: 64px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.75rem;
            color: white;
            margin-bottom: 1.25rem;
            position: relative;
            z-index: 1;
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .doc-category-card:hover .doc-category-icon {
            transform: scale(1.1) rotate(-5deg);
        }

        .doc-category-icon.getting-started {
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
        }

        .doc-category-icon.api {
            background: linear-gradient(135deg, #06b6d4, #22d3ee);
        }

        .doc-category-icon.guides {
            background: linear-gradient(135deg, #22c55e, #4ade80);
        }

        .doc-category-icon.best-practices {
            background: linear-gradient(135deg, #f59e0b, #fbbf24);
        }

        .doc-category-icon.troubleshooting {
            background: linear-gradient(135deg, #ef4444, #f87171);
        }

        .doc-category-icon.video {
            background: linear-gradient(135deg, #ec4899, #f472b6);
        }

        .doc-category-title {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--text-primary);
            margin: 0 0 0.75rem 0;
            position: relative;
            z-index: 1;
        }

        .doc-category-description {
            font-size: 0.9375rem;
            color: var(--text-secondary);
            line-height: 1.6;
            margin-bottom: 1rem;
            flex: 1;
            position: relative;
            z-index: 1;
        }

        .doc-category-stats {
            display: flex;
            gap: 1rem;
            margin-bottom: 1rem;
            position: relative;
            z-index: 1;
        }

        .doc-stat {
            font-size: 0.8125rem;
            color: var(--text-secondary);
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 0.375rem;
        }

        .doc-stat i {
            color: #14b8a6;
        }

        .doc-category-topics {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-bottom: 1.25rem;
            position: relative;
            z-index: 1;
        }

        .topic-tag {
            padding: 0.375rem 0.75rem;
            background: rgba(20, 184, 166, 0.1);
            color: #14b8a6;
            border-radius: 8px;
            font-size: 0.75rem;
            font-weight: 700;
            border: 1px solid rgba(20, 184, 166, 0.2);
        }

        .doc-category-btn {
            width: 100%;
            padding: 0.875rem 1rem;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 12px;
            font-size: 0.9375rem;
            font-weight: 700;
            color: var(--text-primary);
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.625rem;
            position: relative;
            z-index: 1;
        }

        .doc-category-btn:hover {
            background: linear-gradient(135deg, #14b8a6, #2dd4bf);
            border-color: #14b8a6;
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3);
        }

        /* Popular Articles Grid - 2x2 */
        .popular-articles-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.5rem;
            margin-bottom: 3rem;
        }

        .article-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 1.75rem;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            flex-direction: column;
            position: relative;
        }

        .article-card:hover {
            border-color: #14b8a6;
            box-shadow: 0 8px 24px rgba(20, 184, 166, 0.15);
            transform: translateY(-4px);
        }

        .article-badge {
            position: absolute;
            top: 1rem;
            right: 1rem;
            padding: 0.5rem 1rem;
            border-radius: 10px;
            font-size: 0.75rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            z-index: 1;
        }

        .article-badge.hot {
            background: linear-gradient(135deg, #ef4444, #f87171);
            color: white;
        }

        .article-badge.new {
            background: linear-gradient(135deg, #22c55e, #4ade80);
            color: white;
        }

        .article-icon {
            width: 56px;
            height: 56px;
            background: linear-gradient(135deg, #14b8a6, #2dd4bf);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: white;
            margin-bottom: 1.25rem;
            transition: transform 0.3s ease;
        }

        .article-card:hover .article-icon {
            transform: scale(1.1) rotate(-5deg);
        }

        .article-title {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--text-primary);
            margin: 0 0 0.75rem 0;
        }

        .article-excerpt {
            font-size: 0.9375rem;
            color: var(--text-secondary);
            line-height: 1.6;
            margin-bottom: 1.25rem;
            flex: 1;
        }

        .article-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            margin-bottom: 1.25rem;
        }

        .meta-item {
            font-size: 0.8125rem;
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            gap: 0.375rem;
        }

        .meta-item i {
            color: #14b8a6;
            font-size: 0.75rem;
        }

        .article-btn {
            width: 100%;
            padding: 0.875rem 1rem;
            background: linear-gradient(135deg, #14b8a6, #2dd4bf);
            border: none;
            border-radius: 12px;
            font-size: 0.9375rem;
            font-weight: 700;
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.625rem;
        }

        .article-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(20, 184, 166, 0.4);
        }

        /* Quick Links */
        .docs-quick-links {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 1.75rem;
        }

        .quick-links-header {
            margin-bottom: 1.5rem;
        }

        .quick-links-grid {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 1rem;
        }

        .quick-link-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.75rem;
            padding: 1.25rem 1rem;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 12px;
            text-decoration: none;
            color: var(--text-primary);
            transition: all 0.3s ease;
        }

        .quick-link-item:hover {
            background: var(--bg-card);
            border-color: #14b8a6;
            transform: translateY(-2px);
        }

        .quick-link-item i {
            font-size: 1.5rem;
            color: #14b8a6;
        }

        .quick-link-item span {
            font-size: 0.8125rem;
            font-weight: 600;
            text-align: center;
        }

        .team-stats-compact::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, #7c3aed, #06b6d4, #7c3aed);
            background-size: 200% 100%;
            animation: shimmer 3s ease infinite;
        }

        .team-stat-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            flex: 1;
            min-width: 180px;
        }

        .team-stat-item.highlight {
            background: rgba(124, 58, 237, 0.08);
            padding: 1rem 1.5rem;
            border-radius: 12px;
            border: 1px solid rgba(124, 58, 237, 0.2);
        }

        .team-stat-item i {
            font-size: 1.75rem;
            color: #7c3aed;
            opacity: 0.9;
        }

        .team-stat-data {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }

        .team-stat-value {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--text-primary);
            line-height: 1;
        }

        .team-stat-label {
            font-size: 0.875rem;
            color: var(--text-secondary);
            font-weight: 500;
        }

        .team-stat-badge {
            margin-left: auto;
            padding: 0.5rem;
            border-radius: 50%;
            font-size: 1.25rem;
        }

        .team-stat-badge.warning {
            background: rgba(251, 146, 60, 0.15);
            color: #fb923c;
        }

        .team-stat-divider {
            width: 1px;
            height: 50px;
            background: var(--border);
        }

        /* Section Actions */
        .section-actions {
            display: flex;
            gap: 1rem;
            align-items: center;
        }

        .search-input {
            padding: 0.625rem 1rem;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 10px;
            color: var(--text-primary);
            font-size: 0.9375rem;
            width: 240px;
            transition: all 0.3s ease;
        }

        .search-input:focus {
            outline: none;
            border-color: var(--accent-cyan);
            box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1);
        }

        .filter-select {
            padding: 0.625rem 1rem;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 10px;
            color: var(--text-primary);
            font-size: 0.9375rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .filter-select:hover {
            border-color: var(--accent-cyan);
        }

        /* Team Members Grid - 2x2 */
        .team-members-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.5rem;
            margin-bottom: 3rem;
        }

        .team-member-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 1.75rem;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            flex-direction: column;
        }

        .team-member-card:hover {
            border-color: #7c3aed;
            box-shadow: 0 8px 24px rgba(124, 58, 237, 0.2);
            transform: translateY(-4px);
        }

        .member-header {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
            margin-bottom: 1.25rem;
        }

        .member-avatar {
            position: relative;
            width: 56px;
            height: 56px;
            flex-shrink: 0;
        }

        .member-avatar img {
            width: 100%;
            height: 100%;
            border-radius: 12px;
        }

        .member-status-dot {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            border: 3px solid var(--bg-card);
        }

        .member-status-dot.online {
            background: #22c55e;
            box-shadow: 0 0 12px rgba(34, 197, 94, 0.5);
            animation: pulse 2s ease infinite;
        }

        .member-status-dot.away {
            background: #facc15;
        }

        .member-status-dot.offline {
            background: #6b7280;
        }

        .member-info {
            flex: 1;
        }

        .member-name {
            font-size: 1.125rem;
            font-weight: 700;
            color: var(--text-primary);
            margin: 0 0 0.375rem 0;
        }

        .member-email {
            font-size: 0.875rem;
            color: var(--text-secondary);
            margin: 0;
        }

        .member-badge {
            padding: 0.5rem 1rem;
            border-radius: 10px;
            font-size: 0.75rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            white-space: nowrap;
        }

        .member-badge.admin {
            background: linear-gradient(135deg, #7c3aed, #a855f7);
            color: white;
        }

        .member-badge.developer {
            background: rgba(6, 182, 212, 0.15);
            color: #06b6d4;
            border: 1px solid rgba(6, 182, 212, 0.3);
        }

        .member-badge.viewer {
            background: rgba(251, 146, 60, 0.15);
            color: #fb923c;
            border: 1px solid rgba(251, 146, 60, 0.3);
        }

        .member-details {
            background: var(--bg-secondary);
            border-radius: 12px;
            padding: 1rem;
            margin-bottom: 1.25rem;
        }

        .detail-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.625rem 0;
            border-bottom: 1px solid var(--border);
        }

        .detail-row:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

        .detail-row:first-child {
            padding-top: 0;
        }

        .detail-label {
            font-size: 0.875rem;
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .detail-label i {
            color: #7c3aed;
            font-size: 0.875rem;
        }

        .detail-value {
            font-size: 0.875rem;
            color: var(--text-primary);
            font-weight: 700;
        }

        .member-permissions {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-bottom: 1.25rem;
        }

        .permission-tag {
            padding: 0.375rem 0.875rem;
            background: rgba(124, 58, 237, 0.1);
            color: #7c3aed;
            border-radius: 8px;
            font-size: 0.75rem;
            font-weight: 700;
            border: 1px solid rgba(124, 58, 237, 0.2);
        }

        .member-actions {
            display: flex;
            gap: 0.75rem;
            margin-top: auto;
        }

        .member-btn {
            flex: 1;
            padding: 0.875rem 1rem;
            background: linear-gradient(135deg, #7c3aed, #a855f7);
            border: none;
            border-radius: 12px;
            font-size: 0.9375rem;
            font-weight: 700;
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.625rem;
        }

        .member-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4);
        }

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

        .member-btn.secondary:hover {
            background: var(--bg-card);
            border-color: #7c3aed;
        }

        /* Pending Invitations Section */
        .pending-invites-section {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 1.75rem;
        }

        .pending-invites-list {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .pending-invite-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.25rem;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 12px;
            transition: all 0.3s ease;
        }

        .pending-invite-item:hover {
            border-color: #7c3aed;
            box-shadow: 0 2px 8px rgba(124, 58, 237, 0.1);
        }

        .invite-info {
            display: flex;
            gap: 1rem;
            align-items: center;
            flex: 1;
        }

        .invite-avatar {
            width: 48px;
            height: 48px;
            background: linear-gradient(135deg, #7c3aed, #a855f7);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.25rem;
        }

        .invite-email {
            font-size: 1rem;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 0.375rem;
        }

        .invite-meta {
            font-size: 0.875rem;
            color: var(--text-secondary);
        }

        .invite-actions {
            display: flex;
            gap: 0.75rem;
        }

        .invite-btn {
            padding: 0.625rem 1.25rem;
            border-radius: 10px;
            font-size: 0.875rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            border: none;
        }

        .invite-btn.resend {
            background: rgba(6, 182, 212, 0.15);
            color: #06b6d4;
            border: 1px solid rgba(6, 182, 212, 0.3);
        }

        .invite-btn.resend:hover {
            background: #06b6d4;
            color: white;
        }

        .invite-btn.cancel {
            background: rgba(239, 68, 68, 0.15);
            color: #ef4444;
            border: 1px solid rgba(239, 68, 68, 0.3);
        }

        .invite-btn.cancel:hover {
            background: #ef4444;
            color: white;
        }

        /* Roles & Permissions View */
        .roles-stats-compact {
            display: flex;
            align-items: center;
            background: linear-gradient(135deg, var(--bg-card) 0%, rgba(34, 197, 94, 0.03) 100%);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 1.5rem 2rem;
            margin-bottom: 2rem;
            gap: 2rem;
            flex-wrap: wrap;
            position: relative;
            overflow: hidden;
        }

        .roles-stats-compact::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, #22c55e, #7c3aed, #22c55e);
            background-size: 200% 100%;
            animation: shimmer 3s ease infinite;
        }

        .roles-stat-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            flex: 1;
            min-width: 180px;
        }

        .roles-stat-item.highlight {
            background: rgba(34, 197, 94, 0.08);
            padding: 1rem 1.5rem;
            border-radius: 12px;
            border: 1px solid rgba(34, 197, 94, 0.2);
        }

        .roles-stat-item i {
            font-size: 1.75rem;
            color: #22c55e;
            opacity: 0.9;
        }

        .roles-stat-data {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }

        .roles-stat-value {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--text-primary);
            line-height: 1;
        }

        .roles-stat-label {
            font-size: 0.875rem;
            color: var(--text-secondary);
            font-weight: 500;
        }

        .roles-stat-divider {
            width: 1px;
            height: 50px;
            background: var(--border);
        }

        /* Roles Grid - 2x2 */
        .roles-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.5rem;
            margin-bottom: 3rem;
        }

        .role-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 1.75rem;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            flex-direction: column;
            position: relative;
            overflow: hidden;
        }

        .role-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #7c3aed, #a855f7);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .role-card.admin::before {
            background: linear-gradient(90deg, #7c3aed, #a855f7);
        }

        .role-card.developer::before {
            background: linear-gradient(90deg, #06b6d4, #22d3ee);
        }

        .role-card.support::before {
            background: linear-gradient(90deg, #22c55e, #4ade80);
        }

        .role-card.viewer::before {
            background: linear-gradient(90deg, #f59e0b, #fbbf24);
        }

        .role-card:hover {
            box-shadow: 0 8px 24px rgba(124, 58, 237, 0.15);
            transform: translateY(-4px);
        }

        .role-card:hover::before {
            transform: scaleX(1);
        }

        .role-header {
            display: flex;
            gap: 1rem;
            margin-bottom: 1.25rem;
        }

        .role-icon {
            width: 56px;
            height: 56px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: white;
            flex-shrink: 0;
            transition: transform 0.3s ease;
        }

        .role-card.admin .role-icon {
            background: linear-gradient(135deg, #7c3aed, #a855f7);
        }

        .role-card.developer .role-icon {
            background: linear-gradient(135deg, #06b6d4, #22d3ee);
        }

        .role-card.support .role-icon {
            background: linear-gradient(135deg, #22c55e, #4ade80);
        }

        .role-card.viewer .role-icon {
            background: linear-gradient(135deg, #f59e0b, #fbbf24);
        }

        .role-card:hover .role-icon {
            transform: scale(1.1) rotate(-5deg);
        }

        .role-info {
            flex: 1;
        }

        .role-name {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--text-primary);
            margin: 0 0 0.5rem 0;
        }

        .role-description {
            font-size: 0.9375rem;
            color: var(--text-secondary);
            line-height: 1.5;
            margin: 0;
        }

        .role-members {
            margin-bottom: 1.25rem;
        }

        .members-count {
            font-size: 0.875rem;
            color: var(--text-secondary);
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .members-count i {
            color: #7c3aed;
        }

        .role-permissions-preview {
            background: var(--bg-secondary);
            border-radius: 12px;
            padding: 1rem;
            margin-bottom: 1.25rem;
        }

        .permission-category {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.5rem 0;
            font-size: 0.875rem;
        }

        .permission-category i {
            font-size: 0.875rem;
        }

        .permission-category i.fa-check-circle {
            color: #22c55e;
        }

        .permission-category i.fa-times-circle {
            color: #6b7280;
            opacity: 0.5;
        }

        .role-actions {
            display: flex;
            gap: 0.75rem;
            margin-top: auto;
        }

        .role-btn {
            flex: 1;
            padding: 0.875rem 1rem;
            background: linear-gradient(135deg, #7c3aed, #a855f7);
            border: none;
            border-radius: 12px;
            font-size: 0.9375rem;
            font-weight: 700;
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.625rem;
        }

        .role-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4);
        }

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

        .role-btn.secondary:hover {
            background: var(--bg-card);
            border-color: #7c3aed;
        }

        /* Permission Matrix Grid - 3x3 */
        .permissions-matrix-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
        }

        .permission-matrix-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 1.5rem;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .permission-matrix-card:hover {
            border-color: #22c55e;
            box-shadow: 0 8px 24px rgba(34, 197, 94, 0.15);
            transform: translateY(-4px);
        }

        .matrix-icon {
            width: 56px;
            height: 56px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: white;
            margin-bottom: 1rem;
            transition: transform 0.3s ease;
        }

        .permission-matrix-card:hover .matrix-icon {
            transform: scale(1.1) rotate(-5deg);
        }

        .matrix-icon.cdn {
            background: linear-gradient(135deg, #06b6d4, #22d3ee);
        }

        .matrix-icon.analytics {
            background: linear-gradient(135deg, #7c3aed, #a855f7);
        }

        .matrix-icon.security {
            background: linear-gradient(135deg, #22c55e, #4ade80);
        }

        .matrix-icon.billing {
            background: linear-gradient(135deg, #f59e0b, #fbbf24);
        }

        .matrix-icon.team {
            background: linear-gradient(135deg, #ec4899, #f472b6);
        }

        .matrix-icon.integrations {
            background: linear-gradient(135deg, #8b5cf6, #a78bfa);
        }

        .matrix-icon.monitoring {
            background: linear-gradient(135deg, #14b8a6, #2dd4bf);
        }

        .matrix-icon.domains {
            background: linear-gradient(135deg, #f97316, #fb923c);
        }

        .matrix-icon.settings {
            background: linear-gradient(135deg, #6366f1, #818cf8);
        }

        .matrix-title {
            font-size: 1.125rem;
            font-weight: 700;
            color: var(--text-primary);
            margin: 0 0 1rem 0;
        }

        .matrix-permissions {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .matrix-permission {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.75rem;
            background: var(--bg-secondary);
            border-radius: 10px;
        }

        .permission-name {
            font-size: 0.875rem;
            color: var(--text-secondary);
            font-weight: 500;
        }

        .permission-roles {
            display: flex;
            gap: 0.5rem;
        }

        .role-check {
            width: 24px;
            height: 24px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75rem;
            font-weight: 700;
        }

        .role-check.admin {
            background: linear-gradient(135deg, #7c3aed, #a855f7);
            color: white;
        }

        .role-check.dev {
            background: rgba(6, 182, 212, 0.15);
            color: #06b6d4;
            border: 1px solid rgba(6, 182, 212, 0.3);
        }

        .role-check.support {
            background: rgba(34, 197, 94, 0.15);
            color: #22c55e;
            border: 1px solid rgba(34, 197, 94, 0.3);
        }

        .role-check.none {
            background: var(--bg-card);
            color: #6b7280;
            border: 1px solid var(--border);
        }

        .github-status-compact::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, #24292f, #ffffff, #24292f);
            background-size: 200% 100%;
            animation: shimmer 3s ease infinite;
        }

        .github-status-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            flex: 1;
            min-width: 180px;
        }

        .github-status-item.connected {
            background: rgba(36, 41, 47, 0.3);
            padding: 1rem 1.5rem;
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .github-status-icon {
            width: 48px;
            height: 48px;
            background: linear-gradient(135deg, #24292f, #57606a);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: white;
        }

        .github-status-item i {
            font-size: 1.75rem;
            color: #ffffff;
            opacity: 0.9;
        }

        .github-status-data {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }

        .github-status-value {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--text-primary);
            line-height: 1;
        }

        .github-status-label {
            font-size: 0.875rem;
            color: var(--text-secondary);
            font-weight: 500;
        }

        .github-status-badge {
            margin-left: auto;
            padding: 0.5rem;
            border-radius: 50%;
            font-size: 1.25rem;
        }

        .github-status-badge.success {
            background: rgba(34, 197, 94, 0.15);
            color: #22c55e;
        }

        .github-status-divider {
            width: 1px;
            height: 50px;
            background: var(--border);
        }

        /* GitHub Repos Grid - 3x1 */
        .github-repos-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
            margin-bottom: 3rem;
        }

        .github-repo-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 1.75rem;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            flex-direction: column;
        }

        .github-repo-card:hover {
            border-color: #24292f;
            box-shadow: 0 8px 24px rgba(36, 41, 47, 0.3);
            transform: translateY(-4px);
        }

        .repo-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            margin-bottom: 1.25rem;
        }

        .repo-info {
            display: flex;
            gap: 1rem;
            flex: 1;
        }

        .repo-icon {
            width: 48px;
            height: 48px;
            background: linear-gradient(135deg, #24292f, #57606a);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.25rem;
            flex-shrink: 0;
            transition: transform 0.3s ease;
        }

        .github-repo-card:hover .repo-icon {
            transform: scale(1.1) rotate(5deg);
        }

        .repo-name {
            font-size: 1.125rem;
            font-weight: 700;
            color: var(--text-primary);
            margin: 0 0 0.375rem 0;
        }

        .repo-description {
            font-size: 0.875rem;
            color: var(--text-secondary);
            line-height: 1.4;
            margin: 0;
        }

        .repo-visibility {
            padding: 0.375rem 0.875rem;
            border-radius: 8px;
            font-size: 0.75rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 0.375rem;
            white-space: nowrap;
        }

        .repo-visibility.public {
            background: rgba(34, 197, 94, 0.15);
            color: #22c55e;
            border: 1px solid rgba(34, 197, 94, 0.3);
        }

        .repo-visibility.private {
            background: rgba(251, 146, 60, 0.15);
            color: #fb923c;
            border: 1px solid rgba(251, 146, 60, 0.3);
        }

        .repo-stats {
            display: flex;
            gap: 1.5rem;
            margin-bottom: 1.25rem;
            padding: 1rem;
            background: var(--bg-secondary);
            border-radius: 12px;
        }

        .repo-stat {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.875rem;
        }

        .repo-stat i {
            color: var(--accent-cyan);
            font-size: 0.875rem;
        }

        .repo-stat .stat-value {
            font-weight: 700;
            color: var(--text-primary);
        }

        .repo-stat .stat-label {
            color: var(--text-secondary);
        }

        .repo-workflows {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-bottom: 1.25rem;
        }

        .workflow-badge {
            padding: 0.375rem 0.875rem;
            border-radius: 8px;
            font-size: 0.75rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 0.375rem;
            background: var(--bg-secondary);
            color: var(--text-secondary);
            border: 1px solid var(--border);
            transition: all 0.3s ease;
        }

        .workflow-badge.active {
            background: rgba(34, 197, 94, 0.15);
            color: #22c55e;
            border-color: rgba(34, 197, 94, 0.3);
        }

        .workflow-badge i {
            font-size: 0.75rem;
        }

        .repo-actions {
            display: flex;
            gap: 0.75rem;
            margin-top: auto;
        }

        .repo-btn {
            flex: 1;
            padding: 0.875rem 1rem;
            background: linear-gradient(135deg, #24292f, #57606a);
            border: none;
            border-radius: 12px;
            font-size: 0.9375rem;
            font-weight: 700;
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.625rem;
        }

        .repo-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(36, 41, 47, 0.4);
        }

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

        .repo-btn.secondary:hover {
            background: var(--bg-card);
            border-color: #24292f;
        }

        /* GitHub Workflows Grid - 2x2 */
        .github-workflows-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.5rem;
            margin-bottom: 3rem;
        }

        .github-workflow-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 1.75rem;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            flex-direction: column;
            position: relative;
            overflow: hidden;
        }

        .github-workflow-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at top right, rgba(36, 41, 47, 0.1) 0%, transparent 60%);
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        .github-workflow-card:hover {
            border-color: #24292f;
            box-shadow: 0 8px 24px rgba(36, 41, 47, 0.2);
            transform: translateY(-6px);
        }

        .github-workflow-card:hover::before {
            opacity: 1;
        }

        .workflow-icon-wrapper {
            margin-bottom: 1.25rem;
            position: relative;
            z-index: 1;
        }

        .workflow-icon-wrapper i {
            width: 64px;
            height: 64px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.75rem;
            color: white;
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .workflow-icon-wrapper.deploy i {
            background: linear-gradient(135deg, #7c3aed, #a855f7);
        }

        .workflow-icon-wrapper.purge i {
            background: linear-gradient(135deg, #ef4444, #f87171);
        }

        .workflow-icon-wrapper.preview i {
            background: linear-gradient(135deg, #06b6d4, #22d3ee);
        }

        .workflow-icon-wrapper.security i {
            background: linear-gradient(135deg, #22c55e, #4ade80);
        }

        .github-workflow-card:hover .workflow-icon-wrapper i {
            transform: scale(1.1) rotate(-5deg);
        }

        .workflow-title {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--text-primary);
            margin: 0 0 0.75rem 0;
            position: relative;
            z-index: 1;
        }

        .workflow-description {
            font-size: 0.9375rem;
            color: var(--text-secondary);
            line-height: 1.6;
            margin-bottom: 1.25rem;
            flex: 1;
            position: relative;
            z-index: 1;
        }

        .workflow-triggers {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-bottom: 1.25rem;
            position: relative;
            z-index: 1;
        }

        .trigger-badge {
            background: var(--bg-secondary);
            color: #24292f;
            padding: 0.375rem 0.75rem;
            border-radius: 8px;
            font-size: 0.75rem;
            font-weight: 700;
            font-family: 'Courier New', monospace;
            border: 1px solid var(--border);
        }

        .workflow-stats-row {
            display: flex;
            gap: 1rem;
            padding: 1rem;
            background: var(--bg-secondary);
            border-radius: 12px;
            margin-bottom: 1.25rem;
            position: relative;
            z-index: 1;
        }

        .workflow-stat {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.375rem;
        }

        .workflow-stat .stat-label {
            font-size: 0.75rem;
            color: var(--text-secondary);
            font-weight: 500;
        }

        .workflow-stat .stat-value {
            font-size: 1rem;
            font-weight: 700;
            color: var(--text-primary);
        }

        .workflow-stat .stat-value.success {
            color: #22c55e;
        }

        .workflow-stat .stat-value.warning {
            color: #facc15;
        }

        .workflow-action-btn {
            width: 100%;
            padding: 0.875rem 1rem;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 12px;
            font-size: 0.9375rem;
            font-weight: 700;
            color: var(--text-primary);
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.625rem;
            position: relative;
            z-index: 1;
        }

        .workflow-action-btn:hover {
            background: linear-gradient(135deg, #24292f, #57606a);
            border-color: #24292f;
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(36, 41, 47, 0.3);
        }

        /* GitHub Activity Section */
        .github-activity-section {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 1.75rem;
        }

        .deployment-timeline {
            position: relative;
            padding-left: 2.5rem;
        }

        .deployment-timeline::before {
            content: '';
            position: absolute;
            left: 1rem;
            top: 0;
            bottom: 0;
            width: 2px;
            background: var(--border);
        }

        .deployment-item {
            position: relative;
            margin-bottom: 1.5rem;
            display: flex;
            gap: 1rem;
        }

        .deployment-item:last-child {
            margin-bottom: 0;
        }

        .deployment-status {
            position: absolute;
            left: -2rem;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.875rem;
            background: var(--bg-card);
            border: 2px solid var(--accent-cyan);
            z-index: 1;
        }

        .deployment-item.success .deployment-status {
            background: #22c55e;
            border-color: #22c55e;
            color: white;
        }

        .deployment-item.failed .deployment-status {
            background: #ef4444;
            border-color: #ef4444;
            color: white;
        }

        .deployment-content {
            flex: 1;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 1rem;
        }

        .deployment-header-row {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 0.5rem;
            flex-wrap: wrap;
        }

        .deployment-repo {
            font-weight: 700;
            color: var(--text-primary);
            font-size: 0.9375rem;
        }

        .deployment-branch {
            padding: 0.25rem 0.625rem;
            background: rgba(36, 41, 47, 0.2);
            border: 1px solid rgba(36, 41, 47, 0.3);
            border-radius: 6px;
            font-size: 0.75rem;
            font-weight: 700;
            color: var(--text-primary);
            font-family: 'Courier New', monospace;
        }

        .deployment-time {
            font-size: 0.8125rem;
            color: var(--text-secondary);
            margin-left: auto;
        }

        .deployment-commit {
            font-size: 0.875rem;
            color: var(--text-secondary);
            line-height: 1.5;
            margin: 0 0 0.75rem 0;
        }

        .deployment-meta {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .deployment-meta .meta-item {
            font-size: 0.8125rem;
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            gap: 0.375rem;
        }

        .deployment-meta .meta-item i {
            font-size: 0.75rem;
        }

        .deployment-meta .meta-item.error {
            color: #ef4444;
        }

        /* Webhooks View */
        .webhook-stats-compact {
            display: flex;
            align-items: center;
            background: linear-gradient(135deg, var(--bg-card) 0%, rgba(245, 158, 11, 0.03) 100%);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 1.5rem 2rem;
            margin-bottom: 2rem;
            gap: 2rem;
            flex-wrap: wrap;
            position: relative;
            overflow: hidden;
        }

        .webhook-stats-compact::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, #f59e0b, #22c55e, #f59e0b);
            background-size: 200% 100%;
            animation: shimmer 3s ease infinite;
        }

        .webhook-stat-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            flex: 1;
            min-width: 180px;
        }

        .webhook-stat-item.highlight {
            background: rgba(245, 158, 11, 0.08);
            padding: 1rem 1.5rem;
            border-radius: 12px;
            border: 1px solid rgba(245, 158, 11, 0.2);
        }

        .webhook-stat-item i {
            font-size: 1.75rem;
            color: #f59e0b;
            opacity: 0.9;
        }

        .webhook-stat-data {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }

        .webhook-stat-value {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--text-primary);
            line-height: 1;
        }

        .webhook-stat-label {
            font-size: 0.875rem;
            color: var(--text-secondary);
            font-weight: 500;
        }

        .webhook-stat-trend {
            font-size: 0.9375rem;
            font-weight: 700;
            margin-left: auto;
            padding: 0.375rem 0.75rem;
            border-radius: 8px;
        }

        .webhook-stat-trend.positive {
            color: #10b981;
            background: rgba(16, 185, 129, 0.15);
        }

        .webhook-stat-trend.negative {
            color: #ef4444;
            background: rgba(239, 68, 68, 0.15);
        }

        .webhook-stat-divider {
            width: 1px;
            height: 50px;
            background: var(--border);
        }

        /* Webhooks Grid - 2x2 */
        .webhooks-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.5rem;
            margin-bottom: 3rem;
        }

        .webhook-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 1.75rem;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            flex-direction: column;
        }

        .webhook-card:hover {
            border-color: #f59e0b;
            box-shadow: 0 8px 24px rgba(245, 158, 11, 0.15);
            transform: translateY(-4px);
        }

        .webhook-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            margin-bottom: 1.25rem;
        }

        .webhook-info {
            display: flex;
            gap: 0.75rem;
            flex: 1;
        }

        .webhook-status-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-top: 0.375rem;
            flex-shrink: 0;
        }

        .webhook-status-dot.active {
            background: #22c55e;
            box-shadow: 0 0 12px rgba(34, 197, 94, 0.5);
            animation: pulse 2s ease infinite;
        }

        .webhook-status-dot.paused {
            background: #6b7280;
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }

        .webhook-name {
            font-size: 1.125rem;
            font-weight: 700;
            color: var(--text-primary);
            margin: 0 0 0.375rem 0;
        }

        .webhook-url {
            font-size: 0.8125rem;
            color: var(--text-secondary);
            font-family: 'Courier New', monospace;
            word-break: break-all;
            margin: 0;
        }

        .webhook-toggle input[type="checkbox"] {
            width: 50px;
            height: 28px;
            appearance: none;
            background: var(--bg-secondary);
            border-radius: 14px;
            position: relative;
            cursor: pointer;
            transition: background 0.3s ease;
            border: 1px solid var(--border);
        }

        .webhook-toggle input[type="checkbox"]:checked {
            background: #f59e0b;
            border-color: #f59e0b;
        }

        .webhook-toggle input[type="checkbox"]::before {
            content: '';
            position: absolute;
            width: 22px;
            height: 22px;
            background: white;
            border-radius: 50%;
            top: 2px;
            left: 2px;
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        .webhook-toggle input[type="checkbox"]:checked::before {
            transform: translateX(22px);
        }

        .webhook-events {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-bottom: 1.25rem;
        }

        .event-badge {
            background: var(--bg-secondary);
            color: var(--text-primary);
            padding: 0.375rem 0.75rem;
            border-radius: 8px;
            font-size: 0.75rem;
            font-weight: 700;
            font-family: 'Courier New', monospace;
            border: 1px solid var(--border);
        }

        .event-count {
            color: var(--text-secondary);
            font-size: 0.75rem;
            font-weight: 600;
            padding: 0.375rem 0.75rem;
        }

        .webhook-stats-row {
            display: flex;
            gap: 1rem;
            padding: 1rem;
            background: var(--bg-secondary);
            border-radius: 12px;
            margin-bottom: 1.25rem;
        }

        .webhook-card-stat {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.375rem;
        }

        .webhook-card-stat .stat-label {
            font-size: 0.75rem;
            color: var(--text-secondary);
            font-weight: 500;
        }

        .webhook-card-stat .stat-value {
            font-size: 1rem;
            font-weight: 700;
            color: var(--text-primary);
        }

        .webhook-card-stat .stat-value.success {
            color: #22c55e;
        }

        .webhook-card-stat .stat-value.warning {
            color: #facc15;
        }

        .webhook-actions {
            display: flex;
            gap: 0.75rem;
            margin-top: auto;
        }

        .webhook-btn {
            flex: 1;
            padding: 0.875rem 1rem;
            background: linear-gradient(135deg, #f59e0b, #fbbf24);
            border: none;
            border-radius: 12px;
            font-size: 0.9375rem;
            font-weight: 700;
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.625rem;
        }

        .webhook-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
        }

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

        .webhook-btn.secondary:hover {
            background: var(--bg-card);
            border-color: #f59e0b;
        }

        /* Webhook Events Grid - 3x3 */
        .webhook-events-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
            margin-bottom: 3rem;
        }

        .webhook-event-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 1.5rem;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            flex-direction: column;
        }

        .webhook-event-card:hover {
            border-color: #f59e0b;
            box-shadow: 0 8px 24px rgba(245, 158, 11, 0.15);
            transform: translateY(-4px);
        }

        .event-icon {
            width: 56px;
            height: 56px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: white;
            margin-bottom: 1rem;
            transition: transform 0.3s ease;
        }

        .webhook-event-card:hover .event-icon {
            transform: scale(1.1) rotate(-5deg);
        }

        .event-icon.cache {
            background: linear-gradient(135deg, #06b6d4, #22d3ee);
        }

        .event-icon.deployment {
            background: linear-gradient(135deg, #7c3aed, #a855f7);
        }

        .event-icon.security {
            background: linear-gradient(135deg, #22c55e, #4ade80);
        }

        .event-icon.origin {
            background: linear-gradient(135deg, #ef4444, #f87171);
        }

        .event-icon.traffic {
            background: linear-gradient(135deg, #f59e0b, #fbbf24);
        }

        .event-icon.alert {
            background: linear-gradient(135deg, #ec4899, #f472b6);
        }

        .event-icon.config {
            background: linear-gradient(135deg, #8b5cf6, #a78bfa);
        }

        .event-icon.certificate {
            background: linear-gradient(135deg, #14b8a6, #2dd4bf);
        }

        .event-icon.billing {
            background: linear-gradient(135deg, #f97316, #fb923c);
        }

        .event-title {
            font-size: 1.125rem;
            font-weight: 700;
            color: var(--text-primary);
            margin: 0 0 0.75rem 0;
        }

        .event-types {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            margin-bottom: 1rem;
        }

        .event-types code {
            background: var(--bg-secondary);
            color: #f59e0b;
            padding: 0.375rem 0.75rem;
            border-radius: 6px;
            font-size: 0.75rem;
            font-weight: 600;
            font-family: 'Courier New', monospace;
            border: 1px solid var(--border);
        }

        .event-description {
            font-size: 0.875rem;
            color: var(--text-secondary);
            line-height: 1.5;
            margin: 0;
        }

        /* Webhook Deliveries Section */
        .webhook-deliveries-section {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 1.75rem;
        }

        .deliveries-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1.5rem;
        }

        .deliveries-list {
            display: flex;
            flex-direction: column;
            gap: 1.25rem;
        }

        .delivery-item {
            display: flex;
            gap: 1rem;
            padding: 1rem;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 12px;
            transition: all 0.3s ease;
        }

        .delivery-item:hover {
            border-color: var(--accent-cyan);
            box-shadow: 0 2px 8px rgba(6, 182, 212, 0.1);
        }

        .delivery-status {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.375rem;
            padding-right: 1rem;
            border-right: 1px solid var(--border);
        }

        .delivery-status i {
            font-size: 1.5rem;
        }

        .delivery-item.success .delivery-status i {
            color: #22c55e;
        }

        .delivery-item.failed .delivery-status i {
            color: #ef4444;
        }

        .status-code {
            font-size: 0.75rem;
            font-weight: 700;
            font-family: 'Courier New', monospace;
            padding: 0.25rem 0.5rem;
            border-radius: 6px;
        }

        .delivery-item.success .status-code {
            background: rgba(34, 197, 94, 0.15);
            color: #22c55e;
        }

        .delivery-item.failed .status-code {
            background: rgba(239, 68, 68, 0.15);
            color: #ef4444;
        }

        .delivery-content {
            flex: 1;
        }

        .delivery-header-row {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 0.5rem;
            flex-wrap: wrap;
        }

        .delivery-webhook {
            font-weight: 700;
            color: var(--text-primary);
            font-size: 0.9375rem;
        }

        .delivery-event {
            padding: 0.25rem 0.625rem;
            background: rgba(245, 158, 11, 0.15);
            border: 1px solid rgba(245, 158, 11, 0.3);
            border-radius: 6px;
            font-size: 0.75rem;
            font-weight: 700;
            color: #f59e0b;
            font-family: 'Courier New', monospace;
        }

        .delivery-time {
            font-size: 0.8125rem;
            color: var(--text-secondary);
            margin-left: auto;
        }

        .delivery-url {
            font-size: 0.8125rem;
            color: var(--text-secondary);
            font-family: 'Courier New', monospace;
            margin: 0 0 0.75rem 0;
            word-break: break-all;
        }

        .delivery-meta {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .delivery-meta .meta-item {
            font-size: 0.8125rem;
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            gap: 0.375rem;
        }

        .delivery-meta .meta-item i {
            font-size: 0.75rem;
        }

        .delivery-meta .meta-item.error {
            color: #ef4444;
        }

        .performance-stats-compact::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--accent-cyan), #7c3aed, var(--accent-cyan));
            background-size: 200% 100%;
            animation: shimmer 3s ease infinite;
        }

        @keyframes shimmer {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }

        .performance-stat-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            flex: 1;
            min-width: 200px;
        }

        .performance-stat-item.highlight {
            background: rgba(6, 182, 212, 0.08);
            padding: 1rem 1.5rem;
            border-radius: 12px;
            border: 1px solid rgba(6, 182, 212, 0.2);
        }

        .performance-stat-item i {
            font-size: 2rem;
            color: var(--accent-cyan);
            opacity: 0.9;
        }

        .performance-stat-data {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }

        .performance-stat-value {
            font-size: 1.75rem;
            font-weight: 800;
            color: var(--text-primary);
            line-height: 1;
        }

        .performance-stat-label {
            font-size: 0.875rem;
            color: var(--text-secondary);
            font-weight: 500;
        }

        .performance-stat-trend {
            font-size: 0.9375rem;
            font-weight: 700;
            margin-left: auto;
            padding: 0.375rem 0.75rem;
            border-radius: 8px;
            background: rgba(16, 185, 129, 0.15);
        }

        .performance-stat-trend.positive {
            color: #10b981;
        }

        .performance-stat-trend.negative {
            color: #ef4444;
            background: rgba(239, 68, 68, 0.15);
        }

        .performance-stat-divider {
            width: 1px;
            height: 50px;
            background: var(--border);
        }

        /* Performance Charts Grid - 2x2 */
        .performance-charts-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.5rem;
            margin-bottom: 3rem;
        }

        .performance-chart-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 1.75rem;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }

        .performance-chart-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--accent-cyan), #7c3aed);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .performance-chart-card:hover {
            border-color: var(--accent-cyan);
            box-shadow: 0 8px 24px rgba(6, 182, 212, 0.15);
            transform: translateY(-4px);
        }

        .performance-chart-card:hover::before {
            transform: scaleX(1);
        }

        .chart-card-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1.5rem;
        }

        .chart-card-title {
            font-size: 1.125rem;
            font-weight: 700;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .chart-card-title i {
            color: var(--accent-cyan);
            font-size: 1.25rem;
        }

        .chart-card-period {
            font-size: 0.8125rem;
            color: var(--text-secondary);
            background: var(--bg-secondary);
            padding: 0.375rem 0.75rem;
            border-radius: 8px;
            font-weight: 600;
        }

        .chart-visual {
            margin-bottom: 1.5rem;
        }

        .chart-bars {
            display: flex;
            align-items: flex-end;
            gap: 0.75rem;
            height: 180px;
            padding: 1rem 0;
        }

        .chart-bar {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
            position: relative;
        }

        .chart-bar-fill {
            width: 100%;
            background: linear-gradient(180deg, var(--accent-cyan) 0%, rgba(6, 182, 212, 0.6) 100%);
            border-radius: 8px 8px 0 0;
            position: relative;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
            height: 100%;
        }

        .chart-bar-fill.bandwidth {
            background: linear-gradient(180deg, #7c3aed 0%, rgba(124, 58, 237, 0.6) 100%);
        }

        .chart-bar-fill.cache {
            background: linear-gradient(180deg, #22c55e 0%, rgba(34, 197, 94, 0.6) 100%);
        }

        .chart-bar-fill::before {
            content: attr(data-value);
            position: absolute;
            top: -1.75rem;
            left: 50%;
            transform: translateX(-50%);
            font-size: 0.75rem;
            font-weight: 700;
            color: var(--text-primary);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .chart-bar:hover .chart-bar-fill::before,
        .chart-bar.active .chart-bar-fill::before {
            opacity: 1;
        }

        .chart-bar:hover .chart-bar-fill,
        .chart-bar.active .chart-bar-fill {
            transform: scaleY(1.05);
            box-shadow: 0 4px 12px rgba(6, 182, 212, 0.4);
        }

        .chart-bar-label {
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .chart-footer {
            display: flex;
            justify-content: space-around;
            padding-top: 1rem;
            border-top: 1px solid var(--border);
        }

        .chart-stat {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.375rem;
        }

        .chart-stat-label {
            font-size: 0.8125rem;
            color: var(--text-secondary);
            font-weight: 500;
        }

        .chart-stat-value {
            font-size: 1.125rem;
            font-weight: 700;
            color: var(--text-primary);
        }

        .chart-stat-value.success {
            color: #22c55e;
        }

        .chart-stat-value.warning {
            color: #facc15;
        }

        /* Geographic Chart */
        .chart-visual.geographic {
            padding: 1rem 0;
        }

        .geo-region-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1rem;
        }

        .geo-region-item:last-child {
            margin-bottom: 0;
        }

        .geo-region-info {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            min-width: 160px;
        }

        .geo-region-flag {
            font-size: 1.5rem;
        }

        .geo-region-name {
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--text-primary);
        }

        .geo-region-bar {
            flex: 1;
            height: 24px;
            background: var(--bg-secondary);
            border-radius: 12px;
            overflow: hidden;
            position: relative;
        }

        .geo-region-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--accent-cyan), #7c3aed);
            border-radius: 12px;
            transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
        }

        .geo-region-fill::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            animation: slide 2s ease infinite;
        }

        @keyframes slide {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }

        .geo-region-value {
            font-size: 0.875rem;
            font-weight: 700;
            color: var(--text-primary);
            min-width: 45px;
            text-align: right;
        }

        /* Report Types Grid - 3x2 */
        .report-types-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
            margin-bottom: 3rem;
        }

        .report-type-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 1.75rem;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            flex-direction: column;
            position: relative;
            overflow: hidden;
        }

        .report-type-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at top right, rgba(6, 182, 212, 0.1) 0%, transparent 60%);
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        .report-type-card:hover {
            border-color: var(--accent-cyan);
            box-shadow: 0 8px 24px rgba(6, 182, 212, 0.2);
            transform: translateY(-6px);
        }

        .report-type-card:hover::before {
            opacity: 1;
        }

        .report-icon {
            width: 64px;
            height: 64px;
            background: linear-gradient(135deg, var(--accent-cyan), #7c3aed);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.25rem;
            font-size: 1.75rem;
            color: white;
            position: relative;
            z-index: 1;
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .report-type-card:hover .report-icon {
            transform: scale(1.1) rotate(5deg);
        }

        .report-title {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--text-primary);
            margin: 0 0 0.75rem 0;
            position: relative;
            z-index: 1;
        }

        .report-description {
            font-size: 0.9375rem;
            color: var(--text-secondary);
            line-height: 1.6;
            margin-bottom: 1.25rem;
            flex: 1;
            position: relative;
            z-index: 1;
        }

        .report-meta {
            display: flex;
            gap: 1rem;
            margin-bottom: 1.25rem;
            position: relative;
            z-index: 1;
        }

        .report-frequency,
        .report-format {
            font-size: 0.8125rem;
            color: var(--text-secondary);
            background: var(--bg-secondary);
            padding: 0.375rem 0.75rem;
            border-radius: 8px;
            display: flex;
            align-items: center;
            gap: 0.375rem;
            font-weight: 600;
        }

        .report-frequency i,
        .report-format i {
            color: var(--accent-cyan);
            font-size: 0.75rem;
        }

        .report-btn {
            width: 100%;
            padding: 0.875rem 1rem;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 12px;
            font-size: 0.9375rem;
            font-weight: 700;
            color: var(--text-primary);
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.625rem;
            position: relative;
            z-index: 1;
        }

        .report-btn:hover {
            background: var(--accent-cyan);
            border-color: var(--accent-cyan);
            color: var(--bg-primary);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
        }

        /* Slack Integration View */
        .slack-status-compact {
            display: flex;
            align-items: center;
            background: linear-gradient(135deg, var(--bg-card) 0%, rgba(124, 58, 237, 0.03) 100%);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 1.5rem 2rem;
            margin-bottom: 2rem;
            gap: 2rem;
            flex-wrap: wrap;
            position: relative;
            overflow: hidden;
        }

        .slack-status-compact::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, #7c3aed, #22c55e, #7c3aed);
            background-size: 200% 100%;
            animation: shimmer 3s ease infinite;
        }

        .slack-status-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            flex: 1;
            min-width: 180px;
        }

        .slack-status-item.connected {
            background: rgba(124, 58, 237, 0.08);
            padding: 1rem 1.5rem;
            border-radius: 12px;
            border: 1px solid rgba(124, 58, 237, 0.2);
        }

        .slack-status-icon {
            width: 48px;
            height: 48px;
            background: linear-gradient(135deg, #7c3aed, #a855f7);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: white;
        }

        .slack-status-item i {
            font-size: 1.75rem;
            color: var(--accent-cyan);
            opacity: 0.9;
        }

        .slack-status-data {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }

        .slack-status-value {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--text-primary);
            line-height: 1;
        }

        .slack-status-label {
            font-size: 0.875rem;
            color: var(--text-secondary);
            font-weight: 500;
        }

        .slack-status-badge {
            margin-left: auto;
            padding: 0.5rem;
            border-radius: 50%;
            font-size: 1.25rem;
        }

        .slack-status-badge.success {
            background: rgba(34, 197, 94, 0.15);
            color: #22c55e;
        }

        .slack-status-divider {
            width: 1px;
            height: 50px;
            background: var(--border);
        }

        /* Slack Channels Grid - 2x2 */
        .slack-channels-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.5rem;
            margin-bottom: 3rem;
        }

        .slack-channel-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 1.75rem;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .slack-channel-card:hover {
            border-color: var(--accent-cyan);
            box-shadow: 0 8px 24px rgba(6, 182, 212, 0.15);
            transform: translateY(-4px);
        }

        .slack-channel-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            margin-bottom: 1.25rem;
        }

        .slack-channel-info {
            display: flex;
            gap: 1rem;
            flex: 1;
        }

        .slack-channel-icon {
            width: 56px;
            height: 56px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            flex-shrink: 0;
            transition: transform 0.3s ease;
        }

        .slack-channel-card:hover .slack-channel-icon {
            transform: scale(1.1) rotate(-5deg);
        }

        .slack-channel-icon.alerts {
            background: rgba(239, 68, 68, 0.15);
            color: #ef4444;
        }

        .slack-channel-icon.reports {
            background: rgba(6, 182, 212, 0.15);
            color: #06b6d4;
        }

        .slack-channel-icon.deployments {
            background: rgba(124, 58, 237, 0.15);
            color: #7c3aed;
        }

        .slack-channel-icon.security {
            background: rgba(34, 197, 94, 0.15);
            color: #22c55e;
        }

        .slack-channel-name {
            font-size: 1.125rem;
            font-weight: 700;
            color: var(--text-primary);
            margin: 0 0 0.375rem 0;
        }

        .slack-channel-purpose {
            font-size: 0.875rem;
            color: var(--text-secondary);
            line-height: 1.4;
        }

        .slack-channel-toggle input[type="checkbox"] {
            width: 50px;
            height: 28px;
            appearance: none;
            background: var(--bg-secondary);
            border-radius: 14px;
            position: relative;
            cursor: pointer;
            transition: background 0.3s ease;
            border: 1px solid var(--border);
        }

        .slack-channel-toggle input[type="checkbox"]:checked {
            background: var(--accent-cyan);
            border-color: var(--accent-cyan);
        }

        .slack-channel-toggle input[type="checkbox"]::before {
            content: '';
            position: absolute;
            width: 22px;
            height: 22px;
            background: white;
            border-radius: 50%;
            top: 2px;
            left: 2px;
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        .slack-channel-toggle input[type="checkbox"]:checked::before {
            transform: translateX(22px);
        }

        .slack-channel-config {
            background: var(--bg-secondary);
            border-radius: 12px;
            padding: 1rem;
            margin-bottom: 1.25rem;
        }

        .config-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.625rem 0;
            border-bottom: 1px solid var(--border);
        }

        .config-row:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

        .config-row:first-child {
            padding-top: 0;
        }

        .config-label {
            font-size: 0.875rem;
            color: var(--text-secondary);
            font-weight: 500;
        }

        .config-value {
            font-size: 0.875rem;
            color: var(--text-primary);
            font-weight: 700;
        }

        .slack-channel-btn {
            width: 100%;
            padding: 0.875rem 1rem;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 12px;
            font-size: 0.9375rem;
            font-weight: 700;
            color: var(--text-primary);
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.625rem;
        }

        .slack-channel-btn:hover {
            background: var(--accent-cyan);
            border-color: var(--accent-cyan);
            color: var(--bg-primary);
            transform: translateY(-2px);
        }

        /* Slack Features Grid - 3x2 */
        .slack-features-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
            margin-bottom: 3rem;
        }

        .slack-feature-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 1.75rem;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            flex-direction: column;
            position: relative;
            overflow: hidden;
        }

        .slack-feature-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at top left, rgba(124, 58, 237, 0.1) 0%, transparent 60%);
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        .slack-feature-card:hover {
            border-color: #7c3aed;
            box-shadow: 0 8px 24px rgba(124, 58, 237, 0.2);
            transform: translateY(-6px);
        }

        .slack-feature-card:hover::before {
            opacity: 1;
        }

        .feature-icon-wrapper {
            margin-bottom: 1.25rem;
            position: relative;
            z-index: 1;
        }

        .feature-icon {
            width: 64px;
            height: 64px;
            background: linear-gradient(135deg, #7c3aed, #a855f7);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.75rem;
            color: white;
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .slack-feature-card:hover .feature-icon {
            transform: scale(1.1) rotate(-5deg);
        }

        .feature-title {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--text-primary);
            margin: 0 0 0.75rem 0;
            position: relative;
            z-index: 1;
        }

        .feature-description {
            font-size: 0.9375rem;
            color: var(--text-secondary);
            line-height: 1.6;
            margin-bottom: 1.25rem;
            flex: 1;
            position: relative;
            z-index: 1;
        }

        .feature-examples {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-bottom: 1.25rem;
            position: relative;
            z-index: 1;
        }

        .feature-examples code {
            background: var(--bg-secondary);
            color: var(--accent-cyan);
            padding: 0.375rem 0.75rem;
            border-radius: 8px;
            font-size: 0.8125rem;
            font-weight: 600;
            font-family: 'Courier New', monospace;
            border: 1px solid var(--border);
        }

        .example-badge {
            background: rgba(124, 58, 237, 0.15);
            color: #7c3aed;
            padding: 0.375rem 0.75rem;
            border-radius: 8px;
            font-size: 0.8125rem;
            font-weight: 700;
            border: 1px solid rgba(124, 58, 237, 0.3);
        }

        .feature-btn {
            width: 100%;
            padding: 0.875rem 1rem;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 12px;
            font-size: 0.9375rem;
            font-weight: 700;
            color: var(--text-primary);
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.625rem;
            position: relative;
            z-index: 1;
        }

        .feature-btn:hover {
            background: linear-gradient(135deg, #7c3aed, #a855f7);
            border-color: #7c3aed;
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
        }

        /* Slack Activity Section */
        .slack-activity-section {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 1.75rem;
        }

        .activity-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1.5rem;
        }

        .activity-timeline {
            position: relative;
            padding-left: 2.5rem;
        }

        .activity-timeline::before {
            content: '';
            position: absolute;
            left: 1rem;
            top: 0;
            bottom: 0;
            width: 2px;
            background: var(--border);
        }

        .activity-item {
            position: relative;
            margin-bottom: 1.5rem;
            display: flex;
            gap: 1rem;
        }

        .activity-item:last-child {
            margin-bottom: 0;
        }

        .activity-icon {
            position: absolute;
            left: -2rem;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.875rem;
            background: var(--bg-card);
            border: 2px solid var(--accent-cyan);
            z-index: 1;
        }

        .activity-icon.critical {
            background: #ef4444;
            border-color: #ef4444;
            color: white;
            box-shadow: 0 0 12px rgba(239, 68, 68, 0.4);
        }

        .activity-icon.success {
            background: #22c55e;
            border-color: #22c55e;
            color: white;
        }

        .activity-icon.info {
            background: #06b6d4;
            border-color: #06b6d4;
            color: white;
        }

        .activity-content {
            flex: 1;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 1rem;
        }

        .activity-header-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 0.5rem;
        }

        .activity-channel {
            font-weight: 700;
            color: var(--text-primary);
            font-size: 0.9375rem;
        }

        .activity-time {
            font-size: 0.8125rem;
            color: var(--text-secondary);
        }

        .activity-message {
            font-size: 0.875rem;
            color: var(--text-secondary);
            line-height: 1.5;
            margin: 0;
        }

        .alert-stat-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            flex: 1;
            min-width: 180px;
        }

        .alert-stat-item i {
            font-size: 1.75rem;
            color: var(--accent-cyan);
            opacity: 0.8;
        }

        .alert-stat-data {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }

        .alert-stat-value {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--text-primary);
        }

        .alert-stat-label {
            font-size: 0.875rem;
            color: var(--text-secondary);
        }

        .alert-stat-trend {
            font-size: 0.875rem;
            font-weight: 600;
            margin-left: auto;
        }

        .alert-stat-trend.positive {
            color: #10b981;
        }

        .alert-stat-trend.negative {
            color: #ef4444;
        }

        .alert-stat-divider {
            width: 1px;
            height: 40px;
            background: var(--border);
        }

        .alert-rules-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 1.25rem;
            margin-bottom: 2rem;
        }

        .alert-rules-list {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .alert-rule-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 1.5rem;
            transition: all 0.3s ease;
        }

        .alert-rule-card:hover {
            border-color: var(--accent-cyan);
            box-shadow: 0 4px 12px rgba(6, 182, 212, 0.1);
            transform: translateY(-2px);
        }

        .alert-rule-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            margin-bottom: 1rem;
        }

        .alert-rule-title-section {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            flex: 1;
        }

        .alert-severity-badge {
            padding: 0.375rem 0.875rem;
            border-radius: 8px;
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .alert-severity-badge.critical {
            background: rgba(239, 68, 68, 0.15);
            color: #ef4444;
            border: 1px solid rgba(239, 68, 68, 0.3);
        }

        .alert-severity-badge.high {
            background: rgba(251, 146, 60, 0.15);
            color: #fb923c;
            border: 1px solid rgba(251, 146, 60, 0.3);
        }

        .alert-severity-badge.medium {
            background: rgba(250, 204, 21, 0.15);
            color: #facc15;
            border: 1px solid rgba(250, 204, 21, 0.3);
        }

        .alert-severity-badge.low {
            background: rgba(34, 197, 94, 0.15);
            color: #22c55e;
            border: 1px solid rgba(34, 197, 94, 0.3);
        }

        .alert-rule-title {
            font-size: 1.125rem;
            font-weight: 600;
            color: var(--text-primary);
            margin: 0;
        }

        .alert-rule-toggle {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .alert-rule-toggle input[type="checkbox"] {
            width: 44px;
            height: 24px;
            appearance: none;
            background: var(--bg-secondary);
            border-radius: 12px;
            position: relative;
            cursor: pointer;
            transition: background 0.3s ease;
            border: 1px solid var(--border);
        }

        .alert-rule-toggle input[type="checkbox"]:checked {
            background: var(--accent-cyan);
            border-color: var(--accent-cyan);
        }

        .alert-rule-toggle input[type="checkbox"]::before {
            content: '';
            position: absolute;
            width: 18px;
            height: 18px;
            background: white;
            border-radius: 50%;
            top: 2px;
            left: 2px;
            transition: transform 0.3s ease;
        }

        .alert-rule-toggle input[type="checkbox"]:checked::before {
            transform: translateX(20px);
        }

        .alert-rule-description {
            font-size: 0.9375rem;
            color: var(--text-secondary);
            margin-bottom: 1.25rem;
            line-height: 1.6;
        }

        .alert-conditions {
            background: var(--bg-secondary);
            border-radius: 12px;
            padding: 1rem;
            margin-bottom: 1rem;
        }

        .alert-conditions-title {
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 0.75rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .alert-conditions-title i {
            color: var(--accent-cyan);
            font-size: 0.875rem;
        }

        .alert-condition-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.875rem;
            color: var(--text-secondary);
            margin-bottom: 0.5rem;
        }

        .alert-condition-item:last-child {
            margin-bottom: 0;
        }

        .alert-condition-item i {
            color: var(--accent-cyan);
            font-size: 0.75rem;
            opacity: 0.6;
        }

        .alert-rule-actions {
            display: flex;
            gap: 0.75rem;
        }

        .alert-rule-btn {
            flex: 1;
            padding: 0.625rem 1rem;
            border-radius: 10px;
            font-size: 0.875rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }

        .alert-rule-btn.primary {
            background: var(--accent-cyan);
            color: var(--bg-primary);
        }

        .alert-rule-btn.primary:hover {
            background: #0891b2;
            transform: translateY(-1px);
        }

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

        .alert-rule-btn.secondary:hover {
            background: var(--bg-card);
            border-color: var(--accent-cyan);
        }

        .alert-history-section {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 1.75rem;
        }

        .alert-history-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1.5rem;
        }

        .alert-history-title {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .alert-history-title i {
            color: var(--accent-cyan);
        }

        .alert-history-filter {
            padding: 0.5rem 1rem;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 10px;
            color: var(--text-primary);
            font-size: 0.875rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .alert-history-filter:hover {
            border-color: var(--accent-cyan);
            background: var(--bg-card);
        }

        .alert-history-timeline {
            position: relative;
            padding-left: 2rem;
        }

        .alert-history-timeline::before {
            content: '';
            position: absolute;
            left: 0.5rem;
            top: 0;
            bottom: 0;
            width: 2px;
            background: var(--border);
        }

        .alert-history-item {
            position: relative;
            margin-bottom: 1.5rem;
            padding-left: 1.5rem;
        }

        .alert-history-item:last-child {
            margin-bottom: 0;
        }

        .alert-history-item::before {
            content: '';
            position: absolute;
            left: -1.375rem;
            top: 0.25rem;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: var(--bg-card);
            border: 2px solid var(--accent-cyan);
        }

        .alert-history-item.critical::before {
            border-color: #ef4444;
            background: #ef4444;
            box-shadow: 0 0 12px rgba(239, 68, 68, 0.4);
        }

        .alert-history-item.high::before {
            border-color: #fb923c;
            background: #fb923c;
        }

        .alert-history-item.medium::before {
            border-color: #facc15;
            background: #facc15;
        }

        .alert-history-content {
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 1rem;
        }

        .alert-history-header-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 0.5rem;
        }

        .alert-history-name {
            font-weight: 600;
            color: var(--text-primary);
            font-size: 0.9375rem;
        }

        .alert-history-time {
            font-size: 0.8125rem;
            color: var(--text-secondary);
        }

        .alert-history-message {
            font-size: 0.875rem;
            color: var(--text-secondary);
            line-height: 1.5;
        }

        /* Notification Settings View */
        .notification-channels {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1.25rem;
            margin-bottom: 2rem;
        }

        .notification-channel-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 1.5rem;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .notification-channel-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--accent-cyan);
            transform: scaleX(0);
            transition: transform 0.3s ease;
        }

        .notification-channel-card:hover {
            border-color: var(--accent-cyan);
            box-shadow: 0 4px 12px rgba(6, 182, 212, 0.1);
        }

        .notification-channel-card:hover::before {
            transform: scaleX(1);
        }

        .notification-channel-card.email::before {
            background: #3b82f6;
        }

        .notification-channel-card.slack::before {
            background: #7c3aed;
        }

        .notification-channel-card.sms::before {
            background: #22c55e;
        }

        .notification-channel-card.webhook::before {
            background: #f59e0b;
        }

        .notification-channel-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1.25rem;
        }

        .notification-channel-info {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .notification-channel-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
        }

        .notification-channel-card.email .notification-channel-icon {
            background: rgba(59, 130, 246, 0.15);
            color: #3b82f6;
        }

        .notification-channel-card.slack .notification-channel-icon {
            background: rgba(124, 58, 237, 0.15);
            color: #7c3aed;
        }

        .notification-channel-card.sms .notification-channel-icon {
            background: rgba(34, 197, 94, 0.15);
            color: #22c55e;
        }

        .notification-channel-card.webhook .notification-channel-icon {
            background: rgba(245, 158, 11, 0.15);
            color: #f59e0b;
        }

        .notification-channel-title {
            font-size: 1.125rem;
            font-weight: 600;
            color: var(--text-primary);
            margin: 0 0 0.25rem 0;
        }

        .notification-channel-status {
            font-size: 0.8125rem;
            color: var(--text-secondary);
        }

        .notification-channel-status.active {
            color: #22c55e;
        }

        .notification-channel-toggle input[type="checkbox"] {
            width: 44px;
            height: 24px;
            appearance: none;
            background: var(--bg-secondary);
            border-radius: 12px;
            position: relative;
            cursor: pointer;
            transition: background 0.3s ease;
            border: 1px solid var(--border);
        }

        .notification-channel-toggle input[type="checkbox"]:checked {
            background: var(--accent-cyan);
            border-color: var(--accent-cyan);
        }

        .notification-channel-toggle input[type="checkbox"]::before {
            content: '';
            position: absolute;
            width: 18px;
            height: 18px;
            background: white;
            border-radius: 50%;
            top: 2px;
            left: 2px;
            transition: transform 0.3s ease;
        }

        .notification-channel-toggle input[type="checkbox"]:checked::before {
            transform: translateX(20px);
        }

        .notification-channel-config {
            background: var(--bg-secondary);
            border-radius: 12px;
            padding: 1rem;
            margin-bottom: 1rem;
        }

        .notification-config-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.625rem 0;
            border-bottom: 1px solid var(--border);
        }

        .notification-config-item:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

        .notification-config-item:first-child {
            padding-top: 0;
        }

        .notification-config-label {
            font-size: 0.875rem;
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .notification-config-label i {
            color: var(--accent-cyan);
            font-size: 0.875rem;
        }

        .notification-config-value {
            font-size: 0.875rem;
            color: var(--text-primary);
            font-weight: 500;
        }

        .notification-channel-btn {
            width: 100%;
            padding: 0.75rem 1rem;
            border-radius: 10px;
            font-size: 0.875rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 1px solid var(--border);
            background: var(--bg-secondary);
            color: var(--text-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }

        .notification-channel-btn:hover {
            background: var(--bg-card);
            border-color: var(--accent-cyan);
            color: var(--accent-cyan);
        }

        .quiet-hours-section {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 1.75rem;
            margin-bottom: 2rem;
        }

        .quiet-hours-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1.5rem;
        }

        .quiet-hours-title {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .quiet-hours-title i {
            color: var(--accent-cyan);
        }

        .quiet-hours-config {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.25rem;
        }

        .quiet-hours-item {
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 1.25rem;
        }

        .quiet-hours-item-label {
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 0.75rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .quiet-hours-item-label i {
            color: var(--accent-cyan);
            font-size: 0.875rem;
        }

        .quiet-hours-time-picker {
            display: flex;
            gap: 0.75rem;
            align-items: center;
        }

        .quiet-hours-time-input {
            flex: 1;
            padding: 0.75rem;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 10px;
            color: var(--text-primary);
            font-size: 0.9375rem;
            font-weight: 500;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .quiet-hours-time-input:hover {
            border-color: var(--accent-cyan);
        }

        .quiet-hours-days {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
        }

        .quiet-hours-day {
            flex: 1;
            min-width: 40px;
            padding: 0.5rem 0.25rem;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 8px;
            text-align: center;
            font-size: 0.8125rem;
            font-weight: 600;
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .quiet-hours-day:hover {
            border-color: var(--accent-cyan);
            color: var(--text-primary);
        }

        .quiet-hours-day.active {
            background: var(--accent-cyan);
            border-color: var(--accent-cyan);
            color: var(--bg-primary);
        }

        .notification-preferences {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 1.75rem;
        }

        .notification-preferences-header {
            margin-bottom: 1.5rem;
        }

        .notification-preferences-title {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 0.5rem;
        }

        .notification-preferences-title i {
            color: var(--accent-cyan);
        }

        .notification-preferences-subtitle {
            font-size: 0.9375rem;
            color: var(--text-secondary);
        }

        .preference-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1.25rem;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 12px;
            margin-bottom: 1rem;
            transition: all 0.3s ease;
        }

        .preference-item:hover {
            border-color: var(--accent-cyan);
            background: var(--bg-card);
        }

        .preference-item:last-child {
            margin-bottom: 0;
        }

        .preference-info {
            flex: 1;
        }

        .preference-label {
            font-size: 1rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 0.25rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .preference-label i {
            color: var(--accent-cyan);
        }

        .preference-description {
            font-size: 0.875rem;
            color: var(--text-secondary);
        }

        .preference-toggle input[type="checkbox"] {
            width: 50px;
            height: 28px;
            appearance: none;
            background: var(--bg-secondary);
            border-radius: 14px;
            position: relative;
            cursor: pointer;
            transition: background 0.3s ease;
            border: 1px solid var(--border);
        }

        .preference-toggle input[type="checkbox"]:checked {
            background: var(--accent-cyan);
            border-color: var(--accent-cyan);
        }

        .preference-toggle input[type="checkbox"]::before {
            content: '';
            position: absolute;
            width: 22px;
            height: 22px;
            background: white;
            border-radius: 50%;
            top: 2px;
            left: 2px;
            transition: transform 0.3s ease;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        .preference-toggle input[type="checkbox"]:checked::before {
            transform: translateX(22px);
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .progress-bar-fill {
            transition: width 0.5s ease-in-out;
        }
        .upload-preview {
            max-height: 150px;
            object-fit: contain;
        }
        .confetti {
            position: fixed;
            width: 10px;
            height: 10px;
            background: #10b981;
            animation: confetti-fall 3s linear forwards;
        }
        @keyframes confetti-fall {
            to {
                transform: translateY(100vh) rotate(360deg);
                opacity: 0;
            }
        }
        .animate-slide-in {
            animation: slideIn 0.3s ease-out;
        }
        @keyframes slideIn {
            from {
                transform: translateX(100%);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }
        /* ========== TAILWIND UTILITY CLASSES FOR WIZARD ========== */
        /* Layout */
        .block { display: block; }
        .flex { display: flex; }
        .grid { display: grid; }
        .hidden { display: none; }
        
        /* Flexbox */
        .items-center { align-items: center; }
        .justify-between { justify-content: space-between; }
        .justify-center { justify-content: center; }
        .flex-1 { flex: 1 1 0%; }
        .flex-wrap { flex-wrap: wrap; }
        
        /* Grid */
        .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
        .gap-2 { gap: 0.5rem; }
        .gap-3 { gap: 0.75rem; }
        .gap-4 { gap: 1rem; }
        .gap-6 { gap: 1.5rem; }
        .gap-8 { gap: 2rem; }
        
        /* Spacing */
        .p-1 { padding: 0.25rem; }
        .p-2 { padding: 0.5rem; }
        .p-3 { padding: 0.75rem; }
        .p-4 { padding: 1rem; }
        .p-6 { padding: 1.5rem; }
        .p-8 { padding: 2rem; }
        .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
        .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
        .px-4 { padding-left: 1rem; padding-right: 1rem; }
        .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
        .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
        .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
        .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
        .py-4 { padding-top: 1rem; padding-bottom: 1rem; }
        .m-1 { margin: 0.25rem; }
        .m-2 { margin: 0.5rem; }
        .m-3 { margin: 0.75rem; }
        .m-4 { margin: 1rem; }
        .mx-auto { margin-left: auto; margin-right: auto; }
        .mb-1 { margin-bottom: 0.25rem; }
        .mb-2 { margin-bottom: 0.5rem; }
        .mb-3 { margin-bottom: 0.75rem; }
        .mb-4 { margin-bottom: 1rem; }
        .mb-6 { margin-bottom: 1.5rem; }
        .mb-8 { margin-bottom: 2rem; }
        .mt-2 { margin-top: 0.5rem; }
        .mt-3 { margin-top: 0.75rem; }
        .mt-4 { margin-top: 1rem; }
        .mt-6 { margin-top: 1.5rem; }
        .space-y-3 > * + * { margin-top: 0.75rem; }
        .space-y-4 > * + * { margin-top: 1rem; }
        .space-x-2 > * + * { margin-left: 0.5rem; }
        .space-x-3 > * + * { margin-left: 0.75rem; }
        .space-x-4 > * + * { margin-left: 1rem; }
        
        /* Sizing */
        .w-8 { width: 2rem; }
        .w-12 { width: 3rem; }
        .w-full { width: 100%; }
        .h-8 { height: 2rem; }
        .h-12 { height: 3rem; }
        .max-w-md { max-width: 28rem; }
        .max-w-4xl { max-width: 56rem; }
        
        /* Typography */
        .text-xs { font-size: 0.75rem; line-height: 1rem; }
        .text-sm { font-size: 0.875rem; line-height: 1.25rem; }
        .text-base { font-size: 1rem; line-height: 1.5rem; }
        .text-lg { font-size: 1.125rem; line-height: 1.75rem; }
        .text-xl { font-size: 1.25rem; line-height: 1.75rem; }
        .text-2xl { font-size: 1.5rem; line-height: 2rem; }
        .text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
        .font-medium { font-weight: 500; }
        .font-semibold { font-weight: 600; }
        .font-bold { font-weight: 700; }
        .text-center { text-align: center; }
        .text-right { text-align: right; }
        
        /* Colors */
        .text-white { color: #ffffff; }
        .text-gray-300 { color: #d1d5db; }
        .text-gray-400 { color: #9ca3af; }
        .text-gray-500 { color: #6b7280; }
        .text-green-400 { color: #4ade80; }
        .text-yellow-400 { color: #facc15; }
        .text-indigo-400 { color: #818cf8; }
        .text-indigo-500 { color: #6366f1; }
        .bg-gray-700 { background-color: #374151; }
        .bg-gray-800 { background-color: #1f2937; }
        .bg-gray-900 { background-color: #111827; }
        .bg-gray-900\/50 { background-color: rgba(17, 24, 39, 0.5); }
        .bg-indigo-600 { background-color: #4f46e5; }
        .bg-green-500 { background-color: #10b981; }
        
        /* Borders */
        .border { border-width: 1px; }
        .border-2 { border-width: 2px; }
        .border-dashed { border-style: dashed; }
        .border-gray-700 { border-color: #374151; }
        .border-gray-800 { border-color: #1f2937; }
        .border-indigo-500 { border-color: #6366f1; }
        .rounded { border-radius: 0.25rem; }
        .rounded-lg { border-radius: 0.5rem; }
        .rounded-xl { border-radius: 0.75rem; }
        .rounded-2xl { border-radius: 1rem; }
        .rounded-full { border-radius: 9999px; }
        
        /* Effects */
        .backdrop-blur-sm { backdrop-filter: blur(4px); }
        .transition-colors { transition-property: background-color, border-color, color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
        .cursor-pointer { cursor: pointer; }
        .hover\:border-indigo-500:hover { border-color: #6366f1; }
        
        /* Interactive */
        .cursor-not-allowed { cursor: not-allowed; }
        .opacity-50 { opacity: 0.5; }

        /* ========== DARK MODE ========== */
        body.dark-mode {
            --bg-primary: #000000;
            --bg-secondary: #0a0a0a;
            --bg-card: rgba(15, 15, 15, 0.9);
            --text-primary: #ffffff;
            --text-secondary: #a0a0a0;
        }

        .dark-mode-toggle {
            width: 40px;
            height: 40px;
            background: rgba(100, 255, 218, 0.1);
            border: 1px solid var(--border);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all var(--transition-base);
            margin-right: 0.75rem;
        }

        .dark-mode-toggle:hover {
            background: rgba(100, 255, 218, 0.2);
            border-color: var(--accent-cyan);
        }

        .dark-mode-toggle i {
            color: var(--accent-cyan);
            font-size: 1.1rem;
        }

        /* ========== SECONDARY NAVIGATION ========== */
        .secondary-nav {
            background: rgba(10, 14, 39, 0.95);
            backdrop-filter: blur(20px);
            border-bottom: 1px solid var(--border);
            padding: 0 2rem;
            display: none;
            overflow-x: auto;
        }

        .secondary-nav.active {
            display: block;
        }

        .secondary-nav-tabs {
            display: flex;
            gap: 0;
        }

        .secondary-nav-tab {
            position: relative;
            padding: 0.75rem 1.25rem;
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 0.875rem;
            font-weight: 500;
            cursor: pointer;
            transition: all var(--transition-base);
            white-space: nowrap;
            font-family: inherit;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .secondary-nav-tab:hover {
            color: var(--text-primary);
            background: rgba(255, 255, 255, 0.03);
        }

        .secondary-nav-tab.active {
            color: var(--accent-cyan);
        }

        .secondary-nav-tab.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: var(--accent-cyan);
        }

        .secondary-nav-tab i {
            font-size: 0.875rem;
        }


        /* ========== COMMAND PALETTE ========== */
        .command-palette-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(8px);
            z-index: 9999;
            display: none;
            align-items: flex-start;
            justify-content: center;
            padding-top: 10vh;
        }

        .command-palette-overlay.active {
            display: flex;
        }

        .command-palette {
            width: 640px;
            max-width: 90vw;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 16px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
            overflow: hidden;
            animation: commandPaletteIn 0.2s ease;
        }

        @keyframes commandPaletteIn {
            from { opacity: 0; transform: scale(0.95) translateY(-20px); }
            to { opacity: 1; transform: scale(1) translateY(0); }
        }

        .command-palette-input {
            width: 100%;
            padding: 1.25rem 1.5rem;
            background: none;
            border: none;
            border-bottom: 1px solid var(--border);
            color: var(--text-primary);
            font-size: 1.1rem;
            font-family: inherit;
        }

        .command-palette-input:focus {
            outline: none;
            border-bottom-color: var(--accent-cyan);
            box-shadow: 0 1px 0 0 var(--accent-cyan);
        }

        .command-palette-input::placeholder {
            color: var(--text-secondary);
        }

        .command-palette-results {
            max-height: 400px;
            overflow-y: auto;
            padding: 0.5rem;
        }

        .command-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 0.875rem 1rem;
            border-radius: 8px;
            cursor: pointer;
            transition: all var(--transition-base);
        }

        .command-item:hover,
        .command-item.selected {
            background: rgba(100, 255, 218, 0.1);
        }

        .command-item-icon {
            width: 36px;
            height: 36px;
            min-width: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(100, 255, 218, 0.1);
            border-radius: 8px;
            color: var(--accent-cyan);
        }

        .command-item-content {
            flex: 1;
        }

        .command-item-title {
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 0.25rem;
        }

        .command-item-description {
            font-size: 0.75rem;
            color: var(--text-secondary);
        }

        .command-item-shortcut {
            padding: 0.25rem 0.5rem;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 4px;
            font-size: 0.7rem;
            font-weight: 600;
            color: var(--text-secondary);
        }

        /* ========== KEYBOARD SHORTCUTS PANEL ========== */
        .shortcuts-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(8px);
            z-index: 9998;
            display: none;
            align-items: center;
            justify-content: center;
        }

        .shortcuts-overlay.active {
            display: flex;
        }

        .shortcuts-panel {
            width: 800px;
            max-width: 90vw;
            max-height: 80vh;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 16px;
            overflow: hidden;
            animation: fadeIn 0.3s ease;
        }

        .shortcuts-header {
            padding: 1.5rem;
            background: rgba(100, 255, 218, 0.05);
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .shortcuts-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--accent-cyan);
        }

        .shortcuts-body {
            padding: 1.5rem;
            max-height: calc(80vh - 100px);
            overflow-y: auto;
        }

        .shortcuts-section {
            margin-bottom: 2rem;
        }

        .shortcuts-section-title {
            font-size: 0.875rem;
            font-weight: 700;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 1rem;
        }

        .shortcut-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.75rem 1rem;
            background: rgba(255, 255, 255, 0.02);
            border-radius: 8px;
            margin-bottom: 0.5rem;
        }

        .shortcut-description {
            font-size: 0.9rem;
            color: var(--text-primary);
        }

        .shortcut-keys {
            display: flex;
            gap: 0.5rem;
        }

        .shortcut-key {
            padding: 0.375rem 0.75rem;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid var(--border);
            border-radius: 6px;
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--text-secondary);
            font-family: 'Courier New', monospace;
        }

        /* ========== FAVORITES / PINNED VIEWS ========== */
        .favorites-bar {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 2rem;
            background: rgba(100, 255, 218, 0.03);
            border-bottom: 1px solid var(--border);
        }

        .favorites-label {
            font-size: 0.75rem;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-right: 0.5rem;
        }

        .favorite-item {
            display: flex;
            align-items: center;
            gap: 0.375rem;
            padding: 0.375rem 0.75rem;
            background: rgba(100, 255, 218, 0.1);
            border: 1px solid rgba(100, 255, 218, 0.2);
            border-radius: 6px;
            font-size: 0.8rem;
            color: var(--text-primary);
            cursor: pointer;
            transition: all var(--transition-base);
        }

        .favorite-item:hover {
            background: rgba(100, 255, 218, 0.15);
            border-color: var(--accent-cyan);
        }

        .favorite-item i {
            font-size: 0.75rem;
        }

        .pin-button {
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid var(--border);
            border-radius: 6px;
            cursor: pointer;
            transition: all var(--transition-base);
            margin-left: auto;
        }

        .pin-button:hover {
            background: rgba(100, 255, 218, 0.1);
            border-color: var(--accent-cyan);
        }

        .pin-button.pinned {
            background: rgba(100, 255, 218, 0.2);
            border-color: var(--accent-cyan);
            color: var(--accent-cyan);
        }

        /* ========== GEO DEPLOY TABS ========== */
        .geo-tabs-container {
            margin-bottom: 2rem;
            border-bottom: 2px solid var(--border);
        }

        .geo-tabs {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
            overflow-x: auto;
            padding-bottom: 0.5rem;
        }

        .geo-tab {
            padding: 0.75rem 1.5rem;
            background: transparent;
            border: none;
            border-bottom: 3px solid transparent;
            color: var(--text-secondary);
            font-weight: 600;
            font-size: 0.875rem;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            white-space: nowrap;
        }

        .geo-tab:hover {
            color: var(--text-primary);
            background: rgba(255, 255, 255, 0.05);
            border-radius: 8px 8px 0 0;
        }

        .geo-tab.active {
            color: #6366f1;
            border-bottom-color: #6366f1;
            background: rgba(99, 102, 241, 0.1);
            border-radius: 8px 8px 0 0;
        }

        .geo-tab-content {
            display: none;
            animation: fadeIn 0.3s ease-in-out;
        }

        .geo-tab-content.active {
            display: block;
        }

        /* ========== MONITORING DASHBOARD ========== */
        .monitoring-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

        .monitoring-card {
            background: var(--bg-card);
            backdrop-filter: blur(10px);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 1.5rem;
        }

        .monitoring-card-header {
            display: flex;
            align-items: center;
            justify-content: between;
            margin-bottom: 1rem;
        }

        .monitoring-card-title {
            font-size: 1rem;
            font-weight: 600;
            color: var(--text-primary);
        }

        .monitoring-metric {
            font-size: 2rem;
            font-weight: 700;
            color: var(--accent-cyan);
            margin-bottom: 0.5rem;
        }

        .monitoring-trend {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.875rem;
        }

        .monitoring-trend.positive {
            color: var(--success);
        }

        .monitoring-trend.negative {
            color: var(--error);
        }

        /* ========== INCIDENT MANAGEMENT ========== */
        .incidents-list {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .incident-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-left: 4px solid;
            border-radius: 12px;
            padding: 1.5rem;
            transition: all var(--transition-base);
        }

        .incident-card:hover {
            transform: translateX(4px);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
        }

        .incident-card.critical {
            border-left-color: var(--error);
        }

        .incident-card.warning {
            border-left-color: var(--warning);
        }

        .incident-card.resolved {
            border-left-color: var(--success);
        }

        .incident-header {
            display: flex;
            align-items: start;
            justify-content: space-between;
            margin-bottom: 1rem;
        }

        .incident-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 0.5rem;
        }

        .incident-status-badge {
            padding: 0.375rem 0.75rem;
            border-radius: 6px;
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
        }

        .incident-status-badge.critical {
            background: rgba(239, 68, 68, 0.2);
            color: var(--error);
        }

        .incident-status-badge.warning {
            background: rgba(245, 158, 11, 0.2);
            color: var(--warning);
        }

        .incident-status-badge.resolved {
            background: rgba(16, 185, 129, 0.2);
            color: var(--success);
        }

        /* ========== ANALYTICS CHARTS ========== */
        .analytics-section {
            margin-bottom: 2rem;
        }

        .chart-container {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 1.5rem;
            height: 350px;
        }

        .chart-placeholder {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(100, 255, 218, 0.05);
            border-radius: 8px;
            color: var(--text-secondary);
            font-size: 0.875rem;
        }

        /* ========== BUDGET FORECASTING ========== */
        .forecast-card {
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(0, 208, 132, 0.1));
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 2rem;
            margin-bottom: 1.5rem;
        }

        .forecast-amount {
            font-size: 3rem;
            font-weight: 700;
            background: linear-gradient(90deg, var(--primary), var(--accent));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 0.5rem;
        }

        .forecast-label {
            font-size: 1rem;
            color: var(--text-secondary);
        }

        .budget-alert {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1rem 1.5rem;
            background: rgba(245, 158, 11, 0.1);
            border: 1px solid rgba(245, 158, 11, 0.3);
            border-radius: 12px;
            margin-bottom: 1rem;
        }

        .budget-alert-icon {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(245, 158, 11, 0.2);
            border-radius: 8px;
            color: var(--warning);
        }

        .budget-alert-content {
            flex: 1;
        }

        .budget-alert-title {
            font-weight: 600;
            color: var(--warning);
            margin-bottom: 0.25rem;
        }

        .budget-alert-text {
            font-size: 0.875rem;
            color: var(--text-secondary);
        }

        /* ========== RECOMMENDATIONS ENGINE ========== */
        .recommendation-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 1.5rem;
            margin-bottom: 1rem;
            position: relative;
            overflow: hidden;
        }

        .recommendation-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: linear-gradient(180deg, var(--success), var(--accent));
        }

        .recommendation-priority {
            display: inline-block;
            padding: 0.25rem 0.75rem;
            border-radius: 4px;
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            margin-bottom: 0.75rem;
        }

        .recommendation-priority.high {
            background: rgba(239, 68, 68, 0.2);
            color: var(--error);
        }

        .recommendation-priority.medium {
            background: rgba(245, 158, 11, 0.2);
            color: var(--warning);
        }

        .recommendation-priority.low {
            background: rgba(16, 185, 129, 0.2);
            color: var(--success);
        }

        .recommendation-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 0.75rem;
        }

        .recommendation-impact {
            display: flex;
            gap: 1.5rem;
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px solid var(--border-solid);
        }

        .recommendation-impact-item {
            display: flex;
            flex-direction: column;
        }

        .recommendation-impact-label {
            font-size: 0.75rem;
            color: var(--text-secondary);
            margin-bottom: 0.25rem;
        }

        .recommendation-impact-value {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--accent-cyan);
        }

        /* ========== STATUS PAGE GENERATOR ========== */
        .status-page-preview {
            background: white;
            border-radius: 12px;
            padding: 2rem;
            margin-top: 1.5rem;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }

        .status-indicator-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1rem;
            background: #f9fafb;
            border-radius: 8px;
            margin-bottom: 0.75rem;
        }

        .status-service-name {
            font-weight: 600;
            color: #1f2937;
        }

        .status-badge {
            padding: 0.25rem 0.75rem;
            border-radius: 12px;
            font-size: 0.75rem;
            font-weight: 600;
        }

        .status-badge.operational {
            background: #d1fae5;
            color: #065f46;
        }

        .status-badge.degraded {
            background: #fed7aa;
            color: #92400e;
        }

        .status-badge.down {
            background: #fee2e2;
            color: #991b1b;
        }

        /* ========== ONBOARDING CHECKLIST ========== */
        /* ========== ONBOARDING REDESIGN ========== */
        .ob-header-label {
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: #10B981;
            margin-bottom: 0.25rem;
        }
        .ob-header-title {
            font-size: 2.25rem;
            font-weight: 800;
            color: var(--text-primary);
            line-height: 1.15;
            margin-bottom: 0.25rem;
        }
        .ob-header-sub {
            font-size: 0.95rem;
            color: var(--text-secondary);
            margin-bottom: 1.75rem;
        }

        .onboarding-progress {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 1.25rem 1.5rem;
            margin-bottom: 1.5rem;
        }
        .ob-progress-header {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            margin-bottom: 0.75rem;
        }
        .ob-progress-left {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--text-primary);
        }
        .ob-progress-right {
            font-size: 0.85rem;
            color: var(--text-secondary);
        }
        .progress-bar-container {
            width: 100%;
            height: 10px;
            background: rgba(255, 255, 255, 0.08);
            border-radius: 5px;
            overflow: visible;
            position: relative;
            margin-bottom: 0.5rem;
        }
        .progress-bar-fill {
            height: 100%;
            background: linear-gradient(90deg, #10B981, #14b8a6);
            border-radius: 5px;
            transition: width 0.5s ease;
            position: relative;
        }
        .progress-bar-fill::after {
            content: '';
            position: absolute;
            right: -5px;
            top: -3px;
            width: 16px;
            height: 16px;
            background: #14b8a6;
            border-radius: 50%;
            border: 3px solid var(--bg-card);
            box-shadow: 0 0 0 2px rgba(20,184,166,0.3);
        }
        .ob-progress-time {
            font-size: 0.8rem;
            color: var(--text-secondary);
        }
        .ob-progress-time i { margin-right: 4px; }

        /* Step cards */
        .ob-step {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
            padding: 1.25rem 1.5rem;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 12px;
            margin-bottom: 0.75rem;
            transition: all 0.25s ease;
            border-left: 3px solid transparent;
        }
        .ob-step:hover { border-color: rgba(255,255,255,0.1); }

        /* Number circle */
        .ob-step-num {
            width: 40px;
            height: 40px;
            min-width: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
            font-weight: 700;
            border: 2px solid var(--border);
            color: var(--text-secondary);
            margin-top: 2px;
            transition: all 0.25s ease;
        }
        .ob-step-body { flex: 1; min-width: 0; }
        .ob-step-title {
            font-size: 1rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 0.2rem;
        }
        .ob-step-desc {
            font-size: 0.85rem;
            color: var(--text-secondary);
            line-height: 1.4;
        }
        .ob-step-meta {
            font-size: 0.75rem;
            color: var(--text-secondary);
            margin-top: 0.35rem;
        }
        .ob-step-meta i { margin-right: 3px; }
        .ob-step-action {
            display: flex;
            align-items: flex-start;
            flex-shrink: 0;
            margin-top: 2px;
        }

        /* Standardized buttons */
        .ob-btn {
            padding: 0.5rem 1.15rem;
            border-radius: 8px;
            font-size: 0.85rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            white-space: nowrap;
            min-width: 140px;
            text-align: center;
            border: 1px solid transparent;
        }
        .ob-btn-primary {
            background: #14b8a6;
            color: #000;
            border-color: #14b8a6;
        }
        .ob-btn-primary:hover { background: #0d9488; border-color: #0d9488; }
        .ob-btn-secondary {
            background: transparent;
            color: var(--text-secondary);
            border-color: var(--border);
        }
        .ob-btn-secondary:hover { border-color: var(--text-secondary); color: var(--text-primary); }
        .ob-btn-ghost {
            background: transparent;
            color: var(--text-secondary);
            border-color: var(--border);
            opacity: 0.6;
        }
        .ob-btn-ghost:hover { opacity: 0.8; }

        /* Completion badge */
        .ob-badge {
            display: inline-block;
            font-size: 0.75rem;
            font-weight: 600;
            padding: 0.2rem 0.6rem;
            border-radius: 4px;
            margin-top: 0.4rem;
            background: rgba(16, 185, 129, 0.12);
            color: #10B981;
        }

        /* Inline code block */
        .ob-inline-code {
            margin-top: 0.75rem;
            background: rgba(0,0,0,0.3);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 0.75rem 1rem;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        .ob-inline-code code {
            flex: 1;
            font-family: 'JetBrains Mono', 'Fira Code', monospace;
            font-size: 0.8rem;
            color: #e2e8f0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .ob-inline-code .ob-copy-btn {
            padding: 0.35rem 0.75rem;
            border-radius: 6px;
            border: 1px solid var(--border);
            background: transparent;
            color: var(--text-secondary);
            font-size: 0.75rem;
            cursor: pointer;
            white-space: nowrap;
        }
        .ob-inline-code .ob-copy-btn:hover { border-color: var(--text-primary); color: var(--text-primary); }

        /* State: Complete */
        .ob-step.step-complete { opacity: 0.85; }
        .ob-step.step-complete .ob-step-num {
            background: #10B981;
            border-color: #10B981;
            color: #fff;
        }
        .ob-step.step-complete .ob-step-desc { color: var(--text-secondary); opacity: 0.7; }

        /* State: Active */
        .ob-step.step-active {
            border-left-color: #14b8a6;
            background: linear-gradient(135deg, rgba(20,184,166,0.06), var(--bg-card));
        }
        .ob-step.step-active .ob-step-num {
            border-color: #14b8a6;
            color: #14b8a6;
            box-shadow: 0 0 0 4px rgba(20,184,166,0.15);
        }

        /* State: Locked */
        .ob-step.step-locked { opacity: 0.5; }
        .ob-step.step-locked .ob-step-num { border-color: rgba(255,255,255,0.08); color: rgba(255,255,255,0.2); }
        .ob-step.step-locked .ob-step-title { color: var(--text-secondary); }

        /* Footer */
        .ob-footer {
            text-align: center;
            padding: 1.5rem 0 0.5rem;
            font-size: 0.85rem;
            color: var(--text-secondary);
        }
        .ob-footer a { color: #14b8a6; text-decoration: none; }
        .ob-footer a:hover { text-decoration: underline; }

        /* ========== A/B TESTING ========== */
        .ab-test-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .ab-test-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1rem;
        }

        .ab-test-status {
            padding: 0.375rem 0.75rem;
            border-radius: 6px;
            font-size: 0.75rem;
            font-weight: 700;
        }

        .ab-test-status.running {
            background: rgba(16, 185, 129, 0.2);
            color: var(--success);
        }

        .ab-test-status.draft {
            background: rgba(156, 163, 175, 0.2);
            color: var(--text-secondary);
        }

        .ab-test-variants {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
            margin-top: 1rem;
        }

        .variant-card {
            padding: 1rem;
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid var(--border-solid);
            border-radius: 8px;
        }

        .variant-label {
            font-size: 0.75rem;
            color: var(--text-secondary);
            margin-bottom: 0.5rem;
        }

        .variant-metric {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--accent-cyan);
        }

        /* ========== CHANGELOG ========== */
        .changelog-item {
            display: flex;
            gap: 1rem;
            margin-bottom: 2rem;
            padding-left: 1rem;
            border-left: 2px solid var(--border);
        }

        .changelog-date {
            min-width: 120px;
            padding-top: 0.25rem;
        }

        .changelog-version {
            font-size: 1rem;
            font-weight: 700;
            color: var(--accent-cyan);
            margin-bottom: 0.25rem;
        }

        .changelog-date-text {
            font-size: 0.875rem;
            color: var(--text-secondary);
        }

        .changelog-content {
            flex: 1;
        }

        .changelog-title {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 1rem;
        }

        .changelog-changes {
            list-style: none;
            padding: 0;
        }

        .changelog-changes li {
            padding: 0.5rem 0 0.5rem 1.5rem;
            position: relative;
            color: var(--text-secondary);
        }

        .changelog-changes li::before {
            content: '•';
            position: absolute;
            left: 0;
            color: var(--accent-cyan);
            font-weight: 700;
        }

        /* ========== DATA EXPORT ========== */
        .export-options {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1rem;
            margin-bottom: 2rem;
        }

        .export-option {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 1.5rem;
            text-align: center;
            cursor: pointer;
            transition: all var(--transition-base);
        }

        .export-option:hover {
            border-color: var(--accent-cyan);
            transform: translateY(-2px);
        }

        .export-icon {
            width: 64px;
            height: 64px;
            margin: 0 auto 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(100, 255, 218, 0.1);
            border-radius: 12px;
            font-size: 2rem;
            color: var(--accent-cyan);
        }

        .export-format {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 0.5rem;
        }

        .export-description {
            font-size: 0.875rem;
            color: var(--text-secondary);
        }

        /* ========== RESPONSIVE ADJUSTMENTS ========== */
        @media (max-width: 1400px) {
            .right-sidebar {
                display: none;
            }
        }

        @media (max-width: 768px) {
            .secondary-nav {
                padding: 0 1rem;
            }

            .favorites-bar {
                padding: 0.5rem 1rem;
            }

            .command-palette {
                width: 100%;
                margin: 0 1rem;
            }

            .shortcuts-panel {
                width: 100%;
                margin: 0 1rem;
            }
        }
    


        /* WCAG 2.1 AA: Skip link */
        .skip-link {
            position: absolute;
            top: -40px;
            left: 0;
            background: #6C2BD9;
            color: #fff;
            padding: 8px 16px;
            z-index: 10000;
            font-size: 14px;
            border-radius: 0 0 4px 0;
            transition: top 0.2s;
        }
        .skip-link:focus {
            top: 0;
        }
    


      /* Portal hover effects - replaces onmouseover/onmouseout inline handlers */
      .portal-hover-1 { transition: border-color 0.2s ease; }
      .portal-hover-1:hover { border-color: rgba(99,102,241,0.5) !important; }
      .portal-hover-10 { transition: box-shadow 0.2s ease, transform 0.2s ease; }
      .portal-hover-10:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important; transform: translateY(-2px) !important; }
      .portal-hover-11 { transition: border 0.2s ease, border-color 0.2s ease; }
      .portal-hover-11:hover { border: 2px solid #10b981 !important; border-color: #10b981 !important; }
      .portal-hover-12 { transition: border 0.2s ease, border-color 0.2s ease; }
      .portal-hover-12:hover { border: 2px solid #6366f1 !important; border-color: #6366f1 !important; }
      .portal-hover-13 { transition: border 0.2s ease, border-color 0.2s ease; }
      .portal-hover-13:hover { border: 2px solid #f59e0b !important; border-color: #f59e0b !important; }
      .portal-hover-14 { transition: border 0.2s ease, border-color 0.2s ease; }
      .portal-hover-14:hover { border: 2px solid #ef4444 !important; border-color: #ef4444 !important; }
      .portal-hover-15 { transition: border-color 0.2s ease; }
      .portal-hover-15:hover { border-color: #6366f1 !important; }
      .portal-hover-16 { transition: background 0.2s ease; }
      .portal-hover-16:hover { background: var(--bg-primary) !important; }
      .portal-hover-17 { transition: border-color 0.2s ease; }
      .portal-hover-17:hover { border-color: #10b981 !important; }
      .portal-hover-18 { transition: border-color 0.2s ease; }
      .portal-hover-18:hover { border-color: #f59e0b !important; }
      .portal-hover-19 { transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; }
      .portal-hover-19:hover { background: var(--bg-secondary) !important; border-color: #6366f1 !important; transform: translateY(-2px) !important; }
      .portal-hover-2 { transition: border-color 0.2s ease; }
      .portal-hover-2:hover { border-color: rgba(16,185,129,0.5) !important; }
      .portal-hover-20 { transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; }
      .portal-hover-20:hover { background: var(--bg-secondary) !important; border-color: #10b981 !important; transform: translateY(-2px) !important; }
      .portal-hover-21 { transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; }
      .portal-hover-21:hover { background: var(--bg-secondary) !important; border-color: #ef4444 !important; transform: translateY(-2px) !important; }
      .portal-hover-22 { transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; }
      .portal-hover-22:hover { background: var(--bg-secondary) !important; border-color: #8b5cf6 !important; transform: translateY(-2px) !important; }
      .portal-hover-23 { transition: background 0.2s ease; }
      .portal-hover-23:hover { background: var(--bg-secondary) !important; }
      .portal-hover-24 { transition: background 0.2s ease; }
      .portal-hover-24:hover { background: var(--bg-card-solid) !important; }
      .portal-hover-25 { transition: transform 0.2s ease; }
      .portal-hover-25:hover { transform: scale(1.05) !important; }
      .portal-hover-26 { transition: border-color 0.2s ease, color 0.2s ease; }
      .portal-hover-26:hover { border-color: #ef4444 !important; color: #ef4444 !important; }
      .portal-hover-27 { transition: background 0.2s ease, border-color 0.2s ease; }
      .portal-hover-27:hover { background: rgba(100, 255, 218, 0.1) !important; border-color: #64ffda !important; }
      .portal-hover-28 { transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
      .portal-hover-28:hover { border-color: #3b82f6 !important; box-shadow: 0 12px 24px rgba(0,0,0,0.2) !important; transform: translateY(-4px) !important; }
      .portal-hover-29 { transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
      .portal-hover-29:hover { border-color: #10b981 !important; box-shadow: 0 12px 24px rgba(0,0,0,0.2) !important; transform: translateY(-4px) !important; }
      .portal-hover-3 { transition: border-color 0.2s ease; }
      .portal-hover-3:hover { border-color: rgba(239,68,68,0.5) !important; }
      .portal-hover-30 { transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
      .portal-hover-30:hover { border-color: #f59e0b !important; box-shadow: 0 12px 24px rgba(0,0,0,0.2) !important; transform: translateY(-4px) !important; }
      .portal-hover-31 { transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
      .portal-hover-31:hover { border-color: #a855f7 !important; box-shadow: 0 12px 24px rgba(0,0,0,0.2) !important; transform: translateY(-4px) !important; }
      .portal-hover-32 { transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
      .portal-hover-32:hover { border-color: #ec4899 !important; box-shadow: 0 12px 24px rgba(0,0,0,0.2) !important; transform: translateY(-4px) !important; }
      .portal-hover-33 { transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
      .portal-hover-33:hover { border-color: #14b8a6 !important; box-shadow: 0 12px 24px rgba(0,0,0,0.2) !important; transform: translateY(-4px) !important; }
      .portal-hover-34 { transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
      .portal-hover-34:hover { border-color: #ef4444 !important; box-shadow: 0 12px 24px rgba(239, 68, 68, 0.2) !important; transform: translateY(-4px) !important; }
      .portal-hover-35 { transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
      .portal-hover-35:hover { border-color: #6366f1 !important; box-shadow: 0 12px 24px rgba(99, 102, 241, 0.2) !important; transform: translateY(-4px) !important; }
      .portal-hover-36 { transition: box-shadow 0.2s ease, transform 0.2s ease; }
      .portal-hover-36:hover { box-shadow: 0 10px 30px rgba(100, 255, 218, 0.5) !important; transform: translateY(-2px) !important; }
      .portal-hover-37 { transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
      .portal-hover-37:hover { border-color: #10b981 !important; box-shadow: 0 12px 24px rgba(0,0,0,0.2) !important; transform: translateY(-4px) !important; }
      .portal-hover-38 { transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
      .portal-hover-38:hover { border-color: #3b82f6 !important; box-shadow: 0 12px 24px rgba(0,0,0,0.2) !important; transform: translateY(-4px) !important; }
      .portal-hover-39 { transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
      .portal-hover-39:hover { border-color: #f59e0b !important; box-shadow: 0 12px 24px rgba(0,0,0,0.2) !important; transform: translateY(-4px) !important; }
      .portal-hover-4 { transition: border-color 0.2s ease; }
      .portal-hover-4:hover { border-color: rgba(245,158,11,0.5) !important; }
      .portal-hover-40 { transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
      .portal-hover-40:hover { border-color: #a855f7 !important; box-shadow: 0 12px 24px rgba(0,0,0,0.2) !important; transform: translateY(-4px) !important; }
      .portal-hover-41 { transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
      .portal-hover-41:hover { border-color: #8b5cf6 !important; box-shadow: 0 12px 24px rgba(0,0,0,0.2) !important; transform: translateY(-4px) !important; }
      .portal-hover-42 { transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
      .portal-hover-42:hover { border-color: #06b6d4 !important; box-shadow: 0 12px 24px rgba(0,0,0,0.2) !important; transform: translateY(-4px) !important; }
      .portal-hover-43 { transition: box-shadow 0.2s ease, transform 0.2s ease; }
      .portal-hover-43:hover { box-shadow: 0 12px 24px rgba(16,185,129,0.2) !important; transform: translateY(-4px) !important; }
      .portal-hover-44 { transition: box-shadow 0.2s ease, transform 0.2s ease; }
      .portal-hover-44:hover { box-shadow: 0 12px 24px rgba(59,130,246,0.2) !important; transform: translateY(-4px) !important; }
      .portal-hover-45 { transition: box-shadow 0.2s ease, transform 0.2s ease; }
      .portal-hover-45:hover { box-shadow: 0 12px 24px rgba(245,158,11,0.2) !important; transform: translateY(-4px) !important; }
      .portal-hover-46 { transition: box-shadow 0.2s ease, transform 0.2s ease; }
      .portal-hover-46:hover { box-shadow: 0 12px 24px rgba(239,68,68,0.2) !important; transform: translateY(-4px) !important; }
      .portal-hover-47 { transition: border-color 0.2s ease; }
      .portal-hover-47:hover { border-color: #6366f1 !important; }
      .portal-hover-48 { transition: border-color 0.2s ease; }
      .portal-hover-48:hover { border-color: #10b981 !important; }
      .portal-hover-49 { transition: border-color 0.2s ease; }
      .portal-hover-49:hover { border-color: #f59e0b !important; }
      .portal-hover-5 { transition: background 0.2s ease, border-color 0.2s ease; }
      .portal-hover-5:hover { background: rgba(59, 130, 246, 0.1) !important; border-color: #3b82f6 !important; }
      .portal-hover-50 { transition: border-color 0.2s ease; }
      .portal-hover-50:hover { border-color: var(--accent-cyan) !important; }
      .portal-hover-51 { transition: background 0.2s ease; }
      .portal-hover-51:hover { background: rgba(245, 158, 11, 0.1) !important; }
      .portal-hover-52 { transition: background 0.2s ease; }
      .portal-hover-52:hover { background: rgba(239, 68, 68, 0.1) !important; }
      .portal-hover-53 { transition: background 0.2s ease, color 0.2s ease; }
      .portal-hover-53:hover { background: var(--bg-secondary) !important; color: var(--text-primary) !important; }
      .portal-hover-54 { transition: background 0.2s ease; }
      .portal-hover-54:hover { background: var(--bg-primary) !important; }
      .portal-hover-6 { transition: border-color 0.2s ease; }
      .portal-hover-6:hover { border-color: var(--primary) !important; }
      .portal-hover-7 { transition: background 0.2s ease, border-color 0.2s ease; }
      .portal-hover-7:hover { background: rgba(99, 102, 241, 0.1) !important; border-color: #6366f1 !important; }
      .portal-hover-8 { transition: border-color 0.2s ease, transform 0.2s ease; }
      .portal-hover-8:hover { border-color: #6366f1 !important; transform: translateY(-2px) !important; }
      .portal-hover-9 { transition: background 0.2s ease, border-color 0.2s ease; }
      .portal-hover-9:hover { background: rgba(99, 102, 241, 0.15) !important; border-color: #6366f1 !important; }
    


@keyframes successPulse {
    0%, 100% {
        box-shadow: 0 10px 30px rgba(16, 185, 129, 0.3);
    }
    50% {
        box-shadow: 0 10px 40px rgba(16, 185, 129, 0.5);
    }
}



.settings-tab {
    padding: 0.75rem 1.5rem;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.settings-tab:hover {
    color: var(--text-primary);
    background: var(--bg-secondary);
}

.settings-tab.active {
    color: #6366f1;
    border-bottom-color: #6366f1;
}

.settings-tab-content {
    animation: fadeIn 0.3s ease-in-out;
}

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



            /* Onboarding Wizard Styles */
            .ob-wrap{max-width:720px;margin:0 auto;padding:2rem 1rem;}
            .ob-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.5rem;}
            .ob-skip{background:none;border:1px solid var(--border-solid);border-radius:8px;color:var(--text-secondary);padding:0.5rem 1rem;font-size:0.85rem;cursor:pointer;white-space:nowrap;flex-shrink:0;}
            .ob-skip:hover{border-color:var(--text-secondary);color:var(--text-primary);}

            /* Stepper */
            .ob-stepper{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:2rem;}
            .ob-step-item{display:flex;align-items:center;gap:0.5rem;}
            .ob-step-dot{width:32px;height:32px;border-radius:50%;border:2px solid var(--border-solid);display:flex;align-items:center;justify-content:center;font-size:0.8rem;font-weight:700;color:var(--text-tertiary);transition:all 0.3s;flex-shrink:0;}
            .ob-step-dot.active{border-color:#4fd1c5;background:rgba(79,209,197,0.15);color:#4fd1c5;}
            .ob-step-dot.done{border-color:#10b981;background:#10b981;color:#fff;}
            .ob-step-label{font-size:0.78rem;color:var(--text-tertiary);font-weight:600;white-space:nowrap;}
            .ob-step-label.active{color:#4fd1c5;}
            .ob-step-label.done{color:#10b981;}
            .ob-step-line{width:40px;height:2px;background:var(--border-solid);margin:0 0.5rem;flex-shrink:0;}
            .ob-step-line.done{background:#10b981;}

            /* Step panels */
            .ob-panel{display:none;}
            .ob-panel.ob-active{display:block;}

            /* Model cards */
            .ob-models-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1.5rem;}
            @media(max-width:768px){.ob-models-grid{grid-template-columns:1fr;}}
            .ob-model-card{position:relative;background:var(--bg-secondary);border:2px solid var(--border-solid);border-radius:14px;padding:1.25rem;cursor:pointer;transition:all 0.25s;min-height:44px;}
            .ob-model-card:hover{border-color:var(--text-tertiary);transform:translateY(-2px);}
            .ob-model-card.ob-sel-managed{border-color:#00d9b1;background:rgba(0,217,177,0.06);}
            .ob-model-card.ob-sel-sidecar{border-color:#4a90ff;background:rgba(74,144,255,0.06);}
            .ob-model-card.ob-sel-selfhosted{border-color:#f59e0b;background:rgba(245,158,11,0.06);}
            .ob-badge{display:inline-block;padding:0.2rem 0.6rem;border-radius:6px;font-size:0.65rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:0.75rem;}
            .ob-badge-rec{background:rgba(0,217,177,0.15);color:#00d9b1;}
            .ob-badge-perf{background:rgba(74,144,255,0.15);color:#4a90ff;}
            .ob-badge-ent{background:rgba(245,158,11,0.15);color:#f59e0b;}
            .ob-model-name{font-size:1.05rem;font-weight:700;color:var(--text-primary);margin-bottom:0.35rem;}
            .ob-model-desc{font-size:0.8rem;color:var(--text-secondary);line-height:1.5;margin-bottom:0.75rem;}
            .ob-model-stat{font-family:'JetBrains Mono',monospace;font-size:1.3rem;font-weight:700;margin-bottom:0.15rem;}
            .ob-model-stat-label{font-size:0.7rem;color:var(--text-tertiary);margin-bottom:0.35rem;}
            .ob-speed-rank{display:inline-block;font-size:0.65rem;font-weight:700;letter-spacing:0.06em;padding:2px 8px;border-radius:10px;margin-bottom:0.75rem;text-transform:uppercase;}
            .ob-rank-1{background:rgba(74,144,255,0.15);color:#4a90ff;}
            .ob-rank-2{background:rgba(245,158,11,0.15);color:#f59e0b;}
            .ob-rank-3{background:rgba(0,217,177,0.15);color:#00d9b1;}
            .ob-model-features{list-style:none;padding:0;margin:0;}
            .ob-model-features li{font-size:0.75rem;color:var(--text-secondary);padding:0.2rem 0;padding-left:1.1rem;position:relative;}
            .ob-model-features li::before{content:'\f00c';font-family:'Font Awesome 6 Free';font-weight:900;font-size:0.55rem;position:absolute;left:0;top:0.35rem;color:var(--text-tertiary);}

            /* Jurisdiction cards */
            .ob-jur-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0.75rem;margin-bottom:1.25rem;}
            @media(max-width:768px){.ob-jur-grid{grid-template-columns:repeat(2,1fr);}}
            .ob-jur-card{background:var(--bg-secondary);border:2px solid var(--border-solid);border-radius:12px;padding:1rem;cursor:pointer;transition:all 0.2s;text-align:center;min-height:44px;}
            .ob-jur-card:hover{border-color:var(--text-tertiary);}
            .ob-jur-card.ob-jur-sel{border-color:#4fd1c5;background:rgba(79,209,197,0.06);}
            .ob-jur-flag{font-size:1.5rem;margin-bottom:0.35rem;}
            .ob-jur-name{font-size:0.9rem;font-weight:700;color:var(--text-primary);}
            .ob-jur-sub{font-size:0.72rem;color:var(--text-tertiary);margin-top:0.15rem;}

            /* Compliance badges */
            .ob-compliance{display:none;margin-bottom:1.25rem;}
            .ob-compliance.ob-comp-show{display:block;}
            .ob-comp-badges{display:flex;flex-wrap:wrap;gap:0.5rem;margin-bottom:1rem;}
            .ob-comp-badge{display:inline-flex;align-items:center;gap:0.35rem;padding:0.4rem 0.75rem;border-radius:8px;font-size:0.75rem;font-weight:600;background:rgba(16,185,129,0.1);color:#10b981;border:1px solid rgba(16,185,129,0.2);}
            .ob-comp-badge i{font-size:0.65rem;}
            .ob-autoconf{background:rgba(79,209,197,0.06);border:1px solid rgba(79,209,197,0.15);border-radius:12px;padding:1rem 1.25rem;font-size:0.82rem;color:var(--text-secondary);line-height:1.6;}
            .ob-autoconf strong{color:var(--text-primary);display:block;margin-bottom:0.35rem;font-size:0.85rem;}

            /* Form fields */
            .ob-field{margin-bottom:1.25rem;}
            .ob-label{display:block;font-weight:600;color:var(--text-primary);margin-bottom:0.4rem;font-size:0.88rem;}
            .ob-label i{margin-right:6px;color:var(--accent-primary);}
            .ob-input,.ob-select,.ob-textarea{width:100%;padding:0.7rem 1rem;background:var(--bg-secondary);border:2px solid var(--border-solid);border-radius:10px;color:var(--text-primary);font-size:0.92rem;font-family:inherit;transition:border-color 0.2s;}
            .ob-input:focus,.ob-select:focus,.ob-textarea:focus{border-color:var(--accent-primary);outline:none;}
            .ob-textarea{min-height:72px;resize:vertical;}
            .ob-hint{font-size:0.75rem;color:var(--text-tertiary);margin-top:0.3rem;}

            /* Runtime radio buttons */
            .ob-runtime-row{display:flex;gap:0.75rem;margin-bottom:0.25rem;}
            .ob-runtime-opt{flex:1;padding:0.65rem 0.75rem;background:var(--bg-secondary);border:2px solid var(--border-solid);border-radius:10px;cursor:pointer;text-align:center;font-size:0.85rem;font-weight:600;color:var(--text-secondary);transition:all 0.2s;min-height:44px;display:flex;align-items:center;justify-content:center;}
            .ob-runtime-opt:hover{border-color:var(--text-tertiary);}
            .ob-runtime-opt.ob-rt-sel{border-color:#4a90ff;background:rgba(74,144,255,0.08);color:#4a90ff;}

            /* Nav buttons */
            .ob-nav{display:flex;gap:0.75rem;margin-top:1.5rem;}
            .ob-btn{padding:0.85rem 1.5rem;border-radius:12px;font-weight:700;font-size:0.95rem;cursor:pointer;border:none;min-height:48px;transition:all 0.2s;}
            .ob-btn-back{background:var(--bg-secondary);border:2px solid var(--border-solid);color:var(--text-secondary);flex-shrink:0;}
            .ob-btn-back:hover{border-color:var(--text-tertiary);color:var(--text-primary);}
            .ob-btn-next{flex:1;background:linear-gradient(135deg,#4fd1c5,#38b2ac);color:#fff;}
            .ob-btn-next:hover{transform:translateY(-1px);box-shadow:0 4px 15px rgba(79,209,197,0.3);}
            .ob-btn-next:disabled{opacity:0.5;cursor:not-allowed;transform:none;box-shadow:none;}
            .ob-btn-deploy{flex:1;background:linear-gradient(135deg,#10b981,#059669);color:#fff;}
            .ob-btn-deploy:hover{transform:translateY(-1px);box-shadow:0 4px 15px rgba(16,185,129,0.3);}

            /* Review summary */
            .ob-summary{background:var(--bg-secondary);border:1px solid var(--border-solid);border-radius:14px;padding:1.25rem;margin-bottom:1.5rem;}
            .ob-summary-row{display:flex;justify-content:space-between;padding:0.5rem 0;border-bottom:1px solid var(--border);font-size:0.88rem;}
            .ob-summary-row:last-child{border-bottom:none;}
            .ob-summary-key{color:var(--text-tertiary);font-weight:500;}
            .ob-summary-val{color:var(--text-primary);font-weight:600;text-align:right;}

            /* Pre-flight checks */
            .ob-preflight{margin-bottom:1.5rem;}
            .ob-pf-title{font-size:0.88rem;font-weight:700;color:var(--text-primary);margin-bottom:0.75rem;display:flex;align-items:center;gap:0.5rem;}
            .ob-pf-list{list-style:none;padding:0;margin:0;}
            .ob-pf-item{display:flex;align-items:center;gap:0.6rem;padding:0.4rem 0;font-size:0.82rem;color:var(--text-tertiary);opacity:0;transform:translateY(8px);transition:all 0.3s;}
            .ob-pf-item.ob-pf-show{opacity:1;transform:translateY(0);}
            .ob-pf-item.ob-pf-pass{color:#10b981;}
            .ob-pf-item i{width:16px;text-align:center;font-size:0.7rem;}
            .ob-pf-banner{display:none;background:rgba(16,185,129,0.1);border:1px solid rgba(16,185,129,0.25);border-radius:10px;padding:0.85rem 1.25rem;font-size:0.88rem;font-weight:600;color:#10b981;text-align:center;margin-bottom:1rem;}
            .ob-pf-banner.ob-pf-banner-show{display:block;}

            /* Deploy timeline */
            .ob-timeline{max-height:240px;overflow-y:auto;margin-bottom:1rem;}
            .ob-tl-item{display:flex;gap:0.6rem;padding:0.35rem 0;font-size:0.82rem;color:var(--text-secondary);border-left:2px solid var(--border-solid);padding-left:0.75rem;margin-left:0.5rem;}
            .ob-tl-time{color:var(--text-tertiary);font-family:'JetBrains Mono',monospace;font-size:0.72rem;white-space:nowrap;min-width:70px;}

            /* Send to tech team overlay */
            .ob-tech-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.7);z-index:9999;align-items:center;justify-content:center;}
            .ob-tech-overlay.ob-tech-show{display:flex;}
            .ob-tech-modal{background:var(--bg-primary,#0f0f0f);border:1px solid var(--border-solid);border-radius:16px;padding:2rem;max-width:420px;width:90%;}
            .ob-tech-modal h3{font-size:1.1rem;font-weight:700;color:var(--text-primary);margin-bottom:0.5rem;}
            .ob-tech-modal p{font-size:0.85rem;color:var(--text-secondary);margin-bottom:1.25rem;}

            /* Footer */
            .ob-footer{display:flex;justify-content:center;gap:1.5rem;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--border);font-size:0.82rem;}
            .ob-footer a{color:var(--text-tertiary);transition:color 0.2s;}
            .ob-footer a:hover{color:var(--accent-primary);}

            @media(max-width:768px){
                .ob-wrap{padding:1.5rem 0.75rem;}
                .ob-stepper{gap:0;overflow-x:auto;}
                .ob-step-line{width:20px;margin:0 0.25rem;}
                .ob-step-label{font-size:0.68rem;}
                .ob-runtime-row{flex-direction:column;}
            }