Update app.py

app.py

@@ -36,29 +36,33 @@ from charts import (
 
 
 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');
+@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');
 
-/*  Variables*/
+/*  Variables — Light Professional Theme */
 :root {
-    --bg:     #0d0f14;
-    --card:   #13161e;
-    --border: #1e2330;
-    --text:   #e8eaf0;
-    --dim:    #5a6070;
-    --cyan:   #00d4ff;
-    --green:  #00e5a0;
-    --red:    #ff4757;
-    --amber:  #ffb347;
-    --blue:   #4a8eff;
-}
-
-/*  Force dark everywhere — prevent white bleed  */
+    --bg:       #f4f7fb;
+    --card:     #ffffff;
+    --border:   #dde3ed;
+    --text:     #1e293b;
+    --dim:      #7b7b7b;
+    --primary:  #269ccc;
+    --algae:    #9ed2c5;
+    --green:    #16a34a;
+    --red:      #dc2626;
+    --amber:    #d97706;
+    --primary-light: #e8f5fc;
+    --algae-light:   #e8f6f3;
+    --shadow-sm: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
+    --shadow-md: 0 4px 12px rgba(38,156,204,0.12), 0 1px 3px rgba(0,0,0,0.06);
+}
+
+/*  Base */
 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, .svelte-1kyws56 {
+.gradio-container, #root, #app, main, .main, .wrap {
     background: var(--bg) !important;
     max-width: 100% !important;
     width: 100% !important;
@@ -66,125 +70,135 @@ html, body {
     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 ─ */
+/*  Cards / Groups */
 .gr-group, .gr-box, .vv-section {
     background: var(--card) !important;
     border: 1px solid var(--border) !important;
-    border-radius: 12px !important;
+    border-radius: 14px !important;
     padding: 1rem 1.25rem !important;
+    box-shadow: var(--shadow-sm) !important;
 }
 
-/*  Tabs  */
+/*  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;
+    font-family: 'DM Sans', sans-serif !important;
+    font-size: 0.84rem !important;
+    font-weight: 500 !important;
+    letter-spacing: 0.02em !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;
+    color: var(--primary) !important;
+    border-bottom-color: var(--primary) !important;
 }
 .tab-nav { border-bottom: 1px solid var(--border) !important; }
 
-/*  Inputs  */
+/*  Inputs */
 input[type="text"], input[type="password"], input[type="number"], textarea, select {
-    background: #1a1d27 !important;
-    border: 1px solid var(--border) !important;
+    background: #f8fafc !important;
+    border: 1.5px solid var(--border) !important;
     color: var(--text) !important;
-    border-radius: 8px !important;
-    font-family: 'DM Mono', monospace !important;
+    border-radius: 10px !important;
+    font-family: 'DM Sans', sans-serif !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;
+    border-color: var(--primary) !important;
+    box-shadow: 0 0 0 3px rgba(38,156,204,0.15) !important;
     outline: none !important;
 }
 label, .gr-label, span.svelte-1b6s6s {
     color: var(--dim) !important;
-    font-family: 'DM Mono', monospace !important;
+    font-family: 'DM Sans', sans-serif !important;
     font-size: 0.75rem !important;
-    letter-spacing: 0.08em !important;
+    letter-spacing: 0.05em !important;
     text-transform: uppercase;
+    font-weight: 600 !important;
 }
 
-/*  Slider  */
-input[type="range"] { accent-color: var(--cyan); }
+/*  Slider */
+input[type="range"] { accent-color: var(--primary); }
 
-/*  Buttons ─ */
+/*  Buttons */
 button.primary, button[variant="primary"], .primary {
-    background: linear-gradient(135deg, var(--cyan), var(--blue)) !important;
+    background: linear-gradient(135deg, var(--primary), #1a7faa) !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;
+    color: #ffffff !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;
 }
 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;
+    background: var(--primary-light) !important;
+    border: 1.5px solid var(--primary) !important;
+    color: var(--primary) !important;
+    border-radius: 10px !important;
+    font-family: 'DM Sans', sans-serif !important;
+    font-weight: 500 !important;
 }
 button:hover { opacity: 0.88; transform: translateY(-1px); transition: all 0.15s; }
 
-/*  Dropdowns ─ */
+/*  Dropdowns */
 .dropdown, ul[role="listbox"], li[role="option"] {
-    background: #1a1d27 !important;
+    background: #ffffff !important;
     border-color: var(--border) !important;
     color: var(--text) !important;
 }
-li[role="option"]:hover { background: #242736 !important; }
+li[role="option"]:hover { background: var(--primary-light) !important; }
 
-/*  Dataframe ─ */
-.gr-dataframe, table { background: var(--card) !important; }
+/*  Dataframe */
+.gr-dataframe, table {
+    background: var(--card) !important;
+    border-radius: 10px !important;
+    overflow: hidden;
+}
 .gr-dataframe th {
-    background: #1a1d27 !important;
-    color: var(--cyan) !important;
-    font-family: 'DM Mono', monospace !important;
+    background: var(--primary-light) !important;
+    color: var(--primary) !important;
+    font-family: 'DM Sans', sans-serif !important;
     font-size: 0.72rem !important;
-    padding: 6px 10px;
+    padding: 8px 12px;
     border-bottom: 1px solid var(--border);
     text-transform: uppercase;
-    letter-spacing: 0.08em;
+    letter-spacing: 0.07em;
+    font-weight: 700;
 }
 .gr-dataframe td {
     color: var(--text) !important;
-    font-size: 0.77rem !important;
-    padding: 5px 10px;
+    font-size: 0.8rem !important;
+    padding: 7px 12px;
     border-bottom: 1px solid var(--border);
 }
-.gr-dataframe tr:hover td { background: rgba(0,212,255,0.04) !important; }
+.gr-dataframe tr:hover td { background: var(--primary-light) !important; }
 
-/*  Accordion ─ */
+/*  Accordion */
 details > summary {
     color: var(--dim) !important;
-    font-family: 'DM Mono', monospace !important;
-    font-size: 0.82rem !important;
+    font-family: 'DM Sans', sans-serif !important;
+    font-size: 0.84rem !important;
     cursor: pointer;
     list-style: none;
+    font-weight: 500;
 }
-details[open] > summary { color: var(--cyan) !important; }
+details[open] > summary { color: var(--primary) !important; }
 
-/*  Plot containers ─ */
+/*  Plot containers */
 .js-plotly-plot, .plotly { background: transparent !important; }
 .modebar { display: none !important; }
 
-/*  Scrollbar ─ */
+/*  Scrollbar */
 ::-webkit-scrollbar { width: 6px; height: 6px; }
 ::-webkit-scrollbar-track { background: var(--bg); }
 ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
@@ -194,10 +208,10 @@ details[open] > summary { color: var(--cyan) !important; }
 /*  Shared HTML component classes */
 
 .vv-hero {
-    font-family: 'Syne', sans-serif;
-    font-size: 1.65rem;
+    font-family: 'Nunito', sans-serif;
+    font-size: 1.7rem;
     font-weight: 800;
-    background: linear-gradient(135deg, #00d4ff, #4a8eff);
+    background: linear-gradient(135deg, #269ccc, #9ed2c5);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
@@ -205,93 +219,185 @@ details[open] > summary { color: var(--cyan) !important; }
     line-height: 1.2;
 }
 .vv-section-title {
-    font-family: 'Syne', sans-serif;
+    font-family: 'DM Sans', sans-serif;
     font-size: 0.68rem;
     font-weight: 700;
-    letter-spacing: 0.18em;
+    letter-spacing: 0.16em;
     text-transform: uppercase;
-    color: #5a6070;
+    color: var(--dim, #7b7b7b);
     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;
+
+/* Stylish interactive metric cards */
+.vv-metric-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 10px;
+    margin: 0.5rem 0 1rem;
+}
+.vv-metric-card {
+    background: #ffffff;
+    border: 1.5px solid #dde3ed;
+    border-radius: 14px;
+    padding: 1rem 0.85rem;
+    text-align: center;
+    cursor: default;
+    transition: all 0.22s ease;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+    position: relative;
+    overflow: hidden;
+}
+.vv-metric-card::before {
+    content: '';
+    position: absolute;
+    top: 0; left: 0; right: 0;
+    height: 3px;
+    background: linear-gradient(90deg, #269ccc, #9ed2c5);
+    opacity: 0;
+    transition: opacity 0.22s ease;
+}
+.vv-metric-card:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 8px 22px rgba(38,156,204,0.18);
+    border-color: #269ccc;
+}
+.vv-metric-card:hover::before { opacity: 1; }
+.vv-metric-icon {
+    font-size: 1.4rem;
+    margin-bottom: 4px;
+    display: block;
+}
+.vv-metric-value {
+    font-family: 'Nunito', sans-serif;
+    font-size: 1.3rem;
+    font-weight: 800;
+    color: #269ccc;
+    margin: 0;
+    line-height: 1.2;
+}
+.vv-metric-label {
+    font-family: 'DM Sans', sans-serif;
+    font-size: 0.68rem;
+    font-weight: 600;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: #7b7b7b;
+    margin-top: 2px;
+}
+
+/* Video info grid */
+.vv-info-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 8px;
+    margin: 0.5rem 0;
+}
+.vv-info-item {
+    background: #f4f7fb;
+    border: 1px solid #dde3ed;
+    border-radius: 9px;
+    padding: 0.55rem 0.75rem;
+}
+.vv-info-label {
+    display: block;
+    font-family: 'DM Sans', sans-serif;
+    font-size: 0.62rem;
+    font-weight: 700;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: #7b7b7b;
+    margin-bottom: 2px;
+}
+.vv-info-value {
+    display: block;
+    font-family: 'DM Sans', sans-serif;
+    font-size: 0.82rem;
+    font-weight: 600;
+    color: #1e293b;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
-.vv-stat {
+
+/* Tags grid */
+.vv-tags-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+    margin-top: 0.4rem;
+}
+.vv-tag {
     display: inline-block;
-    background: #1a1d27;
-    border: 1px solid #1e2330;
+    background: #e8f5fc;
+    border: 1px solid #b8dff0;
     border-radius: 6px;
-    padding: 0.25rem 0.75rem;
-    font-family: 'DM Mono', monospace;
-    font-size: 0.77rem;
-    color: #00d4ff;
-    margin: 0.15rem 0.2rem;
+    padding: 2px 10px;
+    font-family: 'DM Sans', sans-serif;
+    font-size: 0.7rem;
+    font-weight: 500;
+    color: #1a7faa;
+    transition: background 0.15s;
+}
+.vv-tag:hover { background: #cceaf8; }
+
+.vv-card {
+    background: #ffffff;
+    border: 1px solid #dde3ed;
+    border-radius: 12px;
+    padding: 1rem 1.1rem;
+    margin-bottom: 0.7rem;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
 }
 .vv-badge-green {
     display: inline-block;
-    background: rgba(0,229,160,0.12);
-    border: 1px solid #00e5a0;
-    color: #00e5a0;
+    background: #dcfce7;
+    border: 1.5px solid #16a34a;
+    color: #15803d;
     border-radius: 20px;
     padding: 0.32rem 1.1rem;
     font-size: 0.85rem;
-    font-family: 'DM Mono', monospace;
-    font-weight: 600;
+    font-family: 'DM Sans', sans-serif;
+    font-weight: 700;
 }
 .vv-badge-red {
     display: inline-block;
-    background: rgba(255,71,87,0.12);
-    border: 1px solid #ff4757;
-    color: #ff4757;
+    background: #fee2e2;
+    border: 1.5px solid #dc2626;
+    color: #b91c1c;
     border-radius: 20px;
     padding: 0.32rem 1.1rem;
     font-size: 0.85rem;
-    font-family: 'DM Mono', monospace;
-    font-weight: 600;
+    font-family: 'DM Sans', sans-serif;
+    font-weight: 700;
 }
 .vv-badge-amber {
     display: inline-block;
-    background: rgba(255,179,71,0.12);
-    border: 1px solid #ffb347;
-    color: #ffb347;
+    background: #fef3c7;
+    border: 1.5px solid #d97706;
+    color: #b45309;
     border-radius: 20px;
     padding: 0.32rem 1.1rem;
     font-size: 0.85rem;
-    font-family: 'DM Mono', monospace;
-    font-weight: 600;
+    font-family: 'DM Sans', sans-serif;
+    font-weight: 700;
 }
 .vv-reasoning {
-    background: #0d1119;
-    border-left: 3px solid #ffb347;
+    background: #fefce8;
+    border-left: 3px solid #d97706;
     padding: 0.8rem 1rem;
-    border-radius: 0 8px 8px 0;
+    border-radius: 0 10px 10px 0;
     font-size: 0.83rem;
-    color: #c0c4cc;
+    color: #78350f;
     line-height: 1.65;
-    font-family: 'IBM Plex Sans', sans-serif;
+    font-family: 'DM 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-hr             { border: none; border-top: 1px solid #1e2330; margin: 1.1rem 0; }
+.vv-stat-big-green { font-family: 'Nunito', sans-serif; font-size: 1.6rem; font-weight: 800; color: #16a34a; margin: 0; }
+.vv-stat-big-red   { font-family: 'Nunito', sans-serif; font-size: 1.6rem; font-weight: 800; color: #dc2626; margin: 0; }
+.vv-stat-big-dim   { font-family: 'Nunito', sans-serif; font-size: 1.6rem; font-weight: 800; color: #7b7b7b; margin: 0; }
+.vv-log-line       { font-size: 0.72rem; color: #7b7b7b; font-family: 'JetBrains Mono', monospace; margin: 2px 0; }
+.vv-hr             { border: none; border-top: 1px solid #dde3ed; margin: 1.1rem 0; }
 """
 
 
@@ -302,12 +408,12 @@ 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=h,
+        paper_bgcolor="rgba(255,255,255,0)", plot_bgcolor="rgba(248,250,252,0.6)",
+        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="#5a6070"),
+        showarrow=False, font=dict(size=12, color="#7b7b7b"),
     )
     return fig
 
@@ -316,9 +422,9 @@ def _blank_outputs(status_msg: str):
     """19-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>',  # 0  status
-        "<p class='vv-log-line'>—</p>",                                                           # 1  log
-        "<div style='padding:3rem;text-align:center;color:#5a6070;font-family:DM Mono,monospace'>No data yet.</div>",  # 2  left panel
+        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
@@ -432,8 +538,8 @@ def _build_outputs(
 ):
     #  Status
     status_html = (
-        '<p style="color:#00e5a0;font-family:DM Mono,monospace;font-size:0.82rem;padding:6px 0">'
-        " Analysis complete</p>"
+        '<p style="color:#16a34a;font-family:DM Sans,sans-serif;font-size:0.85rem;'
+        'font-weight:600;padding:6px 0"> Analysis complete</p>'
     )
 
     #  Log
@@ -453,36 +559,66 @@ 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 Mono',monospace;
-              font-size:0.75rem;color:#5a6070;text-decoration:none;margin:4px 0 10px">
+       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">
       ▶ Open on YouTube
     </a>
     <div class="vv-card">
       <p class="vv-section-title">Video</p>
-      <p style="font-family:'Syne',sans-serif;font-size:1.05rem;font-weight:700;margin:0 0 4px;color:#e8eaf0">
+      <p style="font-family:'Nunito',sans-serif;font-size:1.05rem;font-weight:800;margin:0 0 6px;color:#1e293b;line-height:1.35">
         {meta['title']}
       </p>
-      <p style="font-size:0.82rem;color:#5a6070;margin:0">
-        by <b style="color:#b0b4c0">{meta['channel_title']}</b> · {meta['published_at']}
-      </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>
     </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>
+    <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>
+      </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>
+      </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>
+      </div>
+      <div class="vv-metric-card">
+        <span class="vv-metric-icon">⏱</span>
+        <div class="vv-metric-value" style="font-size:1.05rem">{meta['duration']}</div>
+        <div class="vv-metric-label">Duration</div>
+      </div>
+    </div>
 
-    <p class="vv-section-title" style="margin-top:1rem">Tags</p>
-    {tag_html or '<span style="color:#5a6070;font-size:0.78rem">(none)</span>'}
+    <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>
 
     <details style="margin-top:1rem">
       <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>
+      <p style="font-size:0.79rem;color:#4a5568;line-height:1.7;white-space:pre-wrap;margin-top:8px;
+                background:#f4f7fb;border-radius:8px;padding:0.7rem">{desc_short}</p>
     </details>
     <details style="margin-top:0.5rem">
       <summary>📝 Transcript ({word_count} words)</summary>
-      <p style="font-size:0.75rem;color:#8090a0;line-height:1.65;margin-top:6px">{transcript_short}</p>
+      <p style="font-size:0.76rem;color:#4a5568;line-height:1.7;margin-top:8px;
+                background:#f4f7fb;border-radius:8px;padding:0.7rem">{transcript_short}</p>
     </details>
     """
 
@@ -533,7 +669,7 @@ def _build_outputs(
         fig_timeline = _empty_plotly()
 
     try:
-        fig_kw = keyword_bar(keywords, title="Top Video Keywords", color="#00d4ff")
+        fig_kw = keyword_bar(keywords, title="Top Video Keywords", color="#269ccc")
     except Exception:
         fig_kw = _empty_plotly()
 
@@ -549,24 +685,24 @@ def _build_outputs(
     #  Sentiment stat boxes (unchanged)
     if sent_sum:
         stat_pos = (
-            f'<div class="vv-card" style="text-align:center">'
+            f'<div class="vv-card" style="text-align:center;border-top:3px solid #16a34a">'
             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">Positively Engagement</p></div>'
+            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>'
         )
         stat_neg = (
-            f'<div class="vv-card" style="text-align:center">'
+            f'<div class="vv-card" style="text-align:center;border-top:3px solid #dc2626">'
             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">Negatively Engagement</p></div>'
+            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>'
         )
         stat_neu = (
-            f'<div class="vv-card" style="text-align:center">'
+            f'<div class="vv-card" style="text-align:center;border-top:3px solid #7b7b7b">'
             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>'
+            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>'
         )
     else:
         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>'
+            '<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>'
         )
         stat_pos = stat_neg = stat_neu = placeholder
 
@@ -623,19 +759,19 @@ 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'> YT_API_KEY secret not set.</p>",
+            "<p style='color:#dc2626;font-family:DM Sans,sans-serif;font-weight:500'> YT_API_KEY secret not set.</p>",
             gr.update(choices=[], value=None, visible=False),
         )
     if not (keyword or "").strip():
         return (
-            "<p style='color:#ffb347;font-family:DM Mono,monospace'>Enter a keyword to search.</p>",
+            "<p style='color:#d97706;font-family:DM Sans,sans-serif;font-weight:500'>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.</p>",
+            "<p style='color:#d97706;font-family:DM Sans,sans-serif;font-weight:500'>No results found.</p>",
             gr.update(choices=[], value=None, visible=False),
         )
 
@@ -648,12 +784,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:6px;flex-shrink:0">'
+            f'     style="width:72px;height:54px;object-fit:cover;border-radius:8px;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'<p style="margin:0;font-size:0.85rem;font-weight:700;color:#1e293b">{r["title"][:80]}</p>'
+            f'<p style="margin:0;font-size:0.75rem;color:#7b7b7b">'
             f'{r["channel_title"]} · {r["published_at"]} · '
-            f'<code style="color:#00d4ff">v={vid}</code></p>'
+            f'<code style="color:#269ccc;background:#e8f5fc;padding:1px 4px;border-radius:4px">v={vid}</code></p>'
             f'</div></div>'
         )
     return html, gr.update(choices=choices, value=None, visible=True)
@@ -673,21 +809,19 @@ with gr.Blocks(title="Misinformation Detection & Public Engagement ") as demo:
 
     #  Header
     gr.HTML("""
-    <div style="padding:1.5rem 0 0.8rem;border-bottom:1px solid #1e2330;margin-bottom:1.2rem">
-      <h1 class="vv-hero">🔬 Misinformation Detection & Public Engagement </h1>
-      # <p style="color:#5a6070;font-size:0.85rem;margin-top:4px;font-family:'DM Mono',monospace">
-      #   Misinformation detection
-      # </p>
+    <div style="padding:1.5rem 0 0.8rem;border-bottom:1.5px solid #dde3ed;margin-bottom:1.2rem">
+      <h1 class="vv-hero">🔬 Misinformation Detection & Public Engagement</h1>
     </div>
     """)
 
     #  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>
+        <div style="background:#e8f5fc;border:1px solid #b8dff0;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>
           Space secret — it is never exposed in the UI.
         </div>
         """)
@@ -724,7 +858,7 @@ with gr.Blocks(title="Misinformation Detection & Public Engagement ") as demo:
             gr.HTML("""
             <div class="vv-card" style="margin-bottom:8px">
               <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">
+              <p style="font-size:0.82rem;color:#7b7b7b;line-height:1.6;margin:0">
                 Upload your file, then type the title or keyword below to locate the matching YouTube entry.
               </p>
             </div>
@@ -741,7 +875,8 @@ with gr.Blocks(title="Misinformation Detection & Public Engagement ") as demo:
 
     #  Status
     status_box = gr.HTML(
-        '<p style="color:#5a6070;font-family:DM Mono,monospace;font-size:0.8rem;padding:6px 0">'
+        '<p style="color:#7b7b7b;font-family:DM Sans,sans-serif;font-size:0.82rem;'
+        'font-weight:500;padding:6px 0">'
         "Enter a URL above and click Analyze.</p>"
     )
 
@@ -751,8 +886,8 @@ with gr.Blocks(title="Misinformation Detection & Public Engagement ") 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:#7b7b7b;"
+                "font-family:DM Sans,sans-serif'>No data yet.</div>"
             )
 
         # RIGHT — analytics
@@ -813,8 +948,8 @@ with gr.Blocks(title="Misinformation Detection & Public Engagement ") as demo:
 
     #  Footer
     gr.HTML("""
-    <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">
+    <div style="margin-top:2rem;padding-top:1rem;border-top:1px solid #dde3ed;
+                text-align:center;font-family:'DM Sans',sans-serif;font-size:0.72rem;color:#9ed2c5">
       4-stream SeTa-Attention BiGRU · CCM / DMTE / Uncertainty Fusion ·
       Test ROC-AUC 0.967
     </div>
@@ -869,8 +1004,8 @@ if __name__ == "__main__":
     demo.launch(
         css=CSS,
         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"],
+            primary_hue=gr.themes.colors.sky,
+            neutral_hue=gr.themes.colors.slate,
+            font=[gr.themes.GoogleFont("DM Sans"), "sans-serif"],
         ),
-    )
+    )