CSS: add GradientColorStripSource with visual editor

- Backend: GradientColorStripSource storage model, GradientColorStripStream
  with numpy interpolation (bidirectional stops, auto-size from device LED count),
  ColorStop Pydantic schema, API create/update/guard routes
- Frontend: gradient editor modal (canvas preview, draggable markers, stop rows),
  CSS hard-edge card swatch, locale keys (en + ru)
- Fixes: stop row mousedown no longer rebuilds DOM (buttons now clickable),
  position input max-width, bidir/remove button static width

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

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

@@ -489,3 +489,113 @@
     box-shadow: 0 0 16px rgba(76, 175, 80, 0.5);
     background: rgba(76, 175, 80, 0.12) !important;
 }
+
+/* ── Gradient editor ────────────────────────────────────────────── */
+
+.gradient-editor {
+    position: relative;
+    width: 100%;
+    user-select: none;
+}
+
+#gradient-canvas {
+    width: 100%;
+    height: 44px;
+    display: block;
+    border-radius: 6px 6px 0 0;
+    cursor: crosshair;
+    border: 1px solid var(--border-color);
+    border-bottom: none;
+}
+
+.gradient-markers-track {
+    position: relative;
+    height: 28px;
+    border: 1px solid var(--border-color);
+    border-radius: 0 0 6px 6px;
+    background: var(--card-bg);
+    cursor: crosshair;
+    margin-bottom: 12px;
+}
+
+.gradient-marker {
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    border: 2px solid #fff;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
+    cursor: grab;
+    transform: translateX(-50%);
+    top: 6px;
+    transition: box-shadow 0.1s;
+}
+
+.gradient-marker.selected {
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 2px var(--primary-color), 0 1px 4px rgba(0, 0, 0, 0.5);
+}
+
+.gradient-marker:active {
+    cursor: grabbing;
+}
+
+.gradient-stop-row {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 8px;
+    margin-bottom: 6px;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    background: var(--card-bg);
+}
+
+.gradient-stop-row.selected {
+    border-color: var(--primary-color);
+}
+
+.gradient-stop-pos {
+    width: 76px;
+    max-width: 76px;
+    flex-shrink: 0;
+}
+
+.gradient-stop-color {
+    width: 38px;
+    height: 28px;
+    flex-shrink: 0;
+    border: 1px solid var(--border-color);
+    padding: 1px;
+    border-radius: 4px;
+    cursor: pointer;
+    background: transparent;
+}
+
+.gradient-stop-bidir-btn {
+    font-size: 0.75rem;
+    padding: 0;
+    width: 26px;
+    height: 26px;
+    flex: 0 0 26px;
+    opacity: 0.6;
+}
+
+.gradient-stop-remove-btn {
+    font-size: 0.75rem;
+    padding: 0;
+    width: 26px;
+    height: 26px;
+    flex: 0 0 26px;
+}
+
+.gradient-stop-bidir-btn.active {
+    background: var(--primary-color);
+    color: #fff;
+    border-color: var(--primary-color);
+    opacity: 1;
+}
+
+.gradient-stop-spacer {
+    flex: 1;
+}