UI logic

static/index.html

@@ -28,7 +28,7 @@
         }
         .container {
             width: 100%;
-            max-width: 1600px; /* Wider container */
+            max-width: 1600px;
             margin: 0 auto;
             background: var(--surface-bg);
             border-radius: 14px;
@@ -46,9 +46,9 @@
             border-bottom: 1px solid var(--border-color);
         }
         h1 {
-            background: linear-gradient(135deg, var(--primary), var(--secondary));
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
+            /* FIX: Removed background-clip text which was causing the solid orange bar */
+            color: var(--primary); 
+            text-shadow: 0 2px 10px rgba(231, 53, 98, 0.2);
             font-size: 1.8em;
             font-weight: 700;
             margin-bottom: 4px;
@@ -60,7 +60,7 @@
 
         .main-content {
             display: flex;
-            flex-direction: column; /* Stack controls top, results bottom */
+            flex-direction: column;
             flex: 1;
             padding: 20px;
             gap: 20px;
@@ -89,7 +89,7 @@
             background: #000;
             border: 1px solid var(--border-color);
             border-radius: 8px;
-            display: none; /* Hidden until upload */
+            display: none;
             overflow: hidden;
             position: relative;
         }
@@ -126,7 +126,6 @@
         }
         .upload-area p { color: var(--text-secondary); font-size: 0.95em; margin: 0; }
 
-        /* Sliders & Buttons */
         label { color: var(--text-secondary); font-size: 0.85em; display: flex; justify-content: space-between; margin-bottom: 4px; }
         .slider-val { color: var(--primary); font-weight: bold; }
         
@@ -156,7 +155,7 @@
             grid-template-columns: 1fr 1fr;
             gap: 20px;
             flex: 1;
-            min-height: 0; /* Fix for nested flex scrolling */
+            min-height: 0;
         }
 
         .result-card {
@@ -166,7 +165,7 @@
             display: flex;
             flex-direction: column;
             overflow: hidden;
-            height: 100%; /* Fill the grid cell */
+            height: 100%;
         }
 
         .card-header {
@@ -191,7 +190,6 @@
             align-items: center;
             justify-content: center;
             padding: 10px;
-            /* Expanded height logic */
             height: 100%; 
             min-height: 500px; 
             width: 100%;
@@ -200,7 +198,7 @@
         .image-box img {
             width: 100%;
             height: 100%;
-            object-fit: contain; /* Ensures aspect ratio is kept */
+            object-fit: contain;
             display: block;
         }