Update app.py

app.py

@@ -1,8 +1,3 @@
-"""
-app.py — Misinformation Detection & Public Engagement   (Gradio 6.x)
-
-"""
-
 import os
 import pandas as pd
 import gradio as gr
@@ -32,38 +27,31 @@ from charts import (
 )
 
 
-#  CSS  — Stormy Morning & Ink Wash palette
-
-
 CSS = """
-@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=Nunito:wght@400;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
+@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');
 
 :root {
-    --bg:            #FFFFE3;
-    --card:          #FFFFFF;
-    --border:        #BDDDFC;
-    --text:          #2d2d2d;
-    --dim:           #555555;
-    --primary:       #269ccc;
-    --pos:           #88BDF2;
-    --neg:           #6A89A7;
-    --neu:           #CBCBCB;
-    --tag-bg:        #BDDDFC;
-    --tag-text:      #384959;
-    --green:         #16a34a;
-    --red:           #dc2626;
-    --amber:         #d97706;
-    --primary-light: #e8f5fc;
-    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.03);
-    --shadow-md: 0 4px 14px rgba(38,156,204,0.14), 0 1px 3px rgba(0,0,0,0.05);
+    --bg:          #FFFFE3;
+    --card:        #FFFFFF;
+    --border:      #BDDDFC;
+    --text:        #4A4A4A;
+    --dim:         #7b7b7b;
+    --primary:     #269ccc;
+    --ink-dark:    #384959;
+    --stormy-sky:  #88BDF2;
+    --stormy-slate:#6A89A7;
+    --ink-grey:    #CBCBCB;
+    --green:       #2e9e6b;
+    --red:         #c0392b;
+    --amber:       #d4841a;
 }
 
 html, body {
     background: var(--bg) !important;
-    color: var(--text) !important;
+    color:      var(--text) !important;
     margin: 0; padding: 0;
 }
-.gradio-container, #root, #app, main, .main, .wrap {
+.gradio-container, #root, #app, main, .main, .wrap, .svelte-1kyws56 {
     background: var(--bg) !important;
     max-width: 100% !important;
     width: 100% !important;
@@ -79,19 +67,17 @@ div[class*="panel"], div[class*="gap"],
 .gr-group, .gr-box, .vv-section {
     background: var(--card) !important;
     border: 1px solid var(--border) !important;
-    border-radius: 14px !important;
+    border-radius: 12px !important;
     padding: 1rem 1.25rem !important;
-    box-shadow: var(--shadow-sm) !important;
 }
 
 .tab-nav button {
     background: transparent !important;
     border: none !important;
     color: var(--dim) !important;
-    font-family: 'DM Sans', sans-serif !important;
-    font-size: 0.84rem !important;
-    font-weight: 500 !important;
-    letter-spacing: 0.02em !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;
@@ -103,451 +89,336 @@ div[class*="panel"], div[class*="gap"],
 .tab-nav { border-bottom: 1px solid var(--border) !important; }
 
 input[type="text"], input[type="password"], input[type="number"], textarea, select {
-    background: #FFFFE3 !important;
-    border: 1.5px solid var(--border) !important;
+    background: #f5f7fa !important;
+    border: 1px solid var(--border) !important;
     color: var(--text) !important;
-    border-radius: 10px !important;
-    font-family: 'DM Sans', sans-serif !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(--primary) !important;
-    box-shadow: 0 0 0 3px rgba(38,156,204,0.15) !important;
+    box-shadow: 0 0 0 2px rgba(38,156,204,0.18) !important;
     outline: none !important;
 }
-
-label:not(.vv-metric-label):not(.vv-info-label),
-.gr-label,
-span.svelte-1b6s6s {
+label, .gr-label, span.svelte-1b6s6s {
     color: var(--dim) !important;
-    font-family: 'DM Sans', sans-serif !important;
+    font-family: 'DM Mono', monospace !important;
     font-size: 0.75rem !important;
-    letter-spacing: 0.05em !important;
+    letter-spacing: 0.08em !important;
     text-transform: uppercase;
-    font-weight: 600 !important;
 }
 
 input[type="range"] { accent-color: var(--primary); }
 
 button.primary, button[variant="primary"], .primary {
-    background: linear-gradient(135deg, var(--primary), #1a7faa) !important;
+    background: linear-gradient(135deg, var(--primary), #1a7aaa) !important;
     border: none !important;
-    color: #FFFFE3 !important;
-    font-weight: 600 !important;
-    font-family: 'DM Sans', sans-serif !important;
-    border-radius: 10px !important;
-    letter-spacing: 0.03em !important;
-    box-shadow: 0 2px 8px rgba(38,156,204,0.35) !important;
+    color: #ffffff !important;
+    font-weight: 700 !important;
+    font-family: 'DM Mono', monospace !important;
+    border-radius: 8px !important;
+    letter-spacing: 0.06em !important;
 }
 button.secondary {
-    background: var(--primary-light) !important;
-    border: 1.5px solid var(--primary) !important;
+    background: rgba(38,156,204,0.08) !important;
+    border: 1px solid var(--primary) !important;
     color: var(--primary) !important;
-    border-radius: 10px !important;
-    font-family: 'DM Sans', sans-serif !important;
-    font-weight: 500 !important;
+    border-radius: 8px !important;
+    font-family: 'DM Mono', monospace !important;
 }
 button:hover { opacity: 0.88; transform: translateY(-1px); transition: all 0.15s; }
 
 .dropdown, ul[role="listbox"], li[role="option"] {
-    background: #FFFFE3 !important;
+    background: #f5f7fa !important;
     border-color: var(--border) !important;
     color: var(--text) !important;
 }
-li[role="option"]:hover { background: var(--primary-light) !important; }
+li[role="option"]:hover { background: #e8f4fb !important; }
 
-.gr-dataframe, table {
-    background: var(--card) !important;
-    border-radius: 10px !important;
-    overflow: hidden;
-}
+.gr-dataframe, table { background: var(--card) !important; }
 .gr-dataframe th {
-    background: var(--primary-light) !important;
+    background: #EEF6FD !important;
     color: var(--primary) !important;
-    font-family: 'DM Sans', sans-serif !important;
+    font-family: 'DM Mono', monospace !important;
     font-size: 0.72rem !important;
-    padding: 8px 12px;
+    padding: 6px 10px;
     border-bottom: 1px solid var(--border);
     text-transform: uppercase;
-    letter-spacing: 0.07em;
-    font-weight: 700;
+    letter-spacing: 0.08em;
 }
 .gr-dataframe td {
     color: var(--text) !important;
-    font-size: 0.8rem !important;
-    padding: 7px 12px;
+    font-size: 0.77rem !important;
+    padding: 5px 10px;
     border-bottom: 1px solid var(--border);
 }
-.gr-dataframe tr:hover td { background: var(--primary-light) !important; }
+.gr-dataframe tr:hover td { background: rgba(38,156,204,0.05) !important; }
 
 details > summary {
     color: var(--dim) !important;
-    font-family: 'DM Sans', sans-serif !important;
-    font-size: 0.84rem !important;
+    font-family: 'DM Mono', monospace !important;
+    font-size: 0.82rem !important;
     cursor: pointer;
     list-style: none;
-    font-weight: 500;
 }
 details[open] > summary { color: var(--primary) !important; }
 
 .js-plotly-plot, .plotly { background: transparent !important; }
 .modebar { display: none !important; }
 
-.js-plotly-plot text,
-.js-plotly-plot .gtitle,
-.js-plotly-plot .xtitle,
-.js-plotly-plot .ytitle,
-.js-plotly-plot .xtick text,
-.js-plotly-plot .ytick text,
-.js-plotly-plot .legendtext {
-    fill: #2d2d2d !important;
-}
-
 ::-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); }
 
-
 .vv-hero {
-    font-family: 'Nunito', sans-serif !important;
-    font-size: 1.7rem !important;
+    font-family: 'Syne', sans-serif !important;
+    font-size: 1.65rem !important;
     font-weight: 800 !important;
-    background: linear-gradient(135deg, #269ccc, #88BDF2);
-    -webkit-background-clip: text !important;
-    -webkit-text-fill-color: transparent !important;
-    background-clip: text !important;
-    letter-spacing: -0.02em !important;
-    line-height: 1.2 !important;
+    background: linear-gradient(135deg, #269ccc, #384959);
+    -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: 'DM Sans', sans-serif !important;
+    font-family: 'Syne', sans-serif !important;
     font-size: 0.68rem !important;
     font-weight: 700 !important;
-    letter-spacing: 0.16em !important;
+    letter-spacing: 0.18em !important;
     text-transform: uppercase !important;
-    color: #2d2d2d !important;
+    color: #384959 !important;
     margin-bottom: 0.5rem !important;
     margin-top: 0 !important;
 }
 
+.vv-card {
+    background: #FFFFFF !important;
+    border: 1px solid #BDDDFC !important;
+    border-radius: 12px !important;
+    padding: 1.1rem 1.3rem !important;
+    margin-bottom: 0.7rem !important;
+}
+
 .vv-metric-grid {
     display: grid !important;
     grid-template-columns: repeat(4, 1fr) !important;
-    gap: 10px !important;
-    margin: 0.5rem 0 1rem !important;
+    gap: 0.55rem !important;
+    margin: 0.4rem 0 1rem !important;
 }
 .vv-metric-card {
     background: #FFFFFF !important;
-    border: 1.5px solid #BDDDFC !important;
-    border-radius: 14px !important;
-    padding: 1rem 0.7rem !important;
+    border: 1px solid #BDDDFC !important;
+    border-radius: 12px !important;
+    padding: 0.8rem 0.7rem !important;
     text-align: center !important;
+    transition: transform 0.18s ease, box-shadow 0.18s ease !important;
     cursor: default !important;
-    transition: all 0.22s ease !important;
-    box-shadow: 0 1px 4px rgba(189,221,252,0.25) !important;
-    position: relative !important;
-    overflow: hidden !important;
-}
-.vv-metric-card::before {
-    content: '' !important;
-    position: absolute !important;
-    top: 0; left: 0; right: 0 !important;
-    height: 3px !important;
-    background: linear-gradient(90deg, #269ccc, #88BDF2) !important;
-    opacity: 0 !important;
-    transition: opacity 0.22s ease !important;
 }
 .vv-metric-card:hover {
     transform: translateY(-4px) !important;
-    box-shadow: 0 10px 26px rgba(38,156,204,0.2) !important;
-    border-color: #269ccc !important;
-}
-.vv-metric-card:hover::before { opacity: 1 !important; }
-.vv-metric-icon {
-    font-size: 1.4rem !important;
-    margin-bottom: 4px !important;
-    display: block !important;
+    box-shadow: 0 8px 24px rgba(38,156,204,0.18) !important;
 }
 .vv-metric-value {
-    font-family: 'Nunito', sans-serif !important;
-    font-size: 1.25rem !important;
-    font-weight: 800 !important;
+    display: block !important;
+    font-family: 'DM Mono', monospace !important;
+    font-size: 1.15rem !important;
+    font-weight: 700 !important;
     color: #269ccc !important;
     margin: 0 !important;
     line-height: 1.2 !important;
-    -webkit-text-fill-color: #269ccc !important;
 }
 .vv-metric-label {
-    font-family: 'DM Sans', sans-serif !important;
-    font-size: 0.62rem !important;
-    font-weight: 600 !important;
-    letter-spacing: 0.1em !important;
-    text-transform: uppercase !important;
-    color: #555555 !important;
-    -webkit-text-fill-color: #555555 !important;
-    margin-top: 2px !important;
-}
-
-.vv-info-grid {
-    display: grid !important;
-    grid-template-columns: 1fr 1fr !important;
-    gap: 8px !important;
-    margin: 0.5rem 0 !important;
-}
-.vv-info-item {
-    background: #FFFFE3 !important;
-    border: 1px solid #BDDDFC !important;
-    border-radius: 9px !important;
-    padding: 0.55rem 0.75rem !important;
-}
-.vv-info-label {
     display: block !important;
-    font-family: 'DM Sans', sans-serif !important;
+    font-family: 'DM Mono', monospace !important;
     font-size: 0.62rem !important;
-    font-weight: 700 !important;
-    letter-spacing: 0.12em !important;
+    letter-spacing: 0.1em !important;
     text-transform: uppercase !important;
-    color: #555555 !important;
-    -webkit-text-fill-color: #555555 !important;
-    margin-bottom: 2px !important;
-}
-.vv-info-value {
-    display: block !important;
-    font-family: 'DM Sans', sans-serif !important;
-    font-size: 0.82rem !important;
-    font-weight: 600 !important;
-    color: #2d2d2d !important;
-    -webkit-text-fill-color: #2d2d2d !important;
-    white-space: nowrap !important;
-    overflow: hidden !important;
-    text-overflow: ellipsis !important;
+    color: #7b7b7b !important;
+    margin: 4px 0 0 !important;
 }
 
-.vv-tags-grid {
-    display: flex !important;
-    flex-wrap: wrap !important;
-    gap: 5px !important;
-    margin-top: 0.4rem !important;
-}
-.vv-tag {
+.vv-stat {
     display: inline-block !important;
-    background: #BDDDFC !important;
-    border: 1px solid #9dcbf7 !important;
-    border-radius: 20px !important;
-    padding: 3px 12px !important;
-    font-family: 'DM Sans', sans-serif !important;
-    font-size: 0.7rem !important;
-    font-weight: 600 !important;
-    color: #384959 !important;
-    -webkit-text-fill-color: #384959 !important;
-    transition: background 0.15s, transform 0.12s !important;
-}
-.vv-tag:hover { background: #a5cef8 !important; transform: translateY(-1px) !important; }
-
-.vv-card {
-    background: #FFFFFF !important;
+    background: #EEF6FD !important;
     border: 1px solid #BDDDFC !important;
-    border-radius: 12px !important;
-    padding: 1rem 1.1rem !important;
-    margin-bottom: 0.7rem !important;
-    box-shadow: 0 1px 4px rgba(189,221,252,0.2) !important;
+    border-radius: 6px !important;
+    padding: 0.25rem 0.75rem !important;
+    font-family: 'DM Mono', monospace !important;
+    font-size: 0.77rem !important;
+    color: #269ccc !important;
+    margin: 0.15rem 0.2rem !important;
 }
+
 .vv-badge-green {
     display: inline-block !important;
-    background: #dcfce7 !important;
-    border: 1.5px solid #16a34a !important;
-    color: #15803d !important;
-    -webkit-text-fill-color: #15803d !important;
+    background: rgba(46,158,107,0.10) !important;
+    border: 1px solid #2e9e6b !important;
+    color: #2e9e6b !important;
     border-radius: 20px !important;
     padding: 0.32rem 1.1rem !important;
     font-size: 0.85rem !important;
-    font-family: 'DM Sans', sans-serif !important;
-    font-weight: 700 !important;
+    font-family: 'DM Mono', monospace !important;
+    font-weight: 600 !important;
 }
 .vv-badge-red {
     display: inline-block !important;
-    background: #fee2e2 !important;
-    border: 1.5px solid #dc2626 !important;
-    color: #b91c1c !important;
-    -webkit-text-fill-color: #b91c1c !important;
+    background: rgba(192,57,43,0.10) !important;
+    border: 1px solid #c0392b !important;
+    color: #c0392b !important;
     border-radius: 20px !important;
     padding: 0.32rem 1.1rem !important;
     font-size: 0.85rem !important;
-    font-family: 'DM Sans', sans-serif !important;
-    font-weight: 700 !important;
+    font-family: 'DM Mono', monospace !important;
+    font-weight: 600 !important;
 }
 .vv-badge-amber {
     display: inline-block !important;
-    background: #fef3c7 !important;
-    border: 1.5px solid #d97706 !important;
-    color: #b45309 !important;
-    -webkit-text-fill-color: #b45309 !important;
+    background: rgba(212,132,26,0.10) !important;
+    border: 1px solid #d4841a !important;
+    color: #d4841a !important;
     border-radius: 20px !important;
     padding: 0.32rem 1.1rem !important;
     font-size: 0.85rem !important;
-    font-family: 'DM Sans', sans-serif !important;
-    font-weight: 700 !important;
+    font-family: 'DM Mono', monospace !important;
+    font-weight: 600 !important;
 }
+
 .vv-reasoning {
-    background: #fefce8 !important;
-    border-left: 3px solid #d97706 !important;
+    background: #f7f9fb !important;
+    border-left: 3px solid #d4841a !important;
     padding: 0.8rem 1rem !important;
-    border-radius: 0 10px 10px 0 !important;
+    border-radius: 0 8px 8px 0 !important;
     font-size: 0.83rem !important;
-    color: #78350f !important;
-    -webkit-text-fill-color: #78350f !important;
+    color: #4A4A4A !important;
     line-height: 1.65 !important;
-    font-family: 'DM Sans', sans-serif !important;
+    font-family: 'IBM Plex Sans', sans-serif !important;
     margin-top: 8px !important;
 }
 
-.vv-stat-big-pos  {
-    font-family: 'Nunito', sans-serif !important;
-    font-size: 1.6rem !important;
-    font-weight: 800 !important;
-    color: #3a8fd1 !important;
-    -webkit-text-fill-color: #3a8fd1 !important;
-    margin: 0 !important;
-}
-.vv-stat-big-neg  {
-    font-family: 'Nunito', sans-serif !important;
-    font-size: 1.6rem !important;
-    font-weight: 800 !important;
-    color: #4a6a87 !important;
-    -webkit-text-fill-color: #4a6a87 !important;
-    margin: 0 !important;
+.vv-tag {
+    display: inline-block !important;
+    background: #BDDDFC !important;
+    border: none !important;
+    border-radius: 20px !important;
+    padding: 3px 10px !important;
+    font-family: 'DM Mono', monospace !important;
+    font-size: 0.7rem !important;
+    color: #384959 !important;
+    margin: 2px !important;
+    font-weight: 500 !important;
 }
-.vv-stat-big-dim  {
-    font-family: 'Nunito', sans-serif !important;
+
+.vv-stat-big-green {
+    font-family: 'DM Mono', monospace !important;
     font-size: 1.6rem !important;
-    font-weight: 800 !important;
-    color: #888888 !important;
-    -webkit-text-fill-color: #888888 !important;
+    font-weight: 700 !important;
+    color: #2e9e6b !important;
     margin: 0 !important;
 }
-.vv-stat-big-green {
-    font-family: 'Nunito', sans-serif !important;
+.vv-stat-big-red {
+    font-family: 'DM Mono', monospace !important;
     font-size: 1.6rem !important;
-    font-weight: 800 !important;
-    color: #3a8fd1 !important;
-    -webkit-text-fill-color: #3a8fd1 !important;
+    font-weight: 700 !important;
+    color: #c0392b !important;
     margin: 0 !important;
 }
-.vv-stat-big-red   {
-    font-family: 'Nunito', sans-serif !important;
+.vv-stat-big-dim {
+    font-family: 'DM Mono', monospace !important;
     font-size: 1.6rem !important;
-    font-weight: 800 !important;
-    color: #4a6a87 !important;
-    -webkit-text-fill-color: #4a6a87 !important;
+    font-weight: 700 !important;
+    color: #7b7b7b !important;
     margin: 0 !important;
 }
-
 .vv-log-line {
     font-size: 0.72rem !important;
-    color: #555555 !important;
-    -webkit-text-fill-color: #555555 !important;
-    font-family: 'JetBrains Mono', monospace !important;
+    color: #7b7b7b !important;
+    font-family: 'DM Mono', monospace !important;
     margin: 2px 0 !important;
 }
-.vv-hr { border: none !important; border-top: 1px solid #BDDDFC !important; margin: 1.1rem 0 !important; }
+.vv-hr { border: none; border-top: 1px solid #BDDDFC; margin: 1.1rem 0; }
 """
 
 
-#  HELPERS
-
-
 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(255,255,227,0)", plot_bgcolor="rgba(189,221,252,0.13)",
-        font=dict(color="#2d2d2d"), margin=dict(l=10, r=10, t=10, b=10), height=h,
+        paper_bgcolor="rgba(0,0,0,0)", plot_bgcolor="rgba(189,221,252,0.13)",
+        font=dict(color="#7b7b7b"), 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="#555555"),
+        showarrow=False, font=dict(size=12, color="#7b7b7b"),
     )
     return fig
 
 
 def _blank_outputs(status_msg: str):
-    """19-tuple for ALL_OUTPUTS when nothing has run."""
     ep = _empty_plotly()
     return (
-        f'<p style="color:#dc2626;font-family:DM Sans,sans-serif;padding:8px;font-weight:500">{status_msg}</p>',  # 0  status
-        "<p class='vv-log-line'>—</p>",                                                                           # 1  log
-        "<div style='padding:3rem;text-align:center;color:#7b7b7b;font-family:DM Sans,sans-serif'>No data yet.</div>",  # 2  left panel
-        "", "",                                                                                    # 3  badge, 4 reasoning
-        ep, ep, ep,                                                                               # 5  modality_dist, 6 trust, 7 uncertainty
-        ep, ep, ep, ep,                                                                           # 8  donut, 9 timeline, 10 kw_bar, 11 kw_comp
-        "", "", "",                                                                               # 12 stat_pos, 13 stat_neg, 14 stat_neu
-        pd.DataFrame(), pd.DataFrame(), pd.DataFrame(), pd.DataFrame(),                           # 15 df_all, 16 df_pos, 17 df_neg, 18 df_top
+        f'<p style="color:#c0392b;font-family:DM Mono,monospace;padding:8px">{status_msg}</p>',
+        "<p class='vv-log-line'>—</p>",
+        "<div style='padding:3rem;text-align:center;color:#7b7b7b;font-family:DM Mono,monospace'>No data yet.</div>",
+        "", "",
+        ep, ep, ep,
+        ep, ep, ep, ep,
+        "", "", "",
+        pd.DataFrame(), pd.DataFrame(), pd.DataFrame(), pd.DataFrame(),
     )
 
 
-#  PIPELINE
-
-
 def run_pipeline(
     url_or_id: str,
     sentiment_method: str,
     max_comments: int,
     progress=gr.Progress(track_tqdm=False),
 ):
-    #  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.")
+        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.")
+        yield _blank_outputs("❌ Could not parse a valid YouTube video ID.")
         return
 
     if not api_key:
         yield _blank_outputs(
-            " YouTube API key not found. "
+            "⚠️ YouTube API key not found. "
             "Set the <code>YT_API_KEY</code> environment variable / Space secret."
         )
         return
 
-    # 1 — Metadata
     progress(0.05, desc="Fetching video metadata…")
     meta, err = fetch_video_metadata(video_id, api_key)
     if err:
-        yield _blank_outputs(f" {err}")
+        yield _blank_outputs(f"❌ {err}")
         return
 
-    # 2 — Transcript
     progress(0.20, desc="Fetching transcript…")
     transcript, t_status = fetch_transcript(video_id)
 
-    # 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
-
     progress(0.50, desc="Running misinformation detection…")
     misinfo = detect_misinformation(
         text=f"{meta['title']} {meta['description']}",
         tags=meta["tags"],
-        audio_transcript=transcript,           # speech/audio stream
-        video_transcript=transcript,           # enriched inside analyzer with title+tags
+        audio_transcript=transcript,
+        video_transcript=transcript,
     )
 
-    # 5 — Keywords
     keywords = extract_keywords(
         f"{meta['title']} {meta['description']} {transcript}",
         meta["tags"],
     )
 
-    # 6 — Sentiment
     sentiments, sent_sum, pos_kw, neg_kw = [], {}, [], []
 
     if not comments_df.empty:
@@ -562,7 +433,6 @@ def run_pipeline(
         sent_sum = sentiment_summary(sentiments)
         pos_kw, neg_kw = sentiment_weighted_keywords(comments_df, sentiments)
 
-    # 7 — Build outputs
     progress(0.97, desc="Building charts…")
     yield _build_outputs(
         meta=meta, video_id=video_id, transcript=transcript,
@@ -570,7 +440,7 @@ def run_pipeline(
         sentiments=sentiments, sent_sum=sent_sum,
         pos_kw=pos_kw, neg_kw=neg_kw,
         status_log=[
-            f" Metadata: {meta['title'][:55]}",
+            f"✅ Metadata: {meta['title'][:55]}",
             t_status,
             c_status,
             f"🔬 Misinfo score: {misinfo['confidence_pct']}%",
@@ -583,27 +453,20 @@ def run_pipeline(
     )
 
 
-#  OUTPUT BUILDER
-
-
 def _build_outputs(
     meta, video_id, transcript, comments_df,
     misinfo, keywords, sentiments, sent_sum, pos_kw, neg_kw, status_log,
 ):
-    #  Status
     status_html = (
-        '<p style="color:#16a34a;font-family:DM Sans,sans-serif;font-size:0.85rem;'
-        'font-weight:600;padding:6px 0"> Analysis complete</p>'
+        '<p style="color:#2e9e6b;font-family:DM Mono,monospace;font-size:0.82rem;padding:6px 0">'
+        "✅ Analysis complete</p>"
     )
 
-    #  Log
     log_html = "".join(f'<p class="vv-log-line">{line}</p>' for line in status_log)
 
-    #  Left panel
     thumb_html = (
         f'<img src="{meta["thumbnail_url"]}" '
-        'style="width:100%;border-radius:10px;margin-bottom:8px;display:block;'
-        'box-shadow:0 4px 14px rgba(189,221,252,0.4)">'
+        '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])
@@ -614,75 +477,60 @@ def _build_outputs(
     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 Sans',sans-serif;
-              font-size:0.78rem;color:#269ccc;text-decoration:none;margin:4px 0 10px;
-              font-weight:600;letter-spacing:0.03em">
+       style="display:block;text-align:center;font-family:'DM Mono',monospace;
+              font-size:0.75rem;color:#7b7b7b;text-decoration:none;margin:4px 0 10px">
       ▶ Open on YouTube
     </a>
     <div class="vv-card">
       <p class="vv-section-title">Video</p>
-      <p style="font-family:'Nunito',sans-serif;font-size:1.05rem;font-weight:800;margin:0 0 6px;color:#4A4A4A;line-height:1.35">
+      <p style="font-family:'Syne',sans-serif;font-size:1.05rem;font-weight:700;margin:0 0 6px;color:#4A4A4A !important">
         {meta['title']}
       </p>
-      <div class="vv-info-grid">
-        <div class="vv-info-item">
-          <span class="vv-info-label">Author</span>
-          <span class="vv-info-value" title="{meta['channel_title']}">{meta['channel_title']}</span>
-        </div>
-        <div class="vv-info-item">
-          <span class="vv-info-label">Published</span>
-          <span class="vv-info-value">{meta['published_at']}</span>
-        </div>
-      </div>
+      <p style="font-size:0.82rem;color:#7b7b7b !important;margin:0">
+        by <b style="color:#384959 !important">{meta['channel_title']}</b>
+        &nbsp;·&nbsp;
+        <span style="color:#7b7b7b !important">{meta['published_at']}</span>
+      </p>
     </div>
 
     <p class="vv-section-title">Metrics</p>
     <div class="vv-metric-grid">
       <div class="vv-metric-card">
-        <span class="vv-metric-icon">👁</span>
-        <div class="vv-metric-value">{meta['view_count']:,}</div>
-        <div class="vv-metric-label">Views</div>
+        <span class="vv-metric-value">👁 {meta['view_count']:,}</span>
+        <span class="vv-metric-label">Views</span>
       </div>
       <div class="vv-metric-card">
-        <span class="vv-metric-icon">👍</span>
-        <div class="vv-metric-value">{meta['like_count']:,}</div>
-        <div class="vv-metric-label">Likes</div>
+        <span class="vv-metric-value">👍 {meta['like_count']:,}</span>
+        <span class="vv-metric-label">Likes</span>
       </div>
       <div class="vv-metric-card">
-        <span class="vv-metric-icon">💬</span>
-        <div class="vv-metric-value">{meta['comment_count']:,}</div>
-        <div class="vv-metric-label">Comments</div>
+        <span class="vv-metric-value">💬 {meta['comment_count']:,}</span>
+        <span class="vv-metric-label">Comments</span>
       </div>
       <div class="vv-metric-card">
-        <span class="vv-metric-icon">⏱</span>
-        <div class="vv-metric-value" style="font-size:1.0rem">{meta['duration']}</div>
-        <div class="vv-metric-label">Duration</div>
+        <span class="vv-metric-value">⏱ {meta['duration']}</span>
+        <span class="vv-metric-label">Duration</span>
       </div>
     </div>
 
     <p class="vv-section-title" style="margin-top:0.8rem">Tags</p>
-    <div class="vv-tags-grid">
-      {tag_html or '<span style="color:#7b7b7b;font-size:0.78rem">(none)</span>'}
-    </div>
+    {tag_html or '<span style="color:#7b7b7b;font-size:0.78rem">(none)</span>'}
 
     <details style="margin-top:1rem">
       <summary>📄 Description</summary>
-      <p style="font-size:0.79rem;color:#4A4A4A;line-height:1.7;white-space:pre-wrap;margin-top:8px;
-                background:#FFFFE3;border:1px solid #BDDDFC;border-radius:8px;padding:0.7rem">{desc_short}</p>
+      <p style="font-size:0.78rem;color:#7b7b7b;line-height:1.65;white-space:pre-wrap;margin-top:6px">{desc_short}</p>
     </details>
     <details style="margin-top:0.5rem">
       <summary>📝 Transcript ({word_count} words)</summary>
-      <p style="font-size:0.76rem;color:#4A4A4A;line-height:1.7;margin-top:8px;
-                background:#FFFFE3;border:1px solid #BDDDFC;border-radius:8px;padding:0.7rem">{transcript_short}</p>
+      <p style="font-size:0.75rem;color:#7b7b7b;line-height:1.65;margin-top:6px">{transcript_short}</p>
     </details>
     """
 
-    #  Misinfo badge
     score = misinfo["score"]
     if score < 0.35:
-        badge_html = '<span class="vv-badge-green"> Appears Credible</span>'
+        badge_html = '<span class="vv-badge-green">✅ Appears Credible</span>'
     elif score < 0.65:
-        badge_html = '<span class="vv-badge-amber"> Uncertain / Mixed Signals</span>'
+        badge_html = '<span class="vv-badge-amber">⚠️ Uncertain / Mixed Signals</span>'
     else:
         badge_html = '<span class="vv-badge-red">🚨 Likely Misinformation</span>'
 
@@ -690,7 +538,6 @@ def _build_outputs(
         f'<div class="vv-reasoning">🧠 <b>Reasoning:</b> {misinfo["reasoning"]}</div>'
     )
 
-    #  Three new modality charts — derived from model logit/softmax/entropy
     mod_analysis = misinfo.get("modality_analysis", {})
 
     try:
@@ -708,7 +555,6 @@ def _build_outputs(
     except Exception:
         fig_uncert = _empty_plotly("Uncertainty analysis unavailable")
 
-    #  Sentiment charts (unchanged)
     try:
         fig_donut = sentiment_donut(sent_sum) if sent_sum else _empty_plotly("No comments analysed")
     except Exception:
@@ -737,96 +583,99 @@ def _build_outputs(
     except Exception:
         fig_kw_comp = _empty_plotly()
 
-    #  Sentiment stat boxes — Stormy Morning palette
     if sent_sum:
         stat_pos = (
-            f'<div class="vv-card" style="text-align:center;border-top:3px solid #88BDF2">'
-            f'<p class="vv-stat-big-pos">{sent_sum["pos_pct"]}%</p>'
-            f'<p style="color:#7b7b7b;font-size:0.75rem;margin:4px 0 0;font-family:DM Sans,sans-serif;font-weight:600">Positively Engagement</p></div>'
+            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:#7b7b7b !important;font-size:0.75rem;margin:4px 0 0;font-family:DM Mono,monospace">Positively Engagement</p></div>'
         )
         stat_neg = (
-            f'<div class="vv-card" style="text-align:center;border-top:3px solid #6A89A7">'
-            f'<p class="vv-stat-big-neg">{sent_sum["neg_pct"]}%</p>'
-            f'<p style="color:#7b7b7b;font-size:0.75rem;margin:4px 0 0;font-family:DM Sans,sans-serif;font-weight:600">Negatively Engagement</p></div>'
+            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:#7b7b7b !important;font-size:0.75rem;margin:4px 0 0;font-family:DM Mono,monospace">Negatively Engagement</p></div>'
         )
         stat_neu = (
-            f'<div class="vv-card" style="text-align:center;border-top:3px solid #CBCBCB">'
+            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:#7b7b7b;font-size:0.75rem;margin:4px 0 0;font-family:DM Sans,sans-serif;font-weight:600">Neutral</p></div>'
+            f'<p style="color:#7b7b7b !important;font-size:0.75rem;margin:4px 0 0;font-family:DM Mono,monospace">Neutral</p></div>'
         )
     else:
         placeholder = (
-            '<div class="vv-card" style="text-align:center;color:#7b7b7b;'
-            'font-family:DM Sans,sans-serif;font-size:0.8rem;padding:1.2rem">N/A</div>'
+            '<div class="vv-card" style="text-align:center;color:#7b7b7b !important;'
+            'font-family:DM Mono,monospace;font-size:0.8rem;padding:1.2rem">N/A</div>'
         )
         stat_pos = stat_neg = stat_neu = placeholder
 
-    #  Comment DataFrames (unchanged)
     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
 
+        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)
+            display_df["sentiment"] = display_df["sentiment"].replace({
+                "POSITIVE": "Positively Engagement",
+                "NEGATIVE": "Negatively Engagement",
+                "NEUTRAL":  "Neutral",
+            })
+            df_pos["sentiment"] = "Positively Engagement"
+            df_neg["sentiment"] = "Negatively Engagement"
+
         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)
         )
-        if "sentiment" in display_df.columns:
-            df_pos = display_df[display_df["sentiment"] == "Positively Engagement"][cols].head(50).reset_index(drop=True)
-            df_neg = display_df[display_df["sentiment"] == "Negatively Engagement"][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_mod_dist,   # 5   modality_dist_plot
-        fig_trust,      # 6   trust_score_plot
-        fig_uncert,     # 7   uncertainty_plot
-        fig_donut,      # 8   donut_plot
-        fig_timeline,   # 9   timeline_plot
-        fig_kw,         # 10  kw_bar_plot
-        fig_kw_comp,    # 11  kw_comp_plot
-        stat_pos,       # 12  stat_pos_html
-        stat_neg,       # 13  stat_neg_html
-        stat_neu,       # 14  stat_neu_html
-        df_all,         # 15  df_all_out
-        df_pos,         # 16  df_pos_out
-        df_neg,         # 17  df_neg_out
-        df_top,         # 18  df_top_out
+        status_html,
+        log_html,
+        left_html,
+        badge_html,
+        reasoning_html,
+        fig_mod_dist,
+        fig_trust,
+        fig_uncert,
+        fig_donut,
+        fig_timeline,
+        fig_kw,
+        fig_kw_comp,
+        stat_pos,
+        stat_neg,
+        stat_neu,
+        df_all,
+        df_pos,
+        df_neg,
+        df_top,
     )
 
 
-#  UPLOAD / SEARCH HELPERS
-
-
 def do_search(keyword: str):
     api_key = os.environ.get("YT_API_KEY", "").strip()
     if not api_key:
         return (
-            "<p style='color:#dc2626;font-family:DM Sans,sans-serif;font-weight:500'> YT_API_KEY secret not set.</p>",
+            "<p style='color:#c0392b;font-family:DM Mono,monospace'>⚠️ YT_API_KEY secret not set.</p>",
             gr.update(choices=[], value=None, visible=False),
         )
     if not (keyword or "").strip():
         return (
-            "<p style='color:#d97706;font-family:DM Sans,sans-serif;font-weight:500'>Enter a keyword to search.</p>",
+            "<p style='color:#d4841a;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:#d97706;font-family:DM Sans,sans-serif;font-weight:500'>No results found.</p>",
+            "<p style='color:#d4841a;font-family:DM Mono,monospace'>No results found.</p>",
             gr.update(choices=[], value=None, visible=False),
         )
 
@@ -839,12 +688,12 @@ def do_search(keyword: str):
         html += (
             f'<div class="vv-card" style="display:flex;align-items:center;gap:12px;margin-bottom:6px">'
             f'<img src="{r["thumbnail_url"]}" '
-            f'     style="width:72px;height:54px;object-fit:cover;border-radius:8px;flex-shrink:0">'
+            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:700;color:#4A4A4A">{r["title"][:80]}</p>'
-            f'<p style="margin:0;font-size:0.75rem;color:#7b7b7b">'
+            f'<p style="margin:0;font-size:0.85rem;font-weight:600;color:#4A4A4A !important">{r["title"][:80]}</p>'
+            f'<p style="margin:0;font-size:0.75rem;color:#7b7b7b !important">'
             f'{r["channel_title"]} · {r["published_at"]} · '
-            f'<code style="color:#269ccc;background:#e8f5fc;padding:1px 4px;border-radius:4px">v={vid}</code></p>'
+            f'<code style="color:#269ccc">v={vid}</code></p>'
             f'</div></div>'
         )
     return html, gr.update(choices=choices, value=None, visible=True)
@@ -857,26 +706,23 @@ def pick_and_analyze(selected_url, sentiment_method, max_comments):
     yield from run_pipeline(selected_url, sentiment_method, max_comments)
 
 
-#  GRADIO BLOCKS UI
-
+with gr.Blocks(title="VideoVerifier — MHMisinfo") as demo:
 
-with gr.Blocks(title="Misinformation Detection & Public Engagement ") as demo:
-
-    #  Header
     gr.HTML("""
-    <div style="padding:1.5rem 0 0.8rem;border-bottom:1.5px solid #BDDDFC;margin-bottom:1.2rem">
-      <h1 class="vv-hero">🔬 Misinformation Detection & Public Engagement</h1>
+    <div style="padding:1.5rem 0 0.8rem;border-bottom:1px solid #BDDDFC;margin-bottom:1.2rem">
+      <h1 class="vv-hero">🔬 Video Verifier &amp; Sentiment Analyzer</h1>
+      <p style="color:#7b7b7b;font-size:0.85rem;margin-top:4px;font-family:'DM Mono',monospace">
+        mental health misinformation detection
+      </p>
     </div>
     """)
 
-    #  Settings — NO API key field
     with gr.Accordion("⚙️ Settings", open=False):
         gr.HTML("""
-        <div style="background:#e8f5fc;border:1px solid #BDDDFC;border-radius:10px;
-                    padding:0.7rem 1rem;margin-bottom:0.8rem;font-family:'DM Sans',sans-serif;
-                    font-size:0.78rem;color:#1a7faa;font-weight:500">
-          🔑 YouTube API key is read from the <code style="color:#269ccc;background:#d0ebf7;
-          padding:1px 5px;border-radius:4px">YT_API_KEY</code>
+        <div style="background:#f5f7fa;border:1px solid #BDDDFC;border-radius:8px;
+                    padding:0.7rem 1rem;margin-bottom:0.8rem;font-family:'DM Mono',monospace;
+                    font-size:0.78rem;color:#7b7b7b">
+          🔑 YouTube API key is read from the <code style="color:#269ccc">YT_API_KEY</code>
           Space secret — it is never exposed in the UI.
         </div>
         """)
@@ -897,7 +743,6 @@ with gr.Blocks(title="Misinformation Detection & Public Engagement ") as demo:
                 info="YouTube API quota: ~1 unit per comment request",
             )
 
-     #Input tabs
     with gr.Tabs():
 
         with gr.TabItem("🔗 YouTube URL"):
@@ -928,35 +773,27 @@ with gr.Blocks(title="Misinformation Detection & Public Engagement ") as demo:
             search_results_html = gr.HTML()
             search_radio        = gr.Radio(label="Select a video to analyze", choices=[], visible=False)
 
-    #  Status
     status_box = gr.HTML(
-        '<p style="color:#7b7b7b;font-family:DM Sans,sans-serif;font-size:0.82rem;'
-        'font-weight:500;padding:6px 0">'
+        '<p style="color:#7b7b7b;font-family:DM Mono,monospace;font-size:0.8rem;padding:6px 0">'
         "Enter a URL above and click Analyze.</p>"
     )
 
-    #  Main results layout
     with gr.Row(equal_height=False):
 
-        # LEFT — video info
         with gr.Column(scale=2):
             left_panel_html = gr.HTML(
                 "<div style='padding:3rem;text-align:center;color:#7b7b7b;"
-                "font-family:DM Sans,sans-serif'>No data yet.</div>"
+                "font-family:DM Mono,monospace'>No data yet.</div>"
             )
 
-        # RIGHT — analytics
         with gr.Column(scale=3):
 
-            # ── Misinformation Analysis ───────────────────────────────────────
             gr.HTML('<p class="vv-section-title" style="margin-top:0">🔬 Misinformation Analysis</p>')
             misinfo_badge_html = gr.HTML()
 
-            # Row 1 — Modality Misinformation Distribution (full width)
             with gr.Row():
                 modality_dist_plot = gr.Plot(label="", show_label=False)
 
-            # Row 2 — Trust Score | Uncertainty Analysis (side by side)
             with gr.Row():
                 trust_score_plot = gr.Plot(label="", show_label=False)
                 uncertainty_plot = gr.Plot(label="", show_label=False)
@@ -965,7 +802,6 @@ with gr.Blocks(title="Misinformation Detection & Public Engagement ") as demo:
 
             gr.HTML('<hr class="vv-hr">')
 
-            # ── Comment Sentiment ─────────────────────────────────────────────
             gr.HTML('<p class="vv-section-title">💬 Comment Sentiment</p>')
             with gr.Row():
                 stat_pos_html = gr.HTML()
@@ -980,7 +816,6 @@ with gr.Blocks(title="Misinformation Detection & Public Engagement ") as demo:
 
             gr.HTML('<hr class="vv-hr">')
 
-            # ── Comments Deep-Dive ────────────────────────────────────────────
             gr.HTML('<p class="vv-section-title">📊 Comments Deep-Dive</p>')
             with gr.Tabs():
                 with gr.TabItem("All"):
@@ -997,50 +832,44 @@ with gr.Blocks(title="Misinformation Detection & Public Engagement ") as demo:
                 with gr.TabItem("Most Liked"):
                     df_top_out = gr.Dataframe(wrap=True, max_height=320)
 
-    #  Activity log
     with gr.Accordion("📜 Activity Log", open=False):
         log_html_out = gr.HTML('<p class="vv-log-line">—</p>')
 
-    #  Footer
     gr.HTML("""
     <div style="margin-top:2rem;padding-top:1rem;border-top:1px solid #BDDDFC;
-                text-align:center;font-family:'DM Sans',sans-serif;font-size:0.72rem;color:#88BDF2">
+                text-align:center;font-family:'DM Mono',monospace;font-size:0.72rem;color:#7b7b7b">
       4-stream SeTa-Attention BiGRU · CCM / DMTE / Uncertainty Fusion ·
       Test ROC-AUC 0.967
     </div>
     """)
 
-    # ── Output list — order must match _build_outputs / _blank_outputs exactly ─
     ALL_OUTPUTS = [
-        status_box,             # 0
-        log_html_out,           # 1
-        left_panel_html,        # 2
-        misinfo_badge_html,     # 3
-        misinfo_reasoning_html, # 4
-        modality_dist_plot,     # 5
-        trust_score_plot,       # 6
-        uncertainty_plot,       # 7
-        donut_plot,             # 8
-        timeline_plot,          # 9
-        kw_bar_plot,            # 10
-        kw_comp_plot,           # 11
-        stat_pos_html,          # 12
-        stat_neg_html,          # 13
-        stat_neu_html,          # 14
-        df_all_out,             # 15
-        df_pos_out,             # 16
-        df_neg_out,             # 17
-        df_top_out,             # 18
+        status_box,
+        log_html_out,
+        left_panel_html,
+        misinfo_badge_html,
+        misinfo_reasoning_html,
+        modality_dist_plot,
+        trust_score_plot,
+        uncertainty_plot,
+        donut_plot,
+        timeline_plot,
+        kw_bar_plot,
+        kw_comp_plot,
+        stat_pos_html,
+        stat_neg_html,
+        stat_neu_html,
+        df_all_out,
+        df_pos_out,
+        df_neg_out,
+        df_top_out,
     ]
 
-    #  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
     search_btn.click(
         fn=do_search,
         inputs=[kw_input],
@@ -1053,14 +882,12 @@ with gr.Blocks(title="Misinformation Detection & Public Engagement ") as demo:
     )
 
 
-#  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(
-            primary_hue=gr.themes.colors.sky,
+            primary_hue=gr.themes.colors.blue,
             neutral_hue=gr.themes.colors.slate,
-            font=[gr.themes.GoogleFont("DM Sans"), "sans-serif"],
+            font=[gr.themes.GoogleFont("IBM Plex Sans"), "sans-serif"],
         ),
     )