Update app.py

app.py

@@ -178,18 +178,19 @@ custom_css = """
     max-width: 1200px;
     margin: 0 auto;
     padding: 20px;
-    background: #f5f5f5;
+    background: #f0f9fb;
     border-radius: 15px;
-    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
 }
 
 .header {
     text-align: center;
     padding: 2em;
-    background: linear-gradient(135deg, #2b5876 0%, #4e4376 100%);
+    background: linear-gradient(135deg, #2a9d8f 0%, #457b9d 100%);
     color: white;
     border-radius: 15px;
     margin-bottom: 2em;
+    border: 1px solid #264653;
 }
 
 .tab-nav {
@@ -202,33 +203,58 @@ custom_css = """
     border-radius: 8px !important;
     margin: 0 5px !important;
     transition: all 0.3s ease !important;
+    background: #e9f5f4 !important;
+    border: 1px solid #a8dadc !important;
+    color: #1d3557 !important;
 }
 
 .tab-button:hover {
     transform: translateY(-2px);
-    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
+    box-shadow: 0 3px 6px rgba(42,157,143,0.2);
+    background: #caf0f8 !important;
 }
 
 .dark-btn {
-    background: linear-gradient(135deg, #434343 0%, #000000 100%) !important;
+    background: linear-gradient(135deg, #457b9d 0%, #2a9d8f 100%) !important;
     color: white !important;
     border: none !important;
     padding: 12px 24px !important;
     border-radius: 8px !important;
+    transition: transform 0.2s ease !important;
+}
+
+.dark-btn:hover {
+    transform: scale(1.02);
+    box-shadow: 0 3px 8px rgba(42,157,143,0.3);
 }
 
 .output-card {
-    background: white !important;
+    background: #f8fbfe !important;
     border-radius: 10px !important;
     padding: 20px !important;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
+    box-shadow: 0 2px 4px rgba(69,123,157,0.1) !important;
+    border: 1px solid #e2e8f0;
 }
 
 .progress-indicator {
-    color: #666;
+    color: #457b9d;
     font-style: italic;
     margin-top: 10px;
 }
+
+/* Additional Color Elements */
+h1, h2, h3 {
+    color: #1d3557 !important;
+}
+
+audio {
+    border: 1px solid #a8dadc !important;
+    border-radius: 8px !important;
+}
+
+.slider-handle {
+    background: #2a9d8f !important;
+}
 """
 
 with gr.Blocks(css=custom_css, theme=gr.themes.Default()) as demo: