Update app.py

app.py

@@ -465,26 +465,71 @@ def create_interface():
         
         /* Trial banner styling */
         .trial-banner {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+            background: linear-gradient(135deg, #9775fa 0%, #667eea 100%) !important;
             color: white !important;
             padding: 1.5rem !important;
             border-radius: 12px !important;
             margin-bottom: 2rem !important;
             text-align: center !important;
+            box-shadow: 0 4px 15px rgba(151, 117, 250, 0.2) !important;
         }
         
-        /* Button styling */
+        /* Button styling - match header section color */
         .gr-button[variant="primary"] {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+            background: #9775fa !important;
             color: white !important;
             border: none !important;
             border-radius: 8px !important;
             font-weight: 600 !important;
+            transition: all 0.3s ease !important;
+        }
+        
+        .gr-button[variant="primary"]:hover {
+            background: #8b5ff8 !important;
+            transform: translateY(-1px) !important;
+            box-shadow: 0 4px 12px rgba(151, 117, 250, 0.3) !important;
         }
         
         /* Progress bar styling */
-        .progress-bar-fill {
+        .gr-progress {
+            background-color: #f0f0f0 !important;
+            border-radius: 10px !important;
+            overflow: hidden !important;
+            height: 12px !important;
+            margin: 15px 0 !important;
+            border: 1px solid #e0e0e0 !important;
+        }
+        
+        .gr-progress-bar {
             background-color: #748ffc !important;
+            height: 100% !important;
+            border-radius: 10px !important;
+            transition: width 0.3s ease !important;
+            background-image: linear-gradient(45deg, rgba(255,255,255,0.2) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.2) 75%, transparent 75%, transparent) !important;
+            background-size: 20px 20px !important;
+            animation: progress-animation 1s linear infinite !important;
+        }
+        
+        .gr-progress-text {
+            color: #748ffc !important;
+            font-weight: 600 !important;
+            font-size: 0.9rem !important;
+            margin: 5px 0 !important;
+            text-align: center !important;
+        }
+        
+        @keyframes progress-animation {
+            0% { background-position: 0 0; }
+            100% { background-position: 20px 0; }
+        }
+        
+        /* Ensure progress container is visible */
+        .gr-form .gr-block:has(.gr-progress) {
+            background-color: #fafafa !important;
+            border: 2px solid #748ffc !important;
+            border-radius: 12px !important;
+            padding: 20px !important;
+            margin: 15px 0 !important;
         }
         """
     ) as demo:
@@ -533,6 +578,9 @@ def create_interface():
 # Create the Gradio interface
 demo = create_interface()
 
+# Enable queueing for progress bars to work properly
+demo.queue()
+
 # Export for HuggingFace Spaces to pick up
 if __name__ == "__main__":
     # Launch the Gradio demo directly for HF Spaces