From abb59f46a6e8fe55643b5f4d9978148d0129a6da Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Thu, 23 Apr 2026 14:52:39 +0200
Subject: [PATCH] perf: Lucide subpath imports to split 748 KB icon chunk

Barrel `from '@lucide/svelte'` imports pulled every referenced icon into
one shared 748 KB client chunk. Switch every call site to per-icon
subpaths (`@lucide/svelte/icons/<kebab-name>`) so Vite tree-shakes each
icon independently. Also logs the TODO list for the perf audit so we
don't lose track.

- 46 files, 106 unique icons
- single `Minus as MinusIcon` alias preserved
- Lucide-internal aliases (`AlertTriangle`, `BarChart3`) resolve through
  Lucide's own re-export shims; no behavioral change
---
 TODO.md                                       |   18 +
 package.json                                  |    2 +-
 src/lib/components/DatePicker.svelte          |    5 +-
 src/lib/components/ErrorView.svelte           |    7 +-
 src/lib/components/ThemeToggle.svelte         |    4 +-
 src/lib/components/Toast.svelte               |    2 +-
 .../faith/AngelusStreakCounter.svelte         |    4 +-
 .../components/fitness/ExercisePicker.svelte  |    9 +-
 src/lib/components/fitness/FoodSearch.svelte  |    5 +-
 .../components/fitness/MacroBreakdown.svelte  |    4 +-
 .../components/fitness/MealTypePicker.svelte  |    5 +-
 .../components/fitness/PeriodTracker.svelte   |    8 +-
 .../components/fitness/RoundOffCard.svelte    |    7 +-
 src/lib/components/fitness/SessionCard.svelte |    7 +-
 src/lib/components/fitness/SetTable.svelte    |    5 +-
 .../components/fitness/SyncIndicator.svelte   |    6 +-
 .../components/fitness/TemplateCard.svelte    |    3 +-
 .../components/fitness/VideoOverlay.svelte    |    3 +-
 src/lib/components/fitness/WorkoutFab.svelte  |    3 +-
 .../recipes/AddToFoodLogButton.svelte         |    3 +-
 .../components/recipes/CreateStepList.svelte  |    8 +-
 .../recipes/InstructionsPage.svelte           |    7 +-
 .../components/tasks/StickerCalendar.svelte   |    3 +-
 src/lib/components/tasks/TaskForm.svelte      |   16 +-
 .../[cospendRoot=cospendRoot]/+layout.svelte  |    5 +-
 .../list/+page.svelte                         |   25 +-
 .../[rosary=rosaryLang]/+page.svelte          |    2 +-
 .../katechese/zehn-gebote/+page.svelte        |    3 +-
 .../[recipeLang=recipeLang]/+layout.svelte    |    7 +-
 src/routes/fitness/+layout.svelte             |    7 +-
 .../[checkin=fitnessCheckIn]/+page.svelte     |   14 +-
 .../body-parts/+page.svelte                   |   11 +-
 .../edit/[id]/+page.svelte                    |    2 +-
 .../[exercises=fitnessExercises]/+page.svelte |   10 +-
 .../[id]/+page.svelte                         |    3 +-
 .../[[month=fitnessMonth]]/+page.svelte       |    3 +-
 .../[id]/+page.svelte                         |   16 +-
 .../[[date=fitnessDate]]/+page.svelte         |   24 +-
 .../food/[source]/[id]/+page.svelte           |    7 +-
 .../meals/+page.svelte                        |    6 +-
 .../fitness/[stats=fitnessStats]/+page.svelte |   12 +-
 .../[part]/+page.svelte                       |    6 +-
 .../[workout=fitnessWorkout]/+page.svelte     |   16 +-
 .../[active=fitnessActive]/+page.svelte       |   20 +-
 src/routes/measure-mock/+page.svelte          | 1267 +++++++++++++++++
 src/routes/tasks/+layout.svelte               |    4 +-
 src/routes/tasks/+page.svelte                 |   23 +-
 src/routes/tasks/rewards/+page.svelte         |    2 +-
 48 files changed, 1582 insertions(+), 57 deletions(-)
 create mode 100644 src/routes/measure-mock/+page.svelte

diff --git a/TODO.md b/TODO.md
index 6ed80774..2ca1aef3 100644
--- a/TODO.md
+++ b/TODO.md
@@ -1,5 +1,21 @@
 # TODO
 
+## Perf (audit 2026-04-23)
+
+Order = impact. Font items + app.html preload intentionally skipped.
+
+- [x] 1. Lucide subpath imports — convert `from '@lucide/svelte'` barrel imports to `@lucide/svelte/icons/<kebab-name>` so Vite tree-shakes per-icon (current 748 KB shared chunk)
+- [ ] 2. Chart.js dynamic import in `FitnessChart.svelte` (drop 244 KB from non-stats fitness routes)
+- [ ] 3. Recipe `all_brief` endpoint — drop `JSON.parse(JSON.stringify(...))`, move shuffle client-side, enable caching
+- [ ] 4. Favorites page — drop unnecessary `all_brief` fetch (verify consumer first)
+- [ ] 5. Replace redundant `locals.auth()` with `locals.session` across recipe/calendar/fitness loaders
+- [ ] 6. Stream fitness stats loader — return promises for slow panels
+- [ ] 7. Overview endpoint — add `.select(...)` projection, cap timeseries window
+- [ ] 8. Calendar payload trim — drop `name` from `yearDays`, pre-filter `feastDots` server-side
+- [ ] 9. History sessions endpoint — slim exercise payload for list view
+- [ ] 10. `Cache-Control` headers on stable API endpoints (all_brief, calendar, exercises metadata)
+- [ ] 11. Search — debounce 200 ms + server-side pre-normalized `_searchKey`
+
 ## Features
 [x] on /fitness/measure, fill "Past measurements" in SSR only for the last 10 measurements. anything further should be fetched client side on mount to decreae initial page load time. use a "show more" button and paginate measurments.
 [x] on /fitness/measure (resp. their associated logging API routes), consolidate measurements by day. If we want to log another measurement, overwriting an old one, show a warning to indicate this. disparate measurements (e.g., weight and bodyfat) should not show this warning but simply be merged into one log entry for that day.
@@ -8,6 +24,8 @@
 [x] BF graph (with trend line like weight graph) on /fitness/stats page. Emphasize relative changes, not absolute numbers in design (as we cannot trust those) (e.g., use start day of overview as 0% and then show +/- x % on the graph)
 [x] Workshop better names than "Measure" for the /fitness/measure route. It's about body data points (i.e., non-food related). What's a better, short name than "Measure" to capture the logging of weight, body composition, body part measurements, and period tracking?
 [x] on /fitness/stats/histoy/<part> for body measurement graphs, make the range reasonable. e.g., if we have 1 cm change, do not fill the entire y-height with 1 cm. Use reasonable padding for low ranges (i think we do something like htis already on the weight graph?)
+[ ] Make the Period ended button a lot more prominent
+[ ] swap heart emoji on recipe favorites to lucide icon
 
 ## Refactor Recipe Search Component
 
diff --git a/package.json b/package.json
index 0e669c9d..050a3e03 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "homepage",
-	"version": "1.46.11",
+	"version": "1.46.12",
 	"private": true,
 	"type": "module",
 	"scripts": {
diff --git a/src/lib/components/DatePicker.svelte b/src/lib/components/DatePicker.svelte
index ffd8e9f6..1468969d 100644
--- a/src/lib/components/DatePicker.svelte
+++ b/src/lib/components/DatePicker.svelte
@@ -1,6 +1,7 @@
 <script>
-	import { ChevronLeft, ChevronRight, Calendar } from '@lucide/svelte';
-
+	import ChevronLeft from '@lucide/svelte/icons/chevron-left';
+	import ChevronRight from '@lucide/svelte/icons/chevron-right';
+	import Calendar from '@lucide/svelte/icons/calendar';
 	let { value = $bindable(''), lang = 'en', min = '', max = '' } = $props();
 
 	let open = $state(false);
diff --git a/src/lib/components/ErrorView.svelte b/src/lib/components/ErrorView.svelte
index bfdd880f..1b1f0c11 100644
--- a/src/lib/components/ErrorView.svelte
+++ b/src/lib/components/ErrorView.svelte
@@ -1,7 +1,10 @@
 <script lang="ts">
   import type { Snippet, Component } from 'svelte';
-  import { Lock, Ban, SearchX, TriangleAlert, CircleAlert } from '@lucide/svelte';
-
+  import Lock from '@lucide/svelte/icons/lock';
+  import Ban from '@lucide/svelte/icons/ban';
+  import SearchX from '@lucide/svelte/icons/search-x';
+  import TriangleAlert from '@lucide/svelte/icons/triangle-alert';
+  import CircleAlert from '@lucide/svelte/icons/circle-alert';
   interface BibleQuote {
     text: string;
     reference: string;
diff --git a/src/lib/components/ThemeToggle.svelte b/src/lib/components/ThemeToggle.svelte
index 779d8d15..d7a4e823 100644
--- a/src/lib/components/ThemeToggle.svelte
+++ b/src/lib/components/ThemeToggle.svelte
@@ -1,6 +1,8 @@
 <script>
 	import { themeStore } from '$lib/stores/theme.svelte';
-	import { Sun, Moon, SunMoon } from '@lucide/svelte';
+	import Sun from '@lucide/svelte/icons/sun';
+	import Moon from '@lucide/svelte/icons/moon';
+	import SunMoon from '@lucide/svelte/icons/sun-moon';
 </script>
 
 <style>
diff --git a/src/lib/components/Toast.svelte b/src/lib/components/Toast.svelte
index 8539acc7..f09b7a63 100644
--- a/src/lib/components/Toast.svelte
+++ b/src/lib/components/Toast.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { X } from '@lucide/svelte';
+	import X from '@lucide/svelte/icons/x';
 	import { getToasts } from '$lib/js/toast.svelte';
 
 	const toasts = getToasts();
diff --git a/src/lib/components/faith/AngelusStreakCounter.svelte b/src/lib/components/faith/AngelusStreakCounter.svelte
index 0e038731..de0fb673 100644
--- a/src/lib/components/faith/AngelusStreakCounter.svelte
+++ b/src/lib/components/faith/AngelusStreakCounter.svelte
@@ -2,7 +2,9 @@
 import { browser } from '$app/environment';
 import { getAngelusStreak, getCurrentTimeSlot, type TimeSlot } from '$lib/stores/angelusStreak.svelte';
 import StreakAura from '$lib/components/faith/StreakAura.svelte';
-import { Coffee, Sun, Moon } from '@lucide/svelte';
+import Coffee from '@lucide/svelte/icons/coffee';
+import Sun from '@lucide/svelte/icons/sun';
+import Moon from '@lucide/svelte/icons/moon';
 import { tick, onMount } from 'svelte';
 
 let burst = $state(false);
diff --git a/src/lib/components/fitness/ExercisePicker.svelte b/src/lib/components/fitness/ExercisePicker.svelte
index 47e073c5..b29a9bb4 100644
--- a/src/lib/components/fitness/ExercisePicker.svelte
+++ b/src/lib/components/fitness/ExercisePicker.svelte
@@ -1,7 +1,14 @@
 <script>
 	import { getFilterOptionsAll, searchAllExercises } from '$lib/data/exercisedb';
 	import { translateTerm } from '$lib/data/exercises';
-	import { Search, X, Cable, Cog, Dumbbell, PersonStanding, Shapes, Weight } from '@lucide/svelte';
+	import Search from '@lucide/svelte/icons/search';
+	import X from '@lucide/svelte/icons/x';
+	import Cable from '@lucide/svelte/icons/cable';
+	import Cog from '@lucide/svelte/icons/cog';
+	import Dumbbell from '@lucide/svelte/icons/dumbbell';
+	import PersonStanding from '@lucide/svelte/icons/person-standing';
+	import Shapes from '@lucide/svelte/icons/shapes';
+	import Weight from '@lucide/svelte/icons/weight';
 	import { page } from '$app/stores';
 	import { detectFitnessLang, t } from '$lib/js/fitnessI18n';
 
diff --git a/src/lib/components/fitness/FoodSearch.svelte b/src/lib/components/fitness/FoodSearch.svelte
index 6632e178..bbce1186 100644
--- a/src/lib/components/fitness/FoodSearch.svelte
+++ b/src/lib/components/fitness/FoodSearch.svelte
@@ -2,7 +2,10 @@
 	import { page } from '$app/stores';
 	import { browser } from '$app/environment';
 	import { untrack } from 'svelte';
-	import { Heart, ExternalLink, ScanBarcode, X } from '@lucide/svelte';
+	import Heart from '@lucide/svelte/icons/heart';
+	import ExternalLink from '@lucide/svelte/icons/external-link';
+	import ScanBarcode from '@lucide/svelte/icons/scan-barcode';
+	import X from '@lucide/svelte/icons/x';
 	import { detectFitnessLang, fitnessSlugs, t } from '$lib/js/fitnessI18n';
 	import MacroBreakdown from './MacroBreakdown.svelte';
 
diff --git a/src/lib/components/fitness/MacroBreakdown.svelte b/src/lib/components/fitness/MacroBreakdown.svelte
index 226a4655..b1156f36 100644
--- a/src/lib/components/fitness/MacroBreakdown.svelte
+++ b/src/lib/components/fitness/MacroBreakdown.svelte
@@ -1,7 +1,9 @@
 <script>
 	import { detectFitnessLang } from '$lib/js/fitnessI18n';
 	import { page } from '$app/stores';
-	import { Beef, Droplet, Wheat } from '@lucide/svelte';
+	import Beef from '@lucide/svelte/icons/beef';
+	import Droplet from '@lucide/svelte/icons/droplet';
+	import Wheat from '@lucide/svelte/icons/wheat';
 	import RingGraph from './RingGraph.svelte';
 
 	/**
diff --git a/src/lib/components/fitness/MealTypePicker.svelte b/src/lib/components/fitness/MealTypePicker.svelte
index 7a63e96e..3628a378 100644
--- a/src/lib/components/fitness/MealTypePicker.svelte
+++ b/src/lib/components/fitness/MealTypePicker.svelte
@@ -1,5 +1,8 @@
 <script>
-	import { Coffee, Sun, Moon, Cookie } from '@lucide/svelte';
+	import Coffee from '@lucide/svelte/icons/coffee';
+	import Sun from '@lucide/svelte/icons/sun';
+	import Moon from '@lucide/svelte/icons/moon';
+	import Cookie from '@lucide/svelte/icons/cookie';
 	import { t } from '$lib/js/fitnessI18n';
 
 	/** @type {{ value?: 'breakfast' | 'lunch' | 'dinner' | 'snack', lang?: 'en' | 'de', onchange?: (meal: 'breakfast' | 'lunch' | 'dinner' | 'snack') => void }} */
diff --git a/src/lib/components/fitness/PeriodTracker.svelte b/src/lib/components/fitness/PeriodTracker.svelte
index 993769cf..9164e6a3 100644
--- a/src/lib/components/fitness/PeriodTracker.svelte
+++ b/src/lib/components/fitness/PeriodTracker.svelte
@@ -1,6 +1,12 @@
 <script>
 	import { t } from '$lib/js/fitnessI18n';
-	import { Trash2, Plus, Pencil, UserPlus, X, ChevronLeft, ChevronRight } from '@lucide/svelte';
+	import Trash2 from '@lucide/svelte/icons/trash-2';
+	import Plus from '@lucide/svelte/icons/plus';
+	import Pencil from '@lucide/svelte/icons/pencil';
+	import UserPlus from '@lucide/svelte/icons/user-plus';
+	import X from '@lucide/svelte/icons/x';
+	import ChevronLeft from '@lucide/svelte/icons/chevron-left';
+	import ChevronRight from '@lucide/svelte/icons/chevron-right';
 	import DatePicker from '$lib/components/DatePicker.svelte';
 	import { toast } from '$lib/js/toast.svelte';
 	import { confirm } from '$lib/js/confirmDialog.svelte';
diff --git a/src/lib/components/fitness/RoundOffCard.svelte b/src/lib/components/fitness/RoundOffCard.svelte
index 6a6fc206..48fdbfc2 100644
--- a/src/lib/components/fitness/RoundOffCard.svelte
+++ b/src/lib/components/fitness/RoundOffCard.svelte
@@ -1,5 +1,10 @@
 <script>
-	import { Plus, ChevronDown, Sparkles, Beef, Droplet, Wheat } from '@lucide/svelte';
+	import Plus from '@lucide/svelte/icons/plus';
+	import ChevronDown from '@lucide/svelte/icons/chevron-down';
+	import Sparkles from '@lucide/svelte/icons/sparkles';
+	import Beef from '@lucide/svelte/icons/beef';
+	import Droplet from '@lucide/svelte/icons/droplet';
+	import Wheat from '@lucide/svelte/icons/wheat';
 	import { untrack } from 'svelte';
 	import { toast } from '$lib/js/toast.svelte';
 	import { t } from '$lib/js/fitnessI18n';
diff --git a/src/lib/components/fitness/SessionCard.svelte b/src/lib/components/fitness/SessionCard.svelte
index 5c666b32..5a8929a2 100644
--- a/src/lib/components/fitness/SessionCard.svelte
+++ b/src/lib/components/fitness/SessionCard.svelte
@@ -1,7 +1,12 @@
 <script>
 	import { page } from '$app/stores';
 	import { getExerciseById, getExerciseMetrics } from '$lib/data/exercises';
-	import { Clock, Weight, Trophy, Route, Gauge, Flame } from '@lucide/svelte';
+	import Clock from '@lucide/svelte/icons/clock';
+	import Weight from '@lucide/svelte/icons/weight';
+	import Trophy from '@lucide/svelte/icons/trophy';
+	import Route from '@lucide/svelte/icons/route';
+	import Gauge from '@lucide/svelte/icons/gauge';
+	import Flame from '@lucide/svelte/icons/flame';
 	import { detectFitnessLang, fitnessSlugs } from '$lib/js/fitnessI18n';
 
 	const lang = $derived(detectFitnessLang($page.url.pathname));
diff --git a/src/lib/components/fitness/SetTable.svelte b/src/lib/components/fitness/SetTable.svelte
index 47e54932..3ced7915 100644
--- a/src/lib/components/fitness/SetTable.svelte
+++ b/src/lib/components/fitness/SetTable.svelte
@@ -1,5 +1,8 @@
 <script>
-	import { Check, X, Play, Square } from '@lucide/svelte';
+	import Check from '@lucide/svelte/icons/check';
+	import X from '@lucide/svelte/icons/x';
+	import Play from '@lucide/svelte/icons/play';
+	import Square from '@lucide/svelte/icons/square';
 	import { METRIC_LABELS } from '$lib/data/exercises';
 	import RestTimer from './RestTimer.svelte';
 	import { page } from '$app/stores';
diff --git a/src/lib/components/fitness/SyncIndicator.svelte b/src/lib/components/fitness/SyncIndicator.svelte
index 600acfdc..a0fd58a9 100644
--- a/src/lib/components/fitness/SyncIndicator.svelte
+++ b/src/lib/components/fitness/SyncIndicator.svelte
@@ -1,6 +1,8 @@
 <script>
-	import { Cloud, CloudOff, RefreshCw, AlertTriangle } from '@lucide/svelte';
-
+	import Cloud from '@lucide/svelte/icons/cloud';
+	import CloudOff from '@lucide/svelte/icons/cloud-off';
+	import RefreshCw from '@lucide/svelte/icons/refresh-cw';
+	import AlertTriangle from '@lucide/svelte/icons/alert-triangle';
 	/** @type {{ status: string }} */
 	let { status } = $props();
 </script>
diff --git a/src/lib/components/fitness/TemplateCard.svelte b/src/lib/components/fitness/TemplateCard.svelte
index f6227b78..f8fdc3ed 100644
--- a/src/lib/components/fitness/TemplateCard.svelte
+++ b/src/lib/components/fitness/TemplateCard.svelte
@@ -1,6 +1,7 @@
 <script>
 	import { getExerciseById } from '$lib/data/exercises';
-	import { EllipsisVertical, MapPin } from '@lucide/svelte';
+	import EllipsisVertical from '@lucide/svelte/icons/ellipsis-vertical';
+	import MapPin from '@lucide/svelte/icons/map-pin';
 	import { page } from '$app/stores';
 	import { detectFitnessLang, t } from '$lib/js/fitnessI18n';
 
diff --git a/src/lib/components/fitness/VideoOverlay.svelte b/src/lib/components/fitness/VideoOverlay.svelte
index b8124d8e..d38421a0 100644
--- a/src/lib/components/fitness/VideoOverlay.svelte
+++ b/src/lib/components/fitness/VideoOverlay.svelte
@@ -1,6 +1,5 @@
 <script>
-	import { X } from '@lucide/svelte';
-
+	import X from '@lucide/svelte/icons/x';
 	let { src, poster = '', onClose } = $props();
 
 	/** @param {KeyboardEvent} e */
diff --git a/src/lib/components/fitness/WorkoutFab.svelte b/src/lib/components/fitness/WorkoutFab.svelte
index 76719f78..c3f5567d 100644
--- a/src/lib/components/fitness/WorkoutFab.svelte
+++ b/src/lib/components/fitness/WorkoutFab.svelte
@@ -1,6 +1,7 @@
 <script>
 import { goto } from '$app/navigation';
-import { Play, Pause } from '@lucide/svelte';
+import Play from '@lucide/svelte/icons/play';
+import Pause from '@lucide/svelte/icons/pause';
 import SyncIndicator from '$lib/components/fitness/SyncIndicator.svelte';
 import { page } from '$app/stores';
 import { detectFitnessLang, t } from '$lib/js/fitnessI18n';
diff --git a/src/lib/components/recipes/AddToFoodLogButton.svelte b/src/lib/components/recipes/AddToFoodLogButton.svelte
index 0e0a0053..50123903 100644
--- a/src/lib/components/recipes/AddToFoodLogButton.svelte
+++ b/src/lib/components/recipes/AddToFoodLogButton.svelte
@@ -1,5 +1,6 @@
 <script>
-	import { UtensilsCrossed, X } from '@lucide/svelte';
+	import UtensilsCrossed from '@lucide/svelte/icons/utensils-crossed';
+	import X from '@lucide/svelte/icons/x';
 	import { toast } from '$lib/js/toast.svelte';
 
 	let {
diff --git a/src/lib/components/recipes/CreateStepList.svelte b/src/lib/components/recipes/CreateStepList.svelte
index d7540512..0febf1ab 100644
--- a/src/lib/components/recipes/CreateStepList.svelte
+++ b/src/lib/components/recipes/CreateStepList.svelte
@@ -4,8 +4,12 @@ import Pen from '$lib/assets/icons/Pen.svelte'
 import Cross from '$lib/assets/icons/Cross.svelte'
 import Plus from '$lib/assets/icons/Plus.svelte'
 import Check from '$lib/assets/icons/Check.svelte'
-import { Timer, Wheat, Croissant, Flame, CookingPot, UtensilsCrossed } from '@lucide/svelte';
-
+import Timer from '@lucide/svelte/icons/timer';
+import Wheat from '@lucide/svelte/icons/wheat';
+import Croissant from '@lucide/svelte/icons/croissant';
+import Flame from '@lucide/svelte/icons/flame';
+import CookingPot from '@lucide/svelte/icons/cooking-pot';
+import UtensilsCrossed from '@lucide/svelte/icons/utensils-crossed';
 import "$lib/css/action_button.css"
 
 import { do_on_key } from '$lib/components/recipes/do_on_key.js'
diff --git a/src/lib/components/recipes/InstructionsPage.svelte b/src/lib/components/recipes/InstructionsPage.svelte
index f4f83d03..17f54d9e 100644
--- a/src/lib/components/recipes/InstructionsPage.svelte
+++ b/src/lib/components/recipes/InstructionsPage.svelte
@@ -1,5 +1,10 @@
 <script>
-import { Timer, Wheat, Croissant, Flame, CookingPot, UtensilsCrossed } from '@lucide/svelte';
+import Timer from '@lucide/svelte/icons/timer';
+import Wheat from '@lucide/svelte/icons/wheat';
+import Croissant from '@lucide/svelte/icons/croissant';
+import Flame from '@lucide/svelte/icons/flame';
+import CookingPot from '@lucide/svelte/icons/cooking-pot';
+import UtensilsCrossed from '@lucide/svelte/icons/utensils-crossed';
 let { data } = $props();
 
 // svelte-ignore state_referenced_locally
diff --git a/src/lib/components/tasks/StickerCalendar.svelte b/src/lib/components/tasks/StickerCalendar.svelte
index 00fd1dc8..cfb0f736 100644
--- a/src/lib/components/tasks/StickerCalendar.svelte
+++ b/src/lib/components/tasks/StickerCalendar.svelte
@@ -1,5 +1,6 @@
 <script>
-  import { ChevronLeft, ChevronRight } from '@lucide/svelte';
+  import ChevronLeft from '@lucide/svelte/icons/chevron-left';
+  import ChevronRight from '@lucide/svelte/icons/chevron-right';
   import { getStickerById } from '$lib/utils/stickers';
   import {
     startOfMonth, endOfMonth, startOfWeek, endOfWeek,
diff --git a/src/lib/components/tasks/TaskForm.svelte b/src/lib/components/tasks/TaskForm.svelte
index 908b5c99..183294b9 100644
--- a/src/lib/components/tasks/TaskForm.svelte
+++ b/src/lib/components/tasks/TaskForm.svelte
@@ -1,6 +1,18 @@
 <script>
-  import { X, Sparkles, Wind, Bath, UtensilsCrossed, CookingPot, WashingMachine,
-    Flower2, Droplets, Leaf, ShoppingCart, Trash2, Shirt, Brush } from '@lucide/svelte';
+  import X from '@lucide/svelte/icons/x';
+  import Sparkles from '@lucide/svelte/icons/sparkles';
+  import Wind from '@lucide/svelte/icons/wind';
+  import Bath from '@lucide/svelte/icons/bath';
+  import UtensilsCrossed from '@lucide/svelte/icons/utensils-crossed';
+  import CookingPot from '@lucide/svelte/icons/cooking-pot';
+  import WashingMachine from '@lucide/svelte/icons/washing-machine';
+  import Flower2 from '@lucide/svelte/icons/flower-2';
+  import Droplets from '@lucide/svelte/icons/droplets';
+  import Leaf from '@lucide/svelte/icons/leaf';
+  import ShoppingCart from '@lucide/svelte/icons/shopping-cart';
+  import Trash2 from '@lucide/svelte/icons/trash-2';
+  import Shirt from '@lucide/svelte/icons/shirt';
+  import Brush from '@lucide/svelte/icons/brush';
   import ProfilePicture from '$lib/components/cospend/ProfilePicture.svelte';
   import Toggle from '$lib/components/Toggle.svelte';
   import DatePicker from '$lib/components/DatePicker.svelte';
diff --git a/src/routes/[cospendRoot=cospendRoot]/+layout.svelte b/src/routes/[cospendRoot=cospendRoot]/+layout.svelte
index 98ab9db6..2739579e 100644
--- a/src/routes/[cospendRoot=cospendRoot]/+layout.svelte
+++ b/src/routes/[cospendRoot=cospendRoot]/+layout.svelte
@@ -8,7 +8,10 @@
   import Header from '$lib/components/Header.svelte';
   import UserHeader from '$lib/components/UserHeader.svelte';
   import LanguageSelector from '$lib/components/LanguageSelector.svelte';
-  import { LayoutDashboard, Wallet, RefreshCw, ShoppingCart } from '@lucide/svelte';
+  import LayoutDashboard from '@lucide/svelte/icons/layout-dashboard';
+  import Wallet from '@lucide/svelte/icons/wallet';
+  import RefreshCw from '@lucide/svelte/icons/refresh-cw';
+  import ShoppingCart from '@lucide/svelte/icons/shopping-cart';
   import { detectCospendLang, cospendRoot, cospendLabels } from '$lib/js/cospendI18n';
 
   let { data, children } = $props();
diff --git a/src/routes/[cospendRoot=cospendRoot]/list/+page.svelte b/src/routes/[cospendRoot=cospendRoot]/list/+page.svelte
index 565b7d68..bb30311b 100644
--- a/src/routes/[cospendRoot=cospendRoot]/list/+page.svelte
+++ b/src/routes/[cospendRoot=cospendRoot]/list/+page.svelte
@@ -2,7 +2,22 @@
   import { onMount, onDestroy, untrack } from 'svelte';
   import { getShoppingSync } from '$lib/js/shoppingSync.svelte';
   import { SHOPPING_CATEGORIES } from '$lib/data/shoppingCategoryItems';
-  import { Plus, ListX, Apple, Beef, Milk, Croissant, Wheat, FlameKindling, GlassWater, Candy, Snowflake, SprayCan, Sparkles, Package, Search, Store } from '@lucide/svelte';
+  import Plus from '@lucide/svelte/icons/plus';
+  import ListX from '@lucide/svelte/icons/list-x';
+  import Apple from '@lucide/svelte/icons/apple';
+  import Beef from '@lucide/svelte/icons/beef';
+  import Milk from '@lucide/svelte/icons/milk';
+  import Croissant from '@lucide/svelte/icons/croissant';
+  import Wheat from '@lucide/svelte/icons/wheat';
+  import FlameKindling from '@lucide/svelte/icons/flame-kindling';
+  import GlassWater from '@lucide/svelte/icons/glass-water';
+  import Candy from '@lucide/svelte/icons/candy';
+  import Snowflake from '@lucide/svelte/icons/snowflake';
+  import SprayCan from '@lucide/svelte/icons/spray-can';
+  import Sparkles from '@lucide/svelte/icons/sparkles';
+  import Package from '@lucide/svelte/icons/package';
+  import Search from '@lucide/svelte/icons/search';
+  import Store from '@lucide/svelte/icons/store';
   import SyncIndicator from '$lib/components/fitness/SyncIndicator.svelte';
   import { flip } from 'svelte/animate';
   import { slide } from 'svelte/transition';
@@ -10,7 +25,13 @@
   import catalogData from '$lib/data/shoppingCatalog.json';
   import iconCategoriesData from '$lib/data/shoppingIconCategories.json';
 
-  import { Share2, X, Copy, Check } from '@lucide/svelte';
+  import Share2 from '@lucide/svelte/icons/share-2';
+
+  import X from '@lucide/svelte/icons/x';
+
+  import Copy from '@lucide/svelte/icons/copy';
+
+  import Check from '@lucide/svelte/icons/check';
   import { page } from '$app/stores';
   import { detectCospendLang, t, locale, categoryName, formatTTL as formatTTLi18n, ttlOptions } from '$lib/js/cospendI18n';
 
diff --git a/src/routes/[faithLang=faithLang]/[rosary=rosaryLang]/+page.svelte b/src/routes/[faithLang=faithLang]/[rosary=rosaryLang]/+page.svelte
index 0ab9433e..8bc892c7 100644
--- a/src/routes/[faithLang=faithLang]/[rosary=rosaryLang]/+page.svelte
+++ b/src/routes/[faithLang=faithLang]/[rosary=rosaryLang]/+page.svelte
@@ -27,7 +27,7 @@ import MysteryImageColumn from "./MysteryImageColumn.svelte";
 import { mysteries, mysteriesLatin, mysteriesEnglish, mysteryTitles, mysteryTitlesEnglish, mysteryTitlesLatin, allMysteryImages, getLabels, getLabelsLatin, getMysteryForWeekday, BEAD_SPACING, DECADE_OFFSET, sectionPositions } from "./rosaryData.js";
 import { isEastertide, getLiturgicalSeason } from "$lib/js/easter.svelte";
 import { setupScrollSync } from "./rosaryScrollSync.js";
-import { BookOpen } from "@lucide/svelte";
+import BookOpen from '@lucide/svelte/icons/book-open';
 let { data } = $props();
 
 // Toggle for including Luminous mysteries (initialized from URL param or default)
diff --git a/src/routes/[faithLang=faithLang]/katechese/zehn-gebote/+page.svelte b/src/routes/[faithLang=faithLang]/katechese/zehn-gebote/+page.svelte
index c2c54243..6ff39812 100644
--- a/src/routes/[faithLang=faithLang]/katechese/zehn-gebote/+page.svelte
+++ b/src/routes/[faithLang=faithLang]/katechese/zehn-gebote/+page.svelte
@@ -1,5 +1,6 @@
 <script>
-	import { ArrowDown, ArrowLeft } from '@lucide/svelte';
+	import ArrowDown from '@lucide/svelte/icons/arrow-down';
+	import ArrowLeft from '@lucide/svelte/icons/arrow-left';
 	import { page } from '$app/stores';
 	/** @type {number | string | null} */
 	let expanded = $state(null);
diff --git a/src/routes/[recipeLang=recipeLang]/+layout.svelte b/src/routes/[recipeLang=recipeLang]/+layout.svelte
index 85c17042..9c0a9758 100644
--- a/src/routes/[recipeLang=recipeLang]/+layout.svelte
+++ b/src/routes/[recipeLang=recipeLang]/+layout.svelte
@@ -45,7 +45,12 @@ onNavigate((navigation) => {
 import UserHeader from '$lib/components/UserHeader.svelte';
 import LanguageSelector from '$lib/components/LanguageSelector.svelte';
 import OfflineSyncButton from '$lib/components/OfflineSyncButton.svelte';
-import { BookOpen, Heart, Leaf, LayoutGrid, Palette, Tag } from '@lucide/svelte';
+import BookOpen from '@lucide/svelte/icons/book-open';
+import Heart from '@lucide/svelte/icons/heart';
+import Leaf from '@lucide/svelte/icons/leaf';
+import LayoutGrid from '@lucide/svelte/icons/layout-grid';
+import Palette from '@lucide/svelte/icons/palette';
+import Tag from '@lucide/svelte/icons/tag';
 let { data, children } = $props();
 
 let user = $derived(data.session?.user);
diff --git a/src/routes/fitness/+layout.svelte b/src/routes/fitness/+layout.svelte
index 7dba7751..8f66c1f9 100644
--- a/src/routes/fitness/+layout.svelte
+++ b/src/routes/fitness/+layout.svelte
@@ -4,7 +4,12 @@
 	import Header from '$lib/components/Header.svelte';
 	import UserHeader from '$lib/components/UserHeader.svelte';
 	import LanguageSelector from '$lib/components/LanguageSelector.svelte';
-	import { BarChart3, Clock, Dumbbell, ListChecks, NotebookPen, UtensilsCrossed } from '@lucide/svelte';
+	import BarChart3 from '@lucide/svelte/icons/bar-chart-3';
+	import Clock from '@lucide/svelte/icons/clock';
+	import Dumbbell from '@lucide/svelte/icons/dumbbell';
+	import ListChecks from '@lucide/svelte/icons/list-checks';
+	import NotebookPen from '@lucide/svelte/icons/notebook-pen';
+	import UtensilsCrossed from '@lucide/svelte/icons/utensils-crossed';
 	import { getWorkout } from '$lib/js/workout.svelte';
 	import { getWorkoutSync } from '$lib/js/workoutSync.svelte';
 	import WorkoutFab from '$lib/components/fitness/WorkoutFab.svelte';
diff --git a/src/routes/fitness/[checkin=fitnessCheckIn]/+page.svelte b/src/routes/fitness/[checkin=fitnessCheckIn]/+page.svelte
index c6238542..28dcd2b8 100644
--- a/src/routes/fitness/[checkin=fitnessCheckIn]/+page.svelte
+++ b/src/routes/fitness/[checkin=fitnessCheckIn]/+page.svelte
@@ -1,6 +1,18 @@
 <script>
 	import { page } from '$app/stores';
-	import { Pencil, Trash2, ChevronRight, Venus, Mars, Weight, Percent, Plus, Minus, X, Check, UserCog, Sparkles } from '@lucide/svelte';
+	import Pencil from '@lucide/svelte/icons/pencil';
+	import Trash2 from '@lucide/svelte/icons/trash-2';
+	import ChevronRight from '@lucide/svelte/icons/chevron-right';
+	import Venus from '@lucide/svelte/icons/venus';
+	import Mars from '@lucide/svelte/icons/mars';
+	import Weight from '@lucide/svelte/icons/weight';
+	import Percent from '@lucide/svelte/icons/percent';
+	import Plus from '@lucide/svelte/icons/plus';
+	import Minus from '@lucide/svelte/icons/minus';
+	import X from '@lucide/svelte/icons/x';
+	import Check from '@lucide/svelte/icons/check';
+	import UserCog from '@lucide/svelte/icons/user-cog';
+	import Sparkles from '@lucide/svelte/icons/sparkles';
 	import { detectFitnessLang, t } from '$lib/js/fitnessI18n';
 	import { toast } from '$lib/js/toast.svelte';
 	import { confirm } from '$lib/js/confirmDialog.svelte';
diff --git a/src/routes/fitness/[checkin=fitnessCheckIn]/body-parts/+page.svelte b/src/routes/fitness/[checkin=fitnessCheckIn]/body-parts/+page.svelte
index 77d59366..25936b48 100644
--- a/src/routes/fitness/[checkin=fitnessCheckIn]/body-parts/+page.svelte
+++ b/src/routes/fitness/[checkin=fitnessCheckIn]/body-parts/+page.svelte
@@ -1,7 +1,16 @@
 <script>
 	import { page } from '$app/stores';
 	import { goto } from '$app/navigation';
-	import { Minus, Plus, X, ArrowLeft, ArrowRight, Check, Ruler, CopyPlus, TrendingUp, History } from '@lucide/svelte';
+	import Minus from '@lucide/svelte/icons/minus';
+	import Plus from '@lucide/svelte/icons/plus';
+	import X from '@lucide/svelte/icons/x';
+	import ArrowLeft from '@lucide/svelte/icons/arrow-left';
+	import ArrowRight from '@lucide/svelte/icons/arrow-right';
+	import Check from '@lucide/svelte/icons/check';
+	import Ruler from '@lucide/svelte/icons/ruler';
+	import CopyPlus from '@lucide/svelte/icons/copy-plus';
+	import TrendingUp from '@lucide/svelte/icons/trending-up';
+	import History from '@lucide/svelte/icons/history';
 	import { fly, fade } from 'svelte/transition';
 	import { cubicOut } from 'svelte/easing';
 	import { detectFitnessLang, t } from '$lib/js/fitnessI18n';
diff --git a/src/routes/fitness/[checkin=fitnessCheckIn]/edit/[id]/+page.svelte b/src/routes/fitness/[checkin=fitnessCheckIn]/edit/[id]/+page.svelte
index 19e51b4b..81b96416 100644
--- a/src/routes/fitness/[checkin=fitnessCheckIn]/edit/[id]/+page.svelte
+++ b/src/routes/fitness/[checkin=fitnessCheckIn]/edit/[id]/+page.svelte
@@ -4,7 +4,7 @@
 	import { detectFitnessLang, t } from '$lib/js/fitnessI18n';
 	import { toast } from '$lib/js/toast.svelte';
 	import { confirm } from '$lib/js/confirmDialog.svelte';
-	import { Trash2 } from '@lucide/svelte';
+	import Trash2 from '@lucide/svelte/icons/trash-2';
 	import SaveFab from '$lib/components/SaveFab.svelte';
 	import DatePicker from '$lib/components/DatePicker.svelte';
 
diff --git a/src/routes/fitness/[exercises=fitnessExercises]/+page.svelte b/src/routes/fitness/[exercises=fitnessExercises]/+page.svelte
index 519b7798..3143f6f3 100644
--- a/src/routes/fitness/[exercises=fitnessExercises]/+page.svelte
+++ b/src/routes/fitness/[exercises=fitnessExercises]/+page.svelte
@@ -1,6 +1,14 @@
 <script>
 	import { page } from '$app/stores';
-	import { Search, Cable, Cog, Dumbbell, PersonStanding, Shapes, Weight, BicepsFlexed, Layers } from '@lucide/svelte';
+	import Search from '@lucide/svelte/icons/search';
+	import Cable from '@lucide/svelte/icons/cable';
+	import Cog from '@lucide/svelte/icons/cog';
+	import Dumbbell from '@lucide/svelte/icons/dumbbell';
+	import PersonStanding from '@lucide/svelte/icons/person-standing';
+	import Shapes from '@lucide/svelte/icons/shapes';
+	import Weight from '@lucide/svelte/icons/weight';
+	import BicepsFlexed from '@lucide/svelte/icons/biceps-flexed';
+	import Layers from '@lucide/svelte/icons/layers';
 	import { getFilterOptionsAll, searchAllExercises, isStretchType } from '$lib/data/exercisedb';
 	import { translateTerm } from '$lib/data/exercises';
 	import { detectFitnessLang, fitnessSlugs, t } from '$lib/js/fitnessI18n';
diff --git a/src/routes/fitness/[exercises=fitnessExercises]/[id]/+page.svelte b/src/routes/fitness/[exercises=fitnessExercises]/[id]/+page.svelte
index c9aab4b5..b8aebb30 100644
--- a/src/routes/fitness/[exercises=fitnessExercises]/[id]/+page.svelte
+++ b/src/routes/fitness/[exercises=fitnessExercises]/[id]/+page.svelte
@@ -20,8 +20,7 @@
 		}
 	}
 	import { detectFitnessLang, fitnessSlugs, t } from '$lib/js/fitnessI18n';
-	import { ChevronRight } from '@lucide/svelte';
-
+	import ChevronRight from '@lucide/svelte/icons/chevron-right';
 	const lang = $derived(detectFitnessLang($page.url.pathname));
 	const s = $derived(fitnessSlugs(lang));
 	import FitnessChart from '$lib/components/fitness/FitnessChart.svelte';
diff --git a/src/routes/fitness/[history=fitnessHistory]/[[month=fitnessMonth]]/+page.svelte b/src/routes/fitness/[history=fitnessHistory]/[[month=fitnessMonth]]/+page.svelte
index ba3a6be7..e9a4b8dc 100644
--- a/src/routes/fitness/[history=fitnessHistory]/[[month=fitnessMonth]]/+page.svelte
+++ b/src/routes/fitness/[history=fitnessHistory]/[[month=fitnessMonth]]/+page.svelte
@@ -1,6 +1,7 @@
 <script>
 	import { page as appPage } from '$app/stores';
-	import { ChevronLeft, ChevronRight } from '@lucide/svelte';
+	import ChevronLeft from '@lucide/svelte/icons/chevron-left';
+	import ChevronRight from '@lucide/svelte/icons/chevron-right';
 	import SessionCard from '$lib/components/fitness/SessionCard.svelte';
 	import { detectFitnessLang, fitnessSlugs, t } from '$lib/js/fitnessI18n';
 
diff --git a/src/routes/fitness/[history=fitnessHistory]/[id]/+page.svelte b/src/routes/fitness/[history=fitnessHistory]/[id]/+page.svelte
index d7e05794..f733cc27 100644
--- a/src/routes/fitness/[history=fitnessHistory]/[id]/+page.svelte
+++ b/src/routes/fitness/[history=fitnessHistory]/[id]/+page.svelte
@@ -1,7 +1,21 @@
 <script>
 	import { goto, invalidateAll } from '$app/navigation';
 	import { page } from '$app/stores';
-	import { Clock, Weight, Trophy, Trash2, Pencil, Plus, Upload, Download, Route, X, RefreshCw, Gauge, Flame, Info, Mountain } from '@lucide/svelte';
+	import Clock from '@lucide/svelte/icons/clock';
+	import Weight from '@lucide/svelte/icons/weight';
+	import Trophy from '@lucide/svelte/icons/trophy';
+	import Trash2 from '@lucide/svelte/icons/trash-2';
+	import Pencil from '@lucide/svelte/icons/pencil';
+	import Plus from '@lucide/svelte/icons/plus';
+	import Upload from '@lucide/svelte/icons/upload';
+	import Download from '@lucide/svelte/icons/download';
+	import Route from '@lucide/svelte/icons/route';
+	import X from '@lucide/svelte/icons/x';
+	import RefreshCw from '@lucide/svelte/icons/refresh-cw';
+	import Gauge from '@lucide/svelte/icons/gauge';
+	import Flame from '@lucide/svelte/icons/flame';
+	import Info from '@lucide/svelte/icons/info';
+	import Mountain from '@lucide/svelte/icons/mountain';
 	import { detectFitnessLang, fitnessSlugs, t } from '$lib/js/fitnessI18n';
 	import { confirm } from '$lib/js/confirmDialog.svelte';
 	import { toast } from '$lib/js/toast.svelte';
diff --git a/src/routes/fitness/[nutrition=fitnessNutrition]/[[date=fitnessDate]]/+page.svelte b/src/routes/fitness/[nutrition=fitnessNutrition]/[[date=fitnessDate]]/+page.svelte
index cb17ba68..7562e75f 100644
--- a/src/routes/fitness/[nutrition=fitnessNutrition]/[[date=fitnessDate]]/+page.svelte
+++ b/src/routes/fitness/[nutrition=fitnessNutrition]/[[date=fitnessDate]]/+page.svelte
@@ -1,7 +1,29 @@
 <script>
 	import { page } from '$app/stores';
 	import { goto, invalidateAll } from '$app/navigation';
-	import { ChevronLeft, ChevronRight, Plus, Trash2, ChevronDown, Settings, Coffee, Sun, Moon, Cookie, Utensils, Info, UtensilsCrossed, AlertTriangle, Check, GlassWater, Pencil, Heart, Clock, Search, Beef, Droplet, Wheat } from '@lucide/svelte';
+	import ChevronLeft from '@lucide/svelte/icons/chevron-left';
+	import ChevronRight from '@lucide/svelte/icons/chevron-right';
+	import Plus from '@lucide/svelte/icons/plus';
+	import Trash2 from '@lucide/svelte/icons/trash-2';
+	import ChevronDown from '@lucide/svelte/icons/chevron-down';
+	import Settings from '@lucide/svelte/icons/settings';
+	import Coffee from '@lucide/svelte/icons/coffee';
+	import Sun from '@lucide/svelte/icons/sun';
+	import Moon from '@lucide/svelte/icons/moon';
+	import Cookie from '@lucide/svelte/icons/cookie';
+	import Utensils from '@lucide/svelte/icons/utensils';
+	import Info from '@lucide/svelte/icons/info';
+	import UtensilsCrossed from '@lucide/svelte/icons/utensils-crossed';
+	import AlertTriangle from '@lucide/svelte/icons/alert-triangle';
+	import Check from '@lucide/svelte/icons/check';
+	import GlassWater from '@lucide/svelte/icons/glass-water';
+	import Pencil from '@lucide/svelte/icons/pencil';
+	import Heart from '@lucide/svelte/icons/heart';
+	import Clock from '@lucide/svelte/icons/clock';
+	import Search from '@lucide/svelte/icons/search';
+	import Beef from '@lucide/svelte/icons/beef';
+	import Droplet from '@lucide/svelte/icons/droplet';
+	import Wheat from '@lucide/svelte/icons/wheat';
 	import { detectFitnessLang, fitnessSlugs, t } from '$lib/js/fitnessI18n';
 	import AddButton from '$lib/components/AddButton.svelte';
 	import FoodSearch from '$lib/components/fitness/FoodSearch.svelte';
diff --git a/src/routes/fitness/[nutrition=fitnessNutrition]/food/[source]/[id]/+page.svelte b/src/routes/fitness/[nutrition=fitnessNutrition]/food/[source]/[id]/+page.svelte
index a2b03686..d3b47941 100644
--- a/src/routes/fitness/[nutrition=fitnessNutrition]/food/[source]/[id]/+page.svelte
+++ b/src/routes/fitness/[nutrition=fitnessNutrition]/food/[source]/[id]/+page.svelte
@@ -1,6 +1,11 @@
 <script>
 	import { page } from '$app/stores';
-	import { ChevronDown, ExternalLink, Heart, Beef, Droplet, Wheat } from '@lucide/svelte';
+	import ChevronDown from '@lucide/svelte/icons/chevron-down';
+	import ExternalLink from '@lucide/svelte/icons/external-link';
+	import Heart from '@lucide/svelte/icons/heart';
+	import Beef from '@lucide/svelte/icons/beef';
+	import Droplet from '@lucide/svelte/icons/droplet';
+	import Wheat from '@lucide/svelte/icons/wheat';
 	import { toast } from '$lib/js/toast.svelte';
 	import { detectFitnessLang, fitnessSlugs, t } from '$lib/js/fitnessI18n';
 	import { NUTRIENT_META } from '$lib/data/dailyReferenceIntake';
diff --git a/src/routes/fitness/[nutrition=fitnessNutrition]/meals/+page.svelte b/src/routes/fitness/[nutrition=fitnessNutrition]/meals/+page.svelte
index 0332944e..9d0098e1 100644
--- a/src/routes/fitness/[nutrition=fitnessNutrition]/meals/+page.svelte
+++ b/src/routes/fitness/[nutrition=fitnessNutrition]/meals/+page.svelte
@@ -1,7 +1,11 @@
 <script>
 	import { page } from '$app/stores';
 	import { untrack } from 'svelte';
-	import { Plus, Trash2, Pencil, UtensilsCrossed, X } from '@lucide/svelte';
+	import Plus from '@lucide/svelte/icons/plus';
+	import Trash2 from '@lucide/svelte/icons/trash-2';
+	import Pencil from '@lucide/svelte/icons/pencil';
+	import UtensilsCrossed from '@lucide/svelte/icons/utensils-crossed';
+	import X from '@lucide/svelte/icons/x';
 	import { detectFitnessLang, fitnessSlugs, t } from '$lib/js/fitnessI18n';
 	import { toast } from '$lib/js/toast.svelte';
 	import { confirm } from '$lib/js/confirmDialog.svelte';
diff --git a/src/routes/fitness/[stats=fitnessStats]/+page.svelte b/src/routes/fitness/[stats=fitnessStats]/+page.svelte
index 06a0b09a..6611c1b6 100644
--- a/src/routes/fitness/[stats=fitnessStats]/+page.svelte
+++ b/src/routes/fitness/[stats=fitnessStats]/+page.svelte
@@ -3,7 +3,17 @@
 	import { page } from '$app/stores';
 	import FitnessChart from '$lib/components/fitness/FitnessChart.svelte';
 	import MuscleHeatmap from '$lib/components/fitness/MuscleHeatmap.svelte';
-	import { Dumbbell, Route, Flame, Weight, Beef, Droplet, Wheat, Scale, Target, Info, Ruler } from '@lucide/svelte';
+	import Dumbbell from '@lucide/svelte/icons/dumbbell';
+	import Route from '@lucide/svelte/icons/route';
+	import Flame from '@lucide/svelte/icons/flame';
+	import Weight from '@lucide/svelte/icons/weight';
+	import Beef from '@lucide/svelte/icons/beef';
+	import Droplet from '@lucide/svelte/icons/droplet';
+	import Wheat from '@lucide/svelte/icons/wheat';
+	import Scale from '@lucide/svelte/icons/scale';
+	import Target from '@lucide/svelte/icons/target';
+	import Info from '@lucide/svelte/icons/info';
+	import Ruler from '@lucide/svelte/icons/ruler';
 	import FitnessStreakAura from '$lib/components/fitness/FitnessStreakAura.svelte';
 	import PeriodTracker from '$lib/components/fitness/PeriodTracker.svelte';
 	import { onMount } from 'svelte';
diff --git a/src/routes/fitness/[stats=fitnessStats]/[history=fitnessHistory]/[part]/+page.svelte b/src/routes/fitness/[stats=fitnessStats]/[history=fitnessHistory]/[part]/+page.svelte
index 1f655099..dea66e93 100644
--- a/src/routes/fitness/[stats=fitnessStats]/[history=fitnessHistory]/[part]/+page.svelte
+++ b/src/routes/fitness/[stats=fitnessStats]/[history=fitnessHistory]/[part]/+page.svelte
@@ -1,6 +1,10 @@
 <script>
 	import { page } from '$app/stores';
-	import { ArrowLeft, Ruler, TrendingUp, TrendingDown, Minus as MinusIcon } from '@lucide/svelte';
+	import ArrowLeft from '@lucide/svelte/icons/arrow-left';
+	import Ruler from '@lucide/svelte/icons/ruler';
+	import TrendingUp from '@lucide/svelte/icons/trending-up';
+	import TrendingDown from '@lucide/svelte/icons/trending-down';
+	import MinusIcon from '@lucide/svelte/icons/minus';
 	import { detectFitnessLang, t } from '$lib/js/fitnessI18n';
 	import FitnessChart from '$lib/components/fitness/FitnessChart.svelte';
 	import { bodyPartAccent } from '$lib/js/fitnessBodyParts';
diff --git a/src/routes/fitness/[workout=fitnessWorkout]/+page.svelte b/src/routes/fitness/[workout=fitnessWorkout]/+page.svelte
index 85b1277f..60880a0a 100644
--- a/src/routes/fitness/[workout=fitnessWorkout]/+page.svelte
+++ b/src/routes/fitness/[workout=fitnessWorkout]/+page.svelte
@@ -2,7 +2,21 @@
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
 	import { onMount } from 'svelte';
-	import { Plus, Trash2, Play, Pencil, X, Save, CalendarClock, ChevronUp, ChevronDown, ArrowRight, MapPin, Dumbbell, Timer, BookOpen, Check } from '@lucide/svelte';
+	import Plus from '@lucide/svelte/icons/plus';
+	import Trash2 from '@lucide/svelte/icons/trash-2';
+	import Play from '@lucide/svelte/icons/play';
+	import Pencil from '@lucide/svelte/icons/pencil';
+	import X from '@lucide/svelte/icons/x';
+	import Save from '@lucide/svelte/icons/save';
+	import CalendarClock from '@lucide/svelte/icons/calendar-clock';
+	import ChevronUp from '@lucide/svelte/icons/chevron-up';
+	import ChevronDown from '@lucide/svelte/icons/chevron-down';
+	import ArrowRight from '@lucide/svelte/icons/arrow-right';
+	import MapPin from '@lucide/svelte/icons/map-pin';
+	import Dumbbell from '@lucide/svelte/icons/dumbbell';
+	import Timer from '@lucide/svelte/icons/timer';
+	import BookOpen from '@lucide/svelte/icons/book-open';
+	import Check from '@lucide/svelte/icons/check';
 	import { getWorkout } from '$lib/js/workout.svelte';
 	import { getWorkoutSync } from '$lib/js/workoutSync.svelte';
 	import { flattenIntervals } from '$lib/js/gps.svelte';
diff --git a/src/routes/fitness/[workout=fitnessWorkout]/[active=fitnessActive]/+page.svelte b/src/routes/fitness/[workout=fitnessWorkout]/[active=fitnessActive]/+page.svelte
index 4a27f835..f8410b17 100644
--- a/src/routes/fitness/[workout=fitnessWorkout]/[active=fitnessActive]/+page.svelte
+++ b/src/routes/fitness/[workout=fitnessWorkout]/[active=fitnessActive]/+page.svelte
@@ -1,7 +1,25 @@
 <script>
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
-	import { Trash2, Play, Pause, Trophy, Clock, Dumbbell, Route, RefreshCw, Check, ChevronUp, ChevronDown, Flame, MapPin, Volume2, X, Timer, Plus, GripVertical, Repeat } from '@lucide/svelte';
+	import Trash2 from '@lucide/svelte/icons/trash-2';
+	import Play from '@lucide/svelte/icons/play';
+	import Pause from '@lucide/svelte/icons/pause';
+	import Trophy from '@lucide/svelte/icons/trophy';
+	import Clock from '@lucide/svelte/icons/clock';
+	import Dumbbell from '@lucide/svelte/icons/dumbbell';
+	import Route from '@lucide/svelte/icons/route';
+	import RefreshCw from '@lucide/svelte/icons/refresh-cw';
+	import Check from '@lucide/svelte/icons/check';
+	import ChevronUp from '@lucide/svelte/icons/chevron-up';
+	import ChevronDown from '@lucide/svelte/icons/chevron-down';
+	import Flame from '@lucide/svelte/icons/flame';
+	import MapPin from '@lucide/svelte/icons/map-pin';
+	import Volume2 from '@lucide/svelte/icons/volume-2';
+	import X from '@lucide/svelte/icons/x';
+	import Timer from '@lucide/svelte/icons/timer';
+	import Plus from '@lucide/svelte/icons/plus';
+	import GripVertical from '@lucide/svelte/icons/grip-vertical';
+	import Repeat from '@lucide/svelte/icons/repeat';
 	import { detectFitnessLang, fitnessSlugs, t } from '$lib/js/fitnessI18n';
 	import { confirm } from '$lib/js/confirmDialog.svelte';
 	import { toast } from '$lib/js/toast.svelte';
diff --git a/src/routes/measure-mock/+page.svelte b/src/routes/measure-mock/+page.svelte
new file mode 100644
index 00000000..2a6d9db9
--- /dev/null
+++ b/src/routes/measure-mock/+page.svelte
@@ -0,0 +1,1267 @@
+<script>
+	import Minus from '@lucide/svelte/icons/minus';
+	import Plus from '@lucide/svelte/icons/plus';
+	import X from '@lucide/svelte/icons/x';
+	import ArrowLeft from '@lucide/svelte/icons/arrow-left';
+	import ArrowRight from '@lucide/svelte/icons/arrow-right';
+	import Check from '@lucide/svelte/icons/check';
+	import Ruler from '@lucide/svelte/icons/ruler';
+	import CopyPlus from '@lucide/svelte/icons/copy-plus';
+	import TrendingUp from '@lucide/svelte/icons/trending-up';
+	import { fly, fade } from 'svelte/transition';
+	import { cubicOut } from 'svelte/easing';
+
+	/** @typedef {{ key: string, label: string, img: string | null, paired: boolean, tip: string }} Step */
+
+	/** @type {Step[]} */
+	const steps = [
+		{ key: 'neck',      label: 'Neck',      img: 'neck.png',      paired: false, tip: 'Just below the Adam\u2019s apple, tape parallel to the floor.' },
+		{ key: 'shoulders', label: 'Shoulders', img: 'shoulders.png', paired: false, tip: 'Widest point across the deltoids, arms relaxed at your sides.' },
+		{ key: 'chest',     label: 'Chest',     img: null,            paired: false, tip: 'At nipple line after a normal exhale, tape horizontal.' },
+		{ key: 'biceps',    label: 'Biceps',    img: 'bicep.png',     paired: true,  tip: 'Arm flexed at the peak; tape around the thickest part.' },
+		{ key: 'forearms',  label: 'Forearms',  img: null,            paired: true,  tip: 'Widest point below the elbow, arm hanging relaxed.' },
+		{ key: 'waist',     label: 'Waist',     img: 'waist.png',     paired: false, tip: 'At the navel, relaxed — don\u2019t suck in.' },
+		{ key: 'hips',      label: 'Hips',      img: null,            paired: false, tip: 'Around the widest point of the buttocks.' },
+		{ key: 'thighs',    label: 'Thighs',    img: 'thigh.png',     paired: true,  tip: 'Midway between hip crease and knee.' },
+		{ key: 'calves',    label: 'Calves',    img: 'calves.png',    paired: true,  tip: 'Widest point, standing with weight on both feet.' }
+	];
+
+	// Seeded fake history to demonstrate the graph. In production this comes from the measurements API.
+	const dates = ['2025-08-12', '2025-09-20', '2025-10-18', '2025-11-14', '2025-12-22', '2026-02-05', '2026-03-17'];
+	/** @type {Record<string, any[]>} */
+	const history = {
+		neck:      dates.slice(2).map((d, i) => ({ date: d, value: 38.6 + i * 0.15 + (i % 2 ? 0.08 : -0.1) })),
+		shoulders: dates.map((d, i) => ({ date: d, value: 117.4 + i * 0.4 })),
+		chest:     [],
+		biceps:    dates.slice(1).map((d, i) => ({ date: d, left: 33.2 + i * 0.25, right: 33.0 + i * 0.22 })),
+		forearms:  dates.slice(3).map((d, i) => ({ date: d, left: 27.8 + i * 0.1, right: 27.6 + i * 0.12 })),
+		waist:     dates.map((d, i) => ({ date: d, value: 83.2 - i * 0.4 + (i % 2 ? 0.1 : -0.2) })),
+		hips:      dates.slice(1).map((d, i) => ({ date: d, value: 96.2 + (i % 2 ? 0.25 : -0.15) })),
+		thighs:    dates.slice(2).map((d, i) => ({ date: d, left: 55.5 + i * 0.2, right: 55.7 + i * 0.2 })),
+		calves:    []
+	};
+
+	/** @type {Record<string, any>} */
+	const initial = {};
+	for (const s of steps) {
+		initial[s.key] = s.paired ? { left: '', right: '', same: true } : '';
+	}
+	let values = $state(initial);
+
+	let idx = $state(0);
+	let direction = $state(1);
+
+	const total = steps.length;
+	const step = $derived(steps[idx] ?? steps[0]);
+	const done = $derived(idx >= total);
+
+	/** @param {string} key @param {'left'|'right'|null} side @param {number} delta */
+	function bump(key, side, delta) {
+		if (side) {
+			const cur = Number(values[key][side]) || 0;
+			values[key][side] = String(Math.round((cur + delta) * 10) / 10);
+		} else {
+			const cur = Number(values[key]) || 0;
+			values[key] = String(Math.round((cur + delta) * 10) / 10);
+		}
+	}
+
+	/** @param {WheelEvent} e @param {string} key @param {'left'|'right'|null} side */
+	function onWheel(e, key, side) {
+		if (!e.deltaY) return;
+		e.preventDefault();
+		bump(key, side, e.deltaY < 0 ? 0.1 : -0.1);
+	}
+
+	function next() { direction = 1; if (idx < total) idx += 1; }
+	function back() { direction = -1; if (idx > 0) idx -= 1; }
+	function skip() {
+		const s = steps[idx];
+		values[s.key] = s.paired ? { left: '', right: '', same: true } : '';
+		next();
+	}
+	/** @param {string} key */
+	function copyLtoR(key) { values[key].right = values[key].left; }
+	/** @param {number} i */
+	function jumpTo(i) {
+		direction = i > idx ? 1 : -1;
+		idx = i;
+	}
+
+	/** @param {Step} s */
+	function isFilled(s) {
+		const v = values[s.key];
+		if (s.paired) return !!(v.left || v.right);
+		return !!v;
+	}
+	/** @param {Step} s */
+	function formatValue(s) {
+		const v = values[s.key];
+		if (s.paired) {
+			if (v.same) return v.left ? `${v.left} cm` : '—';
+			if (v.left && v.right) return `L ${v.left} · R ${v.right}`;
+			if (v.left) return `L ${v.left}`;
+			if (v.right) return `R ${v.right}`;
+			return '—';
+		}
+		return v ? `${v} cm` : '—';
+	}
+
+	/** @param {KeyboardEvent} e */
+	function onkey(e) {
+		if (done) {
+			if (e.key === 'ArrowLeft') { e.preventDefault(); idx = total - 1; direction = -1; }
+			return;
+		}
+		// Ignore when typing in an input except for arrow up/down to nudge
+		const tag = /** @type {HTMLElement|null} */ (e.target)?.tagName;
+		const inInput = tag === 'INPUT';
+		if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); next(); }
+		else if (e.key === 'ArrowRight' && !inInput) { e.preventDefault(); next(); }
+		else if (e.key === 'ArrowLeft' && !inInput) { e.preventDefault(); back(); }
+		else if ((e.key === 's' || e.key === 'S') && !inInput) { e.preventDefault(); skip(); }
+	}
+
+	const flyOpts = $derived({ x: direction * 40, duration: 260, easing: cubicOut });
+
+	// ----- Chart -----
+
+	const CHART_W = 340;
+	const CHART_H = 120;
+	const CHART_PAD = { t: 12, r: 14, b: 20, l: 10 };
+
+	/** @param {Step} s */
+	function chartSeries(s) {
+		const h = history[s.key] ?? [];
+		const v = values[s.key];
+		/** @type {Array<{name: string, color: string, points: {date: string, value: number}[], pending: number | null}>} */
+		const series = [];
+		if (s.paired) {
+			const leftPoints = h.map((r) => ({ date: r.date, value: r.left }));
+			const rightPoints = h.map((r) => ({ date: r.date, value: r.right }));
+			const pendL = Number(v.left);
+			const pendR = v.same ? Number(v.left) : Number(v.right);
+			series.push({ name: 'L', color: 'var(--color-primary)', points: leftPoints, pending: isFinite(pendL) && v.left !== '' ? pendL : null });
+			series.push({ name: 'R', color: 'var(--orange)', points: rightPoints, pending: isFinite(pendR) && (v.same ? v.left : v.right) !== '' ? pendR : null });
+		} else {
+			const p = h.map((r) => ({ date: r.date, value: r.value }));
+			const pend = Number(v);
+			series.push({ name: '', color: 'var(--color-primary)', points: p, pending: isFinite(pend) && v !== '' ? pend : null });
+		}
+		return series;
+	}
+
+	const chart = $derived.by(() => {
+		const series = chartSeries(step);
+		const hasHistory = series.some((s) => s.points.length > 0);
+		const hasPending = series.some((s) => s.pending != null);
+		if (!hasHistory && !hasPending) {
+			return { empty: true, series: [], axis: null };
+		}
+
+		const allValues = series.flatMap((s) => [
+			...s.points.map((p) => p.value),
+			...(s.pending != null ? [s.pending] : [])
+		]).filter((n) => isFinite(n));
+		const min = Math.min(...allValues);
+		const max = Math.max(...allValues);
+		const span = max - min;
+		const pad = span === 0 ? Math.max(0.5, max * 0.02) : span * 0.25;
+		const yMin = min - pad;
+		const yMax = max + pad;
+
+		const pointCount = series[0].points.length + (hasPending ? 1 : 0);
+		const innerW = CHART_W - CHART_PAD.l - CHART_PAD.r;
+		const innerH = CHART_H - CHART_PAD.t - CHART_PAD.b;
+
+		/** @param {number} i @param {number} total */
+		const xAt = (i, total) =>
+			CHART_PAD.l + (total <= 1 ? innerW / 2 : (i / (total - 1)) * innerW);
+		/** @param {number} v */
+		const yAt = (v) =>
+			CHART_PAD.t + (1 - (v - yMin) / (yMax - yMin || 1)) * innerH;
+
+		const rendered = series.map((s) => {
+			const hist = s.points.map((p, i) => ({ x: xAt(i, pointCount), y: yAt(p.value), value: p.value, date: p.date }));
+			const pending =
+				s.pending != null
+					? { x: xAt(s.points.length, pointCount), y: yAt(s.pending), value: s.pending }
+					: null;
+			const all = [...hist, ...(pending ? [pending] : [])];
+			const linePath = all.length > 0 ? 'M' + all.map((p) => `${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(' L ') : '';
+			const baseY = CHART_PAD.t + innerH;
+			const areaPath = all.length > 0
+				? `M ${all[0].x.toFixed(1)},${baseY.toFixed(1)} L ` +
+				  all.map((p) => `${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(' L ') +
+				  ` L ${all[all.length - 1].x.toFixed(1)},${baseY.toFixed(1)} Z`
+				: '';
+			return { name: s.name, color: s.color, linePath, areaPath, hist, pending };
+		});
+
+		return {
+			empty: false,
+			series: rendered,
+			axis: { yMin: yMin.toFixed(1), yMax: yMax.toFixed(1), lastDate: series[0].points.at(-1)?.date ?? null }
+		};
+	});
+
+	/** @param {string | null | undefined} d */
+	function shortDate(d) {
+		if (!d) return '';
+		const dt = new Date(d);
+		return dt.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
+	}
+</script>
+
+<svelte:window onkeydown={onkey} />
+<svelte:head><title>Measure (mockup)</title></svelte:head>
+
+<div class="shell" class:is-done={done}>
+	<!-- Step rail (desktop) -->
+	<aside class="rail" aria-label="Steps">
+		<div class="rail-header">
+			<span class="rail-eyebrow">Measurements</span>
+			<span class="rail-count">{steps.filter(isFilled).length}/{total}</span>
+		</div>
+		<ol class="rail-list">
+			{#each steps as s, i (s.key)}
+				{@const filled = isFilled(s)}
+				<li>
+					<button
+						type="button"
+						class="rail-item"
+						class:active={i === idx && !done}
+						class:filled
+						onclick={() => jumpTo(i)}
+					>
+						<span class="rail-dot" aria-hidden="true">
+							{#if filled}<Check size={11} strokeWidth={3} />{/if}
+						</span>
+						<span class="rail-label">{s.label}</span>
+						<span class="rail-value">{formatValue(s)}</span>
+					</button>
+				</li>
+			{/each}
+			<li>
+				<button
+					type="button"
+					class="rail-item review"
+					class:active={done}
+					onclick={() => { direction = 1; idx = total; }}
+				>
+					<span class="rail-dot" aria-hidden="true"><Check size={11} strokeWidth={3} /></span>
+					<span class="rail-label">Review &amp; save</span>
+					<span class="rail-value"></span>
+				</button>
+			</li>
+		</ol>
+	</aside>
+
+	<!-- Topbar (mobile progress + exit) -->
+	<header class="topbar">
+		<div class="progress" aria-label="Progress">
+			{#each steps as s, i (s.key)}
+				<span class="dot" class:active={i === idx && !done} class:past={i < idx || done}></span>
+			{/each}
+		</div>
+		<button class="icon-x" aria-label="Exit">
+			<X size={18} />
+		</button>
+	</header>
+
+	<!-- Main stage -->
+	<main class="stage">
+		{#if !done}
+			{#key step.key}
+				<section class="card" in:fly={flyOpts}>
+					<div class="hero">
+						{#if step.img}
+							<img src="/fitness/measure/{step.img}" alt="" class="hero-pic" />
+						{:else}
+							<div class="hero-placeholder" aria-hidden="true">
+								<Ruler size={72} strokeWidth={1.4} />
+								<span class="placeholder-label">{step.label}</span>
+							</div>
+						{/if}
+					</div>
+
+					<div class="meta">
+						<span class="eyebrow">Step {idx + 1} of {total}</span>
+						<h1 class="title">{step.label}</h1>
+						<p class="tip">{step.tip}</p>
+					</div>
+
+					{#if step.paired}
+						{@const pv = values[step.key]}
+						{#if pv.same}
+							<div class="stepper" onwheel={(e) => onWheel(e, step.key, 'left')}>
+								<button type="button" class="step-btn" onclick={() => bump(step.key, 'left', -0.1)} aria-label="-0.1">
+									<Minus size={20} />
+								</button>
+								<div class="num-wrap">
+									<input type="number" step="0.1" bind:value={pv.left} placeholder="—" inputmode="decimal" />
+									<span class="unit">cm</span>
+								</div>
+								<button type="button" class="step-btn" onclick={() => bump(step.key, 'left', 0.1)} aria-label="+0.1">
+									<Plus size={20} />
+								</button>
+							</div>
+						{:else}
+							<div class="split">
+								<div class="stepper compact" onwheel={(e) => onWheel(e, step.key, 'left')}>
+									<span class="side-tag" style="--side-color: var(--color-primary)">L</span>
+									<button type="button" class="step-btn sm" onclick={() => bump(step.key, 'left', -0.1)} aria-label="L -0.1">
+										<Minus size={14} />
+									</button>
+									<input type="number" step="0.1" bind:value={pv.left} placeholder="—" inputmode="decimal" />
+									<span class="unit-sm">cm</span>
+									<button type="button" class="step-btn sm" onclick={() => bump(step.key, 'left', 0.1)} aria-label="L +0.1">
+										<Plus size={14} />
+									</button>
+								</div>
+								<div class="stepper compact" onwheel={(e) => onWheel(e, step.key, 'right')}>
+									<span class="side-tag" style="--side-color: var(--orange)">R</span>
+									<button type="button" class="step-btn sm" onclick={() => bump(step.key, 'right', -0.1)} aria-label="R -0.1">
+										<Minus size={14} />
+									</button>
+									<input type="number" step="0.1" bind:value={pv.right} placeholder="—" inputmode="decimal" />
+									<span class="unit-sm">cm</span>
+									<button type="button" class="step-btn sm" onclick={() => bump(step.key, 'right', 0.1)} aria-label="R +0.1">
+										<Plus size={14} />
+									</button>
+								</div>
+								<button type="button" class="copy-btn" onclick={() => copyLtoR(step.key)} disabled={!pv.left}>
+									<CopyPlus size={13} /> Copy L → R
+								</button>
+							</div>
+						{/if}
+						<label class="same-toggle">
+							<input type="checkbox" bind:checked={pv.same} />
+							<span>Same on both sides</span>
+						</label>
+					{:else}
+						<div class="stepper" onwheel={(e) => onWheel(e, step.key, null)}>
+							<button type="button" class="step-btn" onclick={() => bump(step.key, null, -0.1)} aria-label="-0.1">
+								<Minus size={20} />
+							</button>
+							<div class="num-wrap">
+								<input type="number" step="0.1" bind:value={values[step.key]} placeholder="—" inputmode="decimal" />
+								<span class="unit">cm</span>
+							</div>
+							<button type="button" class="step-btn" onclick={() => bump(step.key, null, 0.1)} aria-label="+0.1">
+								<Plus size={20} />
+							</button>
+						</div>
+					{/if}
+				</section>
+			{/key}
+		{:else}
+			<section class="summary" in:fly={{ y: 16, duration: 320, easing: cubicOut }}>
+				<div class="check-halo">
+					<Check size={42} strokeWidth={2.4} />
+				</div>
+				<h1 class="title">Ready to save</h1>
+				<p class="tip">Review your numbers below.</p>
+
+				<ul class="summary-list">
+					{#each steps as s (s.key)}
+						<li>
+							<span class="sum-label">{s.label}</span>
+							<span class="sum-val" class:empty={formatValue(s) === '—'}>{formatValue(s)}</span>
+						</li>
+					{/each}
+				</ul>
+
+				<div class="summary-actions">
+					<button class="ghost" onclick={() => { idx = 0; direction = -1; }}>
+						<ArrowLeft size={14} /> Edit again
+					</button>
+					<button class="nav-btn primary">
+						<Check size={16} /> Save measurement
+					</button>
+				</div>
+			</section>
+		{/if}
+	</main>
+
+	<!-- Right panel (desktop) -->
+	<aside class="panel" aria-label="History and totals">
+		{#if !done}
+			{#key step.key}
+				<div class="panel-section chart-section" in:fade={{ duration: 180 }}>
+					<div class="panel-head">
+						<TrendingUp size={14} />
+						<h3 class="panel-title">{step.label} over time</h3>
+					</div>
+					{#if chart.empty}
+						<div class="chart-empty">
+							<span class="chart-empty-dot"></span>
+							First measurement — your entry will appear here.
+						</div>
+					{:else}
+						<svg class="chart" viewBox="0 0 {CHART_W} {CHART_H}" role="img" aria-label="Progress graph">
+							<defs>
+								<linearGradient id="area-grad-primary" x1="0" x2="0" y1="0" y2="1">
+									<stop offset="0%" stop-color="var(--color-primary)" stop-opacity="0.25" />
+									<stop offset="100%" stop-color="var(--color-primary)" stop-opacity="0" />
+								</linearGradient>
+								<linearGradient id="area-grad-orange" x1="0" x2="0" y1="0" y2="1">
+									<stop offset="0%" stop-color="var(--orange)" stop-opacity="0.18" />
+									<stop offset="100%" stop-color="var(--orange)" stop-opacity="0" />
+								</linearGradient>
+							</defs>
+							<!-- baseline -->
+							<line x1={CHART_PAD.l} x2={CHART_W - CHART_PAD.r} y1={CHART_H - CHART_PAD.b} y2={CHART_H - CHART_PAD.b} class="axis-line" />
+							{#each chart.series as s, i (s.name || 'single')}
+								<path d={s.areaPath} fill={i === 0 ? 'url(#area-grad-primary)' : 'url(#area-grad-orange)'} />
+								<path d={s.linePath} stroke={s.color} stroke-width="1.8" fill="none" stroke-linejoin="round" stroke-linecap="round" />
+								{#each s.hist as d}
+									<circle cx={d.x} cy={d.y} r="2.5" fill={s.color} class="hist-dot" />
+								{/each}
+								{#if s.pending}
+									<circle cx={s.pending.x} cy={s.pending.y} r="11" fill={s.color} opacity="0.16" class="pulse" />
+									<circle cx={s.pending.x} cy={s.pending.y} r="4.5" fill={s.color} stroke="var(--color-surface)" stroke-width="2" class="pending-dot" />
+								{/if}
+							{/each}
+							<!-- y labels -->
+							{#if chart.axis}
+								<text x={CHART_W - 2} y={CHART_PAD.t + 4} text-anchor="end" class="axis-label">{chart.axis.yMax}</text>
+								<text x={CHART_W - 2} y={CHART_H - CHART_PAD.b - 2} text-anchor="end" class="axis-label">{chart.axis.yMin}</text>
+								{#if chart.axis.lastDate}
+									<text x={CHART_PAD.l} y={CHART_H - 4} text-anchor="start" class="axis-label">{shortDate(chart.axis.lastDate)}</text>
+								{/if}
+								<text x={CHART_W - CHART_PAD.r} y={CHART_H - 4} text-anchor="end" class="axis-label accent">Today</text>
+							{/if}
+						</svg>
+						{#if chart.series.length > 1}
+							<div class="legend">
+								{#each chart.series as s}
+									<span class="legend-item">
+										<span class="swatch" style:background={s.color}></span>
+										<span>{s.name}</span>
+										{#if s.pending != null}
+											<span class="legend-val">{s.pending.value.toFixed(1)}</span>
+										{/if}
+									</span>
+								{/each}
+							</div>
+						{:else if chart.series[0]?.pending != null}
+							<div class="legend single">
+								<span class="legend-item">
+									<span class="swatch" style:background={chart.series[0].color}></span>
+									<span class="legend-val">{chart.series[0].pending.value.toFixed(1)} cm</span>
+									<span class="legend-tag">today</span>
+								</span>
+							</div>
+						{/if}
+					{/if}
+				</div>
+			{/key}
+		{/if}
+
+		<div class="panel-section totals-section">
+			<div class="panel-head">
+				<h3 class="panel-title">Running totals</h3>
+			</div>
+			<ul class="totals">
+				{#each steps as s, i (s.key)}
+					<li class:dim={!isFilled(s)} class:focused={i === idx && !done}>
+						<button type="button" class="totals-item" onclick={() => jumpTo(i)}>
+							<span class="totals-label">{s.label}</span>
+							<span class="totals-val">{formatValue(s)}</span>
+						</button>
+					</li>
+				{/each}
+			</ul>
+		</div>
+	</aside>
+
+	<!-- Bottom bar -->
+	<footer class="bottombar">
+		{#if !done}
+			<button class="ghost" onclick={skip}>Skip</button>
+			<div class="kbd-legend" aria-hidden="true">
+				<span><kbd>←</kbd><kbd>→</kbd> nav</span>
+				<span><kbd>↵</kbd> next</span>
+				<span><kbd>S</kbd> skip</span>
+				<span><kbd>scroll</kbd> ±0.1</span>
+			</div>
+			<div class="nav-pair">
+				<button class="nav-btn" onclick={back} disabled={idx === 0} aria-label="Back">
+					<ArrowLeft size={16} />
+				</button>
+				<button class="nav-btn primary" onclick={next}>
+					{idx === total - 1 ? 'Review' : 'Next'}
+					<ArrowRight size={16} />
+				</button>
+			</div>
+		{:else}
+			<span class="bottom-spacer"></span>
+		{/if}
+	</footer>
+</div>
+
+<style>
+	.shell {
+		min-height: 100vh;
+		display: flex;
+		flex-direction: column;
+		background:
+			radial-gradient(1200px 600px at 20% -10%, color-mix(in oklab, var(--color-primary) 10%, transparent), transparent 60%),
+			radial-gradient(800px 400px at 90% 110%, color-mix(in oklab, var(--color-primary) 8%, transparent), transparent 55%),
+			var(--color-bg-primary);
+		color: var(--color-text-primary);
+	}
+
+	/* ============ Rail (left, desktop only) ============ */
+	.rail {
+		display: none;
+	}
+
+	/* ============ Topbar ============ */
+	.topbar {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 1rem 1.25rem;
+	}
+	.progress {
+		display: flex;
+		gap: 0.4rem;
+		flex: 1;
+		align-items: center;
+	}
+	.dot {
+		width: 6px;
+		height: 6px;
+		border-radius: 999px;
+		background: var(--color-border);
+		transition: all 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
+	}
+	.dot.past { background: color-mix(in oklab, var(--color-primary) 60%, transparent); }
+	.dot.active {
+		width: 22px;
+		background: var(--color-primary);
+	}
+	.icon-x {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 34px;
+		height: 34px;
+		border-radius: 999px;
+		border: 1px solid var(--color-border);
+		background: var(--color-surface);
+		color: var(--color-text-secondary);
+		cursor: pointer;
+		transition: all 150ms;
+	}
+	.icon-x:hover {
+		color: var(--color-text-primary);
+		border-color: var(--color-text-tertiary);
+	}
+
+	/* ============ Stage ============ */
+	.stage {
+		flex: 1;
+		display: flex;
+		align-items: flex-start;
+		justify-content: center;
+		padding: 0.5rem 1rem 2rem;
+		overflow: hidden;
+	}
+	.card {
+		width: 100%;
+		max-width: 440px;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 1.1rem;
+	}
+
+	.hero {
+		width: 220px;
+		height: 220px;
+		display: grid;
+		place-items: center;
+		border-radius: 50%;
+		background:
+			radial-gradient(closest-side, var(--color-surface), transparent 70%),
+			var(--color-bg-secondary);
+		box-shadow: var(--shadow-md);
+		position: relative;
+	}
+	.hero::after {
+		content: '';
+		position: absolute;
+		inset: -2px;
+		border-radius: 50%;
+		border: 1px dashed color-mix(in oklab, var(--color-primary) 45%, transparent);
+		opacity: 0.6;
+		pointer-events: none;
+	}
+	.hero-pic {
+		width: 150px;
+		height: 150px;
+		object-fit: contain;
+	}
+	@media (prefers-color-scheme: dark) {
+		.hero-pic { filter: invert(1); }
+	}
+	:global(:root[data-theme="dark"]) .hero-pic { filter: invert(1); }
+	:global(:root[data-theme="light"]) .hero-pic { filter: none; }
+
+	.hero-placeholder {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 0.4rem;
+		color: var(--color-text-tertiary);
+	}
+	.placeholder-label {
+		font-size: 0.7rem;
+		text-transform: uppercase;
+		letter-spacing: 0.12em;
+		font-weight: 600;
+	}
+
+	.meta {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 0.4rem;
+		text-align: center;
+	}
+	.eyebrow {
+		font-size: 0.65rem;
+		font-weight: 700;
+		letter-spacing: 0.18em;
+		text-transform: uppercase;
+		color: var(--color-text-tertiary);
+	}
+	.title {
+		margin: 0;
+		font-size: 2.4rem;
+		font-weight: 700;
+		letter-spacing: -0.02em;
+		line-height: 1;
+	}
+	.tip {
+		margin: 0;
+		max-width: 340px;
+		font-size: 0.95rem;
+		line-height: 1.5;
+		color: var(--color-text-secondary);
+	}
+
+	.stepper {
+		display: flex;
+		align-items: center;
+		gap: 0.85rem;
+		padding: 0.9rem 1rem;
+		background: var(--color-surface);
+		border-radius: var(--radius-card);
+		box-shadow: var(--shadow-md);
+	}
+	.step-btn {
+		display: grid;
+		place-items: center;
+		width: 3rem;
+		height: 3rem;
+		border-radius: 999px;
+		border: 1px solid var(--color-border);
+		background: var(--color-bg-tertiary);
+		color: var(--color-text-primary);
+		cursor: pointer;
+		transition: all 150ms;
+	}
+	.step-btn:hover {
+		background: var(--color-bg-elevated);
+		border-color: var(--color-primary);
+	}
+	.step-btn:active {
+		transform: scale(0.94);
+		background: var(--color-primary);
+		color: var(--color-text-on-primary);
+		border-color: var(--color-primary);
+	}
+	.step-btn.sm { width: 2.1rem; height: 2.1rem; }
+	.num-wrap {
+		display: flex;
+		align-items: baseline;
+		gap: 0.25rem;
+		min-width: 6.5rem;
+		justify-content: center;
+	}
+	.num-wrap input {
+		width: 5ch;
+		border: none;
+		background: transparent;
+		color: var(--color-text-primary);
+		font-size: 2.6rem;
+		font-weight: 700;
+		text-align: center;
+		letter-spacing: -0.02em;
+		appearance: textfield;
+		-moz-appearance: textfield;
+	}
+	.num-wrap input::-webkit-inner-spin-button,
+	.num-wrap input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
+	.num-wrap input::placeholder { color: var(--color-text-tertiary); }
+	.num-wrap input:focus { outline: none; }
+	.unit {
+		font-size: 0.95rem;
+		font-weight: 600;
+		color: var(--color-text-secondary);
+	}
+
+	.split {
+		display: flex;
+		flex-direction: column;
+		gap: 0.55rem;
+		align-items: stretch;
+		width: 100%;
+		max-width: 340px;
+	}
+	.stepper.compact {
+		gap: 0.5rem;
+		padding: 0.55rem 0.75rem;
+		justify-content: space-between;
+	}
+	.stepper.compact input {
+		width: 4ch;
+		font-size: 1.4rem;
+		border: none;
+		background: transparent;
+		color: var(--color-text-primary);
+		font-weight: 600;
+		text-align: center;
+	}
+	.stepper.compact input:focus { outline: none; }
+	.side-tag {
+		font-weight: 700;
+		font-size: 0.78rem;
+		letter-spacing: 0.1em;
+		padding: 0.2rem 0.55rem;
+		border-radius: var(--radius-pill);
+		background: color-mix(in oklab, var(--side-color, var(--color-primary)) 18%, transparent);
+		color: var(--side-color, var(--color-text-secondary));
+	}
+	.unit-sm {
+		font-size: 0.72rem;
+		font-weight: 600;
+		color: var(--color-text-tertiary);
+	}
+	.copy-btn {
+		align-self: center;
+		display: inline-flex;
+		align-items: center;
+		gap: 0.35rem;
+		padding: 0.25rem 0.7rem;
+		border: 1px dashed var(--color-border);
+		border-radius: var(--radius-pill);
+		background: transparent;
+		font-size: 0.7rem;
+		color: var(--color-text-tertiary);
+		cursor: pointer;
+		transition: all 150ms;
+	}
+	.copy-btn:hover:not(:disabled) {
+		color: var(--color-primary);
+		border-color: var(--color-primary);
+		border-style: solid;
+	}
+	.copy-btn:disabled { opacity: 0.45; cursor: not-allowed; }
+
+	.same-toggle {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.45rem;
+		font-size: 0.78rem;
+		color: var(--color-text-secondary);
+		cursor: pointer;
+		user-select: none;
+	}
+	.same-toggle input {
+		accent-color: var(--color-primary);
+		width: 0.95rem;
+		height: 0.95rem;
+	}
+
+	/* ============ Right panel (hidden on mobile) ============ */
+	.panel {
+		display: none;
+	}
+
+	/* ============ Bottom bar ============ */
+	.bottombar {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 1rem 1.25rem 1.5rem;
+		gap: 0.75rem;
+		max-width: 520px;
+		width: 100%;
+		margin-inline: auto;
+	}
+	.ghost {
+		border: none;
+		background: transparent;
+		color: var(--color-text-tertiary);
+		font-size: 0.85rem;
+		padding: 0.5rem 0.75rem;
+		cursor: pointer;
+		border-radius: var(--radius-md);
+		transition: color 150ms;
+	}
+	.ghost:hover { color: var(--color-text-primary); }
+	.nav-pair { display: flex; gap: 0.5rem; }
+	.nav-btn {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.4rem;
+		padding: 0.7rem 1.15rem;
+		border: 1px solid var(--color-border);
+		border-radius: var(--radius-pill);
+		background: var(--color-surface);
+		color: var(--color-text-primary);
+		font-weight: 600;
+		font-size: 0.9rem;
+		cursor: pointer;
+		transition: all 150ms;
+	}
+	.nav-btn:hover:not(:disabled) { border-color: var(--color-text-tertiary); }
+	.nav-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+	.nav-btn.primary {
+		background: var(--color-primary);
+		color: var(--color-text-on-primary);
+		border-color: var(--color-primary);
+		box-shadow: var(--shadow-sm);
+	}
+	.nav-btn.primary:hover {
+		background: var(--color-primary-hover);
+		border-color: var(--color-primary-hover);
+	}
+
+	.kbd-legend {
+		display: none;
+	}
+	.bottom-spacer { flex: 1; }
+
+	/* ============ Summary ============ */
+	.summary {
+		flex: 1;
+		width: 100%;
+		max-width: 480px;
+		margin: 2rem auto 3rem;
+		padding: 0 1.25rem;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 1rem;
+	}
+	.check-halo {
+		display: grid;
+		place-items: center;
+		width: 76px;
+		height: 76px;
+		border-radius: 50%;
+		background: color-mix(in oklab, var(--color-primary) 18%, transparent);
+		color: var(--color-primary);
+		box-shadow: 0 0 0 8px color-mix(in oklab, var(--color-primary) 8%, transparent);
+		margin-bottom: 0.25rem;
+	}
+	.summary .title { font-size: 1.8rem; }
+	.summary .tip { margin-bottom: 0.5rem; }
+	.summary-list {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		width: 100%;
+		background: var(--color-surface);
+		border-radius: var(--radius-card);
+		box-shadow: var(--shadow-sm);
+		overflow: hidden;
+	}
+	.summary-list li {
+		display: flex;
+		justify-content: space-between;
+		align-items: baseline;
+		padding: 0.7rem 1rem;
+		border-bottom: 1px solid var(--color-border);
+	}
+	.summary-list li:last-child { border-bottom: none; }
+	.sum-label { font-size: 0.9rem; color: var(--color-text-secondary); }
+	.sum-val {
+		font-weight: 700;
+		font-variant-numeric: tabular-nums;
+		letter-spacing: 0.01em;
+	}
+	.sum-val.empty { color: var(--color-text-tertiary); font-weight: 400; }
+	.summary-actions {
+		display: flex;
+		gap: 0.5rem;
+		align-items: center;
+		justify-content: space-between;
+		width: 100%;
+		margin-top: 0.5rem;
+	}
+
+	/* ======================== Desktop: 3-column grid ======================== */
+	@media (min-width: 1024px) {
+		.shell {
+			display: grid;
+			grid-template-columns: 260px minmax(0, 1fr) 360px;
+			grid-template-rows: auto 1fr auto;
+			grid-template-areas:
+				"rail topbar panel"
+				"rail stage  panel"
+				"rail bottom panel";
+			min-height: 100vh;
+		}
+		.rail   { grid-area: rail; }
+		.topbar { grid-area: topbar; padding: 1.25rem 2rem 0; }
+		.stage  { grid-area: stage; padding: 1.5rem 2rem 2rem; align-items: center; }
+		.panel  { grid-area: panel; }
+		.bottombar { grid-area: bottom; max-width: none; margin-inline: 0; padding: 1rem 2rem 1.5rem; }
+
+		/* Hide mobile progress dots; rail handles it */
+		.topbar .progress { visibility: hidden; }
+
+		/* Rail */
+		.rail {
+			display: flex;
+			flex-direction: column;
+			border-right: 1px solid var(--color-border);
+			padding: 1.5rem 0.75rem 1.5rem 1.5rem;
+			background: color-mix(in oklab, var(--color-surface) 55%, transparent);
+			backdrop-filter: blur(8px);
+			overflow-y: auto;
+		}
+		.rail-header {
+			display: flex;
+			align-items: baseline;
+			justify-content: space-between;
+			margin-bottom: 1rem;
+			padding-right: 0.5rem;
+		}
+		.rail-eyebrow {
+			font-size: 0.65rem;
+			letter-spacing: 0.18em;
+			text-transform: uppercase;
+			font-weight: 700;
+			color: var(--color-text-tertiary);
+		}
+		.rail-count {
+			font-size: 0.75rem;
+			font-variant-numeric: tabular-nums;
+			color: var(--color-text-secondary);
+			font-weight: 600;
+		}
+		.rail-list {
+			list-style: none;
+			margin: 0;
+			padding: 0;
+			display: flex;
+			flex-direction: column;
+			gap: 0.1rem;
+		}
+		.rail-item {
+			width: 100%;
+			display: grid;
+			grid-template-columns: 22px 1fr auto;
+			align-items: center;
+			gap: 0.6rem;
+			padding: 0.55rem 0.75rem;
+			border: none;
+			background: transparent;
+			color: var(--color-text-secondary);
+			text-align: left;
+			cursor: pointer;
+			border-radius: var(--radius-md);
+			position: relative;
+			transition: all 150ms;
+		}
+		.rail-item::before {
+			content: '';
+			position: absolute;
+			left: -0.75rem;
+			top: 20%;
+			bottom: 20%;
+			width: 2px;
+			background: transparent;
+			border-radius: 999px;
+			transition: background 150ms;
+		}
+		.rail-item:hover {
+			background: var(--color-bg-elevated);
+			color: var(--color-text-primary);
+		}
+		.rail-item.active {
+			background: color-mix(in oklab, var(--color-primary) 10%, transparent);
+			color: var(--color-text-primary);
+		}
+		.rail-item.active::before {
+			background: var(--color-primary);
+		}
+		.rail-dot {
+			display: grid;
+			place-items: center;
+			width: 22px;
+			height: 22px;
+			border-radius: 999px;
+			border: 1.5px solid var(--color-border);
+			background: var(--color-bg-primary);
+			color: var(--color-text-on-primary);
+			transition: all 200ms;
+		}
+		.rail-item.active .rail-dot {
+			border-color: var(--color-primary);
+			box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary) 15%, transparent);
+		}
+		.rail-item.filled .rail-dot {
+			background: var(--color-primary);
+			border-color: var(--color-primary);
+		}
+		.rail-item.review .rail-dot {
+			border-style: dashed;
+			border-color: var(--color-text-tertiary);
+		}
+		.rail-item.review.active .rail-dot {
+			background: var(--color-primary);
+			border-color: var(--color-primary);
+		}
+		.rail-label {
+			font-size: 0.88rem;
+			font-weight: 600;
+		}
+		.rail-value {
+			font-size: 0.72rem;
+			font-variant-numeric: tabular-nums;
+			color: var(--color-text-tertiary);
+			letter-spacing: 0.01em;
+		}
+		.rail-item.filled .rail-value { color: var(--color-text-secondary); }
+
+		/* Panel */
+		.panel {
+			display: flex;
+			flex-direction: column;
+			gap: 1rem;
+			border-left: 1px solid var(--color-border);
+			padding: 1.5rem 1.25rem;
+			background: color-mix(in oklab, var(--color-surface) 55%, transparent);
+			backdrop-filter: blur(8px);
+			overflow-y: auto;
+		}
+		.panel-section {
+			background: var(--color-surface);
+			border: 1px solid var(--color-border);
+			border-radius: var(--radius-lg);
+			padding: 0.9rem 1rem;
+		}
+		.panel-head {
+			display: flex;
+			align-items: center;
+			gap: 0.4rem;
+			margin-bottom: 0.6rem;
+			color: var(--color-text-tertiary);
+		}
+		.panel-title {
+			margin: 0;
+			font-size: 0.72rem;
+			font-weight: 700;
+			letter-spacing: 0.12em;
+			text-transform: uppercase;
+			color: var(--color-text-tertiary);
+		}
+
+		/* Chart */
+		.chart {
+			width: 100%;
+			height: auto;
+			display: block;
+		}
+		.chart .axis-line {
+			stroke: var(--color-border);
+			stroke-width: 1;
+			stroke-dasharray: 2 3;
+		}
+		.chart .axis-label {
+			font-size: 8.5px;
+			fill: var(--color-text-tertiary);
+			font-weight: 600;
+			letter-spacing: 0.04em;
+		}
+		.chart .axis-label.accent {
+			fill: var(--color-primary);
+		}
+		.chart .hist-dot {
+			opacity: 0.85;
+		}
+		.chart .pulse {
+			animation: pulse-grow 1.8s ease-out infinite;
+			transform-origin: center;
+			transform-box: fill-box;
+		}
+		.chart .pending-dot {
+			filter: drop-shadow(0 1px 2px color-mix(in oklab, var(--color-primary) 40%, transparent));
+		}
+
+		.chart-empty {
+			display: flex;
+			align-items: center;
+			gap: 0.5rem;
+			padding: 1rem 0.25rem;
+			color: var(--color-text-tertiary);
+			font-size: 0.8rem;
+			font-style: italic;
+		}
+		.chart-empty-dot {
+			width: 10px;
+			height: 10px;
+			border-radius: 50%;
+			background: var(--color-primary);
+			box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary) 25%, transparent);
+			flex-shrink: 0;
+		}
+		.legend {
+			display: flex;
+			gap: 0.85rem;
+			margin-top: 0.35rem;
+			flex-wrap: wrap;
+		}
+		.legend.single { justify-content: flex-end; }
+		.legend-item {
+			display: inline-flex;
+			align-items: center;
+			gap: 0.35rem;
+			font-size: 0.72rem;
+			color: var(--color-text-secondary);
+			font-weight: 600;
+		}
+		.swatch {
+			width: 8px;
+			height: 8px;
+			border-radius: 999px;
+			display: inline-block;
+		}
+		.legend-val {
+			font-variant-numeric: tabular-nums;
+			color: var(--color-text-primary);
+		}
+		.legend-tag {
+			font-size: 0.6rem;
+			text-transform: uppercase;
+			letter-spacing: 0.1em;
+			color: var(--color-primary);
+			font-weight: 700;
+		}
+
+		/* Totals */
+		.totals {
+			list-style: none;
+			margin: 0;
+			padding: 0;
+		}
+		.totals li { border-bottom: 1px dashed var(--color-border); }
+		.totals li:last-child { border-bottom: none; }
+		.totals-item {
+			width: 100%;
+			display: flex;
+			justify-content: space-between;
+			align-items: baseline;
+			padding: 0.42rem 0.2rem;
+			background: transparent;
+			border: none;
+			color: inherit;
+			text-align: left;
+			cursor: pointer;
+			transition: color 150ms;
+		}
+		.totals-item:hover { color: var(--color-text-primary); }
+		.totals-label {
+			font-size: 0.82rem;
+			color: var(--color-text-secondary);
+		}
+		.totals-val {
+			font-size: 0.82rem;
+			font-weight: 700;
+			font-variant-numeric: tabular-nums;
+		}
+		.totals li.dim .totals-val { color: var(--color-text-tertiary); font-weight: 400; }
+		.totals li.focused .totals-label {
+			color: var(--color-primary);
+			font-weight: 700;
+		}
+
+		/* Bigger stage on desktop */
+		.hero { width: 300px; height: 300px; }
+		.hero-pic { width: 200px; height: 200px; }
+		.title { font-size: 3.2rem; }
+		.tip { font-size: 1rem; max-width: 420px; }
+		.num-wrap input { font-size: 3rem; }
+
+		/* Paired split goes horizontal on desktop */
+		.split {
+			flex-direction: row;
+			align-items: center;
+			max-width: none;
+			gap: 0.6rem;
+			flex-wrap: wrap;
+			justify-content: center;
+		}
+		.split .copy-btn { flex-basis: 100%; order: 3; }
+		.stepper.compact { flex: 1 1 180px; min-width: 180px; }
+
+		.kbd-legend {
+			display: flex;
+			gap: 1rem;
+			font-size: 0.68rem;
+			color: var(--color-text-tertiary);
+			flex: 1;
+			justify-content: center;
+			align-items: center;
+		}
+		.kbd-legend span {
+			display: inline-flex;
+			align-items: center;
+			gap: 0.3rem;
+		}
+		.kbd-legend kbd {
+			font-family: inherit;
+			display: inline-grid;
+			place-items: center;
+			min-width: 1.4rem;
+			height: 1.4rem;
+			padding: 0 0.35rem;
+			border: 1px solid var(--color-border);
+			border-bottom-width: 2px;
+			border-radius: 4px;
+			background: var(--color-bg-tertiary);
+			color: var(--color-text-secondary);
+			font-size: 0.65rem;
+			font-weight: 700;
+		}
+	}
+
+	@media (min-width: 1400px) {
+		.shell {
+			grid-template-columns: 300px minmax(0, 1fr) 400px;
+		}
+		.hero { width: 340px; height: 340px; }
+		.hero-pic { width: 230px; height: 230px; }
+		.title { font-size: 3.6rem; }
+	}
+
+	@media (max-width: 420px) {
+		.hero { width: 180px; height: 180px; }
+		.hero-pic { width: 120px; height: 120px; }
+		.title { font-size: 2rem; }
+	}
+
+	@keyframes pulse-grow {
+		0%, 100% { opacity: 0.16; transform: scale(1); }
+		50% { opacity: 0.32; transform: scale(1.25); }
+	}
+</style>
diff --git a/src/routes/tasks/+layout.svelte b/src/routes/tasks/+layout.svelte
index 6dcc5a33..77efb065 100644
--- a/src/routes/tasks/+layout.svelte
+++ b/src/routes/tasks/+layout.svelte
@@ -2,8 +2,8 @@
   import { page } from '$app/stores';
   import Header from '$lib/components/Header.svelte';
   import UserHeader from '$lib/components/UserHeader.svelte';
-  import { ClipboardList, Trophy } from '@lucide/svelte';
-
+  import ClipboardList from '@lucide/svelte/icons/clipboard-list';
+  import Trophy from '@lucide/svelte/icons/trophy';
   let { data, children } = $props();
   let user = $derived(data.session?.user);
 
diff --git a/src/routes/tasks/+page.svelte b/src/routes/tasks/+page.svelte
index ca74e466..3ae7f6df 100644
--- a/src/routes/tasks/+page.svelte
+++ b/src/routes/tasks/+page.svelte
@@ -3,9 +3,26 @@
   import { confirm } from '$lib/js/confirmDialog.svelte';
   import { formatDistanceToNow, isPast, isToday, differenceInDays, format } from 'date-fns';
   import { de } from 'date-fns/locale';
-  import { Plus, Check, Pencil, Trash2, Tag, Users, RotateCcw, Calendar,
-    Sparkles, Wind, Bath, UtensilsCrossed, CookingPot, WashingMachine,
-    Flower2, Droplets, Leaf, ShoppingCart, Shirt, Brush } from '@lucide/svelte';
+  import Plus from '@lucide/svelte/icons/plus';
+  import Check from '@lucide/svelte/icons/check';
+  import Pencil from '@lucide/svelte/icons/pencil';
+  import Trash2 from '@lucide/svelte/icons/trash-2';
+  import Tag from '@lucide/svelte/icons/tag';
+  import Users from '@lucide/svelte/icons/users';
+  import RotateCcw from '@lucide/svelte/icons/rotate-ccw';
+  import Calendar from '@lucide/svelte/icons/calendar';
+  import Sparkles from '@lucide/svelte/icons/sparkles';
+  import Wind from '@lucide/svelte/icons/wind';
+  import Bath from '@lucide/svelte/icons/bath';
+  import UtensilsCrossed from '@lucide/svelte/icons/utensils-crossed';
+  import CookingPot from '@lucide/svelte/icons/cooking-pot';
+  import WashingMachine from '@lucide/svelte/icons/washing-machine';
+  import Flower2 from '@lucide/svelte/icons/flower-2';
+  import Droplets from '@lucide/svelte/icons/droplets';
+  import Leaf from '@lucide/svelte/icons/leaf';
+  import ShoppingCart from '@lucide/svelte/icons/shopping-cart';
+  import Shirt from '@lucide/svelte/icons/shirt';
+  import Brush from '@lucide/svelte/icons/brush';
   import { fly, scale } from 'svelte/transition';
   import { flip } from 'svelte/animate';
   import TaskForm from '$lib/components/tasks/TaskForm.svelte';
diff --git a/src/routes/tasks/rewards/+page.svelte b/src/routes/tasks/rewards/+page.svelte
index 9c3acbb2..3ee187b1 100644
--- a/src/routes/tasks/rewards/+page.svelte
+++ b/src/routes/tasks/rewards/+page.svelte
@@ -6,7 +6,7 @@
   import { de } from 'date-fns/locale';
   import { scale } from 'svelte/transition';
   import { flip } from 'svelte/animate';
-  import { Trash2 } from '@lucide/svelte';
+  import Trash2 from '@lucide/svelte/icons/trash-2';
   import StickerCalendar from '$lib/components/tasks/StickerCalendar.svelte';
   import StickerPopup from '$lib/components/tasks/StickerPopup.svelte';