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/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;