Dark pro UI: dark theme, gold accents, rounded components

app.py

@@ -10,19 +10,40 @@ R = K.Recognizer(os.path.join(d, "audio2b_KEEP_graine0.pt"), os.path.join(d, "au
 
 CSS = """
 @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Space+Grotesk:wght@400;500;600&display=swap');
-.gradio-container { max-width: 920px !important; margin: auto !important; background: #F5F4F0 !important; font-family: 'Space Grotesk', system-ui, sans-serif !important; }
-.hero { background: linear-gradient(135deg, #0D1B2A 0%, #1B3A5C 100%); border-radius: 22px; padding: 34px 32px 26px; color: #fff; margin-bottom: 22px; box-shadow: 0 12px 40px rgba(13,27,42,.25); }
+body { background: #0A0E14 !important; }
+.gradio-container {
+  --body-background-fill: #0A0E14;
+  --background-fill-primary: #0A0E14;
+  --background-fill-secondary: #121826;
+  --block-background-fill: #141A26;
+  --block-border-color: rgba(255,255,255,.09);
+  --block-label-background-fill: #141A26;
+  --block-label-text-color: #E6EAF2;
+  --block-title-text-color: #E6EAF2;
+  --body-text-color: #E6EAF2;
+  --body-text-color-subdued: #94A3B8;
+  --button-primary-background-fill: #F2F5F9;
+  --button-primary-background-fill-hover: #FFFFFF;
+  --button-primary-text-color: #0B0F14;
+  --button-secondary-background-fill: #1B2334;
+  --button-secondary-background-fill-hover: #232E45;
+  --button-secondary-text-color: #E6EAF2;
+  --button-secondary-border-color: rgba(255,255,255,.14);
+  --input-background-fill: #0F1522;
+  --input-border-color: rgba(255,255,255,.12);
+  --input-text-color: #E6EAF2;
+  --input-placeholder-color: #7C8AA0;
+  max-width: 920px !important; margin: auto !important; background: #0A0E14 !important; color: #E6EAF2 !important; font-family: 'Space Grotesk', system-ui, sans-serif !important;
+}
+.hero { background: linear-gradient(135deg, #16233C 0%, #0B1220 100%); border: 1px solid rgba(255,255,255,.09); border-radius: 22px; padding: 34px 32px 26px; color: #fff; margin-bottom: 22px; box-shadow: 0 12px 40px rgba(0,0,0,.45); }
 .hero .hero-top { display: flex; gap: 18px; align-items: flex-start; }
-.hero .hero-icon { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 16px; background: rgba(201,162,39,.18); border: 1px solid rgba(201,162,39,.5); display: flex; align-items: center; justify-content: center; color: #C9A227; }
-.hero h1 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 46px; margin: 0 0 6px; font-weight: 700; letter-spacing: -.5px; line-height: 1.05; }
-.hero .tagline { font-size: 16.5px; opacity: .92; margin: 0 0 16px; line-height: 1.5; }
+.hero .hero-icon { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 16px; background: #C9A227 !important; color: #0D1B2A !important; display: flex; align-items: center; justify-content: center; }
+.hero h1 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 46px; margin: 0 0 6px; font-weight: 700; letter-spacing: -.5px; line-height: 1.05; color: #FFFFFF !important; }
+.hero .tagline { font-size: 16.5px; color: rgba(230,234,242,.85) !important; margin: 0 0 16px; line-height: 1.5; }
+.hero .tagline b, .hero .tagline strong { color: #E5C15D !important; }
 .hero .pills { display: flex; flex-wrap: wrap; gap: 8px; }
-.hero .pill { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 6px 14px; font-size: 13.5px; }
-.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) ---- */
+.hero .pill { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 999px; padding: 6px 14px; font-size: 13.5px; color: #FFFFFF !important; }
+.hero .pill b { color: #E5C15D; }
 .gradio-container .block,
 .gradio-container .form,
 .gradio-container .wrap,
@@ -34,9 +55,9 @@ button.primary { background: #0D1B2A !important; border-radius: 12px !important;
 .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;
+  border: 1px solid rgba(255,255,255,.09) !important;
+  background: #141A26 !important;
+  box-shadow: 0 4px 24px rgba(0,0,0,.35) !important;
 }
 .gradio-container .block:has(.hero),
 .gradio-container .block:has(.card),
@@ -45,61 +66,40 @@ button.primary { background: #0D1B2A !important; border-radius: 12px !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 button { border-radius: 12px !important; }
+.gradio-container button.primary { background: #F2F5F9 !important; color: #0B0F14 !important; border: none !important; }
+.gradio-container button.primary:hover { background: #FFFFFF !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 input[type="number"] { border-radius: 12px !important; background: #0F1522 !important; color: #E6EAF2 !important; }
+.gradio-container .tab-nav { background: #141A26 !important; border: 1px solid rgba(255,255,255,.09) !important; border-radius: 14px !important; padding: 4px !important; gap: 4px !important; }
+.gradio-container .tab-nav button { border-radius: 10px !important; border: none !important; color: #C7CEDD !important; background: transparent !important; }
+.gradio-container .tab-nav button.selected { background: #F2F5F9 !important; color: #0B0F14 !important; }
 .gradio-container .radio label,
-.gradio-container [class*="radio"] label {
+.gradio-container [class*="radio"] label { border-radius: 999px !important; border: 1px solid rgba(255,255,255,.12) !important; padding: 6px 14px !important; background: #1B2334 !important; color: #E6EAF2 !important; }
+.gradio-container .radio label:has(input:checked) { border-color: #C9A227 !important; }
+.gradio-container label span { font-weight: 600 !important; color: #E6EAF2 !important; }
+.gradio-container audio { border-radius: 12px !important; }
+.gradio-container .prose { color: #C7CEDD !important; }
+.gradio-container .prose strong { color: #E6EAF2 !important; }
+.footnote { color: #7C8AA0; font-size: 13.5px; line-height: 1.55; margin-top: 18px; }
+
+/* Gradio 6 radio options are labels with data-testid like "peak-radio-label" (no .radio class) */
+.gradio-container label[data-testid$="-radio-label"] {
   border-radius: 999px !important;
-  border: 1px solid #E2E8F0 !important;
+  border: 1px solid rgba(255,255,255,.12) !important;
   padding: 6px 14px !important;
-  background: #FFFFFF !important;
+  background: #1B2334 !important;
+  color: #E6EAF2 !important;
 }
-.gradio-container label span {
-  font-weight: 600 !important;
-  color: #0D1B2A !important;
+.gradio-container label[data-testid$="-radio-label"].selected {
+  border-color: #C9A227 !important;
+  background: #232E45 !important;
 }
-.gradio-container audio {
-  border-radius: 12px !important;
+.gradio-container label[data-testid$="-radio-label"] span {
+  color: #E6EAF2 !important;
+  background: transparent !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; }
 """
 
 # Simple, professional mark: a plus sign for "learning something new", drawn as SVG, not an emoji.