/* Debt-Free & Budget Tracker — stylesheet v2
   Modern, paginated layout with 29 selectable theme presets, each
   available in a light and a dark variant (23 flat-color presets +
   4 gradient-sweep presets + 3 subtle-pattern presets).
   Keep this file in the same folder as the tracker .html file. */

/* ============================================================
   THEME TOKENS
   Every preset defines two blocks — [data-mode="light"] and
   [data-mode="dark"] — that redefine the same set of custom
   properties below. Preset (color/pattern identity) and mode
   (light/dark) are independent axes: switching one never changes
   the other. Everything else in this file reads from these
   variables, so neither axis ever needs a second stylesheet.

   --bg-image/--bg-size are an optional extra layer on top of the
   --bg/--bg-soft tokens — only the gradient/pattern presets (Sunrise,
   Lagoon, Orchard, Contour) set them; every other preset leaves them
   at the :root default (none/auto) and renders as a flat --bg color,
   same as before.
   ============================================================ */
:root{
  --bg:#F6F1E6; --bg-soft:#EFE7D4; --surface:#FFFFFF; --surface-2:#FBF6EA;
  --ink:#3B2F22; --muted:#8B7A5E; --line:#E6D9BC;
  --accent:#D98E2B; --accent-ink:#5C3B0E;
  --good:#4E8F5A; --bad:#D2603F; --info:#4E7FB8;
  --bg-image:none; --bg-size:auto;
  --radius-sm:10px; --radius-md:16px; --radius-lg:22px;
  --shadow-sm:0 2px 8px rgba(60,42,10,0.06);
  --shadow-md:0 8px 24px rgba(60,42,10,0.10);
  --font-display:'Quicksand',sans-serif; --font-body:'Quicksand',sans-serif; --font-mono:'Quicksand',sans-serif;
}
/* Safety fallback for a page that never sets data-theme-preset/data-mode
   at all (shouldn't happen once the picker/toggle have run, but matches
   :root's own values so there's no flash of anything else either way). */
body:not([data-theme-preset]), body:not([data-mode]){
  --bg:#F6F1E6; --bg-soft:#EFE7D4; --surface:#FFFFFF; --surface-2:#FBF6EA;
  --ink:#3B2F22; --muted:#8B7A5E; --line:#E6D9BC;
  --accent:#D98E2B; --accent-ink:#5C3B0E;
  --good:#4E8F5A; --bad:#D2603F; --info:#4E7FB8;
}

/* ---- 1. Meadow (default) ---- */
body[data-theme-preset="meadow"][data-mode="light"]{
  --bg:#F6F1E6; --bg-soft:#EFE7D4; --surface:#FFFFFF; --surface-2:#FBF6EA;
  --ink:#3B2F22; --muted:#8B7A5E; --line:#E6D9BC;
  --accent:#D98E2B; --accent-ink:#5C3B0E;
  --good:#4E8F5A; --bad:#D2603F; --info:#4E7FB8;
}
body[data-theme-preset="meadow"][data-mode="dark"]{
  --bg:#1C1811; --bg-soft:#252018; --surface:#2D2720; --surface-2:#362F26;
  --ink:#F1ECE4; --muted:#B8A894; --line:#4B3F30;
  --accent:#E8B673; --accent-ink:#E0CAAE;
  --good:#7ECE92; --bad:#DE8D7C; --info:#81A9DA;
}
/* ---- 2. Dusk ---- */
body[data-theme-preset="dusk"][data-mode="light"]{
  --bg:#F6F3EF; --bg-soft:#EDE7DE; --surface:#FFFFFF; --surface-2:#F9F8F6;
  --ink:#372C1B; --muted:#8D7A5E; --line:#E5DDD1;
  --accent:#C68B2F; --accent-ink:#3F2E12;
  --good:#3F8D53; --bad:#BE4E37; --info:#4375B1;
}
body[data-theme-preset="dusk"][data-mode="dark"]{
  --bg:#1B1712; --bg-soft:#221C15; --surface:#262019; --surface-2:#2C251C;
  --ink:#F1E7D3; --muted:#B2A181; --line:#463A29;
  --accent:#F0B457; --accent-ink:#E0CCAE;
  --good:#7FCB86; --bad:#EF8768; --info:#7CA9E0;
}
/* ---- 3. Harbor ---- */
body[data-theme-preset="harbor"][data-mode="light"]{
  --bg:#EFF5F6; --bg-soft:#E3EEF0; --surface:#FFFFFF; --surface-2:#F5FAFB;
  --ink:#173238; --muted:#5E7C82; --line:#CFE2E5;
  --accent:#1E8C99; --accent-ink:#0B3A40;
  --good:#3F9E6B; --bad:#D0603F; --info:#2D6FA8;
}
body[data-theme-preset="harbor"][data-mode="dark"]{
  --bg:#111B1C; --bg-soft:#182425; --surface:#202B2D; --surface-2:#263436;
  --ink:#E4F0F1; --muted:#94B4B8; --line:#30484B;
  --accent:#73DCE8; --accent-ink:#AEDBE0;
  --good:#7ECE92; --bad:#DE8D7C; --info:#81A9DA;
}
/* ---- 4. Midnight ---- */
body[data-theme-preset="midnight"][data-mode="light"]{
  --bg:#EFF0F6; --bg-soft:#DEE1ED; --surface:#FFFFFF; --surface-2:#F6F6F9;
  --ink:#1B2137; --muted:#5E698D; --line:#D1D6E5;
  --accent:#2F52C6; --accent-ink:#121D3F;
  --good:#3F8D53; --bad:#BE4E37; --info:#4375B1;
}
body[data-theme-preset="midnight"][data-mode="dark"]{
  --bg:#10141F; --bg-soft:#151A28; --surface:#1A2032; --surface-2:#1E2537;
  --ink:#E7EAF5; --muted:#8F97B3; --line:#2C3450;
  --accent:#6E8CF0; --accent-ink:#AEB9E0;
  --good:#63C98A; --bad:#EA7B72; --info:#7FA6F2;
}
/* ---- 5. Bloom ---- */
body[data-theme-preset="bloom"][data-mode="light"]{
  --bg:#FBF0F1; --bg-soft:#F6E4E6; --surface:#FFFFFF; --surface-2:#FDF3F4;
  --ink:#4A2027; --muted:#9C6E76; --line:#F0D2D6;
  --accent:#D9587B; --accent-ink:#59101F;
  --good:#4E9166; --bad:#C64A3F; --info:#5E7CB0;
}
body[data-theme-preset="bloom"][data-mode="dark"]{
  --bg:#1C1114; --bg-soft:#25181C; --surface:#2D2023; --surface-2:#36262A;
  --ink:#F1E4E8; --muted:#B8949E; --line:#4B3037;
  --accent:#E87393; --accent-ink:#E0AEBB;
  --good:#7ECE92; --bad:#DE8D7C; --info:#81A9DA;
}
/* ---- 6. Fern ---- */
body[data-theme-preset="fern"][data-mode="light"]{
  --bg:#EEF3EA; --bg-soft:#E3EBDC; --surface:#FFFFFF; --surface-2:#F5F8F1;
  --ink:#1F2E1A; --muted:#6C7C5E; --line:#D3E0C6;
  --accent:#4B7F3C; --accent-ink:#17280F;
  --good:#3F8F52; --bad:#C15C3E; --info:#3F7A8C;
}
body[data-theme-preset="fern"][data-mode="dark"]{
  --bg:#141C11; --bg-soft:#1B2518; --surface:#232D20; --surface-2:#2A3626;
  --ink:#E7F1E4; --muted:#9CB894; --line:#364B30;
  --accent:#8DE873; --accent-ink:#B9E0AE;
  --good:#7ECE92; --bad:#DE8D7C; --info:#81A9DA;
}
/* ---- 7. Plum ---- */
body[data-theme-preset="plum"][data-mode="light"]{
  --bg:#F2EFF6; --bg-soft:#E6DEED; --surface:#FFFFFF; --surface-2:#F7F6F9;
  --ink:#2A1B37; --muted:#775E8D; --line:#DCD1E5;
  --accent:#7F2FC6; --accent-ink:#2A123F;
  --good:#3F8D53; --bad:#BE4E37; --info:#4375B1;
}
body[data-theme-preset="plum"][data-mode="dark"]{
  --bg:#1B1420; --bg-soft:#221A29; --surface:#271E30; --surface-2:#2C2237;
  --ink:#EFE4F5; --muted:#AC97BD; --line:#3E304C;
  --accent:#B984E8; --accent-ink:#C8AEE0;
  --good:#7BCB93; --bad:#EA8478; --info:#8AA6EE;
}
/* ---- 8. Terracotta ---- */
body[data-theme-preset="terracotta"][data-mode="light"]{
  --bg:#F7EEE6; --bg-soft:#F0E0D2; --surface:#FFFFFF; --surface-2:#FBF3EC;
  --ink:#3E2417; --muted:#93715A; --line:#E9D2BC;
  --accent:#C1592F; --accent-ink:#4E1D0A;
  --good:#4C8F5E; --bad:#B7412A; --info:#4E6E9A;
}
body[data-theme-preset="terracotta"][data-mode="dark"]{
  --bg:#1C1511; --bg-soft:#251C18; --surface:#2D2320; --surface-2:#362B26;
  --ink:#F1E8E4; --muted:#B89E94; --line:#4B3730;
  --accent:#E89473; --accent-ink:#E0BCAE;
  --good:#7ECE92; --bad:#DE8D7C; --info:#81A9DA;
}
/* ---- 9. Slate ---- */
body[data-theme-preset="slate"][data-mode="light"]{
  --bg:#F1F2F3; --bg-soft:#E6E8EA; --surface:#FFFFFF; --surface-2:#F7F8F9;
  --ink:#23272C; --muted:#6C737B; --line:#DBDEE2;
  --accent:#3E6BD1; --accent-ink:#0E1F45;
  --good:#3E9457; --bad:#C74C3B; --info:#3E6BD1;
}
body[data-theme-preset="slate"][data-mode="dark"]{
  --bg:#11151C; --bg-soft:#181C25; --surface:#20242D; --surface-2:#262B36;
  --ink:#E4E8F1; --muted:#949FB8; --line:#30384B;
  --accent:#7397E8; --accent-ink:#AEBDE0;
  --good:#7ECE92; --bad:#DE8D7C; --info:#81A9DA;
}
/* ---- 10. Citrus ---- */
body[data-theme-preset="citrus"][data-mode="light"]{
  --bg:#FBF6E4; --bg-soft:#F4EBC6; --surface:#FFFFFF; --surface-2:#FCF9EA;
  --ink:#33280A; --muted:#8C7C3E; --line:#EBDD9C;
  --accent:#E0A014; --accent-ink:#402A02;
  --good:#4C8F3E; --bad:#D2552F; --info:#3F82AE;
}
body[data-theme-preset="citrus"][data-mode="dark"]{
  --bg:#1C1911; --bg-soft:#252118; --surface:#2D2920; --surface-2:#363126;
  --ink:#F1EDE4; --muted:#B8AC94; --line:#4B4230;
  --accent:#E8C373; --accent-ink:#E0D0AE;
  --good:#7ECE92; --bad:#DE8D7C; --info:#81A9DA;
}

/* ---- 11. Sunrise (warm gradient sweep) ---- */
body[data-theme-preset="sunrise"][data-mode="light"]{
  --bg:#F6F2EF; --bg-soft:#EDE5DE; --surface:#FFFFFF; --surface-2:#F9F7F6;
  --ink:#37281B; --muted:#8D745E; --line:#E5DBD1;
  --accent:#C6752F; --accent-ink:#3F2712;
  --good:#3F8D53; --bad:#BE4E37; --info:#4375B1;
  --bg-image:linear-gradient(135deg, #F6F2EE 0%, #F3F4EB 100%);
}
body[data-theme-preset="sunrise"][data-mode="dark"]{
  --bg:#1C1711; --bg-soft:#251E18; --surface:#2D2620; --surface-2:#362D26;
  --ink:#F1EAE4; --muted:#B8A594; --line:#4B3C30;
  --accent:#E8A973; --accent-ink:#E0C5AE;
  --good:#7ECE92; --bad:#DE8D7C; --info:#81A9DA;
  --bg-image:linear-gradient(135deg, #1C1712 0%, #202216 100%);
}
/* ---- 12. Lagoon (cool gradient sweep) ---- */
body[data-theme-preset="lagoon"][data-mode="light"]{
  --bg:#EFF4F6; --bg-soft:#DEE9ED; --surface:#FFFFFF; --surface-2:#F6F8F9;
  --ink:#1B3037; --muted:#5E818D; --line:#D1E0E5;
  --accent:#2FA0C6; --accent-ink:#12343F;
  --good:#3F8D53; --bad:#BE4E37; --info:#4375B1;
  --bg-image:linear-gradient(135deg, #EEF4F6 0%, #EBECF4 100%);
}
body[data-theme-preset="lagoon"][data-mode="dark"]{
  --bg:#111A1C; --bg-soft:#182225; --surface:#202A2D; --surface-2:#263236;
  --ink:#E4EEF1; --muted:#94AFB8; --line:#30444B;
  --accent:#73CBE8; --accent-ink:#AED4E0;
  --good:#7ECE92; --bad:#DE8D7C; --info:#81A9DA;
  --bg-image:linear-gradient(135deg, #12191C 0%, #161722 100%);
}
/* ---- 13. Orchard (dot-grid texture) ---- */
body[data-theme-preset="orchard"][data-mode="light"]{
  --bg:#F2F6EF; --bg-soft:#E5EDDE; --surface:#FFFFFF; --surface-2:#F7F9F6;
  --ink:#28371B; --muted:#748D5E; --line:#DBE5D1;
  --accent:#75C62F; --accent-ink:#273F12;
  --good:#3F8D53; --bad:#BE4E37; --info:#4375B1;
  --bg-image:radial-gradient(circle, rgba(40,55,27,.07) 1px, transparent 1.6px);
  --bg-size:18px 18px;
}
body[data-theme-preset="orchard"][data-mode="dark"]{
  --bg:#171C11; --bg-soft:#1E2518; --surface:#262D20; --surface-2:#2D3626;
  --ink:#EAF1E4; --muted:#A5B894; --line:#3C4B30;
  --accent:#A9E873; --accent-ink:#C5E0AE;
  --good:#7ECE92; --bad:#DE8D7C; --info:#81A9DA;
  --bg-image:radial-gradient(circle, rgba(234,241,228,.06) 1px, transparent 1.6px);
  --bg-size:18px 18px;
}
/* ---- 14. Contour (topographic-line texture) ---- */
body[data-theme-preset="contour"][data-mode="light"]{
  --bg:#EFF1F6; --bg-soft:#DEE2ED; --surface:#FFFFFF; --surface-2:#F6F7F9;
  --ink:#1B2337; --muted:#5E6C8D; --line:#D1D7E5;
  --accent:#2F5CC6; --accent-ink:#12203F;
  --good:#3F8D53; --bad:#BE4E37; --info:#4375B1;
  --bg-image:repeating-linear-gradient(120deg, rgba(27,35,55,.05) 0px, rgba(27,35,55,.05) 1px, transparent 1px, transparent 15px);
}
body[data-theme-preset="contour"][data-mode="dark"]{
  --bg:#11151C; --bg-soft:#181C25; --surface:#20242D; --surface-2:#262B36;
  --ink:#E4E8F1; --muted:#949FB8; --line:#30384B;
  --accent:#7396E8; --accent-ink:#AEBDE0;
  --good:#7ECE92; --bad:#DE8D7C; --info:#81A9DA;
  --bg-image:repeating-linear-gradient(120deg, rgba(228,232,241,.045) 0px, rgba(228,232,241,.045) 1px, transparent 1px, transparent 15px);
}

/* ---- 15. Raspberry ---- */
body[data-theme-preset="raspberry"][data-mode="light"]{
  --bg:#FBF0F2; --bg-soft:#F5E1E5; --surface:#FFFFFF; --surface-2:#FDF4F5;
  --ink:#4A1420; --muted:#9C5E6E; --line:#F0D0D6;
  --accent:#C6294B; --accent-ink:#4A0A18;
  --good:#4E9166; --bad:#C64A3F; --info:#5E7CB0;
}
body[data-theme-preset="raspberry"][data-mode="dark"]{
  --bg:#1C0F13; --bg-soft:#25161B; --surface:#2D1D22; --surface-2:#36232A;
  --ink:#F1DCE2; --muted:#B88C96; --line:#4B2A32;
  --accent:#E85C81; --accent-ink:#E0A4B4;
  --good:#7ECE92; --bad:#DE8D7C; --info:#81A9DA;
}
/* ---- 16. Mint ---- */
body[data-theme-preset="mint"][data-mode="light"]{
  --bg:#EEF7F3; --bg-soft:#DFEEE7; --surface:#FFFFFF; --surface-2:#F5FAF8;
  --ink:#123328; --muted:#5E8C7A; --line:#CFE7DC;
  --accent:#1FA383; --accent-ink:#0A3D30;
  --good:#3F8D53; --bad:#BE4E37; --info:#4375B1;
}
body[data-theme-preset="mint"][data-mode="dark"]{
  --bg:#0F1B17; --bg-soft:#16241F; --surface:#1D2C26; --surface-2:#22342D;
  --ink:#DFF1EA; --muted:#8FB8A9; --line:#2E4A40;
  --accent:#5EDCBA; --accent-ink:#AEE0D2;
  --good:#7ECE92; --bad:#DE8D7C; --info:#81A9DA;
}
/* ---- 17. Lavender ---- */
body[data-theme-preset="lavender"][data-mode="light"]{
  --bg:#F4F1FA; --bg-soft:#E8E2F3; --surface:#FFFFFF; --surface-2:#F8F6FC;
  --ink:#2B2140; --muted:#7C6E96; --line:#DDD3EC;
  --accent:#8067D6; --accent-ink:#2E2050;
  --good:#3F8D53; --bad:#BE4E37; --info:#4375B1;
}
body[data-theme-preset="lavender"][data-mode="dark"]{
  --bg:#161320; --bg-soft:#1D1929; --surface:#242032; --surface-2:#2A2539;
  --ink:#E9E4F5; --muted:#A79ABE; --line:#392F4C;
  --accent:#A594EE; --accent-ink:#C8BEE0;
  --good:#7ECE92; --bad:#DE8D7C; --info:#81A9DA;
}
/* ---- 18. Navy ---- */
body[data-theme-preset="navy"][data-mode="light"]{
  --bg:#EEF2F7; --bg-soft:#DEE6F0; --surface:#FFFFFF; --surface-2:#F5F8FB;
  --ink:#101E33; --muted:#556A8D; --line:#CFDBEC;
  --accent:#1D4E89; --accent-ink:#0A1E38;
  --good:#3F8D53; --bad:#BE4E37; --info:#4375B1;
}
body[data-theme-preset="navy"][data-mode="dark"]{
  --bg:#0D131F; --bg-soft:#131A28; --surface:#182132; --surface-2:#1C2738;
  --ink:#DEE6F5; --muted:#8797B8; --line:#2A3650;
  --accent:#5C8CE0; --accent-ink:#AEC3E0;
  --good:#7ECE92; --bad:#DE8D7C; --info:#81A9DA;
}
/* ---- 19. Mustard ---- */
body[data-theme-preset="mustard"][data-mode="light"]{
  --bg:#F8F4E2; --bg-soft:#EFE6C2; --surface:#FFFFFF; --surface-2:#FBF8EA;
  --ink:#332B0A; --muted:#8C7E3E; --line:#E7DC9C;
  --accent:#B8860B; --accent-ink:#3F3202;
  --good:#4C8F3E; --bad:#D2552F; --info:#3F82AE;
}
body[data-theme-preset="mustard"][data-mode="dark"]{
  --bg:#1B1710; --bg-soft:#221D14; --surface:#2A241A; --surface-2:#322B1F;
  --ink:#F0EAD8; --muted:#B8A97E; --line:#453B27;
  --accent:#E0B84D; --accent-ink:#E0D0A0;
  --good:#7ECE92; --bad:#DE8D7C; --info:#81A9DA;
}
/* ---- 20. Charcoal ---- */
body[data-theme-preset="charcoal"][data-mode="light"]{
  --bg:#F1F1F2; --bg-soft:#E4E4E6; --surface:#FFFFFF; --surface-2:#F8F8F8;
  --ink:#202124; --muted:#6C6D72; --line:#D7D7DA;
  --accent:#52565E; --accent-ink:#1A1B1E;
  --good:#3E9457; --bad:#C74C3B; --info:#3E6BD1;
}
body[data-theme-preset="charcoal"][data-mode="dark"]{
  --bg:#131315; --bg-soft:#19191C; --surface:#202023; --surface-2:#26262A;
  --ink:#E7E7E9; --muted:#98999E; --line:#333338;
  --accent:#9598A3; --accent-ink:#C8C9CE;
  --good:#7ECE92; --bad:#DE8D7C; --info:#81A9DA;
}
/* ---- 21. Sage ---- */
body[data-theme-preset="sage"][data-mode="light"]{
  --bg:#F1F4EE; --bg-soft:#E5EBDE; --surface:#FFFFFF; --surface-2:#F7F9F5;
  --ink:#242E1F; --muted:#71805E; --line:#DAE3CE;
  --accent:#7A9471; --accent-ink:#28331F;
  --good:#3F8F52; --bad:#C15C3E; --info:#3F7A8C;
}
body[data-theme-preset="sage"][data-mode="dark"]{
  --bg:#131912; --bg-soft:#192018; --surface:#20271E; --surface-2:#262E23;
  --ink:#E6EDE1; --muted:#A0B393; --line:#374332;
  --accent:#A3C494; --accent-ink:#C6DCB9;
  --good:#7ECE92; --bad:#DE8D7C; --info:#81A9DA;
}
/* ---- 22. Coral ---- */
body[data-theme-preset="coral"][data-mode="light"]{
  --bg:#FBF1EE; --bg-soft:#F5E3DC; --surface:#FFFFFF; --surface-2:#FDF5F2;
  --ink:#4A2418; --muted:#9C6E5E; --line:#F0D8CE;
  --accent:#F0725A; --accent-ink:#5C2013;
  --good:#4E9166; --bad:#C64A3F; --info:#5E7CB0;
}
body[data-theme-preset="coral"][data-mode="dark"]{
  --bg:#1C1310; --bg-soft:#251A16; --surface:#2D211C; --surface-2:#362822;
  --ink:#F1E3DC; --muted:#B89A8C; --line:#4B342C;
  --accent:#F58A73; --accent-ink:#E0B4A8;
  --good:#7ECE92; --bad:#DE8D7C; --info:#81A9DA;
}
/* ---- 23. Sky ---- */
body[data-theme-preset="sky"][data-mode="light"]{
  --bg:#EEF6FA; --bg-soft:#DDEBF2; --surface:#FFFFFF; --surface-2:#F5FAFC;
  --ink:#122A38; --muted:#57798D; --line:#CFE2EC;
  --accent:#4FA7D9; --accent-ink:#123048;
  --good:#3F8D53; --bad:#BE4E37; --info:#4375B1;
}
body[data-theme-preset="sky"][data-mode="dark"]{
  --bg:#0E171D; --bg-soft:#151F26; --surface:#1B262E; --surface-2:#202D36;
  --ink:#DFEDF5; --muted:#89A9B8; --line:#2C4150;
  --accent:#7EC9EE; --accent-ink:#AED8E0;
  --good:#7ECE92; --bad:#DE8D7C; --info:#81A9DA;
}
/* ---- 24. Wine ---- */
body[data-theme-preset="wine"][data-mode="light"]{
  --bg:#F7EEF0; --bg-soft:#EFDCE0; --surface:#FFFFFF; --surface-2:#FBF3F4;
  --ink:#3E1420; --muted:#8F5A67; --line:#E9CCD2;
  --accent:#7A2138; --accent-ink:#2E0913;
  --good:#4C8F5E; --bad:#B7412A; --info:#4E6E9A;
}
body[data-theme-preset="wine"][data-mode="dark"]{
  --bg:#1C1013; --bg-soft:#251519; --surface:#2D191F; --surface-2:#361E25;
  --ink:#F1DEE2; --muted:#B88894; --line:#4B2530;
  --accent:#C25772; --accent-ink:#E0A8B4;
  --good:#7ECE92; --bad:#DE8D7C; --info:#81A9DA;
}
/* ---- 25. Forest ---- */
body[data-theme-preset="forest"][data-mode="light"]{
  --bg:#EEF3EE; --bg-soft:#DDE9DD; --surface:#FFFFFF; --surface-2:#F5F9F5;
  --ink:#12271A; --muted:#57795E; --line:#CFE0CF;
  --accent:#2C5F3C; --accent-ink:#0D2214;
  --good:#3E9457; --bad:#C74C3B; --info:#3E6BD1;
}
body[data-theme-preset="forest"][data-mode="dark"]{
  --bg:#0D160F; --bg-soft:#131F15; --surface:#18261A; --surface-2:#1D2D1F;
  --ink:#DFEFE2; --muted:#87AB8F; --line:#2A4130;
  --accent:#5C9E6E; --accent-ink:#AED4B4;
  --good:#7ECE92; --bad:#DE8D7C; --info:#81A9DA;
}
/* ---- 26. Copper ---- */
body[data-theme-preset="copper"][data-mode="light"]{
  --bg:#F8F0E6; --bg-soft:#F0E0CB; --surface:#FFFFFF; --surface-2:#FBF6EC;
  --ink:#3E2810; --muted:#93765A; --line:#E9D6BB;
  --accent:#B5651D; --accent-ink:#4E2508;
  --good:#4C8F5E; --bad:#B7412A; --info:#4E6E9A;
}
body[data-theme-preset="copper"][data-mode="dark"]{
  --bg:#1C160F; --bg-soft:#251D14; --surface:#2D241A; --surface-2:#362B1F;
  --ink:#F1E7DC; --muted:#B8A38C; --line:#4B3B2A;
  --accent:#E09455; --accent-ink:#E0BFA0;
  --good:#7ECE92; --bad:#DE8D7C; --info:#81A9DA;
}
/* ---- 27. Aurora (green-violet gradient sweep) ---- */
body[data-theme-preset="aurora"][data-mode="light"]{
  --bg:#F1F4F0; --bg-soft:#E2ECE4; --surface:#FFFFFF; --surface-2:#F7FAF7;
  --ink:#1B2E22; --muted:#5E8D71; --line:#D1E5D6;
  --accent:#3FBF8F; --accent-ink:#123F2A;
  --good:#3F8D53; --bad:#BE4E37; --info:#4375B1;
  --bg-image:linear-gradient(135deg, #EAF6EE 0%, #F0ECF6 100%);
}
body[data-theme-preset="aurora"][data-mode="dark"]{
  --bg:#101A15; --bg-soft:#16221B; --surface:#1C2921; --surface-2:#223027;
  --ink:#E4F1E8; --muted:#8FB8A0; --line:#304B38;
  --accent:#66E0B0; --accent-ink:#AEE0C8;
  --good:#7ECE92; --bad:#DE8D7C; --info:#81A9DA;
  --bg-image:linear-gradient(135deg, #101A15 0%, #151A22 100%);
}
/* ---- 28. Sunset (pink-orange gradient sweep) ---- */
body[data-theme-preset="sunset"][data-mode="light"]{
  --bg:#FBF1EE; --bg-soft:#F6E2DA; --surface:#FFFFFF; --surface-2:#FDF6F3;
  --ink:#3E1E17; --muted:#9C6E5E; --line:#F0D6CC;
  --accent:#E85C6E; --accent-ink:#4E1A1F;
  --good:#3F8D53; --bad:#BE4E37; --info:#4375B1;
  --bg-image:linear-gradient(135deg, #FBEAE0 0%, #F6E0EC 100%);
}
body[data-theme-preset="sunset"][data-mode="dark"]{
  --bg:#1C1310; --bg-soft:#251A18; --surface:#2D211E; --surface-2:#362824;
  --ink:#F1E1DC; --muted:#B8968C; --line:#4B332C;
  --accent:#F08A96; --accent-ink:#E0B4B8;
  --good:#7ECE92; --bad:#DE8D7C; --info:#81A9DA;
  --bg-image:linear-gradient(135deg, #1C1310 0%, #201820 100%);
}
/* ---- 29. Honeycomb (crosshatch texture) ---- */
body[data-theme-preset="honeycomb"][data-mode="light"]{
  --bg:#F6F3EA; --bg-soft:#ECE4CD; --surface:#FFFFFF; --surface-2:#FAF7EF;
  --ink:#332B18; --muted:#8C7F5E; --line:#E5D9B6;
  --accent:#D9A02F; --accent-ink:#402F0A;
  --good:#3F8D53; --bad:#BE4E37; --info:#4375B1;
  --bg-image:repeating-linear-gradient(60deg, rgba(51,43,24,.05) 0px, rgba(51,43,24,.05) 1px, transparent 1px, transparent 14px), repeating-linear-gradient(-60deg, rgba(51,43,24,.05) 0px, rgba(51,43,24,.05) 1px, transparent 1px, transparent 14px);
}
body[data-theme-preset="honeycomb"][data-mode="dark"]{
  --bg:#1B1710; --bg-soft:#221D14; --surface:#2A241A; --surface-2:#322B1F;
  --ink:#F0EAD8; --muted:#B8A97E; --line:#453B27;
  --accent:#E8C373; --accent-ink:#E0D0AE;
  --good:#7ECE92; --bad:#DE8D7C; --info:#81A9DA;
  --bg-image:repeating-linear-gradient(60deg, rgba(240,234,216,.04) 0px, rgba(240,234,216,.04) 1px, transparent 1px, transparent 14px), repeating-linear-gradient(-60deg, rgba(240,234,216,.04) 0px, rgba(240,234,216,.04) 1px, transparent 1px, transparent 14px);
}


/* ============================================================
   BASE
   ============================================================ */
*{box-sizing:border-box;}
/* The native `hidden` attribute must always win over any author rule that
   sets `display` unconditionally (e.g. .auth-loading-box below) — without
   this, an element with `hidden` in its HTML but a plain `display:flex`
   class rule shows up anyway, because author styles beat the browser's own
   `[hidden]{display:none}` default regardless of selector specificity. This
   is what let the sign-in loading card render at the same time as the
   sign-in form on every page load. */
[hidden]{display:none !important;}
html{-webkit-text-size-adjust:100%; scroll-padding-top:env(safe-area-inset-top, 0px);}
/* Backstop against any single element quietly forcing the whole page
   wider than the viewport (see .xl-user-wrap below for the case that
   actually did this on narrow phones) — deliberately horizontal-
   scrolling strips like .tabs-outer/.page-nav scope overflow-x:auto on
   themselves, so this doesn't affect them. */
html,body{overflow-x:hidden;}
body{
  margin:0; background-color:var(--bg); color:var(--ink);
  /* The gradient/pattern presets layer a background-image on top of the
     flat --bg color via these two tokens; every other preset leaves them
     at the :root default (none/auto), so this is a no-op for them. */
  background-image:var(--bg-image); background-size:var(--bg-size); background-attachment:fixed;
  font-family:var(--font-body); line-height:1.55; -webkit-font-smoothing:antialiased;
  min-height:100vh; transition:background-color .25s ease, color .25s ease;
  /* When installed as an app, keep content clear of the notch/status bar
     and the home-indicator area. env() is 0px in an ordinary browser tab. */
  padding-top:env(safe-area-inset-top, 0px);
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
h1,h2,h3{font-family:var(--font-display); margin:0; letter-spacing:0; color:var(--ink);}
.mono{font-family:var(--font-mono);}
a{color:var(--accent);}
/* Form controls don't inherit the page font by default — the browser gives
   them its own UI font instead — so every input/select/textarea added by
   app.js (item labels, amounts, descriptions, category names, budgets...)
   rendered in a different font than the rest of the page until this rule
   forced them to match. */
button,input,select,textarea{font-family:inherit;}
::selection{background:var(--accent); color:#fff;}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

.app-shell{max-width:1040px; margin:0 auto; padding:0 20px 60px; position:relative; z-index:1;}

/* ============================================================
   TOP BAR — brand, clock/countdown, excel + settings toolbar
   ============================================================ */
.topbar{padding:22px 0 14px;}
.brand-row{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;}
.brand{display:flex; align-items:center; gap:10px;}
.brand-mark{font-size:26px; line-height:1;}
.brand-text h1{font-size:clamp(19px,2.6vw,24px); font-weight:700;}
.brand-text .tag{font-size:12px; color:var(--muted); margin-top:1px;}

.meta-chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px;}
.chip{font-family:var(--font-mono); border:1px solid var(--line); background:var(--surface); border-radius:var(--radius-sm); padding:8px 14px; display:flex; flex-direction:column; gap:2px; min-width:132px; box-shadow:var(--shadow-sm);}
.chip .lbl{font-size:9.5px; letter-spacing:.04em; color:var(--muted); font-family:var(--font-display); font-weight:600;}
.chip .val{font-size:16px; font-weight:700; color:var(--ink);}
.chip.countdown .val{color:var(--accent);}
.chip.level .val{color:var(--accent);}
.chip.streak .val{color:var(--bad);}
.chip.streak.streak-zero .val{color:var(--muted);} /* no streak yet today — don't flex a fire emoji at 0 */
.chip.outstanding .val{color:var(--bad);}
.chip.outstanding.clear .val{color:var(--good);} /* nothing left owing on any debt */
.chip.net .val{color:var(--good);}
.chip.net.bad .val{color:var(--bad);} /* this month is running a shortfall, not a surplus */
.chip .val span{font-size:10.5px; color:var(--muted); font-weight:400; margin-left:4px; font-family:var(--font-body);}

/* toolbar (excel + currency/payday + user + theme) */
.toolbar{margin-top:14px; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface); display:flex; flex-wrap:wrap; align-items:center; gap:8px; box-shadow:var(--shadow-sm);}
.toolbar .xl-title{font-family:var(--font-display); font-weight:700; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-right:2px;}
.xl-btn{font-family:var(--font-display); font-weight:600; font-size:12.5px; padding:7px 12px; border-radius:10px; border:1px solid var(--line); background:transparent; color:var(--ink); cursor:pointer; display:inline-flex; align-items:center; gap:5px; transition:background .15s ease,border-color .15s ease;}
.xl-btn:hover{background:var(--bg-soft); border-color:var(--accent);}
.xl-btn:disabled{opacity:.4; cursor:default; pointer-events:none;}
.xl-btn.primary{background:var(--accent); border-color:var(--accent); color:#fff;}
.xl-btn.primary:hover{filter:brightness(.94);}
.xl-set{font-size:12px; color:var(--muted); display:inline-flex; align-items:center; gap:5px; font-weight:600;}
.xl-set select{font-family:inherit; font-size:12px; padding:5px 7px; border-radius:8px; border:1px solid var(--line); background:var(--bg-soft); color:var(--ink);}
/* Two explicit rows — Undo/Redo/Settings on one line, the signed-in
   email + Sign out on the other — rather than one long wrapping cluster.
   Each row can still wrap on its own on narrow phones (flex-wrap on the
   rows below) without the two groups mixing into each other; this is
   also what keeps the whole page from quietly overflowing past the
   right edge on narrow phones the way the old single-row cluster did
   (see the html,body overflow-x:hidden backstop above, added for that). */
.xl-user-wrap{display:flex; flex-direction:column; align-items:flex-end; gap:6px; margin-left:auto;}
.xl-actions-row,.xl-account-row{display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:6px;}
.xl-user{font-size:12.5px; font-weight:700; color:var(--ink);}
.xl-status{width:100%; font-size:11.5px; color:var(--muted); margin-top:2px;}

/* theme picker */
.theme-picker{display:inline-flex; align-items:center; gap:6px; margin-left:6px; position:relative;}
.theme-picker-label{font-size:11px; color:var(--muted); font-weight:600;}
.theme-swatches{display:flex; gap:5px; flex-wrap:wrap;}
.theme-swatch{width:22px; height:22px; border-radius:50%; border:2px solid var(--surface); box-shadow:0 0 0 1px var(--line); cursor:pointer; padding:0; position:relative;}
.theme-swatch.active{box-shadow:0 0 0 2px var(--accent);}
/* Icon-only variant of .xl-btn — the light/dark mode toggle sits with the
   other top-right toolbar controls (see #theme-toggle-btn in sign-in.html)
   rather than floating fixed on the page like its old, dead incarnation did. */
.theme-toggle{padding:7px 10px; font-size:14px; line-height:1;}
/* Same icon-only sizing, for the gear that opens the Settings page (see
   #page-settings) — sits with Undo/Redo rather than as a page-nav tab,
   so it needs its own small button here instead of .page-nav-btn's
   larger, labeled tab styling. */
#settings-nav-btn{padding:7px 10px; font-size:14px; line-height:1;}
/* Same icon-only sizing as .theme-toggle — see #ambient-toggle-btn in
   sign-in.html / ambient-audio.js. .active marks the synthesized ambient
   pad as currently on, matching the accent-outline convention .theme-swatch
   .active and .pet-swatch.active already use elsewhere in this toolbar. */
.ambient-toggle{padding:7px 10px; font-size:14px; line-height:1;}
.ambient-toggle.active{border-color:var(--accent); background:var(--bg-soft);}
/* Same icon-only sizing/active convention as .ambient-toggle, for the
   daily-reminder toggle in the Settings page's Reminders section. */
.reminder-toggle{padding:7px 10px; font-size:14px; line-height:1;}
.reminder-toggle.active{border-color:var(--accent); background:var(--bg-soft);}
.reminder-toggle:disabled{opacity:.4; cursor:not-allowed;}
.pet-swatches{display:flex; gap:5px; flex-wrap:wrap;}
.weather-swatches{display:flex; gap:5px; flex-wrap:wrap;}
.pet-swatch{width:24px; height:24px; border-radius:50%; border:2px solid var(--surface); box-shadow:0 0 0 1px var(--line); cursor:pointer; padding:0; position:relative; background:var(--bg-soft); font-size:13px; line-height:1; display:flex; align-items:center; justify-content:center;}
.pet-swatch.active{box-shadow:0 0 0 2px var(--accent);}

/* ============================================================
   MONTH PICKER + PERIOD BAR (persists above page nav)
   A fixed-width prev/current/next control replaces what used to be one
   .tab button per tracked month in a horizontally-scrolling strip — that
   grew unbounded as more months got added. The dropdown (.month-picker-menu)
   reuses the same status-dot convention (grey/gold/green = empty/partial/
   complete) the old tabs used.
   ============================================================ */
.month-bar{margin:18px 0 0;}
.month-picker{display:flex; align-items:center; gap:8px;}
.month-nav-btn{font-family:var(--font-display); font-weight:700; font-size:16px; line-height:1; padding:6px 12px; border-radius:10px; border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer;}
.month-nav-btn:disabled{opacity:.35; cursor:not-allowed;}
.month-nav-btn:not(:disabled):hover{border-color:var(--accent);}
.month-picker-wrap{position:relative;}
.month-picker-toggle{font-family:var(--font-display); font-weight:600; font-size:13px; padding:8px 14px; border-radius:12px; border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer; white-space:nowrap; display:flex; align-items:center; gap:7px; min-width:140px; justify-content:center;}
.month-picker-toggle:hover, .month-picker-toggle.open{border-color:var(--accent); background:var(--bg-soft);}
.month-picker-toggle .caret{font-size:10px; color:var(--muted);}
.month-picker-toggle .dot{width:6px; height:6px; border-radius:50%; background:var(--line); flex:0 0 auto;}
.month-picker-toggle .dot.complete{background:var(--good);}
.month-picker-toggle .dot.partial{background:var(--accent);}
.month-picker-menu{position:absolute; top:calc(100% + 6px); left:50%; transform:translateX(-50%); z-index:70; min-width:200px; max-height:280px; overflow-y:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); box-shadow:var(--shadow-md); padding:6px;}
.month-picker-row{font-family:var(--font-display); font-weight:600; font-size:12.5px; padding:8px 10px; border-radius:9px; color:var(--muted); cursor:pointer; white-space:nowrap; display:flex; align-items:center; gap:7px;}
.month-picker-row:hover{background:var(--bg-soft);}
.month-picker-row.active{color:var(--ink); background:var(--bg-soft);}
.month-picker-row .dot{width:6px; height:6px; border-radius:50%; background:var(--line); flex:0 0 auto;}
.month-picker-row.complete .dot{background:var(--good);}
.month-picker-row.partial .dot{background:var(--accent);}
.month-picker-add{border-top:1px dashed var(--line); margin-top:4px; padding-top:10px; color:var(--accent);}
.month-picker-add .dot{display:none;}
.month-period{margin-top:8px; font-size:12.5px; color:var(--muted); font-family:var(--font-mono);}
.time-message{font-size:13px; color:var(--muted); margin-top:2px;}

/* ============================================================
   PAGE NAV — the 6 sections, in place of one long scroll
   ============================================================ */
.page-nav{display:flex; flex-wrap:wrap; gap:6px; margin:16px 0 20px; border-bottom:1px solid var(--line); padding-bottom:0;}
.page-nav-btn{font-family:var(--font-display); font-weight:700; font-size:13px; padding:9px 16px; border:none; background:transparent; color:var(--muted); cursor:pointer; border-radius:10px 10px 0 0; position:relative; top:1px; display:inline-flex; align-items:center; gap:6px;}
.page-nav-btn .ic{font-size:14px;}
.page-nav-btn:hover{color:var(--ink); background:var(--bg-soft);}
.page-nav-btn.active{color:var(--accent-ink); background:var(--surface); border:1px solid var(--line); border-bottom-color:var(--surface);}
.app-page{display:none; animation:pageIn .18s ease;}
.app-page.active{display:block;}
@keyframes pageIn{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;}}

/* ============================================================
   CARDS / GENERAL SURFACES
   ============================================================ */
.card{border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); padding:18px 20px; box-shadow:var(--shadow-sm);}

.overall{border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); padding:18px 20px; margin:0 0 20px; box-shadow:var(--shadow-sm);}
.overall-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; flex-wrap:wrap; gap:8px;}
.overall-head h2{font-size:13.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:600;}
.overall-nums{display:flex; gap:24px; flex-wrap:wrap;}
.overall-track{height:8px; background:var(--bg-soft); border-radius:6px; overflow:hidden; margin-top:12px;}
.overall-fill{height:100%; background:var(--good); border-radius:6px; transition:width .3s ease;}

.summary-grid{display:flex; flex-direction:column; gap:1px; margin-bottom:20px;}
.summary-row{display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden;}
.summary-row.row1{grid-template-columns:repeat(5,1fr);}
.summary-row.row2{grid-template-columns:1fr 2fr;}
.summary-card{background:var(--surface); padding:13px 15px;}
.summary-card .lbl{font-size:9.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted);}
.summary-card .num{font-family:var(--font-mono); font-size:18px; font-weight:700; margin-top:4px;}
.summary-card .num.green{color:var(--good);} .summary-card .num.coral{color:var(--bad);} .summary-card .num.gold{color:var(--accent);}
.summary-card .subnote{font-size:9.5px; color:var(--muted); margin-top:3px;}

/* ===== Sign-in gate ===== */
body.ft-locked > *:not(#auth-overlay):not(script){display:none !important;}
body.ft-locked{overflow:hidden;}
#auth-overlay{display:none; position:fixed; inset:0; z-index:5000; align-items:center; justify-content:center; padding:20px; overflow-y:auto; background:var(--bg);}
body.ft-locked #auth-overlay{display:flex;}
.auth-card{width:100%; max-width:400px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px 26px 22px; box-shadow:var(--shadow-md); color:var(--ink);}
.auth-logo{font-size:34px; text-align:center; line-height:1;}
.auth-card h2{font-size:22px; text-align:center; margin:8px 0 2px; color:var(--ink);}
.auth-sub{text-align:center; color:var(--muted); font-size:13px; margin:0 0 16px;}
.auth-tabs{display:flex; gap:6px; background:var(--bg-soft); padding:4px; border-radius:12px; margin-bottom:14px;}
.auth-tabs button{flex:1; font-family:var(--font-display); font-weight:600; font-size:13px; padding:8px 10px; border:0; border-radius:9px; background:transparent; color:var(--muted); cursor:pointer;}
.auth-tabs button.active{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm);}
.auth-card label.auth-field{display:block; font-size:11.5px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:12px;}
.auth-card input[type=text],.auth-card input[type=password]{display:block; width:100%; margin-top:5px; padding:10px 12px; font-size:15px; font-family:var(--font-body); border:1px solid var(--line); border-radius:10px; background:var(--bg-soft); color:var(--ink); outline:none; text-transform:none; letter-spacing:0; font-weight:500;}
.auth-card input[type=text]:focus,.auth-card input[type=password]:focus{border-color:var(--accent);}
.auth-row{display:flex; flex-direction:column; gap:6px; margin:2px 0 12px;}
.auth-check{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); cursor:pointer;}
.auth-error{min-height:18px; font-size:12.5px; color:var(--bad); font-weight:600; margin-bottom:8px;}
.auth-submit{width:100%; font-family:var(--font-display); font-weight:700; font-size:14.5px; padding:11px; border:0; border-radius:11px; background:var(--accent); color:#fff; cursor:pointer;}
.auth-submit:hover{filter:brightness(.95);}
.auth-link{display:block; margin:12px auto 0; background:none; border:none; color:var(--muted); font-size:12px; text-decoration:underline; cursor:pointer;}
.auth-note{font-size:11px; color:var(--muted); text-align:center; margin:16px 0 0; line-height:1.5;}
.auth-loading-box{display:flex; flex-direction:column; align-items:center; gap:14px; padding:48px 26px;}
.auth-loading-spin{font-size:38px; line-height:1; display:inline-block; animation:authSpin 1s linear infinite;}
.auth-loading-box p{font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--muted); margin:0; text-align:center;}
@keyframes authSpin{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
/* prefers-reduced-motion is already handled globally, see bottom of file */

/* ============================================================
   LANDING PAGE — marketing page (index.html). Lives on its own
   document now, separate from the sign-in/app page (sign-in.html).
   #landing-page is a direct child of <body>, so the sign-in gate
   rule above (body.ft-locked > * { display:none !important; })
   would hide the whole page if that class ever ends up on <body>
   here (e.g. a stale service-worker cache). The !important below
   is required — a plain `display:block` cannot win against that
   rule and silently renders as background-only, no text.
   ============================================================ */
#landing-page{display:block !important;}

.landing-inner{max-width:1040px; margin:0 auto; padding:0 20px 60px;}

.landing-nav{display:flex; align-items:center; justify-content:space-between; padding:20px 0;}
.landing-brand{display:flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:800; font-size:19px; color:var(--ink);}
.landing-mark{font-size:22px;}
.landing-nav-signin{display:inline-block; text-decoration:none; font-family:var(--font-display); font-weight:700; font-size:13px; padding:9px 18px; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer; box-shadow:var(--shadow-sm);}
.landing-nav-signin:hover{background:var(--bg-soft);}

.landing-hero{display:flex; align-items:center; gap:40px; padding:36px 0 56px; flex-wrap:wrap;}
.landing-hero-copy{flex:1 1 380px; min-width:280px;}
.landing-eyebrow{display:inline-block; font-family:var(--font-display); font-weight:700; font-size:12.5px; color:var(--accent-ink); background:var(--surface-2); border:1px solid var(--line); padding:6px 14px; border-radius:999px; margin-bottom:16px;}
.landing-hero-copy h1{font-size:clamp(28px,4.4vw,42px); line-height:1.15; margin:0 0 16px; font-weight:800;}
.landing-sub{font-size:16px; color:var(--muted); max-width:480px; margin:0 0 26px;}
.landing-cta-row{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:18px;}
.landing-cta-primary{display:inline-block; text-decoration:none; text-align:center; font-family:var(--font-display); font-weight:700; font-size:15px; padding:14px 26px; border-radius:var(--radius-sm); border:none; background:var(--accent); color:#fff; cursor:pointer; box-shadow:var(--shadow-md);}
.landing-cta-primary:hover{filter:brightness(1.05);}
.landing-cta-secondary{display:inline-block; text-decoration:none; text-align:center; font-family:var(--font-display); font-weight:700; font-size:15px; padding:14px 26px; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer;}
.landing-cta-secondary:hover{background:var(--bg-soft);}
.landing-trust{font-size:12.5px; color:var(--muted); max-width:460px; margin:0;}

.landing-hero-art{flex:1 1 280px; min-width:240px; display:flex; justify-content:center;}
.landing-card-mock{width:100%; max-width:300px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:22px; box-shadow:var(--shadow-md); font-family:var(--font-display);}
.lm-row{display:flex; align-items:center; justify-content:space-between; font-weight:700; font-size:14px; color:var(--ink); margin-bottom:10px;}
.lm-pill{font-family:var(--font-mono); font-size:12px; background:var(--surface-2); border:1px solid var(--line); padding:3px 10px; border-radius:999px; color:var(--accent-ink);}
.lm-track{height:10px; border-radius:999px; background:var(--bg-soft); overflow:hidden; margin-bottom:16px;}
.lm-fill{height:100%; background:var(--accent); border-radius:999px;}
.lm-small{font-size:12.5px; font-weight:600; color:var(--muted); margin-bottom:0;}
.lm-small b{color:var(--accent-ink); font-family:var(--font-mono); font-size:14px;}

.landing-features{padding:36px 0;}
.landing-features h2{font-size:clamp(20px,2.8vw,26px); text-align:center; margin:0 0 28px; font-weight:800;}
.landing-feature-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px;}
.landing-feature{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); padding:20px; box-shadow:var(--shadow-sm);}
.lf-ic{font-size:24px; margin-bottom:8px;}
.landing-feature h3{font-size:15.5px; margin:0 0 6px; font-weight:700;}
.landing-feature p{font-size:13.5px; color:var(--muted); margin:0; line-height:1.5;}

.landing-final-cta{text-align:center; padding:48px 0 20px;}
.landing-final-cta h2{font-size:clamp(19px,2.6vw,24px); margin:0 0 18px; font-weight:800;}

.landing-footer{text-align:center; font-size:12px; color:var(--muted); padding:24px 0 8px;}

/* ---- signed-out.html: centered confirmation card ---- */
.signedout-hero{display:flex; justify-content:center; padding:60px 0 70px;}
.signedout-card{max-width:440px; width:100%; text-align:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:40px 32px; box-shadow:var(--shadow-md);}
.signedout-icon{font-size:40px; margin-bottom:14px;}
.signedout-card h1{font-size:clamp(22px,3vw,28px); margin:0 0 12px; font-weight:800;}
.signedout-card p{font-size:14.5px; color:var(--muted); margin:0 0 24px; line-height:1.6;}

@media (max-width:640px){
  .landing-hero{padding:20px 0 40px; text-align:center;}
  .landing-cta-row{justify-content:center;}
  .landing-hero-art{order:-1;}
}

/* ===== Section headers / lists (income, debt, gifts, savings, expenses) ===== */
.section-head{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:14px;}
.section-head h2{font-size:17px; font-weight:700;}
.head-right{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.totals{font-family:var(--font-mono); font-size:12px; color:var(--muted);}
.select-btn,.reset-btn{font-family:var(--font-display); font-weight:600; font-size:11.5px; padding:6px 11px; border-radius:9px; border:1px solid var(--line); background:var(--surface); color:var(--muted); cursor:pointer;}
.select-btn:hover{border-color:var(--good); color:var(--good);}
.reset-btn:hover{border-color:var(--bad); color:var(--bad);}

.extra-add{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px;}
.extra-add input,.extra-add select{font-family:var(--font-body); font-size:13.5px; padding:9px 12px; border-radius:10px; border:1px solid var(--line); background:var(--surface); color:var(--ink); flex:1; min-width:140px;}
.extra-add input:focus,.extra-add select:focus{border-color:var(--accent);}
.extra-add button{font-family:var(--font-display); font-weight:700; font-size:13.5px; padding:9px 18px; border-radius:10px; border:none; background:var(--accent); color:#fff; cursor:pointer;}
.extra-add button:hover{filter:brightness(.95);}

.card-list{display:flex; flex-direction:column; gap:8px; margin-bottom:8px;}
.item-row{display:flex; align-items:center; gap:12px; padding:11px 14px; border:1px solid var(--line); border-radius:12px; background:var(--surface); flex-wrap:wrap;}
.item-row:hover{border-color:var(--accent);}
.item-amt{font-family:var(--font-mono); font-weight:700; width:110px; text-align:right;}
.item-desc{flex:1; min-width:120px;}
.item-date{font-size:11px; color:var(--muted); font-family:var(--font-mono);}
.empty-note{font-size:12.5px; color:var(--muted); font-style:italic; padding:8px 2px;}

/* ============================================================
   ITEM-ROW internals (renderList()/renderGiftList() in app.js —
   Income, Debts' per-month rows, Gifts, Savings-app checklist).
   The .item-row wrapper above was styled, but every element it
   actually renders inside that wrapper (checkbox, label, sub-text,
   currency prefix, delete button, the "checked" state) had no
   rules at all, so ticking or reading any of these lists rendered
   as unstyled, default-browser text and controls.
   ============================================================ */
.item-row input[type=checkbox].checkbox{width:18px; height:18px; accent-color:var(--accent); flex:0 0 auto; cursor:pointer;}
.item-row .item-label{flex:1; min-width:140px; display:flex; flex-direction:column; gap:2px;}
.item-row .item-label-input{font-family:var(--font-body); font-size:14px; font-weight:600; color:var(--ink); border:none; background:transparent; padding:2px 0; width:100%;}
.item-row .item-label-input:focus{outline:none; text-decoration:underline; text-decoration-color:var(--accent);}
.item-row .sub{font-size:11px; color:var(--muted); font-family:var(--font-mono);}
.item-row .sub.tick-date{color:var(--good);}
.item-row .currency-prefix{display:flex; align-items:center; gap:4px; flex:0 0 auto;}
.item-row .currency-prefix span{font-family:var(--font-mono); font-size:12.5px; color:var(--muted);}
.item-row .del{flex:0 0 auto; width:26px; height:26px; border:none; border-radius:8px; background:transparent; color:var(--muted); cursor:pointer; font-size:13px; line-height:1;}
.item-row .del:hover{background:var(--bg-soft); color:var(--bad);}
.item-row.checked{background:var(--bg-soft); border-color:var(--line);}
/* text-decoration doesn't render on an <input>'s value text in Chromium/Firefox,
   so a checked row's label dims via color + opacity instead of a strikethrough. */
.item-row.checked .item-label-input{color:var(--muted); opacity:.75;}

/* ============================================================
   EXTRA / GOAL ROWS — the .desc/.date/.amt trio (extra income and
   savings top-up entries, renderExtraList()/renderSavingsTopupList()
   in app.js) and gift-goal cards (renderGoalCards()) were likewise
   never given any CSS of their own.
   ============================================================ */
.extra-row{display:flex; align-items:center; gap:12px; padding:11px 14px; border:1px solid var(--line); border-radius:12px; background:var(--surface); flex-wrap:wrap;}
.extra-row:hover{border-color:var(--accent);}
.extra-row .desc{flex:1; min-width:160px; display:flex; flex-direction:column; gap:2px;}
.extra-row .desc-input{font-family:var(--font-body); font-size:14px; font-weight:600; color:var(--ink); border:none; background:transparent; padding:2px 0; width:100%;}
.extra-row .desc-input:focus{outline:none; text-decoration:underline; text-decoration-color:var(--accent);}
.extra-row .date{font-size:11px; color:var(--muted); font-family:var(--font-mono);}
.extra-row .amt{font-family:var(--font-mono); font-weight:700; flex:0 0 auto;}
.extra-row .del{flex:0 0 auto; width:26px; height:26px; border:none; border-radius:8px; background:transparent; color:var(--muted); cursor:pointer; font-size:13px; line-height:1;}
.extra-row .del:hover{background:var(--bg-soft); color:var(--bad);}

.goal-card{display:flex; align-items:center; gap:12px; padding:13px 15px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface); margin-bottom:10px; flex-wrap:wrap;}
.goal-card:hover{border-color:var(--accent);}
.goal-card .gname{flex:1; min-width:160px; display:flex; flex-direction:column; gap:2px;}
.goal-card .gname-input{font-family:var(--font-display); font-size:14px; font-weight:700; color:var(--ink); border:none; background:transparent; padding:2px 0; width:100%;}
.goal-card .gname-input:focus{outline:none; text-decoration:underline; text-decoration-color:var(--accent);}
.goal-card .gmeta{font-size:11px; color:var(--muted); font-family:var(--font-mono);}
.goal-card .gamt{font-family:var(--font-mono); font-weight:700; font-size:14px; flex:0 0 auto;}
.goal-card .del{flex:0 0 auto; width:26px; height:26px; border:none; border-radius:8px; background:transparent; color:var(--muted); cursor:pointer; font-size:13px; line-height:1;}
.goal-card .del:hover{background:var(--bg-soft); color:var(--bad);}

/* ============================================================
   EXPENSE CATEGORY BREAKDOWN (renderLivingCategoryChart()) and
   CATEGORY MANAGEMENT rows (renderLivingCategoryManage()) — same
   story: rendered by app.js with no matching CSS anywhere.
   ============================================================ */
#living-cat-chart{display:flex; flex-direction:column; gap:10px;}
.cat-row{padding:2px 0;}
.cat-row-top{display:flex; align-items:center; gap:8px; margin-bottom:5px;}
.cat-dot{width:10px; height:10px; border-radius:50%; flex:0 0 auto;}
.cat-name{flex:1; font-weight:600; font-size:13px; color:var(--ink);}
.cat-amt{font-family:var(--font-mono); font-size:12.5px; font-weight:700; color:var(--ink);}
.cat-track{height:7px; background:var(--bg-soft); border-radius:6px; overflow:hidden; margin-bottom:4px;}
.cat-fill{height:100%; border-radius:6px; transition:width .3s ease;}
.cat-pct{font-size:11px; color:var(--muted); font-family:var(--font-mono); padding-left:18px;}

.cat-manage-row{display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--line); border-radius:10px; background:var(--surface); flex-wrap:wrap;}
.cat-manage-row .living-cat-name-input{font-family:var(--font-body); font-size:13px; font-weight:600; color:var(--ink); border:1px solid transparent; background:transparent; border-radius:8px; padding:6px 8px; flex:1; min-width:100px;}
.cat-manage-row .living-cat-name-input:focus{border-color:var(--accent); background:var(--bg-soft); outline:none;}
.cat-manage-row .living-cat-budget-input{font-family:var(--font-mono); font-size:13px; color:var(--ink); border:1px solid var(--line); background:var(--bg-soft); border-radius:8px; padding:6px 8px; width:110px;}
.cat-manage-row .living-cat-budget-input:focus{border-color:var(--accent); outline:none;}
.cat-manage-row .living-cat-del{flex:0 0 auto; width:26px; height:26px; border:none; border-radius:8px; background:transparent; color:var(--muted); cursor:pointer; font-size:13px; line-height:1;}
.cat-manage-row .living-cat-del:hover{background:var(--bg-soft); color:var(--bad);}

/* ============================================================
   EXPENSE DAILY LOG (renderLivingDailyLog()) — grouped by day,
   each day holding one or more .entry-row lines. Also unstyled.
   ============================================================ */
.living-list-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px;}
.living-list-head h3{margin:0;}
.link-btn{border:none; background:transparent; color:var(--accent); font-family:var(--font-body); font-size:12px; font-weight:700; cursor:pointer; padding:2px 0;}
.link-btn:hover{text-decoration:underline;}
#living-list{display:flex; flex-direction:column; gap:16px;}
.day-group{border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface); padding:12px 14px;}
.day-head{display:flex; justify-content:space-between; align-items:baseline; width:100%; margin-bottom:8px; padding-bottom:8px; border-bottom:1px dashed var(--line); border-left:none; border-right:none; border-top:none; background:transparent; font:inherit; color:inherit; cursor:pointer; text-align:left;}
.day-head-left{display:flex; align-items:center; gap:8px;}
.day-chevron{font-size:10px; color:var(--muted); width:10px; display:inline-block;}
.day-head-right{display:flex; align-items:center; gap:10px;}
.day-date{font-weight:700; font-size:12.5px; color:var(--ink);}
.day-count{font-size:11px; color:var(--muted);}
.day-total{font-size:12.5px; font-weight:700; color:var(--muted);}
.day-entries[hidden]{display:none;}
.entry-row{display:flex; align-items:center; gap:10px; padding:6px 0; flex-wrap:wrap;}
.entry-row .cat-dot{margin-top:1px;}
.entry-mid{flex:1; min-width:150px; display:flex; flex-direction:column; gap:3px;}
.entry-desc-input{font-family:var(--font-body); font-size:13.5px; font-weight:600; color:var(--ink); border:none; background:transparent; padding:1px 0; width:100%;}
.entry-desc-input:focus{outline:none; text-decoration:underline; text-decoration-color:var(--accent);}
.entry-cat-select{font-family:var(--font-mono); font-size:10.5px; color:var(--muted); border:none; background:transparent; padding:0; width:fit-content; max-width:100%;}
.entry-cat-select:focus{outline:none;}
.entry-row .currency-prefix{flex:0 0 auto;}
.entry-amt-input{font-family:var(--font-mono); font-weight:700; font-size:13px; border:none; background:transparent; width:90px; text-align:right;}
.entry-amt-input:focus{outline:none;}
.entry-del{flex:0 0 auto; width:24px; height:24px; border:none; border-radius:8px; background:transparent; color:var(--muted); cursor:pointer; font-size:12px; line-height:1;}
.entry-del:hover{background:var(--bg-soft); color:var(--bad);}

/* ============================================================
   PERCENTAGE-CHANGE BADGES (month-over-month trend pills, used in
   the category breakdown and savings-app list) — also had no CSS.
   ============================================================ */
.pct-badge{display:inline-block; font-family:var(--font-mono); font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:999px; background:var(--bg-soft); color:var(--muted);}
.pct-badge.up{background:color-mix(in srgb, var(--bad) 14%, var(--surface)); color:var(--bad);}
.pct-badge.down{background:color-mix(in srgb, var(--good) 14%, var(--surface)); color:var(--good);}
.pct-badge.new{background:color-mix(in srgb, var(--accent) 16%, var(--surface)); color:var(--accent-ink);}

/* Import/export status line (xlSetStatus() in app.js) never colored
   by outcome — success/failure/warning all looked identical. */
.xl-status.ok{color:var(--good);}
.xl-status.err{color:var(--bad);}
.xl-status.warn{color:var(--accent-ink);}

.payoff-panel{border:1px dashed var(--line); border-radius:var(--radius-md); padding:14px 16px; margin:0 0 16px; background:var(--bg-soft);}
.payoff-panel h3{font-size:13px; font-weight:700; margin-bottom:8px;}
.payoff-panel-head{display:flex; justify-content:space-between; align-items:baseline; gap:10px;}
.payoff-panel-head h3{margin-bottom:8px;}
/* .payoff-head (id="payoff-head"/"accounts-head") holds the same .n/.lbl/.val
   stat blocks as .overall-nums — lay it out the same way, not as the plain
   single-line label row this rule used to be. */
.payoff-head{display:flex; gap:20px; flex-wrap:wrap; margin-bottom:12px;}
.payoff-head .n .lbl, .overall-nums .n .lbl{font-size:9.5px; text-transform:uppercase; color:var(--muted); letter-spacing:.05em;}
.payoff-head .n .val, .overall-nums .n .val{font-family:var(--font-mono); font-size:17px; font-weight:700; margin-top:3px;}

/* ============================================================
   DEBT-SERIES / SAVINGS-ACCOUNT ROWS (#payoff-list, #accounts-list —
   see renderDebtOverview()/renderSavingsAccounts() in app.js). These
   rows (.ds-row and friends) had no rules at all, so they rendered as
   unstyled, default-font text the moment a debt or savings app was added.
   ============================================================ */
#payoff-list, #accounts-list{display:flex; flex-direction:column; gap:10px;}
.ds-row{border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface); padding:13px 15px;}
.ds-top{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px;}
.ds-name{font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--ink);}
.ds-top-right{display:flex; align-items:center; gap:6px;}
.ds-top .del{flex:0 0 auto; width:22px; height:22px; border:none; border-radius:7px; background:transparent; color:var(--muted); cursor:pointer; font-size:12px; line-height:1;}
.ds-top .del:hover{background:var(--bg-soft); color:var(--bad);}
.ds-left{font-family:var(--font-mono); font-weight:700; font-size:12.5px; color:var(--bad);}
.ds-left.clear{color:var(--good);}
.ds-track{height:8px; background:var(--bg-soft); border-radius:6px; overflow:hidden; margin-bottom:8px;}
.ds-fill{height:100%; background:var(--accent); border-radius:6px; transition:width .3s ease;}
.ds-meta{font-size:11.5px; color:var(--muted); font-family:var(--font-mono);}
.ds-pay{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:11px; padding-top:11px; border-top:1px dashed var(--line);}
.ds-extra-input,.acct-wd-input,.ds-total-input{font-family:var(--font-body); font-size:13px; padding:8px 11px; border-radius:9px; border:1px solid var(--line); background:var(--bg-soft); color:var(--ink); width:160px;}
.ds-extra-input:focus,.acct-wd-input:focus,.ds-total-input:focus{border-color:var(--accent);}
.ds-pay-btn,.acct-wd-btn{font-family:var(--font-display); font-weight:700; font-size:12px; padding:8px 13px; border-radius:9px; border:none; background:var(--accent); color:#fff; cursor:pointer; white-space:nowrap;}
.ds-pay-btn:hover,.acct-wd-btn:hover{filter:brightness(.95);}
.ds-clear-btn{background:var(--surface); color:var(--ink); border:1px solid var(--line);}
.hint{font-size:10.5px; color:var(--muted);}

.goal-list{display:flex; flex-direction:column; gap:10px; margin-bottom:16px;}
.savings-goal{border:1px solid var(--line); border-radius:var(--radius-md); background:var(--bg-soft); padding:14px 16px; margin-bottom:16px;}
.savings-goal-head{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:8px;}
.sg-label{font-weight:700; font-size:14px;}
.savings-goal-set{display:flex; gap:6px;}
.savings-goal-set input{font-family:var(--font-body); font-size:13px; padding:7px 10px; border-radius:9px; border:1px solid var(--line); background:var(--surface); width:120px;}
.savings-goal-set button{font-family:var(--font-display); font-weight:700; font-size:12.5px; padding:7px 13px; border-radius:9px; border:none; background:var(--accent); color:#fff; cursor:pointer;}
.savings-goal-track{height:9px; background:var(--surface); border-radius:6px; overflow:hidden; border:1px solid var(--line);}
.savings-goal-fill{height:100%; background:var(--good); border-radius:6px; transition:width .3s ease;}
.savings-goal-nums{display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:12px; color:var(--muted); margin-top:6px;}
.savings-goal-pct{font-weight:700; color:var(--accent);}
.savings-apps-block .note{font-size:12px; color:var(--muted); margin:2px 0 12px;}

.living-subpanel{border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface); padding:14px 16px; margin-bottom:14px;}
.living-subpanel h3{font-size:12.5px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; margin-bottom:10px;}
.chart-scroll{overflow-x:auto;}
.manage-cats{border:1px dashed var(--line); border-radius:var(--radius-md); background:var(--bg-soft); padding:14px 16px; margin:16px 0;}
.manage-cats-head{display:flex; align-items:center; gap:8px; width:100%; font-family:inherit; font-weight:700; font-size:13.5px; margin-bottom:4px; border:none; background:transparent; color:inherit; padding:0; cursor:pointer; text-align:left;}
.manage-cats-body[hidden]{display:none;}
.cat-manage-list{display:flex; flex-direction:column; gap:6px; margin:10px 0;}
.new-cat-form{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px;}
.new-cat-form input{font-family:var(--font-body); font-size:13px; padding:8px 11px; border-radius:9px; border:1px solid var(--line); background:var(--surface); flex:1; min-width:130px;}
.new-cat-form button{font-family:var(--font-display); font-weight:700; font-size:12.5px; padding:8px 14px; border-radius:9px; border:none; background:var(--accent); color:#fff; cursor:pointer;}

.mvl-card{border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); padding:16px 20px; margin:0 0 20px; box-shadow:var(--shadow-sm);}
.mvl-card h3{font-weight:600; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; margin-bottom:10px;}
.mvl-row{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:7px 0; border-bottom:1px dashed var(--line);}
.mvl-row:last-child{border-bottom:none; padding-bottom:0;}
.mvl-label{font-weight:600; font-size:13px; min-width:80px; flex:0 0 auto;}
.mvl-nums{font-family:var(--font-mono); font-size:12px; color:var(--muted); flex:1; min-width:160px;}
.mvl-nums b{color:var(--ink);}
.mvl-empty{font-size:12px; color:var(--muted); font-style:italic;}

.budget-health{display:flex; justify-content:space-between; align-items:center; gap:18px; border:1px solid var(--line); border-radius:var(--radius-lg); padding:15px 18px; margin:0 0 18px; flex-wrap:wrap; box-shadow:var(--shadow-sm); border-left-width:5px;}
.budget-health.ok{background:color-mix(in srgb, var(--good) 8%, var(--surface)); border-left-color:var(--good);}
.budget-health.over{background:color-mix(in srgb, var(--bad) 8%, var(--surface)); border-left-color:var(--bad);}
.bh-left{display:flex; align-items:center; gap:12px; min-width:200px;}
.bh-icon{font-size:24px; line-height:1;}
.bh-status{font-weight:700; font-size:15px;}
.budget-health.ok .bh-status{color:var(--good);}
.budget-health.over .bh-status{color:var(--bad);}
.bh-sub{font-size:11.5px; color:var(--muted); margin-top:2px;}
.bh-right{text-align:right;}
.bh-amt{font-family:var(--font-mono); font-size:20px; font-weight:700;}
.budget-health.ok .bh-amt{color:var(--good);}
.budget-health.over .bh-amt{color:var(--bad);}
.bh-amt-lbl{font-size:9.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-top:2px;}
.bh-breakdown{width:100%; display:flex; gap:16px; flex-wrap:wrap; font-family:var(--font-mono); font-size:11px; color:var(--muted); padding-top:11px; margin-top:2px; border-top:1px dashed var(--line);}
.bh-breakdown b{color:var(--ink);}

footer{padding:26px 0 36px; color:var(--muted); font-size:11.5px; border-top:1px solid var(--line); margin-top:12px;}

/* ===== Quotes ===== */
.quote-banner{border:1px dashed var(--line); border-radius:var(--radius-md); background:var(--surface); padding:13px 18px; margin:0 0 20px; text-align:center; font-family:var(--font-display); font-size:13.5px; color:var(--accent-ink); font-weight:600; font-style:italic;}
.quote-banner.pulse{animation:quotePulse .6s ease;}
@keyframes quotePulse{0%{transform:scale(.97); opacity:.35;} 60%{transform:scale(1.015);} 100%{transform:scale(1); opacity:1;}}

/* ===== XP / Level / Badges ===== */
.xp-panel{border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); padding:16px 20px; margin:0 0 20px; box-shadow:var(--shadow-sm);}
.xp-head{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:9px;}
.xp-level{font-family:var(--font-display); font-weight:800; font-size:15px; color:var(--accent); display:flex; align-items:center; gap:7px;}
.xp-level .badge-icon{font-size:18px;}
.xp-track{height:9px; background:var(--bg-soft); border-radius:8px; overflow:hidden;}
.xp-fill{height:100%; width:0%; background:var(--accent); border-radius:8px; transition:width .4s ease;}
.xp-sub{font-family:var(--font-mono); font-size:10.5px; color:var(--muted); margin-top:6px;}
.badge-row{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px;}
/* Icon-only on Overview — same small circular-swatch footprint as
   .theme-swatch/.pet-swatch, so dozens of achievements fit on one compact row
   instead of the old full-label pills. Full labels are on the XP page;
   here the label is just the title tooltip. */
.badge-chip{display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:var(--bg-soft); border:1px solid var(--line); font-size:13px; line-height:1; cursor:default;}
.badge-chip.locked{opacity:.35; filter:grayscale(1);}
.xp-page-breakdown{font-family:var(--font-mono); font-size:11.5px; color:var(--muted); margin:10px 0 0;}
/* A little tighter than a first pass — smaller minimum column, icon and
   padding both trimmed down — while keeping the icon+label layout the
   Overview row no longer has room for. */
/* #xp-badge-grid is now a column of category sections (see XP_CATEGORIES
   in app.js) rather than one flat grid — .xp-badge-category-grid is what
   carries the actual grid layout, once per category. */
.xp-badge-grid{display:flex; flex-direction:column; gap:16px;}
.xp-badge-category-head{font-family:var(--font-display); font-weight:700; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; margin:0 0 8px;}
.xp-badge-category-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:7px;}
.xp-badge-card{display:flex; align-items:center; gap:8px; background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius-sm); padding:8px 10px;}
.xp-badge-card .b-icon{font-size:17px; line-height:1; flex:0 0 auto;}
.xp-badge-card .b-label{font-family:var(--font-display); font-weight:700; font-size:11.5px; color:var(--ink); line-height:1.25;}
.xp-badge-card.locked{opacity:.4; filter:grayscale(1);}
.xp-badge-card.earned{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset;}

/* ===== Cat companion ===== */
.cat-companion{position:fixed; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); right:16px; z-index:25; display:flex; align-items:flex-end; gap:8px;}
.cat-speech{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:8px 12px; font-size:11.5px; max-width:165px; box-shadow:var(--shadow-md); display:none; color:var(--ink);}
.cat-companion:hover .cat-speech,.cat-companion.show-speech .cat-speech{display:block;}
.cat-face{width:50px; height:50px; border-radius:50%; background:var(--surface); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:26px; box-shadow:var(--shadow-md); cursor:pointer; animation:catBob 3s ease-in-out infinite;}
@keyframes catBob{0%,100%{transform:translateY(0);} 50%{transform:translateY(-4px);}}
/* .petted replaces the idle catBob loop with a one-shot bounce (higher
   specificity than .cat-face alone, so it wins for the animation's
   duration) — a distinct "that landed" reaction to a click or a tick,
   separate from the ambient float. */
.cat-face.petted{animation:catPet .5s ease;}
@keyframes catPet{0%{transform:scale(1);} 35%{transform:scale(1.22);} 65%{transform:scale(.92);} 100%{transform:scale(1);}}
.cat-pop{position:absolute; right:6px; bottom:58px; font-size:17px; opacity:0; pointer-events:none;}
.cat-pop.pop{animation:catPop .9s ease forwards;}
@keyframes catPop{0%{opacity:0; transform:translateY(0) scale(.6);} 25%{opacity:1; transform:translateY(-8px) scale(1.1);} 100%{opacity:0; transform:translateY(-32px) scale(.9);}}

/* ===== Confetti / sparkle (kept, toned down) ===== */
/* Sits above the app's own content (falls/drifts in front of cards, same
   as real weather would) but below #confetti-canvas, so a milestone burst
   is never obscured by falling snow/rain, and below every modal overlay. */
#weather-canvas{position:fixed; inset:0; pointer-events:none; z-index:40;}
#confetti-canvas{position:fixed; inset:0; pointer-events:none; z-index:60;}
.sparkle{display:none;} /* the paginated layout no longer needs the ambient sky décor */

/* ===== Responsive ===== */
@media (max-width:700px){
  .summary-row.row1{grid-template-columns:1fr 1fr;}
  .summary-row.row2{grid-template-columns:1fr;}
  .item-row{flex-wrap:wrap;}
  .item-amt{width:90px;}
  .overall-nums{gap:16px;}
  .page-nav{overflow-x:auto; flex-wrap:nowrap; padding-bottom:2px;}
  .page-nav-btn{flex:0 0 auto;}
}
@media (min-width:701px) and (max-width:920px){
  .summary-row.row1{grid-template-columns:repeat(3,1fr);}
  .summary-row.row2{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:600px){
  .cat-companion{bottom:10px; right:10px;}
  .cat-face{width:44px; height:44px; font-size:20px;}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;}
}

/* ============================================================
   IDLE / SESSION-CAP SIGN-OUT WARNING (see auto-logout.js)
   Shown on the signed-in app page only — separate from the
   body.ft-locked sign-in gate above.
   ============================================================ */
#idle-warning-overlay{display:none; position:fixed; inset:0; z-index:6000; align-items:center; justify-content:center; padding:20px; background:rgba(0,0,0,.4);}
#idle-warning-overlay.open{display:flex;}
#idle-warning-overlay .auth-card{max-width:360px; text-align:center;}
#idle-warning-overlay #idle-warning-count{font-weight:700; color:var(--accent);}
#idle-warning-overlay .auth-submit{margin-top:6px;}
#idle-warning-overlay .auth-link{margin-top:10px;}
/* Same fixed-overlay pattern as #idle-warning-overlay, shown/hidden via the
   `hidden` attribute (see the global [hidden] rule near the top of this
   file) rather than a .open class, matching #auth-loading-box's convention. */
#pin-setup-overlay{position:fixed; inset:0; z-index:6000; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(0,0,0,.4);}
#pin-setup-overlay .auth-card{max-width:380px;}
#pin-setup-overlay .auth-submit{margin-top:6px;}
#pin-setup-overlay .auth-link{margin-top:10px;}
#pin-unlock-card .auth-link{margin-top:10px;}

/* ============================================================
   SETTINGS-ONLY VIEW (settings.html)
   That page shares this exact stylesheet and app shell with
   sign-in.html/index.html (see settings.html's own inline script for
   why) but should show only the Settings section — no month picker,
   overview stats, debt/savings pages, or the motivational quote, all
   of which belong to the tracker itself. Rather than removing those
   elements from the DOM (many of app.js's render functions write into
   them unconditionally and aren't null-guarded), settings.html tags
   <body> with this class and everything tracker-
   specific is just hidden here; app.js keeps rendering into it same
   as always, harmlessly, off-screen.
   ============================================================ */
body.settings-only-view .brand-row .tag,
body.settings-only-view .meta-chips,
body.settings-only-view .overall,
body.settings-only-view .month-bar,
body.settings-only-view .page-nav,
body.settings-only-view #page-overview,
body.settings-only-view #page-income,
body.settings-only-view #page-debts,
body.settings-only-view #page-gifts,
body.settings-only-view #page-savings,
body.settings-only-view #page-expenses,
body.settings-only-view #page-xp,
body.settings-only-view .app-shell > footer{
  display:none !important;
}