diff --git a/frontend/src/components/StatsPanel.tsx b/frontend/src/components/StatsPanel.tsx
index 959f740..ab3529d 100644
--- a/frontend/src/components/StatsPanel.tsx
+++ b/frontend/src/components/StatsPanel.tsx
@@ -52,11 +52,14 @@ const nf = (n: number) => n.toLocaleString('en-US');
 
 // ── Shell ────────────────────────────────────────────────────────────────────
 
-function Card({ title, sub, children, className }: { title: string; sub?: string; children: React.ReactNode; className?: string }) {
+function Card({ title, sub, children, className, accent = 'var(--chart-1)' }: { title: string; sub?: string; children: React.ReactNode; className?: string; accent?: string }) {
   return (
-    <section className={cn('rounded-lg border border-border bg-card p-3.5 flex flex-col min-w-0', className)}>
+    <section className={cn('rounded-xl border border-border bg-card p-3.5 flex flex-col min-w-0 shadow-sm', className)}>
       <header className="mb-3 shrink-0">
-        <h3 className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">{title}</h3>
+        <h3 className="flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
+          <span className="size-1.5 rounded-full shrink-0" style={{ background: accent }} />
+          {title}
+        </h3>
         {sub && <p className="text-[11px] text-muted-foreground/80 mt-0.5">{sub}</p>}
       </header>
       {children}
@@ -64,14 +67,22 @@ function Card({ title, sub, children, className }: { title: string; sub?: string
   );
 }
 
-// A headline number IS the chart — a one-bar bar chart would be noise.
-function StatTile({ label, value, sub }: { label: string; value: string; sub?: string }) {
+// A headline number IS the chart — a one-bar bar chart would be noise. Each tile
+// carries an accent (a categorical chart hue or a semantic token): a soft tint
+// wash + a left accent bar give it a colourful identity, while the number itself
+// stays in high-contrast foreground ink so it reads on every theme.
+function StatTile({ label, value, sub, accent = 'var(--chart-1)' }: { label: string; value: string; sub?: string; accent?: string }) {
   return (
-    <div className="rounded-lg border border-border bg-card px-4 py-3 min-w-0">
-      <p className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground truncate">{label}</p>
-      {/* Proportional figures: tabular-nums makes a big standalone number look loose. */}
-      <p className="mt-1 text-[28px] leading-none font-semibold text-foreground">{value}</p>
-      {sub && <p className="mt-1 text-[11px] text-muted-foreground truncate">{sub}</p>}
+    <div className="relative overflow-hidden rounded-xl border border-border bg-card px-4 py-3 min-w-0 shadow-sm">
+      <div className="pointer-events-none absolute inset-0 opacity-[0.08]" style={{ background: accent }} />
+      <div className="pointer-events-none absolute -right-5 -top-7 size-20 rounded-full blur-xl opacity-[0.14]" style={{ background: accent }} />
+      <div className="absolute left-0 inset-y-0 w-1" style={{ background: accent }} />
+      <div className="relative">
+        <p className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground truncate">{label}</p>
+        {/* Proportional figures: tabular-nums makes a big standalone number look loose. */}
+        <p className="mt-1 text-[28px] leading-none font-semibold text-foreground">{value}</p>
+        {sub && <p className="mt-1 text-[11px] text-muted-foreground truncate">{sub}</p>}
+      </div>
     </div>
   );
 }
@@ -80,7 +91,7 @@ function StatTile({ label, value, sub }: { label: string; value: string; sub?: s
 // One series → one hue. The value is direct-labelled, so no reader ever depends
 // on a tooltip to get a number.
 
-function HBars({ data, max, empty, share, labelWidth = 'w-20' }: { data: Bucket[]; max?: number; empty: string; share?: boolean; labelWidth?: string }) {
+function HBars({ data, max, empty, share, labelWidth = 'w-20', colorful, color = 'var(--chart-1)' }: { data: Bucket[]; max?: number; empty: string; share?: boolean; labelWidth?: string; colorful?: boolean; color?: string }) {
   // max is a display cap for long tails (top entities). Where EVERY row matters —
   // the operators of a multi-op — it is deliberately not set: a capped chart would
   // silently drop the 9th operator, and "who worked what" is the whole question.
@@ -90,13 +101,13 @@ function HBars({ data, max, empty, share, labelWidth = 'w-20' }: { data: Bucket[
   if (top.length === 0) return <p className="text-[11px] text-muted-foreground italic py-4 text-center">{empty}</p>;
   return (
     <div className="flex flex-col gap-1.5 min-w-0">
-      {top.map((d) => (
+      {top.map((d, i) => (
         <div key={d.key} className="group flex items-center gap-2 min-w-0" title={`${d.key} — ${nf(d.count)}`}>
           <span className={`${labelWidth} shrink-0 truncate text-[11px] text-muted-foreground text-right`} title={d.key}>{d.key}</span>
           <div className="flex-1 min-w-0 h-[14px] flex items-center">
             <div
               className="h-[10px] rounded-r-[4px] transition-[width] duration-300"
-              style={{ width: `${Math.max(2, (d.count / peak) * 100)}%`, background: 'var(--chart-1)' }}
+              style={{ width: `${Math.max(2, (d.count / peak) * 100)}%`, background: colorful ? `var(--chart-${(i % 8) + 1})` : color }}
             />
           </div>
           <span className="w-14 shrink-0 text-[11px] text-foreground text-right tabular-nums">{nf(d.count)}</span>
@@ -629,12 +640,12 @@ export function StatsPanel() {
 
       {/* Headline figures: stat tiles, not a grouped bar chart. */}
       <div className="grid grid-cols-2 md:grid-cols-5 gap-2.5 mb-3">
-        <StatTile label={t('stats.qsos')} value={nf(stats.total)} sub={span} />
-        <StatTile label={t('stats.uniqueCalls')} value={nf(stats.unique_calls)} />
-        <StatTile label={t('stats.entities')} value={nf(stats.entities)} sub="DXCC" />
-        <StatTile label={t('stats.continents')} value={nf(stats.continents)} sub="/ 7" />
+        <StatTile label={t('stats.qsos')} value={nf(stats.total)} sub={span} accent="var(--chart-1)" />
+        <StatTile label={t('stats.uniqueCalls')} value={nf(stats.unique_calls)} accent="var(--chart-2)" />
+        <StatTile label={t('stats.entities')} value={nf(stats.entities)} sub="DXCC" accent="var(--chart-5)" />
+        <StatTile label={t('stats.continents')} value={nf(stats.continents)} sub="/ 7" accent="var(--chart-8)" />
         <StatTile label={t('stats.confirmed')} value={`${stats.total ? ((stats.confirmed_any / stats.total) * 100).toFixed(0) : 0}%`}
-          sub={`${nf(stats.confirmed_any)} / ${nf(stats.total)}`} />
+          sub={`${nf(stats.confirmed_any)} / ${nf(stats.total)}`} accent="var(--success)" />
       </div>
 
       {/* Period / contest block — ONLY when a window is selected. "12 QSO/h" across
@@ -723,43 +734,43 @@ export function StatsPanel() {
         </div>
       ) : (
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-2.5">
-          <Card title={t('stats.byBand')} sub={t('stats.byBandSub')}>
+          <Card title={t('stats.byBand')} sub={t('stats.byBandSub')} accent="var(--chart-3)">
             <VBars data={stats.by_band} empty={empty} showValues colorful />
           </Card>
-          <Card title={t('stats.byMode')}>
-            <HBars data={stats.by_mode} max={8} empty={empty} />
+          <Card title={t('stats.byMode')} accent="var(--chart-2)">
+            <HBars data={stats.by_mode} max={8} empty={empty} colorful />
           </Card>
 
-          <Card title={t('stats.overTime')} sub={t('stats.overTimeSub')} className="lg:col-span-2">
+          <Card title={t('stats.overTime')} sub={t('stats.overTimeSub')} className="lg:col-span-2" accent="var(--chart-1)">
             <AreaTrend data={stats.by_month} empty={empty} />
           </Card>
 
           {/* EVERY operator, never a top-N: on a multi-op contest the point is who
               worked what, and a cap would quietly delete the 9th operator. Scrolls
               instead of truncating. */}
-          <Card title={t('stats.byOperator')}>
+          <Card title={t('stats.byOperator')} accent="var(--chart-5)">
             <div className="max-h-[240px] overflow-auto pr-1 min-w-0">
-              <HBars data={stats.by_operator} empty={empty} share />
+              <HBars data={stats.by_operator} empty={empty} share color="var(--chart-5)" />
             </div>
           </Card>
-          <Card title={t('stats.byContinent')} sub={t('stats.byContinentSub')}>
+          <Card title={t('stats.byContinent')} sub={t('stats.byContinentSub')} accent="var(--chart-6)">
             <Donut data={stats.by_continent} empty={empty} />
           </Card>
 
-          <Card title={t('stats.topEntities')}>
-            <HBars data={stats.top_entities} max={12} empty={empty} labelWidth="w-40" />
+          <Card title={t('stats.topEntities')} accent="var(--chart-4)">
+            <HBars data={stats.top_entities} max={12} empty={empty} labelWidth="w-40" color="var(--chart-4)" />
           </Card>
           <div className="flex flex-col gap-2.5 min-w-0">
-            <Card title={t('stats.confirmations')} className="flex-1">
+            <Card title={t('stats.confirmations')} className="flex-1" accent="var(--success)">
               <div className="flex flex-col gap-3 justify-center flex-1">
                 <Meter label="LoTW" value={stats.confirmed_lotw} total={stats.total} />
                 <Meter label="eQSL" value={stats.confirmed_eqsl} total={stats.total} />
                 <Meter label={t('stats.paperQSL')} value={stats.confirmed_qsl} total={stats.total} />
               </div>
             </Card>
-            <Card title={t('stats.byStation')}>
+            <Card title={t('stats.byStation')} accent="var(--chart-8)">
               <div className="max-h-[140px] overflow-auto pr-1 min-w-0">
-                <HBars data={stats.by_station} empty={empty} share />
+                <HBars data={stats.by_station} empty={empty} share color="var(--chart-8)" />
               </div>
             </Card>
           </div>