From 0cb4cc2dfb91355289cb04314284f1dbee6aa1c3 Mon Sep 17 00:00:00 2001
From: 31b4 <szilagyibence@szilagyibence.com>
Date: Wed, 21 Oct 2026 11:20:51 +0200
Subject: [PATCH 1/7] Refresh balance history with interactive SVG area charts

---
 CHANGELOG.md                                  |   2 +
 .../NetWorthTrendChart.test.tsx               |   8 +-
 .../analytics-module/NetWorthTrendChart.tsx   |  91 ++--------
 .../analytics-module/PerAccountTrendChart.tsx |  86 ++-------
 .../common/interactive-area-chart.test.tsx    |  91 ++++++++++
 .../common/interactive-area-chart.tsx         | 163 ++++++++++++++++++
 .../src/components/common/licenses/easyui.txt |  21 +++
 .../PortfolioHistoryChart.tsx                 |  30 ++--
 .../src/test/PortfolioHistoryChart.test.tsx   |  27 ++-
 9 files changed, 337 insertions(+), 182 deletions(-)
 create mode 100644 client/src/components/common/interactive-area-chart.test.tsx
 create mode 100644 client/src/components/common/interactive-area-chart.tsx
 create mode 100644 client/src/components/common/licenses/easyui.txt

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 49b8598c..23edde11 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,8 @@ Intermediate package/UI version bumps are grouped under the next published GitHu
 
 ## Unreleased
 
+- Refreshed cash-balance, account and portfolio history charts with an EasyUI-inspired SVG area presentation, dated value readouts and keyboard/touch inspection, preserving native currencies, history gaps and privacy.
+
 ## v4.0 — 2026-10-20
 
 [GitHub release](https://github.com/apptrackit/finance/releases/tag/v4.0) · [Compare v3.3…v4.0](https://github.com/apptrackit/finance/compare/v3.3...v4.0)
diff --git a/client/src/components/analytics-module/NetWorthTrendChart.test.tsx b/client/src/components/analytics-module/NetWorthTrendChart.test.tsx
index dee0d00a..c5f505ce 100644
--- a/client/src/components/analytics-module/NetWorthTrendChart.test.tsx
+++ b/client/src/components/analytics-module/NetWorthTrendChart.test.tsx
@@ -38,11 +38,11 @@ describe('Cash Balance Trend comparison', () => {
 
   it('is opt-in, labels both months, and replaces the EMA only while comparing', () => {
     renderChart()
-    expect(screen.getByTestId('series-smoothed')).toHaveAttribute('data-dashes', '6 3')
+    expect(document.querySelector('[data-series=reference] path')).toHaveAttribute('stroke-dasharray', '6 3')
     expect(screen.queryByTestId('series-previous')).not.toBeInTheDocument()
     toggle()
     expect(screen.getByRole('button', { name: 'Hide comparison' })).toHaveAttribute('aria-pressed', 'true')
-    expect(screen.queryByTestId('series-smoothed')).not.toBeInTheDocument()
+    expect(document.querySelector('[data-series=reference]')).toBeNull()
     expect(screen.getByTestId('series-previous')).not.toHaveAttribute('data-dashes')
     expect(screen.getByText('October 2026')).toBeInTheDocument()
     expect(screen.getByText('September 2026')).toBeInTheDocument()
@@ -52,8 +52,8 @@ describe('Cash Balance Trend comparison', () => {
     expect(screen.queryByText(/Inspect day/)).not.toBeInTheDocument()
     toggle()
     expect(screen.getByRole('button', { name: 'Compare previous month' })).toHaveAttribute('aria-pressed', 'false')
-    expect(screen.getByTestId('series-smoothed')).toBeInTheDocument()
-    expect(screen.queryByRole('slider')).not.toBeInTheDocument()
+    expect(document.querySelector('[data-series=reference]')).toBeInTheDocument()
+    expect(screen.getByRole('slider', { name: /Cash balance/ })).toBeInTheDocument()
   })
 
   it('shows only the prior actual value on current-month future days in the tooltip', () => {
diff --git a/client/src/components/analytics-module/NetWorthTrendChart.tsx b/client/src/components/analytics-module/NetWorthTrendChart.tsx
index 5155c12c..76e8c9de 100644
--- a/client/src/components/analytics-module/NetWorthTrendChart.tsx
+++ b/client/src/components/analytics-module/NetWorthTrendChart.tsx
@@ -1,10 +1,8 @@
 import { memo, useId, useState } from 'react'
-import { format, parseISO } from 'date-fns'
 import { Card, CardContent, CardHeader, CardTitle } from '../common/card'
 import { TrendingUp } from 'lucide-react'
-import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts'
+import { InteractiveAreaChart } from '../common/interactive-area-chart'
 import { usePrivacy } from '../../context/PrivacyContext'
-import { calculateYAxisDomain } from './utils'
 import type { TrendDataPoint } from './types'
 import { Button } from '../common/button'
 import { CashBalanceComparisonChart } from './CashBalanceComparisonChart'
@@ -42,84 +40,15 @@ export const NetWorthTrendChart = memo(function NetWorthTrendChart({ data, maste
       </CardHeader>
       <CardContent className="px-2 sm:px-6">
         {comparing ? <CashBalanceComparisonChart key={comparison.selectedMonth} comparison={comparison} currency={masterCurrency} /> : data.length > 1 ? (
-          <div className="h-48 sm:h-64">
-            <ResponsiveContainer width="100%" height="100%">
-              <AreaChart data={data.map(point => ({ ...point, timestamp: parseISO(point.date).getTime() }))} margin={{ top: 10, right: 10, left: -10, bottom: 0 }}>
-                <defs>
-                  <linearGradient id="netWorthGradient" x1="0" y1="0" x2="0" y2="1">
-                    <stop offset="5%" stopColor="hsl(var(--primary))" stopOpacity={0.3}/>
-                    <stop offset="95%" stopColor="hsl(var(--primary))" stopOpacity={0}/>
-                  </linearGradient>
-                </defs>
-                <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" opacity={0.5} />
-                <XAxis 
-                  dataKey="timestamp"
-                  type="number"
-                  scale="time"
-                  domain={['dataMin', 'dataMax']}
-                  tickFormatter={value => format(new Date(value), 'MMM d')}
-                  stroke="hsl(var(--muted-foreground))" 
-                  fontSize={10}
-                  minTickGap={24}
-                  tickLine={false}
-                  axisLine={false}
-                  interval="preserveStartEnd"
-                />
-                <YAxis 
-                  stroke="hsl(var(--muted-foreground))" 
-                  fontSize={10}
-                  tickLine={false}
-                  axisLine={false}
-                  domain={calculateYAxisDomain(data)}
-                  tickFormatter={(value) => {
-                    if (privacyMode === 'hidden') return '••••'
-                    if (value >= 1000000) return `${(value / 1000000).toFixed(1)}M`
-                    if (value >= 1000) return `${(value / 1000).toFixed(0)}K`
-                    return value.toFixed(0)
-                  }}
-                  width={50}
-                />
-                <Tooltip 
-                  content={({ active, payload, label }) => {
-                    if (active && payload && payload.length) {
-                      const balanceEntry = payload.find(p => p.dataKey === 'balance')
-                      const value = balanceEntry?.value ?? payload[0].value
-                      return (
-                        <div className="bg-card border border-border rounded-lg p-2 shadow-lg">
-                          <p className="text-xs text-muted-foreground mb-1">{format(new Date(Number(label)), 'MMM d, yyyy')}</p>
-                          <p className={`text-sm font-bold text-primary ${privacyMode === 'hidden' ? 'select-none' : ''}`}>
-                            {privacyMode === 'hidden' ? '••••••' : `${Number(value)?.toLocaleString('hu-HU', {minimumFractionDigits: 0, maximumFractionDigits: 0})} ${masterCurrency}`}
-                          </p>
-                        </div>
-                      )
-                    }
-                    return null
-                  }}
-                />
-                <Area
-                  type="monotone"
-                  dataKey="smoothed"
-                  name="Trend"
-                  stroke="hsl(var(--muted-foreground))"
-                  strokeWidth={1.5}
-                  strokeDasharray="6 3"
-                  fillOpacity={0}
-                  fill="none"
-                  dot={false}
-                  activeDot={false}
-                />
-                <Area
-                  type="linear"
-                  dataKey="balance"
-                  name="Cash balance"
-                  stroke="hsl(var(--primary))"
-                  strokeWidth={2}
-                  fillOpacity={1}
-                  fill="url(#netWorthGradient)"
-                />
-              </AreaChart>
-            </ResponsiveContainer>
-          </div>
+          <InteractiveAreaChart
+            data={data.map(point => ({ date: point.date, value: point.balance, reference: point.smoothed }))}
+            label="Cash balance"
+            formatValue={value => value === null ? 'Unavailable' : `${value.toLocaleString('hu-HU', { maximumFractionDigits: 0 })} ${masterCurrency}`}
+            reference={{ label: 'Trend', color: 'hsl(var(--muted-foreground))', dashed: true }}
+            hidden={privacyMode === 'hidden'}
+            showReadout
+            className="h-48 sm:h-64"
+          />
         ) : (
           <div className="h-48 sm:h-64 flex items-center justify-center text-muted-foreground text-sm">
             Need more data points to show trend
diff --git a/client/src/components/analytics-module/PerAccountTrendChart.tsx b/client/src/components/analytics-module/PerAccountTrendChart.tsx
index 0d421629..06434165 100644
--- a/client/src/components/analytics-module/PerAccountTrendChart.tsx
+++ b/client/src/components/analytics-module/PerAccountTrendChart.tsx
@@ -1,8 +1,7 @@
 import { memo } from 'react'
 import { Card, CardContent, CardHeader, CardTitle } from '../common/card'
-import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts'
+import { InteractiveAreaChart } from '../common/interactive-area-chart'
 import { usePrivacy } from '../../context/PrivacyContext'
-import { calculateYAxisDomain } from './utils'
 import { COLORS } from './constants'
 import type { Account, TrendDataPoint } from './types'
 
@@ -29,79 +28,16 @@ export const PerAccountTrendChart = memo(function PerAccountTrendChart({ account
       </CardHeader>
       <CardContent className="px-2 sm:px-6">
         {data.length > 0 ? (
-          <div className="h-36 sm:h-48">
-            <ResponsiveContainer width="100%" height="100%">
-              <AreaChart data={data} margin={{ top: 10, right: 10, left: -10, bottom: 0 }}>
-                <defs>
-                  <linearGradient id={`accountGradient-${index}`} x1="0" y1="0" x2="0" y2="1">
-                    <stop offset="5%" stopColor={COLORS[index % COLORS.length]} stopOpacity={0.3}/>
-                    <stop offset="95%" stopColor={COLORS[index % COLORS.length]} stopOpacity={0}/>
-                  </linearGradient>
-                </defs>
-                <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" opacity={0.5} />
-                <XAxis 
-                  dataKey="formattedDate" 
-                  stroke="hsl(var(--muted-foreground))" 
-                  fontSize={9}
-                  tickLine={false}
-                  axisLine={false}
-                  interval="preserveStartEnd"
-                />
-                <YAxis 
-                  stroke="hsl(var(--muted-foreground))" 
-                  fontSize={9}
-                  tickLine={false}
-                  axisLine={false}
-                  domain={calculateYAxisDomain(data)}
-                  tickFormatter={(value) => {
-                    if (privacyMode === 'hidden') return '••••'
-                    if (value >= 1000000) return `${(value / 1000000).toFixed(1)}M`
-                    if (value >= 1000) return `${(value / 1000).toFixed(0)}K`
-                    return value.toFixed(0)
-                  }}
-                  width={45}
-                />
-                <Tooltip 
-                  content={({ active, payload, label }) => {
-                    if (active && payload && payload.length) {
-                      const balanceEntry = payload.find(p => p.dataKey === 'balance')
-                      const value = balanceEntry?.value ?? payload[0].value
-                      return (
-                        <div className="bg-card border border-border rounded-lg p-2 shadow-lg">
-                          <p className="text-xs text-muted-foreground mb-1">{label}</p>
-                          <p className={`text-sm font-bold ${privacyMode === 'hidden' ? 'select-none' : ''}`} style={{ color: COLORS[index % COLORS.length] }}>
-                            {privacyMode === 'hidden' ? '••••••' : `${Number(value)?.toLocaleString('hu-HU', {minimumFractionDigits: 0, maximumFractionDigits: 0})} ${account.currency}`}
-                          </p>
-                        </div>
-                      )
-                    }
-                    return null
-                  }}
-                />
-                <Area
-                  type="monotone"
-                  dataKey="smoothed"
-                  name="Trend"
-                  stroke="hsl(var(--muted-foreground))"
-                  strokeWidth={1.5}
-                  strokeDasharray="6 3"
-                  fillOpacity={0}
-                  fill="none"
-                  dot={false}
-                  activeDot={false}
-                />
-                <Area
-                  type="monotone"
-                  dataKey="balance"
-                  name="Balance"
-                  stroke={COLORS[index % COLORS.length]}
-                  strokeWidth={2}
-                  fillOpacity={1}
-                  fill={`url(#accountGradient-${index})`}
-                />
-              </AreaChart>
-            </ResponsiveContainer>
-          </div>
+          <InteractiveAreaChart
+            data={data.map(point => ({ date: point.date, value: point.balance, reference: point.smoothed }))}
+            label={`${account.name} balance`}
+            color={COLORS[index % COLORS.length]}
+            formatValue={value => value === null ? 'Unavailable' : `${value.toLocaleString('hu-HU', { maximumFractionDigits: 0 })} ${account.currency}`}
+            reference={{ label: 'Trend', color: 'hsl(var(--muted-foreground))', dashed: true }}
+            hidden={privacyMode === 'hidden'}
+            showReadout
+            className="h-36 sm:h-48"
+          />
         ) : (
           <div className="h-36 sm:h-48 flex items-center justify-center text-muted-foreground text-sm">
             No transaction data in this period
diff --git a/client/src/components/common/interactive-area-chart.test.tsx b/client/src/components/common/interactive-area-chart.test.tsx
new file mode 100644
index 00000000..5af97afb
--- /dev/null
+++ b/client/src/components/common/interactive-area-chart.test.tsx
@@ -0,0 +1,91 @@
+import { fireEvent, render, screen, within } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import { InteractiveAreaChart } from './interactive-area-chart'
+import type { AreaChartPoint } from './interactive-area-chart'
+
+const points: AreaChartPoint[] = [
+  { date: '2026-10-01', value: -100, reference: -120 },
+  { date: '2026-10-02', value: null, reference: null },
+  { date: '2026-10-10', value: 0, reference: -50 },
+  { date: '2026-10-11', value: 200, reference: 100 },
+]
+const money = (value: number | null) => value === null ? 'Unavailable' : `${value} EUR`
+const props = { data: points, label: 'Cash balance', formatValue: money, showReadout: true }
+
+describe('InteractiveAreaChart', () => {
+  it('reads original observations by keyboard, including gaps and zero, and resets on Escape', () => {
+    render(<InteractiveAreaChart {...props} />)
+    const slider = screen.getByRole('slider')
+    expect(slider).toHaveAttribute('aria-valuetext', 'Oct 11, 2026 · 200 EUR')
+    fireEvent.keyDown(slider, { key: 'Home' })
+    expect(slider).toHaveAttribute('aria-valuetext', 'Oct 1, 2026 · -100 EUR')
+    fireEvent.keyDown(slider, { key: 'ArrowRight' })
+    expect(slider).toHaveAttribute('aria-valuetext', 'Oct 2, 2026 · Unavailable')
+    fireEvent.keyDown(slider, { key: 'ArrowRight' })
+    expect(slider).toHaveAttribute('aria-valuetext', 'Oct 10, 2026 · 0 EUR')
+    fireEvent.keyDown(slider, { key: 'End' })
+    fireEvent.keyDown(slider, { key: 'ArrowRight' })
+    expect(slider).toHaveAttribute('aria-valuenow', '3')
+    fireEvent.keyDown(slider, { key: 'Escape' })
+    expect(screen.getByText('Oct 11, 2026 · latest in period')).toBeVisible()
+  })
+
+  it('snaps pointer and touch inspection to the nearest real date on an irregular time axis', () => {
+    const inspect = vi.fn()
+    render(<InteractiveAreaChart {...props} onInspect={inspect} />)
+    const slider = screen.getByRole('slider')
+    vi.spyOn(slider, 'getBoundingClientRect').mockReturnValue({ x: 0, y: 0, left: 0, top: 0, right: 640, bottom: 240, width: 640, height: 240, toJSON: () => ({}) })
+    // jsdom does not implement PointerEvent; use MouseEvent's coordinate support.
+    const event = new MouseEvent('pointermove', { bubbles: true, clientX: 115 })
+    fireEvent(slider, event)
+    expect(inspect).toHaveBeenLastCalledWith(1)
+    expect(slider).toHaveAttribute('aria-valuetext', 'Oct 2, 2026 · Unavailable')
+    fireEvent(slider, new MouseEvent('pointerdown', { bubbles: true, clientX: 628 }))
+    expect(inspect).toHaveBeenLastCalledWith(3)
+    fireEvent.pointerCancel(slider)
+    expect(inspect).toHaveBeenLastCalledWith(null)
+  })
+
+  it('breaks both paths at missing observations and keeps the reference stepped', () => {
+    const { container } = render(<InteractiveAreaChart {...props} reference={{ label: 'Net invested', color: 'gray', step: true, dashed: true }} />)
+    const primary = container.querySelector('[data-series=value]')!
+    expect(primary.querySelectorAll('path[fill=none]')).toHaveLength(2)
+    expect(primary.querySelectorAll('circle')).toHaveLength(1)
+    const lines = container.querySelectorAll('[data-series=reference] path')
+    expect(lines).toHaveLength(2)
+    expect(lines[1].getAttribute('d')).toContain(' H')
+    expect(lines[1]).toHaveAttribute('stroke-dasharray', '6 3')
+    expect(container.innerHTML).not.toMatch(/NaN|Infinity/)
+  })
+
+  it('removes values, chart geometry and accessible financial labels in privacy mode', () => {
+    const { container, rerender } = render(<InteractiveAreaChart {...props} />)
+    fireEvent.keyDown(screen.getByRole('slider'), { key: 'Home' })
+    rerender(<InteractiveAreaChart {...props} hidden />)
+    expect(screen.getByText('Chart hidden for privacy')).toBeVisible()
+    expect(container.querySelector('svg')).toBeNull()
+    expect(container).not.toHaveTextContent('EUR')
+    expect(screen.queryByRole('slider')).not.toBeInTheDocument()
+  })
+
+  it('handles single-point, flat, negative and empty datasets without invalid geometry', () => {
+    const { container, rerender } = render(<InteractiveAreaChart {...props} data={[points[0]]} />)
+    expect(screen.getByRole('slider')).toHaveAttribute('aria-valuemax', '0')
+    expect(container.querySelector('[data-series=value] circle')).toBeInTheDocument()
+    rerender(<InteractiveAreaChart {...props} data={[points[0], { ...points[0], date: '2026-10-02' }]} />)
+    expect(container.innerHTML).not.toMatch(/NaN|Infinity/)
+    rerender(<InteractiveAreaChart {...props} data={[]} />)
+    expect(screen.getByText('No data in this period')).toBeVisible()
+  })
+
+  it('clears inspection when the data is replaced and gives simultaneous charts unique gradients', () => {
+    const { container, rerender } = render(<InteractiveAreaChart {...props} />)
+    fireEvent.keyDown(screen.getByRole('slider'), { key: 'Home' })
+    rerender(<InteractiveAreaChart {...props} data={[{ date: '2026-11-01', value: 500 }]} />)
+    expect(screen.getByRole('slider')).toHaveAttribute('aria-valuetext', 'Nov 1, 2026 · 500 EUR')
+    rerender(<><section aria-label="first"><InteractiveAreaChart {...props} /></section><InteractiveAreaChart {...props} /></>)
+    const ids = [...container.querySelectorAll('linearGradient')].map(element => element.id)
+    expect(new Set(ids).size).toBe(2)
+    expect(within(screen.getByRole('region', { name: 'first' })).getByRole('slider')).toBeVisible()
+  })
+})
diff --git a/client/src/components/common/interactive-area-chart.tsx b/client/src/components/common/interactive-area-chart.tsx
new file mode 100644
index 00000000..8f1d69f6
--- /dev/null
+++ b/client/src/components/common/interactive-area-chart.tsx
@@ -0,0 +1,163 @@
+import { useEffect, useId, useRef, useState } from 'react'
+import type { PointerEvent, ReactNode } from 'react'
+import { cn } from '../../lib/utils'
+
+// Adapted from EasyUI's Interactive Area Chart (MIT; see licenses/easyui.txt).
+// Keep original samples, time spacing and gaps instead of spline resampling or
+// morphing financial observations into values that were never recorded.
+export type AreaChartPoint = { date: string; value: number | null; reference?: number | null }
+type Series = { label: string; color: string; dashed?: boolean; step?: boolean }
+type InteractiveAreaChartProps = {
+  data: AreaChartPoint[]
+  label: string
+  formatValue: (value: number | null) => string
+  color?: string
+  reference?: Series
+  hidden?: boolean
+  showReadout?: boolean
+  className?: string
+  activeIndex?: number | null
+  onInspect?: (index: number | null) => void
+  renderTooltip?: (index: number) => ReactNode
+}
+
+const clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max)
+const finite = (value: number | null | undefined): value is number => value != null && Number.isFinite(value)
+const shortDate = (date: string) => new Date(`${date}T00:00:00Z`).toLocaleDateString('en', { month: 'short', day: 'numeric', timeZone: 'UTC' })
+const fullDate = (date: string) => new Date(`${date}T00:00:00Z`).toLocaleDateString('en', { month: 'short', day: 'numeric', year: 'numeric', timeZone: 'UTC' })
+
+export function InteractiveAreaChart({ data, label, formatValue, color = 'hsl(var(--primary))', reference, hidden = false, showReadout = false, className, activeIndex, onInspect, renderTooltip }: InteractiveAreaChartProps) {
+  const uid = useId().replaceAll(':', '')
+  const wrapRef = useRef<HTMLDivElement>(null)
+  const [size, setSize] = useState({ width: 640, height: 240 })
+  const [selection, setSelection] = useState<{ data: AreaChartPoint[]; index: number } | null>(null)
+  const internalIndex = selection?.data === data ? selection.index : null
+  const index = activeIndex === undefined ? internalIndex : activeIndex
+  const inspected = index != null && index >= 0 && index < data.length ? index : null
+  const shown = data[inspected ?? data.length - 1]
+  const hasData = data.length > 0
+
+  useEffect(() => {
+    const element = wrapRef.current
+    if (!element || hidden) return
+    const measure = () => {
+      const rect = element.getBoundingClientRect()
+      if (rect.width > 0 && rect.height > 0) setSize({ width: rect.width, height: rect.height })
+    }
+    measure()
+    if (typeof ResizeObserver === 'undefined') return
+    const observer = new ResizeObserver(measure)
+    observer.observe(element)
+    return () => observer.disconnect()
+  }, [hidden, hasData])
+
+  const inspect = (next: number | null) => {
+    setSelection(next === null ? null : { data, index: next })
+    onInspect?.(next)
+  }
+  const { width, height } = size
+  const pad = { top: 24, right: 12, bottom: 28, left: width < 400 ? 48 : 58 }
+  const bottom = height - pad.bottom
+  const innerWidth = Math.max(1, width - pad.left - pad.right)
+  const values = data.flatMap(point => reference ? [point.value, point.reference] : [point.value]).filter(finite)
+  const minimum = values.length ? Math.min(...values) : 0
+  const maximum = values.length ? Math.max(...values) : 1
+  const padding = Math.max((maximum - minimum) * 0.2, Math.max(Math.abs(minimum), Math.abs(maximum)) * 0.025, 1)
+  const low = minimum - padding, high = maximum + padding
+  const times = data.map(point => Date.parse(`${point.date}T00:00:00Z`))
+  const start = times[0] ?? 0, span = (times.at(-1) ?? 0) - start
+  const x = (i: number) => pad.left + (span > 0 ? (times[i] - start) / span : 0.5) * innerWidth
+  const y = (value: number) => pad.top + (1 - (value - low) / (high - low)) * (bottom - pad.top)
+  const ticks = [high, (high + low) / 2, low]
+  const tooltipWidth = Math.min(renderTooltip ? 280 : 200, width)
+  const labelCount = width < 400 ? 3 : 5
+  const labels = [...new Set(Array.from({ length: labelCount }, (_, i) => Math.round(i / (labelCount - 1) * (data.length - 1))))]
+
+  const paths = (key: 'value' | 'reference', step = false) => {
+    const segments: { line: string; area: string; single: number | null }[] = []
+    let segment: number[] = []
+    const flush = () => {
+      if (!segment.length) return
+      const first = segment[0], last = segment[segment.length - 1]
+      const line = `M${x(first)} ${y(data[first][key]!)}` + segment.slice(1).map(i => step
+        ? ` H${x(i)} V${y(data[i][key]!)}`
+        : ` L${x(i)} ${y(data[i][key]!)}`).join('')
+      segments.push({ line, area: `${line} L${x(last)} ${bottom} L${x(first)} ${bottom} Z`, single: segment.length === 1 ? first : null })
+      segment = []
+    }
+    data.forEach((point, i) => { if (finite(point[key])) segment.push(i); else flush() })
+    flush()
+    return segments
+  }
+
+  const scrub = (event: PointerEvent<SVGSVGElement>) => {
+    const box = event.currentTarget.getBoundingClientRect()
+    if (!data.length || box.width === 0) return
+    const target = (event.clientX - box.left) * width / box.width
+    let nearest = 0
+    for (let i = 1; i < data.length; i++) if (Math.abs(x(i) - target) < Math.abs(x(nearest) - target)) nearest = i
+    inspect(nearest)
+  }
+
+  if (hidden) return <div className={cn('flex h-60 items-center justify-center text-sm text-muted-foreground', className)}>Chart hidden for privacy</div>
+  if (!data.length) return <div className={cn('flex h-60 items-center justify-center text-sm text-muted-foreground', className)}>No data in this period</div>
+
+  return <div className="min-w-0">
+    {showReadout && <div className="mb-2 px-2 sm:px-0" aria-live="polite" aria-atomic="true">
+      <p className="text-2xl font-semibold tracking-tight tabular-nums sm:text-3xl">{formatValue(shown.value)}</p>
+      <p className="mt-1 text-xs text-muted-foreground">{fullDate(shown.date)}{inspected === null ? ' · latest in period' : ''}</p>
+    </div>}
+    <div ref={wrapRef} className={cn('relative h-60 min-w-0', className)}>
+      <svg width="100%" height="100%" viewBox={`0 0 ${width} ${height}`} role="slider" tabIndex={0}
+        aria-label={`${label}. Use arrow keys to inspect dates.`} aria-orientation="horizontal"
+        aria-valuemin={0} aria-valuemax={data.length - 1} aria-valuenow={inspected ?? data.length - 1}
+        aria-valuetext={`${fullDate(shown.date)} · ${formatValue(shown.value)}`}
+        className="block select-none rounded-lg outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        style={{ touchAction: 'pan-y', cursor: 'crosshair' }}
+        onPointerMove={scrub} onPointerDown={scrub} onPointerLeave={() => inspect(null)} onPointerCancel={() => inspect(null)}
+        onBlur={() => inspect(null)} onKeyDown={event => {
+          let next: number | null
+          if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') next = clamp((inspected ?? data.length - 1) - 1, 0, data.length - 1)
+          else if (event.key === 'ArrowRight' || event.key === 'ArrowUp') next = clamp((inspected ?? data.length - 1) + 1, 0, data.length - 1)
+          else if (event.key === 'Home') next = 0
+          else if (event.key === 'End') next = data.length - 1
+          else if (event.key === 'Escape') next = null
+          else return
+          event.preventDefault()
+          inspect(next)
+        }}>
+        <defs><linearGradient id={`${uid}-fill`} x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stopColor={color} stopOpacity={0.2} /><stop offset="100%" stopColor={color} stopOpacity={0} /></linearGradient></defs>
+        <g aria-hidden="true">
+          {ticks.map((value, i) => <g key={i}>
+            <line x1={pad.left} x2={width - pad.right} y1={y(value)} y2={y(value)} stroke="hsl(var(--border))" strokeOpacity={0.6} />
+            <text x={pad.left - 10} y={y(value)} textAnchor="end" dominantBaseline="middle" className="fill-muted-foreground text-[10px] tabular-nums">{Intl.NumberFormat('en', { notation: 'compact', maximumFractionDigits: 1 }).format(value)}</text>
+          </g>)}
+          {labels.map((i, j) => <text key={i} x={x(i)} y={height - 6} textAnchor={j === 0 ? 'start' : j === labels.length - 1 ? 'end' : 'middle'} className="fill-muted-foreground text-[10px]">{shortDate(data[i].date)}</text>)}
+          {reference && <g data-series="reference">{paths('reference', reference.step).map((path, i) => <g key={i}>
+            <path d={path.line} fill="none" stroke={reference.color} strokeWidth={1.5} strokeDasharray={reference.dashed ? '6 3' : undefined} />
+            {path.single !== null && <circle cx={x(path.single)} cy={y(data[path.single].reference!)} r={2} fill={reference.color} />}
+          </g>)}</g>}
+          <g data-series="value">{paths('value').map((path, i) => <g key={i}>
+            <path d={path.area} fill={`url(#${uid}-fill)`} />
+            <path d={path.line} fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
+            {path.single !== null && <circle cx={x(path.single)} cy={y(data[path.single].value!)} r={3} fill={color} />}
+          </g>)}</g>
+          {inspected !== null && <g pointerEvents="none">
+            <line x1={x(inspected)} x2={x(inspected)} y1={pad.top} y2={bottom} stroke={color} strokeOpacity={0.3} strokeDasharray="3 3" />
+            {finite(shown.value) && <circle cx={x(inspected)} cy={y(shown.value)} r={4.5} fill="hsl(var(--card))" stroke={color} strokeWidth={2} />}
+          </g>}
+        </g>
+      </svg>
+      {inspected !== null && <div className="pointer-events-none absolute top-0 z-10 max-w-full [&>div]:max-w-full" style={{ width: tooltipWidth, left: clamp(x(inspected) - tooltipWidth / 2, 0, Math.max(0, width - tooltipWidth)) }}>
+        {renderTooltip ? renderTooltip(inspected) : <div className="rounded-xl border border-border bg-card px-3 py-2 shadow-sm">
+          <p className="text-[11px] text-muted-foreground">{fullDate(shown.date)}</p>
+          <p className="text-sm font-semibold tabular-nums" style={{ color }}>{formatValue(shown.value)}</p>
+        </div>}
+      </div>}
+    </div>
+    {reference && <div className="mt-3 flex flex-wrap gap-x-5 gap-y-1 px-2 text-xs text-muted-foreground sm:px-0">
+      <span className="inline-flex items-center gap-1.5"><span className="h-0.5 w-4" style={{ background: color }} />{label}</span>
+      <span className="inline-flex items-center gap-1.5"><span className="w-4 border-t" style={{ borderColor: reference.color, borderStyle: reference.dashed ? 'dashed' : 'solid' }} />{reference.label}</span>
+    </div>}
+  </div>
+}
diff --git a/client/src/components/common/licenses/easyui.txt b/client/src/components/common/licenses/easyui.txt
new file mode 100644
index 00000000..5a218ad3
--- /dev/null
+++ b/client/src/components/common/licenses/easyui.txt
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Suraj Maurya
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/client/src/components/investments-module/PortfolioHistoryChart.tsx b/client/src/components/investments-module/PortfolioHistoryChart.tsx
index b9998c28..f032fddc 100644
--- a/client/src/components/investments-module/PortfolioHistoryChart.tsx
+++ b/client/src/components/investments-module/PortfolioHistoryChart.tsx
@@ -1,13 +1,12 @@
 import {amount} from './overview'
 import {PortfolioHistoryTooltip} from './PortfolioHistoryTooltip'
-import {useId,useState} from 'react'
-import {Area,CartesianGrid,ComposedChart,Line,ResponsiveContainer,Tooltip,XAxis,YAxis} from 'recharts'
+import {useState} from 'react'
+import {InteractiveAreaChart} from '../common/interactive-area-chart'
 import type {usePortfolioHistory} from '../../hooks/usePortfolioHistory'
-import type {PortfolioHistoryPoint} from '../../../../shared/investment-history-contract'
 const ranges=[['1m','1M'],['3m','3M'],['6m','6M'],['1y','1Y'],['ytd','YTD'],['all','All']] as const
 export function PortfolioHistoryChart({history,hidden,currency,currentValue}:{history:ReturnType<typeof usePortfolioHistory>;hidden:boolean;currency:string;currentValue?:number|null}) {
  const {data,range,setRange,loading,error,refresh}=history
- const id=useId().replaceAll(':',''),summary=data?.summary
+ const summary=data?.summary
  const money=(n:number|null|undefined)=>amount(n,currency,hidden)
  const percent=(n:number|null|undefined)=>hidden?'••••••':n==null?'Unavailable':`${n.toLocaleString(undefined,{maximumFractionDigits:2})}%`
  const [selection,setSelection]=useState<{key:string;index:number}|null>(null)
@@ -27,23 +26,14 @@ export function PortfolioHistoryChart({history,hidden,currency,currentValue}:{hi
   </div>
   {error&&<p role="alert" className="text-sm">{data?'Showing saved history. Refresh failed.':'Portfolio history could not be loaded.'} {history.errorMessage} <button onClick={refresh} className="text-primary underline">Retry history</button></p>}
   {loading&&<p role="status" className="text-xs text-muted-foreground">{data?'Refreshing history…':'Loading portfolio history…'}</p>}
-  <div className="h-[220px] w-full min-w-0 @min-[640px]:h-[300px]" aria-label={hidden?'Portfolio chart hidden':'Daily portfolio value and net invested'}>
-   {hidden?<div className="flex h-full items-center justify-center text-muted-foreground">Chart hidden for privacy</div>:!data?<div className="flex h-full items-center justify-center text-sm text-muted-foreground">{loading?'Loading daily values…':'History unavailable'}</div>:!known?<div className="flex h-full items-center justify-center text-sm text-muted-foreground">No known portfolio values in this range.</div>:
-    <ResponsiveContainer width="100%" height="100%"><ComposedChart data={data.points} onMouseMove={s=>{if(s.activeIndex!=null&&Number.isInteger(Number(s.activeIndex)))readDay(Number(s.activeIndex))}} onClick={s=>{if(s.activeIndex!=null&&Number.isInteger(Number(s.activeIndex)))readDay(Number(s.activeIndex))}} onMouseLeave={()=>setSelection(null)} margin={{left:0,right:12,top:8,bottom:0}}>
-     <defs><linearGradient id={id} x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stopColor="hsl(var(--primary))" stopOpacity={0.18}/><stop offset="100%" stopColor="hsl(var(--primary))" stopOpacity={0.01}/></linearGradient></defs>
-     <CartesianGrid vertical={false} stroke="hsl(var(--border))"/>
-     <XAxis dataKey="date" tick={{fontSize:10}} minTickGap={40} tickFormatter={d=>String(d).slice(5)}/>
-     <YAxis width={64} tick={{fontSize:10}} tickFormatter={n=>Intl.NumberFormat(undefined,{notation:'compact',maximumFractionDigits:1}).format(n)} domain={['auto','auto']}/>
-     <Tooltip filterNull={false} content={({active,payload})=>{
-      const p=active&&payload?.[0]?.payload as PortfolioHistoryPoint|undefined
-      return p?<PortfolioHistoryTooltip point={p} currency={currency} hidden={hidden}/>:null
-     }}/>
-     <Area type="linear" dataKey="value" name="Portfolio value" stroke="hsl(var(--primary))" strokeWidth={2} fill={`url(#${id})`} dot={{r:1.5,strokeWidth:0,fill:'hsl(var(--primary))'}} connectNulls={false} isAnimationActive={false}/>
-     <Line type="stepAfter" dataKey="net_invested" name="Net invested" stroke="hsl(var(--muted-foreground))" strokeDasharray="5 5" dot={false} connectNulls={false} isAnimationActive={false}/>
-    </ComposedChart></ResponsiveContainer>}
+  <div className="w-full min-w-0" aria-label={hidden?'Portfolio chart hidden':'Daily portfolio value and net invested'}>
+   {hidden?<div className="flex h-[220px] @min-[640px]:h-[300px] items-center justify-center text-muted-foreground">Chart hidden for privacy</div>:!data?<div className="flex h-[220px] @min-[640px]:h-[300px] items-center justify-center text-sm text-muted-foreground">{loading?'Loading daily values…':'History unavailable'}</div>:!known?<div className="flex h-[220px] @min-[640px]:h-[300px] items-center justify-center text-sm text-muted-foreground">No known portfolio values in this range.</div>:
+    <InteractiveAreaChart key={key} data={data.points.map(point=>({date:point.date,value:point.value,reference:point.net_invested}))}
+     label="Portfolio value" formatValue={money} className="h-[220px] @min-[640px]:h-[300px]"
+     reference={{label:'Net invested',color:'hsl(var(--muted-foreground))',dashed:true,step:true}}
+     activeIndex={selected?selection!.index:null} onInspect={index=>index===null?setSelection(null):readDay(index)}
+     renderTooltip={index=><PortfolioHistoryTooltip point={data.points[index]} currency={currency}/>}/>}
   </div>
-  <div className="flex flex-wrap gap-4 text-xs text-muted-foreground"><span><span className="inline-block h-0.5 w-5 bg-primary align-middle mr-1"/>Portfolio value</span><span><span className="inline-block w-5 border-t border-dashed border-muted-foreground align-middle mr-1"/>Net invested</span></div>
-  {!hidden&&data&&data.points.length>1&&<label className="sr-only focus-within:not-sr-only"><span>Read a day: {selected?.date??data.to}</span><input type="range" aria-label="Read portfolio history by date" min={0} max={data.points.length-1} value={selected?selection!.index:data.points.length-1} onChange={e=>readDay(Number(e.target.value))} aria-valuetext={`${selected?.date??data.to} · ${money(displayedValue)}`} className="w-full accent-primary"/></label>}
   {data&&<>
    <p className="text-[10px] leading-relaxed text-muted-foreground">{data.from} – {data.to} · {data.timezone} · read {new Date(data.as_of).toLocaleString()}{data.points.at(-1)?.provisional?' · today is provisional':''}</p>
   </>}
diff --git a/client/src/test/PortfolioHistoryChart.test.tsx b/client/src/test/PortfolioHistoryChart.test.tsx
index 0db6f44a..4b2d1e9c 100644
--- a/client/src/test/PortfolioHistoryChart.test.tsx
+++ b/client/src/test/PortfolioHistoryChart.test.tsx
@@ -35,7 +35,30 @@ it('retains saved data with an actionable retry after a failed refresh',()=>{
 it('reads a selected day by keyboard/touch control without substituting a current value for a gap',()=>{
  const history=fixture();history.data.points[0].value=null
  render(<PortfolioHistoryChart history={history} hidden={false} currency="HUF" currentValue={6000}/>)
- fireEvent.change(screen.getByRole('slider',{name:'Read portfolio history by date'}),{target:{value:'0'}})
+ fireEvent.keyDown(screen.getByRole('slider',{name:/Portfolio value/}),{key:'Home'})
  expect(screen.getByRole('heading',{name:'Portfolio value · 2026-10-01'})).toBeInTheDocument()
- expect(screen.getByText('Unavailable')).toBeVisible()
+ expect(screen.getAllByText('Unavailable').length).toBeGreaterThan(0)
+})
+
+it('keeps saved history inspectable after refresh failure and resets the readout for a new currency',()=>{
+ const history=fixture();history.error=true
+ const {rerender}=render(<PortfolioHistoryChart history={history} hidden={false} currency="HUF" currentValue={6000}/>)
+ fireEvent.keyDown(screen.getByRole('slider',{name:/Portfolio value/}),{key:'Home'})
+ expect(screen.getByRole('heading',{name:'Portfolio value · 2026-10-01'})).toBeVisible()
+ expect(screen.getByRole('alert')).toHaveTextContent('Showing saved history. Refresh failed.')
+ rerender(<PortfolioHistoryChart history={history} hidden={false} currency="USD" currentValue={15}/>)
+ expect(screen.getByRole('heading',{name:'Portfolio value'})).toBeVisible()
+ expect(screen.getByText('15 USD')).toBeVisible()
+})
+
+it('shows loading and unavailable history without disabling range selection or retry',()=>{
+ const history={...fixture(),data:null,loading:true} as ReturnType<typeof usePortfolioHistory>
+ const {rerender}=render(<PortfolioHistoryChart history={history} hidden={false} currency="HUF"/>)
+ expect(screen.getByRole('status')).toHaveTextContent('Loading portfolio history…')
+ expect(screen.getByText('Loading daily values…')).toBeVisible()
+ history.loading=false;history.error=true
+ rerender(<PortfolioHistoryChart history={history} hidden={false} currency="HUF"/>)
+ expect(screen.getByText('History unavailable')).toBeVisible()
+ fireEvent.click(screen.getByRole('button',{name:'Retry history'}));expect(history.refresh).toHaveBeenCalledOnce()
+ fireEvent.click(screen.getByRole('button',{name:'3M'}));expect(history.setRange).toHaveBeenCalledWith('3m')
 })

From 8c970618f25ebcc76d9b968f18a97afaf8e3436b Mon Sep 17 00:00:00 2001
From: 31b4 <szilagyibence@szilagyibence.com>
Date: Wed, 21 Oct 2026 11:34:16 +0200
Subject: [PATCH 2/7] Match EasyUI chart styling and smooth interactions

---
 CHANGELOG.md                                  |  2 +-
 client/package.json                           |  1 +
 .../analytics-module/Analytics.test.tsx       | 16 +++-
 .../components/analytics-module/Analytics.tsx |  5 +-
 .../NetWorthTrendChart.test.tsx               |  4 +-
 .../analytics-module/NetWorthTrendChart.tsx   | 65 +++++++--------
 .../analytics-module/PerAccountTrendChart.tsx | 51 ++++--------
 .../components/common/area-chart-ranges.tsx   | 18 +++++
 .../common/interactive-area-chart.test.tsx    | 38 +++++++++
 .../common/interactive-area-chart.tsx         | 81 +++++++++++++------
 .../PortfolioHistoryChart.tsx                 | 13 +--
 client/src/index.css                          | 43 ++++++++++
 package-lock.json                             | 40 ++++++++-
 13 files changed, 267 insertions(+), 110 deletions(-)
 create mode 100644 client/src/components/common/area-chart-ranges.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 23edde11..c8f8158e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,7 +6,7 @@ Intermediate package/UI version bumps are grouped under the next published GitHu
 
 ## Unreleased
 
-- Refreshed cash-balance, account and portfolio history charts with an EasyUI-inspired SVG area presentation, dated value readouts and keyboard/touch inspection, preserving native currencies, history gaps and privacy.
+- Refreshed cash-balance, account and portfolio history charts with EasyUI’s neutral cards, smooth monochrome area curves, animated reveals and range pills. Dated value readouts and keyboard/touch inspection preserve native currencies, history gaps and privacy.
 
 ## v4.0 — 2026-10-20
 
diff --git a/client/package.json b/client/package.json
index 69673487..ab088733 100644
--- a/client/package.json
+++ b/client/package.json
@@ -14,6 +14,7 @@
   "dependencies": {
     "clsx": "^2.1.1",
     "date-fns": "^2.30.0",
+    "framer-motion": "^14.5.0",
     "lucide-react": "^0.554.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
diff --git a/client/src/components/analytics-module/Analytics.test.tsx b/client/src/components/analytics-module/Analytics.test.tsx
index 334469e8..aee2b8a9 100644
--- a/client/src/components/analytics-module/Analytics.test.tsx
+++ b/client/src/components/analytics-module/Analytics.test.tsx
@@ -1,4 +1,5 @@
-import { fireEvent, render, screen } from '@testing-library/react'
+import type { ReactNode } from 'react'
+import { fireEvent, render, screen, within } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { Analytics } from './Analytics'
 import { WIDGET_DEFS } from './widgetConfig'
@@ -18,8 +19,8 @@ vi.mock('./IncomeExpensesTrendChart', () => ({
   ),
 }))
 vi.mock('./NetWorthTrendChart', () => ({
-  NetWorthTrendChart: ({ data, comparison, comparisonDisabledReason }: { data: Array<{ date: string; balance: number }>; comparison?: CashBalanceComparison; comparisonDisabledReason?: string }) => (
-    <div data-testid="cash-trend" data-points={JSON.stringify(data)} data-comparison={JSON.stringify(comparison)} data-disabled-reason={comparisonDisabledReason} />
+  NetWorthTrendChart: ({ data, comparison, comparisonDisabledReason, controls }: { controls?: ReactNode; data: Array<{ date: string; balance: number }>; comparison?: CashBalanceComparison; comparisonDisabledReason?: string }) => (
+    <div data-testid="cash-trend" data-points={JSON.stringify(data)} data-comparison={JSON.stringify(comparison)} data-disabled-reason={comparisonDisabledReason}>{controls}</div>
   ),
 }))
 
@@ -60,6 +61,15 @@ describe('Analytics Projected mode', () => {
     vi.useRealTimers()
   })
 
+  it('applies the chart range pill to the page filters and returns projected data to Actual in one update', () => {
+    localStorage.setItem('analytics-widget-visibility', JSON.stringify({ 'cash-balance-trend': true }))
+    const onFiltersChange = vi.fn()
+    render(<Analytics transactions={[posted]} upcomingTransactions={[upcoming('future', '2026-09-20')]} accounts={accounts} categories={[]}
+      filters={{ period: 'month', date: '2026-09-01', pinned: false, mode: 'projected', expenseCategory: 'all', incomeCategory: 'all', resolution: 'quarter' }} onFiltersChange={onFiltersChange} />)
+    fireEvent.click(within(screen.getByRole('group', { name: 'Cash balance range' })).getByRole('button', { name: '1Y' }))
+    expect(onFiltersChange).toHaveBeenCalledExactlyOnceWith({ period: 'year', mode: 'actual', resolution: 'default' }, false)
+  })
+
   it('hides the switch and keeps Actual values when only other periods or ineligible rows exist', () => {
     renderAnalytics([
       upcoming('october', '2026-10-01'),
diff --git a/client/src/components/analytics-module/Analytics.tsx b/client/src/components/analytics-module/Analytics.tsx
index f464c82c..ca8e3aeb 100644
--- a/client/src/components/analytics-module/Analytics.tsx
+++ b/client/src/components/analytics-module/Analytics.tsx
@@ -16,6 +16,7 @@ import { convertToMasterCurrency as convertUtil } from './utils'
 import { SummaryCards } from './SummaryCards'
 import { FinancialOutlook } from './FinancialOutlook'
 import { NetWorthTrendChart } from './NetWorthTrendChart'
+import { AreaChartRanges } from '../common/area-chart-ranges'
 import { IncomeChart } from './IncomeChart'
 import { ExpensesChart } from './ExpensesChart'
 import {
@@ -923,7 +924,9 @@ export function Analytics({
 
   const cashTrendChart = show('cash-balance-trend') && accounts.some(account => account.type !== 'investment' && !account.exclude_from_cash_balance) ? (
     <NetWorthTrendChart data={displayedCashBalanceData} masterCurrency={masterCurrency}
-      title="Cash Balance Trend" comparison={cashBalanceComparison} comparisonDisabledReason={cashComparisonDisabledReason} />
+      title="Cash Balance Trend" periodLabel={periodDisplayLabel}
+      controls={<AreaChartRanges label="Cash balance range" options={[['month', '1M'], ['year', '1Y'], ['allTime', 'All']] as const} value={period} onChange={next => changeFilters({ period: next, mode: 'actual', resolution: 'default' })} />}
+      comparison={cashBalanceComparison} comparisonDisabledReason={cashComparisonDisabledReason} />
   ) : null
 
   return (
diff --git a/client/src/components/analytics-module/NetWorthTrendChart.test.tsx b/client/src/components/analytics-module/NetWorthTrendChart.test.tsx
index c5f505ce..46b9e98b 100644
--- a/client/src/components/analytics-module/NetWorthTrendChart.test.tsx
+++ b/client/src/components/analytics-module/NetWorthTrendChart.test.tsx
@@ -36,8 +36,10 @@ const toggle = () => fireEvent.click(screen.getByRole('button', { name: /^(Compa
 describe('Cash Balance Trend comparison', () => {
   beforeEach(() => { state.privacyMode = 'visible'; state.tooltipDay = 2; state.points = [] })
 
-  it('is opt-in, labels both months, and replaces the EMA only while comparing', () => {
+  it('keeps trend and comparison opt-in and labels both months', () => {
     renderChart()
+    expect(document.querySelector('[data-series=reference]')).toBeNull()
+    fireEvent.click(screen.getByRole('button', { name: 'Trend' }))
     expect(document.querySelector('[data-series=reference] path')).toHaveAttribute('stroke-dasharray', '6 3')
     expect(screen.queryByTestId('series-previous')).not.toBeInTheDocument()
     toggle()
diff --git a/client/src/components/analytics-module/NetWorthTrendChart.tsx b/client/src/components/analytics-module/NetWorthTrendChart.tsx
index 76e8c9de..26da534e 100644
--- a/client/src/components/analytics-module/NetWorthTrendChart.tsx
+++ b/client/src/components/analytics-module/NetWorthTrendChart.tsx
@@ -1,10 +1,8 @@
 import { memo, useId, useState } from 'react'
-import { Card, CardContent, CardHeader, CardTitle } from '../common/card'
-import { TrendingUp } from 'lucide-react'
+import type { ReactNode } from 'react'
 import { InteractiveAreaChart } from '../common/interactive-area-chart'
 import { usePrivacy } from '../../context/PrivacyContext'
 import type { TrendDataPoint } from './types'
-import { Button } from '../common/button'
 import { CashBalanceComparisonChart } from './CashBalanceComparisonChart'
 import type { CashBalanceComparison } from './cash-balance-comparison'
 
@@ -12,49 +10,40 @@ type NetWorthTrendChartProps = {
   data: TrendDataPoint[]
   masterCurrency: string
   title?: string
+  controls?: ReactNode
+  periodLabel?: string
   comparison?: CashBalanceComparison
   comparisonDisabledReason?: string
 }
 
-export const NetWorthTrendChart = memo(function NetWorthTrendChart({ data, masterCurrency, title = 'Cash Balance Trend', comparison, comparisonDisabledReason }: NetWorthTrendChartProps) {
+export const NetWorthTrendChart = memo(function NetWorthTrendChart({ data, masterCurrency, title = 'Cash Balance Trend', controls, periodLabel, comparison, comparisonDisabledReason }: NetWorthTrendChartProps) {
   const { privacyMode } = usePrivacy()
   const [compare, setCompare] = useState(false)
+  const [showTrend, setShowTrend] = useState(false)
   const reasonId = useId()
   const unavailableReason = comparisonDisabledReason || comparison?.unavailableReason
   const comparing = compare && comparison !== undefined && !unavailableReason
+  const hidden = privacyMode === 'hidden'
 
-  return (
-    <Card className="lg:col-span-2">
-      <CardHeader className="pb-2 px-4 sm:px-6">
-        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-          <div className="flex items-center gap-2">
-            <TrendingUp className="h-4 w-4 text-muted-foreground" />
-            <CardTitle className="text-sm sm:text-base">{title}</CardTitle>
-          </div>
-          {comparison && <Button type="button" size="sm" variant={comparing ? 'default' : 'outline'} className="self-start enabled:cursor-pointer sm:self-auto"
-            aria-pressed={comparing} disabled={Boolean(unavailableReason)} aria-describedby={unavailableReason ? reasonId : undefined} onClick={() => setCompare(previous => !previous)}>
-            {comparing ? 'Hide comparison' : 'Compare previous month'}
-          </Button>}
-        </div>
-        {comparison && unavailableReason && <p id={reasonId} className="text-xs text-muted-foreground">{unavailableReason}</p>}
-      </CardHeader>
-      <CardContent className="px-2 sm:px-6">
-        {comparing ? <CashBalanceComparisonChart key={comparison.selectedMonth} comparison={comparison} currency={masterCurrency} /> : data.length > 1 ? (
-          <InteractiveAreaChart
-            data={data.map(point => ({ date: point.date, value: point.balance, reference: point.smoothed }))}
-            label="Cash balance"
-            formatValue={value => value === null ? 'Unavailable' : `${value.toLocaleString('hu-HU', { maximumFractionDigits: 0 })} ${masterCurrency}`}
-            reference={{ label: 'Trend', color: 'hsl(var(--muted-foreground))', dashed: true }}
-            hidden={privacyMode === 'hidden'}
-            showReadout
-            className="h-48 sm:h-64"
-          />
-        ) : (
-          <div className="h-48 sm:h-64 flex items-center justify-center text-muted-foreground text-sm">
-            Need more data points to show trend
-          </div>
-        )}
-      </CardContent>
-    </Card>
-  )
+  return <section className="easyui-area-card lg:col-span-2" aria-label={title}>
+    {comparing ? <>
+      <div className="mb-5 flex flex-wrap items-start justify-between gap-3"><h3 className="text-[13px] text-muted-foreground">{title}</h3>{controls}</div>
+      <CashBalanceComparisonChart key={comparison.selectedMonth} comparison={comparison} currency={masterCurrency} />
+    </> : data.length > 1 ? <InteractiveAreaChart
+      data={data.map(point => ({ date: point.date, value: point.balance, reference: point.smoothed }))}
+      label="Cash balance" title={title} controls={controls} periodLabel={periodLabel}
+      formatValue={value => value === null ? 'Unavailable' : `${value.toLocaleString('hu-HU', { maximumFractionDigits: 0 })} ${masterCurrency}`}
+      reference={showTrend ? { label: 'Trend', color: 'hsl(var(--muted-foreground))', dashed: true } : undefined}
+      hidden={hidden} showReadout showChange
+      className="h-[240px] sm:h-[280px]"
+    /> : <><h3 className="text-[13px] text-muted-foreground">{title}</h3><div className="flex h-[280px] items-center justify-center text-sm text-muted-foreground">Need more data points to show trend</div></>}
+    <div className="mt-3 flex flex-wrap items-center justify-end gap-2">
+      {!comparing && !hidden && <button type="button" aria-pressed={showTrend} className="easyui-chart-control" onClick={() => setShowTrend(previous => !previous)}>Trend</button>}
+      {comparison && <button type="button" className="easyui-chart-control" aria-pressed={comparing}
+        disabled={Boolean(unavailableReason)} aria-describedby={unavailableReason ? reasonId : undefined} onClick={() => setCompare(previous => !previous)}>
+        {comparing ? 'Hide comparison' : 'Compare previous month'}
+      </button>}
+    </div>
+    {comparison && unavailableReason && <p id={reasonId} className="mt-1 text-xs text-muted-foreground">{unavailableReason}</p>}
+  </section>
 })
diff --git a/client/src/components/analytics-module/PerAccountTrendChart.tsx b/client/src/components/analytics-module/PerAccountTrendChart.tsx
index 06434165..274670b2 100644
--- a/client/src/components/analytics-module/PerAccountTrendChart.tsx
+++ b/client/src/components/analytics-module/PerAccountTrendChart.tsx
@@ -1,8 +1,7 @@
-import { memo } from 'react'
-import { Card, CardContent, CardHeader, CardTitle } from '../common/card'
+import { memo, useState } from 'react'
 import { InteractiveAreaChart } from '../common/interactive-area-chart'
 import { usePrivacy } from '../../context/PrivacyContext'
-import { COLORS } from './constants'
+import { cn } from '../../lib/utils'
 import type { Account, TrendDataPoint } from './types'
 
 type PerAccountTrendChartProps = {
@@ -12,38 +11,20 @@ type PerAccountTrendChartProps = {
   className?: string
 }
 
-export const PerAccountTrendChart = memo(function PerAccountTrendChart({ account, data, index, className }: PerAccountTrendChartProps) {
+export const PerAccountTrendChart = memo(function PerAccountTrendChart({ account, data, className }: PerAccountTrendChartProps) {
   const { privacyMode } = usePrivacy()
+  const [showTrend, setShowTrend] = useState(false)
 
-  return (
-    <Card className={className}>
-      <CardHeader className="pb-2 px-4 sm:px-6">
-        <div className="flex items-center gap-2">
-          <span className="text-base sm:text-lg">{account.icon || '💳'}</span>
-          <CardTitle className="text-sm sm:text-base truncate flex-1">{account.name}</CardTitle>
-          <span className={`text-xs text-muted-foreground flex-shrink-0 ${privacyMode === 'hidden' ? 'select-none' : ''}`}>
-            {privacyMode === 'hidden' ? '••••••' : account.balance.toLocaleString('hu-HU', {minimumFractionDigits: 0, maximumFractionDigits: 0})} {account.currency}
-          </span>
-        </div>
-      </CardHeader>
-      <CardContent className="px-2 sm:px-6">
-        {data.length > 0 ? (
-          <InteractiveAreaChart
-            data={data.map(point => ({ date: point.date, value: point.balance, reference: point.smoothed }))}
-            label={`${account.name} balance`}
-            color={COLORS[index % COLORS.length]}
-            formatValue={value => value === null ? 'Unavailable' : `${value.toLocaleString('hu-HU', { maximumFractionDigits: 0 })} ${account.currency}`}
-            reference={{ label: 'Trend', color: 'hsl(var(--muted-foreground))', dashed: true }}
-            hidden={privacyMode === 'hidden'}
-            showReadout
-            className="h-36 sm:h-48"
-          />
-        ) : (
-          <div className="h-36 sm:h-48 flex items-center justify-center text-muted-foreground text-sm">
-            No transaction data in this period
-          </div>
-        )}
-      </CardContent>
-    </Card>
-  )
+  return <section className={cn('easyui-area-card', className)} aria-label={`${account.name} trend`}>
+    {data.length > 0 ? <InteractiveAreaChart
+      data={data.map(point => ({ date: point.date, value: point.balance, reference: point.smoothed }))}
+      label={`${account.name} balance`} title={account.name}
+      formatValue={value => value === null ? 'Unavailable' : `${value.toLocaleString('hu-HU', { maximumFractionDigits: 0 })} ${account.currency}`}
+      reference={showTrend ? { label: 'Trend', color: 'hsl(var(--muted-foreground))', dashed: true } : undefined}
+      hidden={privacyMode === 'hidden'} showReadout showChange className="h-[200px] sm:h-[240px]"
+    /> : <><h3 className="text-[13px] text-muted-foreground">{account.name}</h3><div className="flex h-48 items-center justify-center text-sm text-muted-foreground">No transaction data in this period</div></>}
+    <div className="mt-3 flex flex-wrap items-center justify-between gap-2"><p className="text-[11px] text-muted-foreground">Current balance: {privacyMode === 'hidden' ? '••••••' : account.balance.toLocaleString('hu-HU', { maximumFractionDigits: 0 })} {account.currency}</p>
+      {privacyMode !== 'hidden' && data.length > 0 && <button type="button" aria-pressed={showTrend} onClick={() => setShowTrend(previous => !previous)} className="easyui-chart-control">Trend</button>}
+    </div>
+  </section>
 })
diff --git a/client/src/components/common/area-chart-ranges.tsx b/client/src/components/common/area-chart-ranges.tsx
new file mode 100644
index 00000000..d226f28e
--- /dev/null
+++ b/client/src/components/common/area-chart-ranges.tsx
@@ -0,0 +1,18 @@
+import { useId } from 'react'
+import { motion, useReducedMotion } from 'framer-motion'
+
+export function AreaChartRanges<T extends string>({ label, options, value, onChange }: {
+  label: string
+  options: readonly (readonly [T, string])[]
+  value: T
+  onChange: (value: T) => void
+}) {
+  const id = useId()
+  const reduce = useReducedMotion()
+  return <div role="group" aria-label={label} className="easyui-chart-ranges">
+    {options.map(([key, text]) => <button key={key} type="button" aria-pressed={value === key} onClick={() => onChange(key)}>
+      {value === key && <motion.span layoutId={`${id}-pill`} className="easyui-chart-pill" transition={{ type: 'spring', duration: reduce ? 0 : 0.3, bounce: 0.15 }} />}
+      <span className="relative">{text}</span>
+    </button>)}
+  </div>
+}
diff --git a/client/src/components/common/interactive-area-chart.test.tsx b/client/src/components/common/interactive-area-chart.test.tsx
index 5af97afb..93d251ef 100644
--- a/client/src/components/common/interactive-area-chart.test.tsx
+++ b/client/src/components/common/interactive-area-chart.test.tsx
@@ -89,3 +89,41 @@ describe('InteractiveAreaChart', () => {
     expect(within(screen.getByRole('region', { name: 'first' })).getByRole('slider')).toBeVisible()
   })
 })
+
+it('draws a smooth curve without overshooting adjacent observations at plateaus or sharp changes', () => {
+  const values = [0, 0, 100, 100, -100, 25]
+  const data = values.map((value, i) => ({ date: `2026-10-${String(i + 1).padStart(2, '0')}`, value }))
+  const { container } = render(<InteractiveAreaChart {...props} data={data} />)
+  const path = container.querySelector('[data-series=value] path[fill=none]')!.getAttribute('d')!
+  const [move, ...curves] = path.split(' C')
+  expect(curves).toHaveLength(values.length - 1)
+  let previous = move.slice(1).split(' ').map(Number)
+  for (const command of curves) {
+    const [x1, y1, x2, y2, x, y] = command.split(' ').map(Number)
+    for (let t = 0; t <= 1; t += 0.05) {
+      const sampleX = (1-t)**3 * previous[0] + 3*(1-t)**2*t*x1 + 3*(1-t)*t*t*x2 + t**3*x
+      const sampleY = (1-t)**3 * previous[1] + 3*(1-t)**2*t*y1 + 3*(1-t)*t*t*y2 + t**3*y
+      expect(sampleX).toBeGreaterThanOrEqual(previous[0] - 0.001)
+      expect(sampleX).toBeLessThanOrEqual(x + 0.001)
+      expect(sampleY).toBeGreaterThanOrEqual(Math.min(previous[1], y) - 0.001)
+      expect(sampleY).toBeLessThanOrEqual(Math.max(previous[1], y) + 0.001)
+    }
+    previous = [x, y]
+  }
+})
+
+it('does not invent percentage changes for an unknown, zero or negative opening balance', () => {
+  const { container, rerender } = render(<InteractiveAreaChart {...props} data={[points[1], points[3]]} showChange />)
+  expect(container).not.toHaveTextContent('%')
+  for (const first of [0, -100]) {
+    rerender(<InteractiveAreaChart {...props} data={[{ ...points[0], value: first }, points[3]]} showChange />)
+    expect(container).not.toHaveTextContent('%')
+  }
+  rerender(<InteractiveAreaChart {...props} data={[{ ...points[0], value: 100 }, points[3]]} showChange />)
+  expect(container).toHaveTextContent('+100.0%')
+  rerender(<InteractiveAreaChart {...props} hidden showChange title="Cash balance" controls={<button>1M</button>} />)
+  expect(screen.getByRole('heading', { name: 'Cash balance' })).toBeVisible()
+  expect(screen.getByRole('button', { name: '1M' })).toBeVisible()
+  expect(container).not.toHaveTextContent('%')
+  expect(container).not.toHaveTextContent('EUR')
+})
diff --git a/client/src/components/common/interactive-area-chart.tsx b/client/src/components/common/interactive-area-chart.tsx
index 8f1d69f6..40950abe 100644
--- a/client/src/components/common/interactive-area-chart.tsx
+++ b/client/src/components/common/interactive-area-chart.tsx
@@ -1,10 +1,12 @@
 import { useEffect, useId, useRef, useState } from 'react'
 import type { PointerEvent, ReactNode } from 'react'
+import { motion, useReducedMotion } from 'framer-motion'
 import { cn } from '../../lib/utils'
 
 // Adapted from EasyUI's Interactive Area Chart (MIT; see licenses/easyui.txt).
-// Keep original samples, time spacing and gaps instead of spline resampling or
-// morphing financial observations into values that were never recorded.
+// Retains the reference's smooth SVG curve, reveal and scrubbing treatment.
+// Readouts use original observations; bounded controls prevent visual overshoot
+// and every missing observation still breaks the line and fill.
 export type AreaChartPoint = { date: string; value: number | null; reference?: number | null }
 type Series = { label: string; color: string; dashed?: boolean; step?: boolean }
 type InteractiveAreaChartProps = {
@@ -12,6 +14,10 @@ type InteractiveAreaChartProps = {
   label: string
   formatValue: (value: number | null) => string
   color?: string
+  title?: string
+  controls?: ReactNode
+  showChange?: boolean
+  periodLabel?: string
   reference?: Series
   hidden?: boolean
   showReadout?: boolean
@@ -26,8 +32,9 @@ const finite = (value: number | null | undefined): value is number => value != n
 const shortDate = (date: string) => new Date(`${date}T00:00:00Z`).toLocaleDateString('en', { month: 'short', day: 'numeric', timeZone: 'UTC' })
 const fullDate = (date: string) => new Date(`${date}T00:00:00Z`).toLocaleDateString('en', { month: 'short', day: 'numeric', year: 'numeric', timeZone: 'UTC' })
 
-export function InteractiveAreaChart({ data, label, formatValue, color = 'hsl(var(--primary))', reference, hidden = false, showReadout = false, className, activeIndex, onInspect, renderTooltip }: InteractiveAreaChartProps) {
+export function InteractiveAreaChart({ data, label, formatValue, color = 'hsl(var(--foreground))', title, controls, showChange = false, periodLabel = 'in period', reference, hidden = false, showReadout = false, className, activeIndex, onInspect, renderTooltip }: InteractiveAreaChartProps) {
   const uid = useId().replaceAll(':', '')
+  const reduce = useReducedMotion()
   const wrapRef = useRef<HTMLDivElement>(null)
   const [size, setSize] = useState({ width: 640, height: 240 })
   const [selection, setSelection] = useState<{ data: AreaChartPoint[]; index: number } | null>(null)
@@ -56,7 +63,7 @@ export function InteractiveAreaChart({ data, label, formatValue, color = 'hsl(va
     onInspect?.(next)
   }
   const { width, height } = size
-  const pad = { top: 24, right: 12, bottom: 28, left: width < 400 ? 48 : 58 }
+  const pad = { top: 48, right: 12, bottom: 28, left: 48 }
   const bottom = height - pad.bottom
   const innerWidth = Math.max(1, width - pad.left - pad.right)
   const values = data.flatMap(point => reference ? [point.value, point.reference] : [point.value]).filter(finite)
@@ -69,7 +76,11 @@ export function InteractiveAreaChart({ data, label, formatValue, color = 'hsl(va
   const x = (i: number) => pad.left + (span > 0 ? (times[i] - start) / span : 0.5) * innerWidth
   const y = (value: number) => pad.top + (1 - (value - low) / (high - low)) * (bottom - pad.top)
   const ticks = [high, (high + low) / 2, low]
-  const tooltipWidth = Math.min(renderTooltip ? 280 : 200, width)
+  const tooltipWidth = Math.min(renderTooltip ? 280 : 164, width)
+  const tooltipLeft = inspected === null ? 0 : clamp(x(inspected) - tooltipWidth / 2, 0, Math.max(0, width - tooltipWidth))
+  const first = data[0]?.value
+  const change = finite(first) && first > 0 && finite(shown?.value) ? (shown.value - first) / first * 100 : null
+  const seriesKey = `${data[0]?.date}:${data.at(-1)?.date}:${data.length}`
   const labelCount = width < 400 ? 3 : 5
   const labels = [...new Set(Array.from({ length: labelCount }, (_, i) => Math.round(i / (labelCount - 1) * (data.length - 1))))]
 
@@ -79,9 +90,24 @@ export function InteractiveAreaChart({ data, label, formatValue, color = 'hsl(va
     const flush = () => {
       if (!segment.length) return
       const first = segment[0], last = segment[segment.length - 1]
-      const line = `M${x(first)} ${y(data[first][key]!)}` + segment.slice(1).map(i => step
-        ? ` H${x(i)} V${y(data[i][key]!)}`
-        : ` L${x(i)} ${y(data[i][key]!)}`).join('')
+      const line = `M${x(first)} ${y(data[first][key]!)}` + segment.slice(1).map((i, offset) => {
+        if (step) return ` H${x(i)} V${y(data[i][key]!)}`
+        const position = offset + 1
+        const before = segment[Math.max(0, position - 2)], previous = segment[position - 1]
+        const after = segment[Math.min(segment.length - 1, position + 1)]
+        const x1 = x(previous), x2 = x(i), y1 = y(data[previous][key]!), y2 = y(data[i][key]!)
+        const slope = (y2 - y1) / (x2 - x1 || 1)
+        const beforeSlope = before === previous ? slope : (y1 - y(data[before][key]!)) / (x1 - x(before) || 1)
+        const afterSlope = after === i ? slope : (y(data[after][key]!) - y2) / (x(after) - x2 || 1)
+        // Bound the smooth Bezier controls to this interval, so the curve has
+        // no invented peaks and stays horizontal at plateaus and turning points.
+        const tangent1 = beforeSlope * slope <= 0 ? 0 : (beforeSlope + slope) / 2
+        const tangent2 = afterSlope * slope <= 0 ? 0 : (afterSlope + slope) / 2
+        const third = (x2 - x1) / 3
+        const c1y = clamp(y1 + tangent1 * third, Math.min(y1, y2), Math.max(y1, y2))
+        const c2y = clamp(y2 - tangent2 * third, Math.min(y1, y2), Math.max(y1, y2))
+        return ` C${x1 + third} ${c1y} ${x2 - third} ${c2y} ${x2} ${y2}`
+      }).join('')
       segments.push({ line, area: `${line} L${x(last)} ${bottom} L${x(first)} ${bottom} Z`, single: segment.length === 1 ? first : null })
       segment = []
     }
@@ -99,15 +125,22 @@ export function InteractiveAreaChart({ data, label, formatValue, color = 'hsl(va
     inspect(nearest)
   }
 
-  if (hidden) return <div className={cn('flex h-60 items-center justify-center text-sm text-muted-foreground', className)}>Chart hidden for privacy</div>
+  if (hidden) return <><div className="flex flex-wrap items-start justify-between gap-3">{title && <h3 className="text-[13px] text-muted-foreground">{title}</h3>}{controls}</div><div className={cn('flex h-60 items-center justify-center text-sm text-muted-foreground', className)}>Chart hidden for privacy</div></>
   if (!data.length) return <div className={cn('flex h-60 items-center justify-center text-sm text-muted-foreground', className)}>No data in this period</div>
 
   return <div className="min-w-0">
-    {showReadout && <div className="mb-2 px-2 sm:px-0" aria-live="polite" aria-atomic="true">
-      <p className="text-2xl font-semibold tracking-tight tabular-nums sm:text-3xl">{formatValue(shown.value)}</p>
-      <p className="mt-1 text-xs text-muted-foreground">{fullDate(shown.date)}{inspected === null ? ' · latest in period' : ''}</p>
+    {showReadout && <div className="mb-4 flex flex-col items-start justify-between gap-3 min-[480px]:flex-row min-[480px]:gap-4">
+      <div className="min-w-0" aria-live="polite" aria-atomic="true">
+        {title && <h3 className="text-[13px] font-normal text-muted-foreground">{title}</h3>}
+        <p className="mt-0.5 text-2xl font-semibold tracking-tight tabular-nums sm:text-3xl">{formatValue(shown.value)}</p>
+        <p className="mt-1 text-xs tabular-nums sm:text-[13px]">
+          {showChange && change !== null && <span className={change >= 0 ? 'easyui-chart-positive' : 'easyui-chart-negative'}>{change > 0 ? '+' : ''}{change.toFixed(1)}% </span>}
+          <span className="text-muted-foreground">{inspected !== null ? fullDate(shown.date) : showChange ? `${periodLabel} · balance change` : `${fullDate(shown.date)} · latest in period`}</span>
+        </p>
+      </div>
+      {controls}
     </div>}
-    <div ref={wrapRef} className={cn('relative h-60 min-w-0', className)}>
+    <div ref={wrapRef} className={cn('relative h-[280px] min-w-0', className)}>
       <svg width="100%" height="100%" viewBox={`0 0 ${width} ${height}`} role="slider" tabIndex={0}
         aria-label={`${label}. Use arrow keys to inspect dates.`} aria-orientation="horizontal"
         aria-valuemin={0} aria-valuemax={data.length - 1} aria-valuenow={inspected ?? data.length - 1}
@@ -126,34 +159,34 @@ export function InteractiveAreaChart({ data, label, formatValue, color = 'hsl(va
           event.preventDefault()
           inspect(next)
         }}>
-        <defs><linearGradient id={`${uid}-fill`} x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stopColor={color} stopOpacity={0.2} /><stop offset="100%" stopColor={color} stopOpacity={0} /></linearGradient></defs>
+        <defs><clipPath id={`${uid}-clip`}><motion.rect key={seriesKey} x={0} y={0} height={height} initial={reduce ? false : { width: 0 }} animate={{ width }} transition={{ duration: reduce ? 0 : 1.1, ease: [0.77, 0, 0.175, 1] }} /></clipPath><linearGradient id={`${uid}-fill`} x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stopColor={color} stopOpacity={0.18} /><stop offset="100%" stopColor={color} stopOpacity={0} /></linearGradient></defs>
         <g aria-hidden="true">
           {ticks.map((value, i) => <g key={i}>
-            <line x1={pad.left} x2={width - pad.right} y1={y(value)} y2={y(value)} stroke="hsl(var(--border))" strokeOpacity={0.6} />
-            <text x={pad.left - 10} y={y(value)} textAnchor="end" dominantBaseline="middle" className="fill-muted-foreground text-[10px] tabular-nums">{Intl.NumberFormat('en', { notation: 'compact', maximumFractionDigits: 1 }).format(value)}</text>
+            <line x1={pad.left} x2={width - pad.right} y1={y(value)} y2={y(value)} stroke="hsl(var(--border))" strokeOpacity={0.55} />
+            <text x={pad.left - 10} y={y(value)} textAnchor="end" dominantBaseline="middle" className="fill-muted-foreground text-[11px] tabular-nums">{Intl.NumberFormat('en', { notation: 'compact', maximumFractionDigits: 1 }).format(value)}</text>
           </g>)}
-          {labels.map((i, j) => <text key={i} x={x(i)} y={height - 6} textAnchor={j === 0 ? 'start' : j === labels.length - 1 ? 'end' : 'middle'} className="fill-muted-foreground text-[10px]">{shortDate(data[i].date)}</text>)}
+          {labels.map((i, j) => <text key={i} x={x(i)} y={height - 6} textAnchor={j === 0 ? 'start' : j === labels.length - 1 ? 'end' : 'middle'} className="fill-muted-foreground text-[11px]">{shortDate(data[i].date)}</text>)}
           {reference && <g data-series="reference">{paths('reference', reference.step).map((path, i) => <g key={i}>
             <path d={path.line} fill="none" stroke={reference.color} strokeWidth={1.5} strokeDasharray={reference.dashed ? '6 3' : undefined} />
             {path.single !== null && <circle cx={x(path.single)} cy={y(data[path.single].reference!)} r={2} fill={reference.color} />}
           </g>)}</g>}
-          <g data-series="value">{paths('value').map((path, i) => <g key={i}>
+          <g data-series="value" clipPath={`url(#${uid}-clip)`}>{paths('value').map((path, i) => <g key={i}>
             <path d={path.area} fill={`url(#${uid}-fill)`} />
             <path d={path.line} fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
             {path.single !== null && <circle cx={x(path.single)} cy={y(data[path.single].value!)} r={3} fill={color} />}
           </g>)}</g>
-          {inspected !== null && <g pointerEvents="none">
+          {inspected !== null && <motion.g initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: reduce ? 0 : 0.15 }} pointerEvents="none">
             <line x1={x(inspected)} x2={x(inspected)} y1={pad.top} y2={bottom} stroke={color} strokeOpacity={0.3} strokeDasharray="3 3" />
             {finite(shown.value) && <circle cx={x(inspected)} cy={y(shown.value)} r={4.5} fill="hsl(var(--card))" stroke={color} strokeWidth={2} />}
-          </g>}
+          </motion.g>}
         </g>
       </svg>
-      {inspected !== null && <div className="pointer-events-none absolute top-0 z-10 max-w-full [&>div]:max-w-full" style={{ width: tooltipWidth, left: clamp(x(inspected) - tooltipWidth / 2, 0, Math.max(0, width - tooltipWidth)) }}>
-        {renderTooltip ? renderTooltip(inspected) : <div className="rounded-xl border border-border bg-card px-3 py-2 shadow-sm">
+      {inspected !== null && <motion.div className="pointer-events-none absolute top-0 z-10 max-w-full [&>div]:max-w-full" initial={{ opacity: 0, x: tooltipLeft }} animate={{ opacity: 1, x: tooltipLeft }} transition={reduce ? { duration: 0 } : { type: 'spring', stiffness: 520, damping: 42, mass: 0.6, opacity: { duration: 0.15 } }} style={{ width: tooltipWidth, left: 0 }}>
+        {renderTooltip ? renderTooltip(inspected) : <div className="rounded-lg border border-border bg-card px-2.5 py-1.5 shadow-sm">
           <p className="text-[11px] text-muted-foreground">{fullDate(shown.date)}</p>
-          <p className="text-sm font-semibold tabular-nums" style={{ color }}>{formatValue(shown.value)}</p>
+          <p className="text-sm font-medium tabular-nums" style={{ color }}>{formatValue(shown.value)}</p>
         </div>}
-      </div>}
+      </motion.div>}
     </div>
     {reference && <div className="mt-3 flex flex-wrap gap-x-5 gap-y-1 px-2 text-xs text-muted-foreground sm:px-0">
       <span className="inline-flex items-center gap-1.5"><span className="h-0.5 w-4" style={{ background: color }} />{label}</span>
diff --git a/client/src/components/investments-module/PortfolioHistoryChart.tsx b/client/src/components/investments-module/PortfolioHistoryChart.tsx
index f032fddc..233bbf27 100644
--- a/client/src/components/investments-module/PortfolioHistoryChart.tsx
+++ b/client/src/components/investments-module/PortfolioHistoryChart.tsx
@@ -1,6 +1,7 @@
 import {amount} from './overview'
 import {PortfolioHistoryTooltip} from './PortfolioHistoryTooltip'
 import {useState} from 'react'
+import {AreaChartRanges} from '../common/area-chart-ranges'
 import {InteractiveAreaChart} from '../common/interactive-area-chart'
 import type {usePortfolioHistory} from '../../hooks/usePortfolioHistory'
 const ranges=[['1m','1M'],['3m','3M'],['6m','6M'],['1y','1Y'],['ytd','YTD'],['all','All']] as const
@@ -9,20 +10,19 @@ export function PortfolioHistoryChart({history,hidden,currency,currentValue}:{hi
  const summary=data?.summary
  const money=(n:number|null|undefined)=>amount(n,currency,hidden)
  const percent=(n:number|null|undefined)=>hidden?'••••••':n==null?'Unavailable':`${n.toLocaleString(undefined,{maximumFractionDigits:2})}%`
+ const [showInvested,setShowInvested]=useState(false)
  const [selection,setSelection]=useState<{key:string;index:number}|null>(null)
  const key=`${range}:${currency}:${data?.as_of}`
  const selected=selection?.key===key?data?.points[selection.index]:undefined
  const displayedValue=selected?selected.value:currentValue!==undefined?currentValue:summary?.end_value
  const readDay=(index:number)=>setSelection({key,index})
  const known=data?.points.some(p=>p.value!==null)
- return <section aria-label="Portfolio history" className="flex min-w-0 flex-col rounded-2xl border border-border bg-card p-4 sm:p-5 space-y-3">
+ return <section aria-label="Portfolio history" className="easyui-area-card flex flex-col space-y-4">
   <div className="flex flex-wrap items-start justify-between gap-3">
-   <div className="min-w-0"><h2 className="text-[13px] font-medium text-muted-foreground">Portfolio value{selected?` · ${selected.date}`:''}</h2><p className="mt-1 break-words text-2xl font-semibold tracking-tight tabular-nums sm:text-[32px]">{money(displayedValue)}</p>
+   <div className="min-w-0"><h2 className="text-[13px] font-normal text-muted-foreground">Portfolio value{selected?` · ${selected.date}`:''}</h2><p className="mt-1 break-words text-2xl font-semibold tracking-tight tabular-nums sm:text-3xl">{money(displayedValue)}</p>
     <p className="mt-2 text-xs text-muted-foreground">Range gain <span className="font-semibold text-foreground">{money(summary?.gain)}</span> · <span>{percent(summary?.estimated_return_percent)} estimated return</span> · Excludes dividends</p>
    </div>
-   <div role="group" aria-label="Portfolio history range" className="flex max-w-full overflow-x-auto rounded-lg border border-border bg-background p-0.5">
-    {ranges.map(([value,label])=><button type="button" key={value} aria-pressed={range===value} onClick={()=>setRange(value)} className={`min-h-9 shrink-0 rounded-md px-2.5 text-xs ${range===value?'bg-secondary font-semibold':'text-muted-foreground'}`}>{label}</button>)}
-   </div>
+   <AreaChartRanges label="Portfolio history range" options={ranges} value={range} onChange={setRange}/>
   </div>
   {error&&<p role="alert" className="text-sm">{data?'Showing saved history. Refresh failed.':'Portfolio history could not be loaded.'} {history.errorMessage} <button onClick={refresh} className="text-primary underline">Retry history</button></p>}
   {loading&&<p role="status" className="text-xs text-muted-foreground">{data?'Refreshing history…':'Loading portfolio history…'}</p>}
@@ -30,10 +30,11 @@ export function PortfolioHistoryChart({history,hidden,currency,currentValue}:{hi
    {hidden?<div className="flex h-[220px] @min-[640px]:h-[300px] items-center justify-center text-muted-foreground">Chart hidden for privacy</div>:!data?<div className="flex h-[220px] @min-[640px]:h-[300px] items-center justify-center text-sm text-muted-foreground">{loading?'Loading daily values…':'History unavailable'}</div>:!known?<div className="flex h-[220px] @min-[640px]:h-[300px] items-center justify-center text-sm text-muted-foreground">No known portfolio values in this range.</div>:
     <InteractiveAreaChart key={key} data={data.points.map(point=>({date:point.date,value:point.value,reference:point.net_invested}))}
      label="Portfolio value" formatValue={money} className="h-[220px] @min-[640px]:h-[300px]"
-     reference={{label:'Net invested',color:'hsl(var(--muted-foreground))',dashed:true,step:true}}
+     reference={showInvested?{label:'Net invested',color:'hsl(var(--muted-foreground))',dashed:true,step:true}:undefined}
      activeIndex={selected?selection!.index:null} onInspect={index=>index===null?setSelection(null):readDay(index)}
      renderTooltip={index=><PortfolioHistoryTooltip point={data.points[index]} currency={currency}/>}/>}
   </div>
+  {!hidden&&data&&<div className="flex justify-end"><button type="button" aria-pressed={showInvested} onClick={()=>setShowInvested(previous=>!previous)} className="easyui-chart-control">Net invested</button></div>}
   {data&&<>
    <p className="text-[10px] leading-relaxed text-muted-foreground">{data.from} – {data.to} · {data.timezone} · read {new Date(data.as_of).toLocaleString()}{data.points.at(-1)?.provisional?' · today is provisional':''}</p>
   </>}
diff --git a/client/src/index.css b/client/src/index.css
index 42d75932..644dde25 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -300,3 +300,46 @@ button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
 }
+
+/* EasyUI area-chart surfaces use the reference's neutral palette locally. */
+.easyui-area-card {
+  --card: 0 0% 9.5%;
+  --foreground: 0 0% 96%;
+  --card-foreground: 0 0% 96%;
+  --primary: 0 0% 92%;
+  --primary-foreground: 0 0% 9%;
+  --muted-foreground: 0 0% 52%;
+  --border: 0 0% 17%;
+  --secondary: 0 0% 15%;
+  --background: 0 0% 7%;
+  --ring: 0 0% 60%;
+  min-width: 0;
+  padding: 24px;
+  border: 1px solid hsl(var(--border));
+  border-radius: 24px;
+  background: hsl(var(--card));
+  color: hsl(var(--foreground));
+}
+:root[data-color-mode='light'] .easyui-area-card {
+  --card: 0 0% 100%;
+  --foreground: 0 0% 9%;
+  --card-foreground: 0 0% 9%;
+  --primary: 0 0% 12%;
+  --primary-foreground: 0 0% 100%;
+  --muted-foreground: 0 0% 45%;
+  --border: 0 0% 89%;
+  --secondary: 0 0% 95%;
+  --background: 0 0% 98%;
+}
+.easyui-chart-ranges { display:flex; flex-shrink:0; align-self:flex-start; max-width:100%; overflow-x:auto; padding:2px; border-radius:999px; background:hsl(var(--background) / .55); }
+.easyui-chart-ranges button { position:relative; isolation:isolate; flex-shrink:0; padding:5px 12px; border-radius:999px; font-size:12px; font-weight:500; color:hsl(var(--muted-foreground)); }
+.easyui-chart-ranges button[aria-pressed='true'] { color:hsl(var(--foreground)); }
+.easyui-chart-pill { position:absolute; inset:0; z-index:-1; border-radius:999px; background:hsl(var(--secondary)); box-shadow:0 1px 3px #00000012; }
+.easyui-chart-control { padding:4px 8px; border-radius:999px; font-size:11px; color:hsl(var(--muted-foreground)); transition:background .15s,color .15s; }
+.easyui-chart-control:hover, .easyui-chart-control[aria-pressed='true'] { color:hsl(var(--foreground)); background:hsl(var(--secondary)); }
+.easyui-chart-control:disabled { cursor:default; opacity:.45; }
+.easyui-chart-positive { color:#6ee7b7; }
+.easyui-chart-negative { color:#fb7185; }
+:root[data-color-mode='light'] .easyui-chart-positive { color:#059669; }
+:root[data-color-mode='light'] .easyui-chart-negative { color:#e11d48; }
+@media (max-width:479px) { .easyui-area-card { padding:20px; } }
diff --git a/package-lock.json b/package-lock.json
index 485faf23..c741f308 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -53,6 +53,7 @@
       "dependencies": {
         "clsx": "^2.1.1",
         "date-fns": "^2.30.0",
+        "framer-motion": "^14.5.0",
         "lucide-react": "^0.554.0",
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
@@ -7265,6 +7266,29 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "14.5.0",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-14.5.0.tgz",
+      "integrity": "sha512-pXIj1m9JX//3XExUgQIpS0f5iWcjenO14ekdg9S++Rr0VzfnAaveoNzonigRarD/+AM3umTGS3K/RANGQJitCQ==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "14.5.0",
+        "motion-utils": "14.1.1",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fs-extra": {
       "version": "9.1.0",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
@@ -8970,6 +8994,21 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/motion-dom": {
+      "version": "14.5.0",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-14.5.0.tgz",
+      "integrity": "sha512-GAdnk1AgdtyrD3I09ZxEpV+Nt5QgwUsxN55qQV8mfk082dFQpcoT07wXkQAHRZjvZWUEBYhBVNeoXvtkYdL8jA==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "14.1.1"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "14.1.1",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-14.1.1.tgz",
+      "integrity": "sha512-3VvN5Uvf8B6qG+OfOui6Nht5EWp+vLuU3IqcAj7ItZGKqtmTjCebl5sGZF7/08gEHRnEl1AP/fIwbcEyVrcQGQ==",
+      "license": "MIT"
+    },
     "node_modules/mrmime": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz",
@@ -10715,7 +10754,6 @@
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "dev": true,
       "license": "0BSD"
     },
     "node_modules/type-check": {

From a86e187f80ffe9248ead629582f69ecbdaf1cd17 Mon Sep 17 00:00:00 2001
From: 31b4 <szilagyibence@szilagyibence.com>
Date: Wed, 21 Oct 2026 11:47:02 +0200
Subject: [PATCH 3/7] Show balance trend overlays by default

---
 .../components/analytics-module/NetWorthTrendChart.test.tsx | 6 ++++--
 .../src/components/analytics-module/NetWorthTrendChart.tsx  | 2 +-
 .../components/analytics-module/PerAccountTrendChart.tsx    | 2 +-
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/client/src/components/analytics-module/NetWorthTrendChart.test.tsx b/client/src/components/analytics-module/NetWorthTrendChart.test.tsx
index 46b9e98b..04d71840 100644
--- a/client/src/components/analytics-module/NetWorthTrendChart.test.tsx
+++ b/client/src/components/analytics-module/NetWorthTrendChart.test.tsx
@@ -36,11 +36,13 @@ const toggle = () => fireEvent.click(screen.getByRole('button', { name: /^(Compa
 describe('Cash Balance Trend comparison', () => {
   beforeEach(() => { state.privacyMode = 'visible'; state.tooltipDay = 2; state.points = [] })
 
-  it('keeps trend and comparison opt-in and labels both months', () => {
+  it('shows the trend by default, lets it be hidden, and keeps comparison opt-in', () => {
     renderChart()
+    expect(screen.getByRole('button', { name: 'Trend' })).toHaveAttribute('aria-pressed', 'true')
+    expect(document.querySelector('[data-series=reference] path')).toHaveAttribute('stroke-dasharray', '6 3')
+    fireEvent.click(screen.getByRole('button', { name: 'Trend' }))
     expect(document.querySelector('[data-series=reference]')).toBeNull()
     fireEvent.click(screen.getByRole('button', { name: 'Trend' }))
-    expect(document.querySelector('[data-series=reference] path')).toHaveAttribute('stroke-dasharray', '6 3')
     expect(screen.queryByTestId('series-previous')).not.toBeInTheDocument()
     toggle()
     expect(screen.getByRole('button', { name: 'Hide comparison' })).toHaveAttribute('aria-pressed', 'true')
diff --git a/client/src/components/analytics-module/NetWorthTrendChart.tsx b/client/src/components/analytics-module/NetWorthTrendChart.tsx
index 26da534e..f9c12c69 100644
--- a/client/src/components/analytics-module/NetWorthTrendChart.tsx
+++ b/client/src/components/analytics-module/NetWorthTrendChart.tsx
@@ -19,7 +19,7 @@ type NetWorthTrendChartProps = {
 export const NetWorthTrendChart = memo(function NetWorthTrendChart({ data, masterCurrency, title = 'Cash Balance Trend', controls, periodLabel, comparison, comparisonDisabledReason }: NetWorthTrendChartProps) {
   const { privacyMode } = usePrivacy()
   const [compare, setCompare] = useState(false)
-  const [showTrend, setShowTrend] = useState(false)
+  const [showTrend, setShowTrend] = useState(true)
   const reasonId = useId()
   const unavailableReason = comparisonDisabledReason || comparison?.unavailableReason
   const comparing = compare && comparison !== undefined && !unavailableReason
diff --git a/client/src/components/analytics-module/PerAccountTrendChart.tsx b/client/src/components/analytics-module/PerAccountTrendChart.tsx
index 274670b2..f3cd8a79 100644
--- a/client/src/components/analytics-module/PerAccountTrendChart.tsx
+++ b/client/src/components/analytics-module/PerAccountTrendChart.tsx
@@ -13,7 +13,7 @@ type PerAccountTrendChartProps = {
 
 export const PerAccountTrendChart = memo(function PerAccountTrendChart({ account, data, className }: PerAccountTrendChartProps) {
   const { privacyMode } = usePrivacy()
-  const [showTrend, setShowTrend] = useState(false)
+  const [showTrend, setShowTrend] = useState(true)
 
   return <section className={cn('easyui-area-card', className)} aria-label={`${account.name} trend`}>
     {data.length > 0 ? <InteractiveAreaChart

From b4e8b3a3e9d12e324c75a696d4bc522a8e21c324 Mon Sep 17 00:00:00 2001
From: 31b4 <szilagyibence@szilagyibence.com>
Date: Wed, 21 Oct 2026 12:03:41 +0200
Subject: [PATCH 4/7] Add native monochrome palette and theme-aware charts

---
 CHANGELOG.md                                  |   4 +-
 README.md                                     |   2 +-
 client/src/App.tsx                            |   2 +-
 .../CategoryBreakdownChart.tsx                |   2 +-
 .../analytics-module/IncomeBreakdownChart.tsx |   2 +-
 .../analytics-module/MoneyMapChart.tsx        |   2 +-
 .../analytics-module/WidgetConfigPanel.tsx    |   4 +-
 .../components/analytics-module/constants.ts  |  19 +-
 .../common/interactive-area-chart.tsx         |   2 +-
 .../dashboard-module/AccountList.tsx          |   2 +-
 .../AccountTotalsSwitches.tsx                 |   2 +-
 .../dashboard-module/SplitLinesEditor.tsx     |   2 +-
 .../dashboard-module/TransactionCalendar.tsx  |   8 +-
 .../components/CategoriesCard.tsx             |   8 +-
 .../components/NavigationCard.tsx             |   4 +-
 .../components/ThemeCard.test.tsx             |  27 +++
 .../settings-module/components/ThemeCard.tsx  |  48 +++--
 client/src/context/AlertContext.tsx           |  10 +-
 client/src/context/ThemeContext.test.tsx      |  23 ++-
 client/src/context/ThemeContext.tsx           |  34 +++-
 client/src/index.css                          | 177 +++++++++++++++---
 21 files changed, 283 insertions(+), 101 deletions(-)
 create mode 100644 client/src/components/settings-module/components/ThemeCard.test.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c8f8158e..7328d8d2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,7 +6,9 @@ Intermediate package/UI version bumps are grouped under the next published GitHu
 
 ## Unreleased
 
-- Refreshed cash-balance, account and portfolio history charts with EasyUI’s neutral cards, smooth monochrome area curves, animated reveals and range pills. Dated value readouts and keyboard/touch inspection preserve native currencies, history gaps and privacy.
+- Monochrome now uses a dedicated neutral light/dark palette for surfaces, controls, statuses and charts instead of a page-wide filter. Area charts follow the selected palette, with blue accents in Original and neutral accents in Monochrome.
+
+- Refreshed cash-balance, account and portfolio history charts with EasyUI-style cards, smooth area curves, animated reveals and range pills. Dated value readouts and keyboard/touch inspection preserve native currencies, history gaps and privacy.
 
 ## v4.0 — 2026-10-20
 
diff --git a/README.md b/README.md
index e63b5580..869d229c 100644
--- a/README.md
+++ b/README.md
@@ -109,7 +109,7 @@ The API and MCP Worker share the deployed D1 database but have separate authenti
 
 ### Accounts, search, and archive
 
-The Accounts page groups cash/bank accounts, investments, and archived accounts. Desktop navigation includes collapsible Cash/Investments shortcuts showing all accounts sorted by converted value, independent account scrolling, compact balances, and Search everything; mobile uses bottom navigation, More, and a header search button. The sidebar and Settings expose light/dark mode independently of the existing color themes.
+The Accounts page groups cash/bank accounts, investments, and archived accounts. Desktop navigation includes collapsible Cash/Investments shortcuts showing all accounts sorted by converted value, independent account scrolling, compact balances, and Search everything; mobile uses bottom navigation, More, and a header search button. The sidebar and Settings expose light/dark mode independently of the color theme. Original uses blue accents; Monochrome has a native neutral palette for surfaces, controls, statuses and data charts in both display modes. Area charts inherit the selected palette. Red Filter retains its page filter.
 
 Initial Dashboard, Analytics, and Investments reads use text-free skeletons shaped like their widgets, with a left-to-right gradient shimmer. Analytics respects saved widget visibility; reduced-motion preferences disable the shimmer. Once data has loaded, background refreshes keep the page visible with a small fixed refresh indicator. Investment portfolios and the first page of saved forecast reports stay in memory across navigation and refresh when reopened; a browser reload starts a new session. Failed refreshes retain the previous complete snapshot with retry feedback.
 
diff --git a/client/src/App.tsx b/client/src/App.tsx
index 9c7fbdcc..24a43c68 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -148,7 +148,7 @@ function App() {
     <aside className="finance-sidebar fixed inset-y-0 left-0 z-40 hidden flex-col border-r border-border bg-card px-3.5 py-5 lg:flex overflow-hidden">
       <div className="mb-5 flex shrink-0 items-center gap-2">
         <NavLink to="/dashboard" className="flex min-w-0 flex-1 items-center gap-2.5 px-1.5" aria-label="Finance home">
-          <span className="flex h-8 w-8 items-center justify-center rounded-[9px] bg-primary text-white"><Wallet className="h-[17px] w-[17px]" /></span>
+          <span className="flex h-8 w-8 items-center justify-center rounded-[9px] bg-primary text-primary-foreground"><Wallet className="h-[17px] w-[17px]" /></span>
           <span><span className="block text-[15px] font-semibold">Finance</span><span className="block text-[11px] text-muted-foreground">Self-hosted</span></span>
         </NavLink>
         {privacyControl}
diff --git a/client/src/components/analytics-module/CategoryBreakdownChart.tsx b/client/src/components/analytics-module/CategoryBreakdownChart.tsx
index 89d92071..e31e41d0 100644
--- a/client/src/components/analytics-module/CategoryBreakdownChart.tsx
+++ b/client/src/components/analytics-module/CategoryBreakdownChart.tsx
@@ -40,7 +40,7 @@ export const CategoryBreakdownChart = memo(function CategoryBreakdownChart({ dat
                     cy="50%"
                     labelLine={false}
                     outerRadius={80}
-                    fill="#8884d8"
+                    fill={COLORS[0]}
                     dataKey="value"
                   >
                     {data.map((_entry, index) => (
diff --git a/client/src/components/analytics-module/IncomeBreakdownChart.tsx b/client/src/components/analytics-module/IncomeBreakdownChart.tsx
index 1f8b45bf..717a38f9 100644
--- a/client/src/components/analytics-module/IncomeBreakdownChart.tsx
+++ b/client/src/components/analytics-module/IncomeBreakdownChart.tsx
@@ -40,7 +40,7 @@ export const IncomeBreakdownChart = memo(function IncomeBreakdownChart({ data, m
                     cy="50%"
                     labelLine={false}
                     outerRadius={80}
-                    fill="#8884d8"
+                    fill={COLORS[0]}
                     dataKey="value"
                   >
                     {data.map((_entry, index) => (
diff --git a/client/src/components/analytics-module/MoneyMapChart.tsx b/client/src/components/analytics-module/MoneyMapChart.tsx
index 473d935d..b639da14 100644
--- a/client/src/components/analytics-module/MoneyMapChart.tsx
+++ b/client/src/components/analytics-module/MoneyMapChart.tsx
@@ -66,7 +66,7 @@ const COLORS: Record<FlowKind, string> = {
   'cash-flow': 'hsl(var(--primary))',
   expense: 'hsl(var(--destructive))',
   surplus: 'hsl(var(--success))',
-  deficit: 'hsl(38 92% 50%)',
+  deficit: 'hsl(var(--warning))',
 }
 
 function consolidateCategories(data: CategoryData[], maxItems: number) {
diff --git a/client/src/components/analytics-module/WidgetConfigPanel.tsx b/client/src/components/analytics-module/WidgetConfigPanel.tsx
index a0c9ebae..911ebed3 100644
--- a/client/src/components/analytics-module/WidgetConfigPanel.tsx
+++ b/client/src/components/analytics-module/WidgetConfigPanel.tsx
@@ -36,8 +36,8 @@ function Toggle({ checked, onChange }: { checked: boolean; onChange: () => void
       }`}
     >
       <span
-        className={`pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow-lg ring-0 transition-transform duration-200 ${
-          checked ? 'translate-x-5' : 'translate-x-0'
+        className={`pointer-events-none inline-block h-5 w-5 rounded-full shadow-lg ring-0 transition-transform duration-200 ${
+          checked ? 'translate-x-5 bg-primary-foreground' : 'translate-x-0 bg-foreground'
         }`}
       />
     </button>
diff --git a/client/src/components/analytics-module/constants.ts b/client/src/components/analytics-module/constants.ts
index 217f4af6..06f8a0bf 100644
--- a/client/src/components/analytics-module/constants.ts
+++ b/client/src/components/analytics-module/constants.ts
@@ -1,17 +1,2 @@
-export const COLORS = [
-  '#8b5cf6', // violet
-  '#f59e0b', // amber
-  '#06b6d4', // cyan
-  '#ec4899', // pink
-  '#84cc16', // lime
-  '#ef4444', // red
-  '#3b82f6', // blue
-  '#14b8a6', // teal
-  '#f97316', // orange
-  '#a855f7', // purple
-  '#5189D8', // primary blue
-  '#eab308', // yellow
-  '#0ea5e9', // sky
-  '#d946ef', // fuchsia
-  '#64748b', // slate
-]
+// CSS palette inputs keep Original colors and provide neutral Monochrome tones.
+export const COLORS = Array.from({ length: 15 }, (_, index) => `var(--chart-category-${index + 1})`)
diff --git a/client/src/components/common/interactive-area-chart.tsx b/client/src/components/common/interactive-area-chart.tsx
index 40950abe..0bd13128 100644
--- a/client/src/components/common/interactive-area-chart.tsx
+++ b/client/src/components/common/interactive-area-chart.tsx
@@ -32,7 +32,7 @@ const finite = (value: number | null | undefined): value is number => value != n
 const shortDate = (date: string) => new Date(`${date}T00:00:00Z`).toLocaleDateString('en', { month: 'short', day: 'numeric', timeZone: 'UTC' })
 const fullDate = (date: string) => new Date(`${date}T00:00:00Z`).toLocaleDateString('en', { month: 'short', day: 'numeric', year: 'numeric', timeZone: 'UTC' })
 
-export function InteractiveAreaChart({ data, label, formatValue, color = 'hsl(var(--foreground))', title, controls, showChange = false, periodLabel = 'in period', reference, hidden = false, showReadout = false, className, activeIndex, onInspect, renderTooltip }: InteractiveAreaChartProps) {
+export function InteractiveAreaChart({ data, label, formatValue, color = 'hsl(var(--primary))', title, controls, showChange = false, periodLabel = 'in period', reference, hidden = false, showReadout = false, className, activeIndex, onInspect, renderTooltip }: InteractiveAreaChartProps) {
   const uid = useId().replaceAll(':', '')
   const reduce = useReducedMotion()
   const wrapRef = useRef<HTMLDivElement>(null)
diff --git a/client/src/components/dashboard-module/AccountList.tsx b/client/src/components/dashboard-module/AccountList.tsx
index 19b0366d..bdd6e78b 100644
--- a/client/src/components/dashboard-module/AccountList.tsx
+++ b/client/src/components/dashboard-module/AccountList.tsx
@@ -745,7 +745,7 @@ export function AccountList({ accounts, onAccountAdded, loading, manage = false,
                             ? 'bg-gradient-to-br from-gray-600 to-gray-700 shadow-gray-600/30'
                             : 'bg-gradient-to-br from-primary to-primary/80 shadow-primary/25'
                         }`}>
-                          <Wallet className="h-4 w-4 sm:h-6 sm:w-6 text-white" />
+                          <Wallet className={`h-4 w-4 sm:h-6 sm:w-6 ${isExcluded ? 'text-white' : 'text-primary-foreground'}`} />
                         </div>
                         <div className="flex-1 min-w-0">
                           <div className="flex items-center gap-1.5 sm:gap-2 mb-0.5 sm:mb-1">
diff --git a/client/src/components/dashboard-module/AccountTotalsSwitches.tsx b/client/src/components/dashboard-module/AccountTotalsSwitches.tsx
index 9d91c86e..665f6441 100644
--- a/client/src/components/dashboard-module/AccountTotalsSwitches.tsx
+++ b/client/src/components/dashboard-module/AccountTotalsSwitches.tsx
@@ -24,7 +24,7 @@ export function AccountTotalsSwitches({ value, onChange }: {
           <span className="mt-0.5 block text-xs text-muted-foreground">{toggle.description}</span>
         </span>
         <span aria-hidden="true" className={cn('relative h-5 w-9 shrink-0 rounded-full transition-colors', value[toggle.key] ? 'bg-border' : 'bg-primary')}>
-          <span className={cn('absolute top-0.5 h-4 w-4 rounded-full bg-white shadow-sm transition-[left]', value[toggle.key] ? 'left-0.5' : 'left-[18px]')} />
+          <span className={cn('absolute top-0.5 h-4 w-4 rounded-full shadow-sm transition-[left]', value[toggle.key] ? 'left-0.5 bg-foreground' : 'left-[18px] bg-primary-foreground')} />
         </span>
       </button>)}
     </div>
diff --git a/client/src/components/dashboard-module/SplitLinesEditor.tsx b/client/src/components/dashboard-module/SplitLinesEditor.tsx
index d1d9b403..a14371bd 100644
--- a/client/src/components/dashboard-module/SplitLinesEditor.tsx
+++ b/client/src/components/dashboard-module/SplitLinesEditor.tsx
@@ -18,7 +18,7 @@ import {
 type Category = { id: string; name: string; icon?: string; type: 'income' | 'expense' }
 
 // Data colours for the allocation bar and line markers; they identify lines, not meaning.
-const LINE_COLORS = ['#5189D8', '#9B8AF0', '#5CC7C0', '#F0A35C', '#E58AB0', '#8A9BB4']
+const LINE_COLORS = Array.from({ length: 6 }, (_, index) => `var(--split-line-${index + 1})`)
 
 interface SplitLinesEditorProps {
   lines: SplitLineDraft[]
diff --git a/client/src/components/dashboard-module/TransactionCalendar.tsx b/client/src/components/dashboard-module/TransactionCalendar.tsx
index 8d5ce766..86dd6490 100644
--- a/client/src/components/dashboard-module/TransactionCalendar.tsx
+++ b/client/src/components/dashboard-module/TransactionCalendar.tsx
@@ -274,7 +274,7 @@ export function TransactionCalendar({
               {selectedTotals.net === null && <span>Day totals unavailable: missing exchange rates.</span>}
               {(selectedTotals.income ?? 0) > 0 && <SummaryPill label="Income" value={selectedTotals.income!} hidden={privacyMode === 'hidden'} tone="text-success bg-success/10" />}
               {(selectedTotals.expense ?? 0) > 0 && <SummaryPill label="Expenses" value={selectedTotals.expense!} hidden={privacyMode === 'hidden'} tone="text-destructive bg-destructive/10" />}
-              {(selectedTotals.transfer ?? 0) > 0 && <SummaryPill label="Transfer" value={selectedTotals.transfer!} hidden={privacyMode === 'hidden'} tone="text-blue-500 bg-blue-500/10" />}
+              {(selectedTotals.transfer ?? 0) > 0 && <SummaryPill label="Transfer" value={selectedTotals.transfer!} hidden={privacyMode === 'hidden'} tone="text-primary bg-primary/10" />}
             </div>
           </div>
           <div className="max-h-[22rem] divide-y divide-border/60 overflow-y-auto">
@@ -282,9 +282,9 @@ export function TransactionCalendar({
               const transfer = !!tx.linked_transaction_id
               const label = transfer ? `Transfer to ${tx.relatedTx ? getAccountName(tx.relatedTx.account_id) : 'account'}` : (tx.description || getCategoryName(tx.category_id))
               return <div key={tx.id} className="flex items-center gap-2.5 p-3">
-                <div className={`flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg text-sm ${transfer ? 'bg-blue-500/10 text-blue-500' : tx.amount >= 0 ? 'bg-success/10' : 'bg-secondary'}`}>{transfer ? <ArrowRightLeft className="h-4 w-4" /> : getCategoryIcon(tx.category_id)}</div>
+                <div className={`flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg text-sm ${transfer ? 'bg-primary/10 text-primary' : tx.amount >= 0 ? 'bg-success/10' : 'bg-secondary'}`}>{transfer ? <ArrowRightLeft className="h-4 w-4" /> : getCategoryIcon(tx.category_id)}</div>
                 <div className="min-w-0 flex-1"><div className="truncate text-xs font-medium">{label}</div><div className="truncate text-[10px] text-muted-foreground">{getAccountName(tx.account_id)} · {transfer ? 'Transfer' : getCategoryName(tx.category_id)}</div></div>
-                <div className={`text-right text-xs font-bold ${transfer ? 'text-blue-500' : tx.amount >= 0 ? 'text-success' : 'text-destructive'}`}>{transfer ? '' : tx.amount >= 0 ? '+' : '−'}{nativeAmount(tx.amount, tx.account_id, true)}</div>
+                <div className={`text-right text-xs font-bold ${transfer ? 'text-primary' : tx.amount >= 0 ? 'text-success' : 'text-destructive'}`}>{transfer ? '' : tx.amount >= 0 ? '+' : '−'}{nativeAmount(tx.amount, tx.account_id, true)}</div>
               </div>
             }) : <div className="px-3 py-10 text-center text-xs text-muted-foreground">No transactions on this day.</div>}
           </div>
@@ -338,7 +338,7 @@ function CalendarTransactionRow({
 }) {
   const isTransfer = !!transaction.linked_transaction_id
   const isIncome = transaction.amount >= 0 && !isTransfer
-  const tone = isTransfer ? 'text-blue-500 bg-blue-500/10' : isIncome ? 'text-success bg-success/10' : 'text-destructive bg-destructive/10'
+  const tone = isTransfer ? 'text-primary bg-primary/10' : isIncome ? 'text-success bg-success/10' : 'text-destructive bg-destructive/10'
   const sign = isTransfer ? '' : isIncome ? '+' : '−'
 
   return (
diff --git a/client/src/components/settings-module/components/CategoriesCard.tsx b/client/src/components/settings-module/components/CategoriesCard.tsx
index 38770465..d8989263 100644
--- a/client/src/components/settings-module/components/CategoriesCard.tsx
+++ b/client/src/components/settings-module/components/CategoriesCard.tsx
@@ -310,7 +310,7 @@ export function CategoriesCard() {
 
         <div className="space-y-3">
           <div className="flex items-center justify-between">
-            <h3 className="text-sm font-medium text-green-600">Income Categories</h3>
+            <h3 className="text-sm font-medium text-success">Income Categories</h3>
             {!isLoadingCategories && incomeCategories.length > 0 && (
               <Button
                 variant="ghost"
@@ -374,7 +374,7 @@ export function CategoriesCard() {
                       size="sm"
                       onClick={() => handleUpdateCategory(category.id)}
                       disabled={isUpdatingCategory}
-                      className="text-green-600 hover:text-green-700 hover:bg-green-50"
+                      className="text-success hover:text-success hover:bg-success/10"
                     >
                       <Check className="h-4 w-4" />
                     </Button>
@@ -424,7 +424,7 @@ export function CategoriesCard() {
 
         <div className="space-y-3">
           <div className="flex items-center justify-between">
-            <h3 className="text-sm font-medium text-red-600">Expense Categories</h3>
+            <h3 className="text-sm font-medium text-destructive">Expense Categories</h3>
             {!isLoadingCategories && expenseCategories.length > 0 && (
               <Button
                 variant="ghost"
@@ -488,7 +488,7 @@ export function CategoriesCard() {
                       size="sm"
                       onClick={() => handleUpdateCategory(category.id)}
                       disabled={isUpdatingCategory}
-                      className="text-green-600 hover:text-green-700 hover:bg-green-50"
+                      className="text-success hover:text-success hover:bg-success/10"
                     >
                       <Check className="h-4 w-4" />
                     </Button>
diff --git a/client/src/components/settings-module/components/NavigationCard.tsx b/client/src/components/settings-module/components/NavigationCard.tsx
index fc4deee6..854a589c 100644
--- a/client/src/components/settings-module/components/NavigationCard.tsx
+++ b/client/src/components/settings-module/components/NavigationCard.tsx
@@ -98,8 +98,8 @@ export function NavigationCard() {
                 aria-label={`Toggle ${item.label}`}
               >
                 <span
-                  className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
-                    menuVisibility[item.key as MenuKey] ? 'translate-x-5' : 'translate-x-0'
+                  className={`pointer-events-none inline-block h-5 w-5 transform rounded-full shadow ring-0 transition duration-200 ease-in-out ${
+                    menuVisibility[item.key as MenuKey] ? 'translate-x-5 bg-primary-foreground' : 'translate-x-0 bg-foreground'
                   }`}
                 />
               </button>
diff --git a/client/src/components/settings-module/components/ThemeCard.test.tsx b/client/src/components/settings-module/components/ThemeCard.test.tsx
new file mode 100644
index 00000000..9c052000
--- /dev/null
+++ b/client/src/components/settings-module/components/ThemeCard.test.tsx
@@ -0,0 +1,27 @@
+import { cleanup, fireEvent, render, screen, within } from '@testing-library/react'
+import { afterEach, beforeEach, expect, it } from 'vitest'
+import { ThemeProvider } from '../../../context/ThemeContext'
+import { ThemeCard } from './ThemeCard'
+
+beforeEach(() => localStorage.clear())
+afterEach(cleanup)
+
+it('previews each palette independently, switches display modes, and gives the monochrome selection a contrasting checkmark', () => {
+  render(<ThemeProvider><ThemeCard /></ThemeProvider>)
+  const mono = screen.getByRole('button', { name: /Monochrome/ })
+  const original = screen.getByRole('button', { name: /Original/ })
+  fireEvent.click(mono)
+  expect(mono).toHaveAttribute('aria-pressed', 'true')
+  expect(original).toHaveAttribute('aria-pressed', 'false')
+  expect(document.documentElement.style.getPropertyValue('--app-color-filter')).toBe('none')
+  expect(within(mono).queryByText('GRAYSCALE')).not.toBeInTheDocument()
+  expect(mono.querySelector('svg')).toHaveStyle({ color: '#171717' })
+  expect(mono.querySelector('[style*="background-color: rgb(10, 10, 10)"]')).toHaveStyle({ filter: 'none' })
+  // The other theme's preview remains blue, since Mono does not filter the page.
+  expect(original.querySelector('[style*="background-color: rgb(81, 137, 216)"]')).toBeInTheDocument()
+  fireEvent.click(screen.getByRole('button', { name: 'light', exact: true }))
+  expect(document.documentElement).toHaveAttribute('data-color-mode', 'light')
+  expect(mono).toHaveAttribute('aria-pressed', 'true')
+  expect(mono.querySelector('svg')).toHaveStyle({ color: '#ffffff' })
+  expect(mono.querySelector('[style*="background-color: rgb(247, 247, 247)"]')).toBeInTheDocument()
+})
diff --git a/client/src/components/settings-module/components/ThemeCard.tsx b/client/src/components/settings-module/components/ThemeCard.tsx
index 54bda850..992cdd0b 100644
--- a/client/src/components/settings-module/components/ThemeCard.tsx
+++ b/client/src/components/settings-module/components/ThemeCard.tsx
@@ -27,20 +27,25 @@ export function ThemeCard() {
           </div>
         </div>
         <div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
-          {THEMES.map((t) => (
-            <ThemeSwatch
-              key={t.id}
-              themeId={t.id}
-              name={t.name}
-              description={t.description}
-              primaryColor={t.primaryColor}
-              bgColor={t.bgColor}
-              cardColor={t.cardColor}
-              previewFilter={t.cssFilter}
-              isSelected={theme === t.id}
-              onSelect={setTheme}
-            />
-          ))}
+          {THEMES.map((t) => {
+            const preview = colorMode === 'light' ? t.lightPreview : t
+            return (
+              <ThemeSwatch
+                key={t.id}
+                themeId={t.id}
+                name={t.name}
+                description={t.description}
+                primaryColor={preview.primaryColor}
+                bgColor={preview.bgColor}
+                cardColor={preview.cardColor}
+                foregroundColor={preview.foregroundColor}
+                primaryForegroundColor={preview.primaryForegroundColor}
+                previewFilter={t.cssFilter}
+                isSelected={theme === t.id}
+                onSelect={setTheme}
+              />
+            )
+          })}
         </div>
       </CardContent>
     </Card>
@@ -54,13 +59,14 @@ interface ThemeSwatchProps {
   primaryColor: string
   bgColor: string
   cardColor: string
+  foregroundColor: string
+  primaryForegroundColor: string
   previewFilter?: string
   isSelected: boolean
   onSelect: (id: ThemeId) => void
 }
 
 const FILTER_LABELS: Partial<Record<ThemeId, string>> = {
-  mono: 'GRAYSCALE',
   redfilter: 'RED FILTER',
 }
 
@@ -71,6 +77,8 @@ function ThemeSwatch({
   primaryColor,
   bgColor,
   cardColor,
+  foregroundColor,
+  primaryForegroundColor,
   previewFilter,
   isSelected,
   onSelect,
@@ -79,6 +87,8 @@ function ThemeSwatch({
 
   return (
     <button
+      type="button"
+      aria-pressed={isSelected}
       onClick={() => onSelect(themeId)}
       className={`relative flex flex-col gap-2 rounded-xl border-2 p-3 text-left transition-all hover:scale-[1.02] focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 ${
         isSelected
@@ -86,7 +96,7 @@ function ThemeSwatch({
           : 'border-border bg-secondary/20 hover:border-border/80 hover:bg-secondary/40'
       }`}
     >
-      {/* Mini preview — filter applied here so it shows correctly from any active theme */}
+      {/* Each swatch previews its own palette, independent of the selected theme. */}
       <div
         className="h-16 w-full rounded-lg overflow-hidden relative"
         style={{
@@ -102,14 +112,14 @@ function ThemeSwatch({
             <div className="h-1.5 w-1.5 rounded-full" style={{ backgroundColor: primaryColor }} />
             <div className="h-1 w-8 rounded-full opacity-40" style={{ backgroundColor: primaryColor }} />
           </div>
-          <div className="h-1 w-12 rounded-full mb-1 opacity-20" style={{ backgroundColor: '#ffffff' }} />
+          <div className="h-1 w-12 rounded-full mb-1 opacity-20" style={{ backgroundColor: foregroundColor }} />
           <div className="h-2 w-10 rounded-full" style={{ backgroundColor: primaryColor, opacity: 0.9 }} />
         </div>
 
         {/* Filter badge inside preview */}
         {filterLabel && (
           <div className="absolute bottom-1 right-1.5 text-[7px] font-bold tracking-wider opacity-70"
-            style={{ color: '#ffffff' }}>
+            style={{ color: foregroundColor }}>
             {filterLabel}
           </div>
         )}
@@ -125,7 +135,7 @@ function ThemeSwatch({
           className="absolute top-2 right-2 h-4 w-4 rounded-full flex items-center justify-center"
           style={{ backgroundColor: primaryColor }}
         >
-          <svg className="h-2.5 w-2.5 text-white" fill="none" viewBox="0 0 12 12" stroke="currentColor" strokeWidth={2.5}>
+          <svg className="h-2.5 w-2.5" style={{ color: primaryForegroundColor }} fill="none" viewBox="0 0 12 12" stroke="currentColor" strokeWidth={2.5}>
             <path strokeLinecap="round" strokeLinejoin="round" d="M2 6l3 3 5-5" />
           </svg>
         </div>
diff --git a/client/src/context/AlertContext.tsx b/client/src/context/AlertContext.tsx
index bd467e27..8e1051db 100644
--- a/client/src/context/AlertContext.tsx
+++ b/client/src/context/AlertContext.tsx
@@ -124,15 +124,15 @@ export function AlertProvider({ children }: { children: ReactNode }) {
   const getAlertIcon = (type: AlertType) => {
     switch (type) {
       case 'success':
-        return <CheckCircle className="h-5 w-5 text-green-500" />
+        return <CheckCircle className="h-5 w-5 text-success" />
       case 'error':
-        return <XCircle className="h-5 w-5 text-red-500" />
+        return <XCircle className="h-5 w-5 text-destructive" />
       case 'warning':
-        return <AlertCircle className="h-5 w-5 text-yellow-500" />
+        return <AlertCircle className="h-5 w-5 text-[hsl(var(--warning))]" />
       case 'confirm':
-        return <AlertCircle className="h-5 w-5 text-blue-500" />
+        return <AlertCircle className="h-5 w-5 text-primary" />
       default:
-        return <Info className="h-5 w-5 text-blue-500" />
+        return <Info className="h-5 w-5 text-primary" />
     }
   }
 
diff --git a/client/src/context/ThemeContext.test.tsx b/client/src/context/ThemeContext.test.tsx
index a8ccccb1..6e0965e8 100644
--- a/client/src/context/ThemeContext.test.tsx
+++ b/client/src/context/ThemeContext.test.tsx
@@ -4,7 +4,7 @@ import { ThemeProvider, useTheme } from './ThemeContext'
 
 function Controls() {
   const { colorMode, setColorMode, theme, setTheme } = useTheme()
-  return <><p>{colorMode} {theme}</p><button onClick={() => setColorMode(colorMode === 'dark' ? 'light' : 'dark')}>Change mode</button><button onClick={() => setTheme('mono')}>Monochrome</button></>
+  return <><p>{colorMode} {theme}</p><button onClick={() => setColorMode(colorMode === 'dark' ? 'light' : 'dark')}>Change mode</button><button onClick={() => setTheme('mono')}>Monochrome</button><button onClick={() => setTheme('redfilter')}>Red Filter</button><button onClick={() => setTheme('emerald')}>Original</button></>
 }
 beforeEach(() => localStorage.clear())
 afterEach(cleanup)
@@ -14,13 +14,32 @@ describe('independent display mode and color theme', () => {
     fireEvent.click(screen.getByRole('button', { name: 'Monochrome' }))
     fireEvent.click(screen.getByRole('button', { name: 'Change mode' }))
     expect(document.documentElement).toHaveAttribute('data-color-mode', 'light')
-    expect(document.documentElement.style.getPropertyValue('--app-color-filter')).toBe('grayscale(1)')
+    expect(document.documentElement.style.getPropertyValue('--app-color-filter')).toBe('none')
+    expect(document.documentElement).toHaveClass('theme-mono')
     expect(document.documentElement.style.filter).toBe('')
     view.unmount()
     render(<ThemeProvider><Controls /></ThemeProvider>)
     expect(screen.getByText('light mono')).toBeInTheDocument()
     expect(localStorage.getItem('finance_color_mode')).toBe('light')
   })
+  it('replaces the old saved monochrome filter with the native palette and clears Red Filter when switching', () => {
+    localStorage.setItem('finance_theme', 'mono')
+    document.documentElement.style.setProperty('--app-color-filter', 'grayscale(1)')
+    render(<ThemeProvider><Controls /></ThemeProvider>)
+    expect(screen.getByText('dark mono')).toBeInTheDocument()
+    expect(document.documentElement).toHaveClass('theme-mono')
+    expect(document.documentElement.style.getPropertyValue('--app-color-filter')).toBe('none')
+    fireEvent.click(screen.getByRole('button', { name: 'Red Filter' }))
+    expect(document.documentElement).toHaveClass('theme-redfilter')
+    expect(document.documentElement).not.toHaveClass('theme-mono')
+    expect(document.documentElement.style.getPropertyValue('--app-color-filter')).toContain('sepia(1)')
+    fireEvent.click(screen.getByRole('button', { name: 'Monochrome' }))
+    expect(document.documentElement.style.getPropertyValue('--app-color-filter')).toBe('none')
+    expect(document.documentElement).not.toHaveClass('theme-redfilter')
+    fireEvent.click(screen.getByRole('button', { name: 'Original' }))
+    expect(document.documentElement).not.toHaveClass('theme-mono')
+    expect(document.documentElement.style.getPropertyValue('--app-color-filter')).toBe('none')
+  })
   it('defaults to dark for unknown saved modes', () => {
     localStorage.setItem('finance_color_mode', 'invalid')
     render(<ThemeProvider><Controls /></ThemeProvider>)
diff --git a/client/src/context/ThemeContext.tsx b/client/src/context/ThemeContext.tsx
index 6f62ff5e..ac77b9e1 100644
--- a/client/src/context/ThemeContext.tsx
+++ b/client/src/context/ThemeContext.tsx
@@ -3,14 +3,20 @@ import { createContext, useContext, useEffect, useState, type ReactNode } from '
 export type ColorMode = 'dark' | 'light'
 export type ThemeId = 'emerald' | 'mono' | 'redfilter'
 
-export interface Theme {
-  id: ThemeId
-  name: string
-  description: string
+type ThemePreview = {
   primaryColor: string
   bgColor: string
   cardColor: string
-  /** CSS filter applied to the whole page via the html element */
+  foregroundColor: string
+  primaryForegroundColor: string
+}
+
+export interface Theme extends ThemePreview {
+  id: ThemeId
+  name: string
+  description: string
+  lightPreview: ThemePreview
+  /** Optional filter shared by the app and its portalled controls. */
   cssFilter?: string
 }
 
@@ -22,15 +28,20 @@ export const THEMES: Theme[] = [
     primaryColor: '#5189D8',
     bgColor: '#000610',
     cardColor: '#010E21',
+    foregroundColor: '#f8fafc',
+    primaryForegroundColor: '#ffffff',
+    lightPreview: { primaryColor: '#3b70bf', bgColor: '#f4f6fa', cardColor: '#ffffff', foregroundColor: '#0b1c32', primaryForegroundColor: '#ffffff' },
   },
   {
     id: 'mono',
     name: 'Monochrome',
-    description: 'Pure black, white & gray — zero color',
-    primaryColor: '#5189D8',
-    bgColor: '#000610',
-    cardColor: '#010E21',
-    cssFilter: 'grayscale(1)',
+    description: 'Black, white and gray surfaces and accents',
+    primaryColor: '#ebebeb',
+    bgColor: '#0a0a0a',
+    cardColor: '#181818',
+    foregroundColor: '#f5f5f5',
+    primaryForegroundColor: '#171717',
+    lightPreview: { primaryColor: '#1f1f1f', bgColor: '#f7f7f7', cardColor: '#ffffff', foregroundColor: '#171717', primaryForegroundColor: '#ffffff' },
   },
   {
     id: 'redfilter',
@@ -39,6 +50,9 @@ export const THEMES: Theme[] = [
     primaryColor: '#5189D8',
     bgColor: '#000610',
     cardColor: '#010E21',
+    foregroundColor: '#f8fafc',
+    primaryForegroundColor: '#ffffff',
+    lightPreview: { primaryColor: '#3b70bf', bgColor: '#f4f6fa', cardColor: '#ffffff', foregroundColor: '#0b1c32', primaryForegroundColor: '#ffffff' },
     cssFilter: 'sepia(1) saturate(6) hue-rotate(315deg) brightness(0.75)',
   },
 ]
diff --git a/client/src/index.css b/client/src/index.css
index 644dde25..b4a2b20b 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -301,18 +301,8 @@ button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
   *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
 }
 
-/* EasyUI area-chart surfaces use the reference's neutral palette locally. */
+/* Chart geometry is shared; colors come from the selected app palette. */
 .easyui-area-card {
-  --card: 0 0% 9.5%;
-  --foreground: 0 0% 96%;
-  --card-foreground: 0 0% 96%;
-  --primary: 0 0% 92%;
-  --primary-foreground: 0 0% 9%;
-  --muted-foreground: 0 0% 52%;
-  --border: 0 0% 17%;
-  --secondary: 0 0% 15%;
-  --background: 0 0% 7%;
-  --ring: 0 0% 60%;
   min-width: 0;
   padding: 24px;
   border: 1px solid hsl(var(--border));
@@ -320,17 +310,6 @@ button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
   background: hsl(var(--card));
   color: hsl(var(--foreground));
 }
-:root[data-color-mode='light'] .easyui-area-card {
-  --card: 0 0% 100%;
-  --foreground: 0 0% 9%;
-  --card-foreground: 0 0% 9%;
-  --primary: 0 0% 12%;
-  --primary-foreground: 0 0% 100%;
-  --muted-foreground: 0 0% 45%;
-  --border: 0 0% 89%;
-  --secondary: 0 0% 95%;
-  --background: 0 0% 98%;
-}
 .easyui-chart-ranges { display:flex; flex-shrink:0; align-self:flex-start; max-width:100%; overflow-x:auto; padding:2px; border-radius:999px; background:hsl(var(--background) / .55); }
 .easyui-chart-ranges button { position:relative; isolation:isolate; flex-shrink:0; padding:5px 12px; border-radius:999px; font-size:12px; font-weight:500; color:hsl(var(--muted-foreground)); }
 .easyui-chart-ranges button[aria-pressed='true'] { color:hsl(var(--foreground)); }
@@ -338,8 +317,154 @@ button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
 .easyui-chart-control { padding:4px 8px; border-radius:999px; font-size:11px; color:hsl(var(--muted-foreground)); transition:background .15s,color .15s; }
 .easyui-chart-control:hover, .easyui-chart-control[aria-pressed='true'] { color:hsl(var(--foreground)); background:hsl(var(--secondary)); }
 .easyui-chart-control:disabled { cursor:default; opacity:.45; }
-.easyui-chart-positive { color:#6ee7b7; }
-.easyui-chart-negative { color:#fb7185; }
-:root[data-color-mode='light'] .easyui-chart-positive { color:#059669; }
-:root[data-color-mode='light'] .easyui-chart-negative { color:#e11d48; }
+.easyui-chart-positive { color:hsl(var(--success)); }
+.easyui-chart-negative { color:hsl(var(--destructive)); }
 @media (max-width:479px) { .easyui-area-card { padding:20px; } }
+
+/* Data colors are theme inputs, including SVG charts and split allocations. */
+:root {
+  accent-color: hsl(var(--primary));
+  --warning: 38 92% 50%;
+  --chart-category-1: #8b5cf6;
+  --chart-category-2: #f59e0b;
+  --chart-category-3: #06b6d4;
+  --chart-category-4: #ec4899;
+  --chart-category-5: #84cc16;
+  --chart-category-6: #ef4444;
+  --chart-category-7: #3b82f6;
+  --chart-category-8: #14b8a6;
+  --chart-category-9: #f97316;
+  --chart-category-10: #a855f7;
+  --chart-category-11: #5189D8;
+  --chart-category-12: #eab308;
+  --chart-category-13: #0ea5e9;
+  --chart-category-14: #d946ef;
+  --chart-category-15: #64748b;
+  --split-line-1: #5189D8;
+  --split-line-2: #9B8AF0;
+  --split-line-3: #5CC7C0;
+  --split-line-4: #F0A35C;
+  --split-line-5: #E58AB0;
+  --split-line-6: #8A9BB4;
+}
+
+/* A native neutral palette. No filter is used, including on portalled controls. */
+:root.theme-mono {
+  --canvas: 0 0% 4%;
+  --background: 0 0% 7%;
+  --foreground: 0 0% 96%;
+  --card: 0 0% 9.5%;
+  --card-foreground: 0 0% 96%;
+  --popover: 0 0% 9.5%;
+  --popover-foreground: 0 0% 96%;
+  --primary: 0 0% 92%;
+  --primary-foreground: 0 0% 9%;
+  --secondary: 0 0% 15%;
+  --secondary-foreground: 0 0% 96%;
+  --muted: 0 0% 12%;
+  --muted-foreground: 0 0% 65%;
+  --accent: 0 0% 15%;
+  --accent-foreground: 0 0% 96%;
+  --border: 0 0% 17%;
+  --input: 0 0% 12%;
+  --ring: 0 0% 65%;
+  --destructive: 0 0% 67%;
+  --destructive-foreground: 0 0% 9%;
+  --success: 0 0% 88%;
+  --success-foreground: 0 0% 9%;
+  --forecast: 0 0% 58%;
+  --cash-flow-income: 0 0% 78%;
+  --warning: 0 0% 72%;
+  --chart-category-1: #e5e5e5;
+  --chart-category-2: #858585;
+  --chart-category-3: #b8b8b8;
+  --chart-category-4: #737373;
+  --chart-category-5: #d4d4d4;
+  --chart-category-6: #999999;
+  --chart-category-7: #f5f5f5;
+  --chart-category-8: #808080;
+  --chart-category-9: #c4c4c4;
+  --chart-category-10: #6b6b6b;
+  --chart-category-11: #dedede;
+  --chart-category-12: #a3a3a3;
+  --chart-category-13: #ededed;
+  --chart-category-14: #909090;
+  --chart-category-15: #adadad;
+  --split-line-1: var(--chart-category-1);
+  --split-line-2: var(--chart-category-2);
+  --split-line-3: var(--chart-category-3);
+  --split-line-4: var(--chart-category-4);
+  --split-line-5: var(--chart-category-5);
+  --split-line-6: var(--chart-category-6);
+
+  /* Legacy utility accents participate in the palette instead of being filtered. */
+  --color-amber-300: var(--color-neutral-300);
+  --color-amber-400: var(--color-neutral-400);
+  --color-amber-500: var(--color-neutral-500);
+  --color-amber-600: var(--color-neutral-600);
+  --color-amber-700: var(--color-neutral-700);
+  --color-blue-400: var(--color-neutral-400);
+  --color-blue-500: var(--color-neutral-500);
+  --color-blue-600: var(--color-neutral-600);
+  --color-green-50: var(--color-neutral-50);
+  --color-green-400: var(--color-neutral-400);
+  --color-green-500: var(--color-neutral-500);
+  --color-green-600: var(--color-neutral-600);
+  --color-green-700: var(--color-neutral-700);
+  --color-orange-300: var(--color-neutral-300);
+  --color-orange-500: var(--color-neutral-500);
+  --color-orange-600: var(--color-neutral-600);
+  --color-orange-700: var(--color-neutral-700);
+  --color-purple-500: var(--color-neutral-500);
+  --color-red-400: var(--color-neutral-400);
+  --color-red-500: var(--color-neutral-500);
+  --color-red-600: var(--color-neutral-600);
+  --color-violet-300: var(--color-neutral-300);
+  --color-violet-400: var(--color-neutral-400);
+  --color-violet-500: var(--color-neutral-500);
+  --color-violet-600: var(--color-neutral-600);
+  --color-yellow-500: var(--color-neutral-500);
+}
+:root.theme-mono[data-color-mode='light'] {
+  --canvas: 0 0% 97%;
+  --background: 0 0% 98%;
+  --foreground: 0 0% 9%;
+  --card: 0 0% 100%;
+  --card-foreground: 0 0% 9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 0 0% 9%;
+  --primary: 0 0% 12%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 0 0% 95%;
+  --secondary-foreground: 0 0% 12%;
+  --muted: 0 0% 95%;
+  --muted-foreground: 0 0% 45%;
+  --accent: 0 0% 95%;
+  --accent-foreground: 0 0% 12%;
+  --border: 0 0% 89%;
+  --input: 0 0% 98%;
+  --ring: 0 0% 45%;
+  --destructive: 0 0% 40%;
+  --destructive-foreground: 0 0% 100%;
+  --success: 0 0% 24%;
+  --success-foreground: 0 0% 100%;
+  --forecast: 0 0% 40%;
+  --color-violet-400: var(--color-neutral-600);
+  --cash-flow-income: 0 0% 24%;
+  --warning: 0 0% 35%;
+  --chart-category-1: #262626;
+  --chart-category-2: #737373;
+  --chart-category-3: #525252;
+  --chart-category-4: #8a8a8a;
+  --chart-category-5: #404040;
+  --chart-category-6: #666666;
+  --chart-category-7: #171717;
+  --chart-category-8: #595959;
+  --chart-category-9: #888888;
+  --chart-category-10: #454545;
+  --chart-category-11: #707070;
+  --chart-category-12: #333333;
+  --chart-category-13: #7d7d7d;
+  --chart-category-14: #4b4b4b;
+  --chart-category-15: #949494;
+}

From e741f44980a0d1b68609acd3b0fe4e8852554d6c Mon Sep 17 00:00:00 2001
From: 31b4 <szilagyibence@szilagyibence.com>
Date: Thu, 22 Oct 2026 09:02:34 +0200
Subject: [PATCH 5/7] Replace Red Filter with a native red palette

---
 CHANGELOG.md                                  |   2 +-
 README.md                                     |   2 +-
 .../components/analytics-module/constants.ts  |   2 +-
 .../components/ThemeCard.test.tsx             |  17 ++-
 .../settings-module/components/ThemeCard.tsx  |  18 ---
 client/src/context/ThemeContext.test.tsx      |  21 ++-
 client/src/context/ThemeContext.tsx           |  22 ++-
 client/src/index.css                          | 129 ++++++++++++++++++
 8 files changed, 176 insertions(+), 37 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7328d8d2..b141748f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,7 +6,7 @@ Intermediate package/UI version bumps are grouped under the next published GitHu
 
 ## Unreleased
 
-- Monochrome now uses a dedicated neutral light/dark palette for surfaces, controls, statuses and charts instead of a page-wide filter. Area charts follow the selected palette, with blue accents in Original and neutral accents in Monochrome.
+- Monochrome now uses a dedicated neutral light/dark palette for surfaces, controls, statuses and charts instead of a page-wide filter. Area charts follow the selected palette, with blue accents in Original and neutral accents in Monochrome. Red Filter also replaces its page filter with native red surfaces, controls, statuses and charts in light/dark modes.
 
 - Refreshed cash-balance, account and portfolio history charts with EasyUI-style cards, smooth area curves, animated reveals and range pills. Dated value readouts and keyboard/touch inspection preserve native currencies, history gaps and privacy.
 
diff --git a/README.md b/README.md
index 869d229c..f6c09aac 100644
--- a/README.md
+++ b/README.md
@@ -109,7 +109,7 @@ The API and MCP Worker share the deployed D1 database but have separate authenti
 
 ### Accounts, search, and archive
 
-The Accounts page groups cash/bank accounts, investments, and archived accounts. Desktop navigation includes collapsible Cash/Investments shortcuts showing all accounts sorted by converted value, independent account scrolling, compact balances, and Search everything; mobile uses bottom navigation, More, and a header search button. The sidebar and Settings expose light/dark mode independently of the color theme. Original uses blue accents; Monochrome has a native neutral palette for surfaces, controls, statuses and data charts in both display modes. Area charts inherit the selected palette. Red Filter retains its page filter.
+The Accounts page groups cash/bank accounts, investments, and archived accounts. Desktop navigation includes collapsible Cash/Investments shortcuts showing all accounts sorted by converted value, independent account scrolling, compact balances, and Search everything; mobile uses bottom navigation, More, and a header search button. The sidebar and Settings expose light/dark mode independently of the color theme. Original uses blue accents; Monochrome has a native neutral palette for surfaces, controls, statuses and data charts in both display modes. Area charts inherit the selected palette. Red Filter also uses a native palette, with deep red surfaces in dark mode, warm pale surfaces in light mode, and matching red controls, statuses and charts. Neither palette uses a page filter.
 
 Initial Dashboard, Analytics, and Investments reads use text-free skeletons shaped like their widgets, with a left-to-right gradient shimmer. Analytics respects saved widget visibility; reduced-motion preferences disable the shimmer. Once data has loaded, background refreshes keep the page visible with a small fixed refresh indicator. Investment portfolios and the first page of saved forecast reports stay in memory across navigation and refresh when reopened; a browser reload starts a new session. Failed refreshes retain the previous complete snapshot with retry feedback.
 
diff --git a/client/src/components/analytics-module/constants.ts b/client/src/components/analytics-module/constants.ts
index 06f8a0bf..fc63e915 100644
--- a/client/src/components/analytics-module/constants.ts
+++ b/client/src/components/analytics-module/constants.ts
@@ -1,2 +1,2 @@
-// CSS palette inputs keep Original colors and provide neutral Monochrome tones.
+// CSS palette inputs keep Original colors and provide native Monochrome and Red Filter tones.
 export const COLORS = Array.from({ length: 15 }, (_, index) => `var(--chart-category-${index + 1})`)
diff --git a/client/src/components/settings-module/components/ThemeCard.test.tsx b/client/src/components/settings-module/components/ThemeCard.test.tsx
index 9c052000..70c8cff1 100644
--- a/client/src/components/settings-module/components/ThemeCard.test.tsx
+++ b/client/src/components/settings-module/components/ThemeCard.test.tsx
@@ -16,7 +16,7 @@ it('previews each palette independently, switches display modes, and gives the m
   expect(document.documentElement.style.getPropertyValue('--app-color-filter')).toBe('none')
   expect(within(mono).queryByText('GRAYSCALE')).not.toBeInTheDocument()
   expect(mono.querySelector('svg')).toHaveStyle({ color: '#171717' })
-  expect(mono.querySelector('[style*="background-color: rgb(10, 10, 10)"]')).toHaveStyle({ filter: 'none' })
+  expect(mono.querySelector('[style*="background-color: rgb(10, 10, 10)"]')).toBeInTheDocument()
   // The other theme's preview remains blue, since Mono does not filter the page.
   expect(original.querySelector('[style*="background-color: rgb(81, 137, 216)"]')).toBeInTheDocument()
   fireEvent.click(screen.getByRole('button', { name: 'light', exact: true }))
@@ -25,3 +25,18 @@ it('previews each palette independently, switches display modes, and gives the m
   expect(mono.querySelector('svg')).toHaveStyle({ color: '#ffffff' })
   expect(mono.querySelector('[style*="background-color: rgb(247, 247, 247)"]')).toBeInTheDocument()
 })
+
+it('previews the native red palette in both display modes without a filter', () => {
+  render(<ThemeProvider><ThemeCard /></ThemeProvider>)
+  const red = screen.getByRole('button', { name: /Red Filter/ })
+  fireEvent.click(red)
+  expect(red).toHaveAttribute('aria-pressed', 'true')
+  expect(red.querySelector('[style*="background-color: rgb(17, 7, 7)"]')).toBeInTheDocument()
+  expect(red.querySelector('[style*="filter:"]')).not.toBeInTheDocument()
+  expect(red.querySelector('svg')).toHaveStyle({ color: '#280a0a' })
+  fireEvent.click(screen.getByRole('button', { name: 'light', exact: true }))
+  expect(red).toHaveAttribute('aria-pressed', 'true')
+  expect(red.querySelector('[style*="background-color: rgb(255, 245, 245)"]')).toBeInTheDocument()
+  expect(red.querySelector('svg')).toHaveStyle({ color: '#fffafa' })
+  expect(document.documentElement.style.getPropertyValue('--app-color-filter')).toBe('none')
+})
diff --git a/client/src/components/settings-module/components/ThemeCard.tsx b/client/src/components/settings-module/components/ThemeCard.tsx
index 992cdd0b..cdc18f78 100644
--- a/client/src/components/settings-module/components/ThemeCard.tsx
+++ b/client/src/components/settings-module/components/ThemeCard.tsx
@@ -40,7 +40,6 @@ export function ThemeCard() {
                 cardColor={preview.cardColor}
                 foregroundColor={preview.foregroundColor}
                 primaryForegroundColor={preview.primaryForegroundColor}
-                previewFilter={t.cssFilter}
                 isSelected={theme === t.id}
                 onSelect={setTheme}
               />
@@ -61,15 +60,10 @@ interface ThemeSwatchProps {
   cardColor: string
   foregroundColor: string
   primaryForegroundColor: string
-  previewFilter?: string
   isSelected: boolean
   onSelect: (id: ThemeId) => void
 }
 
-const FILTER_LABELS: Partial<Record<ThemeId, string>> = {
-  redfilter: 'RED FILTER',
-}
-
 function ThemeSwatch({
   themeId,
   name,
@@ -79,12 +73,9 @@ function ThemeSwatch({
   cardColor,
   foregroundColor,
   primaryForegroundColor,
-  previewFilter,
   isSelected,
   onSelect,
 }: ThemeSwatchProps) {
-  const filterLabel = FILTER_LABELS[themeId]
-
   return (
     <button
       type="button"
@@ -101,7 +92,6 @@ function ThemeSwatch({
         className="h-16 w-full rounded-lg overflow-hidden relative"
         style={{
           backgroundColor: bgColor,
-          filter: previewFilter ?? 'none',
         }}
       >
         <div
@@ -115,14 +105,6 @@ function ThemeSwatch({
           <div className="h-1 w-12 rounded-full mb-1 opacity-20" style={{ backgroundColor: foregroundColor }} />
           <div className="h-2 w-10 rounded-full" style={{ backgroundColor: primaryColor, opacity: 0.9 }} />
         </div>
-
-        {/* Filter badge inside preview */}
-        {filterLabel && (
-          <div className="absolute bottom-1 right-1.5 text-[7px] font-bold tracking-wider opacity-70"
-            style={{ color: foregroundColor }}>
-            {filterLabel}
-          </div>
-        )}
       </div>
 
       <div>
diff --git a/client/src/context/ThemeContext.test.tsx b/client/src/context/ThemeContext.test.tsx
index 6e0965e8..6430f947 100644
--- a/client/src/context/ThemeContext.test.tsx
+++ b/client/src/context/ThemeContext.test.tsx
@@ -22,7 +22,7 @@ describe('independent display mode and color theme', () => {
     expect(screen.getByText('light mono')).toBeInTheDocument()
     expect(localStorage.getItem('finance_color_mode')).toBe('light')
   })
-  it('replaces the old saved monochrome filter with the native palette and clears Red Filter when switching', () => {
+  it('replaces the old saved monochrome filter and switches native palettes without filters', () => {
     localStorage.setItem('finance_theme', 'mono')
     document.documentElement.style.setProperty('--app-color-filter', 'grayscale(1)')
     render(<ThemeProvider><Controls /></ThemeProvider>)
@@ -32,7 +32,7 @@ describe('independent display mode and color theme', () => {
     fireEvent.click(screen.getByRole('button', { name: 'Red Filter' }))
     expect(document.documentElement).toHaveClass('theme-redfilter')
     expect(document.documentElement).not.toHaveClass('theme-mono')
-    expect(document.documentElement.style.getPropertyValue('--app-color-filter')).toContain('sepia(1)')
+    expect(document.documentElement.style.getPropertyValue('--app-color-filter')).toBe('none')
     fireEvent.click(screen.getByRole('button', { name: 'Monochrome' }))
     expect(document.documentElement.style.getPropertyValue('--app-color-filter')).toBe('none')
     expect(document.documentElement).not.toHaveClass('theme-redfilter')
@@ -40,6 +40,23 @@ describe('independent display mode and color theme', () => {
     expect(document.documentElement).not.toHaveClass('theme-mono')
     expect(document.documentElement.style.getPropertyValue('--app-color-filter')).toBe('none')
   })
+  it('restores a saved Red Filter as a native palette in either display mode', () => {
+    localStorage.setItem('finance_theme', 'redfilter')
+    localStorage.setItem('finance_color_mode', 'light')
+    document.documentElement.style.filter = 'sepia(1)'
+    document.documentElement.style.setProperty('--app-color-filter', 'sepia(1) saturate(6) hue-rotate(315deg) brightness(0.75)')
+    const view = render(<ThemeProvider><Controls /></ThemeProvider>)
+    expect(screen.getByText('light redfilter')).toBeInTheDocument()
+    expect(document.documentElement).toHaveClass('theme-redfilter')
+    expect(document.documentElement.style.filter).toBe('')
+    expect(document.documentElement.style.getPropertyValue('--app-color-filter')).toBe('none')
+    fireEvent.click(screen.getByRole('button', { name: 'Change mode' }))
+    view.unmount()
+    render(<ThemeProvider><Controls /></ThemeProvider>)
+    expect(screen.getByText('dark redfilter')).toBeInTheDocument()
+    expect(document.documentElement).toHaveClass('theme-redfilter')
+    expect(document.documentElement.style.getPropertyValue('--app-color-filter')).toBe('none')
+  })
   it('defaults to dark for unknown saved modes', () => {
     localStorage.setItem('finance_color_mode', 'invalid')
     render(<ThemeProvider><Controls /></ThemeProvider>)
diff --git a/client/src/context/ThemeContext.tsx b/client/src/context/ThemeContext.tsx
index ac77b9e1..e5594426 100644
--- a/client/src/context/ThemeContext.tsx
+++ b/client/src/context/ThemeContext.tsx
@@ -16,8 +16,6 @@ export interface Theme extends ThemePreview {
   name: string
   description: string
   lightPreview: ThemePreview
-  /** Optional filter shared by the app and its portalled controls. */
-  cssFilter?: string
 }
 
 export const THEMES: Theme[] = [
@@ -46,14 +44,13 @@ export const THEMES: Theme[] = [
   {
     id: 'redfilter',
     name: 'Red Filter',
-    description: 'Blue-light blocking — all hues shifted to red',
-    primaryColor: '#5189D8',
-    bgColor: '#000610',
-    cardColor: '#010E21',
-    foregroundColor: '#f8fafc',
-    primaryForegroundColor: '#ffffff',
-    lightPreview: { primaryColor: '#3b70bf', bgColor: '#f4f6fa', cardColor: '#ffffff', foregroundColor: '#0b1c32', primaryForegroundColor: '#ffffff' },
-    cssFilter: 'sepia(1) saturate(6) hue-rotate(315deg) brightness(0.75)',
+    description: 'Deep red surfaces and warm red accents',
+    primaryColor: '#ff7575',
+    bgColor: '#110707',
+    cardColor: '#231010',
+    foregroundColor: '#ffe6e6',
+    primaryForegroundColor: '#280a0a',
+    lightPreview: { primaryColor: '#b91c1c', bgColor: '#fff5f5', cardColor: '#fffafa', foregroundColor: '#3b1414', primaryForegroundColor: '#fffafa' },
   },
 ]
 
@@ -95,9 +92,8 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
       html.classList.add(`theme-${theme}`)
     }
 
-    // Apply CSS filter for filter-based themes
-    const activeTheme = THEMES.find(t => t.id === theme)
-    html.style.setProperty('--app-color-filter', activeTheme?.cssFilter || 'none')
+    // Clear legacy page filters when restoring saved Monochrome/Red Filter preferences.
+    html.style.setProperty('--app-color-filter', 'none')
   }, [theme])
 
   const setTheme = (newTheme: ThemeId) => {
diff --git a/client/src/index.css b/client/src/index.css
index b4a2b20b..48661afe 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -468,3 +468,132 @@ button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
   --chart-category-14: #4b4b4b;
   --chart-category-15: #949494;
 }
+
+/* Native red palette: surfaces, portalled controls and charts share red tones. */
+:root.theme-redfilter {
+  --canvas: 0 42% 4.7%;
+  --background: 0 40% 6%;
+  --foreground: 0 100% 95%;
+  --card: 0 37% 10%;
+  --card-foreground: 0 100% 95%;
+  --popover: 0 37% 10%;
+  --popover-foreground: 0 100% 95%;
+  --primary: 0 100% 73%;
+  --primary-foreground: 0 60% 10%;
+  --secondary: 0 35% 16%;
+  --secondary-foreground: 0 100% 95%;
+  --muted: 0 30% 13%;
+  --muted-foreground: 0 30% 68%;
+  --accent: 0 35% 16%;
+  --accent-foreground: 0 100% 95%;
+  --border: 0 32% 21%;
+  --input: 0 30% 13%;
+  --ring: 0 100% 73%;
+  --destructive: 0 94% 68%;
+  --destructive-foreground: 0 60% 10%;
+  --success: 0 72% 85%;
+  --success-foreground: 0 60% 10%;
+  --forecast: 0 42% 66%;
+  --cash-flow-income: 0 72% 85%;
+  --warning: 0 95% 79%;
+  --red-accent-50: hsl(0 100% 97%);
+  --red-accent-300: hsl(0 90% 85%);
+  --red-accent-400: hsl(0 94% 75%);
+  --red-accent-500: hsl(0 85% 65%);
+  --red-accent-600: hsl(0 75% 55%);
+  --red-accent-700: hsl(0 70% 43%);
+  --chart-category-1: #ffb3b3;
+  --chart-category-2: #b95a5a;
+  --chart-category-3: #eb8585;
+  --chart-category-4: #9e6161;
+  --chart-category-5: #ffd1d1;
+  --chart-category-6: #cc7373;
+  --chart-category-7: #ffe5e5;
+  --chart-category-8: #a94b4b;
+  --chart-category-9: #e4a2a2;
+  --chart-category-10: #ac7777;
+  --chart-category-11: #ff9292;
+  --chart-category-12: #d58e8e;
+  --chart-category-13: #f7c2c2;
+  --chart-category-14: #c06363;
+  --chart-category-15: #e0b0b0;
+  --split-line-1: var(--chart-category-1);
+  --split-line-2: var(--chart-category-2);
+  --split-line-3: var(--chart-category-3);
+  --split-line-4: var(--chart-category-4);
+  --split-line-5: var(--chart-category-5);
+  --split-line-6: var(--chart-category-6);
+  --color-amber-300: var(--red-accent-300);
+  --color-amber-400: var(--red-accent-400);
+  --color-amber-500: var(--red-accent-500);
+  --color-amber-600: var(--red-accent-600);
+  --color-amber-700: var(--red-accent-700);
+  --color-blue-400: var(--red-accent-400);
+  --color-blue-500: var(--red-accent-500);
+  --color-blue-600: var(--red-accent-600);
+  --color-green-50: var(--red-accent-50);
+  --color-green-400: var(--red-accent-400);
+  --color-green-500: var(--red-accent-500);
+  --color-green-600: var(--red-accent-600);
+  --color-green-700: var(--red-accent-700);
+  --color-orange-300: var(--red-accent-300);
+  --color-orange-500: var(--red-accent-500);
+  --color-orange-600: var(--red-accent-600);
+  --color-orange-700: var(--red-accent-700);
+  --color-purple-500: var(--red-accent-500);
+  --color-red-400: var(--red-accent-400);
+  --color-red-500: var(--red-accent-500);
+  --color-red-600: var(--red-accent-600);
+  --color-violet-300: var(--red-accent-300);
+  --color-violet-400: var(--red-accent-400);
+  --color-violet-500: var(--red-accent-500);
+  --color-violet-600: var(--red-accent-600);
+  --color-yellow-500: var(--red-accent-500);
+}
+:root.theme-redfilter[data-color-mode='light'] {
+  --canvas: 0 100% 98%;
+  --background: 0 100% 98%;
+  --foreground: 0 49% 15.5%;
+  --card: 0 100% 99%;
+  --card-foreground: 0 49% 15.5%;
+  --popover: 0 100% 99%;
+  --popover-foreground: 0 49% 15.5%;
+  --primary: 0 74% 42%;
+  --primary-foreground: 0 100% 99%;
+  --secondary: 0 75% 95%;
+  --secondary-foreground: 0 49% 20%;
+  --muted: 0 60% 95%;
+  --muted-foreground: 0 26% 42%;
+  --accent: 0 75% 95%;
+  --accent-foreground: 0 49% 20%;
+  --border: 0 45% 88%;
+  --input: 0 100% 98%;
+  --ring: 0 74% 42%;
+  --destructive: 0 80% 40%;
+  --destructive-foreground: 0 100% 99%;
+  --success: 0 45% 32%;
+  --success-foreground: 0 100% 99%;
+  --forecast: 0 35% 43%;
+  --cash-flow-income: 0 45% 32%;
+  --warning: 0 60% 38%;
+  --red-accent-300: hsl(0 65% 72%);
+  --red-accent-400: hsl(0 60% 42%);
+  --red-accent-500: hsl(0 70% 43%);
+  --red-accent-600: hsl(0 75% 36%);
+  --red-accent-700: hsl(0 70% 29%);
+  --chart-category-1: #b91c1c;
+  --chart-category-2: #a65b5b;
+  --chart-category-3: #d14d4d;
+  --chart-category-4: #8c4444;
+  --chart-category-5: #761b1b;
+  --chart-category-6: #bf7373;
+  --chart-category-7: #571717;
+  --chart-category-8: #b83d3d;
+  --chart-category-9: #974f4f;
+  --chart-category-10: #c76565;
+  --chart-category-11: #902929;
+  --chart-category-12: #a97676;
+  --chart-category-13: #6b3535;
+  --chart-category-14: #d17f7f;
+  --chart-category-15: #ad3e3e;
+}

From 138a2cd2d54f999669a9b5e7a0273a69c2035a6c Mon Sep 17 00:00:00 2001
From: 31b4 <szilagyibence@szilagyibence.com>
Date: Thu, 22 Oct 2026 09:10:36 +0200
Subject: [PATCH 6/7] Preserve meaningful financial colors in Monochrome

---
 CHANGELOG.md                                  |  2 +-
 README.md                                     |  2 +-
 .../components/analytics-module/constants.ts  |  2 +-
 client/src/context/ThemeContext.tsx           |  2 +-
 client/src/index.css                          | 93 +++----------------
 5 files changed, 19 insertions(+), 82 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b141748f..cb9d8275 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,7 +6,7 @@ Intermediate package/UI version bumps are grouped under the next published GitHu
 
 ## Unreleased
 
-- Monochrome now uses a dedicated neutral light/dark palette for surfaces, controls, statuses and charts instead of a page-wide filter. Area charts follow the selected palette, with blue accents in Original and neutral accents in Monochrome. Red Filter also replaces its page filter with native red surfaces, controls, statuses and charts in light/dark modes.
+- Monochrome now uses a dedicated neutral light/dark palette for surfaces, controls and primary balance charts instead of a page-wide filter, retaining meaningful colors for income/expenses, gains/losses, statuses, forecasts and categories. Area charts follow the selected palette, with blue accents in Original and neutral accents in Monochrome. Red Filter also replaces its page filter with native red surfaces, controls, statuses and charts in light/dark modes.
 
 - Refreshed cash-balance, account and portfolio history charts with EasyUI-style cards, smooth area curves, animated reveals and range pills. Dated value readouts and keyboard/touch inspection preserve native currencies, history gaps and privacy.
 
diff --git a/README.md b/README.md
index f6c09aac..9c044f71 100644
--- a/README.md
+++ b/README.md
@@ -109,7 +109,7 @@ The API and MCP Worker share the deployed D1 database but have separate authenti
 
 ### Accounts, search, and archive
 
-The Accounts page groups cash/bank accounts, investments, and archived accounts. Desktop navigation includes collapsible Cash/Investments shortcuts showing all accounts sorted by converted value, independent account scrolling, compact balances, and Search everything; mobile uses bottom navigation, More, and a header search button. The sidebar and Settings expose light/dark mode independently of the color theme. Original uses blue accents; Monochrome has a native neutral palette for surfaces, controls, statuses and data charts in both display modes. Area charts inherit the selected palette. Red Filter also uses a native palette, with deep red surfaces in dark mode, warm pale surfaces in light mode, and matching red controls, statuses and charts. Neither palette uses a page filter.
+The Accounts page groups cash/bank accounts, investments, and archived accounts. Desktop navigation includes collapsible Cash/Investments shortcuts showing all accounts sorted by converted value, independent account scrolling, compact balances, and Search everything; mobile uses bottom navigation, More, and a header search button. The sidebar and Settings expose light/dark mode independently of the color theme. Original uses blue accents; Monochrome has native neutral surfaces, controls and primary balance charts in both display modes, with color retained for income/expenses, gains/losses, statuses, forecasts and category distinctions. Area charts inherit the selected palette. Red Filter also uses a native palette, with deep red surfaces in dark mode, warm pale surfaces in light mode, and matching red controls, statuses and charts. Neither palette uses a page filter.
 
 Initial Dashboard, Analytics, and Investments reads use text-free skeletons shaped like their widgets, with a left-to-right gradient shimmer. Analytics respects saved widget visibility; reduced-motion preferences disable the shimmer. Once data has loaded, background refreshes keep the page visible with a small fixed refresh indicator. Investment portfolios and the first page of saved forecast reports stay in memory across navigation and refresh when reopened; a browser reload starts a new session. Failed refreshes retain the previous complete snapshot with retry feedback.
 
diff --git a/client/src/components/analytics-module/constants.ts b/client/src/components/analytics-module/constants.ts
index fc63e915..214fb3ad 100644
--- a/client/src/components/analytics-module/constants.ts
+++ b/client/src/components/analytics-module/constants.ts
@@ -1,2 +1,2 @@
-// CSS palette inputs keep Original colors and provide native Monochrome and Red Filter tones.
+// CSS palette inputs keep Original colors and preserve category distinctions in Monochrome and provide native Red Filter tones.
 export const COLORS = Array.from({ length: 15 }, (_, index) => `var(--chart-category-${index + 1})`)
diff --git a/client/src/context/ThemeContext.tsx b/client/src/context/ThemeContext.tsx
index e5594426..e90caba9 100644
--- a/client/src/context/ThemeContext.tsx
+++ b/client/src/context/ThemeContext.tsx
@@ -33,7 +33,7 @@ export const THEMES: Theme[] = [
   {
     id: 'mono',
     name: 'Monochrome',
-    description: 'Black, white and gray surfaces and accents',
+    description: 'Neutral surfaces with meaningful color accents',
     primaryColor: '#ebebeb',
     bgColor: '#0a0a0a',
     cardColor: '#181818',
diff --git a/client/src/index.css b/client/src/index.css
index 48661afe..80b70090 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -348,7 +348,7 @@ button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
   --split-line-6: #8A9BB4;
 }
 
-/* A native neutral palette. No filter is used, including on portalled controls. */
+/* Neutral surfaces and primary charts retain semantic status/category colors. */
 :root.theme-mono {
   --canvas: 0 0% 4%;
   --background: 0 0% 7%;
@@ -368,62 +368,13 @@ button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
   --border: 0 0% 17%;
   --input: 0 0% 12%;
   --ring: 0 0% 65%;
-  --destructive: 0 0% 67%;
-  --destructive-foreground: 0 0% 9%;
-  --success: 0 0% 88%;
-  --success-foreground: 0 0% 9%;
-  --forecast: 0 0% 58%;
-  --cash-flow-income: 0 0% 78%;
-  --warning: 0 0% 72%;
-  --chart-category-1: #e5e5e5;
-  --chart-category-2: #858585;
-  --chart-category-3: #b8b8b8;
-  --chart-category-4: #737373;
-  --chart-category-5: #d4d4d4;
-  --chart-category-6: #999999;
-  --chart-category-7: #f5f5f5;
-  --chart-category-8: #808080;
-  --chart-category-9: #c4c4c4;
-  --chart-category-10: #6b6b6b;
-  --chart-category-11: #dedede;
-  --chart-category-12: #a3a3a3;
-  --chart-category-13: #ededed;
-  --chart-category-14: #909090;
-  --chart-category-15: #adadad;
-  --split-line-1: var(--chart-category-1);
-  --split-line-2: var(--chart-category-2);
-  --split-line-3: var(--chart-category-3);
-  --split-line-4: var(--chart-category-4);
-  --split-line-5: var(--chart-category-5);
-  --split-line-6: var(--chart-category-6);
-
-  /* Legacy utility accents participate in the palette instead of being filtered. */
-  --color-amber-300: var(--color-neutral-300);
-  --color-amber-400: var(--color-neutral-400);
-  --color-amber-500: var(--color-neutral-500);
-  --color-amber-600: var(--color-neutral-600);
-  --color-amber-700: var(--color-neutral-700);
-  --color-blue-400: var(--color-neutral-400);
-  --color-blue-500: var(--color-neutral-500);
-  --color-blue-600: var(--color-neutral-600);
-  --color-green-50: var(--color-neutral-50);
-  --color-green-400: var(--color-neutral-400);
-  --color-green-500: var(--color-neutral-500);
-  --color-green-600: var(--color-neutral-600);
-  --color-green-700: var(--color-neutral-700);
-  --color-orange-300: var(--color-neutral-300);
-  --color-orange-500: var(--color-neutral-500);
-  --color-orange-600: var(--color-neutral-600);
-  --color-orange-700: var(--color-neutral-700);
-  --color-purple-500: var(--color-neutral-500);
-  --color-red-400: var(--color-neutral-400);
-  --color-red-500: var(--color-neutral-500);
-  --color-red-600: var(--color-neutral-600);
-  --color-violet-300: var(--color-neutral-300);
-  --color-violet-400: var(--color-neutral-400);
-  --color-violet-500: var(--color-neutral-500);
-  --color-violet-600: var(--color-neutral-600);
-  --color-yellow-500: var(--color-neutral-500);
+  --destructive: 0 74% 65%;
+  --destructive-foreground: 0 60% 10%;
+  --success: 142 65% 58%;
+  --success-foreground: 144 80% 10%;
+  --forecast: 256 80% 80%;
+  --cash-flow-income: 142 65% 58%;
+  --warning: 38 92% 60%;
 }
 :root.theme-mono[data-color-mode='light'] {
   --canvas: 0 0% 97%;
@@ -444,31 +395,17 @@ button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
   --border: 0 0% 89%;
   --input: 0 0% 98%;
   --ring: 0 0% 45%;
-  --destructive: 0 0% 40%;
+  --destructive: 0 65% 45%;
   --destructive-foreground: 0 0% 100%;
-  --success: 0 0% 24%;
+  --success: 146 65% 32%;
   --success-foreground: 0 0% 100%;
-  --forecast: 0 0% 40%;
-  --color-violet-400: var(--color-neutral-600);
-  --cash-flow-income: 0 0% 24%;
-  --warning: 0 0% 35%;
-  --chart-category-1: #262626;
-  --chart-category-2: #737373;
-  --chart-category-3: #525252;
-  --chart-category-4: #8a8a8a;
-  --chart-category-5: #404040;
-  --chart-category-6: #666666;
-  --chart-category-7: #171717;
-  --chart-category-8: #595959;
-  --chart-category-9: #888888;
-  --chart-category-10: #454545;
-  --chart-category-11: #707070;
-  --chart-category-12: #333333;
-  --chart-category-13: #7d7d7d;
-  --chart-category-14: #4b4b4b;
-  --chart-category-15: #949494;
+  --forecast: 262 65% 50%;
+  --cash-flow-income: 146 65% 32%;
+  --warning: 32 90% 35%;
 }
 
+:root.theme-mono .dashboard-cash-flow-expense { --cash-flow-color: var(--destructive); }
+
 /* Native red palette: surfaces, portalled controls and charts share red tones. */
 :root.theme-redfilter {
   --canvas: 0 42% 4.7%;

From a47126880a8d9b221f73028b01f79ee080c50032 Mon Sep 17 00:00:00 2001
From: 31b4 <szilagyibence@szilagyibence.com>
Date: Thu, 22 Oct 2026 09:12:40 +0200
Subject: [PATCH 7/7] Preserve meaningful financial colors in Red Filter

---
 CHANGELOG.md                                  |  2 +-
 README.md                                     |  2 +-
 .../components/analytics-module/constants.ts  |  2 +-
 client/src/context/ThemeContext.tsx           |  2 +-
 client/src/index.css                          | 95 +++----------------
 5 files changed, 15 insertions(+), 88 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index cb9d8275..b105395f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,7 +6,7 @@ Intermediate package/UI version bumps are grouped under the next published GitHu
 
 ## Unreleased
 
-- Monochrome now uses a dedicated neutral light/dark palette for surfaces, controls and primary balance charts instead of a page-wide filter, retaining meaningful colors for income/expenses, gains/losses, statuses, forecasts and categories. Area charts follow the selected palette, with blue accents in Original and neutral accents in Monochrome. Red Filter also replaces its page filter with native red surfaces, controls, statuses and charts in light/dark modes.
+- Monochrome now uses a dedicated neutral light/dark palette for surfaces, controls and primary balance charts instead of a page-wide filter, retaining meaningful colors for income/expenses, gains/losses, statuses, forecasts and categories. Area charts follow the selected palette, with blue accents in Original and neutral accents in Monochrome. Red Filter also replaces its page filter with native red surfaces, controls and primary charts in light/dark modes, retaining the same meaningful financial/status and category colors.
 
 - Refreshed cash-balance, account and portfolio history charts with EasyUI-style cards, smooth area curves, animated reveals and range pills. Dated value readouts and keyboard/touch inspection preserve native currencies, history gaps and privacy.
 
diff --git a/README.md b/README.md
index 9c044f71..561a3010 100644
--- a/README.md
+++ b/README.md
@@ -109,7 +109,7 @@ The API and MCP Worker share the deployed D1 database but have separate authenti
 
 ### Accounts, search, and archive
 
-The Accounts page groups cash/bank accounts, investments, and archived accounts. Desktop navigation includes collapsible Cash/Investments shortcuts showing all accounts sorted by converted value, independent account scrolling, compact balances, and Search everything; mobile uses bottom navigation, More, and a header search button. The sidebar and Settings expose light/dark mode independently of the color theme. Original uses blue accents; Monochrome has native neutral surfaces, controls and primary balance charts in both display modes, with color retained for income/expenses, gains/losses, statuses, forecasts and category distinctions. Area charts inherit the selected palette. Red Filter also uses a native palette, with deep red surfaces in dark mode, warm pale surfaces in light mode, and matching red controls, statuses and charts. Neither palette uses a page filter.
+The Accounts page groups cash/bank accounts, investments, and archived accounts. Desktop navigation includes collapsible Cash/Investments shortcuts showing all accounts sorted by converted value, independent account scrolling, compact balances, and Search everything; mobile uses bottom navigation, More, and a header search button. The sidebar and Settings expose light/dark mode independently of the color theme. Original uses blue accents; Monochrome has native neutral surfaces, controls and primary balance charts in both display modes, with color retained for income/expenses, gains/losses, statuses, forecasts and category distinctions. Area charts inherit the selected palette. Red Filter also uses a native palette, with deep red surfaces in dark mode, warm pale surfaces in light mode, and matching red controls and primary charts. Both themes retain semantic financial/status colors and distinct category colors. Neither palette uses a page filter.
 
 Initial Dashboard, Analytics, and Investments reads use text-free skeletons shaped like their widgets, with a left-to-right gradient shimmer. Analytics respects saved widget visibility; reduced-motion preferences disable the shimmer. Once data has loaded, background refreshes keep the page visible with a small fixed refresh indicator. Investment portfolios and the first page of saved forecast reports stay in memory across navigation and refresh when reopened; a browser reload starts a new session. Failed refreshes retain the previous complete snapshot with retry feedback.
 
diff --git a/client/src/components/analytics-module/constants.ts b/client/src/components/analytics-module/constants.ts
index 214fb3ad..b8b6e648 100644
--- a/client/src/components/analytics-module/constants.ts
+++ b/client/src/components/analytics-module/constants.ts
@@ -1,2 +1,2 @@
-// CSS palette inputs keep Original colors and preserve category distinctions in Monochrome and provide native Red Filter tones.
+// CSS palette inputs keep Original colors and preserve category distinctions across all app themes.
 export const COLORS = Array.from({ length: 15 }, (_, index) => `var(--chart-category-${index + 1})`)
diff --git a/client/src/context/ThemeContext.tsx b/client/src/context/ThemeContext.tsx
index e90caba9..f49a47dc 100644
--- a/client/src/context/ThemeContext.tsx
+++ b/client/src/context/ThemeContext.tsx
@@ -44,7 +44,7 @@ export const THEMES: Theme[] = [
   {
     id: 'redfilter',
     name: 'Red Filter',
-    description: 'Deep red surfaces and warm red accents',
+    description: 'Red surfaces with meaningful color accents',
     primaryColor: '#ff7575',
     bgColor: '#110707',
     cardColor: '#231010',
diff --git a/client/src/index.css b/client/src/index.css
index 80b70090..89ce7c60 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -404,9 +404,9 @@ button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
   --warning: 32 90% 35%;
 }
 
-:root.theme-mono .dashboard-cash-flow-expense { --cash-flow-color: var(--destructive); }
+:root:is(.theme-mono, .theme-redfilter) .dashboard-cash-flow-expense { --cash-flow-color: var(--destructive); }
 
-/* Native red palette: surfaces, portalled controls and charts share red tones. */
+/* Red surfaces and primary charts retain semantic status/category colors. */
 :root.theme-redfilter {
   --canvas: 0 42% 4.7%;
   --background: 0 40% 6%;
@@ -428,64 +428,11 @@ button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
   --ring: 0 100% 73%;
   --destructive: 0 94% 68%;
   --destructive-foreground: 0 60% 10%;
-  --success: 0 72% 85%;
-  --success-foreground: 0 60% 10%;
-  --forecast: 0 42% 66%;
-  --cash-flow-income: 0 72% 85%;
-  --warning: 0 95% 79%;
-  --red-accent-50: hsl(0 100% 97%);
-  --red-accent-300: hsl(0 90% 85%);
-  --red-accent-400: hsl(0 94% 75%);
-  --red-accent-500: hsl(0 85% 65%);
-  --red-accent-600: hsl(0 75% 55%);
-  --red-accent-700: hsl(0 70% 43%);
-  --chart-category-1: #ffb3b3;
-  --chart-category-2: #b95a5a;
-  --chart-category-3: #eb8585;
-  --chart-category-4: #9e6161;
-  --chart-category-5: #ffd1d1;
-  --chart-category-6: #cc7373;
-  --chart-category-7: #ffe5e5;
-  --chart-category-8: #a94b4b;
-  --chart-category-9: #e4a2a2;
-  --chart-category-10: #ac7777;
-  --chart-category-11: #ff9292;
-  --chart-category-12: #d58e8e;
-  --chart-category-13: #f7c2c2;
-  --chart-category-14: #c06363;
-  --chart-category-15: #e0b0b0;
-  --split-line-1: var(--chart-category-1);
-  --split-line-2: var(--chart-category-2);
-  --split-line-3: var(--chart-category-3);
-  --split-line-4: var(--chart-category-4);
-  --split-line-5: var(--chart-category-5);
-  --split-line-6: var(--chart-category-6);
-  --color-amber-300: var(--red-accent-300);
-  --color-amber-400: var(--red-accent-400);
-  --color-amber-500: var(--red-accent-500);
-  --color-amber-600: var(--red-accent-600);
-  --color-amber-700: var(--red-accent-700);
-  --color-blue-400: var(--red-accent-400);
-  --color-blue-500: var(--red-accent-500);
-  --color-blue-600: var(--red-accent-600);
-  --color-green-50: var(--red-accent-50);
-  --color-green-400: var(--red-accent-400);
-  --color-green-500: var(--red-accent-500);
-  --color-green-600: var(--red-accent-600);
-  --color-green-700: var(--red-accent-700);
-  --color-orange-300: var(--red-accent-300);
-  --color-orange-500: var(--red-accent-500);
-  --color-orange-600: var(--red-accent-600);
-  --color-orange-700: var(--red-accent-700);
-  --color-purple-500: var(--red-accent-500);
-  --color-red-400: var(--red-accent-400);
-  --color-red-500: var(--red-accent-500);
-  --color-red-600: var(--red-accent-600);
-  --color-violet-300: var(--red-accent-300);
-  --color-violet-400: var(--red-accent-400);
-  --color-violet-500: var(--red-accent-500);
-  --color-violet-600: var(--red-accent-600);
-  --color-yellow-500: var(--red-accent-500);
+  --success: 142 65% 58%;
+  --success-foreground: 144 80% 10%;
+  --forecast: 256 80% 80%;
+  --cash-flow-income: 142 65% 58%;
+  --warning: 38 92% 60%;
 }
 :root.theme-redfilter[data-color-mode='light'] {
   --canvas: 0 100% 98%;
@@ -508,29 +455,9 @@ button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
   --ring: 0 74% 42%;
   --destructive: 0 80% 40%;
   --destructive-foreground: 0 100% 99%;
-  --success: 0 45% 32%;
+  --success: 146 65% 32%;
   --success-foreground: 0 100% 99%;
-  --forecast: 0 35% 43%;
-  --cash-flow-income: 0 45% 32%;
-  --warning: 0 60% 38%;
-  --red-accent-300: hsl(0 65% 72%);
-  --red-accent-400: hsl(0 60% 42%);
-  --red-accent-500: hsl(0 70% 43%);
-  --red-accent-600: hsl(0 75% 36%);
-  --red-accent-700: hsl(0 70% 29%);
-  --chart-category-1: #b91c1c;
-  --chart-category-2: #a65b5b;
-  --chart-category-3: #d14d4d;
-  --chart-category-4: #8c4444;
-  --chart-category-5: #761b1b;
-  --chart-category-6: #bf7373;
-  --chart-category-7: #571717;
-  --chart-category-8: #b83d3d;
-  --chart-category-9: #974f4f;
-  --chart-category-10: #c76565;
-  --chart-category-11: #902929;
-  --chart-category-12: #a97676;
-  --chart-category-13: #6b3535;
-  --chart-category-14: #d17f7f;
-  --chart-category-15: #ad3e3e;
+  --forecast: 262 65% 50%;
+  --cash-flow-income: 146 65% 32%;
+  --warning: 32 90% 35%;
 }