feat: add per-layer LED range and collapsible layers to composite source

Composite layers now support optional start/end LED range (toggleable)
and reverse flag, making composite a superset of mapped source. Layers
are collapsible with animated expand/collapse and consistent 0.85rem
font sizing. Delete button restyled as ghost icon button.

Also includes minor dashboard CSS overflow fixes.

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

@@ -1536,6 +1536,78 @@
     background: var(--card-bg);
 }
 
+.composite-layer-header {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    cursor: pointer;
+    user-select: none;
+}
+
+.composite-layer-expand-btn {
+    font-size: 0.6rem;
+    color: var(--text-secondary);
+    transition: transform 0.15s ease;
+    flex-shrink: 0;
+    width: 12px;
+    text-align: center;
+}
+
+.composite-layer-expanded .composite-layer-expand-btn {
+    transform: rotate(90deg);
+}
+
+.composite-layer-summary {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    overflow: hidden;
+}
+
+.composite-layer-summary-name {
+    font-size: 0.85rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.composite-layer-summary-blend {
+    font-size: 0.75rem;
+    color: var(--text-secondary);
+    background: var(--bg-secondary);
+    padding: 1px 6px;
+    border-radius: 3px;
+    white-space: nowrap;
+    flex-shrink: 0;
+}
+
+.composite-layer-body-wrapper {
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: grid-template-rows 0.2s ease;
+}
+
+.composite-layer-expanded .composite-layer-body-wrapper {
+    grid-template-rows: 1fr;
+}
+
+.composite-layer-body {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding-top: 0;
+    overflow: hidden;
+    min-height: 0;
+    transition: padding-top 0.2s ease;
+    font-size: 0.85rem;
+}
+
+.composite-layer-expanded .composite-layer-body {
+    padding-top: 4px;
+}
+
 .composite-layer-row {
     display: flex;
     align-items: center;
@@ -1550,7 +1622,6 @@
 .composite-layer-brightness-label {
     flex-shrink: 0;
     width: 90px;
-    font-size: 0.8rem;
     color: var(--text-secondary);
 }
 
@@ -1566,7 +1637,6 @@
 }
 
 .composite-layer-opacity-label {
-    font-size: 0.8rem;
     white-space: nowrap;
     flex-shrink: 0;
 }
@@ -1581,11 +1651,66 @@
 }
 
 .composite-layer-remove-btn {
-    font-size: 0.75rem;
-    padding: 0;
+    background: none;
+    border: none;
+    color: var(--text-muted);
+    font-size: 0.85rem;
     width: 26px;
     height: 26px;
     flex: 0 0 26px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: color 0.2s, background 0.2s;
+}
+
+.composite-layer-remove-btn:hover {
+    color: var(--danger-color);
+    background: color-mix(in srgb, var(--danger-color) 10%, transparent);
+}
+
+.composite-layer-range-toggle-label {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    flex-shrink: 0;
+    color: var(--text-secondary);
+    cursor: pointer;
+    white-space: nowrap;
+}
+
+.composite-layer-range-fields {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    flex: 1;
+    min-width: 0;
+}
+
+.composite-layer-range-fields label {
+    color: var(--text-secondary);
+    flex-shrink: 0;
+}
+
+.composite-layer-range-fields input[type="number"] {
+    width: 60px;
+    flex-shrink: 0;
+}
+
+.composite-layer-range-disabled {
+    opacity: 0.35;
+    pointer-events: none;
+}
+
+.composite-layer-reverse-label {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    margin-left: auto;
+    white-space: nowrap;
+    color: var(--text-secondary);
 }
 
 /* ── Composite layer drag-to-reorder ── */