Update app.py

app.py

@@ -183,7 +183,92 @@ Only provide the raw values, no headers.
 # -------------------- UI --------------------
 
 
-with gr.Blocks(title="Comic Generator", css=".gradio-container { box-shadow: 0 2px 12px rgba(0,0,0,0.05); border-radius: 12px; }") as demo:    
+with gr.Blocks(
+    title="Comic Generator",
+    css="""
+    body {
+        background: #f2f6fa;
+    }
+    .gradio-container {
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+        border-radius: 16px;
+        padding: 24px;
+        background: #ffffff;
+        font-family: 'Segoe UI', sans-serif;
+    }
+
+    .gr-button {
+        border-radius: 8px;
+        font-weight: 600;
+        transition: 0.3s all ease-in-out;
+    }
+
+    /* Buttons with different colors */
+    button:has-text("➕ Generate This Scene") {
+        background-color: #007acc;
+        color: white;
+    }
+    button:has-text("🤖 Let AI Write This One") {
+        background-color: #34495e;
+        color: white;
+    }
+    button:has-text("🔄 Recreate This Scene") {
+        background-color: #5dade2;
+        color: white;
+    }
+    button:has-text("⏭️ Next Scene") {
+        background-color: #85929e;
+        color: white;
+    }
+    button:has-text("✅ Finalize Story & Export") {
+        background-color: #2e86c1;
+        color: white;
+    }
+    button:has-text("🔊 Read Aloud") {
+        background-color: #aab7b8;
+        color: white;
+    }
+
+    /* Sections */
+    .gr-accordion {
+        background-color: #e8f1f9;
+        border: 1px solid #d6eaf8;
+        border-radius: 10px;
+        padding: 8px;
+    }
+
+    .gr-markdown h2 {
+        color: #2e4053;
+    }
+
+    .gr-textbox textarea,
+    .gr-number input,
+    .gr-dropdown select {
+        border: 1px solid #d0d3d4;
+        border-radius: 6px;
+    }
+
+    .gr-image {
+        border: 1px solid #d6eaf8;
+        background-color: #f8f9f9;
+        border-radius: 12px;
+        padding: 8px;
+    }
+
+    .gr-audio {
+        background-color: #ecf0f1;
+        border-radius: 8px;
+        padding: 10px;
+    }
+
+    .gr-file {
+        background-color: #f7f9f9;
+        border: 1px dashed #bfc9ca;
+        border-radius: 10px;
+        padding: 10px;
+    }
+    """
+) as demo:
     gr.Markdown("## 🎬 AI Scene-by-Scene Story Creator")
     gr.Markdown("Describe your story one scene at a time, with AI-generated images, summaries, and explanations.")