Update css.py

css.py

@@ -13,65 +13,81 @@ LAYOUT_CSS = """
 textarea, input, .gr-button, .gr-box, .gr-panel,
 .gr-input, .gr-text-input { border-radius: 14px !important; }
 
-/* ── Cards ── */
+/* ── Cards - frosted glass ── */
 .input-card {
-    background: linear-gradient(135deg, rgba(240,244,255,0.85) 0%, rgba(232,238,255,0.85) 100%);
-    border-radius: 20px !important; padding: 12px 16px !important;
-    border: 1px solid #d0d8f0 !important;
-    backdrop-filter: blur(8px);
+    background: rgba(255,255,255,0.82) !important;
+    border-radius: 22px !important; padding: 14px 18px !important;
+    border: 2px solid rgba(255,255,255,0.6) !important;
+    backdrop-filter: blur(16px) !important;
+    box-shadow: 0 8px 32px rgba(0,0,0,0.1) !important;
 }
 .output-card {
-    background: linear-gradient(135deg, rgba(240,253,244,0.85) 0%, rgba(232,245,233,0.85) 100%);
-    border-radius: 20px !important; padding: 12px 16px !important;
-    border: 1px solid #c8e6c9 !important;
-    backdrop-filter: blur(8px);
+    background: rgba(255,255,255,0.82) !important;
+    border-radius: 22px !important; padding: 14px 18px !important;
+    border: 2px solid rgba(255,255,255,0.6) !important;
+    backdrop-filter: blur(16px) !important;
+    box-shadow: 0 8px 32px rgba(0,0,0,0.1) !important;
 }
 .viz-card {
-    background: rgba(250,250,252,0.88);
-    border-radius: 20px !important; padding: 10px 14px !important;
-    border: 1px solid #e0e0e8 !important;
-    backdrop-filter: blur(8px);
+    background: rgba(255,255,255,0.82) !important;
+    border-radius: 22px !important; padding: 12px 16px !important;
+    border: 2px solid rgba(255,255,255,0.6) !important;
+    backdrop-filter: blur(16px) !important;
+    box-shadow: 0 8px 32px rgba(0,0,0,0.1) !important;
 }
 
 /* ── Text areas ── */
 .smiles-input textarea {
     font-size: 11px !important; font-family: monospace !important;
     border-radius: 12px !important; line-height: 1.5 !important;
+    background: rgba(255,255,255,0.92) !important;
 }
 .compact-text textarea {
     font-size: 11px !important; font-family: monospace !important;
     border-radius: 12px !important; line-height: 1.4 !important;
+    background: rgba(255,255,255,0.92) !important;
 }
 
 /* ── Buttons ── */
 .run-btn {
     border-radius: 26px !important; font-weight: 700 !important;
-    font-size: 15px !important; min-height: 46px !important;
-    box-shadow: 0 4px 14px rgba(91,127,245,0.3) !important;
+    font-size: 16px !important; min-height: 48px !important;
+    box-shadow: 0 4px 18px rgba(91,127,245,0.35) !important;
     transition: transform 0.15s, box-shadow 0.15s !important;
 }
 .run-btn:hover {
-    transform: translateY(-1px) !important;
-    box-shadow: 0 6px 20px rgba(91,127,245,0.4) !important;
+    transform: translateY(-2px) !important;
+    box-shadow: 0 6px 24px rgba(91,127,245,0.5) !important;
 }
 .nav-btn { border-radius: 20px !important; min-width: 40px !important; }
 .save-btn { border-radius: 20px !important; }
 
-/* ── Section labels ── */
+/* ── Section labels - visible on busy background ── */
 .section-label {
-    font-size: 10px !important; font-weight: 700 !important;
-    text-transform: uppercase !important; letter-spacing: 1.6px !important;
-    color: #999 !important; margin: 6px 0 2px 4px !important;
+    font-size: 13px !important; font-weight: 800 !important;
+    text-transform: uppercase !important; letter-spacing: 2px !important;
+    color: #fff !important;
+    text-shadow: 0 2px 8px rgba(0,0,0,0.5), 0 0 3px rgba(0,0,0,0.3) !important;
+    margin: 8px 0 3px 4px !important;
 }
 
 /* ── Footer ── */
 .footer-note {
-    text-align: center; font-size: 11px; color: #999;
-    margin: 6px 0 2px 0; line-height: 1.5;
+    text-align: center; font-size: 12px;
+    color: #fff; margin: 8px 0 4px 0; line-height: 1.5;
+    text-shadow: 0 1px 6px rgba(0,0,0,0.5);
 }
-.footer-note a { color: #5b7ff5; text-decoration: none; font-weight: 600; }
-.footer-note a:hover { text-decoration: underline; }
+.footer-note a { color: #fff; text-decoration: underline; font-weight: 700; }
+.footer-note a:hover { color: #ffe066; }
 
+/* ── Gradio built-in footer ── */
+footer { color: rgba(255,255,255,0.6) !important; text-shadow: 0 1px 4px rgba(0,0,0,0.4); }
+footer a { color: rgba(255,255,255,0.8) !important; }
+
+/* ── Labels inside cards ── */
+.input-card label, .output-card label, .viz-card label {
+    color: #333 !important; font-weight: 600 !important;
+}
 """
 
 FULL_CSS = BUBBLES_CSS + LAYOUT_CSS