diff --git a/CHANGELOG.md b/CHANGELOG.md
index 49b8598c..b105395f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,10 @@ 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 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.
+
 ## 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/README.md b/README.md
index e63b5580..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 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 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/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/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/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/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/NetWorthTrendChart.test.tsx b/client/src/components/analytics-module/NetWorthTrendChart.test.tsx
index dee0d00a..04d71840 100644
--- a/client/src/components/analytics-module/NetWorthTrendChart.test.tsx
+++ b/client/src/components/analytics-module/NetWorthTrendChart.test.tsx
@@ -36,13 +36,17 @@ 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('shows the trend by default, lets it be hidden, and keeps comparison opt-in', () => {
     renderChart()
-    expect(screen.getByTestId('series-smoothed')).toHaveAttribute('data-dashes', '6 3')
+    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(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 +56,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..f9c12c69 100644
--- a/client/src/components/analytics-module/NetWorthTrendChart.tsx
+++ b/client/src/components/analytics-module/NetWorthTrendChart.tsx
@@ -1,12 +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 type { ReactNode } from 'react'
+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'
 import type { CashBalanceComparison } from './cash-balance-comparison'
 
@@ -14,118 +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(true)
   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 ? (
-          <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>
-        ) : (
-          <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 0d421629..f3cd8a79 100644
--- a/client/src/components/analytics-module/PerAccountTrendChart.tsx
+++ b/client/src/components/analytics-module/PerAccountTrendChart.tsx
@@ -1,9 +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 { memo, useState } from 'react'
+import { InteractiveAreaChart } from '../common/interactive-area-chart'
 import { usePrivacy } from '../../context/PrivacyContext'
-import { calculateYAxisDomain } from './utils'
-import { COLORS } from './constants'
+import { cn } from '../../lib/utils'
 import type { Account, TrendDataPoint } from './types'
 
 type PerAccountTrendChartProps = {
@@ -13,101 +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(true)
 
-  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 ? (
-          <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>
-        ) : (
-          <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/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..b8b6e648 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 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/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
new file mode 100644
index 00000000..93d251ef
--- /dev/null
+++ b/client/src/components/common/interactive-area-chart.test.tsx
@@ -0,0 +1,129 @@
+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()
+  })
+})
+
+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
new file mode 100644
index 00000000..0bd13128
--- /dev/null
+++ b/client/src/components/common/interactive-area-chart.tsx
@@ -0,0 +1,196 @@
+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).
+// 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 = {
+  data: AreaChartPoint[]
+  label: string
+  formatValue: (value: number | null) => string
+  color?: string
+  title?: string
+  controls?: ReactNode
+  showChange?: boolean
+  periodLabel?: 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))', 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)
+  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: 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)
+  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 : 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))))]
+
+  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, 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 = []
+    }
+    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="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-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-[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}
+        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><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.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-[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" 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 && <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} />}
+          </motion.g>}
+        </g>
+      </svg>
+      {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-medium tabular-nums" style={{ color }}>{formatValue(shown.value)}</p>
+        </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>
+      <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/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/investments-module/PortfolioHistoryChart.tsx b/client/src/components/investments-module/PortfolioHistoryChart.tsx
index b9998c28..233bbf27 100644
--- a/client/src/components/investments-module/PortfolioHistoryChart.tsx
+++ b/client/src/components/investments-module/PortfolioHistoryChart.tsx
@@ -1,49 +1,40 @@
 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 {AreaChartRanges} from '../common/area-chart-ranges'
+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 [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>}
-  <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={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>
-  <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>}
+  {!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/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..70c8cff1
--- /dev/null
+++ b/client/src/components/settings-module/components/ThemeCard.test.tsx
@@ -0,0 +1,42 @@
+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)"]')).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 }))
+  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()
+})
+
+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 54bda850..cdc18f78 100644
--- a/client/src/components/settings-module/components/ThemeCard.tsx
+++ b/client/src/components/settings-module/components/ThemeCard.tsx
@@ -27,20 +27,24 @@ 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}
+                isSelected={theme === t.id}
+                onSelect={setTheme}
+              />
+            )
+          })}
         </div>
       </CardContent>
     </Card>
@@ -54,16 +58,12 @@ interface ThemeSwatchProps {
   primaryColor: string
   bgColor: string
   cardColor: string
-  previewFilter?: string
+  foregroundColor: string
+  primaryForegroundColor: string
   isSelected: boolean
   onSelect: (id: ThemeId) => void
 }
 
-const FILTER_LABELS: Partial<Record<ThemeId, string>> = {
-  mono: 'GRAYSCALE',
-  redfilter: 'RED FILTER',
-}
-
 function ThemeSwatch({
   themeId,
   name,
@@ -71,14 +71,15 @@ function ThemeSwatch({
   primaryColor,
   bgColor,
   cardColor,
-  previewFilter,
+  foregroundColor,
+  primaryForegroundColor,
   isSelected,
   onSelect,
 }: ThemeSwatchProps) {
-  const filterLabel = FILTER_LABELS[themeId]
-
   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,12 +87,11 @@ 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={{
           backgroundColor: bgColor,
-          filter: previewFilter ?? 'none',
         }}
       >
         <div
@@ -102,17 +102,9 @@ 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' }}>
-            {filterLabel}
-          </div>
-        )}
       </div>
 
       <div>
@@ -125,7 +117,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..6430f947 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,49 @@ 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 and switches native palettes without filters', () => {
+    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')).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')
+    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('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 6f62ff5e..f49a47dc 100644
--- a/client/src/context/ThemeContext.tsx
+++ b/client/src/context/ThemeContext.tsx
@@ -3,15 +3,19 @@ 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 */
-  cssFilter?: string
+  foregroundColor: string
+  primaryForegroundColor: string
+}
+
+export interface Theme extends ThemePreview {
+  id: ThemeId
+  name: string
+  description: string
+  lightPreview: ThemePreview
 }
 
 export const THEMES: Theme[] = [
@@ -22,24 +26,31 @@ 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: 'Neutral surfaces with meaningful color accents',
+    primaryColor: '#ebebeb',
+    bgColor: '#0a0a0a',
+    cardColor: '#181818',
+    foregroundColor: '#f5f5f5',
+    primaryForegroundColor: '#171717',
+    lightPreview: { primaryColor: '#1f1f1f', bgColor: '#f7f7f7', cardColor: '#ffffff', foregroundColor: '#171717', primaryForegroundColor: '#ffffff' },
   },
   {
     id: 'redfilter',
     name: 'Red Filter',
-    description: 'Blue-light blocking — all hues shifted to red',
-    primaryColor: '#5189D8',
-    bgColor: '#000610',
-    cardColor: '#010E21',
-    cssFilter: 'sepia(1) saturate(6) hue-rotate(315deg) brightness(0.75)',
+    description: 'Red surfaces with meaningful color accents',
+    primaryColor: '#ff7575',
+    bgColor: '#110707',
+    cardColor: '#231010',
+    foregroundColor: '#ffe6e6',
+    primaryForegroundColor: '#280a0a',
+    lightPreview: { primaryColor: '#b91c1c', bgColor: '#fff5f5', cardColor: '#fffafa', foregroundColor: '#3b1414', primaryForegroundColor: '#fffafa' },
   },
 ]
 
@@ -81,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 42d75932..89ce7c60 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -300,3 +300,164 @@ 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; }
 }
+
+/* Chart geometry is shared; colors come from the selected app palette. */
+.easyui-area-card {
+  min-width: 0;
+  padding: 24px;
+  border: 1px solid hsl(var(--border));
+  border-radius: 24px;
+  background: hsl(var(--card));
+  color: hsl(var(--foreground));
+}
+.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: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;
+}
+
+/* Neutral surfaces and primary charts retain semantic status/category colors. */
+: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 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%;
+  --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 65% 45%;
+  --destructive-foreground: 0 0% 100%;
+  --success: 146 65% 32%;
+  --success-foreground: 0 0% 100%;
+  --forecast: 262 65% 50%;
+  --cash-flow-income: 146 65% 32%;
+  --warning: 32 90% 35%;
+}
+
+:root:is(.theme-mono, .theme-redfilter) .dashboard-cash-flow-expense { --cash-flow-color: var(--destructive); }
+
+/* Red surfaces and primary charts retain semantic status/category colors. */
+: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: 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%;
+  --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: 146 65% 32%;
+  --success-foreground: 0 100% 99%;
+  --forecast: 262 65% 50%;
+  --cash-flow-income: 146 65% 32%;
+  --warning: 32 90% 35%;
+}
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')
 })
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": {