Apply dark professional UI theme and remove white backgrounds

app.py

@@ -16,20 +16,20 @@ logging.basicConfig(level=logging.INFO, format=LOG_FORMAT)
 
 CUSTOM_CSS = """
 :root {
-    color-scheme: light;
+    color-scheme: dark;
 }
 
 body {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
-    background: linear-gradient(180deg, #eef2ff 0%, #f8fafc 100%);
-    color: #0f172a;
+    background: radial-gradient(circle at top, #111827 0%, #0f172a 40%, #111827 100%);
+    color: #e2e8f0;
 }
 
 .gradio-container {
     max-width: 1340px;
     margin: 0 auto;
     padding: 1.5rem 1rem 2rem;
-    color: #0f172a;
+    color: #e2e8f0;
 }
 
 .gradio-container,
@@ -38,15 +38,16 @@ body {
 .gradio-container .gr-column,
 .gradio-container .gr-box,
 .gradio-container .gr-panel {
-    color: #0f172a !important;
+    color: #e2e8f0 !important;
+    background: transparent !important;
 }
 
 .hero-banner {
     border-radius: 20px;
     padding: 2.3rem;
-    background: linear-gradient(135deg, #1f2937 0%, #334155 100%);
+    background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
     color: #f8fafc;
-    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.16);
+    box-shadow: 0 30px 70px rgba(15, 23, 42, 0.32);
     margin-bottom: 1.5rem;
 }
 
@@ -65,7 +66,7 @@ body {
 .hero-banner p {
     margin: 1rem 0 0;
     max-width: 760px;
-    color: rgba(248,250,252,0.95);
+    color: rgba(248,250,252,0.9);
     font-size: 1.05rem;
     line-height: 1.75;
 }
@@ -74,8 +75,8 @@ body {
     display: inline-flex;
     padding: 0.55rem 0.95rem;
     border-radius: 999px;
-    background: rgba(255,255,255,0.18);
-    border: 1px solid rgba(255,255,255,0.24);
+    background: rgba(255,255,255,0.12);
+    border: 1px solid rgba(255,255,255,0.12);
     font-size: 0.95rem;
     font-weight: 600;
     margin-top: 1rem;
@@ -84,11 +85,11 @@ body {
 .panel-card,
 .dashboard-card {
     border-radius: 18px;
-    background: #f8fafc;
-    border: 1px solid rgba(148,163,184,0.22);
-    box-shadow: 0 16px 40px rgba(15,23,42,0.08);
+    background: rgba(15, 23, 42, 0.92);
+    border: 1px solid rgba(148,163,184,0.12);
+    box-shadow: 0 20px 45px rgba(15,23,42,0.25);
     padding: 1.75rem;
-    color: #0f172a;
+    color: #e2e8f0;
 }
 
 .panel-card {
@@ -117,24 +118,23 @@ body {
 .status-warning,
 .status-error {
     border-left: 5px solid transparent !important;
+    background: rgba(15, 23, 42, 0.94) !important;
+    border: 1px solid rgba(148,163,184,0.10) !important;
 }
 
 .status-success {
-    background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%) !important;
-    border-left-color: #10b981 !important;
-    color: #064e3b !important;
+    border-left-color: #22c55e !important;
+    color: #d1fae5 !important;
 }
 
 .status-warning {
-    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
     border-left-color: #f59e0b !important;
-    color: #92400e !important;
+    color: #fde68a !important;
 }
 
 .status-error {
-    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%) !important;
     border-left-color: #ef4444 !important;
-    color: #991b1b !important;
+    color: #fecaca !important;
 }
 
 .status-success h3,
@@ -154,7 +154,7 @@ body {
     font-family: 'JetBrains Mono', monospace;
     font-weight: 700;
     font-size: 1.3rem;
-    color: #0f172a;
+    color: #e2e8f0;
     letter-spacing: 0.02em;
 }
 
@@ -168,13 +168,13 @@ body {
 }
 
 .gradio-container .gr-button.primary {
-    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
+    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%) !important;
     color: #ffffff !important;
-    box-shadow: 0 18px 35px rgba(99,102,241,0.25) !important;
+    box-shadow: 0 18px 40px rgba(67,56,202,0.22) !important;
 }
 
 .gradio-container .gr-button.primary:hover {
-    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%) !important;
+    background: linear-gradient(135deg, #4338ca 0%, #3730a3 100%) !important;
 }
 
 .gradio-container input[type="text"],
@@ -186,13 +186,14 @@ body {
 .gradio-container .gr-checkbox {
     border-radius: 18px !important;
     border: 1px solid rgba(148,163,184,0.25) !important;
-    box-shadow: inset 0 1px 2px rgba(15,23,42,0.06) !important;
-    color: #0f172a !important;
+    box-shadow: inset 0 1px 2px rgba(15,23,42,0.12) !important;
+    color: #e2e8f0 !important;
+    background: rgba(15,23,42,0.9) !important;
 }
 
 .gradio-container label,
 .gradio-container .gr-label {
-    color: #0f172a !important;
+    color: #e2e8f0 !important;
     font-weight: 700 !important;
 }
 
@@ -205,7 +206,7 @@ body {
 }
 
 .gradio-container .gr-button.secondary {
-    color: #0f172a !important;
+    color: #e2e8f0 !important;
 }
 """