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/components.css

@@ -1,25 +1,3 @@
-.badge {
-    padding: 4px 12px;
-    border-radius: 12px;
-    font-size: 0.85rem;
-    font-weight: 600;
-}
-
-.badge.processing {
-    background: var(--primary-color);
-    color: var(--primary-contrast);
-}
-
-.badge.idle {
-    background: var(--warning-color);
-    color: white;
-}
-
-.badge.error {
-    background: var(--danger-color);
-    color: white;
-}
-
 .card-content {
     margin-bottom: 15px;
 }
@@ -60,7 +38,7 @@
 .btn {
     padding: 8px 16px;
     border: none;
-    border-radius: 4px;
+    border-radius: var(--radius-sm);
     cursor: pointer;
     font-size: 0.9rem;
     font-weight: 600;
@@ -182,7 +160,7 @@ select {
     width: 100%;
     padding: 10px;
     border: 1px solid var(--border-color);
-    border-radius: 4px;
+    border-radius: var(--radius-sm);
     background: var(--bg-color);
     color: var(--text-color);
     font-size: 1rem;
@@ -351,7 +329,7 @@ input:-webkit-autofill:focus {
 .overlay-preview-img {
     max-width: 80vw;
     max-height: 50vh;
-    border-radius: 8px;
+    border-radius: var(--radius-md);
     margin-top: 16px;
     object-fit: contain;
 }
@@ -369,13 +347,13 @@ input:-webkit-autofill:focus {
     left: 50%;
     transform: translateX(-50%) translateY(100px);
     padding: 16px 24px;
-    border-radius: 8px;
+    border-radius: var(--radius-md);
     color: white;
     font-weight: 600;
     font-size: 15px;
     opacity: 0;
     transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
-    z-index: 2500;
+    z-index: 3000;
     box-shadow: 0 4px 20px var(--shadow-color);
     min-width: 300px;
     text-align: center;
@@ -424,7 +402,7 @@ input:-webkit-autofill:focus {
     background: color-mix(in srgb, var(--primary-color) 12%, var(--bg-secondary));
     border: 1px solid color-mix(in srgb, var(--primary-color) 25%, transparent);
     padding: 1px 7px;
-    border-radius: 8px;
+    border-radius: var(--radius-md);
     white-space: nowrap;
     line-height: 1.4;
 }
@@ -439,7 +417,7 @@ input:-webkit-autofill:focus {
     gap: 4px;
     padding: 6px 8px;
     border: 1px solid var(--border-color);
-    border-radius: 4px;
+    border-radius: var(--radius-sm);
     background: var(--bg-color);
     cursor: text;
     min-height: 38px;
@@ -501,7 +479,7 @@ input:-webkit-autofill:focus {
     z-index: 1000;
     background: var(--bg-color);
     border: 1px solid var(--border-color);
-    border-radius: 4px;
+    border-radius: var(--radius-sm);
     box-shadow: 0 4px 12px var(--shadow-color);
     margin-top: 4px;
     max-height: 200px;
@@ -538,7 +516,11 @@ input:-webkit-autofill:focus {
 .dashboard-action-btn:focus-visible,
 .btn-expand-collapse:focus-visible,
 .btn-filter-action:focus-visible,
-.settings-toggle:focus-visible {
+.settings-toggle:focus-visible,
+.discovery-item:focus-visible,
+.tag-chip-remove:focus-visible,
+.cs-filter-reset:focus-visible,
+.graph-filter-clear:focus-visible {
     outline: 2px solid var(--primary-color);
     outline-offset: 2px;
 }
@@ -586,7 +568,7 @@ textarea:focus-visible {
     width: 100%;
     padding: 10px;
     border: 1px solid var(--border-color);
-    border-radius: 4px;
+    border-radius: var(--radius-sm);
     background: var(--bg-color);
     color: var(--text-color);
     font-size: 1rem;
@@ -720,7 +702,7 @@ textarea:focus-visible {
     overflow-y: auto;
     background: var(--card-bg);
     border: 1px solid var(--border-color);
-    border-radius: 12px;
+    border-radius: var(--radius-lg);
     box-shadow: 0 16px 48px var(--shadow-color);
     padding: 16px;
     opacity: 0;
@@ -790,7 +772,7 @@ textarea:focus-visible {
     max-height: 60vh;
     background: var(--bg-color);
     border: 1px solid var(--border-color);
-    border-radius: 8px;
+    border-radius: var(--radius-md);
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
     display: flex;
     flex-direction: column;
@@ -878,7 +860,7 @@ textarea:focus-visible {
     background: var(--bg-color);
     color: var(--text-primary);
     border: 1px solid var(--border-color);
-    border-radius: 4px;
+    border-radius: var(--radius-sm);
     padding: 10px;
     font-size: 1rem;
     cursor: pointer;