Update app.py

app.py

@@ -88,8 +88,8 @@ APP_CSS = """
     --vg-muted: #667085;
     --vg-line: #eceef5;
     --vg-soft: #f6f7fb;
-    --vg-radius: 10px;
-    --vg-radius-sm: 10px;
+    --vg-radius: 8px;
+    --vg-radius-sm: 6px;
 }
 :root:root:root:root main {
     max-width: 1160px;
@@ -261,16 +261,51 @@ APP_CSS = """
     border-radius: var(--vg-radius-sm) !important;
 }
 
-/* Make accordions look like simple rows instead of another nested card. */
-.voicegate-card details,
-.voicegate-card details > summary {
-    border: 0 !important;
+/* Rounded accordion cards: Advanced audio cleanup, Subtitle preview, and Log.
+   Keep them visually light, but give the expanded sections the same soft radius as
+   Upload audio and Target language. */
+.voicegate-accordion-card,
+.voicegate-accordion-card.block,
+.voicegate-accordion-card > .block,
+.voicegate-accordion-card > div,
+.voicegate-accordion-card > div > .block,
+.voicegate-accordion-card details {
+    border-radius: var(--vg-radius) !important;
+    overflow: hidden !important;
+}
+
+.voicegate-accordion-card details {
+    border: 1px solid var(--vg-line) !important;
+    background: #ffffff !important;
     box-shadow: none !important;
-    background: transparent !important;
 }
-.voicegate-card details > summary {
-    padding-left: 0 !important;
-    padding-right: 0 !important;
+
+.voicegate-accordion-card details > summary {
+    border-radius: var(--vg-radius) var(--vg-radius) 0 0 !important;
+    padding: 10px 12px !important;
+    background: var(--vg-soft) !important;
+    box-shadow: none !important;
+}
+
+.voicegate-accordion-card details:not([open]) > summary {
+    border-radius: var(--vg-radius) !important;
+}
+
+.voicegate-accordion-card details[open] > summary {
+    border-bottom: 1px solid var(--vg-line) !important;
+}
+
+/* The content rendered inside an open accordion can have its own Gradio wrappers.
+   Round those wrappers too so textboxes/sliders do not look square inside. */
+.voicegate-accordion-card .block,
+.voicegate-accordion-card .form,
+.voicegate-accordion-card .wrap,
+.voicegate-accordion-card .container,
+.voicegate-accordion-card .input-container,
+.voicegate-accordion-card textarea,
+.voicegate-accordion-card input,
+.voicegate-accordion-card select {
+    border-radius: var(--vg-radius-sm) !important;
 }
 
 /* Full-width primary action without an extra gr.Group wrapper. */
@@ -1119,7 +1154,7 @@ with gr.Blocks(title="VoiceGate", fill_width=True) as demo:
                         value="English",
                         elem_classes=["voicegate-control-card"],
                     )
-                    with gr.Accordion("Advanced audio cleanup", open=False):
+                    with gr.Accordion("Advanced audio cleanup", open=False, elem_classes=["voicegate-accordion-card"]):
                         user_tts_trim_start = gr.Slider(
                             label="TTS segment trim start",
                             minimum=0.0,
@@ -1143,12 +1178,12 @@ with gr.Blocks(title="VoiceGate", fill_width=True) as demo:
                     with gr.Row(elem_classes=["voicegate-downloads"]):
                         user_source_file = gr.DownloadButton("Download original subtitles", size="sm")
                         user_translated_file = gr.DownloadButton("Download translated subtitles", size="sm")
-                    with gr.Accordion("Subtitle preview", open=True):
+                    with gr.Accordion("Subtitle preview", open=True, elem_classes=["voicegate-accordion-card"]):
                         with gr.Row():
                             user_source_text = gr.Textbox(label="Original subtitles", lines=8)
                             user_translated_text = gr.Textbox(label="Translated subtitles", lines=8)
         with gr.Blocks(elem_classes=["voicegate-card"]):
-            with gr.Accordion("Log", open=True):
+            with gr.Accordion("Log", open=True, elem_classes=["voicegate-accordion-card"]):
                 user_status = gr.Textbox(label="Status", lines=12, elem_classes=["voicegate-status"])
         user_run.click(
             fn=voicegate_user_run,