style: rework chart palette to a clean glass-like aesthetic

Move from -600/-700 depth tones to -400 powdery tones for a faded,
frosted-glass feel. Emerald-400 (#34d399) matches the mid-stop of the
logo's gradient. Bar charts now use rgba fills (~70% alpha) with a
crisper colored border for the glass-edge effect; pie segments get a
slightly stronger white seam for cleaner separation between segments.

Affects PIE_COLORS, the reports bar chart, the blocked-IPs stacked bar
chart, the pie segments, and CATEGORY_COLORS in the policy
score-distribution chart.

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

ui/resources/js/app.js

@@ -70,19 +70,19 @@ Chart.register(
 // score-distribution component) can render charts without re-bundling.
 window.Chart = Chart;
 
-// Palette anchored to the logo's emerald (#10b981). Uses -600/-700 Tailwind
-// depth tones for a modern, muted feel instead of vivid -500 values.
+// Faded "glass" palette: Tailwind -400 tones for a powdery, translucent
+// feel. Emerald-400 (#34d399) matches the mid-stop of the logo's gradient.
 const PIE_COLORS = [
-    '#10b981', // emerald-500  (logo anchor)
-    '#0891b2', // cyan-600
-    '#4f46e5', // indigo-600
-    '#7c3aed', // violet-600
-    '#db2777', // pink-600
-    '#dc2626', // red-600
-    '#d97706', // amber-600
-    '#65a30d', // lime-600
-    '#0f766e', // teal-700
-    '#1d4ed8', // blue-700
+    '#34d399', // emerald-400  (matches logo's mid-stop)
+    '#22d3ee', // cyan-400
+    '#818cf8', // indigo-400
+    '#a78bfa', // violet-400
+    '#f472b6', // pink-400
+    '#fb7185', // rose-400
+    '#fbbf24', // amber-400
+    '#a3e635', // lime-400
+    '#2dd4bf', // teal-400
+    '#60a5fa', // blue-400
 ];
 
 function chartTheme() {
@@ -94,6 +94,12 @@ function chartTheme() {
     };
 }
 
+function hexToRgba(hex, alpha) {
+    const m = /^#?([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.exec(hex);
+    if (!m) return hex;
+    return `rgba(${parseInt(m[1], 16)},${parseInt(m[2], 16)},${parseInt(m[3], 16)},${alpha})`;
+}
+
 function parseSeries(canvas, attr) {
     try {
         return JSON.parse(canvas.dataset[attr] || '[]');
@@ -118,7 +124,10 @@ function renderReportsChart() {
             datasets: [{
                 label: 'reports',
                 data,
-                backgroundColor: '#059669', // emerald-600 — brand anchor for bar chart
+                backgroundColor: 'rgba(52, 211, 153, 0.7)', // emerald-400 @ 70% — frosted bar
+                borderColor: 'rgba(52, 211, 153, 0.9)',
+                borderWidth: 1,
+                borderRadius: 4,
             }],
         },
         options: {
@@ -152,8 +161,8 @@ function renderPieChart(canvasId) {
             datasets: [{
                 data,
                 backgroundColor: colors,
-                borderColor: 'rgba(255,255,255,0.1)',
-                borderWidth: 1,
+                borderColor: 'rgba(255,255,255,0.25)', // crisper glass-segment seam
+                borderWidth: 1.5,
             }],
         },
         options: {
@@ -202,9 +211,9 @@ function renderBlockedIpsChart() {
         return {
             label: row.category || '—',
             data: Array.isArray(row.counts) ? row.counts.map((c) => c || 0) : [],
-            backgroundColor: colour,
-            borderColor: colour,
-            borderWidth: 0,
+            backgroundColor: hexToRgba(colour, 0.7), // frosted fill
+            borderColor: colour,                     // crisp glass edge
+            borderWidth: 1,
         };
     });
     const t = chartTheme();

ui/resources/views/pages/policies/edit.twig

@@ -212,14 +212,14 @@ window.policyPreview = function (id) {
 
 window.policyScoreDistribution = function (id) {
     const CATEGORY_COLORS = [
-        '#dc2626', // red-600
-        '#d97706', // amber-600
-        '#ca8a04', // yellow-600
-        '#16a34a', // green-600
-        '#0284c7', // sky-600
-        '#7c3aed', // violet-600
-        '#db2777', // pink-600
-        '#0f766e', // teal-700
+        '#f87171', // red-400
+        '#fbbf24', // amber-400
+        '#facc15', // yellow-400
+        '#4ade80', // green-400
+        '#38bdf8', // sky-400
+        '#a78bfa', // violet-400
+        '#f472b6', // pink-400
+        '#2dd4bf', // teal-400
     ];
     function chartTheme() {
         const isDark = document.documentElement.classList.contains('dark');