/* ========================================
               GLOBAL DESIGN SYSTEM VARIABLES
               ======================================== */
            :root {
                /* Primary Colors */
                --color-accent: #10b981;
                --color-accent-dark: #059669;
                --color-purple: #8b5cf6;
                --color-purple-dark: #7c3aed;
                --color-orange: #f59e0b;
                --color-orange-dark: #d97706;
                --color-blue: #3b82f6;
                --color-blue-dark: #2563eb;
                --color-red: #ef4444;
                --color-red-dark: #dc2626;
                --color-cyan: #06b6d4;
                --color-cyan-dark: #0891b2;
                
                /* Neutral Colors */
                --color-dark: #0f172a;
                --color-slate: #1e293b;
                --color-muted: #64748b;
                --color-light: #94a3b8;
                --color-border: rgba(148, 163, 184, 0.2);
                --color-bg: #f8fafc;
                --color-bg-card: #ffffff;
                
                /* Shadows & Effects */
                --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
                --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
                --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
                --shadow-accent: 0 4px 12px rgba(16, 185, 129, 0.3);
                --glow-accent: rgba(16, 185, 129, 0.15);
                
                /* Border Radius */
                --radius-sm: 8px;
                --radius-md: 12px;
                --radius-lg: 16px;
                --radius-xl: 20px;
                
                /* Transitions */
                --transition-fast: 0.2s ease;
                --transition-normal: 0.3s ease;
                --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                
                /* Typography */
                --font-display: 'Clash Display', 'SF Pro Display', system-ui, sans-serif;
                --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
            }
            
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            body {
                font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
                background: var(--color-bg);
                min-height: 100vh;
                padding: 0;
                margin: 0;
                color: var(--color-slate);
                line-height: 1.6;
                overflow-x: hidden;
            }
            
            /* ========================================
               GLOBAL REUSABLE COMPONENTS
               ======================================== */
            
            /* Page Headers */
            .view-header {
                margin-bottom: 32px;
            }
            
            .view-title {
                font-family: var(--font-display);
                font-size: 2rem;
                font-weight: 700;
                background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-blue) 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                margin: 0 0 8px 0;
                letter-spacing: -0.03em;
            }
            
            .view-subtitle {
                color: var(--color-muted);
                font-size: 1rem;
                margin: 0;
                font-weight: 400;
            }
            
            /* Status Cards Grid */
            .status-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                gap: 16px;
                margin-bottom: 32px;
            }
            
            .status-card-mini {
                background: linear-gradient(135deg, var(--color-bg-card) 0%, var(--color-bg) 100%);
                border: 1px solid var(--color-border);
                border-radius: var(--radius-lg);
                padding: 20px;
                position: relative;
                overflow: hidden;
                transition: all var(--transition-smooth);
            }
            
            .status-card-mini::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 3px;
                background: linear-gradient(90deg, var(--card-color, var(--color-accent)) 0%, transparent 100%);
            }
            
            .status-card-mini:hover {
                transform: translateY(-4px);
                box-shadow: var(--shadow-lg);
            }
            
            .status-card-mini .icon-wrapper {
                width: 44px;
                height: 44px;
                border-radius: var(--radius-md);
                display: flex;
                align-items: center;
                justify-content: center;
                margin-bottom: 14px;
                background: linear-gradient(135deg, var(--card-color, var(--color-accent)) 0%, color-mix(in srgb, var(--card-color, var(--color-accent)) 70%, black) 100%);
                box-shadow: 0 4px 12px color-mix(in srgb, var(--card-color, var(--color-accent)) 40%, transparent);
            }
            
            .status-card-mini .icon-wrapper svg {
                color: white;
                width: 22px;
                height: 22px;
            }
            
            .status-card-mini .stat-label {
                font-size: 0.8125rem;
                font-weight: 600;
                color: var(--color-muted);
                text-transform: uppercase;
                letter-spacing: 0.05em;
                margin-bottom: 4px;
            }
            
            .status-card-mini .stat-value {
                font-size: 1.5rem;
                font-weight: 800;
                color: var(--color-dark);
                line-height: 1.2;
            }
            
            /* Color variants for status cards */
            .status-card-mini.accent { --card-color: var(--color-accent); }
            .status-card-mini.purple { --card-color: var(--color-purple); }
            .status-card-mini.orange { --card-color: var(--color-orange); }
            .status-card-mini.blue { --card-color: var(--color-blue); }
            .status-card-mini.red { --card-color: var(--color-red); }
            .status-card-mini.cyan { --card-color: var(--color-cyan); }
            
            /* Collapsible Sections */
            .collapsible-section {
                background: var(--color-bg-card);
                border: 1px solid var(--color-border);
                border-radius: var(--radius-xl);
                margin-bottom: 24px;
                overflow: hidden;
                transition: all var(--transition-normal);
            }
            
            .collapsible-section:hover {
                border-color: rgba(148, 163, 184, 0.4);
                box-shadow: var(--shadow-md);
            }
            
            .collapsible-header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 20px 24px;
                background: linear-gradient(135deg, var(--color-bg) 0%, var(--color-bg-card) 100%);
                border-bottom: 1px solid var(--color-border);
                cursor: pointer;
                transition: background var(--transition-fast);
            }
            
            .collapsible-header:hover {
                background: linear-gradient(135deg, #f1f5f9 0%, var(--color-bg) 100%);
            }
            
            .collapsible-header-left {
                display: flex;
                align-items: center;
                gap: 16px;
            }
            
            .collapsible-icon {
                width: 48px;
                height: 48px;
                border-radius: 14px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: var(--section-bg, linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%));
                box-shadow: var(--section-shadow, 0 4px 12px rgba(16, 185, 129, 0.3));
            }
            
            .collapsible-icon svg {
                color: white;
                width: 24px;
                height: 24px;
            }
            
            .collapsible-title h4 {
                margin: 0;
                font-size: 1.0625rem;
                font-weight: 700;
                color: var(--color-dark);
            }
            
            .collapsible-title p {
                margin: 4px 0 0 0;
                font-size: 0.8125rem;
                color: var(--color-muted);
            }
            
            .collapsible-toggle {
                width: 32px;
                height: 32px;
                border-radius: var(--radius-sm);
                background: #f1f5f9;
                border: none;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: all var(--transition-fast);
            }
            
            .collapsible-toggle:hover {
                background: #e2e8f0;
            }
            
            .collapsible-toggle svg {
                width: 18px;
                height: 18px;
                color: var(--color-muted);
                transition: transform var(--transition-normal);
            }
            
            .collapsible-section.expanded .collapsible-toggle svg {
                transform: rotate(180deg);
            }
            
            .collapsible-body {
                padding: 0 24px;
                max-height: 0;
                overflow: hidden;
                transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            }
            
            .collapsible-section.expanded .collapsible-body {
                max-height: 2000px;
                padding: 24px;
            }
            
            /* Global Buttons */
            .btn {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                padding: 12px 20px;
                border: none;
                border-radius: var(--radius-md);
                font-size: 0.875rem;
                font-weight: 600;
                font-family: inherit;
                cursor: pointer;
                transition: all var(--transition-smooth);
                white-space: nowrap;
            }
            
            .btn svg {
                width: 18px;
                height: 18px;
            }
            
            .btn-primary {
                background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
                color: white;
                box-shadow: var(--shadow-accent);
            }
            
            .btn-primary:hover {
                transform: translateY(-2px);
                box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);
            }
            
            .btn-secondary {
                background: #f1f5f9;
                color: var(--color-slate);
            }
            
            .btn-secondary:hover {
                background: #e2e8f0;
                transform: translateY(-1px);
            }
            
            .btn-purple {
                background: linear-gradient(135deg, var(--color-purple) 0%, var(--color-purple-dark) 100%);
                color: white;
                box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
            }
            
            .btn-purple:hover {
                transform: translateY(-2px);
                box-shadow: 0 8px 20px rgba(139, 92, 246, 0.4);
            }
            
            .btn-orange {
                background: linear-gradient(135deg, var(--color-orange) 0%, var(--color-orange-dark) 100%);
                color: white;
                box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
            }
            
            .btn-orange:hover {
                transform: translateY(-2px);
                box-shadow: 0 8px 20px rgba(245, 158, 11, 0.4);
            }
            
            .btn-blue {
                background: linear-gradient(135deg, var(--color-blue) 0%, var(--color-blue-dark) 100%);
                color: white;
                box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
            }
            
            .btn-blue:hover {
                transform: translateY(-2px);
                box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
            }
            
            .btn-danger {
                background: linear-gradient(135deg, var(--color-red) 0%, var(--color-red-dark) 100%);
                color: white;
                box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
            }
            
            .btn-danger:hover {
                transform: translateY(-2px);
                box-shadow: 0 8px 20px rgba(239, 68, 68, 0.4);
            }
            
            .btn-block { width: 100%; }
            .btn-lg { padding: 14px 28px; font-size: 1rem; }
            .btn-sm { padding: 8px 14px; font-size: 0.8125rem; }
            
            .btn:active {
                transform: scale(0.97);
            }
            
            .btn:disabled {
                opacity: 0.5;
                cursor: not-allowed;
                transform: none !important;
            }
            
            /* Global Form Elements */
            .form-group {
                margin-bottom: 20px;
            }
            
            .form-row {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
                gap: 16px;
            }
            
            .form-label {
                display: block;
                margin-bottom: 8px;
                font-size: 0.8125rem;
                font-weight: 600;
                color: var(--color-slate);
            }
            
            .form-input {
                width: 100%;
                padding: 12px 16px;
                border: 2px solid #e2e8f0;
                border-radius: var(--radius-md);
                font-size: 0.9375rem;
                font-family: inherit;
                background: var(--color-bg-card);
                color: var(--color-dark);
                transition: all var(--transition-fast);
                box-sizing: border-box;
            }
            
            .form-input:focus {
                outline: none;
                border-color: var(--color-accent);
                box-shadow: 0 0 0 4px var(--glow-accent);
            }
            
            .form-input::placeholder {
                color: var(--color-light);
            }
            
            .form-input.mono {
                font-family: var(--font-mono);
                font-size: 0.875rem;
            }
            
            .form-select {
                width: 100%;
                padding: 12px 16px;
                border: 2px solid #e2e8f0;
                border-radius: var(--radius-md);
                font-size: 0.9375rem;
                font-family: inherit;
                background: var(--color-bg-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
                appearance: none;
                cursor: pointer;
                transition: all var(--transition-fast);
                box-sizing: border-box;
            }
            
            .form-select:focus {
                outline: none;
                border-color: var(--color-accent);
                box-shadow: 0 0 0 4px var(--glow-accent);
            }
            
            .form-hint {
                margin-top: 6px;
                font-size: 0.75rem;
                color: var(--color-light);
                display: flex;
                align-items: center;
                gap: 4px;
            }
            
            .form-hint svg {
                width: 12px;
                height: 12px;
                flex-shrink: 0;
            }
            
            /* Global Messages */
            .message {
                padding: 12px 16px;
                border-radius: var(--radius-md);
                font-size: 0.875rem;
                display: none;
                align-items: center;
                gap: 8px;
            }
            
            .message.show {
                display: flex;
            }
            
            .message.success {
                background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
                color: #065f46;
            }
            
            .message.error {
                background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
                color: #991b1b;
            }
            
            .message.info {
                background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
                color: #1e40af;
            }
            
            .message.warning {
                background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
                color: #92400e;
            }
            
            /* Global Badges */
            .badge {
                padding: 4px 10px;
                border-radius: 6px;
                font-size: 0.6875rem;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: 0.05em;
                display: inline-flex;
                align-items: center;
                gap: 4px;
            }
            
            .badge-success {
                background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
                color: #065f46;
            }
            
            .badge-error {
                background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
                color: #991b1b;
            }
            
            .badge-warning {
                background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
                color: #92400e;
            }
            
            .badge-info {
                background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
                color: #1e40af;
            }
            
            .badge-purple {
                background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
                color: #5b21b6;
            }
            
            .badge-neutral {
                background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
                color: var(--color-muted);
            }
            
            /* Status Indicator Dot */
            .status-dot {
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background: var(--color-light);
                animation: pulse-dot 2s ease-in-out infinite;
            }
            
            .status-dot.active {
                background: var(--color-accent);
                box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
            }
            
            .status-dot.warning {
                background: var(--color-orange);
            }
            
            .status-dot.error {
                background: var(--color-red);
            }
            
            @keyframes pulse-dot {
                0%, 100% { opacity: 1; transform: scale(1); }
                50% { opacity: 0.6; transform: scale(1.1); }
            }
            
            @keyframes shimmer {
                0% { background-position: 200% 0; }
                100% { background-position: -200% 0; }
            }
            
            /* Modern Table Styles */
            .table-modern {
                width: 100%;
                border-collapse: collapse;
                background: var(--color-bg-card);
            }
            
            .table-modern thead {
                position: sticky;
                top: 0;
                z-index: 10;
            }
            
            .table-modern th {
                background: linear-gradient(135deg, var(--color-bg) 0%, #f1f5f9 100%);
                color: var(--color-dark);
                padding: 14px 16px;
                text-align: left;
                font-weight: 700;
                font-size: 0.75rem;
                text-transform: uppercase;
                letter-spacing: 0.06em;
                border-bottom: 2px solid #e2e8f0;
                white-space: nowrap;
            }
            
            .table-modern td {
                padding: 14px 16px;
                border-bottom: 1px solid #f1f5f9;
                color: var(--color-dark);
                font-size: 0.875rem;
            }
            
            .table-modern tr:last-child td {
                border-bottom: none;
            }
            
            .table-modern tbody tr {
                transition: background var(--transition-fast);
            }
            
            .table-modern tbody tr:hover {
                background: var(--color-bg);
            }
            
            .table-wrapper {
                overflow-x: auto;
                background: var(--color-bg-card);
                border-radius: var(--radius-lg);
                box-shadow: var(--shadow-sm);
                border: 1px solid var(--color-border);
            }
            
            /* Empty State */
            .empty-state {
                text-align: center;
                padding: 60px 20px;
                color: var(--color-muted);
            }
            
            .empty-state svg {
                width: 48px;
                height: 48px;
                margin-bottom: 16px;
                opacity: 0.5;
            }
            
            .empty-state p {
                font-size: 0.9375rem;
            }
            
            /* Loading State */
            .loading-state {
                text-align: center;
                padding: 40px;
                color: var(--color-muted);
            }
            
            .loading-state svg {
                width: 32px;
                height: 32px;
                animation: spin 1s linear infinite;
                margin-bottom: 12px;
            }
            
            /* Global Animations */
            @keyframes fadeInUp {
                from {
                    opacity: 0;
                    transform: translateY(20px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }
            
            @keyframes scaleIn {
                from {
                    opacity: 0;
                    transform: scale(0.95);
                }
                to {
                    opacity: 1;
                    transform: scale(1);
                }
            }
            
            .animate-in {
                animation: fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards;
            }
            
            .animate-in-1 { animation-delay: 0.05s; }
            .animate-in-2 { animation-delay: 0.1s; }
            .animate-in-3 { animation-delay: 0.15s; }
            .animate-in-4 { animation-delay: 0.2s; }
            .animate-in-5 { animation-delay: 0.25s; }
            .animate-in-6 { animation-delay: 0.3s; }
            
            /* ========================================
               END GLOBAL DESIGN SYSTEM
               ======================================== */
            .sidebar {
                width: 260px;
                background: linear-gradient(180deg, #166534 0%, #15803d 100%);
                height: 100vh;
                padding: 24px 20px;
                position: fixed;
                left: 0;
                top: 0;
                box-shadow: 2px 0 12px rgba(0, 0, 0, 0.08);
                z-index: 100;
                overflow-y: auto;
            }
            .sidebar-header {
                margin-bottom: 32px;
                padding-bottom: 20px;
                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            }
            .sidebar-header h1 {
                font-size: 1.375rem;
                font-weight: 700;
                color: white;
                margin-bottom: 4px;
                letter-spacing: -0.01em;
            }
            .sidebar-header p {
                font-size: 0.75rem;
                color: rgba(255, 255, 255, 0.7);
            }
            .nav-menu {
                list-style: none;
                padding: 0;
                margin: 0;
            }
            .nav-item {
                margin-bottom: 6px;
            }
            .nav-link {
                display: flex;
                align-items: center;
                padding: 10px 14px;
                color: rgba(255, 255, 255, 0.85);
                text-decoration: none;
                border-radius: 8px;
                transition: all 0.2s ease;
                font-weight: 500;
                font-size: 0.875rem;
            }
            .nav-link:hover {
                background: rgba(255, 255, 255, 0.1);
                color: white;
            }
            .nav-link.active {
                background: rgba(255, 255, 255, 0.2);
                color: white;
                font-weight: 600;
            }
            .main-content {
                margin-left: 260px;
                width: calc(100% - 260px);
                min-height: 100vh;
                display: flex;
                flex-direction: column;
            }
            .top-bar {
                background: white;
                padding: 16px 32px;
                border-bottom: 1px solid #e2e8f0;
                display: flex;
                justify-content: space-between;
                align-items: center;
                position: sticky;
                top: 0;
                z-index: 50;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
                flex-shrink: 0;
            }
            .top-bar h2 {
                font-size: 1.375rem;
                font-weight: 700;
                color: #0f172a;
                margin: 0;
            }
            .user-info {
                display: flex;
                align-items: center;
                gap: 12px;
            }
            .user-info span {
                color: #64748b;
                font-size: 0.875rem;
            }
            .logout-btn {
                padding: 6px 14px;
                background: #f1f5f9;
                border: 1px solid #e2e8f0;
                color: #475569;
                border-radius: 6px;
                cursor: pointer;
                font-size: 0.8125rem;
                font-weight: 500;
                transition: all 0.2s ease;
            }
            .logout-btn:hover {
                background: #e2e8f0;
                color: #0f172a;
            }
            .content {
                padding: 32px;
                flex: 1;
                max-width: 100%;
                overflow-x: hidden;
            }
            .status-card {
                background: white;
                border-radius: 16px;
                padding: 32px;
                margin-bottom: 24px;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
                transition: transform 0.2s ease, box-shadow 0.2s ease;
                border: 1px solid rgba(229, 231, 235, 0.5);
                width: 100%;
                max-width: 100%;
                box-sizing: border-box;
            }
            .status-card:hover {
                transform: translateY(-2px);
                box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
            }
            .status-card h2 {
                color: #0f172a;
                font-size: 1.375rem;
                font-weight: 700;
                margin-bottom: 24px;
                letter-spacing: -0.01em;
            }
            .status-card h4 {
                color: #0f172a;
                font-size: 1rem;
                font-weight: 600;
                margin-bottom: 16px;
            }
            .status-item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 16px 0;
                border-bottom: 1px solid #f1f5f9;
            }
            .status-item:last-child {
                border-bottom: none;
            }
            .status-label {
                font-weight: 500;
                color: #64748b;
                font-size: 0.95rem;
            }
            .status-value {
                color: #0f172a;
                font-weight: 600;
                font-size: 1rem;
            }
            .button {
                background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
                color: white;
                border: none;
                padding: 14px 28px;
                font-size: 1rem;
                font-weight: 600;
                border-radius: 10px;
                cursor: pointer;
                width: 100%;
                max-width: 100%;
                margin-top: 24px;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
                letter-spacing: 0.01em;
                box-sizing: border-box;
            }
            .button:hover {
                transform: translateY(-2px);
                box-shadow: 0 8px 24px rgba(245, 158, 11, 0.5);
                background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
            }
            .button:active {
                transform: translateY(0);
            }
            .button:disabled {
                opacity: 0.5;
                cursor: not-allowed;
                transform: none;
            }
            .loading {
                display: none;
                text-align: center;
                padding: 32px;
                color: #f59e0b;
                font-weight: 500;
            }
            .success {
                background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
                color: #065f46;
                padding: 20px 24px;
                border-radius: 12px;
                margin-top: 32px;
                display: none;
                border: 1px solid #86efac;
                font-weight: 500;
                box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
            }
            .error {
                background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
                color: #991b1b;
                padding: 20px 24px;
                border-radius: 12px;
                margin-top: 32px;
                display: none;
                border: 1px solid #fca5a5;
                font-weight: 500;
                box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
            }
            .loader-overlay {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: #f8fafc;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                z-index: 9999;
                color: #1e293b;
            }
            .loader-spinner {
                width: 56px;
                height: 56px;
                border: 4px solid rgba(245, 158, 11, 0.1);
                border-top-color: #f59e0b;
                border-radius: 50%;
                animation: spin 0.8s cubic-bezier(0.5, 0, 0.5, 1) infinite;
                margin-bottom: 24px;
            }
            @keyframes spin {
                to { transform: rotate(360deg); }
            }
            #client-detail-panel {
                position: fixed;
                top: 0;
                right: -100%;
                width: 100%;
                max-width: 100%;
                height: 100vh;
                background: white;
                box-shadow: -4px 0 24px rgba(0, 0, 0, 0.1);
                transition: right 0.3s ease;
                z-index: 1000;
                overflow-y: auto;
            }
            #client-detail-panel.active {
                right: 0;
            }
            #client-detail-overlay {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100vh;
                background: rgba(0, 0, 0, 0.5);
                z-index: 999;
                opacity: 0;
                visibility: hidden;
                transition: opacity 0.3s ease, visibility 0.3s ease;
            }
            #client-detail-overlay.active {
                opacity: 1;
                visibility: visible;
            }
            .loader-text {
                font-size: 1.125rem;
                font-weight: 600;
                color: #166534;
            }
            .loader-overlay.hidden {
                display: none;
            }
            .tab-content {
                display: none;
            }
            .tab-content.active {
                display: block;
            }
            @keyframes fadeIn {
                from { opacity: 0; }
                to { opacity: 1; }
            }
            @keyframes fadeOut {
                from { opacity: 1; }
                to { opacity: 0; }
            }
            @keyframes slideUp {
                from { transform: translateY(20px); opacity: 0; }
                to { transform: translateY(0); opacity: 1; }
            }
            .table-container {
                overflow-x: auto;
                margin-top: 24px;
                background: white;
                border-radius: 12px;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
                padding: 4px;
                width: 100%;
                max-width: 100%;
                box-sizing: border-box;
            }
            table {
                width: 100%;
                border-collapse: collapse;
                background: white;
                table-layout: auto;
            }
            table th {
                background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
                color: #0f172a;
                padding: 14px 16px;
                text-align: left;
                font-weight: 700;
                font-size: 0.75rem;
                text-transform: uppercase;
                letter-spacing: 0.06em;
                border-bottom: 2px solid #e2e8f0;
                white-space: nowrap;
            }
            table td {
                padding: 14px 16px;
                border-bottom: 1px solid #f1f5f9;
                color: #0f172a;
                word-wrap: break-word;
            }
            table tr:last-child td {
                border-bottom: none;
            }
            table tr:hover {
                background: #f8fafc;
            }
            .badge {
                padding: 6px 14px;
                border-radius: 8px;
                font-size: 0.75rem;
                font-weight: 700;
                display: inline-block;
                letter-spacing: 0.02em;
            }
            .badge-success {
                background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
                color: #065f46;
            }
            .badge-error {
                background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
                color: #991b1b;
            }
            .badge-warning {
                background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
                color: #92400e;
            }
            .priority-5 { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; }
            .priority-4 { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: white; }
            .priority-3 { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: white; }
            .priority-2 { background: linear-gradient(135deg, #f97316 0%, #ea580c 100%); color: white; }
            .priority-1 { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: white; }
            .error-details {
                background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
                border-left: 4px solid #f59e0b;
                padding: 20px;
                margin: 16px 0;
                border-radius: 12px;
                font-size: 0.875rem;
                box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
            }
            .error-details h4 {
                color: #92400e;
                margin-bottom: 12px;
                font-weight: 700;
            }
            .error-item {
                padding: 6px 0;
                color: #92400e;
            }
            .log-container {
                background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
                color: #e2e8f0;
                padding: 24px;
                border-radius: 16px;
                font-family: 'JetBrains Mono', 'Consolas', 'Monaco', monospace;
                font-size: 0.875rem;
                max-height: 500px;
                overflow-y: auto;
                white-space: pre-wrap;
                word-wrap: break-word;
                border: 1px solid #334155;
                box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3);
            }
            .log-line {
                padding: 3px 0;
            }
            .log-error {
                color: #fca5a5;
            }
            .log-warning {
                color: #fde047;
            }
            .log-info {
                color: #86efac;
            }
            .expandable {
                cursor: pointer;
                user-select: none;
            }
            .expandable:hover {
                background: #f8fafc;
            }
            .details-content {
                display: none;
                margin-top: 16px;
                padding: 16px;
                background: #f8fafc;
                border-radius: 12px;
                border: 1px solid #e2e8f0;
            }
            .details-content.show {
                display: block;
            }
            h3 {
                margin-top: 0;
                margin-bottom: 24px;
                color: #0f172a;
                font-size: 1.5rem;
                font-weight: 700;
                letter-spacing: -0.02em;
            }
            .info-box {
                background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
                border-left: 4px solid #15803d;
                padding: 24px;
                margin: 24px 0;
                border-radius: 12px;
                box-shadow: 0 2px 8px rgba(22, 101, 52, 0.1);
            }
            .info-box p {
                margin: 6px 0;
                color: #166534;
                line-height: 1.7;
            }
            .info-box strong {
                color: #166534;
                font-weight: 700;
            }
            .mobile-menu-toggle {
                display: none;
                background: #166534;
                color: white;
                border: none;
                padding: 10px;
                border-radius: 6px;
                cursor: pointer;
                font-size: 1.25rem;
                position: fixed;
                top: 12px;
                left: 12px;
                z-index: 101;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
                width: 44px;
                height: 44px;
                align-items: center;
                justify-content: center;
            }
            .mobile-overlay {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.5);
                z-index: 99;
            }
            .mobile-overlay.active {
                display: block;
            }

            /* Estilos para Análisis IA */
            #ia-analisis-ejecuciones-view {
                display: block;
            }
            
            #ia-analisis-ejecuciones {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
                gap: 20px;
                margin-top: 0;
            }
            
            #ia-analisis-detalle {
                display: none;
            }
            
            .ia-ejecucion-card {
                background: white;
                border-radius: 12px;
                padding: 24px;
                border: 2px solid #e2e8f0;
                cursor: pointer;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
            }
            
            .ia-ejecucion-card:hover {
                border-color: #8b5cf6;
                box-shadow: 0 8px 24px rgba(139, 92, 246, 0.2);
                transform: translateY(-4px);
            }
            
            .ia-ejecucion-header {
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                margin-bottom: 20px;
                gap: 16px;
            }
            
            .ia-ejecucion-title {
                margin: 0 0 6px 0;
                color: #0f172a;
                font-size: 1.125rem;
                font-weight: 700;
                line-height: 1.3;
            }
            
            .ia-ejecucion-fecha {
                margin: 0;
                color: #64748b;
                font-size: 0.875rem;
                line-height: 1.4;
            }
            
            .ia-ejecucion-badge {
                padding: 6px 12px;
                border-radius: 8px;
                font-size: 0.75rem;
                font-weight: 700;
                white-space: nowrap;
                flex-shrink: 0;
            }
            
            .ia-ejecucion-stats {
                display: flex;
                gap: 32px;
                padding-top: 20px;
                border-top: 2px solid #f1f5f9;
            }
            
            .ia-ejecucion-stat {
                display: flex;
                flex-direction: column;
                flex: 1;
            }
            
            .ia-stat-label {
                color: #64748b;
                font-size: 0.75rem;
                font-weight: 600;
                text-transform: uppercase;
                letter-spacing: 0.5px;
                margin-bottom: 8px;
            }
            
            .ia-stat-value {
                color: #0f172a;
                font-size: 1.75rem;
                font-weight: 700;
                line-height: 1.2;
            }
            
            /* Estilos para la lista de clientes analizados */
            #ia-analisis-clientes-list {
                display: grid;
                gap: 20px;
            }
            
            .ia-cliente-card {
                background: white;
                border-radius: 12px;
                padding: 24px;
                border: 2px solid #e2e8f0;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
                transition: all 0.2s ease;
            }
            
            .ia-cliente-card:hover {
                box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
                transform: translateY(-2px);
            }

            @media (max-width: 768px) {
                .mobile-menu-toggle {
                    display: flex;
                }
                .sidebar {
                    transform: translateX(-100%);
                    transition: transform 0.3s ease;
                    z-index: 100;
                    padding-top: 68px;
                }
                .sidebar.mobile-open {
                    transform: translateX(0);
                    z-index: 100;
                    padding-top: 68px;
                }
                .main-content {
                    margin-left: 0;
                    width: 100%;
                }
                .top-bar {
                    padding: 12px 16px 12px 68px;
                    position: relative;
                }
                .top-bar h2 {
                    font-size: 1.125rem;
                    margin-left: 0;
                    padding-left: 0;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    max-width: calc(100% - 120px);
                }
                .content {
                    padding: 20px 16px;
                }
                .status-card {
                    padding: 24px 20px;
                    border-radius: 12px;
                }
                .status-card h2 {
                    font-size: 1.25rem;
                    margin-bottom: 20px;
                }
                .button {
                    padding: 12px 24px;
                    font-size: 0.9375rem;
                }
                table th, table td {
                    padding: 10px 12px;
                    font-size: 0.8125rem;
                }
                table th {
                    font-size: 0.6875rem;
                }
                h3 {
                    font-size: 1.25rem;
                    margin-bottom: 20px;
                }
                .user-info {
                    flex-direction: column;
                    align-items: flex-end;
                    gap: 8px;
                }
                .user-info span {
                    font-size: 0.75rem;
                }
                .logout-btn {
                    padding: 6px 12px;
                    font-size: 0.75rem;
                }
            }
            @media (max-width: 480px) {
                .mobile-menu-toggle {
                    top: 10px;
                    left: 10px;
                    width: 40px;
                    height: 40px;
                    padding: 8px;
                }
                .sidebar {
                    padding-top: 62px;
                }
                .sidebar.mobile-open {
                    padding-top: 62px;
                }
                .top-bar {
                    padding: 10px 12px 10px 62px;
                    flex-wrap: wrap;
                    position: relative;
                }
                .top-bar h2 {
                    font-size: 1rem;
                    margin-left: 0;
                    padding-left: 0;
                    max-width: calc(100% - 100px);
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                .content {
                    padding: 16px 12px;
                }
                .status-card {
                    padding: 20px 16px;
                }
                .status-item {
                    flex-direction: column;
                    align-items: flex-start;
                    gap: 4px;
                    padding: 12px 0;
                }
                .status-label {
                    font-size: 0.875rem;
                }
                .status-value {
                    font-size: 0.9375rem;
                }
                table {
                    font-size: 0.75rem;
                }
                table th, table td {
                    padding: 8px 10px;
                }
                .nav-link {
                    padding: 12px 14px;
                    font-size: 0.9375rem;
                }
            }
            
            /* Setup Wizard Styles */
            @keyframes spin {
                from { transform: rotate(0deg); }
                to { transform: rotate(360deg); }
            }
            
            .wizard-check.success .wizard-check-icon {
                background: #10b981;
                border-color: #10b981;
            }
            
            .wizard-check.error .wizard-check-icon {
                background: #ef4444;
                border-color: #ef4444;
            }
            
            .wizard-check.success .wizard-check-icon svg,
            .wizard-check.error .wizard-check-icon svg {
                animation: none;
            }
            
            #setup-wizard input:focus,
            #setup-wizard select:focus {
                outline: none;
                border-color: #10b981;
                box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
            }
            
            #setup-wizard button:hover {
                transform: translateY(-1px);
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            }
            
            #setup-wizard button:active {
                transform: translateY(0);
            }

            /* ========================================
               SISTEMA TAB - MODERN REDESIGN
               ======================================== */
            
            #system-tab {
                --sys-accent: #10b981;
                --sys-accent-dark: #059669;
                --sys-purple: #8b5cf6;
                --sys-orange: #f59e0b;
                --sys-red: #ef4444;
                --sys-blue: #3b82f6;
                --sys-dark: #0f172a;
                --sys-slate: #1e293b;
                --sys-muted: #64748b;
                --sys-border: rgba(148, 163, 184, 0.2);
                --sys-glow: rgba(16, 185, 129, 0.15);
            }
            
            #system-tab h3.sys-main-title {
                font-family: 'Clash Display', 'SF Pro Display', system-ui, sans-serif;
                font-size: 2rem;
                font-weight: 700;
                background: linear-gradient(135deg, var(--sys-accent) 0%, var(--sys-blue) 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                margin: 0 0 8px 0;
                letter-spacing: -0.03em;
            }
            
            .sys-subtitle {
                color: var(--sys-muted);
                font-size: 1rem;
                margin: 0 0 32px 0;
                font-weight: 400;
            }
            
            /* Status Overview Cards */
            .sys-status-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                gap: 16px;
                margin-bottom: 32px;
            }
            
            .sys-status-card {
                background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
                border: 1px solid var(--sys-border);
                border-radius: 16px;
                padding: 20px;
                position: relative;
                overflow: hidden;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
            
            .sys-status-card::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 3px;
                background: linear-gradient(90deg, var(--card-accent, var(--sys-accent)) 0%, transparent 100%);
            }
            
            .sys-status-card:hover {
                transform: translateY(-4px);
                box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
            }
            
            .sys-status-card.openai { --card-accent: var(--sys-purple); }
            .sys-status-card.google { --card-accent: var(--sys-orange); }
            .sys-status-card.email { --card-accent: var(--sys-blue); }
            .sys-status-card.scheduler { --card-accent: var(--sys-accent); }
            
            .sys-status-icon {
                width: 44px;
                height: 44px;
                border-radius: 12px;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-bottom: 14px;
                background: linear-gradient(135deg, var(--card-accent, var(--sys-accent)) 0%, color-mix(in srgb, var(--card-accent, var(--sys-accent)) 70%, black) 100%);
                box-shadow: 0 4px 12px color-mix(in srgb, var(--card-accent, var(--sys-accent)) 40%, transparent);
            }
            
            .sys-status-icon svg {
                color: white;
                width: 22px;
                height: 22px;
            }
            
            .sys-status-label {
                font-size: 0.8125rem;
                font-weight: 600;
                color: var(--sys-muted);
                text-transform: uppercase;
                letter-spacing: 0.05em;
                margin-bottom: 4px;
            }
            
            .sys-status-value {
                font-size: 1.125rem;
                font-weight: 700;
                color: var(--sys-dark);
                display: flex;
                align-items: center;
                gap: 8px;
            }
            
            .sys-status-indicator {
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background: #94a3b8;
                animation: pulse-indicator 2s ease-in-out infinite;
            }
            
            .sys-status-indicator.active {
                background: var(--sys-accent);
            }
            
            .sys-status-indicator.warning {
                background: var(--sys-orange);
            }
            
            .sys-status-indicator.error {
                background: var(--sys-red);
            }
            
            @keyframes pulse-indicator {
                0%, 100% { opacity: 1; transform: scale(1); }
                50% { opacity: 0.6; transform: scale(1.1); }
            }
            
            /* Configuration Sections */
            .sys-config-section {
                background: #ffffff;
                border: 1px solid var(--sys-border);
                border-radius: 20px;
                margin-bottom: 24px;
                overflow: hidden;
                transition: all 0.3s ease;
            }
            
            .sys-config-section:hover {
                border-color: rgba(148, 163, 184, 0.4);
                box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
            }
            
            .sys-config-header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 20px 24px;
                background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
                border-bottom: 1px solid var(--sys-border);
                cursor: pointer;
                transition: background 0.2s ease;
            }
            
            .sys-config-header:hover {
                background: linear-gradient(135deg, #f1f5f9 0%, #f8fafc 100%);
            }
            
            .sys-config-header-left {
                display: flex;
                align-items: center;
                gap: 16px;
            }
            
            .sys-config-icon {
                width: 48px;
                height: 48px;
                border-radius: 14px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: var(--section-bg, linear-gradient(135deg, var(--sys-accent) 0%, var(--sys-accent-dark) 100%));
                box-shadow: 0 4px 12px var(--section-shadow, rgba(16, 185, 129, 0.3));
            }
            
            .sys-config-icon svg {
                color: white;
                width: 24px;
                height: 24px;
            }
            
            .sys-config-section.openai .sys-config-icon {
                --section-bg: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
                --section-shadow: rgba(139, 92, 246, 0.3);
            }
            
            .sys-config-section.google .sys-config-icon {
                --section-bg: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
                --section-shadow: rgba(245, 158, 11, 0.3);
            }
            
            .sys-config-section.email .sys-config-icon {
                --section-bg: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
                --section-shadow: rgba(59, 130, 246, 0.3);
            }
            
            .sys-config-section.scheduler .sys-config-icon {
                --section-bg: linear-gradient(135deg, #10b981 0%, #059669 100%);
                --section-shadow: rgba(16, 185, 129, 0.3);
            }
            
            .sys-config-section.database .sys-config-icon {
                --section-bg: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
                --section-shadow: rgba(6, 182, 212, 0.3);
            }
            
            .sys-config-section.danger .sys-config-icon {
                --section-bg: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
                --section-shadow: rgba(239, 68, 68, 0.3);
            }
            
            .sys-config-title-group h4 {
                margin: 0;
                font-size: 1.0625rem;
                font-weight: 700;
                color: var(--sys-dark);
                display: flex;
                align-items: center;
                gap: 10px;
            }
            
            .sys-config-title-group p {
                margin: 4px 0 0 0;
                font-size: 0.8125rem;
                color: var(--sys-muted);
            }
            
            .sys-badge {
                padding: 4px 10px;
                border-radius: 6px;
                font-size: 0.6875rem;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: 0.05em;
            }
            
            .sys-badge.required {
                background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
                color: #dc2626;
            }
            
            .sys-badge.optional {
                background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
                color: #64748b;
            }
            
            .sys-badge.configured {
                background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
                color: #059669;
            }
            
            .sys-config-toggle {
                width: 32px;
                height: 32px;
                border-radius: 8px;
                background: #f1f5f9;
                border: none;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: all 0.2s ease;
            }
            
            .sys-config-toggle:hover {
                background: #e2e8f0;
            }
            
            .sys-config-toggle svg {
                width: 18px;
                height: 18px;
                color: var(--sys-muted);
                transition: transform 0.3s ease;
            }
            
            .sys-config-section.expanded .sys-config-toggle svg {
                transform: rotate(180deg);
            }
            
            .sys-config-body {
                padding: 0 24px;
                max-height: 0;
                overflow: hidden;
                transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            }
            
            .sys-config-section.expanded .sys-config-body {
                max-height: 800px;
                padding: 24px;
            }
            
            /* Form Elements */
            .sys-form-group {
                margin-bottom: 20px;
            }
            
            .sys-form-row {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
                gap: 16px;
            }
            
            .sys-label {
                display: block;
                margin-bottom: 8px;
                font-size: 0.8125rem;
                font-weight: 600;
                color: var(--sys-slate);
            }
            
            .sys-input {
                width: 100%;
                padding: 12px 16px;
                border: 2px solid #e2e8f0;
                border-radius: 10px;
                font-size: 0.9375rem;
                font-family: inherit;
                background: #ffffff;
                color: var(--sys-dark);
                transition: all 0.2s ease;
                box-sizing: border-box;
            }
            
            .sys-input:focus {
                outline: none;
                border-color: var(--sys-accent);
                box-shadow: 0 0 0 4px var(--sys-glow);
            }
            
            .sys-input::placeholder {
                color: #94a3b8;
            }
            
            .sys-input.mono {
                font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
                font-size: 0.875rem;
            }
            
            .sys-select {
                width: 100%;
                padding: 12px 16px;
                border: 2px solid #e2e8f0;
                border-radius: 10px;
                font-size: 0.9375rem;
                font-family: inherit;
                background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
                appearance: none;
                cursor: pointer;
                transition: all 0.2s ease;
                box-sizing: border-box;
            }
            
            .sys-select:focus {
                outline: none;
                border-color: var(--sys-accent);
                box-shadow: 0 0 0 4px var(--sys-glow);
            }
            
            .sys-textarea {
                width: 100%;
                padding: 12px 16px;
                border: 2px solid #e2e8f0;
                border-radius: 10px;
                font-size: 0.9375rem;
                font-family: inherit;
                background: #ffffff;
                color: var(--sys-dark);
                resize: vertical;
                min-height: 80px;
                transition: all 0.2s ease;
                box-sizing: border-box;
            }
            
            .sys-textarea:focus {
                outline: none;
                border-color: var(--sys-accent);
                box-shadow: 0 0 0 4px var(--sys-glow);
            }
            
            .sys-hint {
                margin-top: 6px;
                font-size: 0.75rem;
                color: #94a3b8;
                display: flex;
                align-items: center;
                gap: 4px;
            }
            
            .sys-hint svg {
                width: 12px;
                height: 12px;
                flex-shrink: 0;
            }
            
            /* File Upload */
            .sys-file-upload {
                border: 2px dashed #e2e8f0;
                border-radius: 12px;
                padding: 24px;
                text-align: center;
                cursor: pointer;
                transition: all 0.2s ease;
                background: #fafafa;
            }
            
            .sys-file-upload:hover {
                border-color: var(--sys-accent);
                background: rgba(16, 185, 129, 0.02);
            }
            
            .sys-file-upload.dragover {
                border-color: var(--sys-accent);
                background: rgba(16, 185, 129, 0.05);
            }
            
            .sys-file-upload-icon {
                width: 48px;
                height: 48px;
                margin: 0 auto 12px;
                border-radius: 12px;
                background: #f1f5f9;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            
            .sys-file-upload-icon svg {
                width: 24px;
                height: 24px;
                color: var(--sys-muted);
            }
            
            .sys-file-upload-text {
                font-size: 0.875rem;
                color: var(--sys-muted);
            }
            
            .sys-file-upload-text strong {
                color: var(--sys-accent);
            }
            
            /* Buttons */
            .sys-btn {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                padding: 12px 20px;
                border: none;
                border-radius: 10px;
                font-size: 0.875rem;
                font-weight: 600;
                font-family: inherit;
                cursor: pointer;
                transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
                white-space: nowrap;
            }
            
            .sys-btn svg {
                width: 18px;
                height: 18px;
            }
            
            .sys-btn-primary {
                background: linear-gradient(135deg, var(--sys-accent) 0%, var(--sys-accent-dark) 100%);
                color: white;
                box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
            }
            
            .sys-btn-primary:hover {
                transform: translateY(-2px);
                box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);
            }
            
            .sys-btn-secondary {
                background: #f1f5f9;
                color: var(--sys-slate);
            }
            
            .sys-btn-secondary:hover {
                background: #e2e8f0;
                transform: translateY(-1px);
            }
            
            .sys-btn-purple {
                background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
                color: white;
                box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
            }
            
            .sys-btn-purple:hover {
                transform: translateY(-2px);
                box-shadow: 0 8px 20px rgba(139, 92, 246, 0.4);
            }
            
            .sys-btn-danger {
                background: linear-gradient(135deg, var(--sys-red) 0%, #dc2626 100%);
                color: white;
                box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
            }
            
            .sys-btn-danger:hover {
                transform: translateY(-2px);
                box-shadow: 0 8px 20px rgba(239, 68, 68, 0.4);
            }
            
            .sys-btn-block {
                width: 100%;
            }
            
            .sys-btn-lg {
                padding: 14px 28px;
                font-size: 1rem;
            }
            
            /* Input with button */
            .sys-input-group {
                display: flex;
                gap: 8px;
            }
            
            .sys-input-group .sys-input {
                flex: 1;
            }
            
            /* ========================================
               NOTIFICATION COMPONENTS
               ======================================== */
            
            .notif-toggle-item {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 14px 18px;
                background: var(--color-bg);
                border-radius: var(--radius-md);
                cursor: pointer;
                transition: all var(--transition-fast);
                gap: 16px;
            }
            
            .notif-toggle-item:hover {
                background: #f1f5f9;
            }
            
            .notif-toggle-title {
                font-weight: 600;
                color: var(--color-dark);
                font-size: 0.9375rem;
            }
            
            .notif-toggle-desc {
                margin: 4px 0 0 0;
                font-size: 0.8rem;
                color: var(--color-muted);
            }
            
            .notif-toggle-sm {
                padding: 10px 14px;
            }
            
            .notif-toggle-sm span {
                color: var(--color-slate);
                font-size: 0.875rem;
            }
            
            .notif-checkbox {
                width: 22px;
                height: 22px;
                accent-color: var(--color-orange);
                cursor: pointer;
                flex-shrink: 0;
            }
            
            .notif-checkbox-sm {
                width: 18px;
                height: 18px;
                accent-color: var(--color-purple);
                cursor: pointer;
                flex-shrink: 0;
            }
            
            .notif-subtab-btn {
                border-radius: var(--radius-md) !important;
            }
            
            .notif-subtab-btn:not(.active):hover {
                background: rgba(0, 0, 0, 0.05) !important;
            }
            
            /* Database Stats */
            .sys-stats-grid {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 16px;
            }
            
            .sys-stat-item {
                background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
                border-radius: 12px;
                padding: 16px 20px;
                text-align: center;
            }
            
            .sys-stat-number {
                font-size: 1.75rem;
                font-weight: 800;
                color: var(--sys-dark);
                line-height: 1.2;
            }
            
            .sys-stat-label {
                font-size: 0.75rem;
                font-weight: 600;
                color: var(--sys-muted);
                text-transform: uppercase;
                letter-spacing: 0.05em;
                margin-top: 4px;
            }
            
            /* Danger Zone */
            .sys-danger-zone {
                background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
                border: 2px solid #fecaca;
                border-radius: 16px;
                padding: 24px;
            }
            
            .sys-danger-zone h4 {
                color: #dc2626;
                font-size: 1rem;
                font-weight: 700;
                margin: 0 0 12px 0;
                display: flex;
                align-items: center;
                gap: 8px;
            }
            
            .sys-danger-zone p {
                color: #b91c1c;
                font-size: 0.875rem;
                line-height: 1.6;
                margin: 0 0 16px 0;
            }
            
            /* Message boxes */
            .sys-message {
                padding: 12px 16px;
                border-radius: 10px;
                margin-top: 12px;
                font-size: 0.875rem;
                display: none;
            }
            
            .sys-message.show {
                display: flex;
                align-items: center;
                gap: 8px;
            }
            
            .sys-message.success {
                background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
                color: #065f46;
            }
            
            .sys-message.error {
                background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
                color: #991b1b;
            }
            
            /* Responsive */
            @media (max-width: 768px) {
                #system-tab h3.sys-main-title {
                    font-size: 1.5rem;
                }
                
                .sys-status-grid {
                    grid-template-columns: repeat(2, 1fr);
                }
                
                .sys-form-row {
                    grid-template-columns: 1fr;
                }
                
                .sys-stats-grid {
                    grid-template-columns: 1fr;
                }
                
                .sys-config-body {
                    padding: 0 16px;
                }
                
                .sys-config-section.expanded .sys-config-body {
                    padding: 20px 16px;
                }
            }
            
            @media (max-width: 480px) {
                .sys-status-grid {
                    grid-template-columns: 1fr;
                }
                
                .sys-config-header {
                    padding: 16px;
                }
                
                .sys-input-group {
                    flex-direction: column;
                }
            }
            
            /* Animations for System Tab */
            @keyframes sys-fadeInUp {
                from {
                    opacity: 0;
                    transform: translateY(20px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }
            
            @keyframes sys-scaleIn {
                from {
                    opacity: 0;
                    transform: scale(0.95);
                }
                to {
                    opacity: 1;
                    transform: scale(1);
                }
            }
            
            @keyframes sys-slideRight {
                from {
                    opacity: 0;
                    transform: translateX(-10px);
                }
                to {
                    opacity: 1;
                    transform: translateX(0);
                }
            }
            
            #system-tab.active .sys-status-card {
                animation: sys-scaleIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards;
            }
            
            #system-tab.active .sys-status-card:nth-child(1) { animation-delay: 0.05s; }
            #system-tab.active .sys-status-card:nth-child(2) { animation-delay: 0.1s; }
            #system-tab.active .sys-status-card:nth-child(3) { animation-delay: 0.15s; }
            #system-tab.active .sys-status-card:nth-child(4) { animation-delay: 0.2s; }
            
            #system-tab.active .sys-config-section {
                animation: sys-fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) backwards;
            }
            
            #system-tab.active .sys-config-section:nth-of-type(1) { animation-delay: 0.15s; }
            #system-tab.active .sys-config-section:nth-of-type(2) { animation-delay: 0.2s; }
            #system-tab.active .sys-config-section:nth-of-type(3) { animation-delay: 0.25s; }
            #system-tab.active .sys-config-section:nth-of-type(4) { animation-delay: 0.3s; }
            #system-tab.active .sys-config-section:nth-of-type(5) { animation-delay: 0.35s; }
            #system-tab.active .sys-config-section:nth-of-type(6) { animation-delay: 0.4s; }
            
            /* Focus animations */
            .sys-input:focus,
            .sys-select:focus,
            .sys-textarea:focus {
                animation: sys-slideRight 0.2s ease-out;
            }
            
            /* Button click effect */
            .sys-btn:active {
                transform: scale(0.97);
            }
            
            /* Ripple effect for sections */
            .sys-config-header {
                position: relative;
                overflow: hidden;
            }
            
            .sys-config-header::after {
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                width: 0;
                height: 0;
                background: radial-gradient(circle, rgba(16, 185, 129, 0.1) 0%, transparent 70%);
                border-radius: 50%;
                transform: translate(-50%, -50%);
                transition: width 0.4s ease, height 0.4s ease;
                pointer-events: none;
            }
            
            .sys-config-header:active::after {
                width: 200%;
                height: 200%;
            }
            
            /* Smooth transition for status indicators */
            .sys-status-indicator {
                transition: background 0.3s ease, transform 0.3s ease;
            }
            
            .sys-status-indicator.active {
                box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
            }
            
            /* Card hover gradient effect */
            .sys-status-card::after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.1) 100%);
                opacity: 0;
                transition: opacity 0.3s ease;
                pointer-events: none;
                border-radius: 16px;
            }
            
            .sys-status-card:hover::after {
                opacity: 1;
            }