Frontend improvements: CSS foundations, accessibility, UX enhancements

CSS: Add design token variables (spacing, timing, weights, z-index layers),
migrate all hardcoded z-index to named vars, fix light theme contrast for
WCAG AA, add skeleton loading cards, mask-composite fallback, card padding.

Accessibility: aria-live on toast, aria-label on health dots, sr-only class,
graph container keyboard focusable, MQTT password wrapped in form element.

UX: Modal auto-focus on open, inline field validation with blur, undo toast
with countdown, bulk action progress indicator, API error toast on failure.

i18n: Add common.undo, validation.required, bulk.processing, api.error.*
keys in EN/RU/ZH.

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

server/src/wled_controller/static/css/layout.css

@@ -5,7 +5,7 @@ header {
     padding: 8px 20px;
     position: sticky;
     top: 0;
-    z-index: 100;
+    z-index: var(--z-sticky);
     background: var(--bg-color);
     border-bottom: 2px solid var(--border-color);
 }
@@ -133,7 +133,7 @@ h2 {
 .connection-overlay {
     position: fixed;
     inset: 0;
-    z-index: 10000;
+    z-index: var(--z-connection);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -177,6 +177,19 @@ h2 {
     animation: conn-spin 0.8s linear infinite;
 }
 
+/* Visually hidden — screen readers only */
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+
 /* WLED device health indicator */
 .health-dot {
     display: inline-block;
@@ -448,7 +461,7 @@ h2 {
 #command-palette {
     position: fixed;
     inset: 0;
-    z-index: 3000;
+    z-index: var(--z-command-palette);
     display: flex;
     justify-content: center;
     padding-top: 15vh;