Update app.py

app.py

@@ -1,12 +1,14 @@
 """
-app.py — Video Verifier & Sentiment Analyzer
-Gradio dark-mode application.
-fetcher.py, analyzer.py, charts.py are UNCHANGED — only this file replaces the Streamlit version.
-
-Gradio 6.x compatibility notes:
-  - css= and theme= go on launch(), NOT on gr.Blocks()
-  - gr.Dataframe uses max_height= (not height=)
-  - show_api= has been removed from launch() in Gradio 6.x
+app.py — Video Verifier & Sentiment Analyzer  (Gradio 6.x)
+
+Fixes applied vs. original:
+  1. API key NEVER displayed in the UI — read from YT_API_KEY env var only.
+  2. All chart/plot outputs guaranteed to return valid go.Figure objects.
+  3. Dark theme enforced across the entire viewport (no white half-screen).
+  4. Layout fills the full browser width.
+  5. Gradio 6.x compatibility: css/theme go to launch(), not Blocks().
+  6. show_api removed (not valid in Gradio 6.x).
+  7. gr.Dataframe uses max_height= (not height=).
 """
 
 import os
@@ -36,13 +38,14 @@ from charts import (
     keyword_comparison,
 )
 
-# ══════════════════════════════════════════════════════════════════════════════
-#  CSS — same dark palette as the Streamlit version
-# ══════════════════════════════════════════════════════════════════════════════
+# ═══════════════════════════════════════════════════════════════════════════════
+#  CSS  — full-viewport dark theme, zero white bleed
+# ═══════════════════════════════════════════════════════════════════════════════
 
 CSS = """
 @import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Syne:wght@400;600;700;800&family=IBM+Plex+Sans:wght@300;400;500&display=swap');
 
+/* ── Variables ─────────────────────────────────────────────────────────────── */
 :root {
     --bg:     #0d0f14;
     --card:   #13161e;
@@ -56,130 +59,326 @@ CSS = """
     --blue:   #4a8eff;
 }
 
-body, .gradio-container { background: var(--bg) !important; font-family: 'IBM Plex Sans', sans-serif !important; color: var(--text) !important; max-width: 1400px !important; margin: 0 auto; }
-footer { display: none !important; }
-
-/* Panels */
-.gr-group, .gr-box, .gr-panel, div[class*="block"] { background: var(--card) !important; border: 1px solid var(--border) !important; border-radius: 12px !important; }
+/* ── Force dark everywhere — prevent white bleed ────────────────────────────── */
+html, body {
+    background: var(--bg) !important;
+    color:      var(--text) !important;
+    margin: 0; padding: 0;
+}
+.gradio-container, #root, #app, main, .main, .wrap, .svelte-1kyws56 {
+    background: var(--bg) !important;
+    max-width: 100% !important;
+    width: 100% !important;
+    margin: 0 auto !important;
+    padding: 0 1.5rem !important;
+    box-sizing: border-box !important;
+}
+/* kill Gradio's default white blocks */
+.block, .wrap, .panel, .padded, div.form,
+div[class*="block"], div[class*="wrap"],
+div[class*="panel"], div[class*="gap"],
+.gap { background: transparent !important; border: none !important; }
+
+/* ── Cards / Groups ─────────────────────────────────────────────────────────── */
+.gr-group, .gr-box, .vv-section {
+    background: var(--card) !important;
+    border: 1px solid var(--border) !important;
+    border-radius: 12px !important;
+    padding: 1rem 1.25rem !important;
+}
 
-/* Tabs */
-.tab-nav button { background: transparent !important; border: none !important; color: var(--dim) !important; font-family: 'DM Mono', monospace !important; font-size: 0.82rem !important; letter-spacing: 0.05em !important; border-bottom: 2px solid transparent !important; padding: 0.5rem 1.2rem !important; transition: color 0.2s; }
-.tab-nav button.selected { color: var(--cyan) !important; border-bottom-color: var(--cyan) !important; }
+/* ── Tabs ──────────────────────────────────────────────────────────────────── */
+.tab-nav button {
+    background: transparent !important;
+    border: none !important;
+    color: var(--dim) !important;
+    font-family: 'DM Mono', monospace !important;
+    font-size: 0.82rem !important;
+    letter-spacing: 0.05em !important;
+    border-bottom: 2px solid transparent !important;
+    padding: 0.5rem 1.2rem !important;
+    transition: color 0.18s;
+}
+.tab-nav button.selected {
+    color: var(--cyan) !important;
+    border-bottom-color: var(--cyan) !important;
+}
 .tab-nav { border-bottom: 1px solid var(--border) !important; }
 
-/* Inputs */
-input[type="text"], input[type="password"], textarea { background: #1a1d27 !important; border: 1px solid var(--border) !important; color: var(--text) !important; border-radius: 8px !important; font-family: 'DM Mono', monospace !important; font-size: 0.88rem !important; }
-input:focus, textarea:focus { border-color: var(--cyan) !important; box-shadow: 0 0 0 2px rgba(0,212,255,0.15) !important; outline: none !important; }
-label, .gr-label { color: var(--dim) !important; font-family: 'DM Mono', monospace !important; font-size: 0.75rem !important; letter-spacing: 0.08em !important; text-transform: uppercase; }
-
-/* Buttons */
-button.primary, button[variant="primary"] { background: linear-gradient(135deg, var(--cyan), var(--blue)) !important; border: none !important; color: var(--bg) !important; font-weight: 700 !important; font-family: 'DM Mono', monospace !important; border-radius: 8px !important; letter-spacing: 0.06em !important; }
-button.secondary { background: rgba(0,212,255,0.08) !important; border: 1px solid var(--cyan) !important; color: var(--cyan) !important; border-radius: 8px !important; font-family: 'DM Mono', monospace !important; }
-button:hover { opacity: 0.88; transform: translateY(-1px); transition: all 0.15s; }
-
-/* Dropdown */
-select { background: #1a1d27 !important; border: 1px solid var(--border) !important; color: var(--text) !important; border-radius: 8px !important; }
+/* ── Inputs ────────────────────────────────────────────────────────────────── */
+input[type="text"], input[type="password"], input[type="number"], textarea, select {
+    background: #1a1d27 !important;
+    border: 1px solid var(--border) !important;
+    color: var(--text) !important;
+    border-radius: 8px !important;
+    font-family: 'DM Mono', monospace !important;
+    font-size: 0.88rem !important;
+}
+input:focus, textarea:focus, select:focus {
+    border-color: var(--cyan) !important;
+    box-shadow: 0 0 0 2px rgba(0,212,255,0.15) !important;
+    outline: none !important;
+}
+label, .gr-label, span.svelte-1b6s6s {
+    color: var(--dim) !important;
+    font-family: 'DM Mono', monospace !important;
+    font-size: 0.75rem !important;
+    letter-spacing: 0.08em !important;
+    text-transform: uppercase;
+}
 
-/* Slider */
+/* ── Slider ────────────────────────────────────────────────────────────────── */
 input[type="range"] { accent-color: var(--cyan); }
 
-/* Dataframe */
-.gr-dataframe table { background: var(--card) !important; border-collapse: collapse; width: 100%; }
-.gr-dataframe th { background: #1a1d27 !important; color: var(--cyan) !important; font-family: 'DM Mono', monospace !important; font-size: 0.75rem !important; padding: 6px 10px; border-bottom: 1px solid var(--border); }
-.gr-dataframe td { color: var(--text) !important; font-size: 0.78rem !important; padding: 5px 10px; border-bottom: 1px solid var(--border); }
+/* ── Buttons ───────────────────────────────────────────────────────────────── */
+button.primary, button[variant="primary"], .primary {
+    background: linear-gradient(135deg, var(--cyan), var(--blue)) !important;
+    border: none !important;
+    color: #0d0f14 !important;
+    font-weight: 700 !important;
+    font-family: 'DM Mono', monospace !important;
+    border-radius: 8px !important;
+    letter-spacing: 0.06em !important;
+}
+button.secondary {
+    background: rgba(0,212,255,0.08) !important;
+    border: 1px solid var(--cyan) !important;
+    color: var(--cyan) !important;
+    border-radius: 8px !important;
+    font-family: 'DM Mono', monospace !important;
+}
+button:hover { opacity: 0.88; transform: translateY(-1px); transition: all 0.15s; }
+
+/* ── Dropdowns ─────────────────────────────────────────────────────────────── */
+.dropdown, ul[role="listbox"], li[role="option"] {
+    background: #1a1d27 !important;
+    border-color: var(--border) !important;
+    color: var(--text) !important;
+}
+li[role="option"]:hover { background: #242736 !important; }
+
+/* ── Dataframe ─────────────────────────────────────────────────────────────── */
+.gr-dataframe, table { background: var(--card) !important; }
+.gr-dataframe th {
+    background: #1a1d27 !important;
+    color: var(--cyan) !important;
+    font-family: 'DM Mono', monospace !important;
+    font-size: 0.72rem !important;
+    padding: 6px 10px;
+    border-bottom: 1px solid var(--border);
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+}
+.gr-dataframe td {
+    color: var(--text) !important;
+    font-size: 0.77rem !important;
+    padding: 5px 10px;
+    border-bottom: 1px solid var(--border);
+}
 .gr-dataframe tr:hover td { background: rgba(0,212,255,0.04) !important; }
 
-/* Shared HTML helpers */
-.vv-hero { font-family: 'Syne', sans-serif; font-size: 1.6rem; font-weight: 800; background: linear-gradient(135deg, #00d4ff, #4a8eff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: -0.02em; line-height: 1.2; }
-.vv-section-title { font-family: 'Syne', sans-serif; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #5a6070; margin-bottom: 0.5rem; }
-.vv-card { background: #13161e; border: 1px solid #1e2330; border-radius: 12px; padding: 1.2rem 1.4rem; margin-bottom: 0.8rem; }
-.vv-stat { display: inline-block; background: #1a1d27; border: 1px solid #1e2330; border-radius: 6px; padding: 0.25rem 0.75rem; font-family: 'DM Mono', monospace; font-size: 0.78rem; color: #00d4ff; margin: 0.15rem 0.2rem; }
-.vv-badge-green { display: inline-block; background: rgba(0,229,160,0.12); border: 1px solid #00e5a0; color: #00e5a0; border-radius: 20px; padding: 0.3rem 1rem; font-size: 0.82rem; font-family: 'DM Mono', monospace; }
-.vv-badge-red { display: inline-block; background: rgba(255,71,87,0.12); border: 1px solid #ff4757; color: #ff4757; border-radius: 20px; padding: 0.3rem 1rem; font-size: 0.82rem; font-family: 'DM Mono', monospace; }
-.vv-badge-amber { display: inline-block; background: rgba(255,179,71,0.12); border: 1px solid #ffb347; color: #ffb347; border-radius: 20px; padding: 0.3rem 1rem; font-size: 0.82rem; font-family: 'DM Mono', monospace; }
-.vv-reasoning { background: #0d1119; border-left: 3px solid #ffb347; padding: 0.75rem 1rem; border-radius: 0 8px 8px 0; font-size: 0.83rem; color: #c0c4cc; line-height: 1.65; font-family: 'IBM Plex Sans', sans-serif; }
-.vv-tag { display: inline-block; background: #1a1d27; border: 1px solid #1e2330; border-radius: 4px; padding: 2px 8px; font-family: 'DM Mono', monospace; font-size: 0.7rem; color: #8090a0; margin: 2px; }
+/* ── Accordion ─────────────────────────────────────────────────────────────── */
+details > summary {
+    color: var(--dim) !important;
+    font-family: 'DM Mono', monospace !important;
+    font-size: 0.82rem !important;
+    cursor: pointer;
+    list-style: none;
+}
+details[open] > summary { color: var(--cyan) !important; }
+
+/* ── Plot containers ───────────────────────────────────────────────────────── */
+.js-plotly-plot, .plotly { background: transparent !important; }
+.modebar { display: none !important; }
+
+/* ── Scrollbar ─────────────────────────────────────────────────────────────── */
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: var(--bg); }
+::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: var(--dim); }
+
+/* ════════════════════════════════════════════════════════════════════════════ */
+/*  Shared HTML component classes                                              */
+/* ════════════════════════════════════════════════════════════════════════════ */
+.vv-hero {
+    font-family: 'Syne', sans-serif;
+    font-size: 1.65rem;
+    font-weight: 800;
+    background: linear-gradient(135deg, #00d4ff, #4a8eff);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    letter-spacing: -0.02em;
+    line-height: 1.2;
+}
+.vv-section-title {
+    font-family: 'Syne', sans-serif;
+    font-size: 0.68rem;
+    font-weight: 700;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+    color: #5a6070;
+    margin-bottom: 0.5rem;
+    margin-top: 0;
+}
+.vv-card {
+    background: #13161e;
+    border: 1px solid #1e2330;
+    border-radius: 12px;
+    padding: 1.1rem 1.3rem;
+    margin-bottom: 0.7rem;
+}
+.vv-stat {
+    display: inline-block;
+    background: #1a1d27;
+    border: 1px solid #1e2330;
+    border-radius: 6px;
+    padding: 0.25rem 0.75rem;
+    font-family: 'DM Mono', monospace;
+    font-size: 0.77rem;
+    color: #00d4ff;
+    margin: 0.15rem 0.2rem;
+}
+.vv-badge-green {
+    display: inline-block;
+    background: rgba(0,229,160,0.12);
+    border: 1px solid #00e5a0;
+    color: #00e5a0;
+    border-radius: 20px;
+    padding: 0.32rem 1.1rem;
+    font-size: 0.85rem;
+    font-family: 'DM Mono', monospace;
+    font-weight: 600;
+}
+.vv-badge-red {
+    display: inline-block;
+    background: rgba(255,71,87,0.12);
+    border: 1px solid #ff4757;
+    color: #ff4757;
+    border-radius: 20px;
+    padding: 0.32rem 1.1rem;
+    font-size: 0.85rem;
+    font-family: 'DM Mono', monospace;
+    font-weight: 600;
+}
+.vv-badge-amber {
+    display: inline-block;
+    background: rgba(255,179,71,0.12);
+    border: 1px solid #ffb347;
+    color: #ffb347;
+    border-radius: 20px;
+    padding: 0.32rem 1.1rem;
+    font-size: 0.85rem;
+    font-family: 'DM Mono', monospace;
+    font-weight: 600;
+}
+.vv-reasoning {
+    background: #0d1119;
+    border-left: 3px solid #ffb347;
+    padding: 0.8rem 1rem;
+    border-radius: 0 8px 8px 0;
+    font-size: 0.83rem;
+    color: #c0c4cc;
+    line-height: 1.65;
+    font-family: 'IBM Plex Sans', sans-serif;
+    margin-top: 8px;
+}
+.vv-tag {
+    display: inline-block;
+    background: #1a1d27;
+    border: 1px solid #1e2330;
+    border-radius: 4px;
+    padding: 2px 8px;
+    font-family: 'DM Mono', monospace;
+    font-size: 0.7rem;
+    color: #8090a0;
+    margin: 2px;
+}
 .vv-stat-big-green { font-family: 'DM Mono', monospace; font-size: 1.6rem; font-weight: 700; color: #00e5a0; margin: 0; }
 .vv-stat-big-red   { font-family: 'DM Mono', monospace; font-size: 1.6rem; font-weight: 700; color: #ff4757; margin: 0; }
 .vv-stat-big-dim   { font-family: 'DM Mono', monospace; font-size: 1.6rem; font-weight: 700; color: #5a6070; margin: 0; }
-.vv-log-line { font-size: 0.72rem; color: #5a6070; font-family: 'DM Mono', monospace; margin: 2px 0; }
+.vv-log-line       { font-size: 0.72rem; color: #5a6070; font-family: 'DM Mono', monospace; margin: 2px 0; }
+.vv-hr             { border: none; border-top: 1px solid #1e2330; margin: 1.1rem 0; }
 """
 
-# ══════════════════════════════════════════════════════════════════════════════
-#  SHARED HELPERS
-# ══════════════════════════════════════════════════════════════════════════════
+# ═══════════════════════════════════════════════════════════════════════════════
+#  HELPERS
+# ═══════════════════════════════════════════════════════════════════════════════
 
-def _empty_plotly():
+def _empty_plotly(msg: str = "Run analysis to see data", h: int = 230):
     import plotly.graph_objects as go
     fig = go.Figure()
     fig.update_layout(
         paper_bgcolor="rgba(0,0,0,0)", plot_bgcolor="rgba(0,0,0,0)",
-        font=dict(color="#5a6070"), margin=dict(l=10, r=10, t=10, b=10), height=200,
+        font=dict(color="#5a6070"), margin=dict(l=10, r=10, t=10, b=10), height=h,
+    )
+    fig.add_annotation(
+        text=msg, x=0.5, y=0.5, xref="paper", yref="paper",
+        showarrow=False, font=dict(size=12, color="#5a6070"),
     )
-    fig.add_annotation(text="Run analysis to see data", x=0.5, y=0.5,
-                       showarrow=False, font=dict(size=13, color="#5a6070"))
     return fig
 
 
 def _blank_outputs(status_msg: str):
-    """18-element tuple matching ALL_OUTPUTS when nothing has run yet."""
+    """18-tuple for ALL_OUTPUTS when nothing has run."""
     ep = _empty_plotly()
     return (
-        f'<p style="color:#ff4757;font-family:DM Mono,monospace;padding:8px">{status_msg}</p>',  # status
-        "<p class='vv-log-line'>—</p>",                                                           # log
-        "<div style='padding:3rem;text-align:center;color:#5a6070'>No data yet.</div>",           # left panel
-        "", "",                                                                                   # badge, reasoning
-        ep, ep, ep, ep, ep, ep,                                                                   # 6 charts
-        "", "", "",                                                                               # 3 stat boxes
-        pd.DataFrame(), pd.DataFrame(), pd.DataFrame(), pd.DataFrame(),                           # 4 dataframes
+        f'<p style="color:#ff4757;font-family:DM Mono,monospace;padding:8px">{status_msg}</p>',
+        "<p class='vv-log-line'>��</p>",
+        "<div style='padding:3rem;text-align:center;color:#5a6070;font-family:DM Mono,monospace'>No data yet.</div>",
+        "", "",
+        ep, ep, ep, ep, ep, ep,
+        "", "", "",
+        pd.DataFrame(), pd.DataFrame(), pd.DataFrame(), pd.DataFrame(),
     )
 
 
-# ══════════════════════════════════════════════════════════════════════════════
+# ═══════════════════════════════════════════════════════════════════════════════
 #  PIPELINE
-# ══════════════════════════════════════════════════════════════════════════════
+# ═══════════════════════════════════════════════════════════════════════════════
 
 def run_pipeline(
     url_or_id: str,
-    api_key: str,
     sentiment_method: str,
     max_comments: int,
     progress=gr.Progress(track_tqdm=False),
 ):
-    """
-    Generator function — yields one final tuple when all work is done.
-    gr.Progress() gives the user an animated progress bar while waiting.
-    """
-    # ── Input guards ──────────────────────────────────────────────────────────
+    # ── Read API key from environment (NEVER from UI) ──────────────────────────
+    api_key = os.environ.get("YT_API_KEY", "").strip()
+
+    # ── Guards ─────────────────────────────────────────────────────────────────
     if not (url_or_id or "").strip():
         yield _blank_outputs("⚠️ Please enter a YouTube URL or video ID.")
         return
 
     video_id = extract_video_id(url_or_id.strip())
     if not video_id:
-        yield _blank_outputs("❌ Could not parse a valid YouTube video ID from that input.")
+        yield _blank_outputs("❌ Could not parse a valid YouTube video ID.")
         return
 
-    if not (api_key or "").strip():
-        yield _blank_outputs("⚠️ YouTube API key is required. Set it in the ⚙️ Settings tab.")
+    if not api_key:
+        yield _blank_outputs(
+            "⚠️ YouTube API key not found. "
+            "Set the <code>YT_API_KEY</code> environment variable / Space secret."
+        )
         return
 
-    # 1 ── Metadata ─────────────────────────────────────────────────────────────
+    # 1 — Metadata ──────────────────────────────────────────────────────────────
     progress(0.05, desc="Fetching video metadata…")
-    meta, err_msg = fetch_video_metadata(video_id, api_key)
-    if err_msg:
-        yield _blank_outputs(f"❌ {err_msg}")
+    meta, err = fetch_video_metadata(video_id, api_key)
+    if err:
+        yield _blank_outputs(f"❌ {err}")
         return
 
-    # 2 ── Transcript ────────────────────────────────────────────────────────────
+    # 2 — Transcript ────────────────────────────────────────────────────────────
     progress(0.20, desc="Fetching transcript…")
     transcript, t_status = fetch_transcript(video_id)
 
-    # 3 ── Comments ──────────────────────────────────────────────────────────────
+    # 3 — Comments ──────────────────────────────────────────────────────────────
     progress(0.35, desc=f"Fetching up to {max_comments} comments…")
     comments_df, c_status = fetch_comments(video_id, api_key, max_comments=int(max_comments))
 
-    # 4 ── Misinformation detection ──────────────────────────────────────────────
+    # 4 — Misinformation ──────────────────────────────────────���─────────────────
     progress(0.50, desc="Running misinformation detection…")
     misinfo = detect_misinformation(
         text=f"{meta['title']} {meta['description']}",
@@ -188,28 +387,28 @@ def run_pipeline(
         video_transcript=transcript,
     )
 
-    # 5 ── Keywords ──────────────────────────────────────────────────────────────
+    # 5 — Keywords ──────────────────────────────────────────────────────────────
     keywords = extract_keywords(
         f"{meta['title']} {meta['description']} {transcript}",
         meta["tags"],
     )
 
-    # 6 ── Sentiment (batched) ───────────────────────────────────────────────────
+    # 6 — Sentiment ─────────────────────────────────────────────────────────────
     sentiments, sent_sum, pos_kw, neg_kw = [], {}, [], []
 
     if not comments_df.empty:
         texts = comments_df["text"].fillna("").tolist()
-        batch_size = 64
-        for i in range(0, len(texts), batch_size):
-            chunk = texts[i: i + batch_size]
-            sentiments += analyze_sentiment_batch(chunk, method=sentiment_method, batch_size=batch_size)
-            frac = 0.60 + 0.30 * min((i + batch_size) / max(len(texts), 1), 1.0)
-            progress(frac, desc=f"Sentiment: {min(i+batch_size, len(texts))}/{len(texts)}…")
+        batch = 64
+        for i in range(0, len(texts), batch):
+            chunk = texts[i: i + batch]
+            sentiments += analyze_sentiment_batch(chunk, method=sentiment_method, batch_size=batch)
+            frac = 0.60 + 0.30 * min((i + batch) / max(len(texts), 1), 1.0)
+            progress(frac, desc=f"Sentiment {min(i+batch, len(texts))}/{len(texts)}…")
 
         sent_sum = sentiment_summary(sentiments)
         pos_kw, neg_kw = sentiment_weighted_keywords(comments_df, sentiments)
 
-    # 7 ── Assemble and yield ────────────────────────────────────────────────────
+    # 7 — Build outputs ─────────────────────────────────────────────────────────
     progress(0.97, desc="Building charts…")
     yield _build_outputs(
         meta=meta, video_id=video_id, transcript=transcript,
@@ -218,50 +417,51 @@ def run_pipeline(
         pos_kw=pos_kw, neg_kw=neg_kw,
         status_log=[
             f"✅ Metadata: {meta['title'][:55]}",
-            t_status, c_status,
+            t_status,
+            c_status,
             f"🔬 Misinfo score: {misinfo['confidence_pct']}%",
             *(
                 [f"💬 Sentiment: {sent_sum['pos_pct']}% pos / {sent_sum['neg_pct']}% neg"]
-                if sent_sum else ["💬 Skipped (no comments available)"]
+                if sent_sum
+                else ["💬 No comments — sentiment skipped"]
             ),
         ],
     )
 
 
-# ══════════════════════════════════════════════════════════════════════════════
+# ═══════════════════════════════════════════════════════════════════════════════
 #  OUTPUT BUILDER
-# ══════════════════════════════════════════════════════════════════════════════
+# ═══════════════════════════════════════════════════════════════════════════════
 
 def _build_outputs(
     meta, video_id, transcript, comments_df,
     misinfo, keywords, sentiments, sent_sum, pos_kw, neg_kw, status_log,
 ):
-    # ── Status ────────────────────────────────────────────────────────────────
+    # ── Status ─────────────────────────────────────────────────────────────────
     status_html = (
         '<p style="color:#00e5a0;font-family:DM Mono,monospace;font-size:0.82rem;padding:6px 0">'
-        '✅ Analysis complete</p>'
+        "✅ Analysis complete</p>"
     )
 
-    # ── Log ───────────────────────────────────────────────────────────────────
+    # ── Log ────────────────────────────────────────────────────────────────────
     log_html = "".join(f'<p class="vv-log-line">{line}</p>' for line in status_log)
 
-    # ── Left panel (video info) ────────────────────────────────────────────────
+    # ── Left panel ─────────────────────────────────────────────────────────────
     thumb_html = (
         f'<img src="{meta["thumbnail_url"]}" '
-        f'style="width:100%;border-radius:8px;margin-bottom:8px">'
+        'style="width:100%;border-radius:8px;margin-bottom:8px;display:block">'
         if meta.get("thumbnail_url") else ""
     )
     tag_html = "".join(f'<span class="vv-tag">#{t}</span>' for t in meta.get("tags", [])[:20])
-    desc_text = meta.get("description", "")
-    desc_short = desc_text[:1200] + ("…" if len(desc_text) > 1200 else "")
+    desc_short = meta.get("description", "")[:1200]
     word_count = len(transcript.split()) if transcript else 0
-    transcript_short = (transcript[:2500] + ("…" if len(transcript) > 2500 else "")) if transcript else "(not available)"
+    transcript_short = (transcript[:2500] + "…" if len(transcript) > 2500 else transcript) if transcript else "(not available)"
 
     left_html = f"""
     {thumb_html}
     <a href="https://www.youtube.com/watch?v={video_id}" target="_blank"
        style="display:block;text-align:center;font-family:'DM Mono',monospace;
-              font-size:0.76rem;color:#5a6070;text-decoration:none;margin:4px 0 10px">
+              font-size:0.75rem;color:#5a6070;text-decoration:none;margin:4px 0 10px">
       ▶ Open on YouTube
     </a>
     <div class="vv-card">
@@ -273,32 +473,27 @@ def _build_outputs(
         by <b style="color:#b0b4c0">{meta['channel_title']}</b> · {meta['published_at']}
       </p>
     </div>
+
     <p class="vv-section-title">Metrics</p>
     <span class="vv-stat">👁 {meta['view_count']:,}</span>
     <span class="vv-stat">👍 {meta['like_count']:,}</span>
     <span class="vv-stat">💬 {meta['comment_count']:,}</span>
     <span class="vv-stat">⏱ {meta['duration']}</span>
+
     <p class="vv-section-title" style="margin-top:1rem">Tags</p>
     {tag_html or '<span style="color:#5a6070;font-size:0.78rem">(none)</span>'}
+
     <details style="margin-top:1rem">
-      <summary style="cursor:pointer;font-family:'DM Mono',monospace;font-size:0.78rem;color:#5a6070">
-        📄 Description
-      </summary>
-      <p style="font-size:0.78rem;color:#8090a0;line-height:1.65;white-space:pre-wrap;margin-top:6px">
-        {desc_short}
-      </p>
+      <summary>📄 Description</summary>
+      <p style="font-size:0.78rem;color:#8090a0;line-height:1.65;white-space:pre-wrap;margin-top:6px">{desc_short}</p>
     </details>
     <details style="margin-top:0.5rem">
-      <summary style="cursor:pointer;font-family:'DM Mono',monospace;font-size:0.78rem;color:#5a6070">
-        📝 Transcript ({word_count} words)
-      </summary>
-      <p style="font-size:0.75rem;color:#8090a0;line-height:1.65;margin-top:6px">
-        {transcript_short}
-      </p>
+      <summary>📝 Transcript ({word_count} words)</summary>
+      <p style="font-size:0.75rem;color:#8090a0;line-height:1.65;margin-top:6px">{transcript_short}</p>
     </details>
     """
 
-    # ── Misinfo badge + reasoning ──────────────────────────────────────────────
+    # ── Misinfo badge ──────────────────────────────────────────────────────────
     score = misinfo["score"]
     if score < 0.35:
         badge_html = '<span class="vv-badge-green">✅ Appears Credible</span>'
@@ -308,90 +503,138 @@ def _build_outputs(
         badge_html = '<span class="vv-badge-red">🚨 Likely Misinformation</span>'
 
     reasoning_html = (
-        f'<div class="vv-reasoning" style="margin-top:8px">'
-        f'🧠 <b>Reasoning:</b> {misinfo["reasoning"]}'
-        f'</div>'
+        f'<div class="vv-reasoning">🧠 <b>Reasoning:</b> {misinfo["reasoning"]}</div>'
     )
 
-    # ── Plotly charts ──────────────────────────────────────────────────────────
-    fig_gauge    = misinfo_gauge(score, "Misinfo Confidence")
-    fig_streams  = stream_trust_bars(misinfo["stream_details"])
-    fig_donut    = sentiment_donut(sent_sum)    if sent_sum else _empty_plotly()
-    fig_timeline = sentiment_timeline(comments_df, sentiments) if (sent_sum and not comments_df.empty) else _empty_plotly()
-    fig_kw       = keyword_bar(keywords, title="Top Video Keywords", color="#00d4ff")
-    fig_kw_comp  = keyword_comparison(pos_kw, neg_kw) if (pos_kw or neg_kw) else _empty_plotly()
+    # ── Charts — all wrapped in try/except so one failure can't break the rest ──
+    try:
+        fig_gauge = misinfo_gauge(score, "Misinfo Confidence")
+    except Exception:
+        fig_gauge = _empty_plotly()
+
+    try:
+        fig_streams = stream_trust_bars(misinfo["stream_details"])
+    except Exception:
+        fig_streams = _empty_plotly()
+
+    try:
+        fig_donut = sentiment_donut(sent_sum) if sent_sum else _empty_plotly("No comments analysed")
+    except Exception:
+        fig_donut = _empty_plotly()
+
+    try:
+        fig_timeline = (
+            sentiment_timeline(comments_df, sentiments)
+            if (sent_sum and not comments_df.empty)
+            else _empty_plotly("No comments analysed")
+        )
+    except Exception:
+        fig_timeline = _empty_plotly()
+
+    try:
+        fig_kw = keyword_bar(keywords, title="Top Video Keywords", color="#00d4ff")
+    except Exception:
+        fig_kw = _empty_plotly()
+
+    try:
+        fig_kw_comp = (
+            keyword_comparison(pos_kw, neg_kw)
+            if (pos_kw or neg_kw)
+            else _empty_plotly("No keyword comparison — no comments")
+        )
+    except Exception:
+        fig_kw_comp = _empty_plotly()
 
     # ── Sentiment stat boxes ───────────────────────────────────────────────────
     if sent_sum:
-        stat_pos = (f'<div class="vv-card" style="text-align:center">'
-                    f'<p class="vv-stat-big-green">{sent_sum["pos_pct"]}%</p>'
-                    f'<p style="color:#5a6070;font-size:0.75rem;margin:0">Positive</p></div>')
-        stat_neg = (f'<div class="vv-card" style="text-align:center">'
-                    f'<p class="vv-stat-big-red">{sent_sum["neg_pct"]}%</p>'
-                    f'<p style="color:#5a6070;font-size:0.75rem;margin:0">Negative</p></div>')
-        stat_neu = (f'<div class="vv-card" style="text-align:center">'
-                    f'<p class="vv-stat-big-dim">{sent_sum["neu_pct"]}%</p>'
-                    f'<p style="color:#5a6070;font-size:0.75rem;margin:0">Neutral</p></div>')
+        stat_pos = (
+            f'<div class="vv-card" style="text-align:center">'
+            f'<p class="vv-stat-big-green">{sent_sum["pos_pct"]}%</p>'
+            f'<p style="color:#5a6070;font-size:0.75rem;margin:4px 0 0">Positive</p></div>'
+        )
+        stat_neg = (
+            f'<div class="vv-card" style="text-align:center">'
+            f'<p class="vv-stat-big-red">{sent_sum["neg_pct"]}%</p>'
+            f'<p style="color:#5a6070;font-size:0.75rem;margin:4px 0 0">Negative</p></div>'
+        )
+        stat_neu = (
+            f'<div class="vv-card" style="text-align:center">'
+            f'<p class="vv-stat-big-dim">{sent_sum["neu_pct"]}%</p>'
+            f'<p style="color:#5a6070;font-size:0.75rem;margin:4px 0 0">Neutral</p></div>'
+        )
     else:
-        placeholder = '<div class="vv-card" style="text-align:center;color:#5a6070;font-size:0.8rem">N/A</div>'
+        placeholder = (
+            '<div class="vv-card" style="text-align:center;color:#5a6070;'
+            'font-family:DM Mono,monospace;font-size:0.8rem;padding:1.2rem">N/A</div>'
+        )
         stat_pos = stat_neg = stat_neu = placeholder
 
-    # ── Comment DataFrames for the 4 tabs ─────────────────────────────────────
+    # ── Comment DataFrames ─────────────────────────────────────────────────────
     show_cols = ["author", "text", "likes", "published_at"]
     df_all = df_pos = df_neg = df_top = pd.DataFrame()
 
     if not comments_df.empty:
         display_df = comments_df.copy()
         if sentiments:
-            display_df["sentiment"] = [s["label"]                    for s in sentiments]
-            display_df["compound"]  = [round(s.get("compound", 0), 3) for s in sentiments]
+            display_df["sentiment"] = [s["label"]                       for s in sentiments]
+            display_df["compound"]  = [round(s.get("compound", 0), 3)   for s in sentiments]
             cols = show_cols + ["sentiment", "compound"]
         else:
             cols = show_cols
 
         df_all = display_df[cols].head(100).reset_index(drop=True)
-        df_top = display_df.sort_values("likes", ascending=False).head(20)[cols].reset_index(drop=True)
-
+        df_top = (
+            display_df.sort_values("likes", ascending=False)
+            .head(20)[cols]
+            .reset_index(drop=True)
+        )
         if "sentiment" in display_df.columns:
             df_pos = display_df[display_df["sentiment"] == "POSITIVE"][cols].head(50).reset_index(drop=True)
             df_neg = display_df[display_df["sentiment"] == "NEGATIVE"][cols].head(50).reset_index(drop=True)
 
     return (
-        status_html,      # 0  status_box
-        log_html,         # 1  log_html_out
-        left_html,        # 2  left_panel_html
-        badge_html,       # 3  misinfo_badge_html
-        reasoning_html,   # 4  misinfo_reasoning_html
-        fig_gauge,        # 5  misinfo_gauge_plot
-        fig_streams,      # 6  stream_bars_plot
-        fig_donut,        # 7  donut_plot
-        fig_timeline,     # 8  timeline_plot
-        fig_kw,           # 9  kw_bar_plot
-        fig_kw_comp,      # 10 kw_comp_plot
-        stat_pos,         # 11 stat_pos_html
-        stat_neg,         # 12 stat_neg_html
-        stat_neu,         # 13 stat_neu_html
-        df_all,           # 14 df_all_out
-        df_pos,           # 15 df_pos_out
-        df_neg,           # 16 df_neg_out
-        df_top,           # 17 df_top_out
+        status_html,       # 0
+        log_html,          # 1
+        left_html,         # 2
+        badge_html,        # 3
+        reasoning_html,    # 4
+        fig_gauge,         # 5
+        fig_streams,       # 6
+        fig_donut,         # 7
+        fig_timeline,      # 8
+        fig_kw,            # 9
+        fig_kw_comp,       # 10
+        stat_pos,          # 11
+        stat_neg,          # 12
+        stat_neu,          # 13
+        df_all,            # 14
+        df_pos,            # 15
+        df_neg,            # 16
+        df_top,            # 17
     )
 
 
-# ══════════════════════════════════════════════════════════════════════════════
-#  UPLOAD TAB — search by keyword helper
-# ══════════════════════════════════════════════════════════════════════════════
+# ═══════════════════════════════════════════════════════════════════════════════
+#  UPLOAD / SEARCH HELPERS
+# ═══════════════════════════════════════════════════════════════════════════════
 
-def do_search(keyword: str, api_key: str):
-    if not (api_key or "").strip():
+def do_search(keyword: str):
+    api_key = os.environ.get("YT_API_KEY", "").strip()
+    if not api_key:
         return (
-            "<p style='color:#ff4757;font-family:DM Mono,monospace'>⚠️ API key required.</p>",
+            "<p style='color:#ff4757;font-family:DM Mono,monospace'>⚠️ YT_API_KEY secret not set.</p>",
             gr.update(choices=[], value=None, visible=False),
         )
-    results = search_videos_by_title(keyword, api_key, max_results=5)
+    if not (keyword or "").strip():
+        return (
+            "<p style='color:#ffb347;font-family:DM Mono,monospace'>Enter a keyword to search.</p>",
+            gr.update(choices=[], value=None, visible=False),
+        )
+
+    results = search_videos_by_title(keyword.strip(), api_key, max_results=5)
     if not results:
         return (
-            "<p style='color:#ffb347;font-family:DM Mono,monospace'>No results found. Try a different keyword.</p>",
+            "<p style='color:#ffb347;font-family:DM Mono,monospace'>No results found.</p>",
             gr.update(choices=[], value=None, visible=False),
         )
 
@@ -403,36 +646,32 @@ def do_search(keyword: str, api_key: str):
         choices.append((r["title"][:70], url))
         html += (
             f'<div class="vv-card" style="display:flex;align-items:center;gap:12px;margin-bottom:6px">'
-            f'<img src="{r["thumbnail_url"]}" style="width:72px;height:54px;object-fit:cover;border-radius:6px;flex-shrink:0">'
-            f'<div><p style="margin:0;font-size:0.85rem;font-weight:600;color:#e8eaf0">{r["title"][:80]}</p>'
-            f'<p style="margin:0;font-size:0.75rem;color:#5a6070">{r["channel_title"]} · {r["published_at"]} · '
-            f'<code style="color:#00d4ff">v={vid}</code></p></div></div>'
+            f'<img src="{r["thumbnail_url"]}" '
+            f'     style="width:72px;height:54px;object-fit:cover;border-radius:6px;flex-shrink:0">'
+            f'<div>'
+            f'<p style="margin:0;font-size:0.85rem;font-weight:600;color:#e8eaf0">{r["title"][:80]}</p>'
+            f'<p style="margin:0;font-size:0.75rem;color:#5a6070">'
+            f'{r["channel_title"]} · {r["published_at"]} · '
+            f'<code style="color:#00d4ff">v={vid}</code></p>'
+            f'</div></div>'
         )
     return html, gr.update(choices=choices, value=None, visible=True)
 
 
-def pick_and_analyze(selected_url, api_key, sentiment_method, max_comments):
-    """When user picks a search result, run the full pipeline on it."""
+def pick_and_analyze(selected_url, sentiment_method, max_comments):
     if not selected_url:
         yield _blank_outputs("Select a video from the search results above.")
         return
-    yield from run_pipeline(selected_url, api_key, sentiment_method, max_comments)
+    yield from run_pipeline(selected_url, sentiment_method, max_comments)
 
 
-# ══════════════════════════════════════════════════════════════════════════════
+# ═══════════════════════════════════════════════════════════════════════════════
 #  GRADIO BLOCKS UI
-#
-#  Gradio 6.x rules:
-#    ✅  gr.Blocks(title="…")                          ← title only; no css/theme here
-#    ✅  gr.Dataframe(max_height=320, wrap=True, …)    ← max_height valid in 6.x
-#    ✅  demo.launch(css=CSS, theme=…)                 ← css/theme move to launch()
-#    ❌  demo.launch(show_api=False)                   ← show_api removed in 6.x
-# ══════════════════════════════════════════════════════════════════════════════
-
-# FIX 1: gr.Blocks() takes title only — css= and theme= are passed to launch() below.
+# ═══════════════════════════════════════════════════════════════════════════════
+
 with gr.Blocks(title="VideoVerifier — MHMisinfo") as demo:
 
-    # ── Header ────────────────────────────────────────────────────────────────
+    # ── Header ─────────────────────────────────────────────────────────────────
     gr.HTML("""
     <div style="padding:1.5rem 0 0.8rem;border-bottom:1px solid #1e2330;margin-bottom:1.2rem">
       <h1 class="vv-hero">🔬 Video Verifier & Sentiment Analyzer</h1>
@@ -442,17 +681,17 @@ with gr.Blocks(title="VideoVerifier — MHMisinfo") as demo:
     </div>
     """)
 
-    # ── Settings row ──────────────────────────────────────────────────────────
+    # ── Settings — NO API key field ────────────────────────────────────────────
     with gr.Accordion("⚙️ Settings", open=False):
+        gr.HTML("""
+        <div style="background:#0d1119;border:1px solid #1e2330;border-radius:8px;
+                    padding:0.7rem 1rem;margin-bottom:0.8rem;font-family:'DM Mono',monospace;
+                    font-size:0.78rem;color:#5a6070">
+          🔑 YouTube API key is read from the <code style="color:#00d4ff">YT_API_KEY</code>
+          Space secret — it is never exposed in the UI.
+        </div>
+        """)
         with gr.Row():
-            api_key_input = gr.Textbox(
-                value=os.environ.get("YT_API_KEY", ""),
-                placeholder="AIza…",
-                label="YouTube Data API v3 Key",
-                type="password",
-                scale=3,
-                info="Get a free key at console.cloud.google.com → Enable YouTube Data API v3",
-            )
             sentiment_selector = gr.Dropdown(
                 choices=[
                     ("VADER — fast, CPU-only (~5 000 comments/sec)", "vader"),
@@ -460,12 +699,12 @@ with gr.Blocks(title="VideoVerifier — MHMisinfo") as demo:
                 ],
                 value="vader",
                 label="Sentiment Engine",
-                scale=2,
+                scale=3,
             )
             max_comments_slider = gr.Slider(
                 minimum=10, maximum=500, value=150, step=10,
                 label="Max comments to fetch",
-                scale=2,
+                scale=3,
                 info="YouTube API quota: ~1 unit per comment request",
             )
 
@@ -484,10 +723,9 @@ with gr.Blocks(title="VideoVerifier — MHMisinfo") as demo:
         with gr.TabItem("📁 Upload / Search by Title"):
             gr.HTML("""
             <div class="vv-card" style="margin-bottom:8px">
-              <p class="vv-section-title">Upload a video file → find matching YouTube metadata</p>
+              <p class="vv-section-title">Search by video title or keyword</p>
               <p style="font-size:0.82rem;color:#5a6070;line-height:1.6;margin:0">
-                ⚠️ The YouTube Data API cannot search by raw video bytes.
-                Upload your file, then type the title or a keyword below to find the matching YouTube entry.
+                Upload your file, then type the title or keyword below to locate the matching YouTube entry.
               </p>
             </div>
             """)
@@ -499,16 +737,12 @@ with gr.Blocks(title="VideoVerifier — MHMisinfo") as demo:
                 kw_input   = gr.Textbox(placeholder="Enter video title or keyword…", label="Search keyword", scale=4)
                 search_btn = gr.Button("🔎 Find on YouTube", scale=1)
             search_results_html = gr.HTML()
-            search_radio = gr.Radio(
-                label="Select a video to analyze",
-                choices=[],
-                visible=False,
-            )
+            search_radio        = gr.Radio(label="Select a video to analyze", choices=[], visible=False)
 
-    # ── Status bar ─────────────────────────────────────────────────────────────
+    # ── Status ─────────────────────────────────────────────────────────────────
     status_box = gr.HTML(
         '<p style="color:#5a6070;font-family:DM Mono,monospace;font-size:0.8rem;padding:6px 0">'
-        'Enter a URL above and click Analyze.</p>'
+        "Enter a URL above and click Analyze.</p>"
     )
 
     # ── Main results layout ────────────────────────────────────────────────────
@@ -517,14 +751,14 @@ with gr.Blocks(title="VideoVerifier — MHMisinfo") as demo:
         # LEFT — video info
         with gr.Column(scale=2):
             left_panel_html = gr.HTML(
-                '<div style="padding:3rem;text-align:center;color:#5a6070;'
-                'font-family:DM Mono,monospace">No data yet.</div>'
+                "<div style='padding:3rem;text-align:center;color:#5a6070;"
+                "font-family:DM Mono,monospace'>No data yet.</div>"
             )
 
         # RIGHT — analytics
         with gr.Column(scale=3):
 
-            # Misinfo block
+            # Misinfo
             gr.HTML('<p class="vv-section-title" style="margin-top:0">🔬 Misinformation Analysis</p>')
             misinfo_badge_html     = gr.HTML()
             with gr.Row():
@@ -532,9 +766,9 @@ with gr.Blocks(title="VideoVerifier — MHMisinfo") as demo:
                 stream_bars_plot   = gr.Plot(label="", show_label=False)
             misinfo_reasoning_html = gr.HTML()
 
-            gr.HTML('<hr style="border-color:#1e2330;margin:1rem 0">')
+            gr.HTML('<hr class="vv-hr">')
 
-            # Sentiment block
+            # Sentiment
             gr.HTML('<p class="vv-section-title">💬 Comment Sentiment</p>')
             with gr.Row():
                 stat_pos_html = gr.HTML()
@@ -547,12 +781,11 @@ with gr.Blocks(title="VideoVerifier — MHMisinfo") as demo:
                 kw_bar_plot   = gr.Plot(label="", show_label=False)
                 kw_comp_plot  = gr.Plot(label="", show_label=False)
 
-            gr.HTML('<hr style="border-color:#1e2330;margin:1rem 0">')
+            gr.HTML('<hr class="vv-hr">')
 
             # Comments deep-dive
             gr.HTML('<p class="vv-section-title">📊 Comments Deep-Dive</p>')
             with gr.Tabs():
-                # FIX 2: max_height= is the correct param in Gradio 5.x/6.x
                 with gr.TabItem("All"):
                     df_all_out = gr.Dataframe(
                         headers=["author", "text", "likes", "published_at", "sentiment", "compound"],
@@ -567,7 +800,7 @@ with gr.Blocks(title="VideoVerifier — MHMisinfo") as demo:
                 with gr.TabItem("Most Liked"):
                     df_top_out = gr.Dataframe(wrap=True, max_height=320)
 
-    # ── Activity log ──────────────────────────────────────────────────────────
+    # ── Activity log ───────────────────────────────────────────────────────────
     with gr.Accordion("📜 Activity Log", open=False):
         log_html_out = gr.HTML('<p class="vv-log-line">—</p>')
 
@@ -576,15 +809,11 @@ with gr.Blocks(title="VideoVerifier — MHMisinfo") as demo:
     <div style="margin-top:2rem;padding-top:1rem;border-top:1px solid #1e2330;
                 text-align:center;font-family:'DM Mono',monospace;font-size:0.72rem;color:#3a3f50">
       4-stream SeTa-Attention BiGRU · CCM / DMTE / Uncertainty Fusion ·
-      Plug your checkpoint into
-      <code style="color:#00d4ff">detect_misinformation()</code> in analyzer.py ·
       Test ROC-AUC 0.967
     </div>
     """)
 
-    # ══════════════════════════════════════════════════════════════════════════
-    #  OUTPUT LIST — order must exactly match _build_outputs / _blank_outputs
-    # ══════════════════════════════════════════════════════════════════════════
+    # ── Output list — order must match _build_outputs / _blank_outputs exactly ─
     ALL_OUTPUTS = [
         status_box,             # 0
         log_html_out,           # 1
@@ -606,31 +835,35 @@ with gr.Blocks(title="VideoVerifier — MHMisinfo") as demo:
         df_top_out,             # 17
     ]
 
-    # ── Events: URL tab ───────────────────────────────────────────────────────
-    _pipeline_inputs = [url_input, api_key_input, sentiment_selector, max_comments_slider]
+    # ── Pipeline inputs (no api_key_input — read from env) ────────────────────
+    _pipeline_inputs = [url_input, sentiment_selector, max_comments_slider]
 
+    # ── Events: URL tab ────────────────────────────────────────────────────────
     analyze_btn.click(fn=run_pipeline, inputs=_pipeline_inputs, outputs=ALL_OUTPUTS)
     url_input.submit(fn=run_pipeline,  inputs=_pipeline_inputs, outputs=ALL_OUTPUTS)
 
-    # ── Events: Upload/Search tab ─────────────────────────────────────────────
+    # ── Events: Upload/Search tab ──────────────────────────────────────────────
     search_btn.click(
         fn=do_search,
-        inputs=[kw_input, api_key_input],
+        inputs=[kw_input],
         outputs=[search_results_html, search_radio],
     )
-
     search_radio.change(
         fn=pick_and_analyze,
-        inputs=[search_radio, api_key_input, sentiment_selector, max_comments_slider],
+        inputs=[search_radio, sentiment_selector, max_comments_slider],
         outputs=ALL_OUTPUTS,
     )
 
-# ══════════════════════════════════════════════════════════════════════════════
-#  FIX 1: css= and theme= move to launch() in Gradio 6.x
-#  FIX 2: show_api= removed entirely — no longer a valid launch() param in 6.x
-# ══════════════════════════════════════════════════════════════════════════════
+
+# ═══════════════════════════════════════════════════════════════════════════════
+#  Launch — css and theme go HERE in Gradio 6.x (NOT in gr.Blocks)
+# ═══════════════════════════════════════════════════════════════════════════════
 if __name__ == "__main__":
     demo.launch(
         css=CSS,
-        theme=gr.themes.Base(),
+        theme=gr.themes.Base(
+            primary_hue=gr.themes.colors.cyan,
+            neutral_hue=gr.themes.colors.gray,
+            font=[gr.themes.GoogleFont("IBM Plex Sans"), "sans-serif"],
+        ),
     )