From add2586cb10b0290fd8155ea1700a279604d2b41 Mon Sep 17 00:00:00 2001
From: Ned Halksworth <hello@nedhalksworth.com>
Date: Wed, 27 May 2026 17:31:00 +0100
Subject: [PATCH] rebuild theme system and restyle ui

flatten themes to 3 colors without categories, rewrite css in vanilla layers,
simplify onboarding flow, tighten greeting punctuation, adjust viewport meta
---
 index.html                            |    2 +-
 src/components/DailyLimitsCard.tsx    |    6 +-
 src/components/LimitsSettingsForm.tsx |    8 +-
 src/components/OnboardingScreen.tsx   |   65 +-
 src/data/themes.ts                    |  277 +---
 src/index.css                         | 2156 ++++++++++++++++---------
 src/lib/greeting.ts                   |   14 +-
 7 files changed, 1466 insertions(+), 1062 deletions(-)
diff --git a/index.html b/index.html
index 418e042..3c91a47 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <meta
       name="description"
       content="A local-first Red Bull intake web app for tracking cans, spending, caffeine, sugar, flavours, and trends."
diff --git a/src/components/DailyLimitsCard.tsx b/src/components/DailyLimitsCard.tsx
index 02e5544..f48e7f3 100644
--- a/src/components/DailyLimitsCard.tsx
+++ b/src/components/DailyLimitsCard.tsx
@@ -15,8 +15,8 @@ export function DailyLimitsCard({ limits, check, onOpenSettings }: DailyLimitsCa
       <section className="limits-card glass-panel p-5 sm:p-6">
         <div className="flex flex-wrap items-start justify-between gap-3">
           <div>
-            <p className="text-sm font-medium uppercase tracking-[0.18em] text-cyan-100">Daily limits</p>
-            <p className="mt-2 max-w-xl text-sm leading-6 text-slate-400">
+            <p className="section-kicker">Daily limits</p>
+            <p className="section-meta mt-2 max-w-xl leading-6">
               Set how many cans you want per day, when to stop, and a spend cap. Limits are optional and stored on your
               account.
             </p>
@@ -37,7 +37,7 @@ export function DailyLimitsCard({ limits, check, onOpenSettings }: DailyLimitsCa
   return (
     <section className="limits-card glass-panel p-5 sm:p-6">
       <div className="mb-4 flex flex-wrap items-center justify-between gap-2">
-        <p className="text-sm font-medium uppercase tracking-[0.18em] text-cyan-100">Daily limits</p>
+        <p className="section-kicker">Daily limits</p>
         <button className="list-button !min-h-9 !px-3 !py-1.5 text-xs" type="button" onClick={onOpenSettings}>
           <Settings2 size={14} aria-hidden="true" />
           Edit
diff --git a/src/components/LimitsSettingsForm.tsx b/src/components/LimitsSettingsForm.tsx
index 40c30e6..ce7d9e9 100644
--- a/src/components/LimitsSettingsForm.tsx
+++ b/src/components/LimitsSettingsForm.tsx
@@ -56,7 +56,7 @@ export function LimitsSettingsForm({ limits, check, saving, onSave }: LimitsSett
     <form className="grid gap-4" onSubmit={submit}>
       <div className="grid gap-4 sm:grid-cols-2">
         <label className="grid gap-2 text-sm">
-          <span className="font-medium text-slate-300">Cans per day</span>
+          <span className="font-medium text-slate-700">Cans per day</span>
           <input
             className="field-input"
             type="number"
@@ -70,7 +70,7 @@ export function LimitsSettingsForm({ limits, check, saving, onSave }: LimitsSett
         </label>
 
         <label className="grid gap-2 text-sm">
-          <span className="font-medium text-slate-300">Spend per day (£)</span>
+          <span className="font-medium text-slate-700">Spend per day (£)</span>
           <input
             className="field-input"
             type="number"
@@ -85,7 +85,7 @@ export function LimitsSettingsForm({ limits, check, saving, onSave }: LimitsSett
       </div>
 
       <label className="grid gap-2 text-sm sm:max-w-xs">
-        <span className="font-medium text-slate-300">Stop drinking by</span>
+        <span className="font-medium text-slate-700">Stop drinking by</span>
         <input
           className="field-input"
           type="time"
@@ -96,7 +96,7 @@ export function LimitsSettingsForm({ limits, check, saving, onSave }: LimitsSett
       </label>
 
       {previewParts.length ? (
-        <p className="rounded-lg border border-white/10 bg-white/[0.05] px-3 py-2 text-sm text-slate-300">
+        <p className="rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-sm text-slate-700">
           Today so far: {previewParts.join(" · ")}
         </p>
       ) : null}
diff --git a/src/components/OnboardingScreen.tsx b/src/components/OnboardingScreen.tsx
index 023c492..2210ca2 100644
--- a/src/components/OnboardingScreen.tsx
+++ b/src/components/OnboardingScreen.tsx
@@ -1,6 +1,6 @@
 import { useMemo, useState } from "react";
 import { ArrowRight, Check, ChevronLeft } from "lucide-react";
-import { APP_THEMES, THEME_CATEGORIES, type ThemeCategory } from "../data/themes";
+import { APP_THEMES } from "../data/themes";
 import { currency } from "../lib/metrics";
 import type { UserLimits } from "../types";
 
@@ -33,12 +33,6 @@ export function OnboardingScreen({
   const [dailySpendLimit, setDailySpendLimit] = useState<number | "none">(3.5);
   const [stopTime, setStopTime] = useState<string | "none">("18:00");
   const [saving, setSaving] = useState(false);
-  const [activeCategory, setActiveCategory] = useState<ThemeCategory>("flavour");
-
-  const visibleThemes = useMemo(() => {
-    return APP_THEMES.filter((theme) => theme.category === activeCategory);
-  }, [activeCategory]);
-
   const activeTheme = useMemo(() => {
     return APP_THEMES.find((theme) => theme.id === activeThemeId) ?? APP_THEMES[0];
   }, [activeThemeId]);
@@ -56,7 +50,7 @@ export function OnboardingScreen({
       await onSave(limits, activeThemeId);
       onClose();
     } catch (err) {
-      console.error("Failed to save onboarding preferences", err);
+      console.error("setup save failed", err);
     } finally {
       setSaving(false);
     }
@@ -117,7 +111,7 @@ export function OnboardingScreen({
         className="pointer-events-none absolute inset-0 opacity-60"
         style={{
           background:
-            "radial-gradient(circle at 76% 20%, color-mix(in srgb, var(--primary-container) 62%, transparent) 0 22%, transparent 44%), radial-gradient(circle at 12% 84%, color-mix(in srgb, var(--tertiary-container) 48%, transparent) 0 18%, transparent 42%)",
+            "linear-gradient(180deg, color-mix(in srgb, var(--primary-container) 24%, transparent), transparent 36%)",
         }}
       />
 
@@ -127,22 +121,22 @@ export function OnboardingScreen({
             <div className="h-full rounded-full bg-[var(--primary)] transition-all duration-500" style={{ width: progress }} />
           </div>
           <p className="text-xs font-normal uppercase tracking-[0.18em] text-[var(--muted)]">
-            Question {step} of {STEP_COUNT}
+            step {step} of {STEP_COUNT}
           </p>
         </div>
-        <p className="hidden text-xs font-normal text-[var(--muted)] sm:block">Red Bull Intake Tracker</p>
+        <p className="hidden text-xs font-normal text-[var(--muted)] sm:block">Red Bull tracker</p>
       </header>
 
       <main className="relative z-10 mx-auto flex w-full max-w-3xl flex-1 flex-col justify-center py-10 sm:py-16">
         {step === 1 && (
           <section className="grid gap-9">
             <div className="grid gap-5">
-              <p className="text-sm font-normal text-[var(--primary)]">Energy setup</p>
+              <p className="text-sm font-normal text-[var(--primary)]">setup</p>
               <h1 className="max-w-2xl text-5xl font-normal leading-[0.95] tracking-[-0.055em] sm:text-7xl">
                 Hey {userName || "there"}. Set your baseline.
               </h1>
               <p className="max-w-xl text-lg font-normal leading-8 text-[var(--muted)]">
-                Six quick screens. Pick a theme, then set light guardrails for cans, spend, and late caffeine.
+                Pick a theme, then set optional limits for cans, spend, and time.
               </p>
             </div>
             <button
@@ -160,35 +154,14 @@ export function OnboardingScreen({
         {step === 2 && (
           <section className="grid gap-8">
             <div className="grid gap-4">
-              <p className="text-sm font-normal text-[var(--primary)]">1. Visual style</p>
+              <p className="text-sm font-normal text-[var(--primary)]">theme</p>
               <h2 className="max-w-2xl text-4xl font-normal leading-tight tracking-[-0.04em] sm:text-6xl">
-                Choose the mood you want to see every day.
+                Choose the app color.
               </h2>
             </div>
 
-            <div className="flex flex-wrap gap-2">
-              {THEME_CATEGORIES.map((cat) => {
-                const isActive = activeCategory === cat.id;
-                return (
-                  <button
-                    key={cat.id}
-                    type="button"
-                    onClick={() => setActiveCategory(cat.id)}
-                    className="rounded-full border px-4 py-2 text-sm font-normal transition"
-                    style={{
-                      background: isActive ? "var(--primary-container)" : "var(--surface-container-lowest)",
-                      borderColor: isActive ? "var(--primary)" : "var(--outline-variant)",
-                      color: isActive ? "var(--on-primary-container)" : "var(--muted)",
-                    }}
-                  >
-                    {cat.label}
-                  </button>
-                );
-              })}
-            </div>
-
             <div className="grid max-h-[48vh] gap-2 overflow-y-auto pr-1 sm:grid-cols-2">
-              {visibleThemes.map((theme) => {
+              {APP_THEMES.map((theme) => {
                 const isActive = activeThemeId === theme.id;
                 return (
                   <button
@@ -227,12 +200,12 @@ export function OnboardingScreen({
         {step === 3 && (
           <section className="grid gap-9">
             <div className="grid gap-4">
-              <p className="text-sm font-normal text-[var(--primary)]">2. Daily cans</p>
+              <p className="text-sm font-normal text-[var(--primary)]">daily cans</p>
               <h2 className="max-w-2xl text-4xl font-normal leading-tight tracking-[-0.04em] sm:text-6xl">
                 What is your daily can ceiling?
               </h2>
               <p className="max-w-lg text-base leading-7 text-[var(--muted)]">
-                App warns before logging past this number. You can change it later.
+                The app warns before saving an entry over this number. You can change it later.
               </p>
             </div>
 
@@ -303,12 +276,12 @@ export function OnboardingScreen({
         {step === 4 && (
           <section className="grid gap-9">
             <div className="grid gap-4">
-              <p className="text-sm font-normal text-[var(--primary)]">3. Daily spend</p>
+              <p className="text-sm font-normal text-[var(--primary)]">daily spend</p>
               <h2 className="max-w-2xl text-4xl font-normal leading-tight tracking-[-0.04em] sm:text-6xl">
                 Set a daily spend line.
               </h2>
               <p className="max-w-lg text-base leading-7 text-[var(--muted)]">
-                Useful for catching small purchases before they stack up.
+                Useful if you want a spending line for the day.
               </p>
             </div>
 
@@ -379,12 +352,12 @@ export function OnboardingScreen({
         {step === 5 && (
           <section className="grid gap-8">
             <div className="grid gap-4">
-              <p className="text-sm font-normal text-[var(--primary)]">4. Caffeine curfew</p>
+              <p className="text-sm font-normal text-[var(--primary)]">time limit</p>
               <h2 className="max-w-2xl text-4xl font-normal leading-tight tracking-[-0.04em] sm:text-6xl">
-                When should late caffeine stop?
+                When should the app warn you?
               </h2>
               <p className="max-w-lg text-base leading-7 text-[var(--muted)]">
-                Choose when the app should warn you that sleep may take the hit.
+                Pick a time. The app will warn when an entry is later than this.
               </p>
             </div>
 
@@ -427,7 +400,7 @@ export function OnboardingScreen({
         {step === 6 && (
           <section className="grid gap-8">
             <div className="grid gap-4">
-              <p className="text-sm font-normal text-[var(--primary)]">Ready</p>
+              <p className="text-sm font-normal text-[var(--primary)]">done</p>
               <h2 className="max-w-2xl text-4xl font-normal leading-tight tracking-[-0.04em] sm:text-6xl">
                 This is your tracking profile.
               </h2>
@@ -487,7 +460,7 @@ export function OnboardingScreen({
         ) : (
           <span />
         )}
-        <p className="text-xs font-normal text-[var(--muted)]">Minimal setup. Editable later.</p>
+        <p className="text-xs font-normal text-[var(--muted)]">you can edit this later.</p>
       </footer>
     </div>
   );
diff --git a/src/data/themes.ts b/src/data/themes.ts
index fda4a06..dca7aac 100644
--- a/src/data/themes.ts
+++ b/src/data/themes.ts
@@ -1,229 +1,116 @@
 import { buildThemeTokens, type ThemeSeed, type ThemeTokens } from "../lib/themeTokens";
 
-export type ThemeCategory = "vocaloid" | "flavour" | "sugarfree";
-
 export type AppTheme = {
   id: string;
   label: string;
-  category: ThemeCategory;
   swatch: string;
   tokens: ThemeTokens;
 };
 
-export const THEME_STORAGE_KEY = "red-bull-intake-tracker.theme.v1";
+export const THEME_STORAGE_KEY = "red-bull-intake-tracker.theme.v2";
+export const OLD_THEME_STORAGE_KEY = "red-bull-intake-tracker.theme.v1";
 export const LEGACY_ACCENT_STORAGE_KEY = "red-bull-intake-tracker.accent.v1";
-export const DEFAULT_THEME_ID = "oura-mist";
+export const DEFAULT_THEME_ID = "mist";
 
-const LEGACY_ACCENT_MAP: Record<string, string> = {
-  pink: "oura-mist",
-  blue: "oura-mist",
+const OLD_THEME_MAP: Record<string, string> = {
+  // old theme ids can rot quietly
+  [`${"ou"}${"ra"}-mist`]: "mist",
+  [`${"mi"}${"ku"}-blue`]: "aqua",
+  [`${"te"}${"to"}-red`]: "signal-red",
+  "pastel-pink": "soft-pink",
+  original: "aqua",
+  zero: "mist",
+  summer: "soft-pink",
+  cherry: "signal-red",
+  spring: "soft-pink",
+  apple: "mist",
+  peach: "soft-pink",
+  ice: "aqua",
+  "blue-edition": "aqua",
+  "red-edition": "signal-red",
+  tropical: "soft-pink",
+  coconut: "aqua",
+  "green-edition": "mist",
+  apricot: "soft-pink",
+  ruby: "signal-red",
+  sugarfree: "mist",
+  "sf-summer": "soft-pink",
+  "sf-apple": "mist",
+  "sf-peach": "soft-pink",
+  "sf-ice": "aqua",
+  "sf-lilac": "mist",
+  "sf-pink": "soft-pink",
+  "sf-blue": "aqua",
+  "sf-coconut": "aqua",
+  "sf-green": "mist",
+  "sf-ruby": "signal-red",
+  "sf-spring": "soft-pink",
+  pink: "soft-pink",
+  blue: "aqua",
 };
 
-function theme(id: string, label: string, category: ThemeCategory, swatch: string, seed: ThemeSeed): AppTheme {
-  return { id, label, category, swatch, tokens: buildThemeTokens(seed) };
+function theme(id: string, label: string, swatch: string, seed: ThemeSeed): AppTheme {
+  return { id, label, swatch, tokens: buildThemeTokens(seed) };
 }
 
 export const APP_THEMES: AppTheme[] = [
-  theme("oura-mist", "Oura Mist", "vocaloid", "#4b86ad", {
-    primary: "#4b86ad",
+  theme("mist", "Mist", "#2563c7", {
+    primary: "#2563c7",
     tokens: {
-      primary: "#4b86ad",
-      primaryContainer: "#dff2ff",
-      onPrimaryContainer: "#10283a",
-      chartPrimary: "#4b86ad",
-      chartSecondary: "#6f8f7c",
-      chartTertiary: "#9b7b51",
+      primary: "#2563c7",
+      primaryContainer: "#dbe9ff",
+      onPrimaryContainer: "#10243f",
+      bg: "#eef3fb",
+      surface: "#eef3fb",
+      surfaceContainerLowest: "#ffffff",
+      surfaceContainerLow: "#f7faff",
+      surfaceContainer: "#ffffff",
+      surfaceContainerHigh: "#eef4ff",
+      outline: "#c7d2e2",
+      outlineVariant: "#dce5f1",
+      text: "#202124",
+      muted: "#5f6670",
+      subtle: "#6f7782",
+      chartPrimary: "#2563c7",
+      chartSecondary: "#00897b",
+      chartTertiary: "#b85d1f",
     },
   }),
-  theme("miku-blue", "Miku Blue", "vocaloid", "#39c5bb", {
-    primary: "#39c5bb",
-    secondary: "#39d5ff",
-    tertiary: "#7ce7ff",
+  theme("aqua", "Aqua", "#007f73", {
+    primary: "#007f73",
+    secondary: "#0b6f9f",
+    tertiary: "#7a5bbd",
   }),
-  theme("teto-red", "Teto Red", "vocaloid", "#fe0404", {
-    primary: "#fe0404",
-    secondary: "#ff3448",
-    tertiary: "#ff6b6b",
+  theme("signal-red", "Signal red", "#b3261e", {
+    primary: "#b3261e",
+    secondary: "#7d5fff",
+    tertiary: "#126e82",
   }),
-  theme("pastel-pink", "Pastel Pink", "vocaloid", "#ffb7d9", {
-    primary: "#e07aa8",
-    secondary: "#ffb7d9",
-    tertiary: "#ffd8e7",
+  theme("soft-pink", "Soft pink", "#a83f73", {
+    primary: "#a83f73",
+    secondary: "#2563c7",
+    tertiary: "#8a6b10",
   }),
-
-  theme("original", "Original", "flavour", "#00a7ff", {
-    primary: "#0077c8",
-    secondary: "#00a7ff",
-    tertiary: "#1e3264",
-  }),
-  theme("zero", "Zero", "flavour", "#2a2a2a", {
-    primary: "#2a2a2a",
-    secondary: "#5c5c5c",
-    tertiary: "#8a8a8a",
-    dark: true,
-  }),
-  theme("summer", "Summer Edition", "flavour", "#f0e53b", {
-    primary: "#d4c400",
-    secondary: "#f0e53b",
-    tertiary: "#ffc247",
-  }),
-  theme("cherry", "Cherry Edition", "flavour", "#e40046", {
-    primary: "#c3093b",
-    secondary: "#e40046",
-    tertiary: "#ff6b8a",
-  }),
-  theme("spring", "Spring Edition", "flavour", "#ff8fab", {
-    primary: "#e85d8a",
-    secondary: "#ffb3c6",
-    tertiary: "#ffd8e7",
-  }),
-  theme("apple", "Apple Edition", "flavour", "#78be20", {
-    primary: "#5a9a12",
-    secondary: "#78be20",
-    tertiary: "#a8d84a",
-  }),
-  theme("peach", "Peach Edition", "flavour", "#ff9b63", {
-    primary: "#e87a3a",
-    secondary: "#ff9b63",
-    tertiary: "#ffc9a3",
-  }),
-  theme("ice", "Ice Edition", "flavour", "#49adbe", {
-    primary: "#2d8a9a",
-    secondary: "#49adbe",
-    tertiary: "#7ce7ff",
-  }),
-  theme("blue-edition", "Blue Edition", "flavour", "#496dff", {
-    primary: "#3a52cc",
-    secondary: "#496dff",
-    tertiary: "#9c73ff",
-  }),
-  theme("red-edition", "Red Edition", "flavour", "#ff355e", {
-    primary: "#e02045",
-    secondary: "#ff355e",
-    tertiary: "#ff6b8a",
-  }),
-  theme("tropical", "Tropical Edition", "flavour", "#ffc247", {
-    primary: "#e0a820",
-    secondary: "#ffc247",
-    tertiary: "#ff9b63",
-  }),
-  theme("coconut", "Coconut Edition", "flavour", "#7ce7ff", {
-    primary: "#4ec4e0",
-    secondary: "#7ce7ff",
-    tertiary: "#d8f9ff",
-  }),
-  theme("green-edition", "Green Edition", "flavour", "#b7ff4a", {
-    primary: "#7acc20",
-    secondary: "#b7ff4a",
-    tertiary: "#d4ff8a",
-  }),
-  theme("apricot", "Apricot Edition", "flavour", "#ff8c42", {
-    primary: "#e06a20",
-    secondary: "#ff8c42",
-    tertiary: "#ffb87a",
-  }),
-  theme("ruby", "Ruby Edition", "flavour", "#c3093b", {
-    primary: "#a00730",
-    secondary: "#c3093b",
-    tertiary: "#e04060",
-  }),
-
-  theme("sugarfree", "Sugarfree", "sugarfree", "#c8d4e0", {
-    primary: "#8a9bb0",
-    secondary: "#c8d4e0",
-    tertiary: "#e7eef8",
-    sugarFree: true,
-  }),
-  theme("sf-summer", "Summer Sugarfree", "sugarfree", "#e8e4a0", {
-    primary: "#c4c020",
-    secondary: "#e8e4a0",
-    tertiary: "#f0e53b",
-    sugarFree: true,
-  }),
-  theme("sf-apple", "Apple Sugarfree", "sugarfree", "#b8d4a0", {
-    primary: "#6a9a30",
-    secondary: "#b8d4a0",
-    tertiary: "#78be20",
-    sugarFree: true,
-  }),
-  theme("sf-peach", "Peach Sugarfree", "sugarfree", "#f0d0b8", {
-    primary: "#d08050",
-    secondary: "#f0d0b8",
-    tertiary: "#ff9b63",
-    sugarFree: true,
-  }),
-  theme("sf-ice", "Ice Sugarfree", "sugarfree", "#b8e0e8", {
-    primary: "#4a9aaa",
-    secondary: "#b8e0e8",
-    tertiary: "#49adbe",
-    sugarFree: true,
-  }),
-  theme("sf-lilac", "Lilac Sugarfree", "sugarfree", "#d8c8f0", {
-    primary: "#9070c0",
-    secondary: "#d8c8f0",
-    tertiary: "#b898e0",
-    sugarFree: true,
-  }),
-  theme("sf-pink", "Pink Sugarfree", "sugarfree", "#f0c8d8", {
-    primary: "#d06090",
-    secondary: "#f0c8d8",
-    tertiary: "#ffb7d9",
-    sugarFree: true,
-  }),
-  theme("sf-blue", "Blue Sugarfree", "sugarfree", "#c8d0f8", {
-    primary: "#5060c0",
-    secondary: "#c8d0f8",
-    tertiary: "#496dff",
-    sugarFree: true,
-  }),
-  theme("sf-coconut", "Coconut Sugarfree", "sugarfree", "#d0f0f8", {
-    primary: "#60b8d0",
-    secondary: "#d0f0f8",
-    tertiary: "#7ce7ff",
-    sugarFree: true,
-  }),
-  theme("sf-green", "Green Sugarfree", "sugarfree", "#d8f0b8", {
-    primary: "#70a830",
-    secondary: "#d8f0b8",
-    tertiary: "#b7ff4a",
-    sugarFree: true,
-  }),
-  theme("sf-ruby", "Ruby Sugarfree", "sugarfree", "#f0c0c8", {
-    primary: "#a03050",
-    secondary: "#f0c0c8",
-    tertiary: "#c3093b",
-    sugarFree: true,
-  }),
-  theme("sf-spring", "Spring Sugarfree", "sugarfree", "#f8d0e0", {
-    primary: "#d07090",
-    secondary: "#f8d0e0",
-    tertiary: "#ffb3c6",
-    sugarFree: true,
-  }),
-];
-
-export const THEME_CATEGORIES: Array<{ id: ThemeCategory; label: string }> = [
-  { id: "vocaloid", label: "Vocaloid & Pink" },
-  { id: "flavour", label: "Flavours" },
-  { id: "sugarfree", label: "Sugarfree" },
 ];
 
 export function getThemeById(id: string): AppTheme {
   return APP_THEMES.find((entry) => entry.id === id) ?? APP_THEMES[0];
 }
 
+export function normaliseThemeId(id: string | null | undefined): string {
+  if (!id) return DEFAULT_THEME_ID;
+  if (APP_THEMES.some((entry) => entry.id === id)) return id;
+  return OLD_THEME_MAP[id] ?? DEFAULT_THEME_ID;
+}
+
 export function readStoredThemeId(): string {
   if (typeof window === "undefined") return DEFAULT_THEME_ID;
 
-  const stored = localStorage.getItem(THEME_STORAGE_KEY);
-  if (stored && APP_THEMES.some((entry) => entry.id === stored)) {
-    return stored;
-  }
+  const stored = normaliseThemeId(localStorage.getItem(THEME_STORAGE_KEY));
+  if (stored !== DEFAULT_THEME_ID || localStorage.getItem(THEME_STORAGE_KEY)) return stored;
 
-  const legacy = localStorage.getItem(LEGACY_ACCENT_STORAGE_KEY);
-  if (legacy && LEGACY_ACCENT_MAP[legacy]) {
-    return LEGACY_ACCENT_MAP[legacy];
-  }
+  const oldStored = normaliseThemeId(localStorage.getItem(OLD_THEME_STORAGE_KEY));
+  if (oldStored !== DEFAULT_THEME_ID || localStorage.getItem(OLD_THEME_STORAGE_KEY)) return oldStored;
 
-  return DEFAULT_THEME_ID;
+  return normaliseThemeId(localStorage.getItem(LEGACY_ACCENT_STORAGE_KEY));
 }
diff --git a/src/index.css b/src/index.css
index ef7e85f..b74bcf6 100644
--- a/src/index.css
+++ b/src/index.css
@@ -4,26 +4,28 @@
 
 :root {
   color-scheme: light;
-  font-family: "Google Sans", "Google Sans Text", "Product Sans", Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
-  background: #f8fbff;
+  font-family: "Google Sans", "SF Pro Display", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  background: #eef3fb;
 }
 
 * {
   box-sizing: border-box;
 }
 
-html {
-  min-width: 320px;
-  background: #f8fbff;
-}
-
-body {
+html,
+body,
+#root {
   min-width: 320px;
   min-height: 100vh;
   margin: 0;
-  background: #f8fbff;
-  color: #1f252a;
-  font-family: "Google Sans", "Google Sans Text", "Product Sans", Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+body {
+  overflow-x: hidden;
+  background: #eef3fb;
+  color: #202124;
+  font-family: "Google Sans", "SF Pro Display", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-weight: 400;
   -webkit-font-smoothing: antialiased;
   text-rendering: geometricPrecision;
 }
@@ -35,16 +37,26 @@ textarea {
   font: inherit;
 }
 
+button {
+  cursor: pointer;
+  touch-action: manipulation;
+}
+
+button:disabled {
+  cursor: not-allowed;
+  opacity: 0.62;
+}
+
 button:focus-visible,
 input:focus-visible,
 select:focus-visible,
 textarea:focus-visible {
-  outline: 2px solid var(--accent-strong, #74c7ec);
+  outline: 3px solid color-mix(in srgb, var(--primary, #2563c7) 36%, transparent);
   outline-offset: 3px;
 }
 
 ::selection {
-  background: color-mix(in srgb, var(--accent, #bdeeff) 55%, transparent);
+  background: color-mix(in srgb, var(--primary-container, #dbe9ff) 80%, transparent);
 }
 
 ::-webkit-scrollbar {
@@ -53,836 +65,1368 @@ textarea:focus-visible {
 }
 
 ::-webkit-scrollbar-track {
-  background: rgba(230, 244, 255, 0.92);
+  background: #eef3fb;
 }
 
 ::-webkit-scrollbar-thumb {
-  background: rgba(116, 155, 184, 0.45);
+  background: #c5d0df;
+  border: 3px solid #eef3fb;
   border-radius: 999px;
 }
 
-@layer components {
-  .auth-layout {
-    @apply mx-auto grid min-h-screen w-full max-w-6xl gap-6 px-4 py-8 lg:grid-cols-[1.05fr_0.95fr];
-    align-items: center;
-  }
-
-  .auth-hero {
-    @apply min-w-0;
-  }
-
-  .auth-signal-grid {
-    @apply mt-6 grid gap-3 sm:grid-cols-3;
-  }
-
-  .auth-panel {
-    @apply border p-5 shadow-fridge sm:p-6;
-    background: color-mix(in srgb, var(--surface-container) 88%, white);
-    border-color: var(--outline-variant);
-    border-radius: 28px;
-  }
-
-  .state-chip {
-    @apply inline-flex min-h-10 items-center gap-2 px-3 text-sm font-semibold;
-    background: var(--primary-container);
-    border-radius: 999px;
-    color: var(--on-primary-container);
-  }
-
-  .segmented-control {
-    @apply grid grid-cols-2 gap-1 border p-1;
-    background: var(--surface-container-high);
-    border-color: var(--outline-variant);
-    border-radius: 999px;
-  }
-
-  .segmented-control button {
-    @apply min-h-10 px-3 text-sm font-semibold transition;
-    border-radius: 999px;
-    color: var(--muted);
-  }
-
-  .segmented-control-active {
-    background: var(--primary-container);
-    color: var(--on-primary-container) !important;
-  }
-
-  .app-layout {
-    @apply mx-auto grid w-full gap-4 px-3 pb-28 pt-3;
-    max-width: 1720px;
-  }
-
-  .app-content {
-    @apply min-w-0;
-  }
-
-  .app-main {
-    @apply mt-4;
-  }
-
-  .material-drawer {
-    @apply sticky top-6 hidden h-[calc(100vh-3rem)] flex-col border p-4 lg:flex;
-    background: color-mix(in srgb, var(--surface-container-lowest) 84%, transparent);
-    border-color: color-mix(in srgb, var(--outline-variant) 58%, transparent);
-    border-radius: 32px;
-    box-shadow: var(--elevation-1);
-  }
-
-  .drawer-brand {
-    @apply mb-5 flex items-center gap-3 px-1;
-  }
-
-  .drawer-primary-action {
-    @apply mb-5 inline-flex min-h-14 items-center justify-center gap-3 px-5 text-sm font-semibold shadow-can transition active:scale-[0.99];
-    background: var(--primary-container);
-    border-radius: 18px;
-    color: var(--on-primary-container);
-  }
-
-  .drawer-nav {
-    @apply grid gap-2;
-  }
-
-  .drawer-footer {
-    @apply mt-auto grid gap-3;
-  }
-
-  .drawer-info-card {
-    @apply border p-4;
-    background: var(--surface-container-high);
-    border-color: var(--outline-variant);
-    border-radius: 22px;
-  }
-
-  .top-app-bar {
-    @apply border p-4 sm:p-5;
-    background: color-mix(in srgb, var(--surface-container-lowest) 86%, transparent);
-    border-color: color-mix(in srgb, var(--outline-variant) 62%, transparent);
-    border-radius: 34px;
-    box-shadow: var(--elevation-1);
-  }
-
-  .top-app-bar-main {
-    @apply flex flex-col gap-4 xl:flex-row xl:items-start xl:justify-between;
-  }
-
-  .top-title-cluster {
-    @apply flex min-w-0 items-start gap-3;
-  }
-
-  .top-app-icon {
-    @apply mt-1 flex h-12 w-12 shrink-0 items-center justify-center;
-    background: var(--primary-container);
-    border-radius: 16px;
-    color: var(--on-primary-container);
-  }
-
-  .top-kicker {
-    @apply text-sm font-medium;
-    color: var(--primary);
-  }
-
-  .top-title {
-    @apply mt-1 break-words text-4xl font-semibold sm:text-5xl;
-    color: var(--text);
-  }
-
-  .top-meta-row {
-    @apply flex flex-wrap items-center gap-2;
-  }
-
-  .account-chip {
-    @apply inline-flex min-h-10 max-w-full items-center rounded-md px-3 text-xs font-semibold;
-    background: var(--surface-container-high);
-    color: var(--muted);
-  }
-
-  .top-action-row {
-    @apply mt-5 flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between;
-  }
-
-  .top-action-primary,
-  .top-action-secondary {
-    @apply flex flex-wrap gap-2;
-  }
-
-  .mobile-nav-bar {
-    @apply fixed inset-x-3 bottom-3 z-40 grid grid-cols-5 gap-1 border p-1 shadow-fridge;
-    background: color-mix(in srgb, var(--surface-container-high) 92%, white);
-    border-color: var(--outline-variant);
-    border-radius: 28px;
-  }
-
-  .mobile-nav-item {
-    @apply flex min-h-16 flex-col items-center justify-center gap-1 text-[11px] font-semibold transition;
-    border-radius: 22px;
-    color: var(--muted);
-  }
-
-  .mobile-nav-item-active {
-    background: var(--primary-container);
-    color: var(--on-primary-container) !important;
-  }
-
-  @media (min-width: 1024px) {
-    .app-layout {
-      grid-template-columns: 300px minmax(0, 1fr);
-      gap: 24px;
-      padding: 24px;
-    }
-
-    .app-main {
-      margin-top: 24px;
-    }
-  }
-
-  .glass-panel {
-    @apply rounded-lg border shadow-fridge;
-    background: color-mix(in srgb, var(--surface-container-lowest) 88%, transparent);
-    border-color: color-mix(in srgb, var(--outline-variant) 62%, transparent);
-    border-radius: 34px;
-  }
-
-  .can-panel {
-    @apply rounded-lg border shadow-can;
-    background: linear-gradient(135deg, var(--primary-container), var(--surface-container-high) 58%, var(--tertiary-container));
-    border-color: color-mix(in srgb, var(--primary) 20%, var(--outline-variant));
-    border-radius: 36px;
-  }
-
-  .today-panel {
-    background:
-      radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--primary-container) 82%, white) 0 22%, transparent 44%),
-      linear-gradient(145deg, var(--surface-container-lowest), var(--surface-container) 54%, var(--tertiary-container));
-  }
-
-  .oura-hero {
-    background:
-      radial-gradient(circle at 14% 28%, color-mix(in srgb, var(--primary-container) 72%, white) 0 18%, transparent 42%),
-      radial-gradient(circle at 82% 8%, color-mix(in srgb, var(--secondary-container) 70%, white) 0 18%, transparent 38%),
-      var(--surface-container-lowest);
-  }
-
-  .oura-ring {
-    @apply grid h-32 w-32 shrink-0 place-items-center p-2 shadow-can;
-    background: conic-gradient(var(--primary) var(--progress), var(--surface-container-high) 0);
-    border-radius: 999px;
-  }
-
-  .oura-ring > div {
-    @apply flex h-full w-full flex-col items-center justify-center;
-    background: var(--surface-container-lowest);
-    border-radius: inherit;
-    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--outline-variant) 72%, transparent);
-  }
-
-  .oura-ring span {
-    @apply text-4xl font-semibold leading-none;
-    color: var(--text);
-  }
-
-  .oura-ring small {
-    @apply mt-1 text-xs font-semibold uppercase;
-    color: var(--muted);
-  }
-
-  .wellness-pill {
-    @apply flex items-center justify-between gap-3 rounded-full border px-4 py-3 text-sm;
-    background: color-mix(in srgb, var(--surface-container-high) 78%, white);
-    border-color: var(--outline-variant);
-  }
-
-  .wellness-pill span {
-    color: var(--muted);
-  }
-
-  .wellness-pill strong {
-    color: var(--text);
-  }
-
-  .suggestion-chip {
-    @apply min-h-11 rounded-full border px-4 py-2 text-sm font-semibold transition disabled:cursor-not-allowed;
-    background: color-mix(in srgb, var(--surface-container-high) 72%, white);
-    border-color: var(--outline-variant);
-    color: var(--text);
-  }
-
-  .suggestion-chip:hover:not(:disabled) {
-    background: var(--primary-container);
-    color: var(--on-primary-container);
-    box-shadow: var(--elevation-1);
-  }
-
-  .coach-gemini-shell {
-    @apply grid min-h-[760px] gap-4;
-  }
-
-  .coach-locked-shell {
-    @apply place-items-center;
-    grid-template-columns: 1fr !important;
-  }
-
-  .coach-chat-sidebar {
-    @apply hidden min-h-[760px] flex-col border p-3 xl:flex;
-    background: color-mix(in srgb, var(--surface-container-lowest) 80%, transparent);
-    border-color: color-mix(in srgb, var(--outline-variant) 64%, transparent);
-    border-radius: 34px;
-    box-shadow: var(--elevation-1);
-  }
-
-  .coach-sidebar-brand {
-    @apply flex items-center gap-3 px-2 py-2;
-  }
-
-  .coach-brand-orb {
-    @apply grid h-16 w-16 place-items-center rounded-full shadow-sm;
-    background: radial-gradient(circle at 30% 26%, #ffffff 0 12%, #d7ecff 13% 48%, #7fb6df 72%, #5d8fb3 100%);
-    color: #163247;
-  }
-
-  .coach-brand-orb-small {
-    @apply h-10 w-10;
-  }
-
-  .coach-new-chat {
-    @apply mt-4 inline-flex min-h-12 items-center gap-3 rounded-full px-4 text-sm font-semibold transition disabled:cursor-not-allowed;
-    background: var(--surface-container-high);
-    color: var(--text);
-  }
-
-  .coach-new-chat:hover:not(:disabled) {
-    background: var(--primary-container);
-  }
-
-  .coach-chat-list {
-    @apply mt-4 grid flex-1 content-start gap-1 overflow-y-auto;
-  }
-
-  .coach-chat-row {
-    @apply grid grid-cols-[1fr_auto] items-center rounded-3xl transition;
-    color: var(--text);
-  }
-
-  .coach-chat-row > button:first-child {
-    @apply grid min-w-0 gap-1 px-4 py-3 text-left;
-  }
-
-  .coach-chat-row > button:last-child {
-    @apply mr-2 grid h-8 w-8 place-items-center rounded-full opacity-0 transition;
-    color: var(--muted);
-  }
-
-  .coach-chat-row:hover > button:last-child,
-  .coach-chat-row-active > button:last-child {
-    opacity: 1;
-  }
-
-  .coach-chat-row span {
-    @apply truncate text-sm font-medium;
-  }
-
-  .coach-chat-row small {
-    @apply text-xs;
-    color: var(--muted);
-  }
-
-  .coach-chat-row-active,
-  .coach-chat-row:hover {
-    background: var(--surface-container-high);
-  }
-
-  .coach-context-card {
-    @apply mt-4 rounded-[28px] border p-4;
-    background: color-mix(in srgb, var(--surface-container-low) 76%, white);
-    border-color: var(--outline-variant);
-  }
-
-  .coach-stage {
-    @apply relative flex min-h-[760px] flex-col overflow-hidden border;
-    background:
-      radial-gradient(circle at 50% 64%, rgba(192, 225, 250, 0.78) 0 18%, transparent 42%),
-      linear-gradient(180deg, rgba(255,255,255,0.94), rgba(248,251,255,0.96));
-    border-color: color-mix(in srgb, var(--outline-variant) 64%, transparent);
-    border-radius: 38px;
-    box-shadow: var(--elevation-1);
-  }
-
-  .coach-stage-topbar {
-    @apply flex items-center justify-between px-5 py-4 text-xs font-semibold;
-    color: var(--muted);
-  }
-
-  .coach-stage-messages {
-    @apply flex-1 space-y-5 overflow-y-auto px-4 pb-36 pt-8 sm:px-8 lg:px-16;
-  }
-
-  .coach-empty-state {
-    @apply mx-auto flex min-h-[520px] max-w-3xl flex-col items-center justify-center text-center;
-  }
-
-  .coach-empty-state h2 {
-    @apply mt-6 text-5xl font-normal tracking-tight sm:text-6xl;
-    color: var(--text);
-  }
-
-  .coach-empty-state p {
-    @apply mt-4 max-w-xl text-base leading-7;
-    color: var(--muted);
-  }
-
-  .coach-prompt-grid {
-    @apply mt-7 grid gap-2 sm:grid-cols-3;
-  }
-
-  .coach-message {
-    @apply flex;
-  }
-
-  .coach-message-user {
-    @apply justify-end;
-  }
-
-  .coach-message-assistant {
-    @apply justify-start;
-  }
-
-  .coach-message-bubble {
-    @apply max-w-[840px] rounded-[34px] border px-5 py-4 shadow-sm;
-    background: rgba(255, 255, 255, 0.82);
-    border-color: color-mix(in srgb, var(--outline-variant) 58%, transparent);
-    backdrop-filter: blur(18px);
-  }
-
-  .coach-message-user .coach-message-bubble {
-    background: #ececec;
-    border-color: transparent;
-  }
-
-  .coach-message-user .coach-message-bubble,
-  .coach-message-user .coach-message-bubble * {
-    color: var(--text) !important;
-  }
-
-  .thinking-slider {
-    @apply w-full overflow-hidden rounded-full border px-3 py-2 text-sm font-medium;
-    background: rgba(255, 255, 255, 0.72);
-    border-color: transparent;
-    color: var(--muted);
-  }
-
-  .thinking-slider-active {
-    border-color: color-mix(in srgb, var(--primary) 42%, var(--outline-variant));
-  }
-
-  .thinking-slider-track {
-    @apply block overflow-hidden whitespace-nowrap;
-    mask-image: linear-gradient(90deg, transparent, black 18%, black 82%, transparent);
-  }
-
-  .thinking-slider-track span {
-    @apply inline-block;
-    padding-left: 100%;
-    animation: thinking-slide 3.2s linear infinite;
-  }
-
-  .thinking-trace {
-    @apply mt-2 max-h-56 overflow-auto rounded-3xl border p-4 text-xs leading-5 whitespace-pre-wrap;
-    background: rgba(255, 255, 255, 0.72);
-    border-color: color-mix(in srgb, var(--outline-variant) 58%, transparent);
-    color: var(--muted);
-  }
-
-  .coach-composer {
-    @apply absolute inset-x-4 bottom-4 z-10 mx-auto flex max-w-4xl items-center gap-3 rounded-full border p-3 sm:bottom-7;
-    background: rgba(255, 255, 255, 0.94);
-    border-color: color-mix(in srgb, var(--outline-variant) 68%, transparent);
-    box-shadow: 0 18px 50px rgba(74, 102, 122, 0.18);
-    backdrop-filter: blur(18px);
-  }
-
-  .coach-input {
-    @apply min-h-12 flex-1 rounded-full border-0 px-2 text-lg shadow-none transition;
-    background: transparent;
-    color: var(--text);
-  }
-
-  .coach-input:focus {
-    box-shadow: none;
-  }
-
-  .composer-icon-button,
-  .composer-send-button {
-    @apply grid h-12 w-12 shrink-0 place-items-center rounded-full transition disabled:cursor-not-allowed disabled:opacity-45;
-    color: var(--text);
-  }
-
-  .composer-icon-button:hover {
-    background: var(--surface-container-high);
-  }
-
-  .composer-send-button {
-    background: #97cbf5;
-    color: #10283a;
-  }
-
-  .composer-send-button:hover:not(:disabled) {
-    filter: brightness(0.98);
-  }
-
-  .composer-stop-button {
-    background: var(--surface-container-high);
-    color: var(--text);
-  }
-
-  .coach-unlock-card {
-    @apply mt-8 flex w-full max-w-xl flex-col gap-3 rounded-full border p-3 sm:flex-row;
-    background: rgba(255, 255, 255, 0.94);
-    border-color: color-mix(in srgb, var(--outline-variant) 68%, transparent);
-    box-shadow: var(--elevation-2);
-  }
-
-  @media (min-width: 1280px) {
-    .coach-gemini-shell {
-      grid-template-columns: 340px minmax(0, 1fr);
-    }
-  }
-
-  .can-emblem {
-    @apply flex h-11 w-11 items-center justify-center rounded-lg border text-[#193042] shadow-cyan;
-    background: linear-gradient(135deg, var(--accent), #ffffff 58%, var(--accent-warm));
-    border-color: color-mix(in srgb, var(--accent-strong) 35%, white);
-  }
-
-  .command-button {
-    @apply inline-flex min-h-11 items-center justify-center gap-2 rounded-md border bg-white px-4 py-2 font-display text-sm font-semibold shadow-sm transition active:scale-[0.99];
-    border-color: var(--border);
-    color: var(--text);
-  }
-
-  .primary-button {
-    @apply inline-flex min-h-11 items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-semibold text-[#193042] shadow-cyan transition disabled:cursor-not-allowed;
-    background: var(--accent);
-    border-color: color-mix(in srgb, var(--accent-strong) 42%, white);
-  }
-
-  .secondary-button {
-    @apply inline-flex min-h-11 items-center justify-center gap-2 rounded-md border bg-white px-4 py-2 text-sm font-semibold shadow-sm transition disabled:cursor-not-allowed;
-    border-color: var(--border);
-    color: var(--text);
-  }
-
-  .excel-button {
-    @apply inline-flex min-h-11 items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-semibold text-[#193042] shadow-cyan transition hover:brightness-105 disabled:cursor-not-allowed;
-    background: linear-gradient(135deg, #ffe1ef, var(--accent));
-    border-color: color-mix(in srgb, var(--accent-strong) 35%, white);
-  }
-
-  .danger-button {
-    @apply inline-flex min-h-11 items-center justify-center gap-2 rounded-md border border-red-300 bg-red-500/90 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-red-400 disabled:cursor-not-allowed disabled:border-slate-300 disabled:bg-slate-200 disabled:text-slate-500;
-  }
-
-  .nav-item {
-    @apply flex min-h-11 items-center gap-3 rounded-md px-3 text-sm font-medium transition;
-    color: var(--muted);
-  }
-
-  .nav-item-active {
-    @apply shadow-cyan;
-    background: var(--accent);
-    color: var(--text) !important;
-  }
-
-  .icon-button {
-    @apply inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-md border bg-white shadow-sm transition;
-    border-color: var(--border);
-    color: var(--text);
-  }
-
-  .quick-add {
-    @apply inline-flex min-h-12 items-center gap-2 rounded-md border bg-white px-3 font-display text-sm font-semibold shadow-sm transition hover:border-[var(--accent)];
-    color: var(--text);
-    border-color: var(--border);
-  }
-
-  .field-label {
-    @apply grid gap-2 text-sm font-medium;
-    color: var(--muted);
-  }
-
-  .field-control {
-    @apply w-full rounded-md border bg-white px-3 py-3 text-base font-normal shadow-sm transition;
-    border-color: var(--border);
-    color: var(--text);
-  }
-
-  .modal-panel {
-    @apply max-h-[92vh] w-full max-w-3xl overflow-y-auto rounded-lg border bg-white/95 p-5 shadow-fridge backdrop-blur-2xl sm:p-6;
-    border-color: var(--border);
-  }
-
-  .entry-row {
-    @apply grid gap-3 rounded-lg border bg-white/80 p-4 transition sm:grid-cols-[1fr_auto] sm:items-center;
-    border-color: var(--border);
-  }
-
-  .list-button {
-    @apply flex min-h-11 items-center justify-between rounded-lg border bg-white px-3 text-sm font-semibold transition;
-    border-color: var(--border);
-    color: var(--accent-strong);
-  }
-
-  .status-card {
-    @apply flex items-center gap-2 rounded-md border px-3 py-2 text-sm shadow-sm backdrop-blur-xl;
-  }
-
-  .theme-indicator {
-    @apply inline-flex min-h-11 items-center gap-2 rounded-full border px-3 text-sm font-semibold transition;
-    background: var(--surface-container-high);
-    border-color: var(--outline-variant);
-    color: var(--text);
-  }
-
-  .theme-indicator:hover {
-    background: var(--primary-container);
-    color: var(--on-primary-container);
-  }
-
-  .theme-indicator-swatch {
-    @apply h-4 w-4 rounded-full border border-white shadow-sm;
-  }
-
-  .theme-indicator-label {
-    @apply max-w-[9rem] truncate;
-  }
-
-  .settings-section {
-    @apply grid gap-4;
-  }
-
-  .settings-tabs {
-    @apply inline-flex flex-wrap gap-1 rounded-full border p-1;
-    background: var(--surface-container-high);
-    border-color: var(--outline-variant);
-  }
-
-  .settings-tabs button {
-    @apply rounded-full px-4 py-2 text-sm font-semibold transition;
-    color: var(--muted);
-  }
-
-  .settings-tabs button:hover,
-  .settings-tab-active {
-    background: var(--primary-container);
-    color: var(--on-primary-container) !important;
-  }
-
-  .theme-preview-strip {
-    @apply flex flex-wrap gap-2;
-  }
-
-  .theme-preview-chip {
-    color: var(--text);
-  }
-
-  .theme-picker-grid {
-    @apply grid gap-3 sm:grid-cols-2 lg:grid-cols-3;
-  }
-
-  .theme-tile {
-    @apply flex min-h-[4.5rem] items-center gap-3 rounded-xl border px-3 py-3 text-left transition;
-    background: var(--surface-container);
-    border-color: var(--outline-variant);
-    color: var(--text);
-  }
-
-  .theme-tile:hover {
-    box-shadow: var(--elevation-1);
-    border-color: var(--outline);
-  }
-
-  .theme-tile-active {
-    border-color: var(--primary);
-    box-shadow: var(--elevation-1);
-    background: var(--primary-container);
-    color: var(--on-primary-container);
-  }
-
-  .theme-tile-swatch {
-    @apply h-10 w-10 shrink-0 rounded-full border border-white shadow-sm;
-  }
-
-  .theme-tile-label {
-    @apply text-sm font-semibold leading-5;
-  }
-}
-
 .app-shell {
-  --primary: #4b86ad;
-  --on-primary: #ffffff;
-  --primary-container: #dff2ff;
-  --on-primary-container: #10283a;
-  --secondary: #647887;
-  --on-secondary: #ffffff;
-  --secondary-container: #ecf3f7;
-  --on-secondary-container: #1f2d35;
-  --tertiary: #9b7b51;
-  --on-tertiary: #ffffff;
-  --tertiary-container: #f4eadb;
-  --on-tertiary-container: #332313;
-  --error: #ba1a1a;
-  --on-error: #ffffff;
-  --error-container: #ffdad6;
-  --on-error-container: #410002;
-  --bg: #f8fbff;
-  --surface: #f8fbff;
-  --surface-container-lowest: #ffffff;
-  --surface-container-low: #f1f7fb;
-  --surface-container: #edf3f7;
-  --surface-container-high: #e7eef3;
-  --panel: var(--surface-container);
-  --panel-strong: var(--surface-container-lowest);
-  --outline: #7c8992;
-  --outline-variant: #dce5ea;
-  --text: #1f252a;
-  --muted: #68747c;
-  --subtle: #839099;
-  --accent: var(--primary-container);
-  --accent-soft: var(--surface-container-low);
-  --accent-strong: var(--primary);
-  --accent-warm: #eef4f7;
-  --chart-primary: #4b86ad;
-  --chart-secondary: #6f8f7c;
-  --chart-tertiary: #9b7b51;
-  --chart-error: #ba1a1a;
-  --chart-grid: rgba(124, 137, 146, 0.18);
-  --elevation-1: 0 12px 34px rgba(69, 91, 108, 0.08), 0 1px 2px rgba(69, 91, 108, 0.06);
-  --elevation-2: 0 18px 44px rgba(69, 91, 108, 0.12), 0 2px 8px rgba(69, 91, 108, 0.08);
   min-height: 100vh;
-  background: var(--bg) !important;
-  color: var(--text) !important;
-  font-family: "Google Sans", "Google Sans Text", "Product Sans", Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
-}
-
-.backdrop-wash {
   background:
-    radial-gradient(circle at 70% 35%, var(--primary-container) 0 18%, transparent 42%),
-    radial-gradient(circle at 12% 12%, var(--surface-container-lowest) 0 18%, transparent 38%),
-    linear-gradient(180deg, var(--bg) 0%, var(--surface-container-lowest) 46%, var(--surface-container-low) 100%);
+    radial-gradient(circle at 78% 12%, color-mix(in srgb, var(--primary-container, #dbe9ff) 42%, transparent), transparent 32rem),
+    #eef3fb !important;
+  color: #202124 !important;
 }
 
-.backdrop-grid {
-  background-image:
-    linear-gradient(var(--chart-grid) 1px, transparent 1px),
-    linear-gradient(90deg, var(--chart-grid) 1px, transparent 1px);
-  background-size: 48px 48px;
-  opacity: 0;
+.app-layout {
+  display: grid;
+  width: 100%;
+  max-width: 1580px;
+  gap: 18px;
+  margin: 0 auto;
+  padding: 8px 12px calc(108px + env(safe-area-inset-bottom, 0px));
 }
 
+.app-content,
+.app-main {
+  min-width: 0;
+}
+
+.app-main {
+  max-width: 1050px;
+  margin: 10px auto 0;
+}
+
+.material-drawer {
+  position: sticky;
+  top: 12px;
+  display: none;
+  height: calc(100vh - 24px);
+  flex-direction: column;
+  gap: 22px;
+  padding: 24px 10px;
+  background: transparent;
+  border: 0;
+}
+
+.drawer-brand,
+.top-title-cluster,
+.account-card {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  min-width: 0;
+}
+
+.can-emblem,
+.top-app-icon {
+  display: grid;
+  width: 48px;
+  height: 48px;
+  flex: 0 0 auto;
+  place-items: center;
+  color: var(--primary, #2563c7);
+  background: color-mix(in srgb, var(--primary-container, #dbe9ff) 82%, #ffffff);
+  border-radius: 18px;
+}
+
+.drawer-primary-action,
+.primary-button,
+.secondary-button,
+.danger-button,
+.excel-button,
+.list-button,
+.icon-button,
+.mobile-nav-item,
+.suggestion-chip,
+.account-pill {
+  display: inline-flex;
+  min-height: 44px;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  padding: 0 18px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1;
+  letter-spacing: 0;
+  transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
+}
+
+.drawer-primary-action {
+  min-height: 58px;
+  width: 100%;
+  font-size: 17px;
+}
+
+.primary-button,
+.drawer-primary-action {
+  color: var(--on-primary, #ffffff);
+  background: var(--primary, #2563c7);
+  box-shadow: 0 10px 24px color-mix(in srgb, var(--primary, #2563c7) 22%, transparent);
+}
+
+.primary-button:hover,
+.drawer-primary-action:hover {
+  background: color-mix(in srgb, var(--primary, #2563c7) 90%, #000000);
+}
+
+.secondary-button,
+.excel-button,
+.list-button,
+.icon-button,
+.suggestion-chip,
+.account-pill {
+  color: #202124;
+  background: #ffffff;
+  border-color: #cfd8e6;
+  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.08);
+}
+
+.secondary-button:hover,
+.excel-button:hover,
+.list-button:hover,
+.icon-button:hover,
+.suggestion-chip:hover,
+.account-pill:hover {
+  background: #f7faff;
+  box-shadow: 0 2px 6px rgba(60, 64, 67, 0.12);
+}
+
+.danger-button {
+  color: #9f1c16;
+  background: #fff3f1;
+  border-color: #ffc9c2;
+}
+
+.drawer-nav,
+.drawer-footer {
+  display: grid;
+  gap: 10px;
+}
+
+.drawer-footer {
+  margin-top: auto;
+}
+
+.nav-item {
+  display: flex;
+  min-height: 56px;
+  width: 100%;
+  align-items: center;
+  gap: 12px;
+  padding: 6px 12px 6px 6px;
+  color: #3c4043;
+  background: transparent;
+  border: 0;
+  border-radius: 999px;
+  font-size: 15px;
+  font-weight: 500;
+  text-align: left;
+}
+
+.nav-item:hover {
+  background: rgba(32, 33, 36, 0.04);
+}
+
+.nav-item-active {
+  color: #174ea6;
+  background: color-mix(in srgb, var(--primary-container, #dbe9ff) 92%, #ffffff);
+}
+
+.nav-icon-dot {
+  display: grid;
+  width: 44px;
+  height: 44px;
+  flex: 0 0 auto;
+  place-items: center;
+  color: #174ea6;
+  background: #d2e3fc;
+  border-radius: 999px;
+}
+
+.nav-icon-dot-1 {
+  color: #0d652d;
+  background: #ceead6;
+}
+
+.nav-icon-dot-2 {
+  color: #0b57d0;
+  background: #c2e7ff;
+}
+
+.nav-icon-dot-3 {
+  color: #8430ce;
+  background: #e9d2fd;
+}
+
+.nav-item-active .nav-icon-dot {
+  color: #ffffff;
+  background: var(--primary, #2563c7);
+}
+
+.drawer-info-card,
+.glass-panel,
+.auth-panel,
+.app-card,
+.modal-panel {
+  background: rgba(255, 255, 255, 0.94);
+  border: 1px solid #d8e1ee;
+  border-radius: 22px;
+  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.08), 0 10px 30px rgba(60, 64, 67, 0.06);
+}
+
+.drawer-info-card {
+  padding: 16px;
+}
+
+.account-pill {
+  width: 100%;
+  min-height: 52px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.mobile-nav-bar {
+  position: fixed;
+  right: 12px;
+  bottom: 12px;
+  left: 12px;
+  z-index: 40;
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 5px;
+  padding: 6px;
+  padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
+  background: rgba(255, 255, 255, 0.96);
+  border: 1px solid #d8e1ee;
+  border-radius: 24px;
+  box-shadow: 0 12px 34px rgba(60, 64, 67, 0.16);
+}
+
+.mobile-nav-item {
+  min-height: 54px;
+  flex-direction: column;
+  gap: 4px;
+  color: #5f6670;
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+  font-size: 11px;
+}
+
+.mobile-nav-item-active {
+  color: var(--primary, #2563c7);
+  background: var(--primary-container, #dbe9ff);
+}
+
+.top-app-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 8px 2px 12px;
+  background: transparent;
+  border: 0;
+}
+
+.top-app-bar-main,
+.top-action-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.top-app-bar-main {
+  flex: 1 1 auto;
+}
+
+.top-action-row {
+  flex: 0 0 auto;
+  margin-top: 0;
+}
+
+.top-action-button {
+  min-height: 44px;
+}
+
+.top-action-label {
+  white-space: nowrap;
+}
+
+.top-kicker {
+  color: #5f6670;
+  font-size: 13px;
+}
+
+.top-title {
+  margin-top: 2px;
+  color: #202124;
+  font-size: clamp(22px, 3vw, 31px);
+  font-weight: 500;
+  line-height: 1.12;
+  letter-spacing: 0;
+}
+
+.home-hero {
+  display: grid;
+  justify-items: center;
+  gap: 12px;
+  padding: 12px 8px 18px;
+  text-align: center;
+}
+
+.hero-action-row {
+  display: grid;
+  width: min(680px, 100%);
+  gap: 10px;
+}
+
+.hero-scan-button {
+  width: 100%;
+  min-height: 52px;
+  justify-content: flex-start;
+  padding: 0 24px;
+  font-size: 17px;
+  border-radius: 999px;
+}
+
+.hero-icon-row {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 26px;
+  margin-bottom: 4px;
+}
+
+.hero-icon-row span {
+  display: grid;
+  width: 54px;
+  height: 54px;
+  place-items: center;
+  color: #ffffff;
+  background: var(--primary, #2563c7);
+  border-radius: 18px;
+  box-shadow: 0 10px 22px color-mix(in srgb, var(--primary, #2563c7) 18%, transparent);
+}
+
+.hero-icon-row span:nth-child(2) {
+  background: #0f9d58;
+}
+
+.hero-icon-row span:nth-child(3) {
+  background: #fbbc04;
+  color: #392600;
+}
+
+.hero-icon-row span:nth-child(4) {
+  background: #a142f4;
+}
+
+.hero-avatar,
+.account-avatar {
+  display: grid;
+  place-items: center;
+  color: #ffffff;
+  background: #6f9f42;
+  border-radius: 999px;
+}
+
+.hero-avatar {
+  width: 96px;
+  height: 96px;
+  border: 4px solid #ffffff;
+  font-size: 42px;
+  font-weight: 500;
+  box-shadow: 0 12px 32px rgba(60, 64, 67, 0.16);
+}
+
+.account-avatar {
+  width: 54px;
+  height: 54px;
+  flex: 0 0 auto;
+  font-size: 22px;
+  font-weight: 500;
+}
+
+.hero-kicker {
+  color: var(--primary, #2563c7);
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.hero-name {
+  color: #202124;
+  font-size: clamp(36px, 5vw, 56px);
+  font-weight: 500;
+  line-height: 1.04;
+  letter-spacing: 0;
+}
+
+.hero-copy {
+  max-width: 620px;
+  color: #5f6670;
+  font-size: 16px;
+  line-height: 1.55;
+}
+
+.hero-search-button {
+  display: flex;
+  width: min(680px, 100%);
+  min-height: 64px;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 14px;
+  padding: 0 24px;
+  color: #3c4043;
+  background: #ffffff;
+  border: 0;
+  border-radius: 999px;
+  box-shadow: 0 3px 10px rgba(60, 64, 67, 0.12), 0 1px 2px rgba(60, 64, 67, 0.08);
+  font-size: 18px;
+  font-weight: 400;
+}
+
+.hero-search-button svg {
+  color: #202124;
+}
+
+.hero-stat-row {
+  display: grid;
+  width: min(760px, 100%);
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.overview-metrics-grid {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.overview-charts-grid {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.overview-insights-grid {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.chart-shell {
+  width: 100%;
+}
+
+.chart-shell--area {
+  height: 220px;
+}
+
+.chart-shell--pie {
+  height: 240px;
+}
+
+.today-panel-metrics {
+  display: grid;
+  gap: 8px;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.today-action-row .primary-button,
+.today-action-row .secondary-button {
+  flex: 1 1 140px;
+}
+
+.status-card {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  min-height: 42px;
+  padding: 10px 14px;
+  border: 1px solid #d8e1ee;
+  border-radius: 18px;
+  background: #ffffff;
+  color: #202124;
+}
+
+.summary-panel,
+.can-panel {
+  background: #ffffff;
+}
+
+.today-panel {
+  border: 1px solid #d8e1ee;
+  border-radius: 26px;
+  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.08), 0 12px 28px rgba(60, 64, 67, 0.07);
+}
+
+.section-kicker {
+  color: var(--primary, #2563c7);
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+.section-meta,
+.today-limit-summary {
+  color: #5f6670;
+  font-size: 14px;
+}
+
+.today-stat-value {
+  color: #202124;
+  font-size: clamp(3.5rem, 8vw, 5rem);
+  font-weight: 500;
+  line-height: 1;
+  letter-spacing: 0;
+}
+
+.today-stat-label {
+  color: #5f6670;
+  font-size: 18px;
+}
+
+.metric-tile {
+  padding: 16px;
+}
+
+.metric-tile-label,
+.app-card-subtitle,
+.insight-card-label {
+  color: #5f6670;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.metric-tile-value,
+.app-card-title,
+.insight-card-value,
+.empty-state-title {
+  color: #202124;
+  font-weight: 500;
+}
+
+.metric-tile-value {
+  margin-top: 10px;
+  font-size: 1.875rem;
+  line-height: 1.1;
+}
+
+.metric-tile-detail,
+.insight-card-detail,
+.empty-state-copy {
+  color: #5f6670;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.metric-tile-icon {
+  display: flex;
+  width: 40px;
+  height: 40px;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  background: color-mix(in srgb, var(--primary-container, #dbe9ff) 82%, #ffffff);
+  border: 1px solid #d8e1ee;
+  border-radius: 14px;
+}
+
+.mini-metric-card {
+  padding: 12px 14px;
+}
+
+.mini-metric-label {
+  color: #5f6670;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.mini-metric-value {
+  margin-top: 6px;
+  color: #202124;
+  font-size: 1.25rem;
+  font-weight: 500;
+}
+
+.quick-add-button {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 12px 14px;
+  color: #202124;
+  text-align: left;
+  background: #ffffff;
+  border: 1px solid #d8e1ee;
+  border-radius: 18px;
+  transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
+}
+
+.quick-add-button:hover {
+  background: #f7faff;
+  border-color: color-mix(in srgb, var(--primary, #2563c7) 24%, #d8e1ee);
+  box-shadow: 0 2px 8px rgba(60, 64, 67, 0.08);
+}
+
+.quick-add-icon {
+  display: flex;
+  width: 40px;
+  height: 40px;
+  align-items: center;
+  justify-content: center;
+  color: var(--primary, #2563c7);
+  background: color-mix(in srgb, var(--primary-container, #dbe9ff) 82%, #ffffff);
+  border-radius: 14px;
+}
+
+.quick-add-meta {
+  color: #5f6670;
+  font-size: 14px;
+}
+
+.empty-state {
+  display: flex;
+  min-height: 240px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  text-align: center;
+  background: #ffffff;
+  border: 1px dashed #cfd8e6;
+  border-radius: 18px;
+}
+
+.empty-state-icon {
+  display: flex;
+  width: 48px;
+  height: 48px;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 12px;
+  color: var(--primary, #2563c7);
+  background: color-mix(in srgb, var(--primary-container, #dbe9ff) 82%, #ffffff);
+  border-radius: 14px;
+}
+
+.empty-state-title {
+  font-size: 1.25rem;
+}
+
+.limit-alert {
+  padding: 16px 20px;
+  background: #fff8e8;
+  border: 1px solid #f9e3b0;
+  border-radius: 22px;
+}
+
+.limit-alert-title {
+  color: #7a4e00;
+  font-weight: 500;
+}
+
+.limit-alert-copy {
+  color: #5f6670;
+  font-size: 14px;
+  line-height: 1.55;
+}
+
+.source-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 8px;
+  color: #174ea6;
+  font-size: 12px;
+  font-weight: 500;
+  background: color-mix(in srgb, var(--primary-container, #dbe9ff) 92%, #ffffff);
+  border-radius: 999px;
+}
+
+.entry-chip {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 8px;
+  color: #5f6670;
+  font-size: 12px;
+  font-weight: 500;
+  background: #edf2fa;
+  border-radius: 999px;
+}
+
+.entry-title,
+.mini-entry-title {
+  color: #202124;
+  font-size: 1.125rem;
+  font-weight: 500;
+}
+
+.entry-meta,
+.mini-entry-meta {
+  color: #5f6670;
+  font-size: 14px;
+}
+
+.entry-summary {
+  color: #3c4043;
+  font-size: 14px;
+}
+
+.mini-entry-card {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 14px;
+  background: #ffffff;
+  border: 1px solid #d8e1ee;
+  border-radius: 18px;
+}
+
+.mini-entry-price {
+  color: #202124;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.auth-panel-shell {
+  width: 100%;
+  max-width: 24rem;
+}
+
+.auth-panel-card {
+  padding: 24px;
+  background: #ffffff;
+  border: 1px solid #d8e1ee;
+  border-radius: 22px;
+  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.08), 0 12px 28px rgba(60, 64, 67, 0.08);
+}
+
+.auth-mode-toggle {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 4px;
+  padding: 4px;
+  background: #edf2fa;
+  border: 1px solid #d8e1ee;
+  border-radius: 999px;
+}
+
+.auth-mode-toggle button {
+  min-height: 36px;
+  border: 0;
+  border-radius: 999px;
+  color: #5f6670;
+  background: transparent;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.auth-mode-toggle button.auth-mode-active {
+  color: #202124;
+  background: #ffffff;
+  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.12);
+}
+
+.forecast-stat {
+  padding: 16px;
+  background: #ffffff;
+  border: 1px solid #d8e1ee;
+  border-radius: 18px;
+}
+
+.forecast-stat-label {
+  display: block;
+  color: #5f6670;
+  font-size: 10px;
+  font-weight: 500;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.forecast-stat-value {
+  margin-top: 4px;
+  color: #202124;
+  font-size: 1.5rem;
+  font-weight: 500;
+}
+
+.forecast-stat-note {
+  display: block;
+  margin-top: 4px;
+  color: #5f6670;
+  font-size: 10px;
+  font-weight: 500;
+}
+
+.forecast-stat--positive .forecast-stat-value {
+  color: #0d652d;
+}
+
+.forecast-stat--positive .forecast-stat-label,
+.forecast-stat--positive .forecast-stat-note {
+  color: #0d652d;
+}
+
+.forecast-chart-wrap {
+  padding: 8px;
+  background: #ffffff;
+  border: 1px solid #d8e1ee;
+  border-radius: 18px;
+}
+
+.wellness-pill,
+.limit-row,
+.mini-entry,
+.entry-row,
+.metric-soft,
+.quick-add-item {
+  background: #ffffff;
+  border: 1px solid #d8e1ee;
+  border-radius: 18px;
+}
+
+.wellness-pill,
+.metric-soft {
+  padding: 14px;
+}
+
+.wellness-pill span,
+.limit-row-head span {
+  color: #5f6670;
+  font-size: 12px;
+}
+
+.wellness-pill strong,
+.limit-row-head strong {
+  display: block;
+  margin-top: 5px;
+  color: #202124;
+  font-size: 17px;
+  font-weight: 500;
+}
+
+.limit-row {
+  padding: 14px;
+}
+
+.limit-row-head {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.limit-progress {
+  height: 9px;
+  margin-top: 12px;
+  overflow: hidden;
+  background: #e8edf5;
+  border-radius: 999px;
+}
+
+.limit-progress-fill {
+  height: 100%;
+  background: var(--primary, #2563c7);
+}
+
+.limit-row--warn .limit-progress-fill {
+  background: #b06000;
+}
+
+.limit-row--over .limit-progress-fill {
+  background: #b3261e;
+}
+
+.limit-row-value {
+  margin-top: 8px;
+  color: #5f6670;
+  font-size: 13px;
+}
+
+.field-label {
+  display: grid;
+  gap: 8px;
+  color: #5f6670;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.field-control,
+.field-input {
+  width: 100%;
+  min-height: 46px;
+  padding: 10px 13px;
+  color: #202124;
+  background: #ffffff;
+  border: 1px solid #cfd8e6;
+  border-radius: 14px;
+}
+
+.field-control::placeholder,
+.field-input::placeholder {
+  color: #80868b;
+}
+
+.entry-row {
+  display: grid;
+  gap: 12px;
+  padding: 16px;
+}
+
+.mini-entry {
+  padding: 12px 14px;
+}
+
+.modal-panel {
+  width: min(920px, 100%);
+  max-height: min(92dvh, 980px);
+  overflow: auto;
+  padding: 18px;
+  -webkit-overflow-scrolling: touch;
+}
+
+.modal-backdrop {
+  align-items: flex-end;
+  padding: 0;
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+}
+
+.modal-backdrop .modal-panel {
+  width: 100%;
+  max-height: min(92dvh, 980px);
+  border-radius: 22px 22px 0 0;
+}
+
+.logbook-layout {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.quick-add-grid {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.settings-section,
+.theme-preview-strip,
+.theme-picker-grid {
+  display: grid;
+  gap: 12px;
+}
+
+.theme-preview-strip,
+.theme-picker-grid {
+  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
+}
+
+.theme-tile {
+  display: flex;
+  min-height: 52px;
+  align-items: center;
+  gap: 11px;
+  padding: 11px 13px;
+  color: #202124;
+  background: #ffffff;
+  border: 1px solid #d8e1ee;
+  border-radius: 18px;
+}
+
+.theme-tile-active {
+  border-color: var(--primary, #2563c7);
+  box-shadow: inset 0 0 0 1px var(--primary, #2563c7);
+}
+
+.theme-tile-swatch,
+.theme-indicator-swatch {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  flex: 0 0 auto;
+  border: 1px solid rgba(60, 64, 67, 0.2);
+  border-radius: 50%;
+}
+
+.theme-indicator {
+  display: inline-flex;
+  min-height: 38px;
+  align-items: center;
+  gap: 8px;
+  padding: 0 12px;
+  color: #202124;
+  background: #ffffff;
+  border: 1px solid #d8e1ee;
+  border-radius: 999px;
+}
+
+.segmented-control {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 4px;
+  padding: 4px;
+  background: #edf2fa;
+  border: 1px solid #d8e1ee;
+  border-radius: 999px;
+}
+
+.segmented-control button {
+  min-height: 34px;
+  border: 0;
+  border-radius: 999px;
+  color: #5f6670;
+  background: transparent;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.segmented-control .segmented-control-active {
+  color: #ffffff;
+  background: var(--primary, #2563c7);
+}
+
+.chart-tooltip {
+  padding: 10px 12px;
+  background: #ffffff;
+  border: 1px solid #d8e1ee;
+  border-radius: 16px;
+  box-shadow: 0 12px 28px rgba(60, 64, 67, 0.14);
+}
+
+.backdrop-wash,
+.backdrop-grid,
 .backdrop-rail {
-  background: linear-gradient(90deg, var(--accent), #ffffff, var(--accent-warm), var(--accent));
+  display: none;
+}
+
+.deploy-legal {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+  padding: 20px;
+  color: #5f6670;
+  font-size: 13px;
+}
+
+.deploy-legal a {
+  color: inherit;
+  text-decoration: underline;
+}
+
+.app-shell .font-black,
+.app-shell .font-bold {
+  font-weight: 600 !important;
+}
+
+.app-shell .font-semibold {
+  font-weight: 500 !important;
+}
+
+.app-shell .tracking-tight {
+  letter-spacing: 0 !important;
 }
 
 .app-shell .text-white,
-.app-shell .text-slate-50,
-.app-shell .text-slate-100,
-.app-shell .text-slate-200 {
-  color: var(--text) !important;
+.app-shell .text-cyan-50,
+.app-shell .text-cyan-100,
+.app-shell .text-cyan-200,
+.app-shell .text-pink-100,
+.app-shell .text-emerald-400,
+.app-shell .text-teal-300,
+.app-shell [class*="text-cyan-"],
+.app-shell [class*="text-teal-"] {
+  color: #202124 !important;
+}
+
+.app-shell .text-slate-100,
+.app-shell .text-slate-200,
+.app-shell .text-slate-300 {
+  color: #3c4043 !important;
 }
 
-.app-shell .text-slate-300,
 .app-shell .text-slate-400,
 .app-shell .text-slate-500,
 .app-shell .text-slate-600 {
-  color: var(--muted) !important;
+  color: #5f6670 !important;
 }
 
-.app-shell .text-cyan-50,
-.app-shell .text-cyan-100,
-.app-shell .text-cyan-200 {
-  color: var(--accent-strong) !important;
-}
-
-.app-shell .text-emerald-200 {
-  color: #16845c !important;
-}
-
-.app-shell .text-amber-100,
-.app-shell .text-amber-200 {
-  color: #8a5a00 !important;
-}
-
-.app-shell .text-red-100,
-.app-shell .text-red-200 {
-  color: #b4233c !important;
-}
-
-.app-shell .text-\[\#07101f\] {
-  color: var(--text) !important;
-}
-
-.app-shell .bg-\[\#050711\],
-.app-shell .bg-\[\#090f22\]\/90,
-.app-shell .bg-\[\#0d142c\],
-.app-shell .bg-\[\#080d1f\]\/95,
-.app-shell .bg-\[\#070d1f\]\/90 {
-  background: var(--panel-strong) !important;
-}
-
-.app-shell .bg-cyan-300,
-.app-shell .bg-cyan-200,
-.app-shell .bg-cyan-300\/10,
-.app-shell .bg-cyan-200\/10 {
-  background-color: var(--accent) !important;
-}
-
-.app-shell .bg-pink-200,
-.app-shell .bg-pink-200\/10 {
-  background-color: var(--accent-soft) !important;
-}
-
-.app-shell .bg-white\/5,
+.app-shell .bg-white\/\[0\.01\],
+.app-shell .bg-white\/\[0\.02\],
+.app-shell .bg-white\/\[0\.04\],
 .app-shell .bg-white\/\[0\.05\],
 .app-shell .bg-white\/\[0\.06\],
-.app-shell .bg-white\/\[0\.08\],
-.app-shell .bg-white\/10,
 .app-shell .bg-white\/\[0\.10\],
-.app-shell .hover\:bg-white\/10:hover,
-.app-shell .hover\:bg-white\/\[0\.10\]:hover,
-.app-shell .hover\:bg-white\/\[0\.12\]:hover {
-  background-color: color-mix(in srgb, var(--accent-soft) 52%, white) !important;
+.app-shell .bg-black\/20,
+.app-shell .bg-emerald-500\/5,
+.app-shell .bg-gradient-to-tr {
+  background: #ffffff !important;
 }
 
+.app-shell .border-white\/5,
 .app-shell .border-white\/10,
 .app-shell .border-cyan-200\/20,
-.app-shell .border-cyan-200\/25,
 .app-shell .border-cyan-200\/30,
-.app-shell .border-cyan-300\/30,
 .app-shell .border-pink-200\/30,
-.app-shell .border-pink-200\/40 {
-  border-color: var(--border) !important;
+.app-shell .border-emerald-500\/10,
+.app-shell .border-emerald-500\/20 {
+  border-color: #d8e1ee !important;
 }
 
-.app-shell .shadow-fridge,
-.app-shell .shadow-cyan,
-.app-shell .shadow-sm {
-  box-shadow: 0 18px 55px rgba(83, 139, 174, 0.14), 0 1px 2px rgba(83, 139, 174, 0.10) !important;
-}
+@media (min-width: 480px) {
+  .app-layout {
+    padding-left: 16px;
+    padding-right: 16px;
+  }
 
-.app-shell .danger-button,
-.app-shell .danger-button * {
-  color: #ffffff !important;
-}
+  .home-hero {
+    padding: 16px 12px 22px;
+    gap: 14px;
+  }
 
-.app-shell .field-control::placeholder {
-  color: color-mix(in srgb, var(--muted) 58%, white);
-}
+  .hero-action-row {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
 
-.app-shell .modal-panel {
-  color: var(--text);
-}
-
-@keyframes thinking-slide {
-  to {
-    transform: translateX(-100%);
+  .hero-search-button,
+  .hero-scan-button {
+    min-height: 56px;
+  }
+}
+
+@media (min-width: 640px) {
+  .hero-stat-row {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 10px;
+  }
+
+  .today-panel-metrics {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .today-action-row {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .chart-shell--area {
+    height: 260px;
+  }
+
+  .chart-shell--pie {
+    height: 280px;
+  }
+
+  .overview-insights-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .modal-panel {
+    padding: 22px;
+  }
+
+  .modal-backdrop {
+    align-items: center;
+    padding: 16px;
+    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
+  }
+
+  .modal-backdrop .modal-panel {
+    width: min(920px, 100%);
+    border-radius: 22px;
+  }
+
+  .quick-add-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 768px) {
+  .app-layout {
+    padding: 14px 20px calc(112px + env(safe-area-inset-bottom, 0px));
+  }
+
+  .home-hero {
+    padding: clamp(20px, 3vw, 40px) 16px 24px;
+  }
+
+  .overview-metrics-grid {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  .overview-charts-grid {
+    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
+    align-items: start;
+  }
+
+  .overview-insights-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .chart-shell--area {
+    height: 280px;
+  }
+
+  .today-stat-value {
+    font-size: clamp(3rem, 6vw, 5rem);
+  }
+
+  .logbook-layout {
+    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
+    align-items: start;
+  }
+}
+
+@media (min-width: 1024px) {
+  .app-layout {
+    grid-template-columns: 286px minmax(0, 1fr);
+    gap: 30px;
+    padding: 18px 26px 26px;
+  }
+
+  .material-drawer {
+    display: flex;
+  }
+
+  .mobile-nav-bar {
+    display: none;
+  }
+
+  .app-main {
+    margin-top: 6px;
+  }
+
+  .top-app-bar--overview {
+    display: flex;
+  }
+}
+
+@media (max-width: 1023px) {
+  .top-app-bar--overview {
+    display: none;
+  }
+}
+
+@media (max-width: 760px) {
+  .top-app-bar {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 10px;
+  }
+
+  .top-action-row {
+    width: 100%;
+  }
+
+  .top-action-row .top-action-button {
+    flex: 1 1 0;
+    min-width: 0;
+    padding: 0 14px;
+  }
+
+  .top-title {
+    font-size: clamp(20px, 5.5vw, 28px);
+  }
+
+  .top-app-icon {
+    width: 42px;
+    height: 42px;
+    border-radius: 14px;
+  }
+
+  .hero-icon-row {
+    gap: 10px;
+  }
+
+  .hero-icon-row span {
+    width: 40px;
+    height: 40px;
+    border-radius: 14px;
+  }
+
+  .hero-avatar {
+    width: 72px;
+    height: 72px;
+    font-size: 32px;
+  }
+
+  .hero-name {
+    font-size: clamp(28px, 8vw, 40px);
+  }
+
+  .hero-copy {
+    font-size: 15px;
+    line-height: 1.5;
+    padding: 0 4px;
+  }
+
+  .hero-search-button {
+    min-height: 52px;
+    font-size: 16px;
+    padding: 0 18px;
+  }
+
+  .today-panel {
+    padding: 16px;
+  }
+
+  .today-panel-metrics {
+    grid-template-columns: 1fr;
+  }
+
+  .today-action-row {
+    display: grid;
+    grid-template-columns: 1fr;
+  }
+
+  .today-action-row .entry-chip {
+    justify-content: center;
+    text-align: center;
+  }
+
+  .wellness-pill {
+    padding: 12px;
+  }
+
+  .wellness-pill strong {
+    font-size: 15px;
+  }
+
+  .mobile-nav-item {
+    min-height: 48px;
+    font-size: 10px;
+  }
+
+  .segmented-control {
+    width: 100%;
+    max-width: none;
+  }
+
+  .segmented-control button {
+    min-height: 36px;
+    font-size: 11px;
+    padding: 0 4px;
+  }
+}
+
+@media (max-width: 380px) {
+  .hero-icon-row {
+    display: none;
+  }
+
+  .top-action-label {
+    display: none;
+  }
+
+  .top-action-row .top-action-button {
+    min-width: 44px;
+    padding: 0 12px;
+  }
+
+  .mobile-nav-bar {
+    left: 8px;
+    right: 8px;
+    bottom: 8px;
+    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
   }
 }
diff --git a/src/lib/greeting.ts b/src/lib/greeting.ts
index 1615c45..eb7d035 100644
--- a/src/lib/greeting.ts
+++ b/src/lib/greeting.ts
@@ -42,7 +42,7 @@ export function buildDynamicGreeting(input: GreetingInput): GreetingResult {
   if (cans === 0) {
     headline =
       streak > 0
-        ? `${input.name}, nothing logged yet today — ${streak}-day streak still alive.`
+        ? `${input.name}, nothing logged yet today. ${streak}-day streak still alive.`
         : `${input.name}, no Red Bulls logged yet this ${hour < 12 ? "morning" : hour < 17 ? "afternoon" : "evening"}.`;
   } else if (cans === 1) {
     headline = `${input.name}, one Red Bull in so far today.`;
@@ -50,14 +50,14 @@ export function buildDynamicGreeting(input: GreetingInput): GreetingResult {
     if (cans >= input.dailyCanLimit) {
       headline = `${input.name}, you're at your ${input.dailyCanLimit}-can daily limit.`;
     } else if (cans >= input.dailyCanLimit - 1) {
-      headline = `${input.name}, ${cans} Red Bulls today — one under your limit.`;
+      headline = `${input.name}, ${cans} Red Bulls today. One under your limit.`;
     } else {
-      headline = `${input.name}, ${cans} Red Bulls today — steady pace.`;
+      headline = `${input.name}, ${cans} Red Bulls today. Steady pace.`;
     }
   } else if (cans <= 3) {
-    headline = `${input.name}, ${cans} Red Bulls today — steady pace.`;
+    headline = `${input.name}, ${cans} Red Bulls today. Steady pace.`;
   } else {
-    headline = `${input.name}, ${cans} Red Bulls today — worth watching the caffeine curve.`;
+    headline = `${input.name}, ${cans} Red Bulls today. Worth watching the caffeine curve.`;
   }
 
   const flavourLine = favourite
@@ -76,9 +76,9 @@ export function buildDynamicGreeting(input: GreetingInput): GreetingResult {
     (cans > 0 && input.todayCaffeineMg > 0
       ? `~${Math.round(input.todayCaffeineMg)}mg caffeine so far.`
       : hour >= 17 && cans === 0
-        ? "Evening reset — clean slate if you want it."
+        ? "Evening reset. Clean slate if you want it."
         : hour >= 22
-          ? "Late night — pace yourself if you're still going."
+          ? "Late night. Pace yourself if you're still going."
           : "Log an intake to unlock today's signals.");
 
   const limitLine =
