Update app.py

app.py

@@ -38,17 +38,16 @@ from charts import (
 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');
 
-/*  Variables — Stormy Morning & Ink Wash */
 :root {
-    --bg:            #FFFFE3;   /* Ink Wash Cream          */
-    --card:          #FFFFFF;   /* clean white card base   */
-    --border:        #BDDDFC;   /* Stormy Light            */
-    --text:          #4A4A4A;   /* Ink Wash Dark           */
-    --dim:           #7b7b7b;   /* muted text              */
-    --primary:       #269ccc;   /* Optimism Blue           */
-    --pos:           #88BDF2;   /* Stormy Sky  — Positively Engagement */
-    --neg:           #6A89A7;   /* Stormy Slate— Negatively Engagement */
-    --neu:           #CBCBCB;   /* Ink Wash Grey — Neutral             */
+    --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;
@@ -59,7 +58,6 @@ CSS = """
     --shadow-md: 0 4px 14px rgba(38,156,204,0.14), 0 1px 3px rgba(0,0,0,0.05);
 }
 
-/*  Base */
 html, body {
     background: var(--bg) !important;
     color: var(--text) !important;
@@ -78,7 +76,6 @@ 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;
@@ -87,7 +84,6 @@ div[class*="panel"], div[class*="gap"],
     box-shadow: var(--shadow-sm) !important;
 }
 
-/*  Tabs */
 .tab-nav button {
     background: transparent !important;
     border: none !important;
@@ -106,7 +102,6 @@ div[class*="panel"], div[class*="gap"],
 }
 .tab-nav { border-bottom: 1px solid var(--border) !important; }
 
-/*  Inputs */
 input[type="text"], input[type="password"], input[type="number"], textarea, select {
     background: #FFFFE3 !important;
     border: 1.5px solid var(--border) !important;
@@ -120,7 +115,10 @@ input:focus, textarea:focus, select:focus {
     box-shadow: 0 0 0 3px rgba(38,156,204,0.15) !important;
     outline: none !important;
 }
-label, .gr-label, span.svelte-1b6s6s {
+
+label:not(.vv-metric-label):not(.vv-info-label),
+.gr-label,
+span.svelte-1b6s6s {
     color: var(--dim) !important;
     font-family: 'DM Sans', sans-serif !important;
     font-size: 0.75rem !important;
@@ -129,10 +127,8 @@ label, .gr-label, span.svelte-1b6s6s {
     font-weight: 600 !important;
 }
 
-/*  Slider */
 input[type="range"] { accent-color: var(--primary); }
 
-/*  Buttons */
 button.primary, button[variant="primary"], .primary {
     background: linear-gradient(135deg, var(--primary), #1a7faa) !important;
     border: none !important;
@@ -153,7 +149,6 @@ button.secondary {
 }
 button:hover { opacity: 0.88; transform: translateY(-1px); transition: all 0.15s; }
 
-/*  Dropdowns */
 .dropdown, ul[role="listbox"], li[role="option"] {
     background: #FFFFE3 !important;
     border-color: var(--border) !important;
@@ -161,7 +156,6 @@ button:hover { opacity: 0.88; transform: translateY(-1px); transition: all 0.15s
 }
 li[role="option"]:hover { background: var(--primary-light) !important; }
 
-/*  Dataframe */
 .gr-dataframe, table {
     background: var(--card) !important;
     border-radius: 10px !important;
@@ -186,7 +180,6 @@ li[role="option"]:hover { background: var(--primary-light) !important; }
 }
 .gr-dataframe tr:hover td { background: var(--primary-light) !important; }
 
-/*  Accordion */
 details > summary {
     color: var(--dim) !important;
     font-family: 'DM Sans', sans-serif !important;
@@ -197,217 +190,268 @@ details > summary {
 }
 details[open] > summary { color: var(--primary) !important; }
 
-/*  Plot containers */
 .js-plotly-plot, .plotly { background: transparent !important; }
 .modebar { display: none !important; }
 
-/*  Scrollbar */
+.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); }
 
 
-/*  Shared HTML component classes */
-
 .vv-hero {
-    font-family: 'Nunito', sans-serif;
-    font-size: 1.7rem;
-    font-weight: 800;
+    font-family: 'Nunito', sans-serif !important;
+    font-size: 1.7rem !important;
+    font-weight: 800 !important;
     background: linear-gradient(135deg, #269ccc, #88BDF2);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    letter-spacing: -0.02em;
-    line-height: 1.2;
+    -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;
 }
+
 .vv-section-title {
-    font-family: 'DM Sans', sans-serif;
-    font-size: 0.68rem;
-    font-weight: 700;
-    letter-spacing: 0.16em;
-    text-transform: uppercase;
-    color: var(--dim, #7b7b7b);
-    margin-bottom: 0.5rem;
-    margin-top: 0;
+    font-family: 'DM Sans', sans-serif !important;
+    font-size: 0.68rem !important;
+    font-weight: 700 !important;
+    letter-spacing: 0.16em !important;
+    text-transform: uppercase !important;
+    color: #2d2d2d !important;
+    margin-bottom: 0.5rem !important;
+    margin-top: 0 !important;
 }
 
-/* ─── Metric cards: 4-column grid with hover-lift ─────────────────────────── */
 .vv-metric-grid {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 10px;
-    margin: 0.5rem 0 1rem;
+    display: grid !important;
+    grid-template-columns: repeat(4, 1fr) !important;
+    gap: 10px !important;
+    margin: 0.5rem 0 1rem !important;
 }
 .vv-metric-card {
-    background: #FFFFFF;
-    border: 1.5px solid #BDDDFC;
-    border-radius: 14px;
-    padding: 1rem 0.7rem;
-    text-align: center;
-    cursor: default;
-    transition: all 0.22s ease;
-    box-shadow: 0 1px 4px rgba(189,221,252,0.25);
-    position: relative;
-    overflow: hidden;
+    background: #FFFFFF !important;
+    border: 1.5px solid #BDDDFC !important;
+    border-radius: 14px !important;
+    padding: 1rem 0.7rem !important;
+    text-align: center !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: '';
-    position: absolute;
-    top: 0; left: 0; right: 0;
-    height: 3px;
-    background: linear-gradient(90deg, #269ccc, #88BDF2);
-    opacity: 0;
-    transition: opacity 0.22s ease;
+    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);
-    box-shadow: 0 10px 26px rgba(38,156,204,0.2);
-    border-color: #269ccc;
+    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; }
+.vv-metric-card:hover::before { opacity: 1 !important; }
 .vv-metric-icon {
-    font-size: 1.4rem;
-    margin-bottom: 4px;
-    display: block;
+    font-size: 1.4rem !important;
+    margin-bottom: 4px !important;
+    display: block !important;
 }
 .vv-metric-value {
-    font-family: 'Nunito', sans-serif;
-    font-size: 1.25rem;
-    font-weight: 800;
-    color: #269ccc;
-    margin: 0;
-    line-height: 1.2;
+    font-family: 'Nunito', sans-serif !important;
+    font-size: 1.25rem !important;
+    font-weight: 800 !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;
-    font-size: 0.62rem;
-    font-weight: 600;
-    letter-spacing: 0.1em;
-    text-transform: uppercase;
-    color: #7b7b7b;
-    margin-top: 2px;
+    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;
 }
 
-/* Video info grid */
 .vv-info-grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 8px;
-    margin: 0.5rem 0;
+    display: grid !important;
+    grid-template-columns: 1fr 1fr !important;
+    gap: 8px !important;
+    margin: 0.5rem 0 !important;
 }
 .vv-info-item {
-    background: #FFFFE3;
-    border: 1px solid #BDDDFC;
-    border-radius: 9px;
-    padding: 0.55rem 0.75rem;
+    background: #FFFFE3 !important;
+    border: 1px solid #BDDDFC !important;
+    border-radius: 9px !important;
+    padding: 0.55rem 0.75rem !important;
 }
 .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;
+    display: block !important;
+    font-family: 'DM Sans', sans-serif !important;
+    font-size: 0.62rem !important;
+    font-weight: 700 !important;
+    letter-spacing: 0.12em !important;
+    text-transform: uppercase !important;
+    color: #555555 !important;
+    -webkit-text-fill-color: #555555 !important;
+    margin-bottom: 2px !important;
 }
 .vv-info-value {
-    display: block;
-    font-family: 'DM Sans', sans-serif;
-    font-size: 0.82rem;
-    font-weight: 600;
-    color: #4A4A4A;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    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;
 }
 
-/* Tags — chips in Stormy Light */
 .vv-tags-grid {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 5px;
-    margin-top: 0.4rem;
+    display: flex !important;
+    flex-wrap: wrap !important;
+    gap: 5px !important;
+    margin-top: 0.4rem !important;
 }
 .vv-tag {
-    display: inline-block;
-    background: #BDDDFC;
-    border: 1px solid #9dcbf7;
-    border-radius: 20px;
-    padding: 3px 12px;
-    font-family: 'DM Sans', sans-serif;
-    font-size: 0.7rem;
-    font-weight: 600;
-    color: #384959;
-    transition: background 0.15s, transform 0.12s;
-}
-.vv-tag:hover { background: #a5cef8; transform: translateY(-1px); }
+    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;
-    border: 1px solid #BDDDFC;
-    border-radius: 12px;
-    padding: 1rem 1.1rem;
-    margin-bottom: 0.7rem;
-    box-shadow: 0 1px 4px rgba(189,221,252,0.2);
+    background: #FFFFFF !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;
 }
 .vv-badge-green {
-    display: inline-block;
-    background: #dcfce7;
-    border: 1.5px solid #16a34a;
-    color: #15803d;
-    border-radius: 20px;
-    padding: 0.32rem 1.1rem;
-    font-size: 0.85rem;
-    font-family: 'DM Sans', sans-serif;
-    font-weight: 700;
+    display: inline-block !important;
+    background: #dcfce7 !important;
+    border: 1.5px solid #16a34a !important;
+    color: #15803d !important;
+    -webkit-text-fill-color: #15803d !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;
 }
 .vv-badge-red {
-    display: inline-block;
-    background: #fee2e2;
-    border: 1.5px solid #dc2626;
-    color: #b91c1c;
-    border-radius: 20px;
-    padding: 0.32rem 1.1rem;
-    font-size: 0.85rem;
-    font-family: 'DM Sans', sans-serif;
-    font-weight: 700;
+    display: inline-block !important;
+    background: #fee2e2 !important;
+    border: 1.5px solid #dc2626 !important;
+    color: #b91c1c !important;
+    -webkit-text-fill-color: #b91c1c !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;
 }
 .vv-badge-amber {
-    display: inline-block;
-    background: #fef3c7;
-    border: 1.5px solid #d97706;
-    color: #b45309;
-    border-radius: 20px;
-    padding: 0.32rem 1.1rem;
-    font-size: 0.85rem;
-    font-family: 'DM Sans', sans-serif;
-    font-weight: 700;
+    display: inline-block !important;
+    background: #fef3c7 !important;
+    border: 1.5px solid #d97706 !important;
+    color: #b45309 !important;
+    -webkit-text-fill-color: #b45309 !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;
 }
 .vv-reasoning {
-    background: #fefce8;
-    border-left: 3px solid #d97706;
-    padding: 0.8rem 1rem;
-    border-radius: 0 10px 10px 0;
-    font-size: 0.83rem;
-    color: #78350f;
-    line-height: 1.65;
-    font-family: 'DM Sans', sans-serif;
-    margin-top: 8px;
-}
-
-/* Sentiment stat boxes — Stormy Morning palette */
-.vv-stat-big-pos  { font-family: 'Nunito', sans-serif; font-size: 1.6rem; font-weight: 800; color: #88BDF2; margin: 0; }
-.vv-stat-big-neg  { font-family: 'Nunito', sans-serif; font-size: 1.6rem; font-weight: 800; color: #6A89A7; margin: 0; }
-.vv-stat-big-dim  { font-family: 'Nunito', sans-serif; font-size: 1.6rem; font-weight: 800; color: #CBCBCB; margin: 0; }
-
-/* Legacy aliases kept for any inline references */
-.vv-stat-big-green { font-family: 'Nunito', sans-serif; font-size: 1.6rem; font-weight: 800; color: #88BDF2; margin: 0; }
-.vv-stat-big-red   { font-family: 'Nunito', sans-serif; font-size: 1.6rem; font-weight: 800; color: #6A89A7; 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 #BDDDFC; margin: 1.1rem 0; }
+    background: #fefce8 !important;
+    border-left: 3px solid #d97706 !important;
+    padding: 0.8rem 1rem !important;
+    border-radius: 0 10px 10px 0 !important;
+    font-size: 0.83rem !important;
+    color: #78350f !important;
+    -webkit-text-fill-color: #78350f !important;
+    line-height: 1.65 !important;
+    font-family: 'DM 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-stat-big-dim  {
+    font-family: 'Nunito', sans-serif !important;
+    font-size: 1.6rem !important;
+    font-weight: 800 !important;
+    color: #888888 !important;
+    -webkit-text-fill-color: #888888 !important;
+    margin: 0 !important;
+}
+.vv-stat-big-green {
+    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-red   {
+    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-log-line {
+    font-size: 0.72rem !important;
+    color: #555555 !important;
+    -webkit-text-fill-color: #555555 !important;
+    font-family: 'JetBrains Mono', monospace !important;
+    margin: 2px 0 !important;
+}
+.vv-hr { border: none !important; border-top: 1px solid #BDDDFC !important; margin: 1.1rem 0 !important; }
 """
 
 
@@ -418,12 +462,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(255,255,227,0)", plot_bgcolor="rgba(255,255,227,0.4)",
-        font=dict(color="#7b7b7b"), margin=dict(l=10, r=10, t=10, b=10), height=h,
+        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,
     )
     fig.add_annotation(
         text=msg, x=0.5, y=0.5, xref="paper", yref="paper",
-        showarrow=False, font=dict(size=12, color="#7b7b7b"),
+        showarrow=False, font=dict(size=12, color="#555555"),
     )
     return fig