Update app.py

app.py

@@ -306,14 +306,73 @@ input[type="checkbox"] {
 }
 .upload-container:hover { border-color: var(--warm-accent) !important; }
 
-/* ─── ImageEditor dark canvas area ─── */
+/* ─── ImageEditor: all areas ─── */
 .image-editor,
-.image-editor > *,
 [data-testid="image-editor"],
-[data-testid="image-editor"] > * {
+.image-editor > div,
+[data-testid="image-editor"] > div {
     background: #F5EDE4 !important;
 }
 
+/* toolbar (left button strip) */
+.image-editor .toolbar,
+.image-editor [class*="toolbar"],
+.image-editor [class*="tool"],
+.image-editor [class*="sidebar"],
+.image-editor [class*="controls"],
+.image-editor [class*="panel"],
+[data-testid="image-editor"] [class*="toolbar"],
+[data-testid="image-editor"] [class*="tool"],
+[data-testid="image-editor"] [class*="sidebar"],
+[data-testid="image-editor"] [class*="controls"],
+[data-testid="image-editor"] [class*="panel"] {
+    background: #FFF3EC !important;
+    border-color: var(--warm-border) !important;
+}
+
+/* toolbar icon buttons */
+.image-editor button,
+[data-testid="image-editor"] button {
+    background: #FFFFFF !important;
+    color: #3D2B1F !important;
+    border: 1px solid #EDD9C8 !important;
+    border-radius: 8px !important;
+}
+.image-editor button:hover,
+[data-testid="image-editor"] button:hover {
+    background: #FFF3EC !important;
+    border-color: #E8845A !important;
+}
+.image-editor button svg,
+[data-testid="image-editor"] button svg {
+    fill: #3D2B1F !important;
+    stroke: #3D2B1F !important;
+    color: #3D2B1F !important;
+}
+
+/* canvas drawing area */
+.image-editor canvas,
+[data-testid="image-editor"] canvas {
+    background: #FAFAFA !important;
+    border-radius: 8px !important;
+}
+
+/* bottom toolbar / layer label */
+.image-editor [class*="bottom"],
+.image-editor [class*="layer"],
+[data-testid="image-editor"] [class*="bottom"],
+[data-testid="image-editor"] [class*="layer"] {
+    background: #FFF3EC !important;
+    color: #3D2B1F !important;
+    border-color: var(--warm-border) !important;
+}
+.image-editor [class*="bottom"] span,
+.image-editor [class*="layer"] span,
+[data-testid="image-editor"] [class*="bottom"] span,
+[data-testid="image-editor"] [class*="layer"] span {
+    color: #3D2B1F !important;
+}
+
 /* ─── Row/Column spacers ─── */
 .row, .column { background: transparent !important; }
 
@@ -447,13 +506,48 @@ input[type="checkbox"] {
 }
 #run-btn:active { transform: translateY(0) !important; }
 
-/* ─── Output image panels ─── */
-.output-panel {
-    background: var(--warm-card) !important;
-    border-radius: 14px !important;
-    border: 1px solid var(--warm-border) !important;
-    overflow: hidden !important;
-    box-shadow: 0 2px 12px rgba(180,110,60,0.07) !important;
+/* ─── Output image label bars ─── */
+.block .label-wrap,
+.block [class*="label-wrap"],
+.block [class*="labelwrap"],
+[data-testid="image"] .label-wrap,
+[data-testid="image"] [class*="label"] {
+    background: #FFF3EC !important;
+    border-bottom: 1px solid var(--warm-border) !important;
+    padding: 6px 10px !important;
+}
+.block .label-wrap span,
+.block [class*="label-wrap"] span,
+[data-testid="image"] .label-wrap span,
+[data-testid="image"] [class*="label"] span {
+    color: #3D2B1F !important;
+    font-weight: 700 !important;
+    font-size: 13px !important;
+}
+
+/* icon inside label bar */
+.block .label-wrap svg,
+[data-testid="image"] .label-wrap svg {
+    fill: #E8845A !important;
+    color: #E8845A !important;
+}
+
+/* top-right action buttons (fullscreen, download, share) inside image panels */
+.block [class*="action"],
+[data-testid="image"] [class*="action"] {
+    background: rgba(255,248,243,0.9) !important;
+    border-radius: 6px !important;
+}
+.block [class*="action"] button,
+[data-testid="image"] [class*="action"] button {
+    color: #3D2B1F !important;
+    background: transparent !important;
+    border: none !important;
+}
+.block [class*="action"] button svg,
+[data-testid="image"] [class*="action"] button svg {
+    fill: #7A4F3A !important;
+    stroke: #7A4F3A !important;
 }
 
 /* ─── Progress bar ─── */