ui: color-coded chip groups in streams header with per-chip shade variation

Device chips: blue, resolution chips: teal, codec chips: amber.
Alternating bg shades within each group to visually separate chips.

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

Plugin/unraid/pages/monitor.php

@@ -1447,6 +1447,21 @@ function vvRenderStreams() {
       : `<span class="vv-server-badge" style="color:#444;">${n}</span>`;
   }).join('');
 
+  // Per-chip shade: alternate bg brightness within a group to visually separate chips
+  // shades[0] = base bg, shades[1] = slightly lighter, cycling per index
+  function vvChipShade(cls, i) {
+    const shades = {
+      'vv-chip-device': ['#0d1e2e', '#112436'],
+      'vv-chip-res':    ['#0b1e1c', '#0e2422'],
+      'vv-chip-codec':  ['#201500', '#261900'],
+    };
+    const bg = (shades[cls] ?? ['',''])[i % 2];
+    return bg ? ` style="background:${bg};"` : '';
+  }
+  function vvChip(cls, label, i) {
+    return `<span class="${cls}"${vvChipShade(cls, i)}>${label}</span>`;
+  }
+
   // Device type summary — e.g. "3 Android  1 iOS  2 Roku"
   const devCounts = {};
   sessions.forEach(s => {
@@ -1455,7 +1470,7 @@ function vvRenderStreams() {
   });
   const deviceBar = Object.entries(devCounts)
     .sort((a, b) => b[1] - a[1])
-    .map(([t, n]) => `<span class="vv-device-chip">${n} ${t}</span>`)
+    .map(([t, n], i) => vvChip('vv-chip-device', `${n} ${t}`, i))
     .join('');
   const deviceSection = deviceBar
     ? `<span class="vv-device-sep">·</span>${deviceBar}`
@@ -1476,7 +1491,7 @@ function vvRenderStreams() {
   });
   const resOrder = ['4K', '1080p', '720p', '480p'];
   const resBar = resOrder.filter(r => resCounts[r])
-    .map(r => `<span class="vv-device-chip">${resCounts[r]} ${r}</span>`)
+    .map((r, i) => vvChip('vv-chip-res', `${resCounts[r]} ${r}`, i))
     .join('');
   const resSection = resBar ? `<span class="vv-device-sep">·</span>${resBar}` : '';
 
@@ -1493,7 +1508,7 @@ function vvRenderStreams() {
   });
   const codecBar = Object.entries(codecCounts)
     .sort((a, b) => b[1] - a[1])
-    .map(([c, n]) => `<span class="vv-device-chip">${n} ${c}</span>`)
+    .map(([c, n], i) => vvChip('vv-chip-codec', `${n} ${c}`, i))
     .join('');
   const codecSection = codecBar ? `<span class="vv-device-sep">·</span>${codecBar}` : '';