Refine UI tone and theme for professional appearance

app.py

@@ -42,11 +42,11 @@ body {
 }
 
 .hero-banner {
-    border-radius: 28px;
+    border-radius: 20px;
     padding: 2.3rem;
-    background: linear-gradient(135deg, #4338ca 0%, #2563eb 100%);
+    background: linear-gradient(135deg, #1f2937 0%, #334155 100%);
     color: #f8fafc;
-    box-shadow: 0 24px 80px rgba(37, 99, 235, 0.18);
+    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.16);
     margin-bottom: 1.5rem;
 }
 
@@ -58,8 +58,8 @@ body {
 
 .hero-banner h1 {
     margin: 0;
-    font-size: clamp(2.5rem, 3vw, 4rem);
-    line-height: 1.02;
+    font-size: clamp(2rem, 2.5vw, 3.2rem);
+    line-height: 1.08;
 }
 
 .hero-banner p {
@@ -83,23 +83,24 @@ body {
 
 .panel-card,
 .dashboard-card {
-    border-radius: 24px;
-    background: #ffffff;
-    border: 1px solid rgba(148,163,184,0.18);
-    box-shadow: 0 18px 55px rgba(15,23,42,0.08);
+    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);
     padding: 1.75rem;
     color: #0f172a;
 }
 
 .panel-card {
-    margin-bottom: 1.5rem;
+    margin-bottom: 1.25rem;
 }
 
 .panel-card h3,
 .dashboard-card h3 {
     margin-top: 0;
-    font-size: 1.35rem;
+    font-size: 1.28rem;
     letter-spacing: -0.02em;
+    color: #111827 !important;
 }
 
 .panel-card p,
@@ -108,7 +109,7 @@ body {
 .dashboard-card li,
 .gradio-container .gr-markdown,
 .gradio-container .gr-html {
-    color: #334155 !important;
+    color: #1f2937 !important;
     line-height: 1.7;
 }
 
@@ -425,14 +426,14 @@ with gr.Blocks(theme=gr.themes.Default(primary_hue="indigo", font=[gr.themes.Goo
     gr.HTML("""
     <div class='hero-banner'>
         <div style='max-width: 980px;'>
-            <div class='hero-pill'>Architecture profiling for modular model deployments</div>
+            <div style='margin-bottom: 0.8rem; color: rgba(248,250,252,0.88); font-size: 0.95rem; font-weight: 600;'>Architecture profiling for modular model deployments</div>
             <h1>Modular Model Composition Explorer</h1>
             <p>Compare base model architectures and adapters, identify compatibility gaps, and evaluate memory requirements with a clean, professional interface.</p>
-            <div style='display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem;'>
-                <span class='hero-pill'>HF Hub compatible</span>
-                <span class='hero-pill'>PEFT-aware analysis</span>
-                <span class='hero-pill'>Memory planning</span>
-                <span class='hero-pill'>Deployment-ready metrics</span>
+            <div style='display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; color: rgba(248,250,252,0.85); font-size: 0.94rem;'>
+                <span>HF Hub compatible</span>
+                <span>PEFT-aware analysis</span>
+                <span>Memory planning</span>
+                <span>Deployment-ready metrics</span>
             </div>
         </div>
     </div>