Update app.py

app.py

@@ -289,6 +289,13 @@ with gr.Blocks(
         box-shadow: 0 0 6px rgba(255, 105, 180, 0.3);
         outline: none;
     }
+
+    .custom-rows{
+        background: #e1f5f5;
+        padding: 10px;               
+        border-radius: 8px;          
+        margin-bottom: 10px; 
+        }
     
     /* 🎆 Scene Image Border */
     .gr-image img {
@@ -489,26 +496,26 @@ with gr.Blocks(
     gr.Markdown("### ✨ Describe Your Next Scene", elem_id="accordion1")
 
     with gr.Group(elem_id = "accordion"):
-        with gr.Row(elem_id="sccordion"):
+        with gr.Row(elem_classes="custom-rows"):
             char_count = gr.Number(label="👥 Number of Characters", precision=0, value=2, elem_id="input")
             character_names = gr.Textbox(label="🧙‍♂️ Character Names", elem_id="textarea")
-        with gr.Row():
+        with gr.Row(elem_classes="custom-rows"):
             dialogue = gr.Textbox(label="💬 Dialogue (optional)", placeholder="e.g. 'Protect the forest!'", elem_id="textarea")
             dialogue_speaker = gr.Textbox(label="🗣️ Who says the dialogue?", placeholder="e.g. Bramble", elem_id = "txtarea")
 
-        with gr.Row(elem_id="sccordion"):
+        with gr.Row(elem_classes="custom-rows"):
             char_styles = gr.Textbox(label="🧥 Outfit Descriptions", placeholder="e.g. Elora wears a leafy cloak, Bramble has a warrior vest", elem_id="textarea")
             char_moods = gr.Textbox(label="😠 Character Moods", placeholder="e.g. Elora is cautious, Bramble is brave", elem_id="textarea")
             bg_style = gr.Dropdown(label="🎨 Background Style", choices=["Realistic", "Cartoon", "Fantasy", "Dark Fantasy"], value="Fantasy", elem_id="select")
     with gr.Group(elem_id="accordion"):
-        with gr.Row():
-            with gr.Row():
+        with gr.Row(elem_classes="custom-rows"):
+            with gr.Row(elem_classes="custom-rows"):
                 generate_btn = gr.Button("➕ Generate The Scene", elem_id="generate-btn")
                 ai_coauthor_btn = gr.Button("🤖 Let AI Write This One", elem_id="ai-write-btn")
-            with gr.Row():
+            with gr.Row(elem_classes="custom-rows"):
                 recreate_btn = gr.Button("🔄 Recreate The Scene", elem_id="recreate-btn")
                 reset_btn = gr.Button("\n⏭️ Reset", elem_id="reset-btn")
-        with gr.Row():
+        with gr.Row(elem_classes="custom-rows"):
             recreate_scene_index = gr.Number(label="🔢 Scene Number to Recreate", precision=0, value=1, elem_id="recreate_scene_index")
 
     status = gr.Markdown(elem_classes="gr-image")
@@ -516,14 +523,14 @@ 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.Group(elem_id="accordion"):
-        with gr.Row():
+        with gr.Row(elem_classes="custom-rows"):
             tts_btn = gr.Button("🔊 Read Aloud", elem_id="tts-btn")
             tts_audio = gr.Audio(label="Audio", autoplay=False,elem_classes="gr-audio")
             
     done_btn = gr.Button("✅ Done", visible=False, elem_id="done-btn")
     
     with gr.Group(elem_id="accordion2"):
-        with gr.Row(elem_classes="gr-file"):
+        with gr.Row(elem_classes="custom-rows"):
             txt_file = gr.File(label="📄 Explanations (.txt)")
             pdf_file = gr.File(label="📘 Scene PDF")