Update app.py

app.py

@@ -397,6 +397,31 @@ with gr.Blocks(
         font-weight: 600;
         font-size: 1.2rem;
     }
+    #custom-dropdown select {
+        background-color: #d5f2ee;
+        border: 2px solid #008080;
+        border-radius: 10px;
+        padding: 10px 12px;
+        font-size: 1rem;
+        color: #004c4c;
+        font-weight: 600;
+        transition: all 0.3s ease-in-out;
+        box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
+    }
+        
+    #custom-dropdown select:focus {
+        outline: none;
+        border-color: #00a3a3;
+        box-shadow: 0 0 8px rgba(0, 163, 163, 0.3);
+        background-color: #d5f2ee;
+    }
+    
+    #custom-dropdown label {
+        font-weight: bold;
+        color: #2e4053;
+        margin-bottom: 6px;
+    }
+
     #output {
         background: #fff0f5;
         border: 2px dashed #004c4c;
@@ -504,7 +529,7 @@ with gr.Blocks(
         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")
+            bg_style = gr.Dropdown(label="🎨 Background Style", choices=["Realistic", "Cartoon", "Fantasy", "Dark Fantasy"], value="Fantasy", elem_id="custom-dropdown")
     with gr.Group(elem_id="accordion"):
         with gr.Row(elem_classes="custom-rows"):
             with gr.Row(elem_classes="custom-rows"):