Preview-vs-save flow, interactive recreate checkbox, top status message

app.py

@@ -299,9 +299,36 @@ CUSTOM_CSS = """
   --paper:#f4eee1; --kraft:#e4d5b7; --kraft-deep:#d6c19a; --line:#cdbb95;
   --ink:#33312b; --ink-soft:rgba(51,49,43,.62); --forest:#3d6a55; --forest-ink:#20392d; --amber:#e0913a;
 }
+/* Theme-proof: force the light "paper" look for ALL visitors, even on Gradio dark mode.
+   We override Gradio's theme CSS variables for both :root and .dark so blocks, inputs,
+   labels and text never go dark-on-dark or light-on-light. */
+.gradio-container, .dark, body, body.dark{
+  color-scheme: light !important;
+  --body-background-fill:#f4eee1 !important;
+  --background-fill-primary:#ffffff !important;
+  --background-fill-secondary:#efe7d4 !important;
+  --block-background-fill:#ffffff !important;
+  --block-label-background-fill:#efe7d4 !important;
+  --panel-background-fill:#efe7d4 !important;
+  --block-label-text-color:#33312b !important;
+  --block-title-text-color:#33312b !important;
+  --block-info-text-color:rgba(51,49,43,.62) !important;
+  --body-text-color:#33312b !important;
+  --body-text-color-subdued:rgba(51,49,43,.60) !important;
+  --input-background-fill:#ffffff !important;
+  --input-text-color:#33312b !important;
+  --input-placeholder-color:rgba(51,49,43,.45) !important;
+  --border-color-primary:#33312b !important;
+  --checkbox-background-color:#ffffff !important;
+  --checkbox-background-color-selected:#3d6a55 !important;
+  --checkbox-border-color:#33312b !important;
+  --link-text-color:#3d6a55 !important;
+}
 .gradio-container{max-width:880px !important;margin:auto !important;
-  font-family:'Archivo',system-ui,sans-serif !important;background:var(--paper) !important;}
-.gradio-container .prose, .gradio-container label, .gradio-container p{color:var(--ink) !important;}
+  font-family:'Archivo',system-ui,sans-serif !important;background:var(--paper) !important;color:var(--ink) !important;}
+.gradio-container .prose, .gradio-container .prose *, .gradio-container label,
+.gradio-container p, .gradio-container span, .gradio-container .md{color:var(--ink) !important;}
+.gradio-container .prose strong{color:var(--ink) !important;}
 .bs-hero{position:relative;overflow:hidden;background:var(--kraft);border:2px solid var(--ink);
   box-shadow:6px 6px 0 var(--ink);padding:30px 34px;margin-bottom:22px;}
 .bs-hero .kick{font-family:'Spline Sans Mono',monospace;font-size:12px;letter-spacing:.24em;
@@ -322,8 +349,10 @@ button.primary, .bs-generate button{background:var(--forest) !important;border:2
 .bs-linkedin{display:inline-block;background:var(--ink);color:var(--paper) !important;text-decoration:none;
   font-weight:800;padding:11px 20px;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--amber);}
 input:not([type='checkbox']):not([type='radio']), textarea{border-radius:0 !important;
-  border:2px solid var(--ink) !important;background:#fff !important;
+  border:2px solid var(--ink) !important;background:#fff !important;color:var(--ink) !important;
+  -webkit-text-fill-color:var(--ink) !important;
   font-family:'Spline Sans Mono',monospace !important;}
+input::placeholder, textarea::placeholder{color:rgba(51,49,43,.45) !important;-webkit-text-fill-color:rgba(51,49,43,.45) !important;}
 footer{display:none !important;}
 """