Update app.py

app.py

@@ -1,3 +1,6 @@
+# -*- coding: utf-8 -*-
+"""Enhanced CI Outcome Predictor with Modern UI (HF Spaces ready)"""
+
 import os
 import re
 import pickle
@@ -23,17 +26,23 @@ REG_PKL_PATH  = ASSETS_DIR / "ci_speech_score_regressor.pkl"
 # Writable location on HF Spaces for generated outputs
 BATCH_OUT_PATH = Path("/tmp/predictions_output.csv")
 
+def _require(path: Path) -> bool:
+    return path.exists() and path.is_file()
+
 def _missing_assets_html():
     return f"""
-    <div class="result-card">
+    <div class="result-card fade-in">
       <div class="result-head">
-        <div class="result-title">Setup required</div>
-        <div class="pill warn"><span class="dot"></span><span class="pill-ic">!</span><span>Missing files</span></div>
+        <div class="result-title">
+          <div class="title-icon">⚠️</div>
+          <div>Setup required</div>
+        </div>
+        <div class="pill warn pulse-badge"><span class="dot"></span><span class="pill-ic">!</span><span>Missing files</span></div>
       </div>
-      <div class="box">
+      <div class="box hover-lift">
         <div class="k">This Space is missing required files.</div>
         <div class="sub">Upload these to <span class="mono">/assets</span> (recommended) or repo root:</div>
-        <div class="v mono" style="font-weight:700; font-size:12px; line-height:1.5;">
+        <div class="v mono" style="font-weight:700; font-size:12px; line-height:1.6;">
           validation_data.csv<br/>
           Cochlear_Implant_Dataset.csv<br/>
           ci_success_classifier.pkl<br/>
@@ -43,33 +52,27 @@ def _missing_assets_html():
     </div>
     """
 
-def _require(path: Path):
-    return path.exists() and path.is_file()
+APP_READY = all(map(_require, [VAL_CSV_PATH, MAIN_CSV_PATH, CLF_PKL_PATH, REG_PKL_PATH]))
 
 # =========================
 # Load data + models (guarded)
 # =========================
-APP_READY = all(map(_require, [VAL_CSV_PATH, MAIN_CSV_PATH, CLF_PKL_PATH, REG_PKL_PATH]))
-
 if APP_READY:
     val_df  = pd.read_csv(VAL_CSV_PATH)
     main_df = pd.read_csv(MAIN_CSV_PATH)
-
-    def load_model(path: Path):
-        try:
-            return joblib.load(path)
-        except Exception:
-            with open(path, "rb") as f:
-                return pickle.load(f)
-
-    clf_model = load_model(CLF_PKL_PATH)
-    reg_model = load_model(REG_PKL_PATH)
 else:
-    # Placeholders so the file imports cleanly on Spaces even when assets are missing
     val_df = pd.DataFrame()
     main_df = pd.DataFrame()
-    clf_model = None
-    reg_model = None
+
+def load_model(path: Path):
+    try:
+        return joblib.load(path)
+    except Exception:
+        with open(path, "rb") as f:
+            return pickle.load(f)
+
+clf_model = load_model(CLF_PKL_PATH) if APP_READY else None
+reg_model = load_model(REG_PKL_PATH) if APP_READY else None
 
 def get_model_feature_names(m):
     if hasattr(m, "feature_names_in_"):
@@ -83,7 +86,6 @@ def get_model_feature_names(m):
 clf_expected = get_model_feature_names(clf_model) or [] if APP_READY else []
 reg_expected = get_model_feature_names(reg_model) or [] if APP_READY else []
 
-# Union of expected columns (preserve order)
 input_cols = []
 for colset in [clf_expected, reg_expected]:
     for c in colset:
@@ -93,7 +95,7 @@ if not input_cols:
     input_cols = list(val_df.columns) if APP_READY else []
 
 # =========================
-# Build Gene dropdown choices from MAIN dataset
+# Build Gene dropdown choices
 # =========================
 def find_gene_column(df: pd.DataFrame):
     if "Gene" in df.columns:
@@ -125,12 +127,6 @@ if APP_READY:
 # Helpers
 # =========================
 def parse_age_to_years(age_raw: str, mode: str):
-    """
-    mode:
-      - "Years.Months (1.11 = 1y 11m)"  -> 1 + 11/12
-      - "Decimal (1.11 = 1.11 years)"  -> 1.11
-    Accepts "1.6YRS", "2yrs", etc.
-    """
     if age_raw is None:
         return np.nan
 
@@ -146,7 +142,6 @@ def parse_age_to_years(age_raw: str, mode: str):
         except:
             return np.nan
 
-    # Years.Months mode
     if cleaned.count(".") == 1:
         a, b = cleaned.split(".")
         if a.isdigit() and b.isdigit() and len(b) == 2:
@@ -154,7 +149,6 @@ def parse_age_to_years(age_raw: str, mode: str):
             months = int(b)
             if 0 <= months <= 11:
                 return years + months / 12.0
-        # fallback to decimal
         try:
             return float(cleaned)
         except:
@@ -195,6 +189,9 @@ def align_to_expected(df: pd.DataFrame, expected_cols):
             out[c] = np.nan
     return out[expected_cols]
 
+# =========================
+# UI rendering (HTML cards)
+# =========================
 def render_single_result_html(gene, age_entered, age_used_years, parse_mode, label, prob, speech):
     if label == 1:
         status = "Likely Success"
@@ -222,49 +219,63 @@ def render_single_result_html(gene, age_entered, age_used_years, parse_mode, lab
     gene_disp = str(gene) if gene is not None else "—"
 
     return f"""
-    <div class="result-card">
+    <div class="result-card fade-in">
       <div class="result-head">
-        <div class="result-title">Prediction</div>
-        <div class="pill {badge}">
+        <div class="result-title">
+          <div class="title-icon">🎯</div>
+          <div>Prediction Results</div>
+        </div>
+        <div class="pill {badge} pulse-badge">
           <span class="dot"></span>
           <span class="pill-ic">{icon}</span>
           <span>{status}</span>
         </div>
       </div>
+
       <div class="grid2">
-        <div class="box">
+        <div class="box hover-lift">
+          <div class="box-icon">🧬</div>
           <div class="k">Gene</div>
           <div class="v mono">{gene_disp}</div>
         </div>
-        <div class="box">
+        <div class="box hover-lift">
+          <div class="box-icon">📅</div>
           <div class="k">Age entered</div>
           <div class="v mono">{age_entered}</div>
         </div>
       </div>
-      <div class="box" style="margin-top:12px;">
+
+      <div class="box hover-lift" style="margin-top:12px;">
+        <div class="box-icon">⚙️</div>
         <div class="k">Age used by model</div>
         <div class="v mono">{age_used_disp}</div>
         <div class="sub">Parsing mode: <span class="mono">{parse_mode}</span></div>
       </div>
-      <div class="box" style="margin-top:12px;">
+
+      <div class="box hover-lift" style="margin-top:12px;">
+        <div class="box-icon">📊</div>
         <div class="k">Success probability (Class 1)</div>
         <div class="prob-row">
-          <div class="prob-bar"><div class="prob-fill" style="width:{bar_width};"></div></div>
+          <div class="prob-bar"><div class="prob-fill animate-bar" style="width:{bar_width};"></div></div>
           <div class="prob-txt mono">{prob_text}</div>
         </div>
       </div>
+
       <div class="grid2" style="margin-top:12px;">
-        <div class="box">
+        <div class="box hover-lift">
+          <div class="box-icon">🏷️</div>
           <div class="k">Predicted label</div>
           <div class="v mono">{label}</div>
         </div>
-        <div class="box">
+        <div class="box hover-lift">
+          <div class="box-icon">💬</div>
           <div class="k">Predicted speech score</div>
           <div class="v mono">{speech_disp}</div>
         </div>
       </div>
+
       <div class="fine">
-        Informational tool only. Not medical advice.
+        <span class="info-icon">ℹ️</span> Informational tool only. Not medical advice.
       </div>
     </div>
     """
@@ -308,15 +319,19 @@ def _file_to_path(file_obj):
         return None
     if isinstance(file_obj, str):
         return file_obj
+    if hasattr(file_obj, "path"):  # gradio 4
+        return file_obj.path
     if hasattr(file_obj, "name"):
         return file_obj.name
     if isinstance(file_obj, dict) and "name" in file_obj:
         return file_obj["name"]
+    if isinstance(file_obj, dict) and "path" in file_obj:
+        return file_obj["path"]
     return None
 
 def predict_batch(csv_file, parse_mode):
     if not APP_READY:
-        raise gr.Error("This Space is missing required model/dataset files. Please upload them to /assets or repo root.")
+        raise gr.Error("Missing required model/dataset files. Upload them to /assets or repo root.")
 
     path = _file_to_path(csv_file)
     if not path:
@@ -396,21 +411,44 @@ def predict_batch(csv_file, parse_mode):
         pass
 
     summary = f"""
-    <div class="result-card">
+    <div class="result-card fade-in">
       <div class="result-head">
-        <div class="result-title">Batch Summary</div>
-        <div class="pill neutral"><span class="dot"></span><span class="pill-ic">↯</span><span>{n} rows</span></div>
+        <div class="result-title">
+          <div class="title-icon">📈</div>
+          <div>Batch Summary</div>
+        </div>
+        <div class="pill neutral pulse-badge">
+          <span class="dot"></span>
+          <span class="pill-ic">↯</span>
+          <span>{n} rows</span>
+        </div>
       </div>
       <div class="grid3">
-        <div class="box"><div class="k">Predicted success</div><div class="v mono">{succ}</div></div>
-        <div class="box"><div class="k">Predicted success (%)</div><div class="v mono">{succ_pct}%</div></div>
-        <div class="box"><div class="k">Avg prob (Class 1)</div><div class="v mono">{avg_prob_txt}</div></div>
+        <div class="box hover-lift">
+          <div class="box-icon">✓</div>
+          <div class="k">Predicted success</div>
+          <div class="v mono stat-number">{succ}</div>
+        </div>
+        <div class="box hover-lift">
+          <div class="box-icon">%</div>
+          <div class="k">Success rate</div>
+          <div class="v mono stat-number">{succ_pct}%</div>
+        </div>
+        <div class="box hover-lift">
+          <div class="box-icon">📊</div>
+          <div class="k">Avg prob (Class 1)</div>
+          <div class="v mono stat-number">{avg_prob_txt}</div>
+        </div>
       </div>
-      <div class="box" style="margin-top:12px;">
-        <div class="k">Avg speech score</div><div class="v mono">{avg_speech_txt}</div>
+      <div class="box hover-lift" style="margin-top:12px;">
+        <div class="box-icon">💬</div>
+        <div class="k">Avg speech score</div>
+        <div class="v mono stat-number">{avg_speech_txt}</div>
         <div class="sub">Parsing mode: <span class="mono">{parse_mode}</span></div>
       </div>
-      <div class="fine">Download the output CSV below.</div>
+      <div class="fine">
+        <span class="info-icon">📥</span> Download the output CSV below for complete results.
+      </div>
     </div>
     """
     return summary, out.head(20), str(BATCH_OUT_PATH)
@@ -418,316 +456,400 @@ def predict_batch(csv_file, parse_mode):
 def age_preview(age_text, parse_mode):
     v = parse_age_to_years(age_text, parse_mode)
     if isinstance(v, (float, np.floating)) and np.isfinite(v):
-        return f"<div class='hint'>Model will use: <span class='mono'><b>{v:.3f}</b> years</span></div>"
-    return "<div class='hint'>Model will use: <span class='mono'>—</span></div>"
+        return f"<div class='hint fade-in'><span class='hint-icon'>💡</span> Model will use: <span class='mono'><b>{v:.3f}</b> years</span></div>"
+    return "<div class='hint'><span class='hint-icon'>⚠️</span> Model will use: <span class='mono'>—</span></div>"
 
 # =========================
-# CSS: minimal, clean, mobile responsive + hide Gradio footer
+# Enhanced CSS (your UI + fixes for HF light/dark + Gradio inputs)
 # =========================
-CSS = """
-/* =========================================================
-   FIX: Force single LIGHT theme across HF / Gradio / devices
-   ========================================================= */
-
-/* Always render as light */
-:root { color-scheme: light !important; }
-
-html, body, .gradio-container{
-  color-scheme: light !important;
-  background: #f6f7fb !important;
-  color: #0f172a !important;
-}
-
-/* HF + Gradio sometimes set dark theme via class or data attr */
-.dark, .dark body, .dark .gradio-container,
-html[data-theme="dark"], body[data-theme="dark"], [data-theme="dark"] .gradio-container{
-  color-scheme: light !important;
-  background: #f6f7fb !important;
-  color: #0f172a !important;
-}
-
-/* Also override when OS prefers dark */
-@media (prefers-color-scheme: dark){
-  html, body, .gradio-container{
-    color-scheme: light !important;
-    background: #f6f7fb !important;
-    color: #0f172a !important;
-  }
-}
-
-/* Hide theme toggles (selectors vary by Gradio version) */
-#theme-toggle,
-.theme-toggle,
-button[aria-label*="theme" i],
-button[aria-label*="dark" i],
-button[title*="theme" i],
-button[title*="dark" i]{
-  display:none !important;
-}
-
-/* =========================================================
-   Your design tokens
-   ========================================================= */
-:root{
-  --bg:#f6f7fb;
-  --card:#ffffff;
-  --border:#e5e7eb;
-  --text:#0f172a;
-  --muted:#64748b;
-  --accent:#2563eb;
-  --ok:#16a34a;
-  --warn:#d97706;
-  --shadow: 0 10px 30px rgba(15, 23, 42, .08);
-  --radius: 16px;
-}
-
-/* =========================================================
-   Hard override Gradio theme tokens (this is the KEY fix)
-   ========================================================= */
-.gradio-container{
-  background: var(--bg) !important;
-  color: var(--text) !important;
-
-  --body-background-fill: var(--bg) !important;
-  --body-background-fill-secondary: var(--card) !important;
-
-  --body-text-color: var(--text) !important;
-  --body-text-color-subdued: var(--muted) !important;
-
-  --block-background-fill: var(--card) !important;
-  --border-color-primary: var(--border) !important;
+CSS = r"""
+/* ---------- Theme variables (Light default) ---------- */
+:root {
+  --bg: #f0f4f8;
+  --bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  --card: #ffffff;
+  --card-hover: #fefeff;
+  --border: #e2e8f0;
+  --text: #1a202c;
+  --text-secondary: #4a5568;
+  --muted: #718096;
+  --accent: #667eea;
+  --accent-hover: #5568d3;
+  --ok: #48bb78;
+  --warn: #ed8936;
+  --shadow: 0 20px 60px rgba(102, 126, 234, 0.15);
+  --shadow-hover: 0 30px 80px rgba(102, 126, 234, 0.25);
+  --radius: 20px;
+  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
 
-  --input-background-fill: #fbfcff !important;
-  --input-border-color: var(--border) !important;
-  --input-text-color: var(--text) !important;
+/* ---------- Dark theme (opt-in via data-theme="dark") ---------- */
+html[data-theme="dark"] {
+  --bg: #0f172a;
+  --bg-gradient: linear-gradient(135deg, #1e3a8a 0%, #312e81 100%);
+  --card: #1e293b;
+  --card-hover: #293548;
+  --border: #334155;
+  --text: #f1f5f9;
+  --text-secondary: #cbd5e1;
+  --muted: #94a3b8;
+  --accent: #818cf8;
+  --accent-hover: #6366f1;
+  --shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
+  --shadow-hover: 0 30px 80px rgba(0, 0, 0, 0.6);
+}
 
-  --button-primary-background-fill: var(--accent) !important;
-  --button-primary-text-color: #ffffff !important;
+/* ---------- Base ---------- */
+* { transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
 
-  --block-label-text-color: var(--text) !important;
-  --block-title-text-color: var(--text) !important;
+.gradio-container {
+  background: var(--bg) !important;
+  color: var(--text) !important;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
 }
 
 /* Hide Gradio footer */
 footer, .footer, #footer, .gradio-footer { display:none !important; height:0 !important; }
 
-/* Wrapper */
-#wrap{ max-width: 980px; margin: 0 auto; padding: 14px 12px 28px; }
-.gr-row{ flex-wrap: wrap !important; gap: 12px !important; }
-.gr-column{ min-width: 280px; }
+/* Page wrapper */
+#wrap { max-width: 1200px; margin: 0 auto; padding: 20px 16px 40px; }
+.gr-row { flex-wrap: wrap !important; gap: 16px !important; }
+.gr-column { min-width: 320px; }
+
+/* ---------- Theme Toggle Button ---------- */
+#theme-toggle {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  z-index: 1000;
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background: var(--card);
+  border: 2px solid var(--border);
+  box-shadow: var(--shadow);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 22px;
+  transition: var(--transition);
+}
+#theme-toggle:hover { transform: scale(1.06) rotate(8deg); box-shadow: var(--shadow-hover); }
+
+/* ---------- Hero ---------- */
+.hero {
+  padding: 40px 32px;
+  border-radius: var(--radius);
+  border: 2px solid var(--border);
+  background: var(--card);
+  box-shadow: var(--shadow);
+  margin-bottom: 24px;
+  position: relative;
+  overflow: hidden;
+  animation: fade-in .6s ease-out;
+}
+.hero::before {
+  content:'';
+  position:absolute; top:0; left:0; right:0;
+  height:6px; background: var(--bg-gradient);
+}
+.hero h1 {
+  margin:0;
+  font-size: 32px;
+  font-weight: 900;
+  letter-spacing: -0.5px;
+  background: var(--bg-gradient);
+  -webkit-background-clip:text;
+  -webkit-text-fill-color:transparent;
+  background-clip:text;
+}
+.hero p { margin:12px 0 0; color: var(--muted); font-size: 16px; line-height: 1.6; }
 
-/* Hero */
-.hero{
-  padding: 16px 16px;
+/* ---------- Cards ---------- */
+.card {
+  background: var(--card);
+  border: 2px solid var(--border);
   border-radius: var(--radius);
-  border: 1px solid var(--border);
-  background: linear-gradient(180deg, #ffffff, #fbfdff);
   box-shadow: var(--shadow);
-  margin-bottom: 12px;
+  padding: 24px;
+  transition: var(--transition);
+  animation: fade-in .6s ease-out;
 }
-.hero h1{ margin:0; font-size: 18px; font-weight: 800; letter-spacing:.2px; color: var(--text) !important; }
-.hero p{ margin:6px 0 0; color: var(--muted) !important; font-size: 13px; line-height:1.35; }
+.card:hover { box-shadow: var(--shadow-hover); border-color: var(--accent); }
 
-/* Card wrapper */
-.card{
+.mono {
+  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
+  font-weight: 600;
+}
+
+/* ---------- Result Cards ---------- */
+.result-card {
   background: var(--card);
-  border: 1px solid var(--border);
+  border: 2px solid var(--border);
   border-radius: var(--radius);
+  padding: 24px;
   box-shadow: var(--shadow);
-  padding: 14px;
+  position: relative;
+  overflow: hidden;
+}
+.result-card::before {
+  content:'';
+  position:absolute; top:0; left:0; right:0;
+  height:4px; background: var(--bg-gradient);
+}
+.result-head {
+  display:flex; align-items:center; justify-content:space-between;
+  gap:12px; margin-bottom: 20px; flex-wrap: wrap;
+}
+.result-title {
+  display:flex; align-items:center; gap:12px;
+  font-size: 18px; font-weight: 900; letter-spacing: .3px;
+}
+.title-icon { font-size: 24px; }
+
+.grid2 { display:grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
+.grid3 { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
+
+.box {
+  border: 2px solid var(--border);
+  background: var(--card);
+  border-radius: 16px;
+  padding: 20px;
+  transition: var(--transition);
+}
+.box:hover { background: var(--card-hover); border-color: var(--accent); }
+.hover-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
+
+.box-icon { font-size: 20px; margin-bottom: 8px; display:inline-block; }
+
+.k {
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: .5px;
+}
+.v { color: var(--text); font-size: 18px; font-weight: 900; margin-top: 6px; }
+.sub { margin-top: 8px; color: var(--muted); font-size: 12px; }
+
+.stat-number {
+  background: var(--bg-gradient);
+  -webkit-background-clip:text;
+  -webkit-text-fill-color:transparent;
+  background-clip:text;
 }
 
-.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
+/* ---------- Pills ---------- */
+.pill {
+  display:flex; align-items:center; gap: 8px;
+  padding: 10px 16px;
+  border-radius: 999px;
+  border: 2px solid var(--border);
+  background: rgba(255,255,255,.02);
+  font-size: 13px;
+  font-weight: 700;
+  white-space: nowrap;
+}
+.pill .dot {
+  width: 12px; height: 12px; border-radius: 999px;
+  background: var(--muted);
+}
+.pill.ok { border-color: var(--ok); background: rgba(72,187,120,.10); }
+.pill.ok .dot { background: var(--ok); box-shadow: 0 0 20px rgba(72,187,120,.4); }
+.pill.warn { border-color: var(--warn); background: rgba(237,137,54,.10); }
+.pill.warn .dot { background: var(--warn); box-shadow: 0 0 20px rgba(237,137,54,.4); }
+.pill.neutral { border-color: var(--accent); background: rgba(102,126,234,.10); }
+.pill.neutral .dot { background: var(--accent); box-shadow: 0 0 20px rgba(102,126,234,.4); }
+.pill-ic { font-weight: 900; font-size: 16px; }
+
+/* ---------- Progress bar ---------- */
+.prob-row { display:flex; align-items:center; gap: 12px; margin-top: 12px; }
+.prob-bar {
+  flex:1; height: 14px; border-radius: 999px;
+  background: var(--border);
+  overflow:hidden;
+}
+.prob-fill { height:100%; background: var(--bg-gradient); border-radius: 999px; }
+.animate-bar { animation: fill-bar 1s ease-out; }
+@keyframes fill-bar { from { width: 0%; } }
 
-/* =========================================================
-   FIX INPUTS: borders + dropdown inner-white box removal
-   ========================================================= */
+.prob-txt { width: 60px; text-align:right; color: var(--text); font-weight: 900; font-size: 16px; }
 
-/* Labels should ALWAYS be dark (not grey) */
+/* ---------- Info + Hint ---------- */
+.fine {
+  margin-top: 20px;
+  font-size: 12px;
+  color: var(--muted);
+  line-height: 1.5;
+  display:flex; align-items:center; gap: 8px;
+  padding: 12px;
+  background: rgba(102,126,234,.05);
+  border-radius: 12px;
+  border: 1px dashed var(--border);
+}
+.hint {
+  margin-top: 12px;
+  font-size: 13px;
+  color: var(--text-secondary);
+  padding: 16px;
+  border: 2px dashed var(--accent);
+  border-radius: 14px;
+  background: rgba(102,126,234,.05);
+  display:flex; align-items:center; gap: 10px;
+}
+
+/* ---------- Buttons ---------- */
+#primaryBtn button {
+  border-radius: 16px !important;
+  border: 2px solid var(--accent) !important;
+  background: var(--bg-gradient) !important;
+  color: #fff !important;
+  font-weight: 900 !important;
+  font-size: 16px !important;
+  padding: 16px 32px !important;
+  box-shadow: 0 10px 30px rgba(102,126,234,.30) !important;
+}
+
+/* ============================================================
+   FIXES: Gradio inputs (dropdown/textbox/radio/file/table)
+   These solve the HF light/dark mismatches you showed.
+   ============================================================ */
+
+/* Labels: never washed out */
 .gradio-container label,
+.gradio-container label span,
 .gradio-container .label,
-.gradio-container .block-label,
-.gradio-container .wrap > label,
-.gradio-container .form > label{
+.gradio-container .wrap label {
   color: var(--text) !important;
-  font-weight: 600 !important;
+  font-weight: 800 !important;
 }
 
-/* Textbox border (Age) */
+/* Textbox border + background */
 .gradio-container input[type="text"],
-.gradio-container input[type="number"],
-.gradio-container textarea{
-  border: 1px solid var(--border) !important;
-  background: #fbfcff !important;
+.gradio-container textarea,
+.gradio-container .gr-textbox input,
+.gradio-container .gr-textbox textarea {
+  background: var(--card) !important;
   color: var(--text) !important;
-  border-radius: 12px !important;
+  border: 2px solid var(--border) !important;
+  border-radius: 14px !important;
   box-shadow: none !important;
 }
-
-/* Dropdown/Combobox wrapper should have border */
-.gradio-container div[role="combobox"],
-.gradio-container div[role="listbox"]{
-  border: 1px solid var(--border) !important;
-  background: #fbfcff !important;
-  border-radius: 12px !important;
-  box-shadow: none !important;
+.gradio-container input[type="text"]:focus,
+.gradio-container textarea:focus {
+  outline: none !important;
+  border-color: var(--accent) !important;
+  box-shadow: 0 0 0 3px rgba(102,126,234,.18) !important;
 }
 
-/* REMOVE the inner "white container" look inside dropdown */
-.gradio-container div[role="combobox"] input{
-  background: transparent !important;
-  border: none !important;
-  box-shadow: none !important;
-  padding: 0 !important;
+/* Dropdown: remove weird inner "white chip", enforce border */
+.gradio-container select,
+.gradio-container .gr-dropdown,
+.gradio-container .gr-dropdown > div,
+.gradio-container div[role="combobox"] {
+  background: var(--card) !important;
   color: var(--text) !important;
 }
-
-/* =========================================================
-   FIX RADIO: ensure selection dot is visible + looks consistent
-   ========================================================= */
-
-.gradio-container input[type="radio"]{
-  accent-color: var(--accent) !important;
+.gradio-container .gr-dropdown,
+.gradio-container div[role="combobox"] {
+  border: 2px solid var(--border) !important;
+  border-radius: 14px !important;
 }
-
-/* Radiogroup option styling (works across Gradio v3/v4) */
-.gradio-container div[role="radiogroup"] label{
-  display: flex !important;
-  align-items: center !important;
-  gap: 10px !important;
-  border: 1px solid var(--border) !important;
-  background: #fbfcff !important;
-  border-radius: 12px !important;
-  padding: 8px 10px !important;
+.gradio-container .gr-dropdown * {
+  background: transparent !important;  /* kills the extra inner white container */
   color: var(--text) !important;
 }
+.gradio-container .gr-dropdown:hover,
+.gradio-container div[role="combobox"]:hover {
+  border-color: var(--accent) !important;
+}
 
-/* Make the radio circle always visible */
-.gradio-container div[role="radiogroup"] input[type="radio"]{
+/* Radio: ensure dot shows + selection looks clean */
+.gradio-container input[type="radio"] {
+  accent-color: var(--accent) !important;
   width: 16px !important;
   height: 16px !important;
-  margin: 0 !important;
 }
-
-/* =========================================================
-   Batch tab: file upload + dataframe keep same colors in “dark”
-   ========================================================= */
-
-/* Upload area / dropzone (multiple selectors for HF/Gradio versions) */
-.gradio-container .upload,
-.gradio-container .file-upload,
-.gradio-container [data-testid="file"],
-.gradio-container [data-testid="file-upload"],
-.gradio-container [aria-label*="Upload" i]{
-  background: #ffffff !important;
+.gradio-container .gr-radio,
+.gradio-container .gr-radio * {
   color: var(--text) !important;
-  border: 1px dashed rgba(100,116,139,.35) !important;
+}
+.gradio-container .gr-radio label {
+  background: rgba(102,126,234,.06) !important;
+  border: 2px solid var(--border) !important;
   border-radius: 14px !important;
+  padding: 10px 12px !important;
+}
+.gradio-container .gr-radio label:has(input:checked) {
+  border-color: var(--accent) !important;
+  box-shadow: 0 0 0 3px rgba(102,126,234,.16) !important;
 }
 
-/* Dataframe readability */
-.gradio-container table,
-.gradio-container thead,
-.gradio-container tbody{
+/* File upload area styling (fixes batch tab "miscolored/off") */
+.gradio-container .gr-file,
+.gradio-container .gr-file * {
   color: var(--text) !important;
 }
-
-/* Results card */
-.result-card{
-  background: #ffffff;
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 14px;
-  box-shadow: var(--shadow);
+.gradio-container .gr-file .wrap,
+.gradio-container .gr-file .upload,
+.gradio-container .gr-file .container,
+.gradio-container .gr-file .dropzone {
+  background: var(--card) !important;
+  border: 2px dashed var(--border) !important;
+  border-radius: 16px !important;
 }
-.result-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
-.result-title{ font-size: 13px; font-weight: 900; letter-spacing:.3px; color: var(--text) !important; }
-
-.grid2{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
-.grid3{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
-
-.box{
-  border: 1px solid var(--border);
-  background: #fbfcff;
-  border-radius: 14px;
-  padding: 12px;
+.gradio-container .gr-file .dropzone:hover {
+  border-color: var(--accent) !important;
 }
-.k{ color: var(--muted); font-size: 12px; }
-.v{ color: var(--text); font-size: 14px; font-weight: 800; margin-top: 3px; }
-.sub{ margin-top:6px; color: var(--muted); font-size: 11px; }
 
-.pill{
-  display:flex; align-items:center; gap:8px;
-  padding: 8px 10px;
-  border-radius: 999px;
-  border: 1px solid var(--border);
-  background: #ffffff;
-  font-size: 12px;
-  white-space: nowrap;
+/* Dataframe preview styling */
+.gradio-container .gr-dataframe,
+.gradio-container .gr-dataframe * {
+  color: var(--text) !important;
 }
-.pill .dot{ width:10px; height:10px; border-radius:999px; background: rgba(100,116,139,.25); }
-.pill.ok{ border-color: rgba(22,163,74,.25); }
-.pill.ok .dot{ background: var(--ok); }
-.pill.warn{ border-color: rgba(217,119,6,.25); }
-.pill.warn .dot{ background: var(--warn); }
-.pill.neutral{ border-color: rgba(37,99,235,.20); }
-.pill.neutral .dot{ background: var(--accent); }
-.pill-ic{ font-weight: 900; }
-
-.prob-row{ display:flex; align-items:center; gap: 10px; margin-top: 6px; }
-.prob-bar{
-  flex: 1;
-  height: 10px;
-  border-radius: 999px;
-  background: #eef2ff;
-  border: 1px solid rgba(37,99,235,.15);
-  overflow: hidden;
+.gradio-container .gr-dataframe table {
+  background: var(--card) !important;
+  border-collapse: separate !important;
+  border-spacing: 0 !important;
 }
-.prob-fill{
-  height: 100%;
-  background: linear-gradient(90deg, rgba(37,99,235,.95), rgba(22,163,74,.85));
-  border-radius: 999px;
+.gradio-container .gr-dataframe thead th {
+  background: rgba(102,126,234,.08) !important;
+  border-bottom: 2px solid var(--border) !important;
 }
-.prob-txt{ width: 56px; text-align:right; color: var(--text); font-weight: 900; }
-
-.fine{
-  margin-top: 12px;
-  font-size: 11px;
-  color: var(--muted);
-  line-height: 1.35;
+.gradio-container .gr-dataframe tbody td {
+  border-bottom: 1px solid var(--border) !important;
 }
 
-.hint{
-  margin-top: 6px;
-  font-size: 12px;
-  color: var(--muted);
-  padding: 8px 10px;
-  border: 1px dashed rgba(100,116,139,.35);
-  border-radius: 12px;
-  background: #ffffff;
+/* Tabs: make selected tab readable in both themes */
+.gradio-container .tab-nav button.selected {
+  background: var(--bg-gradient) !important;
+  color: #fff !important;
+  border-color: var(--accent) !important;
 }
 
-/* Primary button */
-#primaryBtn button{
-  border-radius: 14px !important;
-  border: 1px solid rgba(37,99,235,.35) !important;
-  background: var(--accent) !important;
-  color: white !important;
-  font-weight: 900 !important;
+/* Responsive */
+@media (max-width: 768px) {
+  #theme-toggle { top: 10px; right: 10px; width: 48px; height: 48px; font-size: 18px; }
+  .hero h1 { font-size: 24px; }
+  .hero p { font-size: 14px; }
+  #primaryBtn button { width: 100% !important; padding: 14px 24px !important; }
+  .grid2, .grid3 { grid-template-columns: 1fr; }
+  .result-head { flex-direction: column; align-items: flex-start; }
+  .gr-column { min-width: 100%; }
 }
 
-@media (max-width: 740px){
-  #primaryBtn button{ width: 100% !important; }
-  .grid2{ grid-template-columns: 1fr; }
-  .grid3{ grid-template-columns: 1fr; }
-  .result-head{ flex-direction: column; align-items: flex-start; }
-  .gr-column{ min-width: 100%; }
+/* Fade-in */
+@keyframes fade-in {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
 }
+.fade-in { animation: fade-in .6s ease-out; }
 """
 
 theme = gr.themes.Base(
     primary_hue="blue",
-    secondary_hue="emerald",
+    secondary_hue="purple",
     neutral_hue="slate",
     radius_size="lg",
     font=[gr.themes.GoogleFont("Inter"), "ui-sans-serif", "system-ui", "sans-serif"],
@@ -738,10 +860,41 @@ theme = gr.themes.Base(
 # =========================
 with gr.Blocks(theme=theme, css=CSS, title="CI Outcome Predictor") as demo:
     with gr.Column(elem_id="wrap"):
+
+        # Theme toggle + script (fixes HF dark mode overrides cleanly)
         gr.HTML("""
+        <button id="theme-toggle" title="Toggle theme">🌙</button>
+        <script>
+          (function(){
+            const root = document.documentElement;
+            const btn  = document.getElementById("theme-toggle");
+
+            function setTheme(t){
+              root.setAttribute("data-theme", t);
+              localStorage.setItem("ci_theme", t);
+              btn.textContent = (t === "dark") ? "☀️" : "🌙";
+            }
+
+            const saved = localStorage.getItem("ci_theme");
+            if(saved){
+              setTheme(saved);
+            } else {
+              const prefersDark = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+              setTheme(prefersDark ? "dark" : "light");
+            }
+
+            btn.addEventListener("click", () => {
+              const cur = root.getAttribute("data-theme") || "light";
+              setTheme(cur === "dark" ? "light" : "dark");
+            });
+          })();
+        </script>
+        """)
+
+        gr.HTML(f"""
           <div class="hero">
             <h1>CI Outcome Predictor</h1>
-            <p>Single and batch predictions. Gene options are loaded from the dataset. Age parsing is shown transparently.</p>
+            <p>Single and batch predictions. Age parsing is shown transparently.</p>
           </div>
         """)
 
@@ -766,15 +919,17 @@ with gr.Blocks(theme=theme, css=CSS, title="CI Outcome Predictor") as demo:
                                     "Years.Months (1.11 = 1y 11m)"
                                 ],
                                 value="Decimal (1.11 = 1.11 years)",
-                                label="Age format"
+                                label="Age parsing"
                             )
 
                             age_hint = gr.HTML(value=age_preview("", "Decimal (1.11 = 1.11 years)"))
-
                             btn = gr.Button("Run Prediction", elem_id="primaryBtn")
 
                     with gr.Column(scale=1):
-                        single_out = gr.HTML(value=_missing_assets_html() if not APP_READY else "", elem_classes=["card"])
+                        single_out = gr.HTML(
+                            value=_missing_assets_html() if not APP_READY else "",
+                            elem_classes=["card"]
+                        )
 
                 age_in.change(fn=age_preview, inputs=[age_in, parse_mode], outputs=[age_hint])
                 parse_mode.change(fn=age_preview, inputs=[age_in, parse_mode], outputs=[age_hint])
@@ -788,7 +943,7 @@ with gr.Blocks(theme=theme, css=CSS, title="CI Outcome Predictor") as demo:
             with gr.Tab("Batch Prediction (CSV)"):
                 with gr.Group(elem_classes=["card"]):
                     gr.Markdown(
-                        "**Required columns:** `Gene`, `Age`",
+                        "**Minimum required columns:** `Gene`, `Age`",
                         elem_classes=["mono"]
                     )
 
@@ -798,7 +953,7 @@ with gr.Blocks(theme=theme, css=CSS, title="CI Outcome Predictor") as demo:
                             "Years.Months (1.11 = 1y 11m)"
                         ],
                         value="Decimal (1.11 = 1.11 years)",
-                        label="Age format"
+                        label="Age parsing"
                     )
 
                     csv_in = gr.File(file_types=[".csv"], label="Upload CSV")
@@ -806,7 +961,7 @@ with gr.Blocks(theme=theme, css=CSS, title="CI Outcome Predictor") as demo:
 
                     batch_summary = gr.HTML(value="")
                     preview = gr.Dataframe(label="Preview (first 20 rows)", wrap=True)
-                    out_file = gr.File(label="Download results")
+                    out_file = gr.File(label="Download predictions_output.csv")
 
                 run_b.click(
                     fn=predict_batch,
@@ -814,5 +969,12 @@ with gr.Blocks(theme=theme, css=CSS, title="CI Outcome Predictor") as demo:
                     outputs=[batch_summary, preview, out_file]
                 )
 
-# For Hugging Face Spaces: don't use share=True
-demo.launch(show_error=False, quiet=True)
+# HF Spaces: do NOT use share=True. Also keep logs quiet.
+IS_SPACES = bool(os.getenv("SPACE_ID") or os.getenv("HF_SPACE") or os.getenv("SYSTEM") == "spaces")
+
+if __name__ == "__main__":
+    demo.queue().launch(
+        share=(not IS_SPACES),
+        show_error=False,
+        quiet=True
+    )