<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 } from '@lucide/svelte';
	import { detectFitnessLang, fitnessSlugs, t } from '$lib/js/fitnessI18n';
	import AddButton from '$lib/components/AddButton.svelte';
	import FoodSearch from '$lib/components/fitness/FoodSearch.svelte';
	import { toast } from '$lib/js/toast.svelte';
	import { confirm } from '$lib/js/confirmDialog.svelte';
	import { getDRI, NUTRIENT_META } from '$lib/data/dailyReferenceIntake';

	const lang = $derived(detectFitnessLang($page.url.pathname));
	const s = $derived(fitnessSlugs(lang));
	const isEn = $derived(lang === 'en');

	let { data } = $props();

	// --- Date navigation ---
	// svelte-ignore state_referenced_locally
	let currentDate = $state(data.date);
	const todayStr = new Date().toISOString().slice(0, 10);
	const isToday = $derived(currentDate === todayStr);

	const displayDate = $derived.by(() => {
		const d = new Date(currentDate + 'T12:00:00');
		return d.toLocaleDateString(isEn ? 'en-US' : 'de-DE', { weekday: 'short', day: 'numeric', month: 'short' });
	});

	async function navigateDate(offset) {
		const d = new Date(currentDate + 'T12:00:00');
		d.setDate(d.getDate() + offset);
		currentDate = d.toISOString().slice(0, 10);
		await loadEntries();
	}

	async function goToday() {
		currentDate = todayStr;
		await loadEntries();
	}

	// --- Entries ---
	// svelte-ignore state_referenced_locally
	let entries = $state(data.foodLog?.entries ?? []);
	// svelte-ignore state_referenced_locally
	let recipeImages = $state(data.recipeImages ?? {});

	async function loadEntries() {
		await goto(`/fitness/${s.nutrition}?date=${currentDate}`, { replaceState: true, noScroll: true });
	}

	// Keep reactive with server data when navigating
	$effect(() => {
		entries = data.foodLog?.entries ?? [];
		recipeImages = data.recipeImages ?? {};
		exerciseKcal = Number(data.exerciseKcal) || 0;
		currentDate = data.date;
	});

	// --- Goals ---
	// svelte-ignore state_referenced_locally
	let goalCalories = $state(data.goal?.dailyCalories ?? null);
	// svelte-ignore state_referenced_locally
	let goalProteinMode = $state(data.goal?.proteinMode ?? 'fixed');
	// svelte-ignore state_referenced_locally
	let goalProteinTarget = $state(data.goal?.proteinTarget ?? null);
	// svelte-ignore state_referenced_locally
	let goalFatPercent = $state(data.goal?.fatPercent ?? null);
	// svelte-ignore state_referenced_locally
	let goalCarbPercent = $state(data.goal?.carbPercent ?? null);
	// svelte-ignore state_referenced_locally
	let goalSex = $state(data.goal?.sex ?? 'male');
	// svelte-ignore state_referenced_locally
	let activityLevel = $state(data.goal?.activityLevel ?? 'light');
	// svelte-ignore state_referenced_locally
	let latestWeight = $state(data.latestWeight?.weight?.value ?? null);

	let showGoalEditor = $state(false);
	let goalSaving = $state(false);

	// Editable goal fields (populated by openGoalEditor)
	let editCalories = $state('');
	let editActivityLevel = $state('light');
	let editProteinMode = $state('fixed');
	let editProteinTarget = $state('');
	let editFatPercent = $state('');
	let editCarbPercent = $state('');

	const dietPresets = [
		{ emoji: '⚖️', en: 'WHO Balanced', de: 'WHO Ausgewogen',
			descEn: 'Standard WHO guidelines — moderate protein, balanced macros',
			descDe: 'WHO-Standardempfehlung — moderates Protein, ausgewogene Makros',
			proteinMode: 'per_kg', proteinTarget: 0.83, fatPercent: 30, carbPercent: 55 },
		{ emoji: '💪', en: 'Maintain', de: 'Halten',
			descEn: 'Eat at TDEE with higher protein to preserve muscle',
			descDe: 'Essen auf TDEE-Niveau mit erhöhtem Protein für Muskelerhalt',
			proteinMode: 'per_kg', proteinTarget: 1.6, fatPercent: 30, carbPercent: 45, calMult: 1.0 },
		{ emoji: '🔪', en: 'Cut', de: 'Definieren',
			descEn: '20% calorie deficit, high protein to minimize muscle loss',
			descDe: '20% Kaloriendefizit, hohes Protein gegen Muskelverlust',
			proteinMode: 'per_kg', proteinTarget: 2.2, fatPercent: 25, carbPercent: 40, calMult: 0.8 },
		{ emoji: '🍖', en: 'Bulk', de: 'Aufbauen',
			descEn: '15% calorie surplus for muscle growth with moderate protein',
			descDe: '15% Kalorienüberschuss für Muskelaufbau, moderates Protein',
			proteinMode: 'per_kg', proteinTarget: 1.8, fatPercent: 30, carbPercent: 50, calMult: 1.15 },
		{ emoji: '🥑', en: 'Keto', de: 'Keto',
			descEn: 'Very low carb, high fat — forces ketosis for fat burning',
			descDe: 'Sehr wenig Kohlenhydrate, viel Fett — erzwingt Ketose',
			proteinMode: 'per_kg', proteinTarget: 1.5, fatPercent: 70, carbPercent: 5 },
		{ emoji: '🏋️', en: 'High Protein', de: 'Proteinreich',
			descEn: 'Maximum protein for strength athletes and bodybuilders',
			descDe: 'Maximales Protein für Kraftsportler und Bodybuilder',
			proteinMode: 'per_kg', proteinTarget: 2.5, fatPercent: 30, carbPercent: 30 },
		{ emoji: '🥩', en: 'Carnivore', de: 'Karnivor',
			descEn: 'Animal products only — zero carb, high fat and protein',
			descDe: 'Nur tierische Produkte — null Kohlenhydrate, viel Fett und Protein',
			proteinMode: 'per_kg', proteinTarget: 2.5, fatPercent: 65, carbPercent: 0 },
	];

	// Wizard step: 1=presets, 2=calories+activity, 3=macros
	let goalStep = $state(1);
	let selectedPresetIdx = $state(-1);

	function applyPreset(preset, idx) {
		selectedPresetIdx = idx;
		editProteinMode = preset.proteinMode;
		editProteinTarget = String(preset.proteinTarget);
		editFatPercent = String(preset.fatPercent);
		editCarbPercent = String(preset.carbPercent);
		if (preset.calMult && hasBmrData) {
			editCalories = String(Math.round(dailyTdee * preset.calMult));
		}
		// Auto-advance to step 2
		goalStep = 2;
	}

	function openGoalEditor() {
		editCalories = String(goalCalories ?? '');
		editActivityLevel = activityLevel;
		editProteinMode = goalProteinMode;
		editProteinTarget = String(goalProteinTarget ?? '');
		editFatPercent = String(goalFatPercent ?? '');
		editCarbPercent = String(goalCarbPercent ?? '');
		selectedPresetIdx = -1;
		goalStep = 1;
		showGoalEditor = true;
	}

	// Macro ring preview (derived from edit fields)
	const RING_R = 48;
	const RING_C = 2 * Math.PI * RING_R;
	const RING_GAP = 4;
	const editMacroRing = $derived.by(() => {
		const cal = Number(editCalories) || 0;
		const fat = Number(editFatPercent) || 0;
		const carb = Number(editCarbPercent) || 0;
		const prot = Math.max(0, 100 - fat - carb);
		const fatDeg = (fat / 100) * 360;
		const carbDeg = (carb / 100) * 360;
		const fatLen = (fat / 100) * RING_C;
		const carbLen = (carb / 100) * RING_C;
		const protLen = (prot / 100) * RING_C;
		return { cal, fat, carb, prot, fatDeg, carbDeg, fatLen, carbLen, protLen };
	});

	// Step summary labels
	const stepPresetSummary = $derived(
		selectedPresetIdx >= 0 ? (isEn ? dietPresets[selectedPresetIdx].en : dietPresets[selectedPresetIdx].de) : (isEn ? 'Custom' : 'Benutzerdefiniert')
	);
	const stepCalSummary = $derived(
		editCalories ? `${editCalories} kcal` : '—'
	);
	const stepMacroSummary = $derived.by(() => {
		const f = Number(editFatPercent) || 0;
		const c = Number(editCarbPercent) || 0;
		const p = Math.max(0, 100 - f - c);
		return `P${p}% F${f}% C${c}%`;
	});

	async function saveGoals() {
		goalSaving = true;
		try {
			const body = {
				weeklyWorkouts: data.goal?.weeklyWorkouts ?? 4,
				sex: goalSex,
				heightCm: data.goal?.heightCm,
				activityLevel: editActivityLevel,
				dailyCalories: Number(editCalories) || null,
				proteinMode: editProteinMode,
				proteinTarget: Number(editProteinTarget) || null,
				fatPercent: Number(editFatPercent) || null,
				carbPercent: Number(editCarbPercent) || null,
			};
			const res = await fetch('/api/fitness/goal', {
				method: 'PUT',
				headers: { 'Content-Type': 'application/json' },
				body: JSON.stringify(body)
			});
			if (res.ok) {
				const d = await res.json();
				goalCalories = d.dailyCalories;
				activityLevel = d.activityLevel ?? 'light';
				goalProteinMode = d.proteinMode ?? 'fixed';
				goalProteinTarget = d.proteinTarget;
				goalFatPercent = d.fatPercent;
				goalCarbPercent = d.carbPercent;
				showGoalEditor = false;
			}
		} finally {
			goalSaving = false;
		}
	}

	// --- Computed daily totals ---
	const mealTypes = ['breakfast', 'lunch', 'dinner', 'snack'];

	const grouped = $derived.by(() => {
		/** @type {Record<string, any[]>} */
		const g = { breakfast: [], lunch: [], dinner: [], snack: [] };
		for (const e of entries) {
			if (e.mealType === 'water') continue;
			if (g[e.mealType]) g[e.mealType].push(e);
		}
		return g;
	});

	// --- Water & liquid tracking ---
	const WATER_CUP_ML = 250;

	/** BLS Trinkwasser (N110000) per100g */
	const WATER_PER100G = {
		calories: 0, protein: 0, fat: 0, saturatedFat: 0, carbs: 0, fiber: 0, sugars: 0,
		calcium: 5.3, iron: 0, magnesium: 0.9, phosphorus: 0.011, potassium: 0.2,
		sodium: 2.3, zinc: 0.001, vitaminA: 0, vitaminC: 0, vitaminD: 0, vitaminE: 0,
		vitaminK: 0, thiamin: 0, riboflavin: 0, niacin: 0, vitaminB6: 0, vitaminB12: 0,
		folate: 0, cholesterol: 0,
	};

	/** Detect if a food log entry is a beverage (non-water) */
	const DRINK_PATTERNS = /^(milch|kaffee|coffee|tee|tea|cola|fanta|sprite|saft|juice|limo|smoothie|kakao|cocoa|bier|beer|wein|wine|eistee|ice tea|energy|redbull|red bull|mate|schorle|sprudel|mineral|orangensaft|apfelsaft|multivitamin|iso|gatorade|powerade)/i;
	function isBeverage(e) {
		if (e.mealType === 'water') return false;
		if (e.source === 'bls' && e.sourceId?.startsWith('N')) return true;
		return DRINK_PATTERNS.test(e.name);
	}

	/** Detect if a custom meal ingredient is a liquid (for hydration auto-logging) */
	function isLiquidIngredient(ing) {
		if (ing.source === 'bls' && ing.sourceId?.startsWith('N')) return true;
		return DRINK_PATTERNS.test(ing.name) || /^(wasser|water|trinkwasser)/i.test(ing.name);
	}

	let waterGoalMl = $state(2000);
	let editingGoal = $state(false);
	let goalInputL = $state(2);

	$effect(() => {
		const saved = localStorage.getItem('water_goal_ml');
		if (saved) {
			const v = parseInt(saved);
			if (v > 0) waterGoalMl = v;
		}
	});

	function saveGoal() {
		const ml = Math.max(250, Math.round(goalInputL * 1000));
		waterGoalMl = ml;
		localStorage.setItem('water_goal_ml', String(ml));
		editingGoal = false;
	}

	let waterEntries = $derived(entries.filter(e => e.mealType === 'water'));
	let beverageEntries = $derived(entries.filter(isBeverage));
	let waterMl = $derived(waterEntries.reduce((s, e) => s + e.amountGrams, 0));
	let beverageMl = $derived(beverageEntries.reduce((s, e) => s + e.amountGrams, 0));
	let mealLiquidMl = $derived(entries.reduce((s, e) => s + (e.liquidMl ?? 0), 0));
	let totalLiquidMl = $derived(waterMl + beverageMl + mealLiquidMl);
	let beverageCups = $derived(Math.round(beverageMl / WATER_CUP_ML));
	let waterCups = $derived(Math.round(waterMl / WATER_CUP_ML));
	let mealLiquidCups = $derived(Math.round(mealLiquidMl / WATER_CUP_ML));
	let totalCups = $derived(beverageCups + waterCups + mealLiquidCups);
	let goalCups = $derived(Math.round(waterGoalMl / WATER_CUP_ML));
	let displayCups = $derived(Math.max(goalCups, totalCups + 1));

	/** @type {Set<number>} cups currently animating fill/drain */
	let fillingCups = $state(new Set());
	let drainingCups = $state(new Set());
	let lastTotalCups = $state(-1);

	$effect(() => {
		const cur = totalCups;
		if (lastTotalCups === -1) {
			lastTotalCups = cur;
			return;
		}
		if (cur > lastTotalCups) {
			const s = new Set(fillingCups);
			for (let i = lastTotalCups; i < cur; i++) s.add(i);
			fillingCups = s;
			setTimeout(() => { fillingCups = new Set(); }, 1500);
		} else if (cur < lastTotalCups) {
			const s = new Set(drainingCups);
			for (let i = cur; i < lastTotalCups; i++) s.add(i);
			drainingCups = s;
			setTimeout(() => { drainingCups = new Set(); }, 700);
		}
		lastTotalCups = cur;
	});

	async function setWaterCups(target) {
		const current = waterCups;
		if (target === current) return;
		try {
			if (target > current) {
				const toAdd = target - current;
				const promises = Array.from({ length: toAdd }, () =>
					fetch('/api/fitness/food-log', {
						method: 'POST',
						headers: { 'Content-Type': 'application/json' },
						body: JSON.stringify({
							date: currentDate,
							mealType: 'water',
							name: 'Trinkwasser',
							source: 'bls',
							sourceId: 'N110000',
							amountGrams: WATER_CUP_ML,
							per100g: WATER_PER100G,
						})
					}).then(r => r.ok ? r.json() : null)
				);
				const results = await Promise.all(promises);
				const newEntries = results.filter(Boolean);
				if (newEntries.length) entries = [...entries, ...newEntries];
			} else {
				const toRemove = waterEntries.slice(target);
				const ids = toRemove.map(e => e._id);
				await Promise.all(ids.map(id =>
					fetch(`/api/fitness/food-log/${id}`, { method: 'DELETE' })
				));
				entries = entries.filter(e => !ids.includes(e._id));
			}
		} catch {
			toast.error(isEn ? 'Failed to update water' : 'Fehler beim Aktualisieren');
		}
	}

	function entryCalories(e) {
		return (e.per100g?.calories ?? 0) * e.amountGrams / 100;
	}
	function entryNutrient(e, key) {
		return (e.per100g?.[key] ?? 0) * e.amountGrams / 100;
	}

	const microKeys = ['calcium', 'iron', 'magnesium', 'phosphorus', 'potassium', 'sodium', 'zinc',
		'vitaminA', 'vitaminC', 'vitaminD', 'vitaminE', 'vitaminK', 'thiamin', 'riboflavin', 'niacin',
		'vitaminB6', 'vitaminB12', 'folate', 'cholesterol'];
	const aminoKeys = ['isoleucine', 'leucine', 'lysine', 'methionine', 'phenylalanine',
		'threonine', 'tryptophan', 'valine', 'histidine', 'alanine', 'arginine',
		'asparticAcid', 'cysteine', 'glutamicAcid', 'glycine', 'proline', 'serine', 'tyrosine'];

	const dayTotals = $derived.by(() => {
		let calories = 0, protein = 0, fat = 0, carbs = 0, fiber = 0, sugars = 0, saturatedFat = 0;
		const micros = {};
		const aminos = {};
		for (const k of microKeys) micros[k] = 0;
		for (const k of aminoKeys) aminos[k] = 0;

		for (const e of entries) {
			const r = e.amountGrams / 100;
			const p = e.per100g ?? {};
			calories += (p.calories ?? 0) * r;
			protein += (p.protein ?? 0) * r;
			fat += (p.fat ?? 0) * r;
			carbs += (p.carbs ?? 0) * r;
			fiber += (p.fiber ?? 0) * r;
			sugars += (p.sugars ?? 0) * r;
			saturatedFat += (p.saturatedFat ?? 0) * r;
			for (const k of microKeys) micros[k] += (p[k] ?? 0) * r;
			for (const k of aminoKeys) aminos[k] += (p[k] ?? 0) * r;
		}
		return { calories, protein, fat, carbs, fiber, sugars, saturatedFat, micros, aminos };
	});

	// Macro percentages by calorie contribution
	const macroPercent = $derived.by(() => {
		const proteinCal = dayTotals.protein * 4;
		const fatCal = dayTotals.fat * 9;
		const carbsCal = dayTotals.carbs * 4;
		const total = proteinCal + fatCal + carbsCal;
		if (total === 0) return { protein: 0, fat: 0, carbs: 0 };
		return {
			protein: Math.round(proteinCal / total * 100),
			fat: Math.round(fatCal / total * 100),
			carbs: 100 - Math.round(proteinCal / total * 100) - Math.round(fatCal / total * 100),
		};
	});

	// Protein goal in grams
	const proteinGoalGrams = $derived.by(() => {
		if (goalProteinTarget) {
			if (goalProteinMode === 'per_kg' && latestWeight) {
				return goalProteinTarget * latestWeight;
			}
			if (goalProteinMode === 'fixed') return goalProteinTarget;
		}
		// Fallback: derive from remaining calorie % (100 - fat% - carb%)
		if (goalCalories && goalFatPercent != null && goalCarbPercent != null) {
			const proteinPct = 100 - (goalFatPercent || 0) - (goalCarbPercent || 0);
			if (proteinPct > 0) return (goalCalories * proteinPct / 100) / 4;
		}
		return null;
	});

	// Fat/carb goals in grams (from calorie %)
	const fatGoalGrams = $derived(goalCalories && goalFatPercent ? (goalCalories * goalFatPercent / 100) / 9 : null);
	const carbGoalGrams = $derived(goalCalories && goalCarbPercent ? (goalCalories * goalCarbPercent / 100) / 4 : null);

	// --- Burned kcal ---
	// svelte-ignore state_referenced_locally
	let exerciseKcal = $state(Number(data.exerciseKcal) || 0);

	// BMR via Mifflin-St Jeor (doi:10.1093/ajcn/51.2.241)
	const birthYear = $derived(data.goal?.birthYear ?? null);
	const userAge = $derived(birthYear ? new Date().getFullYear() - birthYear : null);
	const hasBmrData = $derived(latestWeight != null && data.goal?.heightCm != null && birthYear != null);

	// NEAT-only multipliers (exercise tracked separately)
	const ACTIVITY_MULT = { sedentary: 1.2, light: 1.3, moderate: 1.4, very_active: 1.5 };

	const dailyBmr = $derived.by(() => {
		const w = Number(latestWeight) || 80;
		const h = Number(data.goal?.heightCm) || 175;
		const age = userAge ?? 30;
		if (goalSex === 'female') return 10 * w + 6.25 * h - 5 * age - 161;
		return 10 * w + 6.25 * h - 5 * age + 5;
	});

	const dailyTdee = $derived(dailyBmr * (ACTIVITY_MULT[activityLevel] ?? 1.3));

	// TDEE comparison bar (for goal editor)
	const editTdee = $derived(dailyBmr * (ACTIVITY_MULT[editActivityLevel] ?? 1.3));
	const editCalNum = $derived(Number(editCalories) || 0);
	const tdeeBarData = $derived.by(() => {
		const tdee = Math.round(editTdee);
		const target = editCalNum;
		if (!tdee || !target) return null;
		const diff = target - tdee;
		const pctOfTdee = Math.round((diff / tdee) * 100);
		let zone = 'maintenance';
		if (diff < -50) zone = 'deficit';
		else if (diff > 50) zone = 'surplus';
		// Target as percentage of TDEE (TDEE = 100% reference)
		const targetPct = Math.min((target / tdee) * 100, 150);
		return { tdee, target, diff, pctOfTdee, zone, targetPct };
	});

	// TDEE (excl. exercise) prorated to current time of day (for today only)
	const tdeeSoFar = $derived.by(() => {
		if (currentDate !== todayStr) return Math.round(dailyTdee);
		const now = new Date();
		const fraction = (now.getHours() * 60 + now.getMinutes()) / 1440;
		return Math.round(dailyTdee * fraction);
	});



	// Net calorie balance: goal + burned - eaten
	const calorieBalance = $derived(goalCalories ? (goalCalories + (exerciseKcal || 0) - dayTotals.calories) : 0);
	const calorieProgressRaw = $derived(goalCalories ? dayTotals.calories / (goalCalories + (exerciseKcal || 0)) * 100 : 0);
	const calorieProgress = $derived(Math.min(calorieProgressRaw, 100));
	const calorieOverflow = $derived(Math.max(calorieProgressRaw - 100, 0));

	// DRI for micros
	const dri = $derived(getDRI(goalSex));

	// SVG ring constants (same as NutritionSummary)
	const RADIUS = 28;
	const ARC_DEGREES = 300;
	const ARC_LENGTH = (ARC_DEGREES / 360) * 2 * Math.PI * RADIUS;
	const ARC_ROTATE = 120;

	function strokeOffset(percent) {
		return ARC_LENGTH - (Math.min(percent, 100) / 100) * ARC_LENGTH;
	}

	/** Stroke offset for overflow arc drawn from the end backwards */
	function overflowOffset(overflowPct) {
		return ARC_LENGTH - (Math.min(overflowPct, 100) / 100) * ARC_LENGTH;
	}

	// --- Inline add food ---
	let addingMeal = $state(null);
	let inlineTab = $state('search'); // 'search' | 'meals'

	// --- FAB modal (route-based via ?add param) ---
	const showFabModal = $derived($page.url.searchParams.has('add'));
	let fabMealType = $state('lunch');

	const fabHref = $derived(`/fitness/${s.nutrition}?add`);

	function defaultMealType() {
		const h = new Date().getHours();
		if (h >= 5 && h < 10) return 'breakfast';
		if (h >= 10 && h < 15) return 'lunch';
		if (h >= 15 && h < 17) return 'snack';
		return 'dinner';
	}

	// Reset modal state when it opens
	$effect(() => {
		if (showFabModal) {
			fabMealType = defaultMealType();
			fabTab = 'search';
			loadCustomMeals();
		}
	});

	function closeFabModal() {
		goto(`/fitness/${s.nutrition}`, { replaceState: true, keepFocus: true, noScroll: true });
	}

	async function fabLogFood(food) {
		try {
			const res = await fetch('/api/fitness/food-log', {
				method: 'POST',
				headers: { 'Content-Type': 'application/json' },
				body: JSON.stringify({
					date: currentDate,
					mealType: fabMealType,
					name: food.name,
					source: food.source,
					sourceId: food.sourceId,
					amountGrams: food.amountGrams,
					per100g: food.per100g,
				})
			});
			if (res.ok) {
				const entry = await res.json();
				entries = [...entries, entry];
				closeFabModal();
			}
		} catch {
			toast.error(isEn ? 'Failed to log food' : 'Fehler beim Eintragen');
		}
	}

	// --- Custom meals in FAB ---
	let fabTab = $state('search'); // 'search' | 'meals'
	let customMeals = $state([]);
	let customMealsLoaded = $state(false);

	async function loadCustomMeals() {
		if (customMealsLoaded) return;
		try {
			const res = await fetch('/api/fitness/custom-meals');
			if (res.ok) {
				const data = await res.json();
				customMeals = data.meals ?? [];
			}
		} catch {}
		customMealsLoaded = true;
	}

	function mealTotalCal(meal) {
		return meal.ingredients.reduce((sum, ing) => sum + (ing.per100g?.calories ?? 0) * ing.amountGrams / 100, 0);
	}

	async function logCustomMeal(meal) {
		try {
			// Aggregate all ingredients into a single per100g snapshot
			const totals = {};
			const nutrientKeys = ['calories', 'protein', 'fat', 'saturatedFat', 'carbs', 'fiber', 'sugars',
				'calcium', 'iron', 'magnesium', 'phosphorus', 'potassium', 'sodium', 'zinc',
				'vitaminA', 'vitaminC', 'vitaminD', 'vitaminE', 'vitaminK',
				'thiamin', 'riboflavin', 'niacin', 'vitaminB6', 'vitaminB12', 'folate', 'cholesterol',
				'isoleucine', 'leucine', 'lysine', 'methionine', 'phenylalanine', 'threonine',
				'tryptophan', 'valine', 'histidine', 'alanine', 'arginine', 'asparticAcid',
				'cysteine', 'glutamicAcid', 'glycine', 'proline', 'serine', 'tyrosine'];
			for (const k of nutrientKeys) totals[k] = 0;
			let totalGrams = 0;
			for (const ing of meal.ingredients) {
				const r = ing.amountGrams / 100;
				totalGrams += ing.amountGrams;
				for (const k of nutrientKeys) totals[k] += (ing.per100g?.[k] ?? 0) * r;
			}
			// Convert absolute totals back to per-100g
			const per100g = {};
			const scale = totalGrams > 0 ? 100 / totalGrams : 0;
			for (const k of nutrientKeys) per100g[k] = totals[k] * scale;

			const liquidMl = meal.ingredients
				.filter(isLiquidIngredient)
				.reduce((sum, ing) => sum + ing.amountGrams, 0);

			await fetch('/api/fitness/food-log', {
				method: 'POST',
				headers: { 'Content-Type': 'application/json' },
				body: JSON.stringify({
					date: currentDate,
					mealType: fabMealType,
					name: meal.name,
					source: 'custom',
					sourceId: meal._id,
					amountGrams: totalGrams,
					per100g,
					...(liquidMl > 0 && { liquidMl }),
				})
			});

			await goto(`/fitness/${s.nutrition}?date=${currentDate}`, { replaceState: true, noScroll: true });
			closeFabModal();
			toast.success(isEn ? `Logged "${meal.name}"` : `"${meal.name}" eingetragen`);
		} catch {
			toast.error(isEn ? 'Failed to log meal' : 'Fehler beim Eintragen');
		}
	}

	function startAdd(meal) {
		addingMeal = meal;
		inlineTab = 'search';
		loadCustomMeals();
	}

	function cancelAdd() {
		addingMeal = null;
	}

	async function inlineLogCustomMeal(meal) {
		if (!addingMeal) return;
		try {
			const totals = {};
			const nutrientKeys = ['calories', 'protein', 'fat', 'saturatedFat', 'carbs', 'fiber', 'sugars',
				'calcium', 'iron', 'magnesium', 'phosphorus', 'potassium', 'sodium', 'zinc',
				'vitaminA', 'vitaminC', 'vitaminD', 'vitaminE', 'vitaminK',
				'thiamin', 'riboflavin', 'niacin', 'vitaminB6', 'vitaminB12', 'folate', 'cholesterol',
				'isoleucine', 'leucine', 'lysine', 'methionine', 'phenylalanine', 'threonine',
				'tryptophan', 'valine', 'histidine', 'alanine', 'arginine', 'asparticAcid',
				'cysteine', 'glutamicAcid', 'glycine', 'proline', 'serine', 'tyrosine'];
			for (const k of nutrientKeys) totals[k] = 0;
			let totalGrams = 0;
			for (const ing of meal.ingredients) {
				const r = ing.amountGrams / 100;
				totalGrams += ing.amountGrams;
				for (const k of nutrientKeys) totals[k] += (ing.per100g?.[k] ?? 0) * r;
			}
			const per100g = {};
			const scale = totalGrams > 0 ? 100 / totalGrams : 0;
			for (const k of nutrientKeys) per100g[k] = totals[k] * scale;

			const liquidMl = meal.ingredients
				.filter(isLiquidIngredient)
				.reduce((sum, ing) => sum + ing.amountGrams, 0);

			await fetch('/api/fitness/food-log', {
				method: 'POST',
				headers: { 'Content-Type': 'application/json' },
				body: JSON.stringify({
					date: currentDate,
					mealType: addingMeal,
					name: meal.name,
					source: 'custom',
					sourceId: meal._id,
					amountGrams: totalGrams,
					per100g,
					...(liquidMl > 0 && { liquidMl }),
				})
			});

			await goto(`/fitness/${s.nutrition}?date=${currentDate}`, { replaceState: true, noScroll: true });
			cancelAdd();
			toast.success(isEn ? `Logged "${meal.name}"` : `"${meal.name}" eingetragen`);
		} catch {
			toast.error(isEn ? 'Failed to log meal' : 'Fehler beim Eintragen');
		}
	}

	async function inlineLogFood(food) {
		try {
			const res = await fetch('/api/fitness/food-log', {
				method: 'POST',
				headers: { 'Content-Type': 'application/json' },
				body: JSON.stringify({
					date: currentDate,
					mealType: addingMeal,
					name: food.name,
					source: food.source,
					sourceId: food.sourceId,
					amountGrams: food.amountGrams,
					per100g: food.per100g,
				})
			});
			if (res.ok) {
				const entry = await res.json();
				entries = [...entries, entry];
				cancelAdd();
			}
		} catch {
			toast.error(isEn ? 'Failed to log food' : 'Fehler beim Eintragen');
		}
	}

	/** @type {string|null} */
	let editingEntryId = $state(null);
	let editingGrams = $state(0);

	function startEditEntry(entry) {
		editingEntryId = entry._id;
		editingGrams = entry.amountGrams;
	}

	async function saveEditEntry() {
		if (!editingEntryId || editingGrams <= 0) return;
		try {
			const res = await fetch(`/api/fitness/food-log/${editingEntryId}`, {
				method: 'PUT',
				headers: { 'Content-Type': 'application/json' },
				body: JSON.stringify({ amountGrams: editingGrams }),
			});
			if (res.ok) {
				const updated = await res.json();
				entries = entries.map(e => e._id === editingEntryId ? updated : e);
			}
		} catch {
			toast.error(isEn ? 'Failed to update' : 'Fehler beim Aktualisieren');
		}
		editingEntryId = null;
	}

	async function deleteEntry(id) {
		if (!await confirm(t('delete_entry_confirm', lang))) return;
		try {
			const res = await fetch(`/api/fitness/food-log/${id}`, { method: 'DELETE' });
			if (res.ok) {
				entries = entries.filter(e => e._id !== id);
			}
		} catch {}
	}

	// --- Micro details ---
	let showMicros = $state(false);
	let showTdeeInfo = $state(false);

	// WHO essential amino acid requirements (mg/kg/day for adults)
	const AMINO_DRI_PER_KG = {
		histidine: 10, isoleucine: 20, leucine: 39, lysine: 30,
		methionine: 15, phenylalanine: 25, threonine: 15, tryptophan: 4, valine: 26
	};

	const AMINO_META = {
		leucine:       { en: 'Leucine',       de: 'Leucin' },
		isoleucine:    { en: 'Isoleucine',    de: 'Isoleucin' },
		valine:        { en: 'Valine',         de: 'Valin' },
		lysine:        { en: 'Lysine',         de: 'Lysin' },
		methionine:    { en: 'Methionine',     de: 'Methionin' },
		phenylalanine: { en: 'Phenylalanine',  de: 'Phenylalanin' },
		threonine:     { en: 'Threonine',      de: 'Threonin' },
		tryptophan:    { en: 'Tryptophan',     de: 'Tryptophan' },
		histidine:     { en: 'Histidine',      de: 'Histidin' },
		alanine:       { en: 'Alanine',        de: 'Alanin' },
		arginine:      { en: 'Arginine',       de: 'Arginin' },
		asparticAcid:  { en: 'Aspartic Acid',  de: 'Asparaginsäure' },
		cysteine:      { en: 'Cysteine',       de: 'Cystein' },
		glutamicAcid:  { en: 'Glutamic Acid',  de: 'Glutaminsäure' },
		glycine:       { en: 'Glycine',        de: 'Glycin' },
		proline:       { en: 'Proline',        de: 'Prolin' },
		serine:        { en: 'Serine',         de: 'Serin' },
		tyrosine:      { en: 'Tyrosine',       de: 'Tyrosin' },
	};

	const microSections = $derived.by(() => {
		const minerals = ['calcium', 'iron', 'magnesium', 'phosphorus', 'potassium', 'sodium', 'zinc'];
		const vitamins = ['vitaminA', 'vitaminC', 'vitaminD', 'vitaminE', 'vitaminK', 'thiamin', 'riboflavin', 'niacin', 'vitaminB6', 'vitaminB12', 'folate'];
		const other = ['cholesterol'];

		function mkRows(keys) {
			return keys.map(k => {
				const meta = NUTRIENT_META[k];
				const value = dayTotals.micros[k] ?? 0;
				const goal = dri[k] ?? 0;
				const pct = goal > 0 ? Math.round(value / goal * 100) : 0;
				return { key: k, label: isEn ? meta.label : meta.labelDe, unit: meta.unit, value, goal, pct, isMax: meta.isMax };
			});
		}

		// Amino acids: essential first (with DRI), then non-essential
		const essentialOrder = ['leucine', 'isoleucine', 'valine', 'lysine', 'methionine', 'phenylalanine', 'threonine', 'tryptophan', 'histidine'];
		const nonEssentialOrder = ['alanine', 'arginine', 'asparticAcid', 'cysteine', 'glutamicAcid', 'glycine', 'proline', 'serine', 'tyrosine'];
		const w = latestWeight ?? 70;
		const aminoRows = [...essentialOrder, ...nonEssentialOrder].map(k => {
			const value = dayTotals.aminos[k] ?? 0;
			// WHO DRI is mg/kg/day; value is in grams → convert goal to grams
			const driPerKg = AMINO_DRI_PER_KG[k];
			const goal = driPerKg ? (driPerKg * w) / 1000 : 0;
			const pct = goal > 0 ? Math.round(value / goal * 100) : 0;
			const meta = AMINO_META[k];
			return { key: k, label: isEn ? meta.en : meta.de, unit: 'g', value, goal, pct, isMax: false };
		});

		return [
			{ title: isEn ? 'Minerals' : 'Mineralstoffe', rows: mkRows(minerals) },
			{ title: isEn ? 'Vitamins' : 'Vitamine', rows: mkRows(vitamins) },
			{ title: isEn ? 'Amino Acids' : 'Aminosäuren', rows: aminoRows },
			{ title: isEn ? 'Other' : 'Sonstiges', rows: mkRows(other) },
		];
	});

	function fmt(v) {
		if (v >= 100) return Math.round(v).toString();
		if (v >= 10) return v.toFixed(1);
		return v.toFixed(1);
	}

	function fmtCal(v) {
		return Math.round(v).toString();
	}

	const mealMeta = {
		breakfast: { icon: Coffee, color: 'var(--nord13)' },
		lunch:     { icon: Sun, color: 'var(--nord12)' },
		dinner:    { icon: Moon, color: 'var(--nord15)' },
		snack:     { icon: Cookie, color: 'var(--nord14)' },
	};

	// --- Quick-log sidebar ---
	let quickLogMealType = $state(defaultMealType());
	// svelte-ignore state_referenced_locally
	let quickFavorites = $state(data.favorites ?? []);
	// svelte-ignore state_referenced_locally
	let recentFoods = $state(data.recentFoods ?? []);

	$effect(() => {
		quickFavorites = data.favorites ?? [];
		recentFoods = data.recentFoods ?? [];
	});

	/** @type {{ name: string, source: string, sourceId: string, per100g?: any, amountGrams?: number } | null} */
	let qlSelected = $state(null);
	let qlGrams = $state(100);
	let qlLoading = $state(false);

	async function qlSelect(item) {
		if (qlSelected && qlSelected.source === item.source && qlSelected.sourceId === item.sourceId) {
			qlSelected = null;
			return;
		}
		qlGrams = item.amountGrams ?? 100;
		if (item.per100g) {
			qlSelected = item;
		} else {
			// Favorites don't have per100g — fetch by exact source+id
			qlLoading = true;
			try {
				const res = await fetch(`/api/nutrition/lookup?source=${item.source}&id=${encodeURIComponent(item.sourceId)}`);
				if (res.ok) {
					const data = await res.json();
					if (data.per100g) {
						qlSelected = { ...item, per100g: data.per100g };
					} else {
						toast.error(isEn ? 'Could not load food data' : 'Lebensmitteldaten nicht gefunden');
					}
				}
			} catch {
				toast.error(isEn ? 'Failed to load food data' : 'Fehler beim Laden');
			}
			qlLoading = false;
		}
	}

	async function qlConfirm() {
		if (!qlSelected?.per100g) return;
		try {
			const res = await fetch('/api/fitness/food-log', {
				method: 'POST',
				headers: { 'Content-Type': 'application/json' },
				body: JSON.stringify({
					date: currentDate,
					mealType: quickLogMealType,
					name: qlSelected.name,
					source: qlSelected.source,
					sourceId: qlSelected.sourceId,
					amountGrams: qlGrams,
					per100g: qlSelected.per100g,
				})
			});
			if (res.ok) {
				const entry = await res.json();
				entries = [...entries, entry];
				toast.success(isEn ? `Logged "${qlSelected.name}"` : `"${qlSelected.name}" eingetragen`);
				qlSelected = null;
			}
		} catch {
			toast.error(isEn ? 'Failed to log food' : 'Fehler beim Eintragen');
		}
	}
</script>

<svelte:head>
	<title>{t('nutrition_title', lang)} — Fitness</title>
</svelte:head>

{#snippet microPanel()}
	<div class="micro-details" class:micro-hidden={!showMicros}>
		{#each microSections as section}
			<div class="micro-section">
				<h4>{section.title}</h4>
				{#each section.rows as row}
					<div class="micro-row">
						<span class="micro-label">{row.label}</span>
						<div class="micro-bar-wrap">
							<div class="micro-bar" class:is-max={row.isMax} style="width: {Math.min(row.pct, 100)}%"></div>
						</div>
						<span class="micro-value">{fmt(row.value)} {row.unit}</span>
						<span class="micro-pct">{row.pct}%</span>
					</div>
				{/each}
			</div>
		{/each}
	</div>
{/snippet}

<div class="nutrition-page">
	<!-- Date Navigator -->
	<div class="date-nav">
		<button class="date-btn" onclick={() => navigateDate(-1)} aria-label="Previous day">
			<ChevronLeft size={20} />
		</button>
		<button class="date-display" onclick={goToday} class:is-today={isToday}>
			{displayDate}
			{#if isToday}<span class="today-badge">{t('today', lang)}</span>{/if}
		</button>
		<button class="date-btn" onclick={() => navigateDate(1)} aria-label="Next day">
			<ChevronRight size={20} />
		</button>
		{#if !isToday}
			<button class="go-today-btn" onclick={goToday}>{t('today', lang)}</button>
		{/if}
	</div>

	<div class="sidebar-col">
	<!-- Daily Summary -->
	{#if goalCalories}
		<div class="daily-summary">
			<!-- Eaten / Ring / Burned row -->
			<div class="calorie-trio">
				<div class="cal-stat eaten">
					<span class="cal-stat-value">{fmtCal(dayTotals.calories)}</span>
					<span class="cal-stat-label">{isEn ? 'EATEN' : 'GEGESSEN'}</span>
				</div>

				<div class="calorie-ring-wrap">
					<svg class="calorie-ring" width="130" height="130" viewBox="0 0 70 70">
						<circle class="ring-bg" cx="35" cy="35" r={RADIUS}
							stroke-dasharray="{ARC_LENGTH} {2 * Math.PI * RADIUS}"
							transform="rotate({ARC_ROTATE} 35 35)" />
						{#if calorieOverflow > 0}
							<circle class="ring-glow ring-calories-glow" cx="35" cy="35" r={RADIUS}
								stroke-dasharray="{ARC_LENGTH} {2 * Math.PI * RADIUS}"
								style="--glow-target: {strokeOffset(Math.max(calorieProgress - calorieOverflow, 0))}; --glow-start: {strokeOffset(100)}"
								transform="rotate({ARC_ROTATE} 35 35)" />
						{/if}
						<circle class="ring-fill ring-calories{calorieOverflow > 0 ? ' no-glow' : ''}" cx="35" cy="35" r={RADIUS}
							stroke-dasharray="{ARC_LENGTH} {2 * Math.PI * RADIUS}"
							stroke-dashoffset={strokeOffset(calorieProgress)}
							transform="rotate({ARC_ROTATE} 35 35)" />
						{#if calorieOverflow > 0}
							<circle class="ring-fill ring-overflow" cx="35" cy="35" r={RADIUS}
								stroke-dasharray="{ARC_LENGTH} {2 * Math.PI * RADIUS}"
								style="--overflow-target: {overflowOffset(calorieOverflow)}; --arc-length: {ARC_LENGTH}"
								stroke-linecap="butt"
								transform="translate(70, 0) scale(-1, 1) rotate({ARC_ROTATE} 35 35)" />
						{/if}
						<text class="ring-text-main" x="35" y="30">{fmtCal(Math.abs(calorieBalance))}</text>
						<text class="ring-text-sub" x="35" y="42">{calorieBalance >= 0 ? (isEn ? 'KCAL LEFT' : 'KCAL ÜBRIG') : (isEn ? 'KCAL OVER' : 'KCAL ÜBER')}</text>
					</svg>
				</div>

				<div class="cal-stat burned">
					<span class="cal-stat-value">{fmtCal(exerciseKcal)}</span>
					<span class="cal-stat-label">{isEn ? 'BURNED' : 'VERBRANNT'}</span>
					<span class="burned-bmr tdee-info-wrap">
						+{fmtCal(tdeeSoFar)} TDEE<button class="tdee-info-trigger" onclick={() => showTdeeInfo = !showTdeeInfo} aria-label="TDEE info"><Info size={10} /></button>
						{#if showTdeeInfo}
							<div class="tdee-info-tooltip">
								<span class="cite-note" style="margin-bottom: 0.2rem">{isEn ? 'TDEE = Total Daily Energy Expenditure — calories your body burns per day at rest + daily activity.' : 'TDEE = Gesamtenergieumsatz — Kalorien, die dein Körper pro Tag in Ruhe + Alltagsaktivität verbrennt.'}</span>
								{#if latestWeight}
									<span class="cite-note" style="margin-bottom: 0.2rem">{isEn ? `Based on your latest logged weight (${latestWeight} kg).` : `Basierend auf deinem letzten Gewicht (${latestWeight} kg).`}</span>
								{/if}
								<span class="cite-line"><strong>BMR:</strong> <a href="https://doi.org/10.1093/ajcn/51.2.241" target="_blank" rel="noopener">Mifflin-St Jeor (1990)</a></span>
								<span class="cite-line"><strong>NEAT:</strong> <a href="https://doi.org/10.1093/ajcn/75.5.914" target="_blank" rel="noopener">Levine (2002)</a></span>
								<span class="cite-note">{isEn ? 'Multipliers reduced vs. standard Harris-Benedict factors — logged exercise kcal added separately.' : 'Multiplikatoren reduziert ggü. Harris-Benedict — geloggte Trainings-kcal werden separat addiert.'}</span>
							</div>
						{/if}
					</span>
					{#if !hasBmrData}
						<div class="bmr-hint">{isEn ? 'Set profile in' : 'Profil unter'} <a href="/fitness/{s.measure}">{t('measure_title', lang)}</a></div>
					{/if}
				</div>
			</div>

			<!-- Macro progress bars -->
			<div class="macro-bars">
				{#each [
					{ value: dayTotals.protein, goal: proteinGoalGrams, label: t('protein', lang), color: 'var(--nord14)' },
					{ value: dayTotals.fat, goal: fatGoalGrams, label: t('fat', lang), color: 'var(--nord12)' },
					{ value: dayTotals.carbs, goal: carbGoalGrams, label: t('carbs', lang), color: 'var(--nord9)' },
				] as macro}
					{@const pct = macro.goal ? macro.value / macro.goal * 100 : 0}
					{@const over = pct > 100}
					{@const overPct = Math.min(pct - 100, 100)}
					{@const remaining = macro.goal ? macro.goal - macro.value : 0}
					<div class="macro-bar-item">
						<span class="macro-bar-label">{macro.label}</span>
						<div class="macro-bar-track">
							<div class="macro-bar-fill" style="width: {Math.min(pct, 100)}%; background: {macro.color}"></div>
							{#if over}
								<div class="macro-bar-overflow" style="width: {overPct}%"></div>
							{/if}
						</div>
						{#if macro.goal}
							<span class="macro-bar-info" class:over>
								{remaining >= 0 ? `${fmt(remaining)}g ${t('remaining', lang)}` : `${fmt(-remaining)}g ${t('over', lang)}`}
							</span>
						{:else}
							<span class="macro-bar-info">{fmt(macro.value)}g</span>
						{/if}
					</div>
				{/each}
			</div>

			<!-- Micros inline (mobile) -->
			<div class="micro-inline">
				<div class="details-toggle-row">
					<button class="details-toggle" onclick={() => showMicros = !showMicros}>
						<ChevronDown size={14} style={showMicros ? 'transform: rotate(180deg)' : ''} />
						{t('micro_details', lang)}
					</button>
				</div>
				{@render microPanel()}
			</div>

		</div>
	{:else}
		<div class="no-goal">
			<div class="no-goal-icon"><Utensils size={32} /></div>
			<p>{t('set_goal_prompt', lang)}</p>
			<button class="btn-primary" onclick={openGoalEditor}>{t('set_goal', lang)}</button>
		</div>
	{/if}

	<!-- Goal editor toggle -->
	{#if goalCalories && !showGoalEditor}
		<button class="goal-edit-btn" onclick={openGoalEditor}>
			<Settings size={14} />
			{t('daily_goal', lang)}
		</button>
	{/if}

	<!-- Goal Editor (Stepped Wizard) -->
	{#if showGoalEditor}
		<div class="goal-editor">
			<h3>{t('daily_goal', lang)}</h3>

			<!-- Step indicators -->
			<div class="wizard-steps">
				<button class="wizard-step" class:active={goalStep === 1} class:done={goalStep > 1} onclick={() => goalStep = 1}>
					<span class="ws-num">{goalStep > 1 ? '' : '1'}{#if goalStep > 1}<Check size={12} />{/if}</span>
					<span class="ws-label">{isEn ? 'Plan' : 'Plan'}</span>
				</button>
				<div class="ws-line" class:done={goalStep > 1}></div>
				<button class="wizard-step" class:active={goalStep === 2} class:done={goalStep > 2} onclick={() => goalStep = 2}>
					<span class="ws-num">{goalStep > 2 ? '' : '2'}{#if goalStep > 2}<Check size={12} />{/if}</span>
					<span class="ws-label">{isEn ? 'Calories' : 'Kalorien'}</span>
				</button>
				<div class="ws-line" class:done={goalStep > 2}></div>
				<button class="wizard-step" class:active={goalStep === 3} onclick={() => goalStep = 3}>
					<span class="ws-num">3</span>
					<span class="ws-label">{isEn ? 'Macros' : 'Makros'}</span>
				</button>
			</div>

			<!-- Step 1: Diet Presets -->
			{#if goalStep === 1}
				<div class="preset-section">
					<div class="preset-grid">
						{#each dietPresets as preset, i}
							<button
								class="preset-card"
								class:selected={selectedPresetIdx === i}
								type="button"
								onclick={() => applyPreset(preset, i)}
							>
								<span class="preset-card-emoji">{preset.emoji}</span>
								<div class="preset-card-text">
									<span class="preset-card-name">{isEn ? preset.en : preset.de}</span>
									<span class="preset-card-desc">{isEn ? preset.descEn : preset.descDe}</span>
								</div>
							</button>
						{/each}
					</div>
					<button class="wizard-skip" type="button" onclick={() => goalStep = 2}>
						{isEn ? 'Skip — set manually' : 'Überspringen — manuell einstellen'} →
					</button>
				</div>

			<!-- Step 2: Calories & Activity -->
			{:else if goalStep === 2}
				<div class="step-calories">
					{#if selectedPresetIdx >= 0}
						<button class="step-pill" type="button" onclick={() => goalStep = 1}>
							{dietPresets[selectedPresetIdx].emoji} {stepPresetSummary}
						</button>
					{/if}

					{#if !hasBmrData}
						<div class="tdee-warning">
							<AlertTriangle size={16} />
							<div class="tdee-warning-text">
								<strong>{isEn ? 'TDEE unavailable' : 'TDEE nicht verfügbar'}</strong>
								<span>{isEn
									? 'Your TDEE (Total Daily Energy Expenditure) is the calories you burn per day. Set weight, height, and birth year under'
									: 'Dein TDEE (Gesamtenergieumsatz) sind die Kalorien, die du pro Tag verbrauchst. Gewicht, Größe und Geburtsjahr einstellen unter'}
									<a href="/fitness/{s.measure}">{t('measure_title', lang)}</a>
								</span>
							</div>
						</div>
					{/if}

					<div class="goal-field">
						<label for="goal-calories">{t('calorie_target', lang)}</label>
						<div class="calorie-input-row">
							<input id="goal-calories" type="number" bind:value={editCalories} min="500" max="10000" />
							{#if hasBmrData}
								<button class="bmr-calc-btn" type="button" onclick={() => editCalories = String(Math.round(editTdee))}>
									TDEE ({Math.round(editTdee)})
								</button>
							{/if}
						</div>
						{#if hasBmrData && latestWeight}
							<span class="tdee-basis">{isEn ? `TDEE based on latest weight: ${latestWeight} kg` : `TDEE basierend auf letztem Gewicht: ${latestWeight} kg`}</span>
						{/if}
					</div>

					<!-- TDEE Comparison Bar -->
					{#if hasBmrData && tdeeBarData}
						<div class="tdee-compare">
							<div class="tdee-compare-bar-wrap">
								<!-- TDEE = full width reference -->
								<div class="tdee-compare-ref"></div>
								<!-- Target overlaid -->
								<div class="tdee-compare-target"
									class:deficit={tdeeBarData.zone === 'deficit'}
									class:surplus={tdeeBarData.zone === 'surplus'}
									class:maintenance={tdeeBarData.zone === 'maintenance'}
									style="width: {tdeeBarData.targetPct}%"
								></div>
							</div>
							<div class="tdee-compare-labels">
								<span class="tdee-compare-label">{isEn ? 'Target' : 'Ziel'}: <strong>{tdeeBarData.target}</strong> kcal</span>
								<span class="tdee-compare-label">TDEE: <strong>{tdeeBarData.tdee}</strong> kcal</span>
							</div>
							<span class="tdee-compare-diff"
								class:deficit={tdeeBarData.zone === 'deficit'}
								class:surplus={tdeeBarData.zone === 'surplus'}
								class:maintenance={tdeeBarData.zone === 'maintenance'}>
								{tdeeBarData.zone === 'deficit' ? (isEn ? 'Deficit' : 'Defizit') : tdeeBarData.zone === 'surplus' ? (isEn ? 'Surplus' : 'Überschuss') : (isEn ? 'Maintenance' : 'Erhaltung')}:
								{tdeeBarData.diff > 0 ? '+' : ''}{tdeeBarData.diff} kcal ({tdeeBarData.pctOfTdee > 0 ? '+' : ''}{tdeeBarData.pctOfTdee}%)
							</span>
						</div>
					{/if}

					<div class="goal-field">
						<label for="goal-activity">{isEn ? 'Activity Level (excl. exercise)' : 'Aktivitätslevel (ohne Training)'}</label>
						<select id="goal-activity" bind:value={editActivityLevel}>
							<option value="sedentary">{isEn ? 'Sedentary — desk job' : 'Sitzend — Bürojob'} (×1.2)</option>
							<option value="light">{isEn ? 'Lightly active — some walking' : 'Leicht aktiv — etwas Gehen'} (×1.3)</option>
							<option value="moderate">{isEn ? 'Moderately active — on feet' : 'Mäßig aktiv — auf den Beinen'} (×1.4)</option>
							<option value="very_active">{isEn ? 'Very active — physical job' : 'Sehr aktiv — körperliche Arbeit'} (×1.5)</option>
						</select>
					</div>

					<div class="wizard-nav">
						<button class="btn-secondary" type="button" onclick={() => goalStep = 1}>← {isEn ? 'Back' : 'Zurück'}</button>
						<button class="btn-primary" type="button" onclick={() => goalStep = 3}>{isEn ? 'Next' : 'Weiter'} →</button>
					</div>
				</div>

			<!-- Step 3: Macros -->
			{:else if goalStep === 3}
				<div class="step-macros">
					<!-- Summary pills for previous steps -->
					<div class="step-pills">
						<button class="step-pill" type="button" onclick={() => goalStep = 1}>
							{#if selectedPresetIdx >= 0}{dietPresets[selectedPresetIdx].emoji}{/if} {stepPresetSummary}
						</button>
						<button class="step-pill" type="button" onclick={() => goalStep = 2}>{stepCalSummary}</button>
					</div>

					<!-- Macro donut ring -->
					{#if editCalNum > 0}
						<div class="macro-ring-wrap">
							<svg class="macro-ring" width="120" height="120" viewBox="0 0 120 120">
								<!-- Fat -->
								<circle cx="60" cy="60" r={RING_R}
									fill="none" stroke="var(--nord12)" stroke-width="10"
									stroke-dasharray="{Math.max(0, editMacroRing.fatLen - RING_GAP)} {RING_C - Math.max(0, editMacroRing.fatLen - RING_GAP)}"
									stroke-linecap="round"
									transform="rotate(-90 60 60)"
									opacity={editMacroRing.fat > 0 ? 1 : 0} />
								<!-- Carbs -->
								<circle cx="60" cy="60" r={RING_R}
									fill="none" stroke="var(--nord9)" stroke-width="10"
									stroke-dasharray="{Math.max(0, editMacroRing.carbLen - RING_GAP)} {RING_C - Math.max(0, editMacroRing.carbLen - RING_GAP)}"
									stroke-linecap="round"
									transform="rotate({-90 + editMacroRing.fatDeg} 60 60)"
									opacity={editMacroRing.carb > 0 ? 1 : 0} />
								<!-- Protein -->
								<circle cx="60" cy="60" r={RING_R}
									fill="none" stroke="var(--nord14)" stroke-width="10"
									stroke-dasharray="{Math.max(0, editMacroRing.protLen - RING_GAP)} {RING_C - Math.max(0, editMacroRing.protLen - RING_GAP)}"
									stroke-linecap="round"
									transform="rotate({-90 + editMacroRing.fatDeg + editMacroRing.carbDeg} 60 60)"
									opacity={editMacroRing.prot > 0 ? 1 : 0} />
								<text x="60" y="55" text-anchor="middle" class="ring-cal-main">{editCalNum}</text>
								<text x="60" y="70" text-anchor="middle" class="ring-cal-sub">kcal</text>
							</svg>
							<div class="macro-ring-legend">
								<span class="mrl-item"><span class="mrl-dot" style="background: var(--nord14)"></span> {t('protein', lang)} {editMacroRing.prot}%</span>
								<span class="mrl-item"><span class="mrl-dot" style="background: var(--nord12)"></span> {t('fat', lang)} {editMacroRing.fat}%</span>
								<span class="mrl-item"><span class="mrl-dot" style="background: var(--nord9)"></span> {t('carbs', lang)} {editMacroRing.carb}%</span>
							</div>
						</div>
					{/if}

					<div class="goal-field">
						<label for="goal-protein-mode">{t('protein_goal', lang)}</label>
						<div class="protein-mode">
							<select id="goal-protein-mode" bind:value={editProteinMode}>
								<option value="fixed">{t('protein_fixed', lang)}</option>
								<option value="per_kg">{t('protein_per_kg', lang)}</option>
							</select>
							<input id="goal-protein-target" type="number" bind:value={editProteinTarget} min="0" step="0.1"
								placeholder={editProteinMode === 'per_kg' ? 'g/kg' : 'g'} />
						</div>
					</div>
					<div class="goal-row">
						<div class="goal-field">
							<label for="goal-fat">{t('fat_percent', lang)}</label>
							<input id="goal-fat" type="number" bind:value={editFatPercent} min="0" max="100" />
						</div>
						<div class="goal-field">
							<label for="goal-carbs">{t('carb_percent', lang)}</label>
							<input id="goal-carbs" type="number" bind:value={editCarbPercent} min="0" max="100" />
						</div>
					</div>

					<div class="wizard-nav">
						<button class="btn-secondary" type="button" onclick={() => goalStep = 2}>← {isEn ? 'Back' : 'Zurück'}</button>
						<div class="goal-actions-final">
							<button class="btn-secondary" onclick={() => showGoalEditor = false}>{t('cancel', lang)}</button>
							<button class="btn-primary" onclick={saveGoals} disabled={goalSaving}>
								{goalSaving ? t('saving', lang) : t('save', lang)}
							</button>
						</div>
					</div>
				</div>
			{/if}
		</div>
	{/if}

	<!-- Liquid Tracking Card -->
	<div class="water-card">
		<div class="water-header">
			<div class="water-title">
				<GlassWater size={16} />
				<h3>{isEn ? 'Liquids' : 'Flüssigkeit'}</h3>
			</div>
			<div class="water-stats">
				<span class="water-amount">{parseFloat((totalLiquidMl / 1000).toFixed(2))} L</span>
				{#if editingGoal}
					<form class="goal-edit-inline" onsubmit={e => { e.preventDefault(); saveGoal(); }}>
						<span class="goal-slash">/</span>
						<input type="number" class="goal-input-inline" bind:value={goalInputL} min="0.25" step="0.25" />
						<span class="goal-unit">L</span>
						<button type="submit" class="goal-save-inline"><Check size={12} /></button>
					</form>
				{:else}
					<button class="water-goal-btn" onclick={() => { goalInputL = parseFloat((waterGoalMl / 1000).toFixed(2)); editingGoal = true; }}>
						/ {parseFloat((waterGoalMl / 1000).toFixed(2))} L
					</button>
				{/if}
			</div>
		</div>
		<div class="water-cups">
			{#each Array(displayCups) as _, i}
				{@const isBev = i < beverageCups}
				{@const isMealLiquid = !isBev && i < beverageCups + mealLiquidCups}
				{@const isAuto = isBev || isMealLiquid}
				{@const isFilled = i < totalCups}
				{@const showWater = isFilled || drainingCups.has(i)}
				{@const isNextEmpty = i === totalCups && !drainingCups.has(i)}
				<button
					class="water-cup"
					class:filled={isFilled}
					class:beverage={isBev}
					class:meal-liquid={isMealLiquid}
					class:filling={fillingCups.has(i)}
					class:draining={drainingCups.has(i)}
					class:next-empty={isNextEmpty}
					disabled={isAuto}
					onclick={() => {
						if (isAuto) return;
						const autoOffset = beverageCups + mealLiquidCups;
						const waterTarget = i < totalCups ? i - autoOffset : i - autoOffset + 1;
						setWaterCups(Math.max(0, waterTarget));
					}}
					title="{isAuto ? (isEn ? (isBev ? 'Beverage' : 'From meal') : (isBev ? 'Getränk' : 'Aus Mahlzeit')) : (i + 1) * WATER_CUP_ML + ' ml'}"
				>
					<svg viewBox="0 0 24 32" class="cup-svg" overflow="hidden">
						<defs>
							<clipPath id="cup-clip-{i}">
								<path d="M4 4 L6 28 C6 30 8 30 8 30 L16 30 C16 30 18 30 18 28 L20 4 Z" />
							</clipPath>
						</defs>
						<path d="M4 4 L6 28 C6 30 8 30 8 30 L16 30 C16 30 18 30 18 28 L20 4 Z" fill="var(--color-bg-tertiary)" stroke="var(--color-border)" stroke-width="1.2" />
						{#if showWater}
							<g clip-path="url(#cup-clip-{i})" class="water-body">
								<path class="water-wave w1" d="M-8 10 Q-2 6 4 10 T16 10 T28 10 T40 10 V34 H-8 Z" fill={isAuto ? 'var(--nord7)' : 'var(--nord10)'} opacity="0.85" />
								<path class="water-wave w2" d="M-4 12 Q2 8 8 12 T20 12 T32 12 V34 H-4 Z" fill={isAuto ? 'var(--nord8)' : 'var(--nord9)'} opacity="0.5" />
								<path class="water-wave w3" d="M0 11 Q6 7 12 11 T24 11 T36 11 V34 H0 Z" fill={isAuto ? 'var(--nord7)' : 'var(--nord10)'} opacity="0.35" />
							</g>
						{/if}
						{#if isNextEmpty}
							<text x="12" y="20" text-anchor="middle" font-size="14" font-weight="bold" fill="var(--color-text-secondary)">+</text>
						{/if}
					</svg>
				</button>
			{/each}
		</div>
		{#if beverageEntries.length > 0 || mealLiquidMl > 0}
			<div class="beverage-list">
				{#each beverageEntries as bev}
					<div class="beverage-item">
						<span class="beverage-name">{bev.name}</span>
						<span class="beverage-ml">{Math.round(bev.amountGrams)} ml</span>
					</div>
				{/each}
				{#each entries.filter(e => (e.liquidMl ?? 0) > 0) as e}
					<div class="beverage-item">
						<span class="beverage-name">{e.name}</span>
						<span class="beverage-ml">{Math.round(e.liquidMl)} ml</span>
					</div>
				{/each}
			</div>
		{/if}
	</div>

	{#if goalCalories}
		<!-- Micros card (desktop) -->
		<div class="micro-card">
			<h3 class="micro-card-title">{t('micro_details', lang)}</h3>
			{@render microPanel()}
		</div>
	{/if}

	</div>

	<!-- Meal Sections -->
	<div class="meals-col">
	{#each mealTypes as meal, mi}
		{@const mealEntries = grouped[meal]}
		{@const mealCal = mealEntries.reduce((s, e) => s + entryCalories(e), 0)}
		{@const meta = mealMeta[meal]}
		{@const MealSectionIcon = meta.icon}
		<div class="meal-section" style="--meal-color: {meta.color}">
			<div class="meal-header">
				<div class="meal-title">
					<div class="meal-icon">
						<MealSectionIcon size={15} />
					</div>
					<h3>{t(meal, lang)}</h3>
				</div>
				{#if mealEntries.length > 0}
					<span class="meal-cal">{fmtCal(mealCal)} {t('kcal', lang)}</span>
				{/if}
			</div>

			<div class="meal-entries">
				{#each mealEntries as entry}
					{@const imgUrl = entry.source === 'recipe' && entry.sourceId ? recipeImages[entry.sourceId] : null}
					<div class="food-card" class:has-image={!!imgUrl}>
						{#if imgUrl}
							<img class="food-card-img" src={imgUrl} alt={entry.name} loading="lazy" />
						{:else}
							<div class="food-card-accent" style="background: var(--meal-color)"></div>
						{/if}
						<div class="food-card-body">
						{#if entry.source === 'bls' || entry.source === 'usda'}
							<a class="food-card-name food-card-link" href="/fitness/{s.nutrition}/food/{entry.source}/{entry.sourceId}">{entry.name}</a>
						{:else}
							<span class="food-card-name">{entry.name}</span>
						{/if}
							{#if editingEntryId === entry._id}
								<form class="food-card-edit-form" onsubmit={e => { e.preventDefault(); saveEditEntry(); }}>
									<input type="number" class="food-card-edit-input" bind:value={editingGrams} min="1" step="1" />
									<span class="food-card-edit-unit">g</span>
								</form>
							{:else}
								<span class="food-card-detail">{entry.amountGrams}g · {fmtCal(entryCalories(entry))} kcal</span>
							{/if}
							<span class="food-card-macros">{fmt(entryNutrient(entry, 'protein'))}g P · {fmt(entryNutrient(entry, 'fat'))}g F · {fmt(entryNutrient(entry, 'carbs'))}g C</span>
						</div>
						<div class="food-card-actions">
							<button class="food-card-action edit" class:active={editingEntryId === entry._id} onclick={() => {
								if (editingEntryId === entry._id) { saveEditEntry(); } else { startEditEntry(entry); }
							}} aria-label="Edit">
								{#if editingEntryId === entry._id}
									<Check size={14} />
								{:else}
									<Pencil size={14} />
								{/if}
							</button>
							<button class="food-card-action delete" onclick={() => deleteEntry(entry._id)} aria-label={t('delete_', lang)}>
								<Trash2 size={14} />
							</button>
						</div>
					</div>
				{/each}
			</div>

			{#if addingMeal === meal}
				<div class="add-food-form">
					<div class="add-food-form-header">
						<div class="fab-tabs">
							<button class="fab-tab" class:active={inlineTab === 'search'} onclick={() => inlineTab = 'search'}>
								{t('search_food', lang).replace('…', '')}
							</button>
							<button class="fab-tab" class:active={inlineTab === 'meals'} onclick={() => { inlineTab = 'meals'; loadCustomMeals(); }}>
								<UtensilsCrossed size={13} />
								{t('custom_meals', lang)}
							</button>
						</div>
						<button class="fab-close" onclick={cancelAdd}><Plus size={18} style="transform: rotate(45deg)" /></button>
					</div>

					{#if inlineTab === 'search'}
						<FoodSearch onselect={inlineLogFood} showDetailLinks={false} autofocus={true} />
					{:else}
						<div class="custom-meals-list">
							{#if customMeals.length === 0}
								<p class="meals-empty">{t('no_custom_meals', lang)}</p>
							{/if}
							{#each customMeals as cm}
								<div class="custom-meal-card">
									<div class="custom-meal-info">
										<span class="custom-meal-name">{cm.name}</span>
										<span class="custom-meal-detail">{cm.ingredients.length} {t('ingredients', lang)} · {fmtCal(mealTotalCal(cm))} kcal</span>
									</div>
									<button class="btn-primary btn-sm" onclick={() => inlineLogCustomMeal(cm)}>{t('log_meal', lang)}</button>
								</div>
							{/each}
							<a class="manage-meals-link" href="/fitness/{s.nutrition}/meals">
								<Settings size={13} />
								{isEn ? 'Manage meals' : 'Mahlzeiten verwalten'}
							</a>
						</div>
					{/if}
				</div>
			{:else}
				<button class="add-food-btn" onclick={() => startAdd(meal)}>
					<Plus size={14} />
					{t('add_food', lang)}
				</button>
			{/if}
		</div>
	{/each}
	</div>

	<!-- Quick-log sidebar (desktop) -->
	<aside class="quick-log-col">
		<div class="quick-log-card">
			<h3 class="quick-log-title">{isEn ? 'Quick Log' : 'Schnell eintragen'}</h3>
			<div class="quick-log-meal-select">
				{#each mealTypes as meal}
					{@const meta = mealMeta[meal]}
					{@const MealIcon = meta.icon}
					<button
						class="ql-meal-btn"
						class:active={quickLogMealType === meal}
						style="--mc: {meta.color}"
						onclick={() => quickLogMealType = meal}
						title={t(meal, lang)}
					>
						<MealIcon size={14} />
					</button>
				{/each}
			</div>

			{#if quickFavorites.length > 0}
				<div class="ql-section">
					<h4 class="ql-section-title"><Heart size={12} /> {isEn ? 'Favorites' : 'Favoriten'}</h4>
					{#each quickFavorites as fav}
						{@const isActive = qlSelected?.source === fav.source && qlSelected?.sourceId === fav.sourceId}
						<button class="ql-item" class:active={isActive} onclick={() => qlSelect(fav)}>
							<span class="ql-item-name">{fav.name}</span>
							<Plus size={14} class="ql-item-add" />
						</button>
						{#if isActive}
							<form class="ql-amount-row" onsubmit={e => { e.preventDefault(); qlConfirm(); }}>
								<input type="number" class="ql-amount-input" bind:value={qlGrams} min="1" step="1" />
								<span class="ql-amount-unit">g</span>
								<button type="submit" class="ql-amount-confirm"><Check size={14} /></button>
							</form>
						{/if}
					{/each}
				</div>
			{/if}

			{#if recentFoods.length > 0}
				<div class="ql-section">
					<h4 class="ql-section-title"><Clock size={12} /> {isEn ? 'Recent' : 'Kürzlich'}</h4>
					{#each recentFoods as item}
						{@const isActive = qlSelected?.source === item.source && qlSelected?.sourceId === item.sourceId}
						<button class="ql-item" class:active={isActive} onclick={() => qlSelect(item)}>
							<span class="ql-item-name">{item.name}</span>
							<Plus size={14} class="ql-item-add" />
						</button>
						{#if isActive}
							<form class="ql-amount-row" onsubmit={e => { e.preventDefault(); qlConfirm(); }}>
								<input type="number" class="ql-amount-input" bind:value={qlGrams} min="1" step="1" />
								<span class="ql-amount-unit">g</span>
								<button type="submit" class="ql-amount-confirm"><Check size={14} /></button>
							</form>
						{/if}
					{/each}
				</div>
			{/if}

			{#if quickFavorites.length === 0 && recentFoods.length === 0}
				<p class="ql-empty">{isEn ? 'No favorites yet. Star foods in search to see them here.' : 'Noch keine Favoriten. Markiere Lebensmittel in der Suche.'}</p>
			{/if}
		</div>
	</aside>

</div>

<!-- FAB -->
<AddButton href={fabHref} />

<!-- FAB Modal -->
{#if showFabModal}
	<!-- svelte-ignore a11y_no_static_element_interactions -->
	<div class="fab-overlay" onclick={closeFabModal} onkeydown={(e) => e.key === 'Escape' && closeFabModal()}>
		<!-- svelte-ignore a11y_no_static_element_interactions a11y_click_events_have_key_events -->
		<div class="fab-modal" onclick={(e) => e.stopPropagation()} onkeydown={(e) => e.stopPropagation()}>
			<div class="fab-modal-header">
				<h3>{t('add_food', lang)}</h3>
				<button class="fab-close" onclick={closeFabModal}><Plus size={18} style="transform: rotate(45deg)" /></button>
			</div>

			<!-- Meal type selector -->
			<div class="fab-meal-select">
				{#each mealTypes as meal}
					{@const meta = mealMeta[meal]}
					{@const MealIcon = meta.icon}
					<button
						class="fab-meal-btn"
						class:active={fabMealType === meal}
						style="--mc: {meta.color}"
						onclick={() => fabMealType = meal}
					>
						<MealIcon size={14} />
						<span>{t(meal, lang)}</span>
					</button>
				{/each}
			</div>

			<!-- Tabs: Search / Custom Meals -->
			<div class="fab-tabs">
				<button class="fab-tab" class:active={fabTab === 'search'} onclick={() => fabTab = 'search'}>
					{t('search_food', lang).replace('…', '')}
				</button>
				<button class="fab-tab" class:active={fabTab === 'meals'} onclick={() => { fabTab = 'meals'; loadCustomMeals(); }}>
					<UtensilsCrossed size={13} />
					{t('custom_meals', lang)}
				</button>
			</div>

			{#if fabTab === 'search'}
				<FoodSearch onselect={fabLogFood} autofocus={true} />
			{:else}
				<!-- Custom Meals tab -->
				<div class="custom-meals-list">
					{#if customMeals.length === 0}
						<p class="meals-empty">{t('no_custom_meals', lang)}</p>
					{/if}
					{#each customMeals as meal}
						<div class="custom-meal-card">
							<div class="custom-meal-info">
								<span class="custom-meal-name">{meal.name}</span>
								<span class="custom-meal-detail">{meal.ingredients.length} {t('ingredients', lang)} · {fmtCal(mealTotalCal(meal))} kcal</span>
							</div>
							<button class="btn-primary btn-sm" onclick={() => logCustomMeal(meal)}>{t('log_meal', lang)}</button>
						</div>
					{/each}
					<a class="manage-meals-link" href="/fitness/{s.nutrition}/meals">
						<Settings size={13} />
						{isEn ? 'Manage meals' : 'Mahlzeiten verwalten'}
					</a>
				</div>
			{/if}
		</div>
	</div>
{/if}

<style>
	.nutrition-page {
		max-width: 600px;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
	}
	.sidebar-col, .meals-col, .quick-log-col {
		display: contents;
	}
	.quick-log-col {
		display: none;
	}
	@media (min-width: 1024px) {
		.nutrition-page {
			max-width: none;
			display: grid;
			grid-template-columns: minmax(320px, 380px) 1fr;
			grid-template-rows: auto 1fr;
			column-gap: 1.5rem;
			align-items: start;
		}
		.date-nav {
			grid-column: 1 / -1;
		}
		.sidebar-col {
			display: flex;
			flex-direction: column;
			gap: 0.75rem;
			position: sticky;
			top: 1rem;
		}
		.meals-col {
			display: flex;
			flex-direction: column;
			gap: 0.75rem;
			min-width: 0;
		}
		.micro-inline {
			display: none;
		}
		.micro-card {
			display: block;
		}
		.micro-card .micro-details,
		.micro-card .micro-details.micro-hidden {
			display: grid;
			grid-template-columns: 1fr;
		}
	}
	@media (min-width: 1600px) {
		.nutrition-page {
			grid-template-columns: minmax(320px, 380px) 1fr 260px;
		}
		.quick-log-col {
			display: block;
			position: sticky;
			top: 1rem;
		}
	}


	/* ── Date Navigator ── */
	.date-nav {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.25rem;
		position: relative;
	}
	.date-btn {
		background: none;
		border: none;
		color: var(--color-text-secondary);
		cursor: pointer;
		padding: 0.5rem;
		border-radius: 50%;
		display: flex;
		align-items: center;
		transition: color 0.15s, background 0.15s;
	}
	.date-btn:hover {
		background: var(--color-bg-elevated);
		color: var(--color-text-primary);
	}
	.date-display {
		background: none;
		border: none;
		color: var(--color-text-primary);
		font-size: 1.05rem;
		font-weight: 700;
		cursor: pointer;
		padding: 0.35rem 0.75rem;
		border-radius: 8px;
		display: flex;
		align-items: center;
		gap: 0.5rem;
		transition: background 0.15s;
		letter-spacing: -0.01em;
	}
	.date-display:hover {
		background: var(--color-bg-elevated);
	}
	.today-badge {
		font-size: 0.6rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.06em;
		color: var(--color-primary);
		background: color-mix(in srgb, var(--color-primary) 12%, transparent);
		padding: 0.15rem 0.4rem;
		border-radius: 4px;
	}
	.go-today-btn {
		position: absolute;
		right: 0;
		font-size: 0.7rem;
		font-weight: 600;
		color: var(--color-primary);
		background: color-mix(in srgb, var(--color-primary) 10%, transparent);
		border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
		padding: 0.25rem 0.6rem;
		border-radius: 6px;
		cursor: pointer;
		transition: background 0.15s;
		-webkit-tap-highlight-color: transparent;
	}
	.go-today-btn:hover {
		background: color-mix(in srgb, var(--color-primary) 20%, transparent);
	}

	/* ── Daily Summary Card ── */
	.daily-summary {
		background: var(--color-surface);
		border-radius: 12px;
		padding: 1.25rem;
		box-shadow: var(--shadow-sm);
		position: relative;


	}
	.daily-summary::before {
		content: '';
		position: absolute;
		inset: 0;
		border-radius: 12px;
		background: linear-gradient(135deg, color-mix(in srgb, var(--nord8) 8%, transparent), transparent 60%);
		pointer-events: none;
	}

	/* ── Calorie Trio: Eaten / Ring / Burned ── */
	.calorie-trio {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		margin-bottom: 1rem;
	}
	.cal-stat {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.1rem;
	}
	.cal-stat-value {
		font-size: 1.4rem;
		font-weight: 800;
		font-variant-numeric: tabular-nums;
		letter-spacing: -0.03em;
		color: var(--color-text-primary);
	}
	.cal-stat-label {
		font-size: 0.6rem;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--color-text-secondary);
	}
	.burned-bmr {
		margin-top: 0.1rem;
		font-size: 0.6rem;
		color: var(--color-text-tertiary);
	}
	.tdee-info-wrap {
		position: relative;
	}
	.tdee-info-trigger {
		display: inline-flex;
		align-items: center;
		vertical-align: middle;
		opacity: 0.5;
		cursor: pointer;
		margin-left: 0.1rem;
		background: none;
		border: none;
		padding: 0;
		color: inherit;
	}
	.tdee-info-trigger:hover {
		opacity: 0.9;
	}
	.tdee-info-tooltip {
		position: absolute;
		top: 100%;
		left: 0;
		margin-top: 0.35rem;
		background: var(--color-surface);
		border: 1px solid var(--color-border, var(--nord3));
		border-radius: 8px;
		padding: 0.45rem 0.6rem;
		font-size: 0.65rem;
		font-weight: 400;
		font-style: normal;
		line-height: 1.5;
		color: var(--color-text-secondary);
		white-space: nowrap;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
		z-index: 20;
		display: flex;
		flex-direction: column;
		gap: 0.15rem;
	}
	.tdee-info-tooltip a {
		color: var(--nord12);
		text-decoration: underline;
	}
	.tdee-info-tooltip .cite-note {
		font-size: 0.58rem;
		color: var(--color-text-tertiary);
		white-space: normal;
		max-width: 220px;
		margin-top: 0.1rem;
	}
	.bmr-hint {
		font-size: 0.55rem;
		color: var(--color-text-secondary);
		opacity: 0.7;
		margin-top: 0.15rem;
		line-height: 1.3;
	}
	.bmr-hint a {
		color: var(--nord12);
		text-decoration: underline;
	}
	.calorie-ring-wrap {
		flex-shrink: 0;
	}
	.calorie-ring {
		overflow: visible;
	}

	/* ── Macro Progress Bars ── */
	.macro-bars {
		display: flex;
		justify-content: space-between;
		gap: 1rem;
		padding: 0 0.25rem;
		margin-bottom: 0.25rem;
	}
	.macro-bar-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.25rem;
	}
	.macro-bar-label {
		font-size: 0.65rem;
		font-weight: 700;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--color-text-secondary);
	}
	.macro-bar-track {
		width: 100%;
		height: 6px;
		background: var(--color-bg-elevated);
		border: 1px solid var(--color-border);
		border-radius: 3px;
		overflow: hidden;
		position: relative;
	}
	.macro-bar-fill {
		height: 100%;
		border-radius: 3px;
		transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	}
	.macro-bar-overflow {
		position: absolute;
		top: 0;
		right: 0;
		height: 100%;
		background: var(--nord11);
		border-radius: 0 3px 3px 0;
		animation: bar-overflow-fill 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.5s both;
	}
	@keyframes bar-overflow-fill {
		from { width: 0%; }
	}
	.macro-bar-info {
		font-size: 0.68rem;
		color: var(--color-text-tertiary);
		font-variant-numeric: tabular-nums;
	}
	.macro-bar-info.over {
		color: var(--nord11);
		font-weight: 600;
	}

	/* ── SVG Ring Styles ── */
	.ring-bg {
		fill: none;
		stroke: var(--color-border);
		stroke-width: 5;
		stroke-linecap: round;
	}
	.ring-fill {
		fill: none;
		stroke-width: 5;
		stroke-linecap: round;
		transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1);
	}
	.ring-calories {
		stroke: var(--color-primary);
		filter: drop-shadow(0 0 4px color-mix(in srgb, var(--color-primary) 25%, transparent));
	}
	.ring-calories.no-glow {
		filter: none;
	}
	.ring-glow {
		fill: none;
		stroke-width: 5;
		stroke-linecap: round;
		pointer-events: none;
	}
	.ring-calories-glow {
		stroke: var(--color-primary);
		filter: drop-shadow(0 0 4px color-mix(in srgb, var(--color-primary) 25%, transparent));
		stroke-dashoffset: var(--glow-target);
		animation: glow-shrink 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.6s both;
	}
	@keyframes glow-shrink {
		from { stroke-dashoffset: var(--glow-start); }
		to { stroke-dashoffset: var(--glow-target); }
	}
	.ring-overflow {
		stroke: var(--nord11);
		filter: drop-shadow(0 0 4px color-mix(in srgb, var(--nord11) 25%, transparent));
		stroke-dashoffset: var(--overflow-target);
		animation: overflow-fill 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.6s both;
	}
	@keyframes overflow-fill {
		from { stroke-dashoffset: var(--arc-length); }
		to { stroke-dashoffset: var(--overflow-target); }
	}
	.ring-text-main {
		font-size: 14px;
		font-weight: 800;
		fill: currentColor;
		text-anchor: middle;
	}
	.ring-text-sub {
		font-size: 8px;
		fill: var(--color-text-secondary);
		text-anchor: middle;
		font-weight: 500;
		text-transform: uppercase;
		letter-spacing: 0.04em;
	}
	/* (macro rings replaced by macro bars) */

	/* ── Micro Details ── */
	.micro-inline {
		margin-top: 0.75rem;
		padding-top: 0.5rem;
		border-top: 1px solid var(--color-border);
	}
	.micro-card {
		background: var(--color-surface);
		border-radius: 14px;
		padding: 1rem;
	}
	@media (max-width: 1023px) {
		.micro-card {
			display: none;
		}
		.micro-inline {
			display: block;
		}
	}
	.micro-card-title {
		margin: 0 0 0.75rem;
		font-size: 0.85rem;
		font-weight: 600;
		color: var(--color-text-primary);
	}
	.details-toggle-row {
		text-align: center;
	}
	.details-toggle {
		font-size: 0.8rem;
		cursor: pointer;
		color: var(--color-text-secondary);
		background: none;
		border: none;
		padding: 0.25rem 0.5rem;
		display: inline-flex;
		align-items: center;
		gap: 0.3rem;
		transition: color 0.15s;
		font-weight: 500;
	}
	.details-toggle:hover {
		color: var(--color-text-primary);
	}

	.micro-details {
		display: grid;
		grid-template-columns: 1fr;
		gap: 1rem;
	}
	.micro-details.micro-hidden {
		display: none;
	}
	.micro-section h4 {
		margin: 0 0 0.4rem;
		font-size: 0.7rem;
		font-weight: 700;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--color-text-secondary);
	}
	.micro-row {
		display: grid;
		grid-template-columns: 7rem 1fr 4rem 2.5rem;
		align-items: center;
		gap: 0.4rem;
		padding: 0.2rem 0;
		font-size: 0.78rem;
	}
	.micro-label {
		color: var(--color-text-primary);
		font-weight: 500;
	}
	.micro-bar-wrap {
		height: 5px;
		background: var(--color-bg-tertiary);
		border-radius: 3px;
		overflow: hidden;
	}
	.micro-bar {
		height: 100%;
		background: var(--nord14);
		border-radius: 3px;
		transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	}
	.micro-bar.is-max {
		background: var(--nord12);
	}
	.micro-value {
		text-align: right;
		color: var(--color-text-tertiary);
		font-size: 0.72rem;
		font-variant-numeric: tabular-nums;
	}
	.micro-pct {
		text-align: right;
		font-weight: 700;
		font-size: 0.72rem;
		font-variant-numeric: tabular-nums;
	}

	/* ── Empty / No Goal State ── */
	.no-goal {
		text-align: center;
		padding: 3rem 1.5rem 2.5rem;
		background: var(--color-surface);
		border-radius: 12px;
		box-shadow: var(--shadow-sm);

	}
	.no-goal-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 3.5rem;
		height: 3.5rem;
		border-radius: 50%;
		margin: 0 auto 1rem;
		color: var(--nord15);
		background: color-mix(in srgb, var(--nord15) 12%, transparent);
	}
	.no-goal p {
		color: var(--color-text-secondary);
		margin: 0 0 1.25rem;
		font-size: 0.9rem;
	}

	/* ── Goal Editor ── */
	.goal-edit-btn {
		background: none;
		border: none;
		color: var(--color-text-tertiary);
		cursor: pointer;
		font-size: 0.75rem;
		display: inline-flex;
		align-items: center;
		gap: 0.3rem;
		padding: 0.2rem 0;
		transition: color 0.15s;
		font-weight: 500;
	}
	.goal-edit-btn:hover {
		color: var(--color-text-primary);
	}

	.goal-editor {
		background: var(--color-surface);
		border-radius: 12px;
		padding: 1.25rem;
		box-shadow: var(--shadow-sm);
	}
	.goal-editor h3 {
		margin: 0 0 0.75rem;
		font-size: 0.95rem;
		font-weight: 700;
	}

	/* Wizard steps indicator */
	.wizard-steps {
		display: flex;
		align-items: center;
		gap: 0;
		margin-bottom: 1.25rem;
	}
	.wizard-step {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.2rem;
		background: none;
		border: none;
		cursor: pointer;
		padding: 0;
		flex-shrink: 0;
	}
	.ws-num {
		width: 1.5rem;
		height: 1.5rem;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 0.7rem;
		font-weight: 700;
		background: var(--color-bg-tertiary);
		color: var(--color-text-secondary);
		border: 2px solid var(--color-border);
		transition: all 0.2s;
	}
	.wizard-step.active .ws-num {
		background: var(--nord10);
		color: white;
		border-color: var(--nord10);
	}
	.wizard-step.done .ws-num {
		background: var(--nord14);
		color: white;
		border-color: var(--nord14);
	}
	.ws-label {
		font-size: 0.6rem;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		color: var(--color-text-tertiary);
	}
	.wizard-step.active .ws-label {
		color: var(--nord10);
	}
	.ws-line {
		flex: 1;
		height: 2px;
		background: var(--color-border);
		margin: 0 0.3rem;
		margin-bottom: 1rem;
		transition: background 0.2s;
	}
	.ws-line.done {
		background: var(--nord14);
	}

	/* Preset cards (Step 1) */
	.preset-section {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}
	.preset-grid {
		display: flex;
		flex-direction: column;
		gap: 0.4rem;
	}
	.preset-card {
		display: flex;
		align-items: center;
		gap: 0.65rem;
		padding: 0.65rem 0.75rem;
		background: var(--color-bg-tertiary);
		border: 1.5px solid var(--color-border);
		border-radius: 10px;
		cursor: pointer;
		text-align: left;
		transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
	}
	.preset-card:hover {
		border-color: var(--nord10);
		background: color-mix(in srgb, var(--nord10) 6%, var(--color-bg-tertiary));
	}
	.preset-card.selected {
		border-color: var(--nord10);
		background: color-mix(in srgb, var(--nord10) 10%, var(--color-bg-tertiary));
		box-shadow: 0 0 0 1px var(--nord10);
	}
	.preset-card-emoji {
		font-size: 1.3rem;
		flex-shrink: 0;
		width: 2rem;
		text-align: center;
	}
	.preset-card-text {
		display: flex;
		flex-direction: column;
		gap: 0.1rem;
		min-width: 0;
	}
	.preset-card-name {
		font-size: 0.82rem;
		font-weight: 650;
		color: var(--color-text-primary);
	}
	.preset-card-desc {
		font-size: 0.68rem;
		color: var(--color-text-tertiary);
		line-height: 1.3;
	}
	.wizard-skip {
		background: none;
		border: none;
		color: var(--color-text-tertiary);
		font-size: 0.72rem;
		cursor: pointer;
		padding: 0.3rem 0;
		text-align: center;
		transition: color 0.15s;
	}
	.wizard-skip:hover {
		color: var(--color-text-secondary);
	}

	/* Step summary pills */
	.step-pills {
		display: flex;
		gap: 0.35rem;
		margin-bottom: 0.75rem;
		flex-wrap: wrap;
	}
	.step-pill {
		display: inline-flex;
		align-items: center;
		gap: 0.25rem;
		padding: 0.25rem 0.6rem;
		background: var(--color-bg-tertiary);
		border: 1px solid var(--color-border);
		border-radius: 20px;
		font-size: 0.7rem;
		font-weight: 500;
		color: var(--color-text-secondary);
		cursor: pointer;
		transition: border-color 0.15s;
	}
	.step-pill:hover {
		border-color: var(--nord10);
		color: var(--nord10);
	}

	/* TDEE warning */
	.tdee-warning {
		display: flex;
		align-items: flex-start;
		gap: 0.5rem;
		padding: 0.6rem 0.75rem;
		background: color-mix(in srgb, var(--nord13) 10%, var(--color-bg-tertiary));
		border: 1px solid color-mix(in srgb, var(--nord13) 30%, var(--color-border));
		border-radius: 8px;
		margin-bottom: 0.75rem;
		color: var(--nord13);
	}
	.tdee-warning :global(svg) {
		flex-shrink: 0;
		margin-top: 0.1rem;
	}
	.tdee-warning-text {
		display: flex;
		flex-direction: column;
		gap: 0.15rem;
		font-size: 0.75rem;
	}
	.tdee-warning-text strong {
		font-size: 0.78rem;
	}
	.tdee-warning-text span {
		color: var(--color-text-secondary);
	}
	.tdee-warning-text a {
		color: var(--nord10);
		text-decoration: underline;
	}

	/* TDEE comparison */
	.tdee-compare {
		margin-bottom: 0.75rem;
		display: flex;
		flex-direction: column;
		gap: 0.3rem;
	}
	.tdee-compare-bar-wrap {
		position: relative;
		height: 10px;
		background: var(--color-bg-tertiary);
		border-radius: 5px;
		overflow: hidden;
	}
	.tdee-compare-ref {
		position: absolute;
		inset: 0;
		background: var(--color-text-tertiary);
		opacity: 0.18;
		border-radius: 5px;
	}
	.tdee-compare-target {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		border-radius: 5px;
		transition: width 0.3s;
	}
	.tdee-compare-target.deficit { background: var(--nord9); }
	.tdee-compare-target.surplus { background: var(--nord12); }
	.tdee-compare-target.maintenance { background: var(--nord14); }
	.tdee-compare-labels {
		display: flex;
		justify-content: space-between;
		font-size: 0.65rem;
		color: var(--color-text-tertiary);
	}
	.tdee-compare-label strong {
		color: var(--color-text-secondary);
	}
	.tdee-compare-diff {
		font-size: 0.68rem;
		font-weight: 600;
		text-align: center;
	}
	.tdee-compare-diff.deficit { color: var(--nord9); }
	.tdee-compare-diff.surplus { color: var(--nord12); }
	.tdee-compare-diff.maintenance { color: var(--nord14); }

	/* Macro donut ring */
	.macro-ring-wrap {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 1rem;
		margin-bottom: 0.75rem;
		padding: 0.5rem 0;
	}
	.macro-ring {
		flex-shrink: 0;
	}
	.ring-cal-main {
		font-size: 1.1rem;
		font-weight: 700;
		fill: var(--color-text-primary);
	}
	.ring-cal-sub {
		font-size: 0.55rem;
		font-weight: 500;
		fill: var(--color-text-tertiary);
		text-transform: uppercase;
		letter-spacing: 0.06em;
	}
	.macro-ring-legend {
		display: flex;
		flex-direction: column;
		gap: 0.35rem;
	}
	.mrl-item {
		display: flex;
		align-items: center;
		gap: 0.35rem;
		font-size: 0.72rem;
		font-weight: 500;
		color: var(--color-text-secondary);
	}
	.mrl-dot {
		width: 8px;
		height: 8px;
		border-radius: 50%;
		flex-shrink: 0;
	}

	/* Goal form fields */
	.goal-field {
		margin-bottom: 0.75rem;
	}
	.calorie-input-row {
		display: flex;
		gap: 0.5rem;
		align-items: center;
	}
	.calorie-input-row input {
		flex: 1;
	}
	.bmr-calc-btn {
		padding: 0.4rem 0.6rem;
		background: var(--color-bg-tertiary);
		border: 1px solid var(--color-border);
		border-radius: 6px;
		color: var(--color-text-secondary);
		font-size: 0.7rem;
		font-weight: 600;
		cursor: pointer;
		white-space: nowrap;
	}
	.bmr-calc-btn:hover {
		border-color: var(--nord10);
		color: var(--nord10);
	}
	.tdee-basis {
		display: block;
		font-size: 0.62rem;
		color: var(--color-text-tertiary);
		margin-top: 0.25rem;
	}
	.goal-field label {
		display: block;
		font-size: 0.72rem;
		font-weight: 600;
		letter-spacing: 0.03em;
		text-transform: uppercase;
		color: var(--color-text-secondary);
		margin-bottom: 0.3rem;
	}
	.goal-field input,
	.goal-field select {
		width: 100%;
		padding: 0.55rem 0.65rem;
		background: var(--color-bg-tertiary);
		border: 1px solid var(--color-border);
		border-radius: 8px;
		color: var(--color-text-primary);
		font-size: 0.9rem;
		transition: border-color 0.15s;
		box-sizing: border-box;
	}
	.goal-field input:focus,
	.goal-field select:focus {
		outline: none;
		border-color: var(--nord8);
	}
	.protein-mode {
		display: flex;
		gap: 0.5rem;
	}
	.protein-mode select {
		flex: 1;
	}
	.protein-mode input {
		flex: 1;
	}
	.goal-row {
		display: flex;
		gap: 0.75rem;
	}
	.goal-row .goal-field {
		flex: 1;
	}
	.wizard-nav {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 0.75rem;
	}
	.goal-actions-final {
		display: flex;
		gap: 0.5rem;
	}

	/* ── Meal Sections ── */
	/* Water card */
	.water-card {
		background: var(--color-surface);
		border-radius: 12px;
		padding: 0.75rem 1rem;
		margin-bottom: 0.75rem;
		border: 1px solid var(--color-border);
	}
	.water-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 0.5rem;
	}
	.water-title {
		display: flex;
		align-items: center;
		gap: 0.4rem;
		color: var(--nord10);
	}
	.water-title h3 {
		margin: 0;
		font-size: 0.9rem;
		font-weight: 600;
		color: var(--color-text-primary);
	}
	.water-stats {
		display: flex;
		align-items: center;
		gap: 0.15rem;
	}
	.water-amount {
		font-size: 0.85rem;
		font-weight: 600;
		color: var(--nord10);
	}
	.water-goal-btn {
		background: none;
		border: none;
		cursor: pointer;
		font-size: 0.8rem;
		color: var(--color-text-secondary);
		padding: 0;
	}
	.goal-edit-inline {
		display: flex;
		align-items: center;
		gap: 0.25rem;
	}
	.goal-slash {
		font-size: 0.8rem;
		color: var(--color-text-secondary);
	}
	.goal-input-inline {
		width: 48px;
		padding: 0.15rem 0.3rem;
		background: var(--color-bg-tertiary);
		border: 1px solid var(--color-border);
		border-radius: 4px;
		color: var(--color-text-primary);
		font-size: 0.8rem;
		text-align: right;
	}
	.goal-input-inline:focus {
		outline: none;
		border-color: var(--nord10);
	}
	.goal-unit {
		font-size: 0.75rem;
		color: var(--color-text-secondary);
	}
	.goal-save-inline {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 22px;
		height: 22px;
		border-radius: 50%;
		border: 2px solid var(--color-border);
		background: transparent;
		color: var(--color-text-secondary);
		cursor: pointer;
		transition: all 200ms;
		padding: 0;
	}
	.goal-save-inline:hover {
		border-color: var(--nord14);
		background: var(--nord14);
		color: white;
		box-shadow: 0 2px 8px rgba(163, 190, 140, 0.35);
		transform: scale(1.08);
	}
	.goal-save-inline:active {
		transform: scale(0.95);
		background: #8fad7a;
		border-color: #8fad7a;
		color: white;
	}
	.water-cups {
		display: flex;
		align-items: center;
		gap: 0.2rem;
		flex-wrap: wrap;
	}
	.water-cup {
		background: none;
		border: none;
		cursor: pointer;
		padding: 0;
		width: 26px;
		height: 34px;
		-webkit-tap-highlight-color: transparent;
	}
	@media (min-width: 500px) {
		.water-cup {
			width: 34px;
			height: 44px;
		}
	}
	.cup-svg {
		width: 100%;
		height: 100%;
	}
	.water-cup:disabled {
		cursor: default;
		opacity: 1;
	}
	.water-cup.next-empty:hover .cup-svg > path:first-of-type {
		fill: color-mix(in srgb, var(--nord10) 20%, var(--color-bg-tertiary));
	}

	/* Water fill animation — only on newly filled cups */
	.water-cup.filling .water-body {
		animation: water-rise 800ms ease-out both;
	}
	.water-cup.filling .water-wave.w1 {
		animation: wave-slosh 1.2s ease-in-out both;
	}
	.water-cup.filling .water-wave.w2 {
		animation: wave-slosh 1s ease-in-out 0.1s both reverse;
	}
	.water-cup.filling .water-wave.w3 {
		animation: wave-slosh 1.4s ease-in-out 0.05s both;
	}
	.water-cup.draining .water-body {
		animation: water-drain 400ms ease-in both;
	}
	.water-cup.draining .water-wave.w1 {
		animation: wave-slosh 500ms ease-in-out both;
	}
	.water-cup.draining .water-wave.w2 {
		animation: wave-slosh 400ms ease-in-out both reverse;
	}
	.water-cup.draining .water-wave.w3 {
		animation: wave-slosh 550ms ease-in-out both;
	}
	@keyframes water-rise {
		from { transform: translateY(24px); }
		to { transform: translateY(0); }
	}
	@keyframes water-drain {
		from { transform: translateY(0); }
		to { transform: translateY(24px); }
	}
	@keyframes wave-slosh {
		0% { transform: translateX(0); }
		20% { transform: translateX(-6px); }
		40% { transform: translateX(5px); }
		60% { transform: translateX(-3px); }
		80% { transform: translateX(2px); }
		100% { transform: translateX(0); }
	}

	/* Beverage list */
	.beverage-list {
		margin-top: 0.5rem;
		padding-top: 0.5rem;
		border-top: 1px solid var(--color-border);
		display: flex;
		flex-direction: column;
		gap: 0.2rem;
	}
	.beverage-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 0.8rem;
	}
	.beverage-name {
		color: var(--color-text-secondary);
	}
	.beverage-ml {
		color: var(--nord10);
		font-weight: 500;
		font-variant-numeric: tabular-nums;
	}

	.meal-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 0.3rem;
		padding: 0 0.1rem;
	}
	.meal-title {
		display: flex;
		align-items: center;
		gap: 0.4rem;
	}
	.meal-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 1.6rem;
		height: 1.6rem;
		border-radius: 6px;
		color: var(--meal-color);
		background: color-mix(in srgb, var(--meal-color) 12%, transparent);
	}
	.meal-header h3 {
		margin: 0;
		font-size: 0.9rem;
		font-weight: 700;
		letter-spacing: -0.01em;
	}
	.meal-cal {
		font-size: 0.75rem;
		color: var(--color-text-secondary);
		font-weight: 600;
		font-variant-numeric: tabular-nums;
	}

	.meal-entries {
		display: grid;
		grid-template-columns: 1fr;
		gap: 0.35rem;
	}

	/* ── Food card: horizontal (mobile default) ── */
	.food-card {
		display: flex;
		align-items: center;
		gap: 0.6rem;
		padding: 0.5rem;
		background: var(--color-surface);
		border-radius: 10px;
		box-shadow: var(--shadow-sm);
		transition: background 0.12s;
		position: relative;
	}
	.food-card:hover {
		background: var(--color-bg-elevated);
	}
	.food-card-img {
		width: 3.2rem;
		height: 3.2rem;
		border-radius: 8px;
		object-fit: cover;
		flex-shrink: 0;
	}
	.food-card-accent {
		width: 4px;
		height: 2.6rem;
		border-radius: 2px;
		opacity: 0.5;
		flex-shrink: 0;
		margin-left: 0.2rem;
	}
	.food-card-body {
		display: flex;
		flex-direction: column;
		gap: 0.1rem;
		min-width: 0;
		flex: 1;
	}
	.food-card-name {
		font-size: 0.85rem;
		font-weight: 600;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.food-card-link {
		color: var(--color-text-primary);
		text-decoration: none;
	}
	.food-card-link:hover {
		text-decoration: underline;
		text-decoration-color: var(--nord8);
		text-underline-offset: 2px;
	}
	.food-card-detail {
		font-size: 0.72rem;
		color: var(--color-text-secondary);
		font-variant-numeric: tabular-nums;
	}
	.food-card-edit-form {
		display: flex;
		align-items: center;
		gap: 0.2rem;
	}
	.food-card-edit-input {
		width: 55px;
		padding: 0.1rem 0.3rem;
		background: var(--color-bg-tertiary);
		border: 1px solid var(--color-border);
		border-radius: 4px;
		color: var(--color-text-primary);
		font-size: 0.75rem;
		text-align: right;
	}
	.food-card-edit-input:focus {
		outline: none;
		border-color: var(--nord10);
	}
	.food-card-edit-unit {
		font-size: 0.7rem;
		color: var(--color-text-secondary);
	}
	.food-card-macros {
		font-size: 0.65rem;
		color: var(--color-text-tertiary);
		font-variant-numeric: tabular-nums;
	}
	.food-card-actions {
		display: flex;
		flex-direction: column;
		gap: 0.2rem;
		flex-shrink: 0;
		align-self: flex-start;
	}
	.food-card-action {
		background: none;
		border: none;
		color: var(--color-text-tertiary);
		cursor: pointer;
		padding: 0.3rem;
		border-radius: 6px;
		transition: color 0.12s, background 0.12s;
		display: flex;
	}
	.food-card-action.edit:hover {
		color: var(--nord10);
		background: color-mix(in srgb, var(--nord10) 10%, transparent);
	}
	.food-card-action.edit.active {
		color: var(--nord14);
	}
	.food-card-action.edit.active:hover {
		color: var(--nord14);
		background: color-mix(in srgb, var(--nord14) 10%, transparent);
	}
	.food-card-action.delete:hover {
		color: var(--nord11);
		background: color-mix(in srgb, var(--nord11) 10%, transparent);
	}

	/* ── Wider screens: grid of vertical cards ── */
	@media (min-width: 600px) {
		.meal-entries {
			grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
			gap: 0.5rem;
		}
		.food-card {
			flex-direction: column;
			align-items: stretch;
			padding: 0;
			overflow: hidden;
		}
		.food-card-img {
			width: 100%;
			height: 7rem;
			border-radius: 0;
		}
		.food-card-accent {
			width: 100%;
			height: 4px;
			margin-left: 0;
			border-radius: 0;
		}
		.food-card-body {
			padding: 0.5rem 0.6rem;
			gap: 0.15rem;
		}
		.food-card-name {
			font-size: 0.8rem;
			white-space: normal;
		}
		.food-card-actions {
			position: absolute;
			bottom: 0.3rem;
			right: 0.3rem;
			flex-direction: row;
			opacity: 0;
			transition: opacity 0.15s;
		}
		.food-card-action {
			background: color-mix(in srgb, var(--color-surface) 80%, transparent);
			border-radius: 50%;
			padding: 0.25rem;
		}
		.food-card:hover .food-card-actions,
		.food-card-actions:has(.active) {
			opacity: 1;
		}
	}

	/* ── Add Food ── */
	.add-food-btn {
		background: none;
		border: 1px dashed var(--color-border);
		color: var(--color-text-tertiary);
		cursor: pointer;
		padding: 0.45rem 0.75rem;
		border-radius: 10px;
		font-size: 0.78rem;
		font-weight: 500;
		display: flex;
		align-items: center;
		gap: 0.35rem;
		width: 100%;
		justify-content: center;
		transition: color 0.15s, border-color 0.15s;
		margin-top: 0.5rem;
	}
	.add-food-btn:hover {
		color: var(--meal-color);
		border-color: var(--meal-color);
	}

	.add-food-form {
		background: var(--color-surface);
		border-radius: 10px;
		padding: 0.85rem;
		box-shadow: var(--shadow-sm);
		margin-top: 0.5rem;
	}
	.add-food-form-header {
		display: flex;
		align-items: flex-start;
		gap: 0.5rem;
	}
	.add-food-form-header .fab-close {
		margin-top: -0.5rem;
		margin-right: -0.5rem;
	}
	.add-food-form-header .fab-tabs {
		flex: 1;
	}
	/* Search/food selection handled by FoodSearch component */

	/* ── Buttons ── */
	.btn-primary {
		padding: 0.5rem 1.1rem;
		background: var(--color-primary);
		color: var(--color-text-on-primary);
		border: none;
		border-radius: 8px;
		cursor: pointer;
		font-size: 0.82rem;
		font-weight: 700;
		letter-spacing: 0.01em;
		transition: background 0.15s, transform 0.1s;
	}
	.btn-primary:hover {
		filter: brightness(1.1);
	}
	.btn-primary:active {
		transform: scale(0.97);
	}
	.btn-primary:disabled {
		opacity: 0.5;
		cursor: not-allowed;
		transform: none;
	}
	.btn-secondary {
		padding: 0.5rem 1.1rem;
		background: var(--color-bg-tertiary);
		color: var(--color-text-primary);
		border: 1px solid var(--color-border);
		border-radius: 8px;
		cursor: pointer;
		font-size: 0.82rem;
		font-weight: 500;
		transition: background 0.15s;
	}

	/* ── Day Total ── */
	/* ── FAB Modal ── */
	.fab-overlay {
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: flex-end;
		justify-content: center;
		z-index: 200;
		animation: fade-in 0.15s ease;
	}
	@keyframes fade-in {
		from { opacity: 0; }
		to { opacity: 1; }
	}
	.fab-modal {
		background: var(--color-surface);
		border-radius: 16px 16px 0 0;
		width: 100%;
		max-width: 500px;
		max-height: 85vh;
		overflow-y: auto;
		padding: 1rem 1.25rem 1.5rem;
		animation: slide-up 0.25s cubic-bezier(0.4, 0, 0.2, 1);
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
	}
	@keyframes slide-up {
		from { transform: translateY(100%); }
		to { transform: translateY(0); }
	}
	.fab-modal-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.fab-modal-header h3 {
		margin: 0;
		font-size: 1rem;
		font-weight: 700;
	}
	.fab-close {
		background: none;
		border: none;
		color: var(--color-text-secondary);
		cursor: pointer;
		padding: 0.3rem;
		border-radius: 50%;
		display: flex;
		transition: background 0.12s;
	}
	.fab-close:hover {
		background: var(--color-bg-elevated);
	}

	/* ── FAB Meal selector ── */
	.fab-meal-select {
		display: flex;
		gap: 0.35rem;
	}
	.fab-meal-btn {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.2rem;
		padding: 0.55rem 0.25rem;
		border: 1px solid var(--color-border);
		border-radius: 10px;
		background: var(--color-bg-tertiary);
		cursor: pointer;
		color: var(--color-text-secondary);
		font-size: 0.68rem;
		font-weight: 600;
		transition: border-color 0.15s, color 0.15s, background 0.15s;
	}
	.fab-meal-btn.active {
		border-color: var(--mc);
		color: var(--mc);
		background: color-mix(in srgb, var(--mc) 8%, var(--color-bg-tertiary));
	}
	.fab-meal-btn:hover:not(.active) {
		border-color: var(--color-text-secondary);
	}

	/* ── FAB Tabs ── */
	.fab-tabs {
		display: flex;
		gap: 0;
		border-bottom: 2px solid var(--color-border);
		margin-bottom: 0.25rem;
	}
	.fab-tab {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.3rem;
		padding: 0.5rem 0.25rem;
		background: none;
		border: none;
		border-bottom: 2px solid transparent;
		margin-bottom: -2px;
		cursor: pointer;
		font-size: 0.78rem;
		font-weight: 600;
		color: var(--color-text-tertiary);
		transition: color 0.15s, border-color 0.15s;
	}
	.fab-tab.active {
		color: var(--color-primary);
		border-bottom-color: var(--color-primary);
	}
	.fab-tab:hover:not(.active) {
		color: var(--color-text-secondary);
	}

	/* ── Custom Meals in FAB ── */
	.custom-meals-list {
		display: flex;
		flex-direction: column;
		gap: 0.4rem;
	}
	.meals-empty {
		text-align: center;
		color: var(--color-text-tertiary);
		font-size: 0.85rem;
		padding: 1rem 0;
		margin: 0;
	}
	.custom-meal-card {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.75rem;
		padding: 0.6rem 0.75rem;
		background: var(--color-bg-tertiary);
		border-radius: 10px;
		border: 1px solid var(--color-border);
	}
	.custom-meal-info {
		display: flex;
		flex-direction: column;
		gap: 0.1rem;
		min-width: 0;
	}
	.custom-meal-name {
		font-weight: 600;
		font-size: 0.88rem;
		color: var(--color-text-primary);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.custom-meal-detail {
		font-size: 0.72rem;
		color: var(--color-text-tertiary);
	}
	.btn-sm {
		padding: 0.3rem 0.65rem;
		font-size: 0.72rem;
	}
	.manage-meals-link {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.3rem;
		padding: 0.5rem;
		color: var(--color-text-secondary);
		text-decoration: none;
		font-size: 0.78rem;
		font-weight: 500;
		transition: color 0.15s;
	}
	.manage-meals-link:hover {
		color: var(--color-text-primary);
	}

	/* ── Quick-log Sidebar ── */
	.quick-log-card {
		background: var(--color-surface);
		border-radius: 14px;
		padding: 0.75rem;
	}
	.quick-log-title {
		margin: 0 0 0.5rem;
		font-size: 0.85rem;
		font-weight: 700;
		color: var(--color-text-primary);
	}
	.quick-log-meal-select {
		display: flex;
		gap: 0.25rem;
		margin-bottom: 0.75rem;
	}
	.ql-meal-btn {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0.35rem;
		border-radius: 8px;
		border: 1px solid var(--color-border);
		background: var(--color-bg-tertiary);
		color: var(--color-text-secondary);
		cursor: pointer;
		transition: all 0.15s;
	}
	.ql-meal-btn.active {
		background: color-mix(in srgb, var(--mc) 15%, transparent);
		border-color: var(--mc);
		color: var(--mc);
	}
	.ql-meal-btn:hover:not(.active) {
		border-color: var(--color-text-tertiary);
	}
	.ql-section {
		margin-bottom: 0.5rem;
	}
	.ql-section-title {
		display: flex;
		align-items: center;
		gap: 0.3rem;
		margin: 0 0 0.3rem;
		font-size: 0.68rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		color: var(--color-text-secondary);
	}
	.ql-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 0.4rem 0.5rem;
		border-radius: 8px;
		border: none;
		background: none;
		cursor: pointer;
		color: var(--color-text-primary);
		font-size: 0.78rem;
		text-align: left;
		transition: background 0.12s;
	}
	.ql-item:hover {
		background: var(--color-bg-elevated);
	}
	.ql-item-name {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		min-width: 0;
		flex: 1;
	}
	.ql-item :global(.ql-item-add) {
		flex-shrink: 0;
		color: var(--color-text-tertiary);
		transition: color 0.12s;
	}
	.ql-item:hover :global(.ql-item-add) {
		color: var(--color-primary);
	}
	.ql-item.active {
		background: var(--color-bg-elevated);
	}
	.ql-amount-row {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 0.3rem;
		padding: 0.25rem 0.5rem 0.4rem;
	}
	.ql-amount-input {
		width: 4rem;
		padding: 0.3rem 0.4rem;
		border: 1px solid var(--color-border);
		border-radius: 6px;
		background: var(--color-bg-tertiary);
		color: var(--color-text-primary);
		font-size: 0.78rem;
		text-align: right;
	}
	.ql-amount-input:focus {
		border-color: var(--nord8);
		outline: none;
	}
	.ql-amount-unit {
		font-size: 0.75rem;
		color: var(--color-text-secondary);
	}
	.ql-amount-confirm {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0.3rem;
		border: none;
		border-radius: 6px;
		background: var(--color-primary);
		color: white;
		cursor: pointer;
		transition: filter 0.12s;
	}
	.ql-amount-confirm:hover {
		filter: brightness(1.1);
	}
	.ql-empty {
		font-size: 0.75rem;
		color: var(--color-text-tertiary);
		text-align: center;
		padding: 1rem 0.5rem;
		margin: 0;
	}
</style>
