Update css.py

css.py

@@ -13,61 +13,88 @@ LAYOUT_CSS = """
 textarea, input, .gr-button, .gr-box, .gr-panel,
 .gr-input, .gr-text-input { border-radius: 14px !important; }
 
-/* ── Cards - frosted glass ── */
+/* ── Cards - dark frosted glass with pop borders ── */
 .input-card {
-    background: rgba(255,255,255,0.82) !important;
+    background: rgba(20,20,35,0.88) !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;
+    border: 2.5px solid rgba(255,100,200,0.6) !important;
+    backdrop-filter: blur(18px) !important;
+    box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 20px rgba(255,100,200,0.15) !important;
 }
 .output-card {
-    background: rgba(255,255,255,0.82) !important;
+    background: rgba(20,20,35,0.88) !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;
+    border: 2.5px solid rgba(100,220,180,0.6) !important;
+    backdrop-filter: blur(18px) !important;
+    box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 20px rgba(100,220,180,0.15) !important;
 }
 .viz-card {
-    background: rgba(255,255,255,0.82) !important;
+    background: rgba(20,20,35,0.88) !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;
+    border: 2.5px solid rgba(120,160,255,0.6) !important;
+    backdrop-filter: blur(18px) !important;
+    box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 20px rgba(120,160,255,0.15) !important;
 }
 
-/* ── Text areas ── */
+/* ── Text areas - dark ── */
 .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;
+    background: rgba(15,15,30,0.9) !important;
+    color: #e0e0e0 !important;
+    border: 1px solid rgba(255,100,200,0.3) !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;
+    background: rgba(15,15,30,0.9) !important;
+    color: #e0e0e0 !important;
+    border: 1px solid rgba(100,220,180,0.3) !important;
+}
+
+/* ── Labels inside cards ── */
+.input-card label, .input-card .gr-label {
+    color: #ff8ed4 !important; font-weight: 700 !important;
+}
+.output-card label, .output-card .gr-label {
+    color: #6ee8c0 !important; font-weight: 700 !important;
+}
+.viz-card label, .viz-card .gr-label {
+    color: #8cb4ff !important; font-weight: 700 !important;
 }
 
 /* ── Buttons ── */
 .run-btn {
     border-radius: 26px !important; font-weight: 700 !important;
     font-size: 16px !important; min-height: 48px !important;
-    box-shadow: 0 4px 18px rgba(91,127,245,0.35) !important;
+    background: linear-gradient(135deg, #ff6ec7 0%, #a855f7 50%, #6366f1 100%) !important;
+    color: #fff !important; border: none !important;
+    box-shadow: 0 4px 18px rgba(168,85,247,0.4) !important;
     transition: transform 0.15s, box-shadow 0.15s !important;
 }
 .run-btn:hover {
     transform: translateY(-2px) !important;
-    box-shadow: 0 6px 24px rgba(91,127,245,0.5) !important;
+    box-shadow: 0 6px 28px rgba(168,85,247,0.55) !important;
+}
+.nav-btn {
+    border-radius: 20px !important; min-width: 40px !important;
+    background: rgba(120,160,255,0.25) !important; color: #8cb4ff !important;
+    border: 1px solid rgba(120,160,255,0.4) !important;
 }
-.nav-btn { border-radius: 20px !important; min-width: 40px !important; }
-.save-btn { border-radius: 20px !important; }
+.nav-btn:hover { background: rgba(120,160,255,0.4) !important; }
+.save-btn {
+    border-radius: 20px !important;
+    background: rgba(120,160,255,0.25) !important; color: #8cb4ff !important;
+    border: 1px solid rgba(120,160,255,0.4) !important;
+}
+.save-btn:hover { background: rgba(120,160,255,0.4) !important; }
 
-/* ── Section labels - visible on busy background ── */
+/* ── Section labels ── */
 .section-label {
     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;
+    text-shadow: 0 2px 10px rgba(0,0,0,0.6), 0 0 4px rgba(0,0,0,0.3) !important;
     margin: 8px 0 3px 4px !important;
 }
 
@@ -77,16 +104,20 @@ textarea, input, .gr-button, .gr-box, .gr-panel,
     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: #fff; text-decoration: underline; font-weight: 700; }
-.footer-note a:hover { color: #ffe066; }
+.footer-note a { color: #ffe066; text-decoration: underline; font-weight: 700; }
+.footer-note a:hover { color: #fff; }
 
 /* ── 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; }
+footer { color: rgba(255,255,255,0.5) !important; text-shadow: 0 1px 4px rgba(0,0,0,0.4); }
+footer a { color: rgba(255,255,255,0.7) !important; }
 
-/* ── Labels inside cards ── */
-.input-card label, .output-card label, .viz-card label {
-    color: #333 !important; font-weight: 600 !important;
+/* ── Counter text ── */
+.compact-text input {
+    color: #8cb4ff !important;
+    background: transparent !important;
+    border: none !important;
+    text-align: center !important;
+    font-weight: 600 !important;
 }
 """