Enhance CSS test preview with live capture, brightness display, and UX fixes

- Stream live JPEG frames from picture sources into the test preview rectangle
- Add composite layer brightness display via value source streaming
- Fix missing id on css-test-rect-screen element that prevented frame display
- Preload images before swapping to eliminate flicker on frame updates
- Increase preview resolution to 480x360 and add subtle outline
- Prevent auto-focus on name field in modals on touch devices (desktopFocus)
- Fix performance chart padding, color picker clipping, and subtitle offset
- Add calibration-style ticks and source name/LED count to rectangle preview

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

server/src/wled_controller/static/css/modal.css

@@ -156,6 +156,20 @@
     background: rgba(255, 255, 255, 0.25);
 }
 
+.css-test-rect-outer {
+    position: relative;
+    padding: 22px 30px;
+}
+
+.css-test-rect-ticks {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 2;
+}
+
 .css-test-rect {
     display: grid;
     grid-template-columns: 14px 1fr 14px;
@@ -170,8 +184,36 @@
 }
 
 .css-test-rect-screen {
-    background: #111;
+    background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background-size: cover;
+    background-position: center;
     border-radius: 2px;
+    outline: 1px solid rgba(255, 255, 255, 0.15);
+    outline-offset: -1px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    overflow: hidden;
+}
+
+.css-test-rect-label {
+    color: rgba(255, 255, 255, 0.85);
+    font-size: 0.8rem;
+    font-weight: 600;
+    text-align: center;
+    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 90%;
+}
+
+.css-test-rect-leds {
+    font-size: 0.7rem;
+    font-weight: 400;
+    opacity: 0.75;
 }
 
 .css-test-edge-wrap {
@@ -190,15 +232,6 @@
     display: block;
 }
 
-.css-test-info {
-    display: flex;
-    gap: 16px;
-    padding: 8px 0 0;
-    font-family: monospace;
-    font-size: 0.85em;
-    color: var(--text-muted, #888);
-}
-
 .css-test-status {
     text-align: center;
     padding: 8px 0;
@@ -245,6 +278,23 @@
     opacity: 1;
 }
 
+.css-test-layer-brightness {
+    position: absolute;
+    right: 6px;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 0.6rem;
+    font-family: var(--font-mono, monospace);
+    color: #fff;
+    text-shadow: 0 0 3px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.6);
+    pointer-events: none;
+    white-space: nowrap;
+    display: flex;
+    align-items: center;
+    gap: 2px;
+}
+.css-test-layer-brightness svg { width: 12px; height: 12px; }
+
 /* LED count control */
 .css-test-led-control {
     display: flex;