Update app.py

app.py

@@ -39,29 +39,21 @@ PALETTE = {
     "stroke_alt":"rgba(255,255,255,0.10)",
 }
 
+from string import Template
+
 def build_custom_css():
     """
-    Strong-contrast dark UI, light text everywhere by default.
-    Uses string.Template so CSS braces don't break Python parsing.
+    Strong-contrast dark UI, light text everywhere (incl. Dataframe & Examples).
     """
     tmpl = Template(r"""
 :root{
-  --bg: $bg;
-  --panel: $panel;
-  --panel-alt: $panel_alt;
-  --text-light: $text_light;
-  --text-dark: $text_dark;
-
-  --primary: $primary;
-  --secondary: $secondary;
-  --accent: $accent;
-  --success: $success;
-  --danger: $danger;
-
-  --stroke: $stroke;
-  --stroke-alt: $stroke_alt;
-
-  /* Feed Gradio's CSS variables so components comply */
+  --bg: $bg; --panel: $panel; --panel-alt: $panel_alt;
+  --text-light: $text_light; --text-dark: $text_dark;
+  --primary: $primary; --secondary: $secondary; --accent: $accent;
+  --success: $success; --danger: $danger;
+  --stroke: $stroke; --stroke-alt: $stroke_alt;
+
+  /* Gradio tokens */
   --body-background-fill: var(--bg);
   --body-text-color: var(--text-light);
   --block-background-fill: var(--panel);
@@ -95,7 +87,7 @@ html, body, .gradio-container{
   border-radius: 12px;
 }
 
-/* Hero (subtle gradient from brand accents) */
+/* Hero */
 #hero{
   background:
     radial-gradient(900px 350px at 20% -20%, color-mix(in srgb, var(--secondary) 25%, transparent) 0%, transparent 100%),
@@ -106,83 +98,88 @@ html, body, .gradio-container{
   color: var(--text-light);
 }
 
-/* KPI cards */
-.kpi{
-  text-align:center; padding:12px;
-  border-radius:10px; border:1px solid var(--stroke);
-  background: var(--panel-alt); color: var(--text-light);
-}
+/* KPI */
+.kpi{ text-align:center; padding:12px; border-radius:10px; border:1px solid var(--stroke);
+  background: var(--panel-alt); color: var(--text-light); }
 
 /* Buttons */
 .gradio-container .gr-button, .gradio-container button{
-  border-radius: 10px !important; font-weight: 650 !important;
-  letter-spacing: .2px;
+  border-radius: 10px !important; font-weight: 650 !important; letter-spacing: .2px;
 }
 .gradio-container .gr-button-primary, .gradio-container button.primary{
-  background: var(--primary) !important;
-  color: var(--text-dark) !important;
+  background: var(--primary) !important; color: var(--text-dark) !important;
   border: 1px solid var(--button-primary-border-color) !important;
   box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--primary) 50%, transparent);
 }
 .gradio-container .gr-button-secondary, .gradio-container button.secondary{
-  background: var(--secondary) !important;
-  color: var(--text-dark) !important;
+  background: var(--secondary) !important; color: var(--text-dark) !important;
   border: 1px solid var(--button-secondary-border-color) !important;
 }
 
-/* Inputs / dropdowns / file */
-input, textarea, select,
-.gr-textbox, .gr-text-area, .gr-dropdown, .gr-file, .gr-slider{
+/* Inputs */
+input, textarea, select, .gr-textbox, .gr-text-area, .gr-dropdown, .gr-file, .gr-slider{
+  background: var(--panel-alt) !important; color: var(--text-light) !important;
+  border: 1px solid var(--stroke-alt) !important; border-radius: 10px !important;
+}
+input::placeholder, textarea::placeholder{ color: color-mix(in srgb, var(--text-light) 60%, transparent) !important; }
+
+/* Markdown / labels / links */
+label, .label, .prose h1, .prose h2, .prose h3, .prose p, .markdown-body{ color: var(--text-light) !important; }
+a, .prose a{ color: var(--accent) !important; text-decoration:none; } a:hover{ text-decoration: underline; }
+
+/* --- CRITICAL FIXES (visibility) --- */
+
+/* Pandas DataFrame table (Top passages) */
+.gradio-container table.dataframe,
+.gradio-container .dataframe,
+.gradio-container .gr-dataframe{
   background: var(--panel-alt) !important;
   color: var(--text-light) !important;
-  border: 1px solid var(--stroke-alt) !important;
+  border: 1px solid var(--stroke) !important;
   border-radius: 10px !important;
 }
-input::placeholder, textarea::placeholder{
-  color: color-mix(in srgb, var(--text-light) 60%, transparent) !important;
-}
-
-/* Markdown / labels */
-label, .label, .prose h1, .prose h2, .prose h3, .prose p, .markdown-body{
+.gradio-container table.dataframe th,
+.gradio-container table.dataframe td,
+.gradio-container .gr-dataframe th,
+.gradio-container .gr-dataframe td{
+  background: var(--panel-alt) !important;
   color: var(--text-light) !important;
+  border-color: var(--stroke-alt) !important;
 }
 
-/* Links */
-a, .prose a{ color: var(--accent) !important; text-decoration:none; }
-a:hover{ text-decoration: underline; }
-
-/* Dataframe / tables */
-.dataframe, table, .table, .gr-dataframe *{
-  color: var(--text-light) !important; background: transparent !important;
+/* Examples grid (Quick examples) */
+.gradio-container .examples,
+.gradio-container .examples *{
+  color: var(--text-light) !important;
 }
-.dataframe th{
+.gradio-container .examples, 
+.gradio-container .examples .grid, 
+.gradio-container .examples .grid .item{
   background: var(--panel-alt) !important;
-  border-bottom: 1px solid var(--stroke) !important;
+  border: 1px solid var(--stroke-alt) !important;
+  border-radius: 10px !important;
 }
-.dataframe td{
-  border-bottom: 1px solid var(--stroke-alt) !important;
+
+/* Code blocks in Markdown (error traces, etc.) */
+.markdown-body pre, .markdown-body code{
+  background: #0B1D3A !important; color: var(--text-light) !important;
+  border: 1px solid var(--stroke-alt) !important; border-radius: 8px;
 }
 
 /* Accordion */
 .accordion, .gr-accordion{
-  background: var(--panel-alt) !important;
-  border: 1px solid var(--stroke) !important;
-  border-radius: 10px !important;
+  background: var(--panel-alt) !important; border: 1px solid var(--stroke) !important; border-radius: 10px !important;
 }
 
 /* Tabs active underline */
 .gradio-container .tabs .tab-nav button.selected{
-  box-shadow: inset 0 -3px 0 0 var(--primary) !important;
-  color: var(--text-light) !important;
+  box-shadow: inset 0 -3px 0 0 var(--primary) !important; color: var(--text-light) !important;
 }
 
 /* Focus outlines for a11y */
-:focus-visible{
-  outline: 3px solid var(--accent) !important;
-  outline-offset: 2px !important;
-}
+:focus-visible{ outline: 3px solid var(--accent) !important; outline-offset: 2px !important; }
 
-/* Page width for large screens */
+/* Page width */
 .gradio-container{ max-width: 1120px; margin: 0 auto; }
 """)
     return tmpl.substitute(
@@ -193,6 +190,7 @@ a:hover{ text-decoration: underline; }
         stroke=PALETTE["stroke"], stroke_alt=PALETTE["stroke_alt"],
     )
 
+
 # =========================
 # Engine config
 # =========================