Update app.py

app.py

@@ -1,5 +1,5 @@
 # -*- coding: utf-8 -*-
-"""Enhanced CI Outcome Predictor with Modern UI (HF Spaces ready)"""
+"""Enhanced CI Outcome Predictor with Advanced UI (HF Spaces Ready)"""
 
 import os
 import re
@@ -11,70 +11,75 @@ import gradio as gr
 from pathlib import Path
 
 # =========================
-# PATHS
+# PATHS (Hugging Face Spaces / repo root)
+# Place these files in the SAME folder as app.py:
+# - validation_data.csv
+# - Cochlear_Implant_Dataset.csv
+# - ci_success_classifier.pkl
+# - ci_speech_score_regressor.pkl
 # =========================
 BASE_DIR = Path(__file__).resolve().parent if "__file__" in globals() else Path.cwd()
-ASSETS_DIR = BASE_DIR / "assets"
-if not ASSETS_DIR.exists():
-    ASSETS_DIR = BASE_DIR  # fallback: files in repo root
 
-VAL_CSV_PATH  = ASSETS_DIR / "validation_data.csv"
-MAIN_CSV_PATH = ASSETS_DIR / "Cochlear_Implant_Dataset.csv"
-CLF_PKL_PATH  = ASSETS_DIR / "ci_success_classifier.pkl"
-REG_PKL_PATH  = ASSETS_DIR / "ci_speech_score_regressor.pkl"
+VAL_CSV_PATH  = BASE_DIR / "validation_data.csv"
+MAIN_CSV_PATH = BASE_DIR / "Cochlear_Implant_Dataset.csv"
+CLF_PKL_PATH  = BASE_DIR / "ci_success_classifier.pkl"
+REG_PKL_PATH  = BASE_DIR / "ci_speech_score_regressor.pkl"
 
-# Writable location on HF Spaces for generated outputs
+# Writable location on HF Spaces
 BATCH_OUT_PATH = Path("/tmp/predictions_output.csv")
 
-def _require(path: Path) -> bool:
-    return path.exists() and path.is_file()
 
-def _missing_assets_html():
+def _require(p: Path) -> bool:
+    return p.exists() and p.is_file()
+
+
+def _missing_files_message():
+    missing = []
+    for p in [VAL_CSV_PATH, MAIN_CSV_PATH, CLF_PKL_PATH, REG_PKL_PATH]:
+        if not _require(p):
+            missing.append(p.name)
+
     return f"""
-    <div class="result-card fade-in">
-      <div class="result-head">
-        <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 class="info-box">
+      <strong>⚠️ Setup required:</strong> Missing required files in repo root:<br/>
+      <div style="margin-top:8px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;">
+        {"<br/>".join(missing) if missing else "—"}
       </div>
-      <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.6;">
-          validation_data.csv<br/>
-          Cochlear_Implant_Dataset.csv<br/>
-          ci_success_classifier.pkl<br/>
-          ci_speech_score_regressor.pkl
-        </div>
+      <div style="margin-top:10px; opacity:0.9;">
+        Upload the files to the <b>same folder as app.py</b> and restart the Space.
       </div>
     </div>
     """
 
-APP_READY = all(map(_require, [VAL_CSV_PATH, MAIN_CSV_PATH, CLF_PKL_PATH, REG_PKL_PATH]))
 
 # =========================
-# Load data + models (guarded)
+# Load data + models (guarded so Space can boot even if files missing)
 # =========================
+APP_READY = all(_require(p) for p in [VAL_CSV_PATH, MAIN_CSV_PATH, CLF_PKL_PATH, REG_PKL_PATH])
+
+val_df = pd.DataFrame()
+main_df = pd.DataFrame()
+clf_model = None
+reg_model = None
+
 if APP_READY:
-    val_df  = pd.read_csv(VAL_CSV_PATH)
+    val_df = pd.read_csv(VAL_CSV_PATH)
     main_df = pd.read_csv(MAIN_CSV_PATH)
-else:
-    val_df = pd.DataFrame()
-    main_df = pd.DataFrame()
 
-def load_model(path: Path):
-    try:
-        return joblib.load(path)
-    except Exception:
-        with open(path, "rb") as f:
-            return pickle.load(f)
+    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)
 
-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 m is None:
+        return None
     if hasattr(m, "feature_names_in_"):
         return list(getattr(m, "feature_names_in_"))
     if hasattr(m, "named_steps"):
@@ -83,21 +88,25 @@ def get_model_feature_names(m):
                 return list(step.feature_names_in_)
     return None
 
-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 []
 
+clf_expected = get_model_feature_names(clf_model) or []
+reg_expected = get_model_feature_names(reg_model) or []
+
+# Union of expected columns (preserve order)
 input_cols = []
 for colset in [clf_expected, reg_expected]:
     for c in colset:
         if c not in input_cols:
             input_cols.append(c)
-if not input_cols:
-    input_cols = list(val_df.columns) if APP_READY else []
+if not input_cols and APP_READY:
+    input_cols = list(val_df.columns)
 
 # =========================
-# Build Gene dropdown choices
+# Build Gene dropdown choices from MAIN dataset
 # =========================
 def find_gene_column(df: pd.DataFrame):
+    if df is None or df.empty:
+        return None
     if "Gene" in df.columns:
         return "Gene"
     for c in df.columns:
@@ -105,6 +114,7 @@ def find_gene_column(df: pd.DataFrame):
             return c
     return None
 
+
 def normalize_str_series(s: pd.Series) -> pd.Series:
     return (
         s.astype(str)
@@ -113,6 +123,7 @@ def normalize_str_series(s: pd.Series) -> pd.Series:
                    "": np.nan, "nan": np.nan, "NaN": np.nan})
     )
 
+
 gene_choices = []
 if APP_READY:
     gene_col_main = find_gene_column(main_df)
@@ -127,6 +138,12 @@ 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
 
@@ -142,6 +159,7 @@ 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:
@@ -149,6 +167,7 @@ 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:
@@ -159,12 +178,14 @@ def parse_age_to_years(age_raw: str, mode: str):
     except:
         return np.nan
 
+
 def safe_pct(x):
     try:
         return int(round(float(x) * 100))
     except:
         return None
 
+
 def get_gene_feature_name(cols):
     for c in cols:
         if c.lower() == "gene":
@@ -174,12 +195,15 @@ def get_gene_feature_name(cols):
             return c
     return None
 
+
 def get_age_feature_names(cols):
     return [c for c in cols if "age" in c.lower()]
 
+
 GENE_FEAT = get_gene_feature_name(input_cols) if APP_READY else None
 AGE_FEATS = get_age_feature_names(input_cols) if APP_READY else []
 
+
 def align_to_expected(df: pd.DataFrame, expected_cols):
     if not expected_cols:
         return df
@@ -189,22 +213,23 @@ 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"
         badge = "ok"
         icon = "✓"
+        emoji = "🎉"
     elif label == 0:
         status = "Lower Likelihood"
         badge = "warn"
         icon = "!"
+        emoji = "⚠️"
     else:
         status = "Unavailable"
         badge = "neutral"
         icon = "?"
+        emoji = "❓"
 
     prob_pct = safe_pct(prob) if prob is not None else None
     prob_text = f"{prob_pct}%" if prob_pct is not None else "—"
@@ -219,70 +244,94 @@ 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 fade-in">
-      <div class="result-head">
-        <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 class="result-card fade-in-up">
+      <div class="result-banner {badge}">
+        <div class="banner-emoji">{emoji}</div>
+        <div class="banner-text">
+          <div class="banner-title">{status}</div>
+          <div class="banner-sub">Prediction Complete</div>
         </div>
+        <div class="pulse-dot"></div>
       </div>
 
-      <div class="grid2">
-        <div class="box hover-lift">
-          <div class="box-icon">🧬</div>
-          <div class="k">Gene</div>
-          <div class="v mono">{gene_disp}</div>
+      <div class="metrics-grid">
+        <div class="metric-card glass-effect hover-lift">
+          <div class="metric-icon">🧬</div>
+          <div class="metric-label">Gene</div>
+          <div class="metric-value">{gene_disp}</div>
         </div>
-        <div class="box hover-lift">
-          <div class="box-icon">📅</div>
-          <div class="k">Age entered</div>
-          <div class="v mono">{age_entered}</div>
+        <div class="metric-card glass-effect hover-lift">
+          <div class="metric-icon">📅</div>
+          <div class="metric-label">Age Entered</div>
+          <div class="metric-value">{age_entered}</div>
+        </div>
+        <div class="metric-card glass-effect hover-lift">
+          <div class="metric-icon">🔬</div>
+          <div class="metric-label">Model Age</div>
+          <div class="metric-value">{age_used_disp}</div>
+        </div>
+        <div class="metric-card glass-effect hover-lift">
+          <div class="metric-icon">📊</div>
+          <div class="metric-label">Parse Mode</div>
+          <div class="metric-value small">{parse_mode.split('(')[0].strip()}</div>
         </div>
       </div>
 
-      <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 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 animate-bar" style="width:{bar_width};"></div></div>
-          <div class="prob-txt mono">{prob_text}</div>
+      <div class="probability-section glass-effect">
+        <div class="prob-header">
+          <span class="prob-title">Success Probability</span>
+          <span class="prob-value-large">{prob_text}</span>
+        </div>
+        <div class="prob-bar-container">
+          <div class="prob-bar-track">
+            <div class="prob-bar-fill {badge}" style="width:{bar_width};">
+              <div class="shimmer"></div>
+            </div>
+          </div>
+          <div class="prob-markers">
+            <span>0%</span><span>25%</span><span>50%</span><span>75%</span><span>100%</span>
+          </div>
         </div>
       </div>
 
-      <div class="grid2" style="margin-top:12px;">
-        <div class="box hover-lift">
-          <div class="box-icon">🏷️</div>
-          <div class="k">Predicted label</div>
-          <div class="v mono">{label}</div>
+      <div class="details-grid">
+        <div class="detail-box glass-effect hover-lift">
+          <div class="detail-icon {badge}">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+            </svg>
+          </div>
+          <div class="detail-content">
+            <div class="detail-label">Predicted Label</div>
+            <div class="detail-value">{label}</div>
+          </div>
         </div>
-        <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 class="detail-box glass-effect hover-lift">
+          <div class="detail-icon {badge}">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"/>
+            </svg>
+          </div>
+          <div class="detail-content">
+            <div class="detail-label">Speech Score</div>
+            <div class="detail-value">{speech_disp}</div>
+          </div>
         </div>
       </div>
 
-      <div class="fine">
-        <span class="info-icon">ℹ️</span> Informational tool only. Not medical advice.
+      <div class="disclaimer">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/>
+        </svg>
+        <span>Informational tool only. Not medical advice. Consult healthcare professionals for clinical decisions.</span>
       </div>
     </div>
     """
 
+
 def predict_single(gene, age_text, parse_mode):
     if not APP_READY:
-        return _missing_assets_html()
+        return _missing_files_message()
 
     if gene is None or str(gene).strip() == "":
         raise gr.Error("Please select a Gene.")
@@ -314,24 +363,34 @@ def predict_single(gene, age_text, parse_mode):
     speech = reg_model.predict(Xr)[0]
     return render_single_result_html(gene, age_text, age_used, parse_mode, label, prob, speech)
 
+
 def _file_to_path(file_obj):
+    """
+    Gradio v3/v4 compatibility:
+    - Sometimes a string path
+    - Sometimes object with .name
+    - In Gradio 4: often has .path
+    - Sometimes dict-like with 'name' or 'path'
+    """
     if file_obj is None:
         return None
     if isinstance(file_obj, str):
         return file_obj
-    if hasattr(file_obj, "path"):  # gradio 4
+    if hasattr(file_obj, "path") and file_obj.path:
         return file_obj.path
-    if hasattr(file_obj, "name"):
+    if hasattr(file_obj, "name") and 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"]
+    if isinstance(file_obj, dict):
+        if file_obj.get("path"):
+            return file_obj["path"]
+        if file_obj.get("name"):
+            return file_obj["name"]
     return None
 
+
 def predict_batch(csv_file, parse_mode):
     if not APP_READY:
-        raise gr.Error("Missing required model/dataset files. Upload them to /assets or repo root.")
+        raise gr.Error("Missing required model/data files in repo root. Please upload them and restart the Space.")
 
     path = _file_to_path(csv_file)
     if not path:
@@ -411,570 +470,1154 @@ def predict_batch(csv_file, parse_mode):
         pass
 
     summary = f"""
-    <div class="result-card fade-in">
-      <div class="result-head">
-        <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 class="batch-results fade-in-up">
+      <div class="batch-header">
+        <div class="batch-title">
+          <span class="batch-icon">📊</span>
+          <span>Batch Analysis Complete</span>
         </div>
+        <div class="batch-count">{n} rows processed</div>
       </div>
-      <div class="grid3">
-        <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 class="stats-showcase">
+        <div class="stat-mega glass-effect hover-lift">
+          <div class="stat-mega-icon ok">✓</div>
+          <div class="stat-mega-content">
+            <div class="stat-mega-label">Predicted Success</div>
+            <div class="stat-mega-value">{succ}</div>
+            <div class="stat-mega-sub">{succ_pct}% of total</div>
+          </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 class="stats-grid">
+          <div class="stat-card glass-effect hover-lift">
+            <div class="stat-icon">🎯</div>
+            <div class="stat-label">Avg Probability</div>
+            <div class="stat-value">{avg_prob_txt}</div>
+          </div>
+          <div class="stat-card glass-effect hover-lift">
+            <div class="stat-icon">🎤</div>
+            <div class="stat-label">Avg Speech Score</div>
+            <div class="stat-value">{avg_speech_txt}</div>
+          </div>
+          <div class="stat-card glass-effect hover-lift">
+            <div class="stat-icon">⚙️</div>
+            <div class="stat-label">Parse Mode</div>
+            <div class="stat-value small">{parse_mode.split('(')[0].strip()}</div>
+          </div>
         </div>
       </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">
-        <span class="info-icon">📥</span> Download the output CSV below for complete results.
+
+      <div class="download-prompt">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/>
+        </svg>
+        <span>Download the complete results CSV below</span>
       </div>
     </div>
     """
     return summary, out.head(20), str(BATCH_OUT_PATH)
 
+
 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 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>"
+        return f"""
+        <div class='age-preview-box fade-in'>
+          <div class="preview-icon">✨</div>
+          <div class="preview-content">
+            <div class="preview-label">Model will use</div>
+            <div class="preview-value">{v:.3f} years</div>
+          </div>
+        </div>
+        """
+    return """
+    <div class='age-preview-box fade-in'>
+      <div class="preview-icon">❌</div>
+      <div class="preview-content">
+        <div class="preview-label">Model will use</div>
+        <div class="preview-value">Invalid</div>
+      </div>
+    </div>
+    """
+
 
 # =========================
-# Enhanced CSS (your UI + fixes for HF light/dark + Gradio inputs)
+# CSS + JS (UNCHANGED from your provided script)
+# =========================
 # =========================
-CSS = r"""
-/* ---------- Theme variables (Light default) ---------- */
+# ENHANCED CSS WITH LIGHT/DARK MODE & ANIMATIONS
+# =========================
+CSS = """
+/* ========== THEME VARIABLES ========== */
 :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);
-}
-
-/* ---------- 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;
+  --bg-primary: #f8fafc;
+  --bg-secondary: #ffffff;
+  --bg-tertiary: #f1f5f9;
+  --text-primary: #0f172a;
+  --text-secondary: #475569;
+  --text-muted: #94a3b8;
+  --border-color: #e2e8f0;
+  --accent-primary: #3b82f6;
+  --accent-secondary: #8b5cf6;
+  --success-color: #10b981;
+  --warning-color: #f59e0b;
+  --danger-color: #ef4444;
+  --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
+  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
+  --shadow-lg: 0 10px 30px rgba(0,0,0,0.12);
+  --shadow-xl: 0 20px 50px rgba(0,0,0,0.15);
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+  --radius-xl: 24px;
+  --transition-fast: 0.15s ease;
+  --transition-normal: 0.3s ease;
+  --transition-slow: 0.5s ease;
+}
+
+[data-theme="dark"] {
+  --bg-primary: #0f172a;
+  --bg-secondary: #1e293b;
+  --bg-tertiary: #334155;
+  --text-primary: #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);
+  --text-muted: #64748b;
+  --border-color: #334155;
+  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
+  --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
+  --shadow-lg: 0 10px 30px rgba(0,0,0,0.5);
+  --shadow-xl: 0 20px 50px rgba(0,0,0,0.6);
 }
 
-/* ---------- Base ---------- */
-* { transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
+/* ========== BASE STYLES ========== */
+* {
+  transition: background-color var(--transition-normal), 
+              border-color var(--transition-normal),
+              color var(--transition-normal);
+}
 
 .gradio-container {
-  background: var(--bg) !important;
-  color: var(--text) !important;
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  background: var(--bg-primary) !important;
+  color: var(--text-primary) !important;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
 }
 
 /* Hide Gradio footer */
-footer, .footer, #footer, .gradio-footer { display:none !important; height:0 !important; }
-
-/* 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;
+footer, .footer, #footer, .gradio-footer { 
+  display: none !important; 
+}
+
+/* ========== ANIMATIONS ========== */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+@keyframes shimmer {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(100%); }
+}
+
+@keyframes rotate {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes slideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.fade-in-up {
+  animation: fadeInUp 0.6s ease-out;
+}
+
+.fade-in {
+  animation: fadeIn 0.4s ease-out;
+}
+
+.scale-in {
+  animation: scaleIn 0.4s ease-out;
+}
+
+.slide-in-right {
+  animation: slideInRight 0.5s ease-out;
+}
+
+/* ========== GLASS EFFECT ========== */
+.glass-effect {
+  background: rgba(255, 255, 255, 0.7) !important;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+[data-theme="dark"] .glass-effect {
+  background: rgba(30, 41, 59, 0.7) !important;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* ========== HOVER EFFECTS ========== */
+.hover-lift {
+  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
+}
+
+.hover-lift:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--shadow-lg) !important;
+}
+
+/* ========== HEADER ========== */
+.app-header {
+  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
+  padding: 48px 32px;
+  border-radius: var(--radius-xl);
+  box-shadow: var(--shadow-xl);
+  margin-bottom: 32px;
+  position: relative;
+  overflow: hidden;
+  animation: fadeInUp 0.6s ease-out;
+}
+
+.app-header::before {
+  content: '';
+  position: absolute;
+  top: -50%;
+  right: -10%;
+  width: 300px;
+  height: 300px;
+  background: rgba(255, 255, 255, 0.1);
   border-radius: 50%;
-  background: var(--card);
-  border: 2px solid var(--border);
-  box-shadow: var(--shadow);
-  cursor: pointer;
+  animation: pulse 3s ease-in-out infinite;
+}
+
+.header-content {
+  position: relative;
+  z-index: 1;
+}
+
+.header-top {
   display: flex;
+  justify-content: space-between;
   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;
+}
+
+.header-title {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.header-icon {
+  font-size: 48px;
+  animation: scaleIn 0.8s ease-out;
+}
+
+.header-text h1 {
+  margin: 0;
+  font-size: 36px;
+  font-weight: 800;
+  color: white;
+  letter-spacing: -0.5px;
+  text-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+
+.header-text .subtitle {
+  margin: 8px 0 0;
+  font-size: 16px;
+  color: rgba(255, 255, 255, 0.9);
+  font-weight: 500;
+}
+
+.header-stats {
+  display: flex;
+  gap: 24px;
+  margin-top: 24px;
+}
+
+.header-stat {
+  background: rgba(255, 255, 255, 0.15);
+  backdrop-filter: blur(10px);
+  padding: 16px 24px;
+  border-radius: var(--radius-md);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.header-stat-label {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.8);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  font-weight: 600;
+}
+
+.header-stat-value {
+  font-size: 24px;
+  color: white;
+  font-weight: 800;
+  margin-top: 4px;
+}
+
+/* ========== THEME TOGGLE ========== */
+#theme-toggle-btn {
+  background: rgba(255, 255, 255, 0.2) !important;
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.3) !important;
+  border-radius: 50px !important;
+  padding: 12px 24px !important;
+  color: white !important;
+  font-weight: 600 !important;
+  cursor: pointer;
+  transition: all var(--transition-fast) !important;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+#theme-toggle-btn:hover {
+  background: rgba(255, 255, 255, 0.3) !important;
+  transform: scale(1.05);
+}
+
+/* ========== CARDS & CONTAINERS ========== */
+.input-card, .output-card {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-lg);
+  padding: 24px;
+  box-shadow: var(--shadow-md);
+  animation: fadeInUp 0.6s ease-out;
+}
+
+.section-title {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.section-title::before {
+  content: '';
+  width: 4px;
+  height: 24px;
+  background: linear-gradient(180deg, var(--accent-primary), var(--accent-secondary));
+  border-radius: 2px;
+}
+
+/* ========== RESULT CARDS ========== */
+.result-card {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-xl);
+  padding: 0;
+  box-shadow: var(--shadow-lg);
+  overflow: hidden;
+}
+
+.result-banner {
+  padding: 24px 28px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
   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);
+
+.result-banner::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  opacity: 0.1;
+  z-index: 0;
 }
-.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; }
-
-/* ---------- Cards ---------- */
-.card {
-  background: var(--card);
-  border: 2px solid var(--border);
-  border-radius: var(--radius);
-  box-shadow: var(--shadow);
+
+.result-banner.ok {
+  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+}
+
+.result-banner.warn {
+  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+}
+
+.result-banner.neutral {
+  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+}
+
+.banner-emoji {
+  font-size: 48px;
+  position: relative;
+  z-index: 1;
+  animation: scaleIn 0.6s ease-out;
+}
+
+.banner-text {
+  flex: 1;
+  position: relative;
+  z-index: 1;
+}
+
+.banner-title {
+  font-size: 24px;
+  font-weight: 800;
+  color: white;
+  margin-bottom: 4px;
+}
+
+.banner-sub {
+  font-size: 14px;
+  color: rgba(255, 255, 255, 0.9);
+  font-weight: 500;
+}
+
+.pulse-dot {
+  width: 12px;
+  height: 12px;
+  background: white;
+  border-radius: 50%;
+  position: relative;
+  z-index: 1;
+  animation: pulse 2s ease-in-out infinite;
+}
+
+/* ========== METRICS GRID ========== */
+.metrics-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 16px;
   padding: 24px;
-  transition: var(--transition);
-  animation: fade-in .6s ease-out;
 }
-.card:hover { box-shadow: var(--shadow-hover); border-color: var(--accent); }
 
-.mono {
-  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
+.metric-card {
+  background: var(--bg-tertiary);
+  border-radius: var(--radius-md);
+  padding: 20px;
+  text-align: center;
+  border: 1px solid var(--border-color);
+}
+
+.metric-icon {
+  font-size: 32px;
+  margin-bottom: 12px;
+}
+
+.metric-label {
+  font-size: 12px;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
   font-weight: 600;
+  margin-bottom: 8px;
 }
 
-/* ---------- Result Cards ---------- */
-.result-card {
-  background: var(--card);
-  border: 2px solid var(--border);
-  border-radius: var(--radius);
+.metric-value {
+  font-size: 18px;
+  font-weight: 800;
+  color: var(--text-primary);
+  font-family: 'SF Mono', Monaco, 'Courier New', monospace;
+}
+
+.metric-value.small {
+  font-size: 14px;
+}
+
+/* ========== PROBABILITY SECTION ========== */
+.probability-section {
+  margin: 24px;
   padding: 24px;
-  box-shadow: var(--shadow);
+  background: var(--bg-tertiary);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--border-color);
+}
+
+.prob-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.prob-title {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+.prob-value-large {
+  font-size: 32px;
+  font-weight: 800;
+  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.prob-bar-container {
+  margin-top: 16px;
+}
+
+.prob-bar-track {
+  height: 16px;
+  background: var(--bg-secondary);
+  border-radius: 999px;
+  overflow: hidden;
+  border: 2px solid var(--border-color);
+  position: relative;
+}
+
+.prob-bar-fill {
+  height: 100%;
+  border-radius: 999px;
   position: relative;
   overflow: hidden;
+  transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.prob-bar-fill.ok {
+  background: linear-gradient(90deg, #10b981, #059669);
 }
-.result-card::before {
-  content:'';
-  position:absolute; top:0; left:0; right:0;
-  height:4px; background: var(--bg-gradient);
+
+.prob-bar-fill.warn {
+  background: linear-gradient(90deg, #f59e0b, #d97706);
+}
+
+.prob-bar-fill.neutral {
+  background: linear-gradient(90deg, #3b82f6, #2563eb);
 }
-.result-head {
-  display:flex; align-items:center; justify-content:space-between;
-  gap:12px; margin-bottom: 20px; flex-wrap: wrap;
+
+.shimmer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255, 255, 255, 0.3),
+    transparent
+  );
+  animation: shimmer 2s infinite;
 }
-.result-title {
-  display:flex; align-items:center; gap:12px;
-  font-size: 18px; font-weight: 900; letter-spacing: .3px;
+
+.prob-markers {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 8px;
+  font-size: 11px;
+  color: var(--text-muted);
+  font-weight: 600;
 }
-.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; }
+/* ========== DETAILS GRID ========== */
+.details-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 16px;
+  padding: 0 24px 24px;
+}
 
-.box {
-  border: 2px solid var(--border);
-  background: var(--card);
-  border-radius: 16px;
+.detail-box {
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
   padding: 20px;
-  transition: var(--transition);
+  display: flex;
+  align-items: center;
+  gap: 16px;
 }
-.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; }
+.detail-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: var(--radius-sm);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.detail-icon.ok {
+  background: linear-gradient(135deg, #10b981, #059669);
+  color: white;
+}
+
+.detail-icon.warn {
+  background: linear-gradient(135deg, #f59e0b, #d97706);
+  color: white;
+}
+
+.detail-icon.neutral {
+  background: linear-gradient(135deg, #3b82f6, #2563eb);
+  color: white;
+}
+
+.detail-content {
+  flex: 1;
+}
 
-.k {
-  color: var(--muted);
+.detail-label {
   font-size: 12px;
-  font-weight: 700;
+  color: var(--text-muted);
   text-transform: uppercase;
-  letter-spacing: .5px;
+  letter-spacing: 0.5px;
+  font-weight: 600;
+  margin-bottom: 4px;
 }
-.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;
+.detail-value {
+  font-size: 20px;
+  font-weight: 800;
+  color: var(--text-primary);
+  font-family: 'SF Mono', Monaco, '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);
+/* ========== DISCLAIMER ========== */
+.disclaimer {
+  margin: 0 24px 24px;
+  padding: 16px;
+  background: rgba(59, 130, 246, 0.1);
+  border: 1px solid rgba(59, 130, 246, 0.2);
+  border-radius: var(--radius-md);
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
   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%; } }
-
-.prob-txt { width: 60px; text-align:right; color: var(--text); font-weight: 900; font-size: 16px; }
-
-/* ---------- Info + Hint ---------- */
-.fine {
-  margin-top: 20px;
-  font-size: 12px;
-  color: var(--muted);
+  color: var(--text-secondary);
   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;
+
+.disclaimer svg {
+  color: var(--accent-primary);
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+
+/* ========== BATCH RESULTS ========== */
+.batch-results {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-xl);
+  overflow: hidden;
+  box-shadow: var(--shadow-lg);
+}
+
+.batch-header {
+  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
+  padding: 24px 28px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.batch-title {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 24px;
+  font-weight: 800;
+  color: white;
+}
+
+.batch-icon {
+  font-size: 32px;
+}
+
+.batch-count {
+  background: rgba(255, 255, 255, 0.2);
+  padding: 8px 16px;
+  border-radius: 999px;
+  font-size: 14px;
+  color: white;
+  font-weight: 600;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+.stats-showcase {
+  padding: 24px;
+}
+
+.stat-mega {
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-lg);
+  padding: 32px;
+  margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  position: relative;
+  overflow: hidden;
+}
+
+.stat-mega-icon {
+  width: 64px;
+  height: 64px;
+  border-radius: var(--radius-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 32px;
+  color: white;
+  flex-shrink: 0;
+}
+
+.stat-mega-icon.ok {
+  background: linear-gradient(135deg, #10b981, #059669);
+}
+
+.stat-mega-content {
+  flex: 1;
+}
+
+.stat-mega-label {
+  font-size: 14px;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+.stat-mega-value {
+  font-size: 48px;
+  font-weight: 800;
+  color: var(--text-primary);
+  line-height: 1;
+  margin-bottom: 8px;
+}
+
+.stat-mega-sub {
+  font-size: 16px;
   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;
+  font-weight: 500;
+}
+
+.stat-ring {
+  width: 100px;
+  height: 100px;
+  position: relative;
+}
+
+.stat-ring svg {
+  transform: rotate(-90deg);
+  width: 100%;
+  height: 100%;
+}
+
+.ring-bg {
+  fill: none;
+  stroke: var(--border-color);
+  stroke-width: 8;
+}
+
+.ring-fill {
+  fill: none;
+  stroke: url(#gradient);
+  stroke-width: 8;
+  stroke-linecap: round;
+  stroke-dasharray: 283;
+  transition: stroke-dashoffset 1s ease;
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 16px;
+}
+
+.stat-card {
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  padding: 20px;
+  text-align: center;
+}
+
+.stat-icon {
+  font-size: 32px;
+  margin-bottom: 12px;
+}
+
+.stat-label {
+  font-size: 12px;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+.stat-value {
+  font-size: 24px;
+  font-weight: 800;
+  color: var(--text-primary);
+  font-family: 'SF Mono', Monaco, 'Courier New', monospace;
+}
+
+.stat-value.small {
+  font-size: 16px;
+}
+
+.download-prompt {
+  margin-top: 24px;
+  padding: 20px;
+  background: rgba(59, 130, 246, 0.1);
+  border: 1px solid rgba(59, 130, 246, 0.2);
+  border-radius: var(--radius-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  font-size: 14px;
+  color: var(--text-primary);
+  font-weight: 600;
+}
+
+.download-prompt svg {
+  color: var(--accent-primary);
+}
+
+/* ========== AGE PREVIEW ========== */
+.age-preview-box {
+  margin-top: 12px;
+  padding: 16px 20px;
+  background: var(--bg-tertiary);
+  border: 2px dashed var(--border-color);
+  border-radius: var(--radius-md);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.preview-icon {
+  font-size: 24px;
+}
+
+.preview-content {
+  flex: 1;
+}
+
+.preview-label {
+  font-size: 12px;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+
+.preview-value {
+  font-size: 18px;
+  font-weight: 800;
+  color: var(--text-primary);
+  font-family: 'SF Mono', Monaco, 'Courier New', monospace;
+}
+
+/* ========== BUTTONS ========== */
+#predict-btn button, #batch-btn button {
+  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)) !important;
+  color: white !important;
+  border: none !important;
+  border-radius: var(--radius-md) !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 .wrap label {
-  color: var(--text) !important;
-  font-weight: 800 !important;
-}
-
-/* Textbox border + background */
-.gradio-container input[type="text"],
-.gradio-container textarea,
-.gradio-container .gr-textbox input,
-.gradio-container .gr-textbox textarea {
-  background: var(--card) !important;
-  color: var(--text) !important;
-  border: 2px solid var(--border) !important;
-  border-radius: 14px !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;
-}
-
-/* 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;
-}
-.gradio-container .gr-dropdown,
-.gradio-container div[role="combobox"] {
-  border: 2px solid var(--border) !important;
-  border-radius: 14px !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;
-}
-
-/* Radio: ensure dot shows + selection looks clean */
-.gradio-container input[type="radio"] {
-  accent-color: var(--accent) !important;
-  width: 16px !important;
-  height: 16px !important;
-}
-.gradio-container .gr-radio,
-.gradio-container .gr-radio * {
-  color: var(--text) !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;
-}
-
-/* File upload area styling (fixes batch tab "miscolored/off") */
-.gradio-container .gr-file,
-.gradio-container .gr-file * {
-  color: var(--text) !important;
-}
-.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;
-}
-.gradio-container .gr-file .dropzone:hover {
-  border-color: var(--accent) !important;
-}
-
-/* Dataframe preview styling */
-.gradio-container .gr-dataframe,
-.gradio-container .gr-dataframe * {
-  color: var(--text) !important;
-}
-.gradio-container .gr-dataframe table {
-  background: var(--card) !important;
-  border-collapse: separate !important;
-  border-spacing: 0 !important;
-}
-.gradio-container .gr-dataframe thead th {
-  background: rgba(102,126,234,.08) !important;
-  border-bottom: 2px solid var(--border) !important;
-}
-.gradio-container .gr-dataframe tbody td {
-  border-bottom: 1px solid var(--border) !important;
-}
-
-/* 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;
-}
-
-/* Responsive */
+  font-size: 16px !important;
+  font-weight: 700 !important;
+  box-shadow: var(--shadow-md) !important;
+  transition: all var(--transition-fast) !important;
+}
+
+#predict-btn button:hover, #batch-btn button:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-lg) !important;
+}
+
+/* ========== TABS ========== */
+.tabs {
+  border-bottom: 2px solid var(--border-color);
+  margin-bottom: 24px;
+}
+
+.tab-nav button {
+  background: transparent !important;
+  border: none !important;
+  border-bottom: 3px solid transparent !important;
+  color: var(--text-secondary) !important;
+  font-weight: 600 !important;
+  padding: 12px 24px !important;
+  transition: all var(--transition-fast) !important;
+}
+
+.tab-nav button.selected {
+  color: var(--accent-primary) !important;
+  border-bottom-color: var(--accent-primary) !important;
+}
+
+/* ========== INFO BOX ========== */
+.info-box {
+  background: rgba(139, 92, 246, 0.1);
+  border: 1px solid rgba(139, 92, 246, 0.2);
+  border-radius: var(--radius-md);
+  padding: 16px 20px;
+  margin-bottom: 20px;
+}
+
+.info-box strong {
+  color: var(--accent-secondary);
+  font-weight: 700;
+}
+
+/* ========== 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%; }
+  .header-top {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+  }
+  
+  .header-stats {
+    flex-direction: column;
+    width: 100%;
+  }
+  
+  .header-stat {
+    width: 100%;
+  }
+  
+  .header-text h1 {
+    font-size: 28px;
+  }
+  
+  .metrics-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .details-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .stat-mega {
+    flex-direction: column;
+    text-align: center;
+  }
+  
+  .stats-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .batch-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+  }
+}
+
+/* ========== GRADIO OVERRIDES ========== */
+.gr-button-primary {
+  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)) !important;
+  border: none !important;
 }
 
-/* Fade-in */
-@keyframes fade-in {
-  from { opacity: 0; transform: translateY(20px); }
-  to { opacity: 1; transform: translateY(0); }
+.gr-input, .gr-box {
+  border-color: var(--border-color) !important;
+  background: var(--bg-secondary) !important;
+}
+
+.gr-form {
+  background: var(--bg-secondary) !important;
+  border-color: var(--border-color) !important;
+}
+
+.gr-panel {
+  background: var(--bg-secondary) !important;
+  border-color: var(--border-color) !important;
 }
-.fade-in { animation: fade-in .6s ease-out; }
 """
 
-theme = gr.themes.Base(
+JS = r"""
+function() {
+  const root = document.documentElement;
+  const currentTheme = root.getAttribute('data-theme');
+  const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+  root.setAttribute('data-theme', newTheme);
+  localStorage.setItem('theme', newTheme);
+  const btn = document.querySelector('#theme-toggle-btn button');
+  if (btn) {
+    btn.textContent = newTheme === 'dark' ? '☀️ Light Mode' : '🌙 Dark Mode';
+  }
+  return newTheme;
+}
+"""
+
+INIT_JS = r"""
+function() {
+  const savedTheme = localStorage.getItem('theme') || 'light';
+  document.documentElement.setAttribute('data-theme', savedTheme);
+  const btn = document.querySelector('#theme-toggle-btn button');
+  if (btn) {
+    btn.textContent = savedTheme === 'dark' ? '☀️ Light Mode' : '🌙 Dark Mode';
+  }
+}
+"""
+
+theme = gr.themes.Soft(
     primary_hue="blue",
     secondary_hue="purple",
     neutral_hue="slate",
     radius_size="lg",
-    font=[gr.themes.GoogleFont("Inter"), "ui-sans-serif", "system-ui", "sans-serif"],
+    font=[gr.themes.GoogleFont("Inter"), "system-ui", "sans-serif"],
 )
 
-# =========================
-# UI
-# =========================
-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. Age parsing is shown transparently.</p>
+with gr.Blocks(theme=theme, css=CSS, js=INIT_JS, title="CI Outcome Predictor") as demo:
+    gr.HTML(f"""
+    <div class="app-header">
+      <div class="header-content">
+        <div class="header-top">
+          <div class="header-title">
+            <div class="header-icon">🔬</div>
+            <div class="header-text">
+              <h1>CI Outcome Predictor</h1>
+              <div class="subtitle">Advanced ML-powered Cochlear Implant Success Analysis</div>
+            </div>
           </div>
-        """)
-
-        with gr.Tabs():
-            with gr.Tab("Single Prediction"):
-                with gr.Row():
-                    with gr.Column(scale=1):
-                        with gr.Group(elem_classes=["card"]):
-                            gene_in = gr.Dropdown(
-                                choices=gene_choices,
-                                value=gene_choices[0] if gene_choices else None,
-                                label="Gene",
-                                filterable=True,
-                            )
-                            age_in = gr.Textbox(
-                                label="Age",
-                                placeholder="Examples: 1.11  |  1.6YRS  |  2.3"
-                            )
-                            parse_mode = gr.Radio(
-                                choices=[
-                                    "Decimal (1.11 = 1.11 years)",
-                                    "Years.Months (1.11 = 1y 11m)"
-                                ],
-                                value="Decimal (1.11 = 1.11 years)",
-                                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"]
-                        )
-
-                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])
-
-                btn.click(
-                    fn=predict_single,
-                    inputs=[gene_in, age_in, parse_mode],
-                    outputs=[single_out]
-                )
-
-            with gr.Tab("Batch Prediction (CSV)"):
-                with gr.Group(elem_classes=["card"]):
-                    gr.Markdown(
-                        "**Minimum required columns:** `Gene`, `Age`",
-                        elem_classes=["mono"]
+        </div>
+        <div class="header-stats">
+          <div class="header-stat">
+            <div class="header-stat-label">Gene Options</div>
+            <div class="header-stat-value">{len(gene_choices) if APP_READY else 0}</div>
+          </div>
+          <div class="header-stat">
+            <div class="header-stat-label">Model Features</div>
+            <div class="header-stat-value">{len(input_cols) if APP_READY else 0}</div>
+          </div>
+          <div class="header-stat">
+            <div class="header-stat-label">Prediction Models</div>
+            <div class="header-stat-value">2</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    """)
+
+    theme_state = gr.State("light")
+    theme_btn = gr.Button("🌙 Dark Mode", elem_id="theme-toggle-btn")
+    theme_btn.click(fn=None, js=JS, outputs=theme_state)
+
+    with gr.Tabs():
+        with gr.Tab("🎯 Single Prediction"):
+            with gr.Row():
+                with gr.Column(scale=1):
+                    gr.HTML('<div class="section-title">📝 Input Parameters</div>')
+                    gene_in = gr.Dropdown(
+                        choices=gene_choices,
+                        value=gene_choices[0] if gene_choices else None,
+                        label="🧬 Select Gene",
+                        info="Choose the gene variant for analysis",
+                        filterable=True,
                     )
-
-                    parse_mode_b = gr.Radio(
+                    age_in = gr.Textbox(
+                        label="📅 Patient Age",
+                        placeholder="Examples: 1.11 | 1.6YRS | 2.3",
+                        info="Enter age in supported format"
+                    )
+                    parse_mode = gr.Radio(
                         choices=[
                             "Decimal (1.11 = 1.11 years)",
                             "Years.Months (1.11 = 1y 11m)"
                         ],
                         value="Decimal (1.11 = 1.11 years)",
-                        label="Age parsing"
+                        label="⚙️ Age Parsing Mode",
+                        info="Select how age should be interpreted"
+                    )
+
+                    age_hint = gr.HTML(value=age_preview("", "Decimal (1.11 = 1.11 years)"))
+                    btn = gr.Button("🚀 Run Prediction", elem_id="predict-btn", size="lg")
+
+                with gr.Column(scale=1):
+                    gr.HTML('<div class="section-title">📊 Prediction Results</div>')
+                    single_out = gr.HTML(
+                        value=_missing_files_message() if not APP_READY else
+                        "<div style='text-align:center; padding:60px 20px; color:var(--text-muted);'>👈 Enter parameters and click 'Run Prediction' to see results</div>"
                     )
 
-                    csv_in = gr.File(file_types=[".csv"], label="Upload CSV")
-                    run_b = gr.Button("Run Batch Prediction", elem_id="primaryBtn")
+            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])
 
-                    batch_summary = gr.HTML(value="")
-                    preview = gr.Dataframe(label="Preview (first 20 rows)", wrap=True)
-                    out_file = gr.File(label="Download predictions_output.csv")
+            btn.click(fn=predict_single, inputs=[gene_in, age_in, parse_mode], outputs=[single_out])
 
-                run_b.click(
-                    fn=predict_batch,
-                    inputs=[csv_in, parse_mode_b],
-                    outputs=[batch_summary, preview, out_file]
-                )
+        with gr.Tab("📊 Batch Prediction (CSV)"):
+            gr.HTML('<div class="section-title">📁 Batch Processing</div>')
 
-# 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")
+            gr.HTML(f"""
+            <div class="info-box">
+              <strong>📋 Requirements:</strong> Your CSV must include <strong>Gene</strong> and <strong>Age</strong> columns.
+              Additional features will be auto-filled. Model expects <strong>{len(input_cols) if APP_READY else 0}</strong> total feature columns.
+            </div>
+            """)
+
+            parse_mode_b = gr.Radio(
+                choices=[
+                    "Decimal (1.11 = 1.11 years)",
+                    "Years.Months (1.11 = 1y 11m)"
+                ],
+                value="Decimal (1.11 = 1.11 years)",
+                label="⚙️ Age Parsing Mode",
+                info="How should ages be interpreted?"
+            )
+
+            csv_in = gr.File(file_types=[".csv"], label="📤 Upload CSV File", file_count="single")
+            run_b = gr.Button("🚀 Run Batch Prediction", elem_id="batch-btn", size="lg")
+
+            batch_summary = gr.HTML(value="")
+            gr.HTML('<div class="section-title" style="margin-top:24px;">👀 Preview (First 20 Rows)</div>')
+            batch_preview = gr.Dataframe(headers=None, interactive=False, wrap=True)
+
+            gr.HTML('<div class="section-title" style="margin-top:24px;">💾 Download Results</div>')
+            batch_file = gr.File(label="📥 Download Full Results CSV")
+
+            run_b.click(fn=predict_batch, inputs=[csv_in, parse_mode_b], outputs=[batch_summary, batch_preview, batch_file])
 
 if __name__ == "__main__":
-    demo.queue().launch(
-        share=(not IS_SPACES),
-        show_error=False,
-        quiet=True
-    )
+    # HF Spaces-safe launch (no share=True)
+    port = int(os.getenv("PORT", "7860"))
+    demo.launch(server_name="0.0.0.0", server_port=port, show_error=False)