Match Z-Image UI exactly - dark theme with proper styling

- Both input and output sections now have dark background (#1d1d1f)
- Output inner area has lighter gray (#2d2d2f) matching Z-Image
- Removed incorrect blue pill styling for labels
- Added variant="panel" to Row like Z-Image
- Fixed title color for dark theme (#f5f5f7)
- Proper character counter margin

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

app.py

@@ -252,6 +252,7 @@ css = """
     font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', 'Roboto', sans-serif !important;
 }
 
+/* Disable all transitions globally */
 * {
     transition: none !important;
     animation: none !important;
@@ -268,7 +269,7 @@ css = """
     font-weight: 600 !important;
     letter-spacing: -0.02em !important;
     line-height: 1.07 !important;
-    color: #1d1d1f !important;
+    color: #f5f5f7 !important;
     margin: 0 0 16px 0 !important;
 }
 
@@ -282,24 +283,12 @@ css = """
     min-width: 550px !important;
     max-width: 550px !important;
     flex: 0 0 550px !important;
-}
-
-/* Blue pill labels for Prompt and Aspect Ratio */
-.input-section label span,
-#prompt-textbox label span,
-.input-section .label-wrap span {
-    background: #0071e3 !important;
-    color: #ffffff !important;
-    padding: 4px 12px !important;
-    border-radius: 980px !important;
-    font-size: 14px !important;
-    font-weight: 500 !important;
-    display: inline-block !important;
+    flex-shrink: 0 !important;
+    flex-grow: 0 !important;
 }
 
 /* Textbox */
-.input-section textarea,
-#prompt-textbox textarea {
+textarea {
     font-size: 17px !important;
     line-height: 1.47 !important;
     border-radius: 12px !important;
@@ -313,17 +302,16 @@ css = """
     height: 500px !important;
     resize: vertical !important;
     overflow-y: auto !important;
+    margin-bottom: 16px !important;
 }
 
-.input-section textarea:focus,
-#prompt-textbox textarea:focus {
+textarea:focus {
     border-color: #0071e3 !important;
     box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.15) !important;
     outline: none !important;
 }
 
-.input-section textarea::placeholder,
-#prompt-textbox textarea::placeholder {
+textarea::placeholder {
     color: #86868b !important;
 }
 
@@ -332,8 +320,9 @@ css = """
     text-align: center;
     font-size: 13px;
     color: #86868b;
-    margin-top: 8px;
+    margin-top: -12px;
     margin-bottom: 16px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
 }
 
 .char-counter.warning {
@@ -344,15 +333,6 @@ css = """
     color: #ff3b30;
 }
 
-/* Dropdown styling */
-.input-section select,
-.input-section .wrap {
-    background: #2d2d2f !important;
-    border: 1px solid #424245 !important;
-    border-radius: 12px !important;
-    color: #f5f5f7 !important;
-}
-
 /* Button */
 button.primary {
     font-size: 17px !important;
@@ -366,19 +346,22 @@ button.primary {
     letter-spacing: -0.01em !important;
     cursor: pointer !important;
     width: 100% !important;
-    margin-top: 16px !important;
 }
 
 button.primary:hover {
     background: #0077ed !important;
 }
 
-/* Output Section - White background like Z-Image */
+button.primary:active {
+    opacity: 0.9 !important;
+}
+
+/* Output Section */
 div.output-section {
-    background: #ffffff !important;
+    background: #1d1d1f !important;
     border-radius: 18px !important;
     padding: 32px !important;
-    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4) !important;
     overflow: hidden !important;
     display: flex !important;
     align-items: center !important;
@@ -412,7 +395,7 @@ div.output-section {
     -webkit-backface-visibility: hidden !important;
 }
 
-/* Make progress/generation area fill more space */
+/* Inner image area with lighter background */
 .output-section > div {
     width: 100% !important;
     min-height: 75vh !important;
@@ -420,6 +403,8 @@ div.output-section {
     display: flex !important;
     align-items: center !important;
     justify-content: center !important;
+    background: #2d2d2f !important;
+    border-radius: 12px !important;
 }
 
 .output-section > div > div {
@@ -429,20 +414,15 @@ div.output-section {
     display: flex !important;
     align-items: center !important;
     justify-content: center !important;
+    background: #2d2d2f !important;
+    border-radius: 12px !important;
 }
 
 .output-section * {
     max-width: 100% !important;
 }
 
-/* Dark mode for output section */
-.dark .output-section {
-    background: #1d1d1f !important;
-    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4) !important;
-}
-
-/* Dark Mode - title */
-.dark .main-title,
+/* Title color */
 .input-section .main-title {
     color: #f5f5f7 !important;
 }
@@ -590,7 +570,7 @@ with gr.Blocks() as demo:
     gr.HTML(f"<style>{css}</style>")
 
     # Two-column layout
-    with gr.Row(equal_height=False, elem_id="main-row"):
+    with gr.Row(equal_height=False, variant="panel", elem_id="main-row"):
 
         # LEFT COLUMN - Input Controls
         with gr.Column(scale=0, min_width=550, elem_classes="input-section", elem_id="input-column"):