Finish modern UI: rounded components everywhere, readable hero contrast

app.py

@@ -23,6 +23,85 @@ CSS = """
 .hero .pill b { color: #C9A227; }
 button.primary { background: #0D1B2A !important; border-radius: 12px !important; }
 .footnote { color: #64748b; font-size: 13.5px; line-height: 1.55; margin-top: 18px; }
+
+/* ---- Every Gradio component: rounded, soft border, soft shadow (no square boxes) ---- */
+.gradio-container .block,
+.gradio-container .form,
+.gradio-container .wrap,
+.gradio-container .panel,
+.gradio-container .component,
+.gradio-container .audio,
+.gradio-container .plot,
+.gradio-container .input,
+.gradio-container .output {
+  border-radius: 18px !important;
+  overflow: hidden !important;
+  border: 1px solid #E2E8F0 !important;
+  background: #FFFFFF !important;
+  box-shadow: 0 4px 20px rgba(13,27,42,.06) !important;
+}
+.gradio-container .block:has(.hero),
+.gradio-container .block:has(.card),
+.gradio-container .block.footnote {
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+.gradio-container button {
+  border-radius: 12px !important;
+}
+.gradio-container button.primary {
+  background: #0D1B2A !important;
+  color: #fff !important;
+  border: none !important;
+}
+.gradio-container button.primary:hover {
+  background: #1B3A5C !important;
+}
+.gradio-container input[type="text"],
+.gradio-container textarea,
+.gradio-container input[type="number"] {
+  border-radius: 12px !important;
+}
+.gradio-container .tab-nav {
+  background: #FFFFFF !important;
+  border: 1px solid #E2E8F0 !important;
+  border-radius: 14px !important;
+  padding: 4px !important;
+  gap: 4px !important;
+}
+.gradio-container .tab-nav button {
+  border-radius: 10px !important;
+  border: none !important;
+}
+.gradio-container .tab-nav button.selected {
+  background: #0D1B2A !important;
+  color: #fff !important;
+}
+.gradio-container .radio label,
+.gradio-container [class*="radio"] label {
+  border-radius: 999px !important;
+  border: 1px solid #E2E8F0 !important;
+  padding: 6px 14px !important;
+  background: #FFFFFF !important;
+}
+.gradio-container label span {
+  font-weight: 600 !important;
+  color: #0D1B2A !important;
+}
+.gradio-container audio {
+  border-radius: 12px !important;
+}
+
+/* ---- Hero text must stay white on the dark navy hero (Gradio theme otherwise forces dark text) ---- */
+.hero h1 { color: #FFFFFF !important; }
+.hero .tagline { color: rgba(255,255,255,.92) !important; }
+.hero .pill { color: #FFFFFF !important; }
+.hero .hero-icon { color: #E5C15D !important; background: rgba(201,162,39,.25) !important; }
+
+/* Bold words inside the hero tagline + solid gold icon tile for contrast */
+.hero .tagline b, .hero .tagline strong { color: #E5C15D !important; }
+.hero .hero-icon { background: #C9A227 !important; color: #0D1B2A !important; }
 """
 
 MIC_SVG = """<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="2" width="6" height="12" rx="3"/><path d="M5 10a7 7 0 0 0 14 0"/><path d="M12 19v3"/></svg>"""