Update app.py

app.py

@@ -203,7 +203,7 @@ Only provide the raw values, no headers.
 with gr.Blocks(
     title="Comic Creator", css="""
     body {
-        background-color: #e5cce5;  /* Light blue */
+        background-color: #b2d8d8;  
     }
 
     .gradio-container {
@@ -235,7 +235,7 @@ with gr.Blocks(
     #done-btn,
     #tts-btn,
     #recreate-scene-index {
-        background-color: #cc99cc;
+        background-color: #66b2b2;
         color: white;
         border: 1px solid #000000;
     }
@@ -252,12 +252,6 @@ with gr.Blocks(
         gap: 10px;
     }
 
-    
-    #tts-btn {
-        background-color: #ffffff;
-        color: black;
-        border: 1px solid #000000;
-    }
 
     #generate-btn:hover,
     #ai-write-btn:hover,
@@ -265,38 +259,37 @@ with gr.Blocks(
     #reset-btn:hover,
     #done-btn:hover,
     #tts-btn:hover{
-        background: #a64ca6 ;
+        background: #008080 ;
         transform: scale(1.05);
         color: #000;
         cursor: pointer;
     }
 
-    
 
     input, textarea, select {
         border-radius: 8px ;
-        border: 1px solid #ccc;
+        border: 1px solid #004c4c;
         padding: 10px !important;
-        background-color: #fff5fc;
+        background-color: #d5f2ee;
         box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
         transition: all 0.2s ease-in-out;
     }
     input:focus, textarea:focus, select:focus {
-        border-color: #ff80ab !important;
+        border-color: #004c4c !important;
         box-shadow: 0 0 6px rgba(255, 105, 180, 0.3);
         outline: none;
     }
     
     /* 🎆 Scene Image Border */
     .gr-image img {
-        border: 4px dashed #ffb6b9;
+        border: 4px dashed #004c4c;
         border-radius: 16px;
         padding: 4px;
     }
     
     .gr-accordion {
         background-color: #d4a373;
-        border: 1px solid #d6eaf8;
+        border: 1px solid #004c4c;
         border-radius: 12px;
         padding: 12px;
         margin-bottom: 12px;
@@ -327,8 +320,8 @@ with gr.Blocks(
     }
     
     #accordion {
-        background: linear-gradient(to right, #f5f7fa, #c3cfe2);
-        border: 2px solid #6c757d;
+        background: linear-gradient(to right, #66b2b2, #008080);
+        border: 2px solid #004c4c;
         border-radius: 12px;
         padding: 16px;
         box-shadow: 0 4px 12px rgba(0,0,0,0.1);
@@ -348,7 +341,7 @@ with gr.Blocks(
     }
     #output {
         background: #fff0f5;
-        border: 2px dashed #d63384;
+        border: 2px dashed #004c4c;
         border-radius: 14px;
         padding: 16px;
         font-size: 1.1rem;
@@ -401,7 +394,7 @@ with gr.Blocks(
         animation: bounce 2s infinite;
     }
     .gr-audio {
-        border: 2px solid #ab47bc;
+        border: 2px solid #004c4c;
         background-color: #f3e5f5;
         border-radius: 16px;
         padding: 12px;
@@ -453,9 +446,9 @@ with gr.Blocks(
     summary_output = gr.Markdown(label="📝 Scene Summary", elem_id = "output")
     explanation_output = gr.Textbox(label="📖 Scene Explanation", lines=6,elem_id="output")
 
-    with gr.Row(elem_classes="gr-audio"):
+    with gr.Row():
         tts_btn = gr.Button("🔊 Read Aloud", elem_id="tts-btn")
-        tts_audio = gr.Audio(label="Audio", autoplay=False)
+        tts_audio = gr.Audio(label="Audio", autoplay=False,elem_classes="gr-audio")
 
     done_btn = gr.Button("✅ Done", visible=False, elem_id="done-btn")
     txt_file = gr.File(label="📄 Explanations (.txt)", elem_classes="gr-file")