Update app.py

app.py

@@ -274,8 +274,8 @@ with gr.Blocks(
     
 
     input, textarea, select {
-        border-radius: 8px !important;
-        border: 1px solid #ccc !important;
+        border-radius: 8px ;
+        border: 1px solid #ccc;
         padding: 10px !important;
         background-color: #fff5fc;
         box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
@@ -346,15 +346,25 @@ with gr.Blocks(
         font-weight: 600;
         font-size: 1.2rem;
     }
-    #output{
-        color: 
-        font-weight: 600;
-        font: bold;
-        font-size: 1 rem;
-        border-radius: 10px;
-        border: 1px solid #a64d79;
+    #output {
+        background: #fff0f5;
+        border: 2px dashed #d63384;
+        border-radius: 14px;
+        padding: 16px;
+        font-size: 1.1rem;
+        color: #4a235a;
+        animation: floatX 4s ease-in-out infinite;
+        box-shadow: 0 4px 8px rgba(214, 51, 132, 0.15);
+        transition: all 0.3s ease-in-out;
+    }
+    
+    #output:hover {
+        background: #ffe0ec;
+        transform: scale(1.01);
+        cursor: default;
     }
 
+
     
         @keyframes float {
             0% { transform: translateY(0px); }
@@ -378,6 +388,33 @@ with gr.Blocks(
         0% { background-position: 0% 50%; }
         100% { background-position: 100% 50%; }
     }
+    @keyframes bounce {
+      0%   { transform: scale(1); }
+      50%  { transform: scale(1.1); }
+      100% { transform: scale(1); }
+    }
+    
+    .gr-file label[for^=component-]:before {
+        content: "📄";
+        margin-right: 8px;
+        font-size: 1.2rem;
+        animation: bounce 2s infinite;
+    }
+    .gr-audio {
+        border: 2px solid #ab47bc;
+        background-color: #f3e5f5;
+        border-radius: 16px;
+        padding: 12px;
+        animation: pulseColor 3s infinite;
+        transition: transform 0.3s ease;
+    }
+    
+    .gr-audio:hover {
+        transform: scale(1.02);
+        box-shadow: 0 6px 12px rgba(171, 71, 188, 0.2);
+    }
+
+
 
 """) as demo:
     gr.Markdown('<h1 class="animated-title">🎬 Comic Generator</h1>')
@@ -416,13 +453,13 @@ 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():
+    with gr.Row(elem_classes="gr-audio"):
         tts_btn = gr.Button("🔊 Read Aloud", elem_id="tts-btn")
         tts_audio = gr.Audio(label="Audio", autoplay=False)
 
     done_btn = gr.Button("✅ Done", visible=False, elem_id="done-btn")
-    txt_file = gr.File(label="📄 Explanations (.txt)")
-    pdf_file = gr.File(label="📘 Scene PDF")
+    txt_file = gr.File(label="📄 Explanations (.txt)", elem_classes="gr-file")
+    pdf_file = gr.File(label="📘 Scene PDF",elem_classes="gr-file")
 
     # States
     scene_images = gr.State([])