ui: fix header row layout, selected-tile contrast, toolbar gradient

- Header: revert column layout; title+zoom stay on left, search+button
  on right — all on one row (flex-wrap handles narrow viewports)
- Selected cards: switch from teal tint (invisible on teal bg) to solid
  white + blue ring, clearly distinguishable from the page background
- Editor toolbar: replace flat teal wash with an exponential-like decay
  (20%→9%→3%→0% teal overlay) so only the very top has colour

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

services/web/frontend/stylesheets/pages/editor/ide-lumiere.scss

@@ -49,8 +49,16 @@ $lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi
 
 [data-lumiere='true'] .ide-redesign-toolbar {
   position: relative;
-  // Subtle teal wash that fades to near-white — visible but not loud
-  background: linear-gradient(180deg, #d8f0eb 0%, #f4fbf9 100%) !important;
+  // Exponential-ish teal wash: strong at top, nearly gone by mid-height
+  background:
+    linear-gradient(
+      180deg,
+      rgba(42, 157, 143, 0.20) 0%,
+      rgba(42, 157, 143, 0.09) 30%,
+      rgba(42, 157, 143, 0.03) 60%,
+      transparent 100%
+    ),
+    #f7fdfc !important;
   border-bottom: 1px solid $lum-border;
   box-shadow: 0 2px 10px rgba(42, 157, 143, 0.10);
 

services/web/frontend/stylesheets/pages/project-list-lumiere.scss

@@ -318,12 +318,14 @@ $lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi
 
   .lumiere-header {
     display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
     margin-bottom: 1.75rem;
+    flex-wrap: wrap;
   }
 
-  // Title + zoom control on the same row
+  // Title + zoom control grouped on the left
   .lumiere-title-row {
     display: flex;
     align-items: center;
@@ -335,6 +337,7 @@ $lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi
     display: flex;
     align-items: center;
     gap: 0.75rem;
+    flex-shrink: 0;
     flex-wrap: wrap;
   }
 
@@ -483,13 +486,13 @@ $lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi
     opacity: 1;
   }
 
-  // Selected card: teal border + tint
+  // Selected card: blue ring on solid white — clearly distinct from the teal page bg
   .lumiere-card-wrapper:has(input[type='checkbox']:checked) .lumiere-card {
-    border-color: rgba($lum-teal, 0.5);
-    background: rgba($lum-teal, 0.06);
+    border-color: rgba($lum-blue, 0.65);
+    background: rgba(255, 255, 255, 0.96);
     box-shadow:
-      0 0 0 2px rgba($lum-teal, 0.18),
-      0 2px 8px rgba(0, 0, 0, 0.07);
+      0 0 0 3px rgba($lum-blue, 0.22),
+      0 4px 12px rgba(0, 0, 0, 0.10);
   }
 
   // ── Individual card ───────────────────────────────────────────────────────