Update app.py

app.py

@@ -409,6 +409,73 @@ footer {
     -webkit-text-fill-color: #4d6272 !important;
     opacity: 1 !important;
 }
+
+/* =========================================================
+   GRADIO 6 LIGHT-THEME ENFORCEMENT
+   In Gradio 6 + Svelte 5, the .block and .form wrappers
+   around components (Textbox, Markdown, etc.) default to a
+   dark fill when the browser is in dark mode or when CSS
+   variables resolve to dark values. This makes the area
+   AROUND the textbox look black on light pages. We pin all
+   the relevant CSS variables to light values and force the
+   wrapper backgrounds explicitly. */
+.gradio-container,
+.gradio-container * {
+    --block-background-fill: #ffffff !important;
+    --block-border-color: #d7dde5 !important;
+    --block-label-background-fill: transparent !important;
+    --block-label-text-color: #173a59 !important;
+    --block-title-text-color: #173a59 !important;
+    --body-background-fill: transparent !important;
+    --background-fill-primary: #ffffff !important;
+    --background-fill-secondary: #f5f8fb !important;
+    --panel-background-fill: #ffffff !important;
+    --input-background-fill: #ffffff !important;
+    --input-border-color: #ccd5de !important;
+    --color-accent-soft: #eef4f8 !important;
+    --neutral-50: #f8fafc !important;
+    --neutral-100: #f1f5f9 !important;
+    --neutral-200: #e2e8f0 !important;
+}
+
+/* Force every block/form/wrap to render light */
+.gradio-container .block,
+.gradio-container .form,
+.gradio-container .wrap,
+.gradio-container [class*="block-"],
+.gradio-container [data-testid="block-info"] {
+    background: #ffffff !important;
+    background-color: #ffffff !important;
+    border-color: #d7dde5 !important;
+    color: #173a59 !important;
+}
+
+/* The column/row containers themselves stay transparent so the
+   page background shows through (matching the surrounding panels). */
+.gradio-container .gr-column,
+.gradio-container .gr-row,
+.gradio-container > .main,
+.gradio-container > .main > .wrap {
+    background: transparent !important;
+    background-color: transparent !important;
+}
+
+/* Labels (the "Raw Stakeholder Notes" text) — dark on light */
+.gradio-container label,
+.gradio-container label *,
+.gradio-container .label-wrap,
+.gradio-container .label-wrap *,
+.gradio-container span[data-testid="block-info"],
+.gradio-container .block > .label,
+.gradio-container .block > label > span,
+.gradio-container .block > label > .label {
+    color: #173a59 !important;
+    -webkit-text-fill-color: #173a59 !important;
+    background: transparent !important;
+    background-color: transparent !important;
+    opacity: 1 !important;
+    font-weight: 700 !important;
+}
 """
 
 def guess_title(notes):