ui: bump text contrast — readable ink on dark panels, fix Gradio info/placeholder text

app.py

@@ -171,9 +171,9 @@ CSS = """
   --emerald-glow: #00ff8c;
   --cyan: #00e5ff;
   --leaf: #7dd3a8;
-  --ink: #e6f3ec;
-  --ink-dim: #8aa39a;
-  --ink-muted: #5b7a70;
+  --ink: #f1faf4;
+  --ink-dim: #b8d2c6;
+  --ink-muted: #8aa79b;
   --line: rgba(125, 211, 168, 0.14);
   --line-bright: rgba(125, 211, 168, 0.28);
   --panel: rgba(10, 28, 22, 0.55);
@@ -491,6 +491,61 @@ html, body, gradio-app, .gradio-container {
 /* ===== Footer ===== */
 .gradio-container a { color: var(--leaf) !important; }
 .gradio-container a:hover { color: var(--emerald-glow) !important; }
+
+/* ===== Force readable text everywhere ===== */
+.gradio-container,
+.gradio-container p,
+.gradio-container span,
+.gradio-container div {
+  color: var(--ink);
+}
+.gradio-container [class*="markdown"] p,
+.gradio-container [class*="markdown"] li,
+.gradio-container [class*="markdown"] td {
+  color: var(--ink) !important;
+}
+/* Gradio's small "info" / helper text under inputs */
+.gradio-container [class*="info"],
+.gradio-container [class*="hint"],
+.gradio-container [class*="description"],
+.gradio-container [class*="help"],
+.gradio-container small {
+  color: var(--ink-dim) !important;
+  font-size: 0.82rem !important;
+  font-weight: 400 !important;
+  letter-spacing: 0 !important;
+  text-transform: none !important;
+  opacity: 1 !important;
+  margin-top: 6px !important;
+}
+/* Placeholder text */
+.gradio-container input::placeholder,
+.gradio-container textarea::placeholder {
+  color: var(--ink-muted) !important;
+  opacity: 1 !important;
+}
+/* Example gallery cells text */
+.gradio-container [class*="examples"] td,
+.gradio-container [class*="examples"] span,
+.gradio-container [class*="example"] span {
+  color: var(--ink) !important;
+}
+/* Image upload "drop image here" / "click to upload" text */
+.gradio-container [class*="image"] [class*="upload"] *,
+.gradio-container [class*="upload-text"],
+.gradio-container [class*="empty"] {
+  color: var(--ink-dim) !important;
+}
+/* Radio option text — keep readable when not selected */
+.gradio-container [role="radio"]:not([aria-checked="true"]),
+.gradio-container [class*="radio"] label:not([class*="selected"]) {
+  color: var(--ink) !important;
+}
+/* Dropdown selected value */
+.gradio-container [class*="dropdown"] input,
+.gradio-container [class*="dropdown"] [class*="single"] {
+  color: var(--ink) !important;
+}
 """
 
 HERO_HTML = """