:root,
[data-theme="dark"] {
color-scheme: dark;
--color-bg: #0e1d1b;
--color-surface: #162926;       /* cards, sheets */
--color-surface-2: #1e3531;     /* inputs, subtle areas */
--color-border: #29443f;
--color-text: #e7f6f2;
--color-text-muted: #9cbab3;
--color-primary: #4fd1b8;       /* mint */
--color-primary-strong: #80e2cf;
--color-primary-soft: #1a3f38;
--color-on-primary: #052620;
--color-accent: var(--color-primary);
--color-accent-soft: var(--color-primary-soft);
--color-accent-ink: var(--color-primary-strong);
--color-careful: #f3c266;
--color-careful-soft: #352a14;
--color-overdue: #ff9a8a;
--color-overdue-soft: #45241f;
--color-error: #f0a69f;
--color-error-soft: #3d2624;
--color-good-strong: #80e2cf;
--color-good-soft: #1a3f38;
--color-good: #4fd1b8;
--color-on-good: #052620;
--hero-gradient: var(--color-surface);   /* plain card: no colored glow */
--color-hero-number: #ffffff;
--fill-bg: #4fd1b8;  --fill-ink: #052620;  --fill-muted: #185248;  --fill-chip: #3a9f8c;  --fill-accent: #246e60;
--tone-teal: var(--color-primary);   --tone-teal-soft: var(--color-primary-soft);
--tone-coral: var(--color-primary);  --tone-coral-soft: var(--color-primary-soft);
--tone-gold: var(--color-primary);   --tone-gold-soft: var(--color-primary-soft);
--tone-sky: var(--color-primary);    --tone-sky-soft: var(--color-primary-soft);
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.2);
--shadow-sheet: 0 -8px 32px rgba(0, 0, 0, 0.45);
--backdrop: rgba(0, 0, 0, 0.55);
}
[data-theme="mint"] {
color-scheme: light;
--color-bg: #f4fbf9;
--color-surface: #ffffff;
--color-surface-2: #e8f6f2;
--color-border: #d3ece5;
--color-text: #10302a;
--color-text-muted: #4a6862;
--color-primary: #0b7a6b;
--color-primary-strong: #09665a;
--color-primary-soft: #d5f3ec;
--color-on-primary: #ffffff;
--color-accent: var(--color-primary);
--color-accent-soft: var(--color-primary-soft);
--color-accent-ink: var(--color-primary-strong);
--color-careful: #865600;
--color-careful-soft: #fff1d1;
--color-overdue: #b4352a;
--color-overdue-soft: #fde4e0;
--color-error: #a8352c;
--color-error-soft: #fbe9e7;
--color-good-strong: #09665a;
--color-good-soft: #d5f3ec;
--color-good: #0b7a6b;
--color-on-good: #ffffff;
--hero-gradient: var(--color-surface);   /* plain card: no colored glow */
--color-hero-number: #09584e;
--fill-bg: #09665a;  --fill-ink: #ffffff;  --fill-muted: #c6dcd9;  --fill-chip: #307e74;  --fill-accent: #90bab5;
--tone-teal: var(--color-primary);   --tone-teal-soft: var(--color-primary-soft);
--tone-coral: var(--color-primary);  --tone-coral-soft: var(--color-primary-soft);
--tone-gold: var(--color-primary);   --tone-gold-soft: var(--color-primary-soft);
--tone-sky: var(--color-primary);    --tone-sky-soft: var(--color-primary-soft);
--shadow-card: 0 1px 2px rgba(16, 48, 42, 0.06), 0 4px 16px rgba(16, 48, 42, 0.07);
--shadow-sheet: 0 -8px 32px rgba(16, 48, 42, 0.16);
--backdrop: rgba(10, 30, 26, 0.4);
}
[data-theme="blue"] {
color-scheme: light;
--color-bg: #f4f8fe;
--color-surface: #ffffff;
--color-surface-2: #e6f0fc;
--color-border: #d4e4f6;
--color-text: #12253c;
--color-text-muted: #4b5f77;
--color-primary: #1b6ec2;
--color-primary-strong: #15589c;
--color-primary-soft: #dbeafb;
--color-on-primary: #ffffff;
--color-accent: var(--color-primary);
--color-accent-soft: var(--color-primary-soft);
--color-accent-ink: var(--color-primary-strong);
--color-careful: #8a4f00;
--color-careful-soft: #ffecd6;
--color-overdue: #b4352a;
--color-overdue-soft: #fde4e0;
--color-error: #a8352c;
--color-error-soft: #fbe9e7;
--color-good-strong: #0b6b53;
--color-good-soft: #d8f3ea;
--color-good: #0e7d62;
--color-on-good: #ffffff;
--hero-gradient: var(--color-surface);   /* plain card: no colored glow */
--color-hero-number: #0f4a85;
--fill-bg: #15589c;  --fill-ink: #ffffff;  --fill-muted: #c2d4e5;  --fill-chip: #3f76ae;  --fill-accent: #91b1d0;
--tone-teal: var(--color-primary);   --tone-teal-soft: var(--color-primary-soft);
--tone-coral: var(--color-primary);  --tone-coral-soft: var(--color-primary-soft);
--tone-gold: var(--color-primary);   --tone-gold-soft: var(--color-primary-soft);
--tone-sky: var(--color-primary);    --tone-sky-soft: var(--color-primary-soft);
--shadow-card: 0 1px 2px rgba(18, 37, 60, 0.06), 0 4px 16px rgba(18, 37, 60, 0.07);
--shadow-sheet: 0 -8px 32px rgba(18, 37, 60, 0.16);
--backdrop: rgba(12, 24, 40, 0.4);
}
[data-theme="dark-sky"] {
color-scheme: dark;
--color-bg: #0e1824;
--color-surface: #162434;
--color-surface-2: #1e3045;
--color-border: #2a4058;
--color-text: #e8f1fb;
--color-text-muted: #a2b8cf;
--color-primary: #7fbcf2;
--color-primary-strong: #a9d2f7;
--color-primary-soft: #1b3350;
--color-on-primary: #06213b;
--color-accent: var(--color-primary);
--color-accent-soft: var(--color-primary-soft);
--color-accent-ink: var(--color-primary-strong);
--color-careful: #f3c266;
--color-careful-soft: #352a14;
--color-overdue: #ff9a8a;
--color-overdue-soft: #45241f;
--color-error: #f0a69f;
--color-error-soft: #3d2624;
--color-good-strong: #80e2cf;
--color-good-soft: #1a3f38;
--color-good: #4fd1b8;
--color-on-good: #052620;
--hero-gradient: var(--color-surface);   /* plain card: no colored glow */
--color-hero-number: #ffffff;
--fill-bg: #7fbcf2;  --fill-ink: #06213b;  --fill-muted: #244869;  --fill-chip: #5c8fbd;  --fill-accent: #386186;
--tone-teal: var(--color-primary);   --tone-teal-soft: var(--color-primary-soft);
--tone-coral: var(--color-primary);  --tone-coral-soft: var(--color-primary-soft);
--tone-gold: var(--color-primary);   --tone-gold-soft: var(--color-primary-soft);
--tone-sky: var(--color-primary);    --tone-sky-soft: var(--color-primary-soft);
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.2);
--shadow-sheet: 0 -8px 32px rgba(0, 0, 0, 0.45);
--backdrop: rgba(0, 0, 0, 0.55);
}
[data-theme="dark-blush"] {
color-scheme: dark;
--color-bg: #1b1416;
--color-surface: #261c1f;
--color-surface-2: #322529;
--color-border: #463237;
--color-text: #f8ecef;
--color-text-muted: #c7adb3;
--color-primary: #f2a7c0;       /* rose (a pink, never the coral-red of "overdue") */
--color-primary-strong: #f7c4d5;
--color-primary-soft: #45263a;
--color-on-primary: #3a0f22;
--color-accent: var(--color-primary);
--color-accent-soft: var(--color-primary-soft);
--color-accent-ink: var(--color-primary-strong);
--color-careful: #f3c266;
--color-careful-soft: #352a14;
--color-overdue: #ff9a8a;
--color-overdue-soft: #45241f;
--color-error: #f0a69f;
--color-error-soft: #3d2624;
--color-good-strong: #80e2cf;
--color-good-soft: #1a3f38;
--color-good: #4fd1b8;
--color-on-good: #052620;
--hero-gradient: var(--color-surface);   /* plain card: no colored glow */
--color-hero-number: #ffffff;
--fill-bg: #f2a7c0;  --fill-ink: #3a0f22;  --fill-muted: #6c384d;  --fill-chip: #bd7b92;  --fill-accent: #895066;
--tone-teal: var(--color-primary);   --tone-teal-soft: var(--color-primary-soft);
--tone-coral: var(--color-primary);  --tone-coral-soft: var(--color-primary-soft);
--tone-gold: var(--color-primary);   --tone-gold-soft: var(--color-primary-soft);
--tone-sky: var(--color-primary);    --tone-sky-soft: var(--color-primary-soft);
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.2);
--shadow-sheet: 0 -8px 32px rgba(0, 0, 0, 0.45);
--backdrop: rgba(0, 0, 0, 0.55);
}
[data-theme="blush"] {
color-scheme: light;
--color-bg: #fdf6f8;
--color-surface: #ffffff;
--color-surface-2: #f9e8ee;
--color-border: #f0d5de;
--color-text: #3a1d29;
--color-text-muted: #6d4c58;
--color-primary: #b0396f;       /* deep rose (a pink, never the coral-red of "overdue") */
--color-primary-strong: #932d5c;
--color-primary-soft: #fbe0ec;
--color-on-primary: #ffffff;
--color-accent: var(--color-primary);
--color-accent-soft: var(--color-primary-soft);
--color-accent-ink: var(--color-primary-strong);
--color-careful: #865600;
--color-careful-soft: #fff1d1;
--color-overdue: #b4352a;
--color-overdue-soft: #fde4e0;
--color-error: #a8352c;
--color-error-soft: #fbe9e7;
--color-good-strong: #09665a;
--color-good-soft: #d5f3ec;
--color-good: #0b7a6b;
--color-on-good: #ffffff;
--hero-gradient: var(--color-surface);   /* plain card: no colored glow */
--color-hero-number: #852452;
--fill-bg: #932d5c;  --fill-ink: #ffffff;  --fill-muted: #e2c6d3;  --fill-chip: #aa597e;  --fill-accent: #cc9cb2;
--tone-teal: var(--color-primary);   --tone-teal-soft: var(--color-primary-soft);
--tone-coral: var(--color-primary);  --tone-coral-soft: var(--color-primary-soft);
--tone-gold: var(--color-primary);   --tone-gold-soft: var(--color-primary-soft);
--tone-sky: var(--color-primary);    --tone-sky-soft: var(--color-primary-soft);
--shadow-card: 0 1px 2px rgba(58, 29, 41, 0.06), 0 4px 16px rgba(58, 29, 41, 0.07);
--shadow-sheet: 0 -8px 32px rgba(58, 29, 41, 0.16);
--backdrop: rgba(40, 18, 28, 0.4);
}
[data-theme="dark-peach"] {
color-scheme: dark;
--color-bg: #1c1612;
--color-surface: #281f19;
--color-surface-2: #342820;
--color-border: #4a382c;
--color-text: #faeee6;
--color-text-muted: #cbb2a2;
--color-primary: #ffc38f;
--color-primary-strong: #ffd6b3;
--color-primary-soft: #4a3020;
--color-on-primary: #3a1d06;
--color-accent: var(--color-primary);
--color-accent-soft: var(--color-primary-soft);
--color-accent-ink: var(--color-primary-strong);
--color-careful: #f3c266;
--color-careful-soft: #352a14;
--color-overdue: #ff9a8a;
--color-overdue-soft: #45241f;
--color-error: #f0a69f;
--color-error-soft: #3d2624;
--color-good-strong: #80e2cf;
--color-good-soft: #1a3f38;
--color-good: #4fd1b8;
--color-on-good: #052620;
--hero-gradient: var(--color-surface);   /* plain card: no colored glow */
--color-hero-number: #ffffff;
--fill-bg: #ffc38f;  --fill-ink: #3a1d06;  --fill-muted: #734d2e;  --fill-chip: #c69367;  --fill-accent: #916642;
--tone-teal: var(--color-primary);   --tone-teal-soft: var(--color-primary-soft);
--tone-coral: var(--color-primary);  --tone-coral-soft: var(--color-primary-soft);
--tone-gold: var(--color-primary);   --tone-gold-soft: var(--color-primary-soft);
--tone-sky: var(--color-primary);    --tone-sky-soft: var(--color-primary-soft);
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.2);
--shadow-sheet: 0 -8px 32px rgba(0, 0, 0, 0.45);
--backdrop: rgba(0, 0, 0, 0.55);
}
[data-theme="peach"] {
color-scheme: light;
--color-bg: #fff6ef;
--color-surface: #ffffff;
--color-surface-2: #fde8da;
--color-border: #f3d3bd;
--color-text: #3b2418;
--color-text-muted: #6e4f40;
--color-primary: #a4521c;       /* deep apricot (an orange, never the coral-red of "overdue") */
--color-primary-strong: #864215;
--color-primary-soft: #ffe3d1;
--color-on-primary: #ffffff;
--color-accent: var(--color-primary);
--color-accent-soft: var(--color-primary-soft);
--color-accent-ink: var(--color-primary-strong);
--color-careful: #865600;
--color-careful-soft: #fff1d1;
--color-overdue: #b4352a;
--color-overdue-soft: #fde4e0;
--color-error: #a8352c;
--color-error-soft: #fbe9e7;
--color-good-strong: #09665a;
--color-good-soft: #d5f3ec;
--color-good: #0b7a6b;
--color-on-good: #ffffff;
--hero-gradient: var(--color-surface);   /* plain card: no colored glow */
--color-hero-number: #7c3a10;
--fill-bg: #864215;  --fill-ink: #ffffff;  --fill-muted: #ddcabd;  --fill-chip: #9d6641;  --fill-accent: #c5a48f;
--tone-teal: var(--color-primary);   --tone-teal-soft: var(--color-primary-soft);
--tone-coral: var(--color-primary);  --tone-coral-soft: var(--color-primary-soft);
--tone-gold: var(--color-primary);   --tone-gold-soft: var(--color-primary-soft);
--tone-sky: var(--color-primary);    --tone-sky-soft: var(--color-primary-soft);
--shadow-card: 0 1px 2px rgba(59, 36, 24, 0.06), 0 4px 16px rgba(59, 36, 24, 0.07);
--shadow-sheet: 0 -8px 32px rgba(59, 36, 24, 0.16);
--backdrop: rgba(42, 24, 14, 0.4);
}
[data-theme="warm"] {
color-scheme: light;
--color-bg: #f6f0e7;
--color-surface: #fffcf7;
--color-surface-2: #f2eadf;
--color-border: #e6dccd;
--color-text: #2b241e;
--color-text-muted: #625548;
--color-primary: #0b6e60;       /* deep teal */
--color-primary-strong: #075a4f;
--color-primary-soft: #dcefe7;
--color-on-primary: #ffffff;
--color-accent: var(--color-primary);
--color-accent-soft: var(--color-primary-soft);
--color-accent-ink: var(--color-primary-strong);
--color-careful: #845400;
--color-careful-soft: #faefd5;
--color-overdue: #b0352a;
--color-overdue-soft: #fbe3dd;
--color-error: #a8352c;
--color-error-soft: #fbe9e5;
--color-good-strong: #07604f;
--color-good-soft: #dcefe7;
--color-good: #0b7a62;
--color-on-good: #ffffff;
--hero-gradient: var(--color-surface);   /* plain card: no colored glow */
--color-hero-number: #133f37;
--fill-bg: #075a4f;  --fill-ink: #ffffff;  --fill-muted: #b2ccc8;  --fill-chip: #3e7e76;  --fill-accent: #81aba5;
--tone-teal: var(--color-primary);   --tone-teal-soft: var(--color-primary-soft);
--tone-coral: var(--color-primary);  --tone-coral-soft: var(--color-primary-soft);
--tone-gold: var(--color-primary);   --tone-gold-soft: var(--color-primary-soft);
--tone-sky: var(--color-primary);    --tone-sky-soft: var(--color-primary-soft);
--shadow-card: 0 1px 2px rgba(60, 44, 28, 0.06), 0 6px 20px rgba(60, 44, 28, 0.07);
--shadow-sheet: 0 -8px 32px rgba(60, 44, 28, 0.16);
--backdrop: rgba(38, 28, 18, 0.4);
}
[data-theme="dark-warm"] {
color-scheme: dark;
--color-bg: #1a1714;
--color-surface: #25211d;
--color-surface-2: #2f2a25;
--color-border: #3d362f;
--color-text: #f4ede3;
--color-text-muted: #bdb0a2;
--color-primary: #63d6bd;       /* mint */
--color-primary-strong: #92e5d2;
--color-primary-soft: #1f3a33;
--color-on-primary: #062a23;
--color-accent: var(--color-primary);
--color-accent-soft: var(--color-primary-soft);
--color-accent-ink: var(--color-primary-strong);
--color-careful: #f3c879;
--color-careful-soft: #3a2f18;
--color-overdue: #ffa08f;
--color-overdue-soft: #48261f;
--color-error: #f2a9a1;
--color-error-soft: #3f2724;
--color-good-strong: #92e5d2;
--color-good-soft: #1f3a33;
--color-good: #63d6bd;
--color-on-good: #062a23;
--hero-gradient: var(--color-surface);   /* plain card: no colored glow */
--color-hero-number: #fff8ee;
--fill-bg: #63d6bd;  --fill-ink: #062a23;  --fill-muted: #1e574b;  --fill-chip: #48a490;  --fill-accent: #2d7264;
--tone-teal: var(--color-primary);   --tone-teal-soft: var(--color-primary-soft);
--tone-coral: var(--color-primary);  --tone-coral-soft: var(--color-primary-soft);
--tone-gold: var(--color-primary);   --tone-gold-soft: var(--color-primary-soft);
--tone-sky: var(--color-primary);    --tone-sky-soft: var(--color-primary-soft);
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.22);
--shadow-sheet: 0 -8px 32px rgba(0, 0, 0, 0.45);
--backdrop: rgba(0, 0, 0, 0.55);
}
[data-theme="evergreen"] {
color-scheme: light;
--color-bg: #f4f4ef;
--color-surface: #ffffff;
--color-surface-2: #eef1ec;
--color-border: #e3e7e0;
--color-text: #17201b;
--color-text-muted: #56635b;
--color-primary: #1f5a43;       /* deep forest green */
--color-primary-strong: #174634;
--color-primary-soft: #e4eee8;
--color-on-primary: #ffffff;
--color-accent: var(--color-primary);
--color-accent-soft: var(--color-primary-soft);
--color-accent-ink: var(--color-primary-strong);
--color-careful: #7a5300;
--color-careful-soft: #f7ecd3;
--color-overdue: #b0352a;
--color-overdue-soft: #fbe3dd;
--color-error: #a8352c;
--color-error-soft: #fbe9e5;
--color-good-strong: #174634;
--color-good-soft: #e4eee8;
--color-good: #1f6b4f;
--color-on-good: #ffffff;
--hero-gradient: var(--color-surface);   /* plain card: no colored glow */
--color-hero-number: #17402f;
--fill-bg: #1f5a43;  --fill-ink: #ffffff;  --fill-muted: #cfe4d8;  --fill-chip: #2c6e54;  --fill-accent: #a8dcc2;
--chart-1: #1f5a43;  --chart-2: #3f8466;  --chart-3: #78ae93;  --chart-4: #b3d2c1;  --chart-5: #d4e3da;
--tone-teal: var(--color-primary);   --tone-teal-soft: var(--color-primary-soft);
--tone-coral: var(--color-primary);  --tone-coral-soft: var(--color-primary-soft);
--tone-gold: var(--color-primary);   --tone-gold-soft: var(--color-primary-soft);
--tone-sky: var(--color-primary);    --tone-sky-soft: var(--color-primary-soft);
--shadow-card: 0 1px 2px rgba(23, 32, 27, 0.04), 0 8px 24px rgba(23, 32, 27, 0.05);
--shadow-sheet: 0 -8px 32px rgba(23, 32, 27, 0.14);
--backdrop: rgba(14, 22, 18, 0.4);
}
[data-theme="dark-evergreen"] {
color-scheme: dark;
--color-bg: #0e1310;
--color-surface: #171e1a;
--color-surface-2: #1f2924;
--color-border: #26312b;
--color-text: #edf3ef;
--color-text-muted: #a3b2a9;
--color-primary: #74c79f;
--color-primary-strong: #9fdcbf;
--color-primary-soft: #1c3128;
--color-on-primary: #08261a;
--color-accent: var(--color-primary);
--color-accent-soft: var(--color-primary-soft);
--color-accent-ink: var(--color-primary-strong);
--color-careful: #f0c878;
--color-careful-soft: #3a2f17;
--color-overdue: #ffa08f;
--color-overdue-soft: #48261f;
--color-error: #f2a9a1;
--color-error-soft: #3f2724;
--color-good-strong: #9fdcbf;
--color-good-soft: #1c3128;
--color-good: #74c79f;
--color-on-good: #08261a;
--hero-gradient: var(--color-surface);   /* plain card: no colored glow */
--color-hero-number: #ffffff;
--fill-bg: #1f5a43;  --fill-ink: #ffffff;  --fill-muted: #cfe4d8;  --fill-chip: #2c6e54;  --fill-accent: #a8dcc2;
--chart-1: #74c79f;  --chart-2: #4f9d7b;  --chart-3: #2f6b52;  --chart-4: #a7dcc3;  --chart-5: #3b5247;
--tone-teal: var(--color-primary);   --tone-teal-soft: var(--color-primary-soft);
--tone-coral: var(--color-primary);  --tone-coral-soft: var(--color-primary-soft);
--tone-gold: var(--color-primary);   --tone-gold-soft: var(--color-primary-soft);
--tone-sky: var(--color-primary);    --tone-sky-soft: var(--color-primary-soft);
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25);
--shadow-sheet: 0 -8px 32px rgba(0, 0, 0, 0.45);
--backdrop: rgba(0, 0, 0, 0.55);
}

@font-face {
font-family: "Plus Jakarta Sans";
font-style: normal;
font-weight: 200 800;
font-display: swap;
src: url("../fonts/plus-jakarta-sans.woff2") format("woff2");
}
:root {
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--radius-card: 20px;
--radius-control: 12px;
--radius-pill: 999px;
--tap: 48px;                 /* minimum tap target */
--tabbar-h: 64px;
--content-max: 560px;
--gutter: 16px;
--safe-top: env(safe-area-inset-top, 0px);
--safe-bottom: env(safe-area-inset-bottom, 0px);
--safe-left: env(safe-area-inset-left, 0px);
--safe-right: env(safe-area-inset-right, 0px);
--font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
--ease: cubic-bezier(0.2, 0.8, 0.2, 1);
--speed: 220ms;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
margin: 0;
min-height: 100vh;
min-height: 100dvh;
background-color: var(--color-bg);
color: var(--color-text);
font-family: var(--font);
font-size: 1rem;              /* 16px */
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
overflow-x: hidden;           /* never scroll sideways */
}
h1, h2, h3, p, ul, ol {
margin: 0;
}
ul, ol {
padding: 0;
list-style: none;
}
img, svg {
display: block;
max-width: 100%;
}
button, input, select, textarea {
font: inherit;
color: inherit;
}
button {
cursor: pointer;
}
h1 { font-size: 1.625rem; line-height: 1.2;  font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: 1.25rem; line-height: 1.3;  font-weight: 700; letter-spacing: -0.01em; }
h3 { font-size: 1.0625rem; line-height: 1.35; font-weight: 700; }
.text-muted { color: var(--color-text-muted); }
.text-small { font-size: 0.9375rem; }   /* 15px — smallest text we use */
.money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.truncate {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
[hidden] {
display: none !important;
}
fieldset {
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}
legend {
padding: 0;
}
:focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: 2px;
}
[tabindex="-1"]:focus {
outline: none;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}

.app-header {
position: sticky;
top: 0;
z-index: 10;
display: flex;
align-items: center;
gap: var(--space-3);
padding: calc(var(--space-2) + var(--safe-top))
max(calc(var(--gutter) + var(--safe-right)), calc((100% - var(--content-max)) / 2 + var(--gutter)))
var(--space-2)
max(calc(var(--gutter) + var(--safe-left)), calc((100% - var(--content-max)) / 2 + var(--gutter)));
background: var(--color-bg);
background: color-mix(in srgb, var(--color-bg) 82%, transparent);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
}
.app-header__title {
flex: 1;
font-size: 1.25rem;
font-weight: 800;
letter-spacing: -0.01em;
}
.saved-indicator {
font-size: 0.9375rem;
color: var(--color-text-muted);
opacity: 0;
transition: opacity var(--speed) var(--ease);
}
.saved-indicator.is-visible {
opacity: 1;
}
.app-back {
width: 100%;
max-width: var(--content-max);
margin: 0 auto;
padding: var(--space-2) calc(var(--gutter) + var(--safe-right)) 0 calc(var(--gutter) + var(--safe-left));
}
.app-back:empty {
display: none;
}
.app-back:not(:empty) + .app-main {
padding-top: 0;
}
.app-main {
width: 100%;
max-width: var(--content-max);
margin: 0 auto;
padding: var(--space-2) calc(var(--gutter) + var(--safe-right))
var(--space-6) calc(var(--gutter) + var(--safe-left));
}
.app-footer {
max-width: var(--content-max);
margin: 0 auto;
padding: 0 calc(var(--gutter) + var(--safe-right))
calc(var(--tabbar-h) + 96px + var(--safe-bottom)) calc(var(--gutter) + var(--safe-left));
text-align: center;
font-size: 0.8125rem;
color: var(--color-text-muted);
}
.stack > * + * {
margin-top: var(--space-4);
}
.section-title {
margin: var(--space-6) 0 var(--space-3);
font-weight: 800;
}
.tabbar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 20;
display: grid;
grid-template-columns: repeat(4, 1fr);
min-height: calc(var(--tabbar-h) + var(--safe-bottom));
padding: 0 var(--safe-right) var(--safe-bottom) var(--safe-left);
background: var(--color-surface);
border-top: 1px solid var(--color-border);
}
.tabbar__tab {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
min-height: var(--tabbar-h);
padding: var(--space-1);
border: 0;
background: none;
color: var(--color-text-muted);
font-size: 0.8125rem;   /* tab labels sit under an icon, so they may be a bit smaller */
font-weight: 600;
text-decoration: none;
}
.tabbar__icon {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 30px;
border-radius: var(--radius-pill);
transition: background-color var(--speed) var(--ease);
}
.tabbar__icon {
color: var(--color-text-muted);
}
.tabbar__tab[aria-current="page"] .tabbar__icon {
color: var(--color-primary);
}
.tabbar__tab[aria-current="page"] {
color: var(--color-primary-strong);
}
.tabbar__tab[aria-current="page"] .tabbar__icon {
background: var(--color-primary-soft);
}
.action-bar {
position: fixed;
left: 0;
right: 0;
bottom: calc(var(--tabbar-h) + var(--safe-bottom));
z-index: 15;
padding: var(--space-3) calc(var(--gutter) + var(--safe-right)) var(--space-3)
calc(var(--gutter) + var(--safe-left));
background: linear-gradient(to top, var(--color-bg) 70%, transparent);
pointer-events: none;
}
.action-bar > * {
max-width: var(--content-max);
margin: 0 auto;
pointer-events: auto;
}
.tabbar__brand,
.tabbar__foot {
display: none;
}
@media (min-width: 900px) {
:root {
--rail-w: 248px;
--content-max: 640px;
}
.tabbar {
top: 0;
right: auto;
width: var(--rail-w);
display: flex;
flex-direction: column;
gap: var(--space-1);
padding: var(--space-5) var(--space-3);
border-top: 0;
border-right: 1px solid var(--color-border);
background: var(--color-surface);
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: var(--color-border) transparent;
}
.tabbar > * {
flex-shrink: 0;
}
.tabbar__brand {
display: flex;
align-items: center;
gap: var(--space-3);
padding: 0 var(--space-2) var(--space-5);
font-weight: 800;
font-size: 1.25rem;
letter-spacing: -0.01em;
}
.tabbar__brand .tile {
background: var(--color-primary);
color: var(--color-on-primary);
}
.tabbar__tab {
flex-direction: row;
justify-content: flex-start;
gap: var(--space-3);
min-height: 52px;
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-control);
font-size: 1rem;
}
.tabbar__tab:hover {
background: var(--color-surface-2);
}
.tabbar__tab[aria-current="page"] {
background: var(--color-primary-soft);
}
.tabbar__icon {
width: 32px;
height: 32px;
}
.tabbar__tab[aria-current="page"] .tabbar__icon {
background: transparent;
}
.tabbar__foot {
display: block;
margin-top: auto;
padding: var(--space-3);
font-size: 0.875rem;
color: var(--color-text-muted);
}
body {
padding-left: var(--rail-w);
}
.app-header__title {
visibility: hidden;   /* the sidebar shows the name */
}
.app-main {
padding-bottom: var(--space-6);
}
.app-footer {
padding-bottom: 140px;
}
.action-bar {
left: var(--rail-w);
bottom: 0;
}
}
@media (min-width: 1100px) {
body[data-screen="today"],
body[data-screen="paycheck"],
body[data-screen="bills"],
body[data-screen="spending"],
body[data-screen="debt"],
body[data-screen="savings"],
body[data-screen="goals"],
body[data-screen="overview"],
body[data-screen="help"] {
--content-max: 1080px;
}
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-height: var(--tap);
min-width: var(--tap);
padding: var(--space-3) var(--space-5);
border: 2px solid transparent;
border-radius: var(--radius-control);
font-size: 1rem;
font-weight: 600;
line-height: 1.2;
text-align: center;
text-decoration: none;
transition: background-color var(--speed) var(--ease), transform 80ms var(--ease);
}
.btn:active {
transform: scale(0.98);
}
.btn--primary {
background: var(--color-primary);
color: var(--color-on-primary);
}
.btn--primary:hover {
background: var(--color-primary-strong);
}
.btn--secondary {
background: var(--color-accent-soft);
color: var(--color-accent-ink);
}
.btn--ghost {
background: transparent;
color: var(--color-primary-strong);
}
.btn--outline {
background: var(--color-surface);
border-color: var(--color-border);
color: var(--color-text);
}
.btn--block {
display: flex;
width: 100%;
}
.btn--big {
min-height: 56px;
font-size: 1.0625rem;
border-radius: var(--radius-card);
}
.btn--small {
padding: var(--space-2) var(--space-4);
}
.icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--tap);
height: var(--tap);
flex-shrink: 0;
border: 0;
border-radius: var(--radius-pill);
background: var(--color-surface-2);
color: var(--color-text);
font-size: 1.125rem;
font-weight: 700;
}
.icon-btn svg {
width: 22px;
height: 22px;
}
.card {
padding: var(--space-4);
background: var(--color-surface);
border-radius: var(--radius-card);
box-shadow: var(--shadow-card);
}
.card--hero {
padding: var(--space-5) var(--space-4);
background: var(--hero-gradient);
text-align: center;
}
.card--hero .big-number {
color: var(--color-hero-number);
}
.card__label {
font-size: 1rem;
font-weight: 600;
color: var(--color-text-muted);
}
.big-number {
margin: var(--space-1) 0;
font-size: clamp(3rem, 15vw, 4rem);   /* 48–64px */
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.025em;
color: var(--color-text);
font-variant-numeric: tabular-nums;
overflow-wrap: anywhere;
}
.row {
display: flex;
align-items: center;
gap: var(--space-3);
min-height: 56px;
padding: var(--space-2) 0;
}
.row + .row {
border-top: 1px solid var(--color-border);
}
.row__main {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.row--button {
width: 100%;
border: 0;
border-radius: 0;
background: none;
text-align: left;
color: inherit;
}
.row--button + .row--button {
border-top: 1px solid var(--color-border);
}
.row__edit {
display: flex;
color: var(--color-text-muted);
}
.row__edit .icon {
width: 18px;
height: 18px;
}
.row__title {
font-weight: 600;
}
.row__sub {
font-size: 0.9375rem;
color: var(--color-text-muted);
}
.icon {
width: 24px;
height: 24px;
flex-shrink: 0;
}
[data-icon] {
display: inline-flex;
}
[data-icon][class^="tone-"] {
color: var(--tone);
}
.tone-teal  { --tone: var(--tone-teal);  --tone-soft: var(--tone-teal-soft); }
.tone-coral { --tone: var(--tone-coral); --tone-soft: var(--tone-coral-soft); }
.tone-gold  { --tone: var(--tone-gold);  --tone-soft: var(--tone-gold-soft); }
.tone-sky   { --tone: var(--tone-sky);   --tone-soft: var(--tone-sky-soft); }
.tile {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
flex-shrink: 0;
border-radius: var(--radius-control);
background: var(--tone-soft, var(--color-surface-2));
color: var(--tone, var(--color-text-muted));
}
.tile .icon {
width: 22px;
height: 22px;
}
.tile--big {
width: 72px;
height: 72px;
border-radius: 22px;
}
.tile--big .icon {
width: 36px;
height: 36px;
}
.cents {
font-size: 0.5em;
font-weight: 700;
vertical-align: 0.75em;
margin-left: 0.04em;
letter-spacing: 0;
}
.eyebrow {
font-size: 0.8125rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.card__title {
margin-bottom: var(--space-2);
font-size: 1.1875rem;
font-weight: 800;
letter-spacing: -0.01em;
}
.income {
color: var(--color-primary-strong);
font-weight: 700;
}
.ring {
position: relative;
display: inline-flex;
width: 64px;
height: 64px;
flex-shrink: 0;
}
.ring svg {
width: 64px;
height: 64px;
transform: rotate(-90deg);
}
.ring circle {
fill: none;
stroke-width: 6;
}
.ring__track {
stroke: var(--color-surface-2);
opacity: 0.9;
}
.ring__fill {
stroke: var(--color-primary);
stroke-linecap: round;
transition: stroke-dasharray 700ms var(--ease);
}
.ring__center {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
line-height: 1;
}
.ring__center strong {
font-size: 1.25rem;
font-weight: 800;
}
.ring__center small {
font-size: 0.6875rem;
font-weight: 700;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.stats {
display: grid;
grid-auto-flow: column;            /* one row, equal columns, however many tiles */
grid-auto-columns: minmax(0, 1fr);
gap: var(--space-3);
}
@media (max-width: 599px) {
.stats {
gap: var(--space-2);
}
.stat {
padding: var(--space-3);
}
.stat__label {
font-size: 0.6875rem;
letter-spacing: 0.04em;
}
.stat__value {
font-size: 1.125rem;
}
.stat__sub {
font-size: 0.75rem;
}
.stat .cents {
display: none;   /* tiles are a summary; full amounts are one tap away */
}
}
.stat {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
padding: var(--space-4);
border-radius: var(--radius-card);
background: var(--color-surface);   /* plain card; the icon carries the accent */
box-shadow: var(--shadow-card);
}
.stat__icon {
display: flex;
margin-bottom: var(--space-2);
color: var(--tone);
}
.stat__label {
hyphens: auto;
-webkit-hyphens: auto;
font-size: 0.8125rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.stat__value {
font-size: 1.625rem;
font-weight: 800;
letter-spacing: -0.015em;
font-variant-numeric: lining-nums;
}
.stat__sub {
font-size: 0.875rem;
color: var(--color-text-muted);
}
@media (min-width: 1100px) {
.stat__label {
font-size: 0.75rem;
letter-spacing: 0.05em;
}
.stat__sub {
font-size: 0.8125rem;
}
}
.datechip {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 44px;
height: 48px;
flex-shrink: 0;
border-radius: var(--radius-control);
background: var(--color-surface-2);
line-height: 1.05;
}
.datechip strong {
font-size: 1.1875rem;
font-weight: 800;
}
.datechip small {
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
color: var(--color-text-muted);
}
.datechip--today {
background: var(--color-primary);
color: var(--color-on-primary);
}
.datechip--today small {
color: inherit;
}
.bars {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.bar__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
margin-bottom: 6px;
}
.bar__name {
display: flex;
align-items: center;
gap: var(--space-2);
font-weight: 600;
}
.bar__name .icon {
width: 20px;
height: 20px;
}
.bar__track {
height: 10px;
border-radius: var(--radius-pill);
background: var(--color-surface-2);
overflow: hidden;
}
.bar__track span {
display: block;
height: 100%;
border-radius: inherit;
background: var(--tone, var(--color-primary));
transition: width 700ms var(--ease);
}
.jar {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-2) 0;
}
.jar + .jar {
border-top: 1px solid var(--color-border);
padding-top: var(--space-3);
}
.breakdown {
margin-top: var(--space-2);
}
.line {
display: flex;
justify-content: space-between;
gap: var(--space-3);
padding: 6px 0;
}
.line--muted {
color: var(--color-text-muted);
}
.line__label {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 2px var(--space-2);
min-width: 0;
}
.when {
font-weight: 700;
color: var(--color-text);
letter-spacing: -0.005em;
white-space: nowrap;
}
.paid-mark {
font-weight: 800;
color: var(--color-good-strong);
white-space: nowrap;
}
.line__tag {
font-size: 0.75rem;
font-weight: 700;
color: var(--color-text);
white-space: nowrap;
}
.line__tag--paid {
font-weight: 800;
color: var(--color-good-strong);
}
.year-chips .chip {
min-height: 40px;
padding: var(--space-1) var(--space-3);
}
.line--income {
color: var(--color-primary-strong);
font-weight: 600;
}
.line--wrap .line__label .truncate {
white-space: normal;
}
.line--button {
width: 100%;
min-height: 40px;
border: 0;
background: none;
font: inherit;
text-align: left;
cursor: pointer;
}
.line--total {
margin-top: var(--space-2);
padding-top: var(--space-3);
border-top: 1px solid var(--color-border);
font-size: 1.125rem;
font-weight: 700;
}
.status {
display: flex;
align-items: flex-start;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-control);
font-weight: 500;
}
.status .icon {
width: 22px;
height: 22px;
margin-top: 1px;
}
.status--good {
background: var(--color-good-soft);
color: var(--color-good-strong);
}
.status--careful {
background: var(--color-careful-soft);
color: var(--color-careful);
}
.badge {
display: inline-flex;
align-items: center;
padding: 2px 10px;
border-radius: var(--radius-pill);
background: var(--color-surface-2);
color: var(--color-text-muted);
font-size: 0.875rem;
font-weight: 600;
white-space: nowrap;
}
.badge--good {
background: var(--color-good-soft);
color: var(--color-good-strong);
}
.badge--careful {
background: var(--color-careful-soft);
color: var(--color-careful);
}
.badge--soon {
background: var(--color-careful-soft);
color: var(--color-careful);
}
.badge--overdue {
background: var(--color-overdue-soft);
color: var(--color-overdue);
}
.badge--done {
background: var(--color-good-soft);
color: var(--color-good-strong);
font-weight: 800;
}
.status--over {
background: var(--color-careful-soft);
color: var(--color-careful);
}
@keyframes pop {
0% { transform: scale(1); }
40% { transform: scale(1.12); }
100% { transform: scale(1); }
}
.is-celebrating {
animation: pop 360ms var(--ease);
}
.chips {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.chip {
display: inline-flex;
align-items: center;
gap: var(--space-1);
min-height: var(--tap);
padding: var(--space-2) var(--space-4);
border: 2px solid var(--color-border);
border-radius: var(--radius-pill);
background: var(--color-surface);
font-weight: 600;
}
.chip[aria-pressed="true"] {
border-color: var(--color-primary);
background: var(--color-primary-soft);
color: var(--color-primary-strong);
}
.progress {
height: 12px;
border-radius: var(--radius-pill);
background: var(--color-surface-2);
overflow: hidden;
}
.progress__fill {
height: 100%;
border-radius: inherit;
background: var(--color-primary);
transition: width 600ms var(--ease);
}
.field {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.field + .field {
margin-top: var(--space-4);
}
.field__label {
font-weight: 600;
}
.field__hint {
font-size: 0.9375rem;
color: var(--color-text-muted);
}
.input,
.select {
width: 100%;
min-height: var(--tap);
padding: var(--space-3) var(--space-4);
border: 2px solid var(--color-border);
border-radius: var(--radius-control);
background: var(--color-surface);
font-size: 1rem;    /* 16px — stops iPhone zooming in */
}
.field__error {
color: var(--color-careful);
font-size: 0.9375rem;
font-weight: 600;
}
.field__error:empty {
display: none;
}
.check {
display: flex;
align-items: flex-start;
gap: var(--space-3);
min-height: var(--tap);
padding: var(--space-3) 0;
cursor: pointer;
}
.check input {
width: 24px;
height: 24px;
flex-shrink: 0;
margin: 0;
accent-color: var(--color-primary);
}
.check > span {
display: flex;
flex-direction: column;
}
.two-cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-2);
}
input[type="date"].input {
min-height: var(--tap);
-webkit-appearance: none;
appearance: none;
}
.input:focus,
.select:focus {
outline: none;
border-color: var(--color-primary);
}
.input--money {
font-size: 1.5rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.swatch {
display: inline-block;
flex-shrink: 0;
width: 16px;
height: 16px;
border-radius: var(--radius-pill);
border: 2px solid var(--color-surface);
box-shadow: 0 0 0 1px var(--color-border);
}
.chip--two {
flex-direction: column;
gap: 0;
height: auto;
min-height: var(--tap);
padding-block: var(--space-2);
line-height: 1.25;
text-align: center;
}
.chip__sub {
font-size: 0.8125rem;
font-weight: 500;
opacity: 0.85;
}
.segmented {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: var(--space-2);
}
.check-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-1);
min-height: var(--tap);
min-width: 88px;
flex-shrink: 0;
padding: var(--space-2) var(--space-3);
border: 2px solid var(--color-border);
border-radius: var(--radius-pill);
background: var(--color-surface);
font-weight: 600;
color: var(--color-text);
}
.check-btn[aria-pressed="true"] {
border-color: var(--color-good);
background: var(--color-good);
color: var(--color-on-good);
font-weight: 800;
}
.backdrop {
position: fixed;
inset: 0;
z-index: 40;
background: var(--backdrop);
opacity: 0;
pointer-events: none;
transition: opacity var(--speed) var(--ease);
}
.backdrop.is-open {
opacity: 1;
pointer-events: auto;
}
.sheet {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 50;
display: flex;
flex-direction: column;
max-width: var(--content-max);
max-height: 90vh;
max-height: 90dvh;
margin: 0 auto;
background: var(--color-surface);
border-radius: 24px 24px 0 0;
box-shadow: var(--shadow-sheet);
transform: translateY(105%);
visibility: hidden;
transition: transform var(--speed) var(--ease), visibility 0s linear var(--speed);
}
.sheet.is-open {
transform: translateY(0);
visibility: visible;
transition: transform var(--speed) var(--ease), visibility 0s;
}
.sheet__header {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-4) var(--gutter) var(--space-2);
}
.sheet__header h2 {
flex: 1;
}
.sheet__body {
flex: 1;
overflow-y: auto;
padding: var(--space-2) var(--gutter) var(--space-4);
}
.sheet__footer {
padding: var(--space-3) var(--gutter) calc(var(--space-3) + var(--safe-bottom));
border-top: 1px solid var(--color-border);
background: var(--color-surface);
}
@media (min-width: 900px) {
.sheet {
bottom: 50%;
border-radius: 24px;
transform: translateY(60%);
opacity: 0;
}
.sheet.is-open {
transform: translateY(50%);
opacity: 1;
}
}
.toast {
position: fixed;
left: 50%;
top: calc(var(--safe-top) + 60px);
z-index: 60;
display: flex;
align-items: center;
gap: var(--space-3);
width: calc(100% - 2 * var(--gutter));
max-width: 480px;
padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
border-radius: var(--radius-control);
background: var(--color-text);
color: var(--color-bg);
box-shadow: var(--shadow-card);
transform: translate(-50%, -16px);
opacity: 0;
pointer-events: none;
transition: opacity var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.toast.is-open {
transform: translate(-50%, 0);
opacity: 1;
pointer-events: auto;
}
.toast__text {
flex: 1;
min-height: var(--tap);
display: flex;
align-items: center;
}
.toast .btn {
color: var(--color-bg);
text-decoration: underline;
}
@media (min-width: 900px) {
.toast {
margin-left: calc(var(--rail-w) / 2);
}
}
.empty {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
padding: var(--space-6) var(--space-4);
text-align: center;
}
.empty__text {
max-width: 28ch;
color: var(--color-text-muted);
}
.tabbar__tab--side,
.tabbar__group,
.tabbar__spacer {
display: none;
}
@media (min-width: 900px) {
.tabbar__tab--side {
display: flex;
min-height: 44px;
}
.tabbar__group {
display: block;
margin: var(--space-4) 0 var(--space-1);
padding: 0 var(--space-3);
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.tabbar__spacer {
display: block;
flex: 1;
}
.tabbar__foot {
margin-top: 0;
}
}
.help-btn[hidden] {
display: none;
}
.help-btn {
color: var(--color-primary-strong);
}
.tour-backdrop {
position: fixed;
inset: 0;
z-index: 40;
background: rgba(0, 0, 0, 0.55);
}
body.is-touring .tabbar {
z-index: 45;
}
.tabbar__tab.is-tour-target {
box-shadow: 0 0 0 3px var(--color-primary);
border-radius: var(--radius-control);
}
.tour {
position: fixed;
z-index: 50;
width: min(320px, calc(100vw - 24px));
padding: var(--space-4);
border-radius: var(--radius-card);
background: var(--color-surface);
border: 1px solid var(--color-border);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.tour::after {
content: "";
position: absolute;
width: 14px;
height: 14px;
background: var(--color-surface);
border: 1px solid var(--color-border);
transform: rotate(45deg);
}
.tour--up::after {
bottom: -8px;
left: calc(var(--arrow, 50%) - 7px);
border-top: 0;
border-left: 0;
}
.tour--right::after {
left: -8px;
top: calc(var(--arrow, 36px) - 7px);
border-top: 0;
border-right: 0;
}
.tour__step {
margin: 0;
font-size: 0.875rem;
color: var(--color-text-muted);
}
.tour__title {
margin: var(--space-1) 0 var(--space-2);
font-size: 1.125rem;
}
.tour__body {
margin: 0;
}
.tour__actions {
display: flex;
justify-content: flex-end;
gap: var(--space-2);
margin-top: var(--space-4);
}
.help-example {
margin-top: var(--space-4);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-control);
background: var(--color-primary-soft);
}
.help-example p {
margin: 0;
}
.help-example .eyebrow {
margin-bottom: var(--space-1);
color: var(--color-primary-strong);
}
.coach {
display: flex;
align-items: center;
gap: var(--space-3);
}
.coach__text {
margin: 0;
}
body.hide-tips .tip-line {
display: none;
}
@media (prefers-reduced-motion: no-preference) {
.tour {
animation: tour-in 220ms var(--ease);
}
@keyframes tour-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
}
.illustration {
width: 160px;
height: 120px;
}
.illustration__blob {
fill: var(--tone-soft);
}
.illustration__card {
fill: var(--color-surface);
stroke: var(--color-border);
stroke-width: 2;
}
.illustration__line {
fill: var(--color-surface-2);
}
.illustration__icon {
color: var(--tone);
}
.illustration__dot--a {
fill: var(--tone-gold);
}
.illustration__dot--b {
fill: var(--tone-sky);
}
.illustration__dot--c {
fill: var(--tone-coral);
}
@media (prefers-reduced-motion: no-preference) {
.illustration__dot {
animation: illustration-float 3.2s ease-in-out infinite;
}
.illustration__dot--b {
animation-delay: 0.6s;
}
.illustration__dot--c {
animation-delay: 1.2s;
}
@keyframes illustration-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-3px); }
}
}
.chip--small {
min-height: 36px;
padding: var(--space-1) var(--space-3);
font-size: 0.875rem;
gap: var(--space-1);
}
.chip--small .icon {
width: 16px;
height: 16px;
}
.chart-card,
.tdash {
--c1: var(--chart-1, var(--color-primary));
--c2: var(--chart-2, color-mix(in srgb, var(--color-primary) 72%, var(--color-surface)));
--c3: var(--chart-3, color-mix(in srgb, var(--color-primary) 52%, var(--color-surface)));
--c4: var(--chart-4, color-mix(in srgb, var(--color-primary) 34%, var(--color-surface)));
--c5: var(--chart-5, color-mix(in srgb, var(--color-primary) 20%, var(--color-surface)));
}
.kpi,
.mini {
display: flex;
flex-direction: column;
gap: var(--space-2);
height: 100%;
color: inherit;
text-decoration: none;
}
.kpi__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
}
.kpi__head .tile {
width: 36px;
height: 36px;
}
.kpi__head .tile .icon {
width: 19px;
height: 19px;
}
.kpi__value {
font-size: 1.75rem;
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.15;
font-variant-numeric: tabular-nums;
}
.kpi__sub {
font-size: 0.875rem;
color: var(--color-text-muted);
}
.mini__value {
font-size: 1.375rem;
font-weight: 800;
letter-spacing: -0.015em;
line-height: 1.2;
}
.mini__of {
font-size: 0.875rem;
font-weight: 500;
letter-spacing: 0;
color: var(--color-text-muted);
}
.mini__bar {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: 0.875rem;
font-weight: 700;
}
.mini__bar .progress {
flex: 1;
}
.mini--ring {
flex-direction: row;
align-items: center;
gap: var(--space-4);
}
.mini__text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
a.kpi:focus-visible,
a.mini:focus-visible {
outline-offset: 3px;
}
.chart-sub {
margin: 0 0 var(--space-3);
}
.chart-key {
display: flex;
flex-wrap: wrap;
gap: var(--space-1) var(--space-4);
margin: 0 0 var(--space-3);
font-size: 0.875rem;
color: var(--color-text-muted);
}
.chart-key span {
display: inline-flex;
align-items: center;
gap: 6px;
}
.legend__dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 3px;
flex-shrink: 0;
background: var(--c1);
}
.legend__dot--2 { background: var(--c2); }
.legend__dot--3 { background: var(--c3); }
.legend__dot--4 { background: var(--c4); }
.legend__dot--5 { background: var(--c5); }
.donut-wrap {
display: flex;
align-items: center;
gap: var(--space-4);
}
.donut {
position: relative;
width: 128px;
height: 128px;
flex-shrink: 0;
}
.donut svg {
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.donut circle {
fill: none;
stroke-width: 15;
}
.donut__track { stroke: var(--color-surface-2); }
.donut__part--1 { stroke: var(--c1); }
.donut__part--2 { stroke: var(--c2); }
.donut__part--3 { stroke: var(--c3); }
.donut__part--4 { stroke: var(--c4); }
.donut__part--5 { stroke: var(--c5); }
.donut__center {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
line-height: 1.15;
text-align: center;
}
.donut__center small {
font-size: 0.6875rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.donut__center strong {
font-size: 1rem;
font-weight: 800;
}
.donut__center .cents {
display: none;
}
.legend {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--space-2);
font-size: 0.9375rem;
}
.legend li {
display: flex;
align-items: center;
gap: var(--space-2);
}
.legend .money {
margin-left: auto;
font-weight: 700;
}
.pills {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: var(--space-1);
padding-top: 44px;              /* room for the bubble */
}
.pills__day {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
min-width: 0;
padding: 0;
border: 0;
background: none;
color: var(--color-text-muted);
font: inherit;
cursor: pointer;
}
.pills__track {
position: relative;
display: flex;
align-items: flex-end;
width: min(30px, 100%);
height: 128px;
border-radius: var(--radius-pill);
background: var(--color-surface-2);
}
.pills__fill {
display: block;
width: 100%;
border-radius: var(--radius-pill);
background: var(--c3);
}
.pills__day.is-active .pills__fill {
background: var(--c1);
}
.pills__label {
font-size: 0.8125rem;
font-weight: 600;
}
.pills__day.is-active .pills__label {
color: var(--color-text);
font-weight: 800;
}
.pills__tip {
position: absolute;
bottom: calc(100% + 6px);
left: 50%;
display: none;
flex-direction: column;
align-items: center;
padding: 6px 10px;
border-radius: 10px;
background: var(--color-text);
color: var(--color-surface);
font-size: 0.75rem;
line-height: 1.25;
white-space: nowrap;
transform: translateX(-50%);
box-shadow: var(--shadow-card);
pointer-events: none;
}
.pills__tip strong {
font-size: 0.8125rem;
}
.pills__day.is-active .pills__tip {
display: flex;
}
.pills__day:first-child .pills__tip { left: 0; transform: none; }
.pills__day:last-child .pills__tip { left: auto; right: 0; transform: none; }
.mbars {
position: relative;   /* keeps the hidden numbers table inside the card */
}
.mbars svg {
display: block;
width: 100%;
height: 150px;
}
.mbars__grid {
stroke: var(--color-border);
stroke-width: 1;
vector-effect: non-scaling-stroke;
}
.mbars__in { fill: var(--c1); }
.mbars__out { fill: var(--c3); }
.mbars__labels {
display: flex;
margin-top: var(--space-2);
font-size: 0.8125rem;
color: var(--color-text-muted);
}
.mbars__labels span {
flex: 1;
text-align: center;
}
.hero-btn--fill {
background: var(--fill-bg, var(--hero-gradient));
color: var(--fill-ink, var(--color-text));
}
.hero-btn--fill .big-number {
color: var(--fill-ink, var(--color-hero-number));
}
.hero-btn--fill .eyebrow,
.hero-btn--fill .text-muted,
.hero-btn--fill .hero-btn__link {
color: var(--fill-muted, var(--color-text-muted));
}
.hero-btn--fill .hero-btn__daily,
.hero-btn__chip {
background: var(--fill-chip, var(--color-surface));
color: var(--fill-ink, var(--color-text));
box-shadow: none;
}
.hero-btn__chip {
padding: 4px 12px;
border-radius: var(--radius-pill);
font-size: 0.8125rem;
font-weight: 700;
white-space: nowrap;
}
.hero-btn__mood {
padding: 6px 14px;
border-radius: var(--radius-pill);
font-size: 0.9375rem;
font-weight: 600;
}
.hero-btn__mood .icon {
width: 18px;
height: 18px;
}

body.is-full .app-header,
body.is-full .tabbar,
body.is-full #notices {
display: none;
}
body.is-full {
padding-left: 0;
}
body.is-full .app-main {
padding-bottom: var(--space-4);
}
body.is-full .app-footer {
padding-bottom: calc(var(--space-4) + var(--safe-bottom));
}
.fullscreen {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
min-height: calc(100vh - var(--space-6));
min-height: calc(100dvh - var(--space-6));
padding-top: calc(var(--space-6) + var(--safe-top));
text-align: center;
}
.fullscreen h1 {
font-size: 1.75rem;
}
.fullscreen > p:not(.link-box) {
max-width: 32ch;
}
.fullscreen__actions {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
width: 100%;
margin-top: auto;     /* buttons sit low, in thumb reach */
padding-top: var(--space-4);
}
.steps {
display: flex;
flex-direction: column;
gap: var(--space-3);
width: 100%;
text-align: left;
}
.steps li {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
background: var(--color-surface);
border-radius: var(--radius-card);
box-shadow: var(--shadow-card);
}
.steps li > span:last-child {
display: flex;
flex-direction: column;
min-width: 0;
}
.steps__num {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
flex-shrink: 0;
border-radius: var(--radius-pill);
background: var(--color-primary-soft);
color: var(--color-primary-strong);
font-weight: 700;
}
.link-box {
width: 100%;
padding: var(--space-3);
border: 2px dashed var(--color-border);
border-radius: var(--radius-control);
background: var(--color-surface-2);
font-size: 0.9375rem;
overflow-wrap: anywhere;
user-select: all;
-webkit-user-select: all;
}
.copy-result {
min-height: 1.5em;
color: var(--color-primary-strong);
font-weight: 600;
}
.tip {
display: flex;
align-items: center;
gap: var(--space-2);
color: var(--color-text-muted);
text-align: left;
}
.tip .icon {
color: var(--tone-gold);
}
#notices {
width: 100%;
max-width: var(--content-max);
margin: 0 auto;
padding: 0 calc(var(--gutter) + var(--safe-right)) 0 calc(var(--gutter) + var(--safe-left));
}
#notices > * + * {
margin-top: var(--space-2);
}
.sample-banner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
border-radius: var(--radius-control);
background: var(--color-primary-soft);
color: var(--color-text);
font-weight: 600;
}
.sample-banner .btn {
background: var(--color-surface);
color: var(--color-text);
}
.sample-banner--demo .btn {
background: var(--color-primary);
color: var(--color-on-primary);
}
.dash {
display: grid;
grid-template-columns: minmax(0, 1fr);   /* never wider than the screen */
gap: var(--space-4);
}
@media (min-width: 1100px) {
.dash {
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
align-items: start;
gap: var(--space-5);
}
}
.hero-btn {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
padding: var(--space-5);
border: 0;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
box-shadow: var(--shadow-card);
}
.hero-btn__top {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin-bottom: var(--space-1);
}
.hero-btn .big-number {
margin: 0 0 var(--space-1);
}
.hero-btn__foot {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-2) var(--space-3);
width: 100%;
margin-top: var(--space-3);
}
.hero-btn__daily {
margin-top: var(--space-3);
padding: 6px 12px;
border-radius: var(--radius-pill);
background: var(--color-surface);
font-size: 0.9375rem;
font-weight: 700;
box-shadow: var(--shadow-card);
}
.hero-btn__link {
font-size: 0.9375rem;
font-weight: 600;
color: var(--color-text-muted);
}
.task {
align-items: flex-start;
}
.task .tile {
margin-top: 2px;
}
.task .check-btn {
align-self: center;
}
.task--done .row__title {
color: var(--color-text-muted);
}
.task__badge {
margin-top: var(--space-1);
}
.quickbar__inner {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.quickbar__inner .input {
box-shadow: var(--shadow-card);
}
.quickbar__row {
display: flex;
align-items: center;
gap: var(--space-2);
}
.quickbar__row .input {
flex: 1;
min-width: 0;
}
.quickbar__brain {
box-shadow: var(--shadow-card);
}
.right-now {
padding-top: var(--space-3);
}
.right-now__label {
margin: 0 0 var(--space-1);
color: var(--color-primary-strong);
}
.right-now .check-btn[aria-pressed="false"] {
border-color: var(--color-primary);
background: var(--color-primary);
color: var(--color-on-primary);
}
.task__title {
display: flex;
justify-content: space-between;
gap: var(--space-2);
}
.tdash .right-now .task {
flex-wrap: wrap;
}
.tdash .right-now .task .check-btn {
flex: 1 1 calc(100% - 52px);
margin-left: 52px;
}
@media (max-width: 599px) {
.right-now .task {
flex-wrap: wrap;
}
.right-now .task .check-btn {
flex: 1 1 calc(100% - 52px);   /* lines up with the words (tile 40px + gap 12px) */
margin-left: 52px;
}
}
.tdash {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: var(--space-3);
}
.tdash > * {
grid-column: span 6;
min-width: 0;
}
.tdash > .d-in,
.tdash > .d-bills,
.tdash > .d-spent {
grid-column: span 2;
}
.tdash > .d-debt,
.tdash > .d-save {
grid-column: span 3;
}
.tdash > .d-hero > .hero-btn {
margin-top: 0;
}
.tdash > .d-now > .section-title {
margin-top: var(--space-2);
}
@media (max-width: 599px) {
.tdash .kpi {
padding: var(--space-3);
gap: var(--space-1);
}
.tdash .kpi .tile,
.tdash .kpi__sub {
display: none;
}
.tdash .kpi .eyebrow {
font-size: 0.6875rem;
letter-spacing: 0.06em;
}
.tdash .kpi__value {
font-size: 1.125rem;
}
.tdash .kpi .cents {
display: none;
}
.tdash .mini {
padding: var(--space-3) var(--space-4);
}
.donut-wrap {
gap: var(--space-3);
}
.donut {
width: 112px;
height: 112px;
}
}
@media (min-width: 1100px) {
.tdash {
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: var(--space-4);
}
.tdash > * { grid-column: span 12; }
.tdash > .d-top { order: 1; }
.tdash > .d-hero { order: 2; grid-column: span 6; }      /* first and biggest */
.tdash > .d-in { order: 3; grid-column: span 2; }
.tdash > .d-bills { order: 4; grid-column: span 2; }
.tdash > .d-spent { order: 5; grid-column: span 2; }
.tdash > .d-alert { order: 6; }                          /* reminders never above the number */
.tdash > .d-remind { order: 7; }
.tdash > .d-months { order: 8; grid-column: span 4; }
.tdash > .d-week { order: 9; grid-column: span 4; }
.tdash > .d-where { order: 10; grid-column: span 4; }
.tdash > .d-debt { order: 11; grid-column: span 3; }
.tdash > .d-save { order: 12; grid-column: span 3; }
.tdash > .d-days { order: 13; grid-column: span 3; }
.tdash > .d-now { order: 14; grid-column: span 3; }
.tdash > .d-coming { order: 15; }
.tdash > .d-logged { order: 16; grid-column: span 6; }
.tdash > .d-limits { order: 17; grid-column: span 6; }
.tdash > .d-jars { order: 18; grid-column: span 6; }
.tdash > .d-coach { order: 19; grid-column: span 6; }
.tdash--three > .d-debt,
.tdash--three > .d-save,
.tdash--three > .d-days { grid-column: span 4; }
.tdash--three > .d-now { grid-column: span 12; }
.tdash > div > .card,
.tdash > .d-hero > .hero-btn,
.tdash > div > .card.right-now { height: 100%; }
.tdash .hero-btn {
padding: var(--space-5);
}
.tdash .hero-btn .big-number {
font-size: 3.75rem;
}
.tdash > .d-in .kpi,
.tdash > .d-bills .kpi,
.tdash > .d-spent .kpi {
padding: var(--space-4);
}
.tdash .kpi .kpi__value {
font-size: 1.375rem;
}
.tdash .kpi .kpi__head .tile {
width: 30px;
height: 30px;
}
.tdash .kpi .kpi__sub {
font-size: 0.75rem;
}
.tdash .hero-btn__foot {
margin-top: var(--space-3);
}
.tdash .hero-btn__sub--repeat {
display: none;
}
.tdash .hero-btn__daily {
padding: 5px 10px;
font-size: 0.75rem;
}
.tdash .hero-btn__mood {
margin-top: 0;
padding: 4px 10px;
font-size: 0.8125rem;
}
.tdash .kpi > .kpi__sub {
margin-top: auto;
}
.tdash .right-now .task > .tile {
display: none;
}
.tdash .right-now .task .check-btn {
flex-basis: 100%;
margin-left: 0;
}
.tdash .mini--ring {
align-items: flex-start;
}
.coming__rows {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: var(--space-6);
}
.coming__rows .row:nth-child(2) {
border-top: 0;
}
}
.coming .row .badge {
flex-shrink: 0;
}
.coming .row .money {
min-width: 72px;
text-align: right;
}
.coming__rows {
margin-top: var(--space-2);
}
.right-now .row {
padding-left: 0;
padding-right: 0;
}
.right-now__more {
margin: var(--space-1) 0 0;
}
.brain-input {
resize: vertical;
min-height: 4.5rem;
}
.brain-row__text {
border: 0;
background: none;
padding: var(--space-1) 0;
color: var(--color-text);
font: inherit;
text-align: left;
overflow-wrap: anywhere;
cursor: pointer;
}
.brain-row--done .brain-row__text {
color: var(--color-text-muted);
text-decoration: line-through;
}
.brain-done__head {
cursor: pointer;
font-weight: 700;
min-height: var(--tap);
display: flex;
align-items: center;
}
.quickbar__buttons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-2);
}
.quickbar__answer:empty {
display: none;
}
.payday-card {
background: var(--color-surface);
box-shadow: var(--shadow-card);
}
.payday-card__top {
display: flex;
align-items: flex-start;
gap: var(--space-3);
margin-bottom: var(--space-2);
}
.payday-card__buttons {
margin-top: var(--space-3);
}
.payday-card__buttons .remind-auto {
grid-column: 1 / -1;
justify-self: center;
}
.auto-backup {
padding-top: var(--space-3);
border-top: 1px solid var(--color-border);
}
.auto-backup__title {
margin: 0;
}
.paycard {
padding: var(--space-5);
text-align: left;
box-shadow: var(--shadow-card);
}
.paycard .big-number {
margin: 0;
}
.paycard__covers {
display: flex;
align-items: flex-start;
gap: var(--space-2);
margin: var(--space-3) 0 0;
font-size: 0.9375rem;
color: var(--color-text-muted);
}
.paycard__covers svg {
flex-shrink: 0;
width: 18px;
height: 18px;
margin-top: 2px;
}
.payrow__body .paycard__covers {
margin: 0 0 var(--space-2);
}
.short-note {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.short-note .text-small {
margin: 0;
}
.start-ask {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-3);
}
.start-ask h2 {
margin: 0;
font-size: 1.375rem;
line-height: 1.25;
}
.paycard__math {
margin-top: var(--space-3);
padding: var(--space-2) var(--space-4);
border: 1px solid var(--color-border);   /* the card is plain now, so the receipt gets a thin frame */
border-radius: var(--radius-control);
background: var(--color-surface);
}
.badges {
display: flex;
flex-wrap: wrap;
gap: var(--space-1);
margin-top: var(--space-1);
}
.actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-top: var(--space-3);
}
.actions .icon {
width: 18px;
height: 18px;
}
.payrow + .payrow {
border-top: 1px solid var(--color-border);
}
.payrow__head {
display: flex;
align-items: center;
gap: var(--space-3);
width: 100%;
min-height: 64px;
padding: var(--space-2) 0;
border: 0;
background: none;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
.payrow__left {
display: flex;
flex-direction: column;
align-items: flex-end;
line-height: 1.2;
}
.payrow__left .eyebrow {
font-size: 0.6875rem;
}
.payrow__chev {
color: var(--color-text-muted);
font-size: 1.25rem;
transition: transform var(--speed) var(--ease);
}
.payrow.is-open .payrow__chev {
transform: rotate(90deg);
}
.payrow__body {
padding: 0 0 var(--space-4);
}
.wizard {
display: flex;
flex-direction: column;
min-height: calc(100vh - var(--space-6));
min-height: calc(100dvh - var(--space-6));
padding-top: var(--safe-top);
}
.wizard__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
padding: var(--space-2) 0;
}
.wizard__step {
font-weight: 600;
color: var(--color-text-muted);
}
.wizard__spacer {
width: var(--tap);
}
.wizard__progress {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-1);
margin-bottom: var(--space-4);
}
.wizard__progress span {
height: 6px;
border-radius: var(--radius-pill);
background: var(--color-surface-2);
}
.wizard__progress span.is-done {
background: var(--color-primary);
}
.wizard__body {
flex: 1;
padding-bottom: var(--space-5);
}
.wizard__footer {
position: sticky;
bottom: 0;
margin: 0 calc(-1 * var(--gutter));
padding: var(--space-3) var(--gutter) calc(var(--space-3) + var(--safe-bottom));
background: linear-gradient(to top, var(--color-bg) 80%, transparent);
}
.payday-card .btn {
padding-left: var(--space-3);
padding-right: var(--space-3);
white-space: nowrap;
}
.bill-row {
gap: var(--space-2);
}
.bill-row__tap {
display: flex;
align-items: center;
gap: var(--space-3);
flex: 1;
min-width: 0;
min-height: 56px;
padding: 0;
border: 0;
background: none;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
.bill-row__amount {
font-weight: 700;
}
.sub-row {
align-items: flex-start;
}
.sub-row__use {
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-height: 40px;
font-size: 0.9375rem;
color: var(--color-text-muted);
cursor: pointer;
}
.sub-row__use input {
width: 20px;
height: 20px;
accent-color: var(--color-primary);
}
textarea.input {
min-height: 72px;
resize: vertical;
}
.bill-row__amount-inline {
display: none;
color: var(--color-text);
}
@media (max-width: 599px) {
.bill-row__amount {
display: none;
}
.bill-row__amount-inline {
display: inline;
}
}
.history__sum {
margin: var(--space-3) 0 var(--space-2);
}
.history .row--button {
min-height: 60px;
}
.history__buttons {
margin-top: var(--space-4);
}
.more-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-3);
}
@media (min-width: 900px) {
.more-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.more-tile {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
min-height: 120px;
padding: var(--space-4);
border: 0;
border-radius: var(--radius-card);
background: var(--color-surface);
box-shadow: var(--shadow-card);
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
.more-tile .stat__icon .icon {
width: 28px;
height: 28px;
}
.more-tile__label {
margin-top: auto;
font-size: 1.0625rem;
font-weight: 800;
}
.more-tile__sub {
font-size: 0.875rem;
color: var(--color-text-muted);
}
.more-tile--soon .more-tile__label {
color: var(--color-text-muted);
}
.back-link {
display: inline-flex;
align-items: center;
gap: var(--space-1);
min-height: var(--tap);
color: var(--color-primary-strong);
font-weight: 700;
text-decoration: none;
}
.back-link .icon {
width: 20px;
height: 20px;
}
.search {
position: relative;
display: block;
}
.search .icon {
position: absolute;
left: 14px;
top: 50%;
width: 20px;
height: 20px;
transform: translateY(-50%);
color: var(--color-text-muted);
}
.search .input {
padding-left: 44px;
}
.month-tabs .chip,
.quick-amounts .chip,
.quick-buys .chip {
min-height: 40px;
padding: var(--space-1) var(--space-3);
}
.quick-amounts {
margin-top: var(--space-2);
}
.spend-day + .spend-day {
margin-top: var(--space-3);
}
.spend-day__head {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-2) 0 var(--space-1);
border-bottom: 1px solid var(--color-border);
}
.spend-empty {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-4) 0;
}
.quickbar__usual .chip {
min-height: 40px;
padding: var(--space-1) var(--space-3);
box-shadow: var(--shadow-card);
}
.spend-amount {
font-weight: 700;
}
.limit__right {
display: flex;
align-items: center;
gap: var(--space-2);
color: var(--color-text-muted);
}
.limit--soon .bar__track span {
background: var(--color-careful);
}
.limit--overdue .bar__track span {
background: var(--color-careful);
}
.limit-row {
display: grid;
grid-template-columns: auto minmax(0, 1fr) 120px;
align-items: center;
gap: var(--space-3);
padding: var(--space-2) 0;
}
.limit-row + .limit-row {
border-top: 1px solid var(--color-border);
}
.no-spend-chip .icon,
[data-no-spend] .icon {
width: 18px;
height: 18px;
}
.cat-row {
gap: var(--space-2);
}
.icon-pick {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
gap: var(--space-2);
}
.icon-pick .chip {
justify-content: center;
padding: var(--space-2);
}
.spend-actions {
display: flex;
gap: var(--space-2);
}
.spend-actions > .btn {
flex: 1;
padding-left: var(--space-3);
padding-right: var(--space-3);
}
.card__actions {
margin-top: var(--space-3);
}
.view-switch {
grid-template-columns: 1fr 1fr;
}
.cal__nav {
display: flex;
align-items: center;
gap: var(--space-2);
}
.cal__title {
flex: 1;
text-align: center;
font-size: 1.25rem;
font-weight: 800;
}
.cal__next .icon {
transform: rotate(180deg);
}
.cal {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 4px;
}
.cal__wd {
padding-bottom: var(--space-1);
text-align: center;
font-size: 0.75rem;
font-weight: 800;
text-transform: uppercase;
color: var(--color-text-muted);
}
.cal__cell {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 4px;
min-height: 48px;
padding: 6px 0;
border: 2px solid transparent;
border-radius: var(--radius-control);
background: var(--color-surface-2);
color: inherit;
font: inherit;
font-weight: 700;
cursor: pointer;
}
.cal__cell--empty {
background: transparent;
cursor: default;
}
.cal__cell.is-today {
border-color: var(--color-primary);
}
.cal__cell.is-selected {
background: var(--color-primary);
color: var(--color-on-primary);
}
.cal__dots {
display: flex;
align-items: center;
gap: 4px;
min-height: 9px;
}
.cal__dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-text-muted);
}
.cal__dot--paid {
background: var(--color-good);
}
.cal__dot--payday {
width: 8px;
height: 8px;
border-radius: 2px;
background: var(--color-primary);
transform: rotate(45deg);
}
.cal__dot--overdue {
background: transparent;
box-shadow: inset 0 0 0 2px var(--color-overdue);
}
.cal__cell.is-selected .cal__dot {
outline: 1.5px solid var(--color-on-primary);
}
.cal__legend {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-1) var(--space-3);
}
.cal__legend .cal__dot {
margin-right: 2px;
}
.debt-hero {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-1);
padding: var(--space-5);
text-align: left;
box-shadow: var(--shadow-card);
}
.debt-hero__date {
margin: 0;
font-size: clamp(2.25rem, 10vw, 3rem);
}
.debt-hero__bar {
width: 100%;
margin-top: var(--space-3);
}
.debt-row {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-2) 0 var(--space-3);
}
.debt-row + .debt-row {
border-top: 1px solid var(--color-border);
}
.debt-row .btn {
align-self: flex-start;
}
.debt-row__bal {
display: flex;
flex-direction: column;
align-items: flex-end;
text-align: right;
}
.debt-row__by {
color: var(--color-primary-strong);
font-weight: 600;
}
.payoff-row .datechip {
width: 52px;
}
.payoff-row .datechip strong {
font-size: 0.875rem;
}
.celebrate {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
padding: var(--space-5) 0 var(--space-3);
text-align: center;
overflow: hidden;
}
.confetti {
position: absolute;
inset: 0;
pointer-events: none;
}
.confetti i {
position: absolute;
top: -12px;
width: 8px;
height: 12px;
border-radius: 2px;
opacity: 0;
animation: confetti-fall 1.6s var(--ease) forwards;
}
@keyframes confetti-fall {
0% { opacity: 1; transform: translateY(0) rotate(0deg); }
100% { opacity: 0; transform: translateY(220px) rotate(320deg); }
}
.jar-grid,
.goal-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-4);
}
@media (min-width: 1100px) {
.jar-grid,
.goal-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.jar-card {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.jar-card__top {
display: flex;
align-items: center;
gap: var(--space-4);
width: 100%;
padding: 0;
border: 0;
background: none;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
.jar-card__amount {
font-size: 1.625rem;
font-weight: 800;
letter-spacing: -0.015em;
}
.jar-card__plan {
font-weight: 600;
color: var(--color-primary-strong);
}
.jar-card__late {
color: var(--color-careful);
}
.jar-vis {
display: flex;
flex-direction: column;
align-items: center;
flex-shrink: 0;
}
.jar-vis__lid {
width: 34px;
height: 8px;
border-radius: 4px 4px 2px 2px;
background: var(--tone);
opacity: 0.9;
}
.jar-vis__body {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 64px;
margin-top: 2px;
border: 2px solid var(--tone);
border-radius: 12px 12px 18px 18px;
background: var(--color-surface-2);
overflow: hidden;
}
.jar-vis__fill {
position: absolute;
left: 0;
right: 0;
bottom: 0;
background: var(--tone-soft);
border-top: 3px solid var(--tone);
transition: height 700ms var(--ease);
}
.jar-vis__icon {
position: relative;
display: flex;
color: var(--tone);
}
.jar-card .btn {
padding-inline: var(--space-3);
white-space: nowrap;
}
.goal-grid {
align-items: start;
}
.goal-card {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.goal-card__top {
display: flex;
align-items: center;
gap: var(--space-3);
width: 100%;
padding: 0;
border: 0;
background: none;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
.goal-card__badges {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--space-1);
flex-shrink: 0;
}
.goal-card__line {
display: flex;
justify-content: space-between;
gap: var(--space-3);
font-size: 0.9375rem;
}
.goal-card__open {
align-self: flex-start;
padding-inline: var(--space-2);
}
.goal-card--done .row__title {
color: var(--color-text-muted);
}
.topics {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-3);
}
.topic {
padding: 0;
}
.topic__head {
display: flex;
align-items: center;
gap: var(--space-3);
min-height: var(--tap);
padding: var(--space-3) var(--space-4);
font-weight: 700;
cursor: pointer;
list-style: none;
}
.topic__head::-webkit-details-marker {
display: none;
}
.topic__title {
flex: 1;
}
.topic__chev {
width: 10px;
height: 10px;
border-right: 2px solid var(--color-text-muted);
border-bottom: 2px solid var(--color-text-muted);
transform: rotate(45deg);
transition: transform var(--speed) var(--ease);
}
.topic[open] .topic__chev {
transform: rotate(-135deg);
}
.topic__head:focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: -3px;
border-radius: var(--radius-card);
}
.topic__body {
padding: 0 var(--space-4) var(--space-4);
}
.help-steps {
margin: 0;
padding-left: 1.4em;
}
.help-steps li + li {
margin-top: var(--space-2);
}
.help-steps li::marker {
font-weight: 800;
color: var(--color-primary-strong);
}
.qa + .qa {
padding-top: var(--space-3);
border-top: 1px solid var(--color-border);
}
.qa__q {
margin: 0 0 var(--space-1);
font-weight: 700;
}
.qa__a {
margin: 0;
color: var(--color-text-muted);
}
.words {
margin: 0;
}
.words dt {
font-weight: 700;
}
.words dd {
margin: var(--space-1) 0 var(--space-3);
color: var(--color-text-muted);
}
.formula {
margin: 0;
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-control);
background: var(--color-primary-soft);
font-weight: 600;
}
.home-guide {
display: grid;
gap: var(--space-4);
}
.home-guide__one {
display: flex;
align-items: flex-start;
gap: var(--space-4);
}
.home-guide__one .card__title {
margin: 0 0 var(--space-2);
}
.phone-drawing {
flex-shrink: 0;
width: 84px;
height: auto;
}
.pm-frame {
fill: var(--color-surface-2);
stroke: var(--color-border);
stroke-width: 2;
}
.pm-screen {
fill: var(--color-bg);
}
.pm-line,
.pm-card {
fill: var(--color-surface-2);
}
.pm-bar {
fill: var(--color-surface);
}
.pm-icon {
fill: none;
stroke: var(--color-text);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.pm-dots {
fill: var(--color-text);
}
.pm-ring {
fill: none;
stroke: var(--color-primary);
stroke-width: 3;
}
.license {
margin: 0 0 var(--space-4);
padding: var(--space-3);
border-radius: var(--radius-control);
background: var(--color-surface-2);
font-size: 0.75rem;
white-space: pre-wrap;
word-break: break-word;
}
.help-foot {
text-align: center;
}
@media (min-width: 1100px) {
.home-guide {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.month-nav {
display: flex;
align-items: center;
gap: var(--space-3);
}
.month-nav__title {
flex: 1;
margin: 0;
font-size: 1.3125rem;
font-weight: 800;
text-align: center;
}
.month-nav__next svg {
transform: scaleX(-1);
}
.icon-btn:disabled {
opacity: 0.35;
cursor: default;
}
.bar--tap {
margin: calc(var(--space-2) * -1);
padding: var(--space-2);
border-radius: var(--radius-control);
cursor: pointer;
}
.bar--tap:hover,
.bar--tap:focus-visible {
background: var(--color-surface-2);
}
.cols {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 4px;
align-items: end;
margin-top: var(--space-3);
}
.col {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-1);
min-width: 0;
padding: 0;
border: 0;
background: none;
color: inherit;
font: inherit;
cursor: pointer;
}
.col__bar-wrap {
display: flex;
align-items: flex-end;
width: 100%;
height: 140px;
border-bottom: 1px solid var(--color-border);
}
.col__bar {
display: block;
width: 100%;
max-width: 28px;
margin: 0 auto;
border-radius: 4px 4px 0 0;
background: var(--color-primary);
transition: height 700ms var(--ease);
}
.col__label {
font-size: 0.75rem;
color: var(--color-text-muted);
}
.col__value {
font-size: 0.6875rem;
font-weight: 700;
white-space: nowrap;
visibility: hidden;
}
.col:hover .col__value,
.col:focus-visible .col__value {
visibility: visible;
}
.col:hover .col__bar,
.col:focus-visible .col__bar {
background: var(--color-primary-strong);
}
.col:focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: 2px;
border-radius: 6px;
}
.col--future .col__bar-wrap {
border-bottom-style: dashed;
}
@media (min-width: 900px) {
.col__value {
visibility: visible;
}
}
.numbers summary {
min-height: var(--tap);
display: flex;
align-items: center;
font-weight: 700;
color: var(--color-primary-strong);
cursor: pointer;
}
.num-table {
width: 100%;
border-collapse: collapse;
}
.num-table th,
.num-table td {
padding: var(--space-2) 0;
border-bottom: 1px solid var(--color-border);
text-align: left;
font-weight: 500;
}
.num-table td {
text-align: right;
font-variant-numeric: tabular-nums;
}
.num-table thead th {
font-weight: 700;
color: var(--color-text-muted);
}
.num-table thead th + th {
text-align: right;
}
.wins-card__head {
display: flex;
align-items: center;
gap: var(--space-3);
}
.wins-card__list {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin: var(--space-3) 0 0;
padding: 0;
list-style: none;
}
.wins-card__item {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-pill);
background: var(--color-good-soft);
color: var(--color-good-strong);
font-weight: 600;
font-size: 0.9375rem;
}
.wins-card__item svg {
width: 16px;
height: 16px;
}
.wins-card .two-cols {
margin-top: var(--space-3);
}
.checkin-card {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.checkin-card__top {
display: flex;
align-items: center;
gap: var(--space-3);
}
.checkin-q {
margin: 0 0 var(--space-1);
font-size: 1.25rem;
}
.checkin-log {
margin-top: var(--space-3);
}
.today-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
}
.today-top__hello {
margin: 0;
font-size: 1.125rem;
font-weight: 700;
}
.dash--focus {
display: block;
max-width: 640px;
margin: 0 auto;
}
.streak-line {
display: flex;
align-items: center;
gap: var(--space-2);
margin: var(--space-2) 0 0;
font-size: 0.9375rem;
font-weight: 600;
color: var(--color-good-strong);
}
.streak-line .icon {
width: 18px;
height: 18px;
}
.demo-card {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: var(--space-3);
}
.demo-card .row__main {
flex: 1;
min-width: 0;
}
.demo-card .two-cols {
flex-basis: 100%;
}
.help-short {
font-size: 1.125rem;
font-weight: 600;
}
.help-more {
margin-top: var(--space-2);
}
.help-details {
margin-top: var(--space-3);
}
.help-search {
display: flex;
flex-direction: column;
gap: var(--space-2);
margin: var(--space-4) 0;
}
.help-results {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.help-answer {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.help-answer__q {
font-weight: 700;
}
.hint {
display: flex;
align-items: center;
gap: var(--space-3);
margin-top: var(--space-2);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-control);
background: var(--color-primary-soft);
color: var(--color-text);
font-size: 0.9375rem;
}
.hint p {
flex: 1;
min-width: 0;
}
.hint .btn {
flex-shrink: 0;
}
.quickbar .hint {
margin: 0 0 var(--space-1);
box-shadow: var(--shadow-card);
}