style: enhance chart color palettes for better contrast

dashboard/public/index.html

@@ -300,14 +300,16 @@
                 if (sub) {
                     let series = [...new Set(data.map(r => r[1]))];
                     series.forEach((s, idx) => {
+                        // Use a wider golden-angle based hue distribution for maximum contrast
+                        const hue = (idx * 137.5) % 360;
                         datasets.push({
                             label: s,
                             data: labels.map(l => {
                                 let match = data.find(r => r[0] === l && r[1] === s);
                                 return match ? match[2] : 0;
                             }),
-                            backgroundColor: `hsla(${idx * 40 + 200}, 70%, 50%, 0.8)`,
+                            backgroundColor: `hsla(${hue}, 70%, 55%, 0.8)`,
-                            borderColor: `hsla(${idx * 40 + 200}, 70%, 50%, 1)`,
+                            borderColor: `hsla(${hue}, 70%, 55%, 1)`,
                             borderWidth: 2,
                             fill: currentChartType === 'line'
                         });
@@ -350,7 +352,23 @@
             if (charts.continent) charts.continent.destroy();
             charts.continent = new Chart(contCtx, {
                 type: 'doughnut',
-                data: { labels: store.summary.map(r => r[0]), datasets: [{ data: store.summary.map(r => r[2]), backgroundColor: ['#38bdf8', '#fbbf24', '#10b981', '#f87171'], borderWidth: 0 }] },
+                data: {
+                    labels: store.summary.map(r => r[0]),
+                    datasets: [{
+                        data: store.summary.map(r => r[2]),
+                        backgroundColor: [
+                            '#38bdf8', // Sky
+                            '#f43f5e', // Rose
+                            '#fbbf24', // Amber
+                            '#10b981', // Emerald
+                            '#8b5cf6', // Violet
+                            '#f97316', // Orange
+                            '#06b6d4', // Cyan
+                            '#ec4899'  // Pink
+                        ],
+                        borderWidth: 0
+                    }]
+                },
                 options: { responsive: true, maintainAspectRatio: false, cutout: '70%', plugins: { legend: { position: 'bottom', labels: { color: '#94a3b8' } } } }
             });
         }