palette and focus polish for AAA contrast

frontend/src/components/AnalyticsDashboard.tsx

@@ -535,7 +535,7 @@ export default function AnalyticsDashboard({ onClose }: { onClose: () => void })
 
   const presetDonutData = useMemo(() => {
     if (!data?.by_preset) return []
-    const colors = ['var(--accent)', 'rgba(212,67,47,0.7)', 'rgba(212,67,47,0.45)', 'rgba(212,67,47,0.25)', 'rgba(212,67,47,0.12)']
+    const colors = ['var(--accent)', 'color-mix(in srgb, var(--accent) 70%, var(--bg))', 'color-mix(in srgb, var(--accent) 50%, var(--bg))', 'color-mix(in srgb, var(--accent) 30%, var(--bg))', 'color-mix(in srgb, var(--accent) 15%, var(--bg))']
     return presetOrder
       .filter(k => data.by_preset[k]?.count > 0)
       .map((k, i) => ({

frontend/src/components/Grid.tsx

@@ -107,8 +107,8 @@ export default function Grid() {
                   x={x} y={y}
                   width={CELL} height={CELL}
                   fill={fill}
-                  stroke="var(--cell-border)"
-                  strokeWidth={0.5}
+                  stroke={isSelected ? 'var(--accent)' : 'var(--cell-border)'}
+                  strokeWidth={isSelected ? 2 : 0.5}
                 />
                 {!isBlack && num && (
                   <text