Sticky header, dim overlay on card navigation, fix sticky stacking

Make header sticky so search button stays visible on scroll. Section
headers stick below it using a JS-measured --header-height variable.
Add dim overlay behind highlighted cards for better focus effect.

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

server/src/wled_controller/static/css/layout.css

@@ -2,10 +2,11 @@ header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 8px 0 6px;
-    margin-bottom: 6px;
-    position: relative;
+    padding: 8px 0 12px;
+    position: sticky;
+    top: 0;
     z-index: 100;
+    background: var(--bg-color);
 }
 
 .header-title {

server/src/wled_controller/static/css/patterns.css

@@ -74,7 +74,7 @@
 
 @keyframes cardHighlight {
     0%, 100% { box-shadow: none; }
-    25%, 75% { box-shadow: 0 0 0 3px var(--primary-color); }
+    25%, 75% { box-shadow: 0 0 0 3px var(--primary-color), 0 0 20px rgba(var(--primary-rgb, 59, 130, 246), 0.3); }
 }
 
 .card-highlight,
@@ -84,6 +84,21 @@
     z-index: 11;
 }
 
+/* Dim overlay behind highlighted card */
+.nav-dim-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.4);
+    z-index: 10;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.3s ease-in-out;
+}
+
+.nav-dim-overlay.active {
+    opacity: 1;
+}
+
 /* Key Colors target styles */
 .kc-rect-list {
     display: flex;

server/src/wled_controller/static/css/streams.css

@@ -644,7 +644,7 @@
     cursor: pointer;
     user-select: none;
     position: sticky;
-    top: 0;
+    top: var(--header-height, 0px);
     z-index: 10;
     background: var(--bg-color);
     padding: 8px 0;