Darken background layers while keeping borders and accents

Pull page bg (#1a0a38→#0d0520), app shell (#2d1060→#180840), and all
content-area fills back toward darker without touching borders, text,
or accent colours.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

static/app.css

@@ -1,7 +1,7 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');
 *{box-sizing:border-box;margin:0;padding:0}
 body,.gradio-container{
-    background:#1a0a38!important;font-family:'Inter',system-ui,-apple-system,sans-serif!important;
+    background:#0d0520!important;font-family:'Inter',system-ui,-apple-system,sans-serif!important;
     font-size:14px!important;color:#faf5ff!important;min-height:100vh;
 }
 footer{display:none!important}
@@ -16,13 +16,13 @@ footer{display:none!important}
 
 /* ── App shell ────────────────────────────────────────────────────────────── */
 .app-shell{
-    background:#2d1060;border:1px solid #7c3aed;border-radius:16px;
+    background:#180840;border:1px solid #7c3aed;border-radius:16px;
     margin:12px auto;max-width:1300px;overflow:hidden;
-    box-shadow:0 25px 50px -12px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.05);
+    box-shadow:0 25px 50px -12px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.04);
     --body-text-color:#faf5ff;
 }
 .app-header{
-    background:linear-gradient(135deg,#2d1060,#3a1575);border-bottom:1px solid #7c3aed;
+    background:linear-gradient(135deg,#180840,#220d55);border-bottom:1px solid #7c3aed;
     padding:14px 24px;display:flex;align-items:center;
 }
 .app-header-left{display:flex;align-items:center;gap:12px}
@@ -55,7 +55,7 @@ footer{display:none!important}
 /* ── Main layout ──────────────────────────────────────────────────────────── */
 .app-main{display:flex;gap:0}
 .app-left{flex:1;display:flex;flex-direction:column;min-width:0;border-right:1px solid #7c3aed}
-.app-right{width:400px;flex-shrink:0;display:flex;flex-direction:column;background:#2d1060}
+.app-right{width:400px;flex-shrink:0;display:flex;flex-direction:column;background:#180840}
 
 /* ── Panel cards ──────────────────────────────────────────────────────────── */
 .panel-card{border-bottom:1px solid #7c3aed}
@@ -67,7 +67,7 @@ footer{display:none!important}
 
 /* ── Drop zone (target image) ─────────────────────────────────────────────── */
 .drop-zone{
-    position:relative;background:#1a0a38;min-height:220px;border-radius:10px;
+    position:relative;background:#0d0520;min-height:220px;border-radius:10px;
     border:2px dashed #7c3aed;overflow:hidden;cursor:pointer;transition:border-color .2s,background .2s;
 }
 .drop-zone:hover{border-color:#9333ea;background:rgba(124,58,237,.08)}
@@ -104,7 +104,7 @@ footer{display:none!important}
 }
 .face-thumb{
     position:relative;width:100px;height:100px;border-radius:10px;overflow:hidden;
-    cursor:pointer;border:2px solid #7c3aed;transition:all .2s ease;background:#1a0a38;
+    cursor:pointer;border:2px solid #7c3aed;transition:all .2s ease;background:#0d0520;
     flex-shrink:0;
 }
 .face-thumb:hover{border-color:#9d5cf6;transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.4)}
@@ -134,7 +134,7 @@ footer{display:none!important}
 }
 .source-drop-area{
     width:120px;height:120px;border-radius:10px;border:2px dashed #7c3aed;
-    background:#1a0a38;display:flex;flex-direction:column;align-items:center;
+    background:#0d0520;display:flex;flex-direction:column;align-items:center;
     justify-content:center;gap:6px;cursor:pointer;transition:all .2s;
     font-size:11px;color:#c4b5fd;text-align:center;padding:8px;
 }
@@ -187,7 +187,7 @@ footer{display:none!important}
 }
 .out-title span{color:#ddd6fe}
 .out-body{
-    flex:1;background:#1a0a38;display:flex;align-items:center;justify-content:center;
+    flex:1;background:#0d0520;display:flex;align-items:center;justify-content:center;
     overflow:hidden;min-height:260px;position:relative;
 }
 .out-body img{max-width:100%;max-height:500px;object-fit:contain;image-rendering:auto}
@@ -205,7 +205,7 @@ footer{display:none!important}
 /* ── Loader ───────────────────────────────────────────────────────────────── */
 .modern-loader{
     display:none;position:absolute;top:0;left:0;right:0;bottom:0;
-    background:rgba(26,10,56,.92);z-index:15;
+    background:rgba(13,5,32,.92);z-index:15;
     flex-direction:column;align-items:center;justify-content:center;gap:16px;
     backdrop-filter:blur(4px);
 }
@@ -240,7 +240,7 @@ footer{display:none!important}
 
 /* ── Scrollbars ───────────────────────────────────────────────────────────── */
 ::-webkit-scrollbar{width:8px;height:8px}
-::-webkit-scrollbar-track{background:#1a0a38}
+::-webkit-scrollbar-track{background:#0d0520}
 ::-webkit-scrollbar-thumb{background:#7c3aed;border-radius:4px}
 ::-webkit-scrollbar-thumb:hover{background:#9d5cf6}