aesthetic fix

app.py

@@ -122,14 +122,17 @@ def list_skills() -> tuple[str, gr.update, str]:
     return catalog, gr.update(value="", visible=False), ""
 
 
-MAGENTA = "#FF0080"
+MAGENTA = "#E6007A"
 NAVY = "#002D62"
 NAVY_DEEP = "#001F3F"
+SURFACE = "#FFFFFF"
+SURFACE_MUTED = "#F4F7FB"
+TEXT_MUTED = "#4A6278"
 
 yoyo_theme = (
     gr.themes.Base(
-        primary_hue="pink",
-        secondary_hue="blue",
+        primary_hue="blue",
+        secondary_hue="pink",
         neutral_hue="slate",
         font=gr.themes.GoogleFont("DM Sans"),
         font_mono=gr.themes.GoogleFont("JetBrains Mono"),
@@ -138,25 +141,37 @@ yoyo_theme = (
         body_background_fill="transparent",
         body_background_fill_dark="transparent",
         body_text_color=NAVY,
-        block_background_fill="transparent",
+        body_text_color_dark=NAVY,
+        block_background_fill=SURFACE,
+        block_background_fill_dark=SURFACE,
         block_border_width="0px",
-        block_label_text_color=NAVY,
+        block_label_text_color=TEXT_MUTED,
+        block_label_text_color_dark=TEXT_MUTED,
         block_title_text_color=NAVY,
+        block_title_text_color_dark=NAVY,
         block_radius="16px",
         button_large_radius="999px",
         button_primary_background_fill=NAVY,
         button_primary_background_fill_hover=NAVY_DEEP,
-        button_primary_text_color=MAGENTA,
-        button_secondary_background_fill="rgba(255,255,255,0.55)",
+        button_primary_text_color="#FFFFFF",
+        button_primary_text_color_dark="#FFFFFF",
+        button_secondary_background_fill=SURFACE,
+        button_secondary_background_fill_dark=SURFACE,
         button_secondary_text_color=NAVY,
-        button_secondary_background_fill_hover="rgba(255,255,255,0.85)",
-        input_background_fill="#FFFFFF",
-        input_border_color="rgba(0,45,98,0.14)",
+        button_secondary_text_color_dark=NAVY,
+        button_secondary_background_fill_hover=SURFACE_MUTED,
+        button_secondary_background_fill_hover_dark=SURFACE_MUTED,
+        input_background_fill=SURFACE,
+        input_background_fill_dark=SURFACE,
+        input_border_color="rgba(0,45,98,0.16)",
+        input_border_color_dark="rgba(0,45,98,0.16)",
+        input_border_color_focus=NAVY,
+        input_border_color_focus_dark=NAVY,
         input_radius="14px",
         checkbox_label_text_color=NAVY,
-        link_text_color=NAVY,
+        link_text_color=MAGENTA,
         link_text_color_hover=NAVY_DEEP,
-        shadow_drop="0 12px 40px rgba(0,31,63,0.10)",
+        shadow_drop="0 12px 40px rgba(0,31,63,0.08)",
     )
 )
 
@@ -164,18 +179,21 @@ APP_CSS = """
 @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=JetBrains+Mono:wght@400;500&family=Press+Start+2P&display=swap');
 
 :root {
-    --magenta: #FF0080;
+    --magenta: #E6007A;
+    --magenta-soft: rgba(230, 0, 122, 0.10);
     --navy: #002D62;
     --navy-deep: #001F3F;
-    --card: rgba(255, 255, 255, 0.93);
+    --text-muted: #4A6278;
+    --card: #FFFFFF;
     --card-border: rgba(0, 45, 98, 0.10);
+    --surface-muted: #F4F7FB;
 }
 
 .gradio-container {
     background:
-        radial-gradient(ellipse 80% 60% at 15% 0%, rgba(255,255,255,0.22) 0%, transparent 55%),
-        radial-gradient(ellipse 70% 50% at 90% 100%, rgba(0,31,63,0.18) 0%, transparent 50%),
-        linear-gradient(155deg, #FF0080 0%, #E6007A 42%, #C4006A 100%) !important;
+        radial-gradient(ellipse 90% 55% at 50% -10%, rgba(230,0,122,0.12) 0%, transparent 55%),
+        radial-gradient(ellipse 50% 40% at 100% 100%, rgba(0,45,98,0.06) 0%, transparent 50%),
+        linear-gradient(180deg, #FFF8FB 0%, #F7FAFC 55%, #EEF2F7 100%) !important;
     color: var(--navy) !important;
     max-width: 1080px !important;
     margin: 0 auto !important;
@@ -196,13 +214,12 @@ footer { display: none !important; }
     font-weight: 600;
     letter-spacing: 0.12em;
     text-transform: uppercase;
-    color: var(--navy);
-    background: rgba(255,255,255,0.45);
-    border: 1px solid rgba(0,45,98,0.12);
+    color: var(--magenta);
+    background: var(--magenta-soft);
+    border: 1px solid rgba(230,0,122,0.18);
     border-radius: 999px;
     padding: 0.35rem 0.9rem;
     margin-bottom: 1.1rem;
-    backdrop-filter: blur(8px);
 }
 .hero h1 {
     font-family: 'Press Start 2P', monospace;
@@ -210,20 +227,18 @@ footer { display: none !important; }
     line-height: 1.7;
     color: var(--navy-deep);
     margin: 0 0 1rem;
-    text-shadow: 0 1px 0 rgba(255,255,255,0.25);
 }
 .hero .tagline {
     font-family: 'Press Start 2P', monospace;
     font-size: clamp(0.48rem, 1.35vw, 0.62rem);
     line-height: 2;
-    color: var(--navy);
+    color: var(--text-muted);
     max-width: 44rem;
     margin: 0 auto 1.25rem;
     text-transform: uppercase;
-    opacity: 0.92;
 }
 .hero .subtitle {
-    color: var(--navy);
+    color: var(--text-muted);
     max-width: 34rem;
     margin: 0 auto 1.5rem;
     font-size: 1.02rem;
@@ -244,16 +259,15 @@ footer { display: none !important; }
     font-size: 0.78rem;
     font-weight: 600;
     color: var(--navy);
-    background: rgba(255,255,255,0.5);
-    border: 1px solid rgba(0,45,98,0.10);
+    background: var(--surface-muted);
+    border: 1px solid var(--card-border);
     border-radius: 999px;
     padding: 0.4rem 0.85rem;
-    backdrop-filter: blur(6px);
 }
 .flow-arrow {
-    color: var(--navy-deep);
+    color: var(--magenta);
     font-size: 0.85rem;
-    opacity: 0.55;
+    opacity: 0.75;
     user-select: none;
 }
 
@@ -263,8 +277,7 @@ footer { display: none !important; }
     background: var(--card) !important;
     border: 1px solid var(--card-border) !important;
     border-radius: 20px !important;
-    box-shadow: 0 10px 40px rgba(0,31,63,0.10), 0 2px 8px rgba(0,31,63,0.05) !important;
-    backdrop-filter: blur(12px);
+    box-shadow: 0 8px 32px rgba(0,31,63,0.07), 0 1px 3px rgba(0,31,63,0.04) !important;
     padding: 1.25rem 1.35rem !important;
     min-height: 100%;
 }
@@ -282,21 +295,29 @@ footer { display: none !important; }
     font-weight: 700;
     letter-spacing: 0.14em;
     text-transform: uppercase;
-    color: var(--navy);
-    opacity: 0.55;
+    color: var(--text-muted);
     margin: 0 0 0.85rem 0.15rem;
 }
 
-.prompt-input textarea {
+.prompt-input textarea,
+.prompt-input input {
+    background: var(--card) !important;
+    color: var(--navy-deep) !important;
     font-size: 1.05rem !important;
     line-height: 1.5 !important;
     border-radius: 14px !important;
-    border-color: rgba(0,45,98,0.12) !important;
-    box-shadow: inset 0 1px 3px rgba(0,31,63,0.04) !important;
+    border: 1px solid rgba(0,45,98,0.14) !important;
+    box-shadow: inset 0 1px 2px rgba(0,31,63,0.03) !important;
 }
-.prompt-input textarea:focus {
+.prompt-input textarea::placeholder,
+.prompt-input input::placeholder {
+    color: #8A9BB0 !important;
+    opacity: 1 !important;
+}
+.prompt-input textarea:focus,
+.prompt-input input:focus {
     border-color: var(--navy) !important;
-    box-shadow: 0 0 0 3px rgba(0,45,98,0.12) !important;
+    box-shadow: 0 0 0 3px rgba(0,45,98,0.10) !important;
 }
 
 .btn-row { gap: 0.6rem !important; margin-top: 0.25rem !important; }
@@ -309,34 +330,74 @@ footer { display: none !important; }
 }
 .btn-row button:hover { transform: translateY(-1px); }
 .btn-row button.primary {
-    box-shadow: 0 4px 14px rgba(0,31,63,0.22) !important;
+    background: var(--navy) !important;
+    color: #FFFFFF !important;
+    border: none !important;
+    box-shadow: 0 4px 14px rgba(0,31,63,0.18) !important;
+}
+.btn-row button.primary:hover {
+    background: var(--navy-deep) !important;
+}
+.btn-row button.secondary {
+    background: var(--card) !important;
+    color: var(--navy) !important;
+    border: 1px solid rgba(0,45,98,0.16) !important;
+}
+.btn-row button.secondary:hover {
+    background: var(--surface-muted) !important;
 }
 
-.examples-wrap .label-wrap { display: none !important; }
-.examples-wrap table { border: none !important; }
-.examples-wrap tbody tr td {
-    background: rgba(0,45,98,0.06) !important;
+.examples-wrap,
+.examples-wrap > .wrap,
+.examples-wrap .block {
+    background: var(--surface-muted) !important;
     border: 1px solid rgba(0,45,98,0.08) !important;
+    border-radius: 14px !important;
+    padding: 0.65rem 0.75rem !important;
+    margin-top: 0.75rem !important;
+}
+.examples-wrap .label-wrap {
+    display: block !important;
+    margin-bottom: 0.5rem !important;
+}
+.examples-wrap .label-wrap span,
+.examples-wrap label span {
+    color: var(--text-muted) !important;
+    font-size: 0.72rem !important;
+    font-weight: 700 !important;
+    letter-spacing: 0.12em !important;
+    text-transform: uppercase !important;
+}
+.examples-wrap table { border: none !important; width: 100% !important; }
+.examples-wrap tbody tr td {
+    background: var(--card) !important;
+    border: 1px solid rgba(0,45,98,0.12) !important;
     border-radius: 999px !important;
-    padding: 0.35rem 0.85rem !important;
-    margin: 0.2rem !important;
-    font-size: 0.82rem !important;
-    color: var(--navy) !important;
-    transition: background 0.15s ease, transform 0.15s ease !important;
+    padding: 0.4rem 0.9rem !important;
+    margin: 0.25rem !important;
+    font-size: 0.84rem !important;
+    font-weight: 500 !important;
+    color: var(--navy-deep) !important;
+    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease !important;
 }
 .examples-wrap tbody tr td:hover {
-    background: rgba(255,255,255,0.75) !important;
+    background: #FFFFFF !important;
+    border-color: var(--magenta) !important;
     transform: translateY(-1px);
     cursor: pointer;
 }
 
 .result-md .prose {
-    color: var(--navy) !important;
+    color: var(--navy-deep) !important;
     font-size: 0.95rem !important;
     line-height: 1.7 !important;
 }
+.result-md .prose em,
+.result-md .prose p {
+    color: var(--text-muted) !important;
+}
 .result-md .prose code {
-    background: rgba(255,0,128,0.08) !important;
+    background: var(--magenta-soft) !important;
     color: var(--navy-deep) !important;
     border-radius: 6px !important;
     padding: 0.1em 0.35em !important;
@@ -344,56 +405,139 @@ footer { display: none !important; }
     font-size: 0.88em !important;
 }
 .result-md .prose strong { color: var(--navy-deep) !important; }
+.result-md .prose h3 { color: var(--navy-deep) !important; }
 
+.code-block,
+.code-block .wrap {
+    background: var(--surface-muted) !important;
+}
 .code-block pre,
 .code-block code {
+    background: var(--surface-muted) !important;
+    color: var(--navy-deep) !important;
     border-radius: 12px !important;
     font-family: 'JetBrains Mono', monospace !important;
     font-size: 0.8rem !important;
-    border: 1px solid rgba(0,45,98,0.08) !important;
+    border: 1px solid rgba(0,45,98,0.10) !important;
+}
+.code-block label span {
+    color: var(--text-muted) !important;
+    font-weight: 600 !important;
 }
 
 .accordion-wrap {
-    background: var(--card) !important;
-    border: 1px solid var(--card-border) !important;
-    border-radius: 16px !important;
+    background: var(--surface-muted) !important;
+    border: 1px solid rgba(0,45,98,0.10) !important;
+    border-radius: 14px !important;
     overflow: hidden;
-    box-shadow: 0 6px 24px rgba(0,31,63,0.07) !important;
+    margin-top: 0.75rem !important;
+}
+.accordion-wrap > .label-wrap {
+    background: var(--surface-muted) !important;
+    border-bottom: 1px solid rgba(0,45,98,0.08) !important;
+}
+.accordion-wrap button,
+.accordion-wrap .label-wrap span {
+    color: var(--navy) !important;
+    font-weight: 600 !important;
+    font-size: 0.9rem !important;
+}
+.accordion-wrap svg {
+    color: var(--magenta) !important;
+    stroke: var(--magenta) !important;
 }
 
 .site-footer {
     margin-top: 2rem;
     padding: 1.1rem 1.4rem;
-    background: rgba(255,255,255,0.38);
-    border: 1px solid rgba(0,45,98,0.10);
+    background: var(--card);
+    border: 1px solid var(--card-border);
     border-radius: 16px;
-    backdrop-filter: blur(10px);
     display: flex;
     flex-wrap: wrap;
     gap: 0.75rem 1.5rem;
     justify-content: center;
     font-size: 0.82rem;
-    color: var(--navy);
+    color: var(--text-muted);
     animation: fade-up 0.8s ease-out;
 }
 .site-footer a {
-    color: var(--navy-deep);
+    color: var(--magenta);
     font-weight: 600;
     text-decoration: none;
-    border-bottom: 1px solid rgba(0,31,63,0.25);
+    border-bottom: 1px solid rgba(230,0,122,0.35);
 }
-.site-footer a:hover { border-bottom-color: var(--navy-deep); }
+.site-footer a:hover { border-bottom-color: var(--navy-deep); color: var(--navy-deep); }
 .footer-pill {
     display: inline-flex;
     align-items: center;
     gap: 0.35rem;
-    background: rgba(255,255,255,0.45);
+    background: var(--surface-muted);
     border-radius: 999px;
     padding: 0.3rem 0.75rem;
     font-weight: 600;
+    color: var(--navy);
+}
+.footer-pill.ok { color: #0a6b3e; background: rgba(10,107,62,0.08); }
+.footer-pill.warn { color: #8a4b00; background: rgba(138,75,0,0.08); }
+
+/* Force readable light surfaces even when Gradio dark mode is active */
+.dark .gradio-container {
+    background:
+        radial-gradient(ellipse 90% 55% at 50% -10%, rgba(230,0,122,0.12) 0%, transparent 55%),
+        radial-gradient(ellipse 50% 40% at 100% 100%, rgba(0,45,98,0.06) 0%, transparent 50%),
+        linear-gradient(180deg, #FFF8FB 0%, #F7FAFC 55%, #EEF2F7 100%) !important;
+    color: var(--navy) !important;
+}
+.dark .glass-panel,
+.dark .glass-panel > .wrap {
+    background: var(--card) !important;
+    color: var(--navy-deep) !important;
+}
+.dark .prompt-input textarea,
+.dark .prompt-input input {
+    background: var(--card) !important;
+    color: var(--navy-deep) !important;
+    border-color: rgba(0,45,98,0.14) !important;
+}
+.dark .examples-wrap,
+.dark .examples-wrap > .wrap,
+.dark .examples-wrap .block {
+    background: var(--surface-muted) !important;
+}
+.dark .examples-wrap tbody tr td {
+    background: var(--card) !important;
+    color: var(--navy-deep) !important;
+}
+.dark .accordion-wrap,
+.dark .accordion-wrap > .label-wrap {
+    background: var(--surface-muted) !important;
+}
+.dark .accordion-wrap button,
+.dark .accordion-wrap .label-wrap span {
+    color: var(--navy) !important;
+}
+.dark .code-block pre,
+.dark .code-block code {
+    background: var(--surface-muted) !important;
+    color: var(--navy-deep) !important;
+}
+.dark .btn-row button.primary {
+    background: var(--navy) !important;
+    color: #FFFFFF !important;
+}
+.dark .btn-row button.secondary {
+    background: var(--card) !important;
+    color: var(--navy) !important;
+}
+.dark .result-md .prose,
+.dark .result-md .prose p,
+.dark .result-md .prose h3 {
+    color: var(--navy-deep) !important;
+}
+.dark .result-md .prose em {
+    color: var(--text-muted) !important;
 }
-.footer-pill.ok { color: #0a6b3e; }
-.footer-pill.warn { color: #8a4b00; }
 
 @keyframes fade-up {
     from { opacity: 0; transform: translateY(10px); }
@@ -459,6 +603,7 @@ with gr.Blocks(
                 gr.Examples(
                     examples=[[p] for p in EXAMPLE_PROMPTS],
                     inputs=prompt,
+                    label="Try an example",
                 )
 
         with gr.Column(scale=6, elem_classes=["glass-panel"]):