-
Daily limits
-
+
Daily limits
+
Set how many cans you want per day, when to stop, and a spend cap. Limits are optional and stored on your
account.
@@ -37,7 +37,7 @@ export function DailyLimitsCard({ limits, check, onOpenSettings }: DailyLimitsCa
return (
-
Daily limits
+
Daily limits
Red Bull Intake Tracker
+ Red Bull tracker
{step === 1 && (
-
Energy setup
+
setup
Hey {userName || "there"}. Set your baseline.
- 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.
-
1. Visual style
+
theme
- Choose the mood you want to see every day.
+ Choose the app color.
- {THEME_CATEGORIES.map((cat) => {
- const isActive = activeCategory === cat.id;
- return (
- 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}
-
- );
- })}
-
-
- {visibleThemes.map((theme) => {
+ {APP_THEMES.map((theme) => {
const isActive = activeThemeId === theme.id;
return (
-
2. Daily cans
+
daily cans
What is your daily can ceiling?
- 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.
-
3. Daily spend
+
daily spend
Set a daily spend line.
- Useful for catching small purchases before they stack up.
+ Useful if you want a spending line for the day.
-
4. Caffeine curfew
+
time limit
- When should late caffeine stop?
+ When should the app warn you?
- 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.
-
Ready
+
done
This is your tracking profile.
@@ -487,7 +460,7 @@ export function OnboardingScreen({
) : (
)}
-
Minimal setup. Editable later.
+
you can edit this later.
= {
- pink: "oura-mist",
- blue: "oura-mist",
+const OLD_THEME_MAP: Record = {
+ // 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 =