Comprehensive WebUI review: 41 UX/feature/CSS improvements

Safety & Correctness:
- Add confirmation dialogs to Stop All, turnOffDevice
- i18n confirm dialog (title, yes, no buttons)
- Fix duplicate tutorial-overlay ID
- Define missing CSS variables (--radius, --text-primary, --hover-bg, --input-bg)
- Fix toast z-index conflict with confirm dialog (2500 → 3000)

UX Consistency:
- Add backdrop-close to test modals
- Add device clone feature (only entity without it)
- Add sync clocks to command palette
- Replace 20+ hardcoded accent colors with CSS vars/color-mix()
- Remove dead .badge duplicate from components.css
- Make calibration elements keyboard-accessible (div → button)
- Add aria-labels to color picker swatches
- Fix pattern canvas mobile horizontal scroll
- Fix graph editor mobile bottom clipping

Polish:
- Add empty-state messages to all CardSection instances
- Convert 21 px font-sizes to rem
- Add scroll-behavior: smooth with reduced-motion override
- Add @media print styles
- Add :focus-visible to 4 missing interactive elements
- Fix settings modal close label (Cancel → Close)
- Fix api-key submit button i18n

New Features:
- Command palette actions: start/stop targets, activate scenes, enable/disable
- Bulk start/stop API endpoints (POST /output-targets/bulk/start|stop)
- OS notification history viewer modal
- Scene "used by" automation reference count on cards
- Clock elapsed time display on Streams tab cards
- Device "last seen" relative timestamp on cards
- Audio device refresh button in edit modal
- Composite layer drag-to-reorder
- MQTT settings panel (broker config with JSON persistence)
- WebSocket log viewer with level filtering and ring buffer
- Runtime log-level adjustment (GET/PUT endpoints + settings UI)
- Animated value source waveform canvas preview
- Gradient custom preset save/delete (localStorage)
- API key read-only display in settings
- Backup metadata (file size, auto/manual badges)
- Server restart button with confirm + overlay
- Partial config export/import per entity type
- Progressive disclosure in target editor (Advanced section)

CSS Architecture:
- Define radius scale tokens (--radius-sm/md/lg/pill)
- Scope .cs-filter selectors to remove 7 !important overrides
- Consolidate duplicate toggle switch (filter-list → settings-toggle)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

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

@@ -28,7 +28,7 @@ section {
 
 .add-device-card:hover {
     border-color: var(--primary-color);
-    background: rgba(33, 150, 243, 0.05);
+    background: color-mix(in srgb, var(--primary-color) 5%, transparent); /* --primary-color tint */
     transform: translateY(-2px);
 }
 
@@ -53,7 +53,7 @@ section {
 .card {
     background: var(--card-bg);
     border: 1px solid var(--border-color);
-    border-radius: 8px;
+    border-radius: var(--radius-md);
     padding: 12px 20px 20px;
     position: relative;
     transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
@@ -243,7 +243,7 @@ section {
 .card-drag-placeholder {
     border: 2px dashed var(--primary-color);
     border-radius: 8px;
-    background: rgba(33, 150, 243, 0.04);
+    background: color-mix(in srgb, var(--primary-color) 4%, transparent); /* --primary-color tint */
     min-height: 80px;
     transition: none;
 }
@@ -378,7 +378,7 @@ body.cs-drag-active .card-drag-handle {
 
 .card-power-btn:hover {
     color: var(--primary-text-color);
-    background: rgba(76, 175, 80, 0.1);
+    background: color-mix(in srgb, var(--primary-color) 10%, transparent); /* --primary-color tint */
 }
 
 .card-remove-btn {
@@ -401,7 +401,7 @@ body.cs-drag-active .card-drag-handle {
 
 .card-remove-btn:hover {
     color: var(--danger-color);
-    background: rgba(244, 67, 54, 0.1);
+    background: color-mix(in srgb, var(--danger-color) 10%, transparent); /* --danger-color tint */
 }
 
 .card-header {
@@ -569,7 +569,7 @@ body.cs-drag-active .card-drag-handle {
 }
 .zone-checkbox-list .zone-loading,
 .zone-checkbox-list .zone-error {
-    font-size: 12px;
+    font-size: 0.75rem;
     color: var(--text-secondary);
     padding: 4px 0;
 }
@@ -581,7 +581,7 @@ body.cs-drag-active .card-drag-handle {
     padding: 4px 6px;
     border-radius: 4px;
     cursor: pointer;
-    font-size: 13px;
+    font-size: 0.8125rem;
     transition: background 0.15s;
 }
 .zone-checkbox-item:hover { background: var(--hover-bg, rgba(255,255,255,0.05)); }
@@ -602,7 +602,7 @@ body.cs-drag-active .card-drag-handle {
     align-items: center;
     gap: 6px;
     cursor: pointer;
-    font-size: 13px;
+    font-size: 0.8125rem;
 }
 .zone-mode-option input[type="radio"] { margin: 0; }
 
@@ -629,7 +629,7 @@ body.cs-drag-active .card-drag-handle {
 .display-card {
     background: var(--card-bg);
     border: 1px solid var(--border-color);
-    border-radius: 8px;
+    border-radius: var(--radius-md);
     padding: 15px;
 }
 
@@ -676,7 +676,10 @@ body.cs-drag-active .card-drag-handle {
 
 .layout-display.primary {
     border-color: var(--primary-color);
-    background: linear-gradient(135deg, rgba(76, 175, 80, 0.15), rgba(76, 175, 80, 0.05));
+    background: linear-gradient(135deg,
+        color-mix(in srgb, var(--primary-color) 15%, transparent), /* --primary-color tint */
+        color-mix(in srgb, var(--primary-color) 5%, transparent)   /* --primary-color tint */
+    );
 }
 
 .layout-display.secondary {
@@ -768,7 +771,7 @@ body.cs-drag-active .card-drag-handle {
     margin: 0 0 15px 0;
     line-height: 1.5;
     padding: 8px 12px;
-    background: rgba(33, 150, 243, 0.08);
+    background: color-mix(in srgb, var(--info-color, #2196F3) 8%, transparent); /* --info-color tint */
     border-left: 3px solid var(--info-color, #2196F3);
     border-radius: 0 6px 6px 0;
 }
@@ -939,13 +942,13 @@ ul.section-tip li {
     transition: flex 0.3s ease;
 }
 
-.timing-extract { background: #4CAF50; }
+.timing-extract { background: var(--primary-color); }
 .timing-map { background: #FF9800; }
-.timing-smooth { background: #2196F3; }
+.timing-smooth { background: var(--info-color, #2196F3); }
 .timing-send { background: #E91E63; }
-.timing-audio-read { background: #4CAF50; }
+.timing-audio-read { background: var(--primary-color); }
 .timing-audio-fft { background: #FF9800; }
-.timing-audio-render { background: #2196F3; }
+.timing-audio-render { background: var(--info-color, #2196F3); }
 
 .timing-legend {
     display: flex;
@@ -969,13 +972,13 @@ ul.section-tip li {
     border-radius: 2px;
 }
 
-.timing-dot.timing-extract { background: #4CAF50; }
+.timing-dot.timing-extract { background: var(--primary-color); }
 .timing-dot.timing-map { background: #FF9800; }
-.timing-dot.timing-smooth { background: #2196F3; }
+.timing-dot.timing-smooth { background: var(--info-color, #2196F3); }
 .timing-dot.timing-send { background: #E91E63; }
-.timing-dot.timing-audio-read { background: #4CAF50; }
+.timing-dot.timing-audio-read { background: var(--primary-color); }
 .timing-dot.timing-audio-fft { background: #FF9800; }
-.timing-dot.timing-audio-render { background: #2196F3; }
+.timing-dot.timing-audio-render { background: var(--info-color, #2196F3); }
 
 @media (max-width: 768px) {
     .displays-grid,