ui improved

app.py

@@ -21,7 +21,7 @@ CUSTOM_CSS = """
 
 body {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
-    background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
+    background: linear-gradient(180deg, #eef2ff 0%, #f8fafc 100%);
     color: #0f172a;
 }
 
@@ -29,6 +29,16 @@ body {
     max-width: 1340px;
     margin: 0 auto;
     padding: 1.5rem 1rem 2rem;
+    color: #0f172a;
+}
+
+.gradio-container,
+.gradio-container .gr-block,
+.gradio-container .gr-row,
+.gradio-container .gr-column,
+.gradio-container .gr-box,
+.gradio-container .gr-panel {
+    color: #0f172a !important;
 }
 
 .hero-banner {
@@ -40,6 +50,12 @@ body {
     margin-bottom: 1.5rem;
 }
 
+.hero-banner h1,
+.hero-banner p,
+.hero-banner .hero-pill {
+    color: #f8fafc !important;
+}
+
 .hero-banner h1 {
     margin: 0;
     font-size: clamp(2.5rem, 3vw, 4rem);
@@ -49,7 +65,7 @@ body {
 .hero-banner p {
     margin: 1rem 0 0;
     max-width: 760px;
-    color: rgba(248,250,252,0.9);
+    color: rgba(248,250,252,0.95);
     font-size: 1.05rem;
     line-height: 1.75;
 }
@@ -58,8 +74,8 @@ body {
     display: inline-flex;
     padding: 0.55rem 0.95rem;
     border-radius: 999px;
-    background: rgba(255,255,255,0.14);
-    border: 1px solid rgba(255,255,255,0.2);
+    background: rgba(255,255,255,0.18);
+    border: 1px solid rgba(255,255,255,0.24);
     font-size: 0.95rem;
     font-weight: 600;
     margin-top: 1rem;
@@ -79,6 +95,23 @@ body {
     margin-bottom: 1.5rem;
 }
 
+.panel-card h3,
+.dashboard-card h3 {
+    margin-top: 0;
+    font-size: 1.35rem;
+    letter-spacing: -0.02em;
+}
+
+.panel-card p,
+.dashboard-card p,
+.panel-card li,
+.dashboard-card li,
+.gradio-container .gr-markdown,
+.gradio-container .gr-html {
+    color: #334155 !important;
+    line-height: 1.7;
+}
+
 .status-success,
 .status-warning,
 .status-error {
@@ -146,20 +179,20 @@ body {
 .gradio-container input[type="text"],
 .gradio-container textarea,
 .gradio-container select,
-.gradio-container .gr-slider {
+.gradio-container .gr-slider,
+.gradio-container .gr-dropdown,
+.gradio-container .gr-radio,
+.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;
-}
-
-.gradio-container label {
     color: #0f172a !important;
-    font-weight: 700 !important;
 }
 
-.gradio-container .gr-markdown,
-.gradio-container .gr-html {
+.gradio-container label,
+.gradio-container .gr-label {
     color: #0f172a !important;
+    font-weight: 700 !important;
 }
 
 .gradio-container .gr-tabs {
@@ -169,6 +202,10 @@ body {
 .gradio-container .gr-block {
     gap: 1.25rem !important;
 }
+
+.gradio-container .gr-button.secondary {
+    color: #0f172a !important;
+}
 """
 
 class ModelProfiler: