ui: retheme via Gradio CSS variables — coherent contrast on every component

app.py

@@ -161,391 +161,368 @@ def dispatch(mode: str, image_path: str | None, head: str, jurisdiction: str):
 
 
 CSS = """
-@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
-
-:root {
-  --bg-0: #04080a;
-  --bg-1: #07120f;
-  --bg-2: #0a1f17;
+@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
+
+/* ============================================================
+   Gradio CSS variable overrides — single source of truth.
+   Every component (input, button, code, dropdown, examples,
+   accordion) reads from these, so we don't fight selectors.
+   ============================================================ */
+:root, .gradio-container, body, gradio-app {
+  /* Palette */
   --emerald: #00d97e;
   --emerald-glow: #00ff8c;
   --cyan: #00e5ff;
   --leaf: #7dd3a8;
   --ink: #f1faf4;
-  --ink-dim: #b8d2c6;
+  --ink-dim: #c4d8cd;
   --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);
-  --panel-hi: rgba(18, 42, 32, 0.72);
-}
 
-/* ===== Page background ===== */
+  /* Body */
+  --body-background-fill: transparent;
+  --body-text-color: #f1faf4;
+  --body-text-color-subdued: #c4d8cd;
+  --body-text-size: 14px;
+  --background-fill-primary: rgba(10, 28, 22, 0.62);
+  --background-fill-secondary: rgba(7, 18, 15, 0.55);
+  --border-color-primary: rgba(125, 211, 168, 0.20);
+  --border-color-accent: #00d97e;
+  --border-color-accent-subdued: rgba(0, 217, 126, 0.35);
+
+  /* Accent */
+  --color-accent: #00d97e;
+  --color-accent-soft: rgba(0, 217, 126, 0.18);
+  --link-text-color: #7dd3a8;
+  --link-text-color-active: #00ff8c;
+  --link-text-color-hover: #00ff8c;
+  --link-text-color-visited: #7dd3a8;
+
+  /* Block (panel) */
+  --block-background-fill: rgba(10, 28, 22, 0.62);
+  --block-border-color: rgba(125, 211, 168, 0.20);
+  --block-border-width: 1px;
+  --block-radius: 14px;
+  --block-padding: 18px;
+  --block-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
+  --block-label-background-fill: transparent;
+  --block-label-text-color: #c4d8cd;
+  --block-label-text-size: 0.78rem;
+  --block-label-text-weight: 600;
+  --block-title-background-fill: transparent;
+  --block-title-text-color: #f1faf4;
+  --block-title-text-size: 1rem;
+  --block-title-text-weight: 600;
+  --block-info-text-color: #c4d8cd;
+  --block-info-text-size: 0.82rem;
+  --block-info-text-weight: 400;
+
+  /* Inputs */
+  --input-background-fill: rgba(4, 12, 9, 0.7);
+  --input-background-fill-focus: rgba(4, 12, 9, 0.85);
+  --input-background-fill-hover: rgba(7, 18, 15, 0.85);
+  --input-border-color: rgba(125, 211, 168, 0.22);
+  --input-border-color-focus: #00d97e;
+  --input-border-color-hover: rgba(125, 211, 168, 0.34);
+  --input-text-size: 0.92rem;
+  --input-text-weight: 400;
+  --input-padding: 10px 14px;
+  --input-radius: 10px;
+  --input-shadow: none;
+  --input-shadow-focus: 0 0 0 3px rgba(0, 217, 126, 0.18);
+  --input-placeholder-color: #8aa79b;
+
+  /* Buttons */
+  --button-primary-background-fill: linear-gradient(135deg, #00d97e 0%, #00e5ff 100%);
+  --button-primary-background-fill-hover: linear-gradient(135deg, #00ff8c 0%, #00e5ff 100%);
+  --button-primary-text-color: #04130c;
+  --button-primary-text-color-hover: #04130c;
+  --button-primary-border-color: transparent;
+  --button-primary-border-color-hover: transparent;
+  --button-primary-shadow: 0 6px 24px rgba(0, 217, 126, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25);
+  --button-primary-shadow-hover: 0 12px 32px rgba(0, 217, 126, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
+  --button-secondary-background-fill: rgba(125, 211, 168, 0.06);
+  --button-secondary-background-fill-hover: rgba(0, 217, 126, 0.12);
+  --button-secondary-text-color: #f1faf4;
+  --button-secondary-text-color-hover: #f1faf4;
+  --button-secondary-border-color: rgba(125, 211, 168, 0.34);
+  --button-secondary-border-color-hover: #00d97e;
+  --button-secondary-shadow: none;
+  --button-large-padding: 14px 26px;
+  --button-large-radius: 999px;
+  --button-large-text-size: 0.95rem;
+  --button-large-text-weight: 600;
+  --button-small-padding: 8px 14px;
+  --button-small-radius: 999px;
+  --button-small-text-size: 0.85rem;
+  --button-small-text-weight: 500;
+  --button-transition: all 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
+
+  /* Checkboxes / radios */
+  --checkbox-background-color: rgba(4, 12, 9, 0.7);
+  --checkbox-background-color-selected: #00d97e;
+  --checkbox-border-color: rgba(125, 211, 168, 0.34);
+  --checkbox-border-color-selected: #00d97e;
+  --checkbox-border-color-focus: #00d97e;
+  --checkbox-border-color-hover: #00d97e;
+  --checkbox-label-background-fill: rgba(4, 12, 9, 0.55);
+  --checkbox-label-background-fill-selected: rgba(0, 217, 126, 0.16);
+  --checkbox-label-background-fill-hover: rgba(0, 217, 126, 0.06);
+  --checkbox-label-border-color: rgba(125, 211, 168, 0.22);
+  --checkbox-label-border-color-selected: #00d97e;
+  --checkbox-label-text-color: #f1faf4;
+  --checkbox-label-text-color-selected: #00ff8c;
+  --checkbox-label-padding: 9px 14px;
+
+  /* Slider */
+  --slider-color: #00d97e;
+
+  /* Code */
+  --code-background-fill: rgba(2, 8, 6, 0.92);
+  --code-text-color: #d2efe0;
+
+  /* Tabs */
+  --tab-text-color-selected: #00ff8c;
+
+  /* Radii */
+  --radius-xxs: 6px;
+  --radius-xs: 8px;
+  --radius-sm: 10px;
+  --radius-md: 12px;
+  --radius-lg: 14px;
+  --radius-xl: 18px;
+  --layout-gap: 16px;
+
+  /* Neutral scale */
+  --neutral-50:  #f1faf4;
+  --neutral-100: #d8e8df;
+  --neutral-200: #c4d8cd;
+  --neutral-300: #a4c0b3;
+  --neutral-400: #8aa79b;
+  --neutral-500: #6e8c80;
+  --neutral-600: #517065;
+  --neutral-700: #3a544b;
+  --neutral-800: #243832;
+  --neutral-900: #142420;
+  --neutral-950: #04080a;
+
+  /* Primary scale */
+  --primary-50:  #d8fde9;
+  --primary-100: #aef9d2;
+  --primary-200: #80f1b8;
+  --primary-300: #4eea9a;
+  --primary-400: #1ee37c;
+  --primary-500: #00d97e;
+  --primary-600: #00b265;
+  --primary-700: #008c4f;
+  --primary-800: #006639;
+  --primary-900: #003f24;
+  --primary-950: #00210f;
+}
+
+/* ===== Page background — kept as a fixed layer behind everything ===== */
 html, body, gradio-app, .gradio-container {
-  background: radial-gradient(ellipse 80% 60% at 20% 0%, rgba(0, 217, 126, 0.18), transparent 60%),
-              radial-gradient(ellipse 70% 50% at 85% 20%, rgba(0, 229, 255, 0.10), transparent 60%),
-              radial-gradient(ellipse 90% 70% at 50% 110%, rgba(0, 217, 126, 0.10), transparent 60%),
-              linear-gradient(180deg, #04080a 0%, #061410 50%, #04080a 100%) !important;
-  color: var(--ink) !important;
+  background:
+    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(0, 217, 126, 0.18), transparent 60%),
+    radial-gradient(ellipse 70% 50% at 85% 20%, rgba(0, 229, 255, 0.10), transparent 60%),
+    radial-gradient(ellipse 90% 70% at 50% 110%, rgba(0, 217, 126, 0.10), transparent 60%),
+    linear-gradient(180deg, #04080a 0%, #061410 50%, #04080a 100%) !important;
+  color: #f1faf4 !important;
   font-family: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif !important;
+  min-height: 100vh;
 }
-.gradio-container { max-width: 1280px !important; margin: 0 auto !important; }
+.gradio-container { max-width: 1280px !important; margin: 0 auto !important; padding: 0 24px !important; }
 
 /* ===== Hero ===== */
-#hero { padding: 32px 4px 12px; }
+#hero { padding: 36px 4px 16px; }
 #hero h1 {
   font-family: "Fraunces", Georgia, serif;
   font-weight: 400;
   font-size: clamp(2rem, 5vw, 3.4rem);
   letter-spacing: -0.025em;
-  line-height: 1; margin: 0; color: var(--ink);
+  line-height: 1; margin: 0; color: #f1faf4;
 }
 #hero h1 em {
   font-style: italic;
-  background: linear-gradient(135deg, var(--emerald-glow), var(--cyan));
+  background: linear-gradient(135deg, #00ff8c, #00e5ff);
   -webkit-background-clip: text; background-clip: text;
   -webkit-text-fill-color: transparent;
   font-weight: 300;
 }
-#hero p { color: var(--ink-dim); margin-top: 14px; max-width: 680px; line-height: 1.55; }
+#hero p { color: #c4d8cd; margin-top: 14px; max-width: 680px; line-height: 1.6; font-size: 1rem; }
+#hero p strong { color: #f1faf4; }
 #hero .chip {
   display: inline-flex; gap: 8px; align-items: center;
   padding: 6px 14px; border-radius: 999px;
-  border: 1px solid var(--line-bright);
+  border: 1px solid rgba(125, 211, 168, 0.34);
   background: linear-gradient(135deg, rgba(0, 217, 126, 0.08), rgba(0, 229, 255, 0.04));
-  color: var(--leaf); font-size: 0.82rem; font-weight: 500;
+  color: #7dd3a8; font-size: 0.82rem; font-weight: 500;
+}
+.dot { width: 8px; height: 8px; border-radius: 50%; background: #00ff8c;
+       box-shadow: 0 0 12px #00ff8c; display: inline-block;
+       animation: matter-pulse 1.6s ease-in-out infinite; }
+@keyframes matter-pulse { 0%,100% {opacity:1;} 50% {opacity:0.4;} }
+
+/* ===== Markdown content (Passport summary, pipeline, section titles) ===== */
+.gradio-container .prose,
+.gradio-container .markdown,
+.gradio-container [class*="md"] {
+  color: #f1faf4 !important;
+}
+.gradio-container .prose p,
+.gradio-container .prose li,
+.gradio-container .prose td,
+.gradio-container .prose strong { color: #f1faf4 !important; }
+.gradio-container .prose em { color: #7dd3a8 !important; font-style: italic; }
+.gradio-container .prose h1,
+.gradio-container .prose h2,
+.gradio-container .prose h3,
+.gradio-container .prose h4 {
+  font-family: "Fraunces", Georgia, serif !important;
+  font-weight: 400 !important;
+  letter-spacing: -0.015em !important;
+  color: #f1faf4 !important;
 }
-.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--emerald-glow);
-       box-shadow: 0 0 12px var(--emerald-glow); display: inline-block;
-       animation: pulse 1.6s ease-in-out infinite; }
-@keyframes pulse { 0%,100% {opacity:1;} 50% {opacity:0.4;} }
-
-/* ===== Catch-all: every Gradio block becomes a glass panel ===== */
-.gradio-container [class*="block"],
-.gradio-container [class*="panel"],
-.gradio-container [class*="form"],
-.gradio-container .form,
-.gradio-container .block {
-  background: var(--panel) !important;
-  border: 1px solid var(--line) !important;
-  border-radius: 14px !important;
-  backdrop-filter: blur(10px);
+.gradio-container .prose h3 { font-size: 1.35rem !important; margin-top: 4px !important; }
+.gradio-container .prose code {
+  background: rgba(0, 217, 126, 0.10) !important;
+  color: #7dd3a8 !important;
+  font-family: "JetBrains Mono", ui-monospace, monospace !important;
+  padding: 2px 7px !important;
+  border-radius: 6px !important;
+  font-size: 0.86em !important;
+  border: 1px solid rgba(125, 211, 168, 0.20);
 }
-/* Don't double-wrap rows/cols — they're transparent layout containers */
-.gradio-container [class*="row"],
-.gradio-container [class*="column"],
-.gradio-container [class*="group"]:not([class*="block"]) {
-  background: transparent !important;
-  border: 0 !important;
-  backdrop-filter: none;
+.gradio-container .prose table {
+  border-collapse: separate !important;
+  border-spacing: 0 !important;
+  width: 100%;
+  margin: 14px 0 !important;
+  border: 1px solid rgba(125, 211, 168, 0.20) !important;
+  border-radius: 12px !important;
+  overflow: hidden;
 }
-
-/* ===== Labels ===== */
-.gradio-container label,
-.gradio-container [class*="label"] {
-  color: var(--ink-dim) !important;
-  font-size: 0.78rem !important;
+.gradio-container .prose th,
+.gradio-container .prose td {
+  padding: 11px 14px !important;
+  border-bottom: 1px solid rgba(125, 211, 168, 0.14) !important;
+  text-align: left !important;
+  background: rgba(7, 18, 15, 0.45) !important;
+  color: #f1faf4 !important;
+}
+.gradio-container .prose tr:last-child td { border-bottom: 0 !important; }
+.gradio-container .prose th {
+  background: rgba(0, 217, 126, 0.10) !important;
+  color: #7dd3a8 !important;
   font-weight: 600 !important;
-  letter-spacing: 0.06em;
   text-transform: uppercase;
+  font-size: 0.72rem;
+  letter-spacing: 0.08em;
 }
 
-/* ===== Inputs (textbox, dropdown, etc.) ===== */
-.gradio-container input[type="text"],
-.gradio-container input[type="number"],
-.gradio-container textarea,
-.gradio-container select,
-.gradio-container [class*="input"] input,
-.gradio-container [class*="textbox"] textarea {
-  background: rgba(4, 12, 9, 0.7) !important;
-  color: var(--ink) !important;
-  border: 1px solid var(--line) !important;
-  border-radius: 10px !important;
-  font-family: "Inter", sans-serif !important;
-}
-.gradio-container input:focus,
-.gradio-container textarea:focus,
-.gradio-container select:focus {
-  border-color: var(--emerald) !important;
-  outline: 0 !important;
-  box-shadow: 0 0 0 3px rgba(0, 217, 126, 0.15) !important;
-}
-
-/* ===== Dropdown menu ===== */
-.gradio-container [class*="dropdown"] [class*="options"],
-.gradio-container [class*="dropdown"] ul,
-.gradio-container [role="listbox"] {
-  background: var(--bg-1) !important;
-  border: 1px solid var(--line-bright) !important;
-  border-radius: 10px !important;
-  color: var(--ink) !important;
-}
-.gradio-container [role="option"] {
-  color: var(--ink) !important;
-}
-.gradio-container [role="option"]:hover,
-.gradio-container [role="option"][aria-selected="true"] {
-  background: rgba(0, 217, 126, 0.12) !important;
-  color: var(--emerald-glow) !important;
-}
-
-/* ===== Radio buttons ===== */
-.gradio-container [class*="radio"] label,
-.gradio-container input[type="radio"] + span,
-.gradio-container [role="radio"] {
-  background: rgba(4, 12, 9, 0.55) !important;
-  border: 1px solid var(--line) !important;
-  border-radius: 10px !important;
-  color: var(--ink-dim) !important;
-  padding: 8px 14px !important;
-  cursor: pointer !important;
-  font-weight: 500 !important;
-  text-transform: none !important;
-  letter-spacing: 0 !important;
-  font-size: 0.9rem !important;
-  transition: all 200ms;
-}
-.gradio-container [class*="radio"] input[type="radio"]:checked + span,
-.gradio-container [class*="radio"] [aria-checked="true"],
-.gradio-container [role="radio"][aria-checked="true"] {
-  background: linear-gradient(135deg, rgba(0, 217, 126, 0.18), rgba(0, 229, 255, 0.08)) !important;
-  border-color: var(--emerald) !important;
-  color: var(--emerald-glow) !important;
-}
-
-/* ===== Buttons ===== */
-.gradio-container button {
-  font-family: "Inter", sans-serif !important;
-  font-weight: 600 !important;
-  border-radius: 999px !important;
-  transition: all 240ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
-}
-.gradio-container button[class*="primary"],
-.gradio-container .primary {
-  background: linear-gradient(135deg, var(--emerald) 0%, var(--cyan) 100%) !important;
-  color: #04130c !important;
-  border: 0 !important;
-  box-shadow: 0 6px 24px rgba(0, 217, 126, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
-}
-.gradio-container button[class*="primary"]:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 12px 32px rgba(0, 217, 126, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
-}
-.gradio-container button[class*="secondary"],
-.gradio-container button:not([class*="primary"]) {
-  background: rgba(125, 211, 168, 0.06) !important;
-  color: var(--ink) !important;
-  border: 1px solid var(--line-bright) !important;
+/* Section titles ("### Capture", "### Passport") get a gradient leader */
+.gradio-container .prose > h3:first-child {
+  display: flex; align-items: center; gap: 12px;
+  margin-bottom: 10px !important;
+  font-size: 1.5rem !important;
 }
-.gradio-container button:not([class*="primary"]):hover {
-  background: rgba(0, 217, 126, 0.12) !important;
-  border-color: var(--emerald) !important;
+.gradio-container .prose > h3:first-child::before {
+  content: ""; width: 32px; height: 2px;
+  background: linear-gradient(90deg, #00d97e, transparent);
+  border-radius: 2px;
 }
 
-/* ===== Image upload zone ===== */
-.gradio-container [class*="image"] [class*="upload"],
+/* ===== Image upload zone — reinforce dashed border + readable text ===== */
 .gradio-container [data-testid="image"],
+.gradio-container [class*="image"] [class*="upload"],
 .gradio-container [class*="ImageUploader"] {
   background: rgba(4, 12, 9, 0.55) !important;
-  border: 1.5px dashed var(--line-bright) !important;
+  border: 1.5px dashed rgba(125, 211, 168, 0.40) !important;
   border-radius: 14px !important;
-  color: var(--ink-dim) !important;
+  color: #c4d8cd !important;
   transition: all 220ms;
 }
 .gradio-container [class*="image"] [class*="upload"]:hover {
-  border-color: var(--emerald) !important;
+  border-color: #00d97e !important;
   background: rgba(0, 217, 126, 0.05) !important;
 }
-.gradio-container [class*="image"] svg {
-  color: var(--leaf) !important;
+.gradio-container [class*="image"] [class*="upload"] *,
+.gradio-container [class*="upload-text"] {
+  color: #c4d8cd !important;
 }
+.gradio-container [class*="image"] svg { color: #7dd3a8 !important; }
 
 /* ===== Examples gallery ===== */
-.gradio-container [class*="examples"] table,
-.gradio-container [class*="example"] {
+.gradio-container [class*="examples"] {
   background: transparent !important;
+}
+.gradio-container [class*="examples"] table {
+  border-collapse: separate !important;
+  border-spacing: 8px !important;
   border: 0 !important;
 }
 .gradio-container [class*="examples"] tr,
-.gradio-container [class*="example"] td {
-  background: rgba(7, 18, 15, 0.6) !important;
-  border: 1px solid var(--line) !important;
+.gradio-container [class*="examples"] td {
+  background: rgba(7, 18, 15, 0.55) !important;
+  border: 1px solid rgba(125, 211, 168, 0.18) !important;
   border-radius: 10px !important;
-  color: var(--ink-dim) !important;
+  color: #f1faf4 !important;
+  transition: all 200ms;
 }
 .gradio-container [class*="examples"] tr:hover {
-  border-color: var(--emerald) !important;
-  background: rgba(0, 217, 126, 0.05) !important;
-}
-
-/* ===== Output: Markdown rendering ===== */
-.gradio-container [class*="markdown"],
-.gradio-container [class*="prose"] {
-  color: var(--ink) !important;
-  font-family: "Inter", sans-serif !important;
-}
-.gradio-container [class*="markdown"] h1,
-.gradio-container [class*="markdown"] h2,
-.gradio-container [class*="markdown"] h3 {
-  font-family: "Fraunces", Georgia, serif !important;
-  font-weight: 400 !important;
-  letter-spacing: -0.015em !important;
-  color: var(--ink) !important;
-  margin-top: 4px !important;
-}
-.gradio-container [class*="markdown"] h3 {
-  font-size: 1.4rem !important;
-  border-bottom: 1px solid var(--line) !important;
-  padding-bottom: 8px;
-}
-.gradio-container [class*="markdown"] strong { color: var(--ink) !important; }
-.gradio-container [class*="markdown"] em { color: var(--leaf) !important; font-style: italic; }
-.gradio-container [class*="markdown"] code {
-  background: rgba(0, 217, 126, 0.08) !important;
-  color: var(--leaf) !important;
-  font-family: "JetBrains Mono", ui-monospace, monospace !important;
-  padding: 2px 6px !important;
-  border-radius: 6px !important;
-  font-size: 0.86em !important;
-  border: 1px solid var(--line);
-}
-.gradio-container [class*="markdown"] table {
-  border-collapse: separate !important;
-  border-spacing: 0 !important;
-  width: 100%;
-  margin: 12px 0 !important;
-  border: 1px solid var(--line) !important;
-  border-radius: 10px !important;
-  overflow: hidden;
+  border-color: #00d97e !important;
+  background: rgba(0, 217, 126, 0.06) !important;
+  transform: translateY(-1px);
 }
-.gradio-container [class*="markdown"] th,
-.gradio-container [class*="markdown"] td {
-  padding: 10px 14px !important;
-  border-bottom: 1px solid var(--line) !important;
-  text-align: left !important;
-  background: rgba(7, 18, 15, 0.5) !important;
+.gradio-container [class*="examples"] th {
+  color: #7dd3a8 !important;
+  font-size: 0.72rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
 }
-.gradio-container [class*="markdown"] tr:last-child td { border-bottom: 0 !important; }
-.gradio-container [class*="markdown"] th {
-  background: rgba(0, 217, 126, 0.06) !important;
-  color: var(--leaf) !important;
+
+/* ===== Accordion (Passport JSON drawer) ===== */
+.gradio-container details summary,
+.gradio-container [class*="accordion"] [class*="title"] {
+  color: #7dd3a8 !important;
   font-weight: 600 !important;
+  letter-spacing: 0.06em;
   text-transform: uppercase;
-  font-size: 0.74rem;
-  letter-spacing: 0.08em;
+  font-size: 0.78rem !important;
 }
 
-/* ===== Output: Code block (JSON) ===== */
+/* ===== Code block (JSON pane) ===== */
 .gradio-container [class*="code"] pre,
 .gradio-container [class*="code"] code,
 .gradio-container [class*="Code"] pre {
   background: rgba(2, 8, 6, 0.92) !important;
   color: #d2efe0 !important;
   font-family: "JetBrains Mono", ui-monospace, monospace !important;
-  font-size: 0.82rem !important;
-  line-height: 1.6 !important;
+  font-size: 0.8rem !important;
+  line-height: 1.65 !important;
   border-radius: 12px !important;
-  border: 1px solid var(--line) !important;
+  border: 1px solid rgba(125, 211, 168, 0.18) !important;
   padding: 16px !important;
 }
 .gradio-container [class*="code"] .token.string { color: #a5e8ff !important; }
 .gradio-container [class*="code"] .token.property,
-.gradio-container [class*="code"] .token.key { color: var(--leaf) !important; }
+.gradio-container [class*="code"] .token.key { color: #7dd3a8 !important; }
 .gradio-container [class*="code"] .token.number { color: #ffb547 !important; }
 .gradio-container [class*="code"] .token.boolean,
 .gradio-container [class*="code"] .token.null { color: #ff9bcc !important; }
-
-/* ===== Accordion ===== */
-.gradio-container [class*="accordion"] [class*="label"],
-.gradio-container details summary {
-  color: var(--leaf) !important;
-  font-weight: 600 !important;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  font-size: 0.78rem !important;
-  cursor: pointer;
-}
-
-/* ===== Section titles (gr.Markdown ### Capture / Passport) ===== */
-.gradio-container [class*="markdown"] > h3:first-child {
-  font-size: 1.6rem !important;
-  border-bottom: 0 !important;
-  padding-bottom: 0;
-  margin-bottom: 12px !important;
-  display: flex; align-items: center; gap: 12px;
-}
-.gradio-container [class*="markdown"] > h3:first-child::before {
-  content: "";
-  width: 28px; height: 1px;
-  background: linear-gradient(90deg, var(--emerald), transparent);
-}
+.gradio-container [class*="code"] .token.punctuation { color: #8aa79b !important; }
 
 /* ===== Scrollbars ===== */
 .gradio-container ::-webkit-scrollbar { width: 8px; height: 8px; }
-.gradio-container ::-webkit-scrollbar-thumb { background: rgba(125, 211, 168, 0.18); border-radius: 4px; }
+.gradio-container ::-webkit-scrollbar-thumb { background: rgba(125, 211, 168, 0.22); border-radius: 4px; }
 .gradio-container ::-webkit-scrollbar-track { background: transparent; }
 
 /* ===== Selection ===== */
 ::selection { background: rgba(0, 217, 126, 0.35); color: white; }
 
-/* ===== 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 */
+/* ===== Catch-all readability ===== */
+.gradio-container { color: #f1faf4; }
 .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;
-}
+.gradio-container textarea::placeholder { color: #8aa79b !important; opacity: 1 !important; }
 """
 
 HERO_HTML = """