Update app.py

app.py

@@ -196,6 +196,11 @@ CSS = """
   grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
   gap: 12px;
 }
+.stitch-box {
+  background-color: #f0f4ff;   /* pick any color you like */
+  border-radius: 12px;
+  padding: 16px;
+}
 .tl-grid video {
   width: 100%;
   height: 120px;
@@ -245,17 +250,18 @@ with gr.Blocks(css=CSS, title="StitchMaster") as demo:
     seed = gr.Number(value=0, precision=0, label="Seed (0 = random)")
 
     with gr.Row():
-        with gr.Column(scale=1, min_width=420):
-            start_dd = gr.Dropdown(label="Start frame", choices=[], interactive=True)
-            end_dd = gr.Dropdown(label="End frame", choices=[], interactive=True)
-            prompt = gr.Textbox(
-                placeholder="Describe the transition between the selected start and end frames…",
-                lines=3, label="Prompt", elem_classes=["rounded"]
-            )
-            run_btn = gr.Button("Generate", elem_classes=["pill"])
-            add_tl_btn = gr.Button("Add to timeline", elem_classes=["pill"])
-        with gr.Column(scale=1, min_width=420):
-            preview = gr.Video(label="Video output", interactive=False)
+    with gr.Column(scale=1, min_width=420, elem_classes=["stitch-box"]):   # 👈 added class
+        start_dd = gr.Dropdown(label="Start frame", choices=[], interactive=True)
+        end_dd = gr.Dropdown(label="End frame", choices=[], interactive=True)
+        prompt = gr.Textbox(
+            placeholder="Describe the transition between the selected start and end frames…",
+            lines=3, label="Prompt", elem_classes=["rounded"]
+        )
+        run_btn = gr.Button("Generate", elem_classes=["pill"])
+        add_tl_btn = gr.Button("Add to timeline", elem_classes=["pill"])
+    with gr.Column(scale=1, min_width=420):
+        preview = gr.Video(label="Video output", interactive=False)
+
 
     # keep start/end dropdowns up to date based on which slots have images
     for comp in img_comps: