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 {