Improve background effects for light theme and fix mobile color picker

- WebGL shader: theme-aware blending (tint toward accent on light, additive
  glow on dark) with u_light uniform for proper light-theme visibility
- Cards: translucent backgrounds only on entity cards when bg-anim is active,
  keeping modals/pickers/tab bars/header fully opaque
- Running card border and tab indicator: boosted contrast for light theme
- Header: backdrop-filter via pseudo-element to avoid breaking fixed tab-bar
- Color picker: move popover to document.body on mobile as centered bottom-sheet
- Add card: use --card-bg background and bolder + icon for visibility

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

server/src/wled_controller/static/css/base.css

@@ -102,6 +102,37 @@ body.modal-open {
     background: transparent;
 }
 
+/* When bg-anim is active, make entity cards slightly translucent
+   so the shader bleeds through. Only target cards — NOT modals,
+   pickers, tab bars, headers, or other chrome. */
+[data-bg-anim="on"][data-theme="dark"] .card,
+[data-bg-anim="on"][data-theme="dark"] .template-card,
+[data-bg-anim="on"][data-theme="dark"] .add-device-card,
+[data-bg-anim="on"][data-theme="dark"] .dashboard-target {
+    background: rgba(45, 45, 45, 0.88);
+}
+[data-bg-anim="on"][data-theme="light"] .card,
+[data-bg-anim="on"][data-theme="light"] .template-card,
+[data-bg-anim="on"][data-theme="light"] .add-device-card,
+[data-bg-anim="on"][data-theme="light"] .dashboard-target {
+    background: rgba(255, 255, 255, 0.85);
+}
+/* Blur behind header via pseudo-element — applying backdrop-filter directly
+   to header would create a containing block and break position:fixed on
+   the .tab-bar nested inside it (mobile bottom nav). */
+[data-bg-anim="on"] header {
+    background: transparent;
+}
+[data-bg-anim="on"] header::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    background: color-mix(in srgb, var(--bg-color) 60%, transparent);
+}
+
 /* ── Tab indicator (background watermark) ── */
 #tab-indicator {
     position: fixed;
@@ -128,7 +159,7 @@ body.modal-open {
     opacity: 1;
 }
 [data-theme="light"] #tab-indicator svg {
-    opacity: 0.035;
+    opacity: 0.07;
 }
 
 .container {

server/src/wled_controller/static/css/cards.css

@@ -21,7 +21,7 @@ section {
     justify-content: center;
     cursor: pointer;
     border: 2px dashed var(--border-color);
-    background: transparent;
+    background: var(--card-bg);
     min-height: 160px;
     transition: border-color 0.25s ease, background 0.25s ease, transform 0.2s ease;
 }
@@ -34,8 +34,8 @@ section {
 
 .add-device-icon {
     font-size: 2.5rem;
-    font-weight: 300;
-    color: var(--text-secondary);
+    font-weight: 400;
+    color: var(--text-color);
     line-height: 1;
     transition: color 0.2s;
 }
@@ -156,14 +156,25 @@ section {
     to { --border-angle: 360deg; }
 }
 
+[data-theme="light"] .card-running {
+    background: linear-gradient(
+        calc(var(--border-angle) + 45deg),
+        var(--card-bg) 0%,
+        color-mix(in srgb, var(--primary-color) 18%, var(--card-bg)) 40%,
+        var(--card-bg) 60%,
+        color-mix(in srgb, var(--primary-color) 14%, var(--card-bg)) 85%,
+        var(--card-bg) 100%
+    );
+}
+
 [data-theme="light"] .card-running::before {
     background:
         conic-gradient(
             from var(--border-angle),
             var(--primary-color),
-            rgba(0,0,0,0.05) 25%,
+            rgba(0,0,0,0.12) 25%,
             var(--primary-color) 50%,
-            rgba(0,0,0,0.05) 75%,
+            rgba(0,0,0,0.12) 75%,
             var(--primary-color)
         ) border-box;
 }