build 221: fix panel bg cascade, center toggle pill, Lumière XS compact rows

- ide-lumiere.scss: declare --file-tree-bg/--outline-bg-color/--outline-container-color-bg:
  transparent at [data-lumiere] .ide-redesign-main scope to beat file-tree.scss +
  outline.scss which re-declare the same vars at .ide-redesign-main (closer ancestor)
- linked-file-highlight and disconnected-overlay get explicit fallback colors so they
  remain usable when --file-tree-bg is transparent
- custom-toggler: replace left:-5px with left:50%/transform:translateX(-50%) for
  reliable centering of the 16px pill over the 4px resize handle
- project-list-lumiere.scss: compact rows get teal-tinted bg + teal border (Lumière feel)
- project-format-badge-* overrides inside .project-list-lumiere so the XS compact view
  shows the soft Lumière palette (matching .lumiere-format-badge--* on cards)

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

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

@@ -369,9 +369,26 @@ $lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi
 // ── File tree — teal left-accent bar on selected item ─────────────────────
 
 [data-lumiere='true'] .ide-redesign-main {
+  // Override vars declared at this same scope in file-tree.scss and outline.scss
+  // so the panel-group noise background shows through.
+  --file-tree-bg: transparent;
+  --outline-bg-color: transparent;
+  --outline-container-color-bg: transparent;
+
   .file-tree:not(.multi-selected) ul.file-tree-list li.selected > .entity > .entity-name {
     box-shadow: inset 2px 0 0 $lum-teal;
   }
+
+  // linked-file badge uses background-color: var(--file-tree-bg); give it a teal tint
+  .linked-file-highlight {
+    background-color: rgba($lum-teal, 0.18) !important;
+    color: #0a4f43 !important;
+  }
+
+  // disconnected overlay would be invisible with transparent bg; restore a tinted fallback
+  .disconnected-overlay {
+    background-color: rgba(#f4fbf9, 0.92) !important;
+  }
 }
 
 // ── Panel resize handles — thin teal line, no dot grips ───────────────────
@@ -406,8 +423,9 @@ $lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi
 
 // Collapse toggle pill — wider than the 4px handle so the arrow icon is visible
 [data-lumiere='true'] .custom-toggler {
-  width: 14px !important;
+  width: 16px !important;
-  left: -5px; // center 14px pill over the 4px handle
+  left: 50%;
+  transform: translateX(-50%);
   border-radius: 4px;
   background-color: rgba($lum-teal, 0.65);
 

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

@@ -750,20 +750,39 @@ $lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi
     align-items: center;
     column-gap: 0.85rem;
     padding: 0.45rem 0.75rem;
-    background: rgba(255, 255, 255, 0.82);
+    background: rgba(#edf7f5, 0.82);
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
-    border: 1px solid rgba(255, 255, 255, 0.6);
+    border: 1px solid rgba($lum-teal, 0.18);
     border-radius: 7px;
-    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
+    box-shadow: 0 1px 4px rgba($lum-teal, 0.06);
-    transition: background-color 0.15s ease, box-shadow 0.15s ease;
+    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
 
     &:hover {
-      background: rgba(255, 255, 255, 0.96);
+      background: rgba(#e4f4f1, 0.96);
-      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.09);
+      border-color: rgba($lum-teal, 0.35);
+      box-shadow: 0 2px 10px rgba($lum-teal, 0.10);
     }
   }
 
+  // Override classic project-format-badge colors so the XS compact view
+  // shows the same soft Lumière palette as the card-based views.
+  .project-format-badge {
+    border-radius: 4px;
+    font-size: 0.65rem;
+    font-weight: 600;
+    letter-spacing: 0.03em;
+    text-transform: uppercase;
+    padding: 0.15em 0.5em;
+    line-height: 1.5;
+    border: none;
+  }
+
+  .project-format-badge-latex { background-color: rgba(#e6f4ec, 0.9); color: #098842; border: none; }
+  .project-format-badge-typst { background-color: rgba(#e0f7f5, 0.9); color: #239dad; border: none; }
+  .project-format-badge-quarto { background-color: rgba(#e8eef5, 0.9); color: #447099; border: none; }
+  .project-format-badge-quarto-slides { background-color: rgba(#fde8ec, 0.9); color: #e4637c; border: none; }
+
   .lumiere-compact-checkbox {
     display: flex;
     align-items: center;