Update ui/styles.py

ui/styles.py

@@ -341,4 +341,201 @@ def print_installation_status():
         print("=" * 70)
         
     except Exception as e:
-        print(f"⚠️ Could not print installation status: {e}")
+        print(f"⚠️ Could not print installation status: {e}")
+
+
+def get_styles() -> str:
+    """Return CSS styles for ARF demo - ADDED THIS FUNCTION"""
+    return """
+    /* ARF Demo Styles - Professional Dark Theme */
+    :root {
+        --primary: #3b82f6;
+        --primary-dark: #1d4ed8;
+        --success: #10b981;
+        --danger: #ef4444;
+        --warning: #f59e0b;
+        --dark-bg: #0f172a;
+        --dark-card: #1e293b;
+        --dark-border: #334155;
+        --dark-text: #f8fafc;
+        --dark-muted: #94a3b8;
+    }
+    
+    /* Modern Glass Effect */
+    .glass {
+        background: rgba(255, 255, 255, 0.05);
+        backdrop-filter: blur(10px);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+    }
+    
+    /* Professional Card Styling */
+    .arf-card {
+        border: 1px solid var(--dark-border);
+        border-radius: 14px;
+        padding: 20px;
+        background: var(--dark-card);
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+        transition: transform 0.2s ease, box-shadow 0.2s ease;
+    }
+    
+    .arf-card:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
+    }
+    
+    /* Tab Navigation */
+    .tab-nav {
+        background: var(--dark-bg);
+        border-bottom: 2px solid var(--dark-border);
+    }
+    
+    .tab-nav .tab {
+        padding: 12px 24px;
+        font-weight: 600;
+        border-radius: 8px 8px 0 0;
+        border: 2px solid transparent;
+        border-bottom: none;
+        transition: all 0.2s ease;
+    }
+    
+    .tab-nav .tab.selected {
+        background: var(--dark-card);
+        border-color: var(--dark-border);
+        color: var(--primary);
+    }
+    
+    /* Button Styling */
+    button {
+        border-radius: 10px !important;
+        font-weight: 600 !important;
+        transition: all 0.2s ease !important;
+    }
+    
+    button.primary {
+        background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
+        border: none !important;
+        color: white !important;
+    }
+    
+    button.secondary {
+        background: var(--dark-card) !important;
+        border: 2px solid var(--dark-border) !important;
+        color: var(--dark-text) !important;
+    }
+    
+    button:hover {
+        transform: translateY(-1px);
+        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
+    }
+    
+    /* Header Gradient */
+    .header-gradient {
+        background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
+        border-radius: 16px;
+        box-shadow: 0 8px 32px rgba(59, 130, 246, 0.15);
+    }
+    
+    /* Status Indicators */
+    .status-success {
+        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+        color: white;
+        padding: 4px 12px;
+        border-radius: 20px;
+        font-size: 12px;
+        font-weight: bold;
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+    }
+    
+    .status-warning {
+        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+        color: white;
+        padding: 4px 12px;
+        border-radius: 20px;
+        font-size: 12px;
+        font-weight: bold;
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+    }
+    
+    .status-danger {
+        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+        color: white;
+        padding: 4px 12px;
+        border-radius: 20px;
+        font-size: 12px;
+        font-weight: bold;
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+    }
+    
+    /* Metric Cards */
+    .metric-card {
+        border-left: 4px solid var(--primary);
+        border-radius: 12px;
+        padding: 18px;
+        background: var(--dark-card);
+        margin: 8px;
+        text-align: center;
+        flex: 1;
+        min-width: 140px;
+    }
+    
+    .metric-value {
+        font-size: 28px;
+        font-weight: bold;
+        color: var(--primary);
+        margin: 8px 0;
+    }
+    
+    /* Agent Cards */
+    .agent-card {
+        border: 2px solid var(--dark-border);
+        border-radius: 14px;
+        padding: 18px;
+        background: var(--dark-card);
+        text-align: center;
+        min-height: 180px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+    
+    .agent-card.active {
+        border-color: var(--success);
+        background: rgba(16, 185, 129, 0.1);
+    }
+    
+    /* Responsive Design */
+    @media (max-width: 768px) {
+        .arf-card {
+            padding: 15px;
+        }
+        
+        .metric-card {
+            min-width: 100%;
+        }
+    }
+    
+    /* Custom Scrollbar */
+    ::-webkit-scrollbar {
+        width: 8px;
+    }
+    
+    ::-webkit-scrollbar-track {
+        background: var(--dark-bg);
+    }
+    
+    ::-webkit-scrollbar-thumb {
+        background: var(--dark-border);
+        border-radius: 4px;
+    }
+    
+    ::-webkit-scrollbar-thumb:hover {
+        background: var(--dark-muted);
+    }
+    """