Update app.py

app.py

@@ -426,69 +426,48 @@ def age_preview(age_text, parse_mode):
 # =========================
 CSS = """
 /* =========================================================
-   FORCE SINGLE LIGHT THEME (fix dark-mode device issues)
+   FIX: Force single LIGHT theme across HF / Gradio / devices
    ========================================================= */
 
-/* Stop UA dark rendering on inputs/cards */
-html, body, .gradio-container {
+/* Always render as light */
+:root { color-scheme: light !important; }
+
+html, body, .gradio-container{
   color-scheme: light !important;
   background: #f6f7fb !important;
   color: #0f172a !important;
 }
 
-/* Gradio toggles dark mode using one of these (varies by version) */
+/* HF + Gradio sometimes set dark theme via class or data attr */
 .dark, .dark body, .dark .gradio-container,
-[data-theme="dark"], [data-theme="dark"] body, [data-theme="dark"] .gradio-container {
+html[data-theme="dark"], body[data-theme="dark"], [data-theme="dark"] .gradio-container{
   color-scheme: light !important;
   background: #f6f7fb !important;
   color: #0f172a !important;
-
-  /* Override Gradio theme tokens */
-  --body-background-fill: #f6f7fb !important;
-  --body-background-fill-secondary: #ffffff !important;
-  --body-text-color: #0f172a !important;
-  --body-text-color-subdued: #64748b !important;
-
-  --background-fill-primary: #f6f7fb !important;
-  --background-fill-secondary: #ffffff !important;
-  --block-background-fill: #ffffff !important;
-
-  --border-color-primary: #e5e7eb !important;
-
-  --input-background-fill: #ffffff !important;
-  --input-border-color: #e5e7eb !important;
-  --input-text-color: #0f172a !important;
-
-  --button-primary-background-fill: #2563eb !important;
-  --button-primary-text-color: #ffffff !important;
-}
-
-/* Ensure hero/header never inherits "dark" text colors */
-.hero, .hero * {
-  color: #0f172a !important;
-}
-.hero p {
-  color: #64748b !important;
 }
 
-/* Force form controls to stay readable on mobile dark mode */
-.gradio-container input,
-.gradio-container textarea,
-.gradio-container select {
-  color: #0f172a !important;
-  background: #ffffff !important;
+/* Also override when OS prefers dark */
+@media (prefers-color-scheme: dark){
+  html, body, .gradio-container{
+    color-scheme: light !important;
+    background: #f6f7fb !important;
+    color: #0f172a !important;
+  }
 }
 
-/* Hide any theme toggles (selectors differ across Gradio versions) */
+/* Hide theme toggles (selectors vary by Gradio version) */
 #theme-toggle,
 .theme-toggle,
 button[aria-label*="theme" i],
 button[aria-label*="dark" i],
 button[title*="theme" i],
 button[title*="dark" i]{
-  display: none !important;
+  display:none !important;
 }
 
+/* =========================================================
+   Your design tokens
+   ========================================================= */
 :root{
   --bg:#f6f7fb;
   --card:#ffffff;
@@ -502,18 +481,38 @@ button[title*="dark" i]{
   --radius: 16px;
 }
 
+/* =========================================================
+   Hard override Gradio theme tokens (this is the KEY fix)
+   ========================================================= */
 .gradio-container{
-  background: var(--bg);
-  color: var(--text);
+  background: var(--bg) !important;
+  color: var(--text) !important;
+
+  --body-background-fill: var(--bg) !important;
+  --body-background-fill-secondary: var(--card) !important;
+
+  --body-text-color: var(--text) !important;
+  --body-text-color-subdued: var(--muted) !important;
+
+  --block-background-fill: var(--card) !important;
+  --border-color-primary: var(--border) !important;
+
+  --input-background-fill: #fbfcff !important;
+  --input-border-color: var(--border) !important;
+  --input-text-color: var(--text) !important;
+
+  --button-primary-background-fill: var(--accent) !important;
+  --button-primary-text-color: #ffffff !important;
+
+  --block-label-text-color: var(--text) !important;
+  --block-title-text-color: var(--text) !important;
 }
 
-/* Hide Gradio footer / API bar */
+/* Hide Gradio footer */
 footer, .footer, #footer, .gradio-footer { display:none !important; height:0 !important; }
 
-/* Page wrapper */
+/* Wrapper */
 #wrap{ max-width: 980px; margin: 0 auto; padding: 14px 12px 28px; }
-
-/* Make Rows wrap on small screens */
 .gr-row{ flex-wrap: wrap !important; gap: 12px !important; }
 .gr-column{ min-width: 280px; }
 
@@ -526,10 +525,10 @@ footer, .footer, #footer, .gradio-footer { display:none !important; height:0 !im
   box-shadow: var(--shadow);
   margin-bottom: 12px;
 }
-.hero h1{ margin:0; font-size: 18px; font-weight: 800; letter-spacing:.2px; }
-.hero p{ margin:6px 0 0; color: var(--muted); font-size: 13px; line-height:1.35; }
+.hero h1{ margin:0; font-size: 18px; font-weight: 800; letter-spacing:.2px; color: var(--text) !important; }
+.hero p{ margin:6px 0 0; color: var(--muted) !important; font-size: 13px; line-height:1.35; }
 
-/* Card wrapper for inputs/outputs */
+/* Card wrapper */
 .card{
   background: var(--card);
   border: 1px solid var(--border);
@@ -540,7 +539,100 @@ footer, .footer, #footer, .gradio-footer { display:none !important; height:0 !im
 
 .mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
 
-/* Results */
+/* =========================================================
+   FIX INPUTS: borders + dropdown inner-white box removal
+   ========================================================= */
+
+/* Labels should ALWAYS be dark (not grey) */
+.gradio-container label,
+.gradio-container .label,
+.gradio-container .block-label,
+.gradio-container .wrap > label,
+.gradio-container .form > label{
+  color: var(--text) !important;
+  font-weight: 600 !important;
+}
+
+/* Textbox border (Age) */
+.gradio-container input[type="text"],
+.gradio-container input[type="number"],
+.gradio-container textarea{
+  border: 1px solid var(--border) !important;
+  background: #fbfcff !important;
+  color: var(--text) !important;
+  border-radius: 12px !important;
+  box-shadow: none !important;
+}
+
+/* Dropdown/Combobox wrapper should have border */
+.gradio-container div[role="combobox"],
+.gradio-container div[role="listbox"]{
+  border: 1px solid var(--border) !important;
+  background: #fbfcff !important;
+  border-radius: 12px !important;
+  box-shadow: none !important;
+}
+
+/* REMOVE the inner "white container" look inside dropdown */
+.gradio-container div[role="combobox"] input{
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+  padding: 0 !important;
+  color: var(--text) !important;
+}
+
+/* =========================================================
+   FIX RADIO: ensure selection dot is visible + looks consistent
+   ========================================================= */
+
+.gradio-container input[type="radio"]{
+  accent-color: var(--accent) !important;
+}
+
+/* Radiogroup option styling (works across Gradio v3/v4) */
+.gradio-container div[role="radiogroup"] label{
+  display: flex !important;
+  align-items: center !important;
+  gap: 10px !important;
+  border: 1px solid var(--border) !important;
+  background: #fbfcff !important;
+  border-radius: 12px !important;
+  padding: 8px 10px !important;
+  color: var(--text) !important;
+}
+
+/* Make the radio circle always visible */
+.gradio-container div[role="radiogroup"] input[type="radio"]{
+  width: 16px !important;
+  height: 16px !important;
+  margin: 0 !important;
+}
+
+/* =========================================================
+   Batch tab: file upload + dataframe keep same colors in “dark”
+   ========================================================= */
+
+/* Upload area / dropzone (multiple selectors for HF/Gradio versions) */
+.gradio-container .upload,
+.gradio-container .file-upload,
+.gradio-container [data-testid="file"],
+.gradio-container [data-testid="file-upload"],
+.gradio-container [aria-label*="Upload" i]{
+  background: #ffffff !important;
+  color: var(--text) !important;
+  border: 1px dashed rgba(100,116,139,.35) !important;
+  border-radius: 14px !important;
+}
+
+/* Dataframe readability */
+.gradio-container table,
+.gradio-container thead,
+.gradio-container tbody{
+  color: var(--text) !important;
+}
+
+/* Results card */
 .result-card{
   background: #ffffff;
   border: 1px solid var(--border);
@@ -549,7 +641,7 @@ footer, .footer, #footer, .gradio-footer { display:none !important; height:0 !im
   box-shadow: var(--shadow);
 }
 .result-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
-.result-title{ font-size: 13px; font-weight: 900; letter-spacing:.3px; }
+.result-title{ font-size: 13px; font-weight: 900; letter-spacing:.3px; color: var(--text) !important; }
 
 .grid2{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
 .grid3{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
@@ -615,7 +707,7 @@ footer, .footer, #footer, .gradio-footer { display:none !important; height:0 !im
   background: #ffffff;
 }
 
-/* Primary button styling + full width on mobile */
+/* Primary button */
 #primaryBtn button{
   border-radius: 14px !important;
   border: 1px solid rgba(37,99,235,.35) !important;