/* ============================================
   MFS — shared styles for all pages
   Theme palettes first (one block per theme), then the design system built
   on top of them. Edit this ONE file to restyle the whole site.
   ============================================ */

:root, [data-theme="default"] {
  /* MFS — black-green with fresh mint. */
  --bg: #EDF3EE;
  --bg-image: radial-gradient(circle at 6% -4%, rgba(124,242,156,0.30) 0, transparent 34%), radial-gradient(circle at 104% 104%, rgba(28,138,78,0.13) 0, transparent 38%);
  --panel: #FFFFFF;
  --panel-blur: none;
  --ink: #0D1F15;
  --ink-soft: #53675B;
  --line: #DAE6DD;
  --accent: #1C8A4E;
  --accent-light: #7CF29C;
  --accent-2: #12663A;
  --accent-soft: #DDF6E5;
  --good: #1C8A4E;
  --good-light: #A9EBC2;
  --good-2: #145C35;
  --bad: #D0483A;
  --panel-border: 1px solid var(--line);
  --panel-shadow: 0 2px 0 rgba(13,31,21,0.04), 0 10px 30px -18px rgba(13,31,21,0.25);
  --tag-ink: #12663A;
  --tag-border: #9FE0B5;
  --danger-soft: #FBE6E2;
  --row-hover: rgba(28,138,78,0.04);
  --bubble-bot-from: #F3FBF5;
}

[data-theme="glass"] {
  --bg: #BFE0F2;
  --bg-image: linear-gradient(135deg, #A9D6EE 0%, #CDE9F7 45%, #EAF6FC 100%);
  --panel: rgba(255,255,255,0.5);
  --panel-blur: blur(18px);
  --ink: #0F2A3D;
  --ink-soft: #3E5568;
  --line: rgba(255,255,255,0.55);
  --accent: #38C4DE;
  --accent-light: #B9EFFA;
  --accent-2: #1E96AE;
  --accent-soft: rgba(56,196,222,0.18);
  --good: #2F8F6F;
  --good-light: #9FE6C9;
  --good-2: #155C46;
  --bad: #C4544A;
  --panel-border: 1px solid rgba(255,255,255,0.6);
  --panel-shadow: 0 8px 32px rgba(20,50,80,0.14);
  --tag-ink: #0E6C7D;
  --tag-border: rgba(56,196,222,0.5);
  --danger-soft: rgba(196,84,74,0.15);
  --row-hover: rgba(255,255,255,0.18);
  --bubble-bot-from: rgba(255,255,255,0.75);
}

[data-theme="sand"] {
  --bg: #F3EDE4;
  --bg-image: none;
  --panel: #FFFFFF;
  --panel-blur: none;
  --ink: #3A2E22;
  --ink-soft: #8A7860;
  --line: #E4D9C8;
  --accent: #C1652F;
  --accent-light: #F0B98C;
  --accent-2: #8F3F1A;
  --accent-soft: #F3DFCB;
  --good: #5C7A4A;
  --good-light: #C3D9AE;
  --good-2: #3C5330;
  --bad: #B0473A;
  --panel-border: 1px solid var(--line);
  --panel-shadow: none;
  --tag-ink: #7A3B10;
  --tag-border: #E0B98C;
  --danger-soft: #F6E3DD;
  --row-hover: rgba(0,0,0,0.025);
  --bubble-bot-from: #FFF8EF;
}

[data-theme="mint"] {
  --bg: #EAF6F0;
  --bg-image: none;
  --panel: #FFFFFF;
  --panel-blur: none;
  --ink: #153029;
  --ink-soft: #547265;
  --line: #D7EDE2;
  --accent: #2FA88A;
  --accent-light: #9BE0CB;
  --accent-2: #17705A;
  --accent-soft: #D6F2E7;
  --good: #2F6F4E;
  --good-light: #A9E8CE;
  --good-2: #1F5B41;
  --bad: #C1543F;
  --panel-border: 1px solid var(--line);
  --panel-shadow: none;
  --tag-ink: #0F6B54;
  --tag-border: #9BDCC6;
  --danger-soft: #F8E3DE;
  --row-hover: rgba(0,0,0,0.025);
  --bubble-bot-from: #F4FBF8;
}

[data-theme="midnight"] {
  --bg: #0B1220;
  --bg-image: linear-gradient(160deg, #0B1220 0%, #131C2E 50%, #0E1726 100%);
  --panel: rgba(255,255,255,0.06);
  --panel-blur: blur(16px);
  --ink: #E8EEF7;
  --ink-soft: #94A3B8;
  --line: rgba(255,255,255,0.12);
  --accent: #6C8CFF;
  --accent-light: #B7C6FF;
  --accent-2: #3F5ED9;
  --accent-soft: rgba(108,140,255,0.18);
  --good: #3FBE83;
  --good-light: #A6EFCB;
  --good-2: #1E8557;
  --bad: #E2685A;
  --panel-border: 1px solid rgba(255,255,255,0.14);
  --panel-shadow: 0 12px 34px rgba(0,0,0,0.5);
  --tag-ink: #C7D2FE;
  --tag-border: rgba(108,140,255,0.5);
  --danger-soft: rgba(226,104,90,0.18);
  --row-hover: rgba(255,255,255,0.05);
  --bubble-bot-from: rgba(255,255,255,0.1);
}

[data-theme="noir"] {
  --bg: #0A0A0A;
  --bg-image: none;
  --panel: #161616;
  --panel-blur: none;
  --ink: #F2F2F2;
  --ink-soft: #9A9A9A;
  --line: #2B2B2B;
  --accent: #D9A441;
  --accent-light: #F0CD8C;
  --accent-2: #A97B22;
  --accent-soft: rgba(217,164,65,0.16);
  --good: #3FA55A;
  --good-light: #9CDCAE;
  --good-2: #226E39;
  --bad: #D1483A;
  --panel-border: 1px solid var(--line);
  --panel-shadow: 0 10px 30px rgba(0,0,0,0.6);
  --tag-ink: #D9A441;
  --tag-border: rgba(217,164,65,0.45);
  --danger-soft: rgba(209,72,58,0.18);
  --row-hover: rgba(255,255,255,0.04);
  --bubble-bot-from: #1E1E1E;
}

[data-theme="sunset"] {
  --bg: #F6B99A;
  --bg-image: linear-gradient(135deg, #FF9A76 0%, #F97B9C 45%, #C86DD7 100%);
  --panel: rgba(255,255,255,0.55);
  --panel-blur: blur(18px);
  --ink: #3B1330;
  --ink-soft: #7A3A5C;
  --line: rgba(255,255,255,0.6);
  --accent: #FF6F91;
  --accent-light: #FFC0D2;
  --accent-2: #D6336C;
  --accent-soft: rgba(255,111,145,0.22);
  --good: #2F8F6F;
  --good-light: #9FE6C9;
  --good-2: #155C46;
  --bad: #B23A55;
  --panel-border: 1px solid rgba(255,255,255,0.65);
  --panel-shadow: 0 8px 32px rgba(120,30,60,0.18);
  --tag-ink: #9C1F52;
  --tag-border: rgba(214,51,108,0.4);
  --danger-soft: rgba(178,58,85,0.18);
  --row-hover: rgba(255,255,255,0.2);
  --bubble-bot-from: rgba(255,255,255,0.8);
}
[data-theme="blush"] {
  --bg: #FBEAF0;
  --bg-image: none;
  --panel: #FFFFFF;
  --panel-blur: none;
  --ink: #4A1F30;
  --ink-soft: #8C5C70;
  --line: #F3D9E3;
  --accent: #E8618F;
  --accent-light: #F7A9C4;
  --accent-2: #C23F6E;
  --accent-soft: #FBDCE8;
  --good: #3F8F6F;
  --good-light: #9FE6C9;
  --good-2: #1F6B4F;
  --bad: #C24B5C;
  --panel-border: 1px solid var(--line);
  --panel-shadow: none;
  --tag-ink: #A23E63;
  --tag-border: #EFAFC7;
  --danger-soft: #FBE3E7;
  --row-hover: rgba(0,0,0,0.02);
  --bubble-bot-from: #FFF6F9;
}

[data-theme="lavender"] {
  --bg: #F1EAFB;
  --bg-image: none;
  --panel: #FFFFFF;
  --panel-blur: none;
  --ink: #332049;
  --ink-soft: #7A6690;
  --line: #E4D7F5;
  --accent: #8B5FBF;
  --accent-light: #C7A9E8;
  --accent-2: #6A3F9E;
  --accent-soft: #EDE1F9;
  --good: #4C8F5C;
  --good-light: #B3E0BC;
  --good-2: #2E6B3B;
  --bad: #B3527A;
  --panel-border: 1px solid var(--line);
  --panel-shadow: none;
  --tag-ink: #6A3F9E;
  --tag-border: #D2B8EF;
  --danger-soft: #F5E1EA;
  --row-hover: rgba(0,0,0,0.02);
  --bubble-bot-from: #FAF6FE;
}

[data-theme="buttercup"] {
  --bg: #FBF4DE;
  --bg-image: none;
  --panel: #FFFFFF;
  --panel-blur: none;
  --ink: #4A3B12;
  --ink-soft: #8C7A45;
  --line: #F1E3B8;
  --accent: #E0A927;
  --accent-light: #F5D786;
  --accent-2: #B4820F;
  --accent-soft: #FAEBBC;
  --good: #5C8A3F;
  --good-light: #C0DBA0;
  --good-2: #3B5C27;
  --bad: #C1573A;
  --panel-border: 1px solid var(--line);
  --panel-shadow: none;
  --tag-ink: #9A6E0E;
  --tag-border: #EFCF7C;
  --danger-soft: #F8E3D8;
  --row-hover: rgba(0,0,0,0.025);
  --bubble-bot-from: #FFFCF0;
}

[data-theme="meadow"] {
  --bg: #EEF6DE;
  --bg-image: none;
  --panel: #FFFFFF;
  --panel-blur: none;
  --ink: #243415;
  --ink-soft: #647249;
  --line: #DDEBC0;
  --accent: #7CA639;
  --accent-light: #C0DE95;
  --accent-2: #597B21;
  --accent-soft: #E5F1D0;
  --good: #3F8F5C;
  --good-light: #A6E0BC;
  --good-2: #26653D;
  --bad: #C1613A;
  --panel-border: 1px solid var(--line);
  --panel-shadow: none;
  --tag-ink: #4E6E1F;
  --tag-border: #C4DE97;
  --danger-soft: #F8E5D8;
  --row-hover: rgba(0,0,0,0.025);
  --bubble-bot-from: #F8FCEF;
}

[data-theme="peach"] {
  --bg: #FCEDE2;
  --bg-image: none;
  --panel: #FFFFFF;
  --panel-blur: none;
  --ink: #4A2C1A;
  --ink-soft: #8F6B52;
  --line: #F3DBC7;
  --accent: #F0895A;
  --accent-light: #F8C0A2;
  --accent-2: #D0663A;
  --accent-soft: #FBE0CC;
  --good: #5C8A5C;
  --good-light: #BEDDBE;
  --good-2: #3B603B;
  --bad: #C14A3F;
  --panel-border: 1px solid var(--line);
  --panel-shadow: none;
  --tag-ink: #B85A2E;
  --tag-border: #F0B78F;
  --danger-soft: #F9E2DD;
  --row-hover: rgba(0,0,0,0.02);
  --bubble-bot-from: #FFF8F2;
}

[data-theme="sky"] {
  --bg: #E7F1FB;
  --bg-image: none;
  --panel: #FFFFFF;
  --panel-blur: none;
  --ink: #152A40;
  --ink-soft: #5A7996;
  --line: #CFE3F5;
  --accent: #3E8FDB;
  --accent-light: #9DC9EF;
  --accent-2: #2668A8;
  --accent-soft: #DCEBFA;
  --good: #3F8F6F;
  --good-light: #A6E0C9;
  --good-2: #276B50;
  --bad: #C1543F;
  --panel-border: 1px solid var(--line);
  --panel-shadow: none;
  --tag-ink: #2668A8;
  --tag-border: #A7CDEE;
  --danger-soft: #F8E3DD;
  --row-hover: rgba(0,0,0,0.02);
  --bubble-bot-from: #F5FAFF;
}

[data-theme="rosegold"] {
  --bg: #F8ECE7;
  --bg-image: linear-gradient(135deg, #F6DCD3 0%, #F3E7DA 50%, #F9EFE0 100%);
  --panel: rgba(255,255,255,0.65);
  --panel-blur: blur(10px);
  --ink: #4A2E2E;
  --ink-soft: #8C6A63;
  --line: rgba(190,140,120,0.28);
  --accent: #C98A72;
  --accent-light: #E9BFA9;
  --accent-2: #A8654B;
  --accent-soft: rgba(201,138,114,0.22);
  --good: #5C8A6E;
  --good-light: #BEDDCA;
  --good-2: #3B6049;
  --bad: #B65C4E;
  --panel-border: 1px solid rgba(255,255,255,0.6);
  --panel-shadow: 0 8px 28px rgba(160,110,90,0.16);
  --tag-ink: #A8654B;
  --tag-border: rgba(201,138,114,0.45);
  --danger-soft: rgba(182,92,78,0.16);
  --row-hover: rgba(255,255,255,0.25);
  --bubble-bot-from: rgba(255,255,255,0.8);
}

[data-theme="cottoncandy"] {
  --bg: #EFEAFB;
  --bg-image: linear-gradient(135deg, #BFDFFB 0%, #E4CFF7 50%, #FBD3E6 100%);
  --panel: rgba(255,255,255,0.6);
  --panel-blur: blur(16px);
  --ink: #33234A;
  --ink-soft: #766393;
  --line: rgba(255,255,255,0.6);
  --accent: #9C6FE0;
  --accent-light: #D3B9F5;
  --accent-2: #7546C4;
  --accent-soft: rgba(156,111,224,0.2);
  --good: #3FA88A;
  --good-light: #A6E6D2;
  --good-2: #1F7A62;
  --bad: #E06F94;
  --panel-border: 1px solid rgba(255,255,255,0.65);
  --panel-shadow: 0 10px 30px rgba(120,90,180,0.16);
  --tag-ink: #7546C4;
  --tag-border: rgba(156,111,224,0.4);
  --danger-soft: rgba(224,111,148,0.18);
  --row-hover: rgba(255,255,255,0.2);
  --bubble-bot-from: rgba(255,255,255,0.78);
}

[data-theme="volcano"] {
  --bg: #150707;
  --bg-image: linear-gradient(160deg, #1A0808 0%, #2B0D0D 50%, #170606 100%);
  --panel: rgba(255,255,255,0.05);
  --panel-blur: blur(14px);
  --ink: #F7E8E4;
  --ink-soft: #B98F86;
  --line: rgba(255,140,110,0.16);
  --accent: #E8542F;
  --accent-light: #FF9B76;
  --accent-2: #B33A1C;
  --accent-soft: rgba(232,84,47,0.22);
  --good: #4FBE7A;
  --good-light: #A6EFC0;
  --good-2: #238A50;
  --bad: #FF5A44;
  --panel-border: 1px solid rgba(255,255,255,0.1);
  --panel-shadow: 0 14px 36px rgba(0,0,0,0.6);
  --tag-ink: #FF9B76;
  --tag-border: rgba(232,84,47,0.5);
  --danger-soft: rgba(255,90,68,0.2);
  --row-hover: rgba(255,255,255,0.04);
  --bubble-bot-from: rgba(255,255,255,0.08);
}

[data-theme="deepspace"] {
  --bg: #0A0A16;
  --bg-image: linear-gradient(160deg, #0A0A16 0%, #1A1330 50%, #0D0B1E 100%);
  --panel: rgba(255,255,255,0.05);
  --panel-blur: blur(16px);
  --ink: #E7E4FA;
  --ink-soft: #9187B8;
  --line: rgba(180,150,255,0.14);
  --accent: #9B6CFF;
  --accent-light: #C8B0FF;
  --accent-2: #6E3FD9;
  --accent-soft: rgba(155,108,255,0.2);
  --good: #3FD1A0;
  --good-light: #A6F0D8;
  --good-2: #1E9B72;
  --bad: #E25A9E;
  --panel-border: 1px solid rgba(255,255,255,0.12);
  --panel-shadow: 0 14px 36px rgba(0,0,0,0.55);
  --tag-ink: #C8B0FF;
  --tag-border: rgba(155,108,255,0.5);
  --danger-soft: rgba(226,90,158,0.2);
  --row-hover: rgba(255,255,255,0.05);
  --bubble-bot-from: rgba(255,255,255,0.1);
}

[data-theme="emerald"] {
  --bg: #08150F;
  --bg-image: linear-gradient(160deg, #08150F 0%, #103322 50%, #0A1A12 100%);
  --panel: rgba(255,255,255,0.05);
  --panel-blur: blur(14px);
  --ink: #E4F5EC;
  --ink-soft: #84B39E;
  --line: rgba(120,220,170,0.14);
  --accent: #2FC98A;
  --accent-light: #8CEBC0;
  --accent-2: #189B65;
  --accent-soft: rgba(47,201,138,0.2);
  --good: #2FC98A;
  --good-light: #8CEBC0;
  --good-2: #189B65;
  --bad: #E2685A;
  --panel-border: 1px solid rgba(255,255,255,0.1);
  --panel-shadow: 0 12px 34px rgba(0,0,0,0.5);
  --tag-ink: #D9B44A;
  --tag-border: rgba(217,180,74,0.4);
  --danger-soft: rgba(226,104,90,0.18);
  --row-hover: rgba(255,255,255,0.04);
  --bubble-bot-from: rgba(255,255,255,0.08);
}

[data-theme="steel"] {
  --bg: #12171F;
  --bg-image: linear-gradient(160deg, #12171F 0%, #1C2430 50%, #141A22 100%);
  --panel: rgba(255,255,255,0.05);
  --panel-blur: blur(14px);
  --ink: #E4E9EF;
  --ink-soft: #8A97A6;
  --line: rgba(150,170,190,0.16);
  --accent: #5B93B0;
  --accent-light: #A8CBDE;
  --accent-2: #3A6C86;
  --accent-soft: rgba(91,147,176,0.2);
  --good: #4CAF7E;
  --good-light: #A6E0C0;
  --good-2: #2A7E56;
  --bad: #C1584A;
  --panel-border: 1px solid rgba(255,255,255,0.1);
  --panel-shadow: 0 12px 32px rgba(0,0,0,0.5);
  --tag-ink: #A8CBDE;
  --tag-border: rgba(91,147,176,0.45);
  --danger-soft: rgba(193,88,74,0.2);
  --row-hover: rgba(255,255,255,0.04);
  --bubble-bot-from: rgba(255,255,255,0.08);
}

[data-theme="plum"] {
  --bg: #180D1C;
  --bg-image: linear-gradient(160deg, #180D1C 0%, #331A3C 50%, #1B0F20 100%);
  --panel: rgba(255,255,255,0.055);
  --panel-blur: blur(14px);
  --ink: #F1E4F0;
  --ink-soft: #A88AA5;
  --line: rgba(220,150,220,0.14);
  --accent: #B25FA0;
  --accent-light: #E0A9D2;
  --accent-2: #833F72;
  --accent-soft: rgba(178,95,160,0.2);
  --good: #3FBE83;
  --good-light: #A6EFC0;
  --good-2: #1E8557;
  --bad: #E2685A;
  --panel-border: 1px solid rgba(255,255,255,0.1);
  --panel-shadow: 0 12px 34px rgba(0,0,0,0.5);
  --tag-ink: #E0A9D2;
  --tag-border: rgba(178,95,160,0.5);
  --danger-soft: rgba(226,104,90,0.18);
  --row-hover: rgba(255,255,255,0.04);
  --bubble-bot-from: rgba(255,255,255,0.08);
}

[data-theme="cyber"] {
  --bg: #08090F;
  --bg-image: linear-gradient(160deg, #08090F 0%, #14102A 50%, #0A0A16 100%);
  --panel: rgba(255,255,255,0.045);
  --panel-blur: blur(14px);
  --ink: #E7FBFA;
  --ink-soft: #7FA3A8;
  --line: rgba(0,230,220,0.18);
  --accent: #00E5C7;
  --accent-light: #7CF5E2;
  --accent-2: #00A88F;
  --accent-soft: rgba(0,229,199,0.18);
  --good: #00E5C7;
  --good-light: #7CF5E2;
  --good-2: #00A88F;
  --bad: #FF3E7F;
  --panel-border: 1px solid rgba(0,229,199,0.18);
  --panel-shadow: 0 0 30px rgba(0,229,199,0.15);
  --tag-ink: #FF6FCF;
  --tag-border: rgba(255,111,207,0.4);
  --danger-soft: rgba(255,62,127,0.18);
  --row-hover: rgba(0,229,199,0.05);
  --bubble-bot-from: rgba(255,255,255,0.06);
}

[data-theme="espresso"] {
  --bg: #1C140F;
  --bg-image: linear-gradient(160deg, #1C140F 0%, #2E2015 50%, #1A130E 100%);
  --panel: rgba(255,255,255,0.05);
  --panel-blur: blur(12px);
  --ink: #F0E4D8;
  --ink-soft: #AB8F78;
  --line: rgba(200,160,120,0.15);
  --accent: #C08A4E;
  --accent-light: #E5C093;
  --accent-2: #93602C;
  --accent-soft: rgba(192,138,78,0.2);
  --good: #7FA65C;
  --good-light: #C5E0A8;
  --good-2: #557A3B;
  --bad: #C1543F;
  --panel-border: 1px solid rgba(255,255,255,0.09);
  --panel-shadow: 0 12px 32px rgba(0,0,0,0.5);
  --tag-ink: #E5C093;
  --tag-border: rgba(192,138,78,0.45);
  --danger-soft: rgba(193,84,63,0.2);
  --row-hover: rgba(255,255,255,0.04);
  --bubble-bot-from: rgba(255,255,255,0.07);
}

[data-theme="crimson"] {
  --bg: #120808;
  --bg-image: linear-gradient(160deg, #120808 0%, #2A0E0E 50%, #150909 100%);
  --panel: rgba(255,255,255,0.05);
  --panel-blur: blur(12px);
  --ink: #F5E6E4;
  --ink-soft: #B08480;
  --line: rgba(230,90,80,0.16);
  --accent: #D93A4A;
  --accent-light: #F08C94;
  --accent-2: #A31F2D;
  --accent-soft: rgba(217,58,74,0.2);
  --good: #3FA55A;
  --good-light: #9CDCAE;
  --good-2: #226E39;
  --bad: #D93A4A;
  --panel-border: 1px solid rgba(255,255,255,0.09);
  --panel-shadow: 0 12px 32px rgba(0,0,0,0.55);
  --tag-ink: #F08C94;
  --tag-border: rgba(217,58,74,0.45);
  --danger-soft: rgba(217,58,74,0.2);
  --row-hover: rgba(255,255,255,0.04);
  --bubble-bot-from: rgba(255,255,255,0.07);
}

[data-theme="forest"] {
  --bg: #14201A;
  --bg-image: linear-gradient(160deg, #122019 0%, #1D3226 50%, #142219 100%);
  --panel: rgba(255,255,255,0.045);
  --panel-blur: blur(10px);
  --ink: #E5EFE7;
  --ink-soft: #8CA396;
  --line: rgba(140,190,150,0.14);
  --accent: #5F9A5C;
  --accent-light: #A9D3A6;
  --accent-2: #3D6E3C;
  --accent-soft: rgba(95,154,92,0.2);
  --good: #5F9A5C;
  --good-light: #A9D3A6;
  --good-2: #3D6E3C;
  --bad: #C1583F;
  --panel-border: 1px solid rgba(255,255,255,0.08);
  --panel-shadow: 0 10px 30px rgba(0,0,0,0.45);
  --tag-ink: #A9D3A6;
  --tag-border: rgba(95,154,92,0.45);
  --danger-soft: rgba(193,88,63,0.2);
  --row-hover: rgba(255,255,255,0.035);
  --bubble-bot-from: rgba(255,255,255,0.06);
}

[data-theme="ocean"] {
  --bg: #081A24;
  --bg-image: linear-gradient(160deg, #081A24 0%, #123245 50%, #0A1E29 100%);
  --panel: rgba(255,255,255,0.05);
  --panel-blur: blur(14px);
  --ink: #E2F0F5;
  --ink-soft: #7FA3B3;
  --line: rgba(120,190,220,0.15);
  --accent: #2C9CBF;
  --accent-light: #8CD3E8;
  --accent-2: #1B7089;
  --accent-soft: rgba(44,156,191,0.2);
  --good: #3FBE9E;
  --good-light: #A6EFDA;
  --good-2: #1E8570;
  --bad: #E2685A;
  --panel-border: 1px solid rgba(255,255,255,0.09);
  --panel-shadow: 0 12px 32px rgba(0,0,0,0.5);
  --tag-ink: #8CD3E8;
  --tag-border: rgba(44,156,191,0.45);
  --danger-soft: rgba(226,104,90,0.18);
  --row-hover: rgba(255,255,255,0.04);
  --bubble-bot-from: rgba(255,255,255,0.07);
}

[data-theme="desert"] {
  --bg: #2A1710;
  --bg-image: linear-gradient(160deg, #2A1710 0%, #47281A 50%, #24140E 100%);
  --panel: rgba(255,255,255,0.05);
  --panel-blur: blur(10px);
  --ink: #F3E4D6;
  --ink-soft: #AE8A70;
  --line: rgba(220,150,100,0.15);
  --accent: #D4712F;
  --accent-light: #F0AC7C;
  --accent-2: #A2521C;
  --accent-soft: rgba(212,113,47,0.2);
  --good: #8CA65C;
  --good-light: #D0E0AC;
  --good-2: #5F7A3B;
  --bad: #C1543F;
  --panel-border: 1px solid rgba(255,255,255,0.08);
  --panel-shadow: 0 10px 30px rgba(0,0,0,0.45);
  --tag-ink: #F0AC7C;
  --tag-border: rgba(212,113,47,0.45);
  --danger-soft: rgba(193,84,63,0.2);
  --row-hover: rgba(255,255,255,0.035);
  --bubble-bot-from: rgba(255,255,255,0.06);
}

[data-theme="autumn"] {
  --bg: #F7EDE0;
  --bg-image: linear-gradient(135deg, #F0DCC0 0%, #EFC79C 45%, #E2A874 100%);
  --panel: rgba(255,255,255,0.6);
  --panel-blur: blur(10px);
  --ink: #402A18;
  --ink-soft: #8A6B4A;
  --line: rgba(180,120,70,0.22);
  --accent: #C7702B;
  --accent-light: #EBAD79;
  --accent-2: #96501A;
  --accent-soft: rgba(199,112,43,0.2);
  --good: #6B8A3F;
  --good-light: #C4D9A0;
  --good-2: #455C27;
  --bad: #B3452F;
  --panel-border: 1px solid rgba(255,255,255,0.55);
  --panel-shadow: 0 8px 26px rgba(140,90,40,0.16);
  --tag-ink: #96501A;
  --tag-border: rgba(199,112,43,0.4);
  --danger-soft: rgba(179,69,47,0.16);
  --row-hover: rgba(255,255,255,0.2);
  --bubble-bot-from: rgba(255,255,255,0.75);
}


[data-theme="coral"] {
  --bg: #FDEDE7;
  --bg-image: none;
  --panel: #FFFFFF;
  --panel-blur: none;
  --ink: #4A241A;
  --ink-soft: #93695C;
  --line: #F5DAD0;
  --accent: #E8674A;
  --accent-light: #F7AD97;
  --accent-2: #C4472C;
  --accent-soft: #FCE0D8;
  --good: #3F8F7A;
  --good-light: #A6E6D4;
  --good-2: #1F6B58;
  --bad: #C43F2F;
  --panel-border: 1px solid var(--line);
  --panel-shadow: none;
  --tag-ink: #C4472C;
  --tag-border: #F0B39E;
  --danger-soft: #FBE2DC;
  --row-hover: rgba(0,0,0,0.02);
  --bubble-bot-from: #FFF7F4;
}

[data-theme="mono"] {
  --bg: #F2F2F2;
  --bg-image: none;
  --panel: #FFFFFF;
  --panel-blur: none;
  --ink: #1A1A1A;
  --ink-soft: #6E6E6E;
  --line: #DEDEDE;
  --accent: #3A3A3A;
  --accent-light: #8C8C8C;
  --accent-2: #1A1A1A;
  --accent-soft: #E6E6E6;
  --good: #3F7A54;
  --good-light: #A6D9BA;
  --good-2: #255C3C;
  --bad: #A8402F;
  --panel-border: 1px solid var(--line);
  --panel-shadow: none;
  --tag-ink: #3A3A3A;
  --tag-border: #BFBFBF;
  --danger-soft: #F1DFDA;
  --row-hover: rgba(0,0,0,0.025);
  --bubble-bot-from: #FAFAFA;
}

[data-theme="aurora"] {
  --bg: #0A1218;
  --bg-image: linear-gradient(160deg, #0A1218 0%, #123028 35%, #0E1E36 70%, #0A1218 100%);
  --panel: rgba(255,255,255,0.055);
  --panel-blur: blur(16px);
  --ink: #E4F5F0;
  --ink-soft: #84AFA8;
  --line: rgba(130,230,190,0.16);
  --accent: #3FE0B0;
  --accent-light: #9CF5D8;
  --accent-2: #22A885;
  --accent-soft: rgba(63,224,176,0.2);
  --good: #3FE0B0;
  --good-light: #9CF5D8;
  --good-2: #22A885;
  --bad: #E25A9E;
  --panel-border: 1px solid rgba(255,255,255,0.1);
  --panel-shadow: 0 0 34px rgba(63,224,176,0.12);
  --tag-ink: #8FB8FF;
  --tag-border: rgba(143,184,255,0.4);
  --danger-soft: rgba(226,90,158,0.18);
  --row-hover: rgba(255,255,255,0.045);
  --bubble-bot-from: rgba(255,255,255,0.08);
}

/* ============================================
   DERIVED TOKENS — computed from each theme's
   colors above, so every theme gets the full
   redesign without touching its palette.
   ============================================ */
:root, [data-theme] {
  --font-display: 'Fredoka', 'Nunito', system-ui, sans-serif;
  --font-ui: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-num: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --line-strong: color-mix(in srgb, var(--ink) 24%, transparent);
  --ink-faint: color-mix(in srgb, var(--ink-soft) 75%, transparent);
  --paper-rule: color-mix(in srgb, var(--ink) 3.2%, transparent);
  --margin-rule: color-mix(in srgb, var(--accent) 55%, transparent);
  --hover-wash: color-mix(in srgb, var(--ink) 5%, transparent);
  --on-accent: #FFFFFF;
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px color-mix(in srgb, var(--accent) 75%, transparent);
  /* Translucent theme panels composited over the page color, so floating
     things (menus, dialogs, popups) are always solid and readable. */
  --raised-bg: linear-gradient(var(--panel), var(--panel)), var(--bg);
  --shadow-float: 0 18px 50px -12px rgba(10, 20, 35, 0.35), 0 2px 6px rgba(10, 20, 35, 0.08);
  --shadow-sheet: var(--panel-shadow);

  /* Chart series — a validated colorblind-safe order (light-surface steps). */
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100;
  --s5: #e87ba4; --s6: #008300; --s7: #4a3aa7; --s8: #e34948;
  --s-other: #9a988f;
  color-scheme: light;
}

/* Accents too light for white text get dark text instead. */
[data-theme="glass"], [data-theme="mint"], [data-theme="noir"],
[data-theme="sunset"], [data-theme="buttercup"], [data-theme="meadow"], [data-theme="peach"],
[data-theme="rosegold"], [data-theme="emerald"], [data-theme="cyber"], [data-theme="aurora"] {
  --on-accent: #17130F;
}

/* Dark themes: same series hues stepped for a dark surface, dark-aware
   shadows and form controls. */
[data-theme="midnight"], [data-theme="noir"], [data-theme="volcano"], [data-theme="deepspace"],
[data-theme="emerald"], [data-theme="steel"], [data-theme="plum"], [data-theme="cyber"],
[data-theme="espresso"], [data-theme="crimson"], [data-theme="forest"], [data-theme="ocean"],
[data-theme="desert"], [data-theme="aurora"] {
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500;
  --s5: #d55181; --s6: #2f9a3a; --s7: #9085e9; --s8: #e66767;
  --s-other: #6f6e68;
  --line-strong: color-mix(in srgb, var(--ink) 26%, transparent);
  --paper-rule: color-mix(in srgb, var(--ink) 3.5%, transparent);
  --hover-wash: color-mix(in srgb, var(--ink) 6%, transparent);
  --shadow-float: 0 22px 60px -10px rgba(0, 0, 0, 0.65), 0 2px 8px rgba(0, 0, 0, 0.4);
  color-scheme: dark;
}

/* ============================================
   MOTION
   ============================================ */
:root {
  --t-fast: 0.15s cubic-bezier(.4,0,.2,1);
  --t-med: 0.25s cubic-bezier(.2,.8,.3,1);
  --t-pop: 0.28s cubic-bezier(.2,.8,.3,1.35);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

@keyframes pageEnter { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes rowEnter { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
@keyframes rowNewPulse { 0% { background: var(--accent-soft); } 100% { background: transparent; } }
@keyframes popIn { from { opacity:0; transform:scale(0.92); } to { opacity:1; transform:scale(1); } }
@keyframes fadeInUp { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes ribbonDrop { from { transform: translateY(-100%); } to { transform: translateY(0); } }

/* ============================================
   BASE
   ============================================ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; width: 100%; }
/* Scrollbars stay fully functional (wheel, touch, keyboard) everywhere —
   only the visible track/thumb is hidden, site-wide. Scrollable areas get
   a soft fade at their edge instead, so it's still clear there's more. */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { width: 0; height: 0; display: none; }

body {
  /* Faint ruled lines across the page, like ledger paper. */
  background:
    repeating-linear-gradient(to bottom, transparent 0, transparent 31px, var(--paper-rule) 31px, var(--paper-rule) 32px),
    var(--bg-image),
    var(--bg);
  background-attachment: fixed, fixed, fixed;
  background-size: auto, cover, cover;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  transition: background-color 0.35s ease, color 0.3s ease;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; }
input:focus-visible, textarea:focus-visible { box-shadow: none; }
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }
kbd {
  font-family: var(--font-num); font-size: 10.5px; font-weight: 500;
  padding: 1px 5px; border-radius: 4px; border: 1px solid var(--line-strong);
  border-bottom-width: 2px; color: var(--ink-soft); background: var(--panel);
}
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.wrap {
  max-width: var(--page-max, 1280px); margin: 0 auto; padding: 26px 32px 90px;
  animation: pageEnter 0.35s cubic-bezier(.2,.8,.3,1) both;
}
.wrap.page-exit { opacity:0; transform:translateY(6px); transition: opacity 0.15s ease, transform 0.15s ease; }

/* ============================================
   MASTHEAD — brand, page bookmarks, live status
   ============================================ */
.topnav {
  position: relative;
  max-width: var(--page-max, 1280px); margin: 0 auto; padding: 0 32px;
  display: flex; align-items: stretch; gap: 26px;
  min-height: 70px;
}
/* Double rule under the masthead — the classic ledger "ruled off" line. */
.topnav::after {
  content: ''; position: absolute; left: 32px; right: 32px; bottom: 0; height: 4px;
  border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong);
}
.topnav-left { display: flex; align-items: stretch; gap: 30px; }
.brand {
  display: flex; align-items: center; gap: 0;
  font-family: var(--font-display); font-weight: 650; font-size: 27px; letter-spacing: -0.02em;
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
  text-decoration: none; color: var(--ink);
}
.brand span { color: var(--accent); }
.navlinks { display: flex; align-items: stretch; gap: 2px; }
.navlinks a {
  position: relative; display: flex; align-items: center; gap: 7px;
  padding: 14px 15px 6px; text-decoration: none;
  color: var(--ink-soft); font-size: 14px; font-weight: 600; letter-spacing: 0.005em;
  transition: color var(--t-fast);
}
.navlinks a:hover { color: var(--ink); }
.navlinks a .nav-ico { opacity: 0.55; font-size: 13px; transition: opacity var(--t-fast); }
.navlinks a:hover .nav-ico, .navlinks a.active .nav-ico { opacity: 1; }
.navlinks a.active { color: var(--ink); }
/* The active page gets a bookmark ribbon hanging from the top edge. */
.navlinks a.active::before {
  content: ''; position: absolute; top: 0; left: 50%; margin-left: -8px;
  width: 16px; height: 17px; background: var(--accent);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%);
  animation: ribbonDrop 0.35s cubic-bezier(.2,.8,.3,1.2) both;
}
.navlinks a.active::after {
  content: ''; position: absolute; left: 15px; right: 15px; bottom: -1px; height: 2px;
  background: var(--ink); border-radius: 2px;
}

.masthead-tools { margin-left: auto; display: flex; align-items: center; gap: 10px; padding-top: 6px; }

/* ============================================
   PAGE HEAD — big serif title + period control
   ============================================ */
.page-head, .header-row {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin: 6px 0 22px;
}
.page-title {
  margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 40px; line-height: 1.05;
  letter-spacing: -0.025em; font-variation-settings: 'opsz' 144, 'SOFT' 30;
}
.page-title em { font-style: italic; font-weight: 400; color: var(--ink-soft); }
.subtitle { color: var(--ink-soft); font-size: 14px; margin-top: 6px; }
.page-head-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; position: relative; }

/* ============================================
   SHEETS (panels) & the balance strip
   ============================================ */
.panel {
  background: var(--panel);
  backdrop-filter: var(--panel-blur); -webkit-backdrop-filter: var(--panel-blur);
  border: var(--panel-border); box-shadow: var(--panel-shadow);
  border-radius: 14px; padding: 22px 24px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.panel h2, .sheet-title {
  font-family: var(--font-display); font-weight: 600; font-size: 21px; letter-spacing: -0.01em;
  margin: 0 0 16px; font-variation-settings: 'opsz' 72;
}

.stat-row {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 18px;
  background: var(--panel);
  backdrop-filter: var(--panel-blur); -webkit-backdrop-filter: var(--panel-blur);
  border: var(--panel-border); box-shadow: var(--panel-shadow); border-radius: 14px;
  overflow: hidden;
}
.stat {
  position: relative; padding: 16px 22px 14px; min-width: 0;
  border-left: 1px solid var(--line);
  display: flex; flex-direction: column;
}
.stat:first-child { border-left: none; }
.stat-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink-soft); display: flex; align-items: center; gap: 8px;
}
.stat-label::before {
  content: ''; width: 7px; height: 7px; border-radius: 2px; background: var(--line-strong); flex-shrink: 0;
}
.stat.is-income .stat-label::before { background: var(--good); }
.stat.is-expense .stat-label::before { background: var(--bad); }
.stat.is-net .stat-label::before { background: var(--accent); }
.stat-value {
  font-family: var(--font-display); font-weight: 500; font-size: 33px; line-height: 1.1;
  letter-spacing: -0.02em; margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: lining-nums tabular-nums; font-variation-settings: 'opsz' 144;
}
.stat-value.good { color: var(--good); }
.stat-value.bad { color: var(--bad); }
.stat-sub { font-size: 12px; color: var(--ink-soft); margin-top: 5px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; min-height: 18px; }
.delta {
  display: inline-flex; align-items: center; gap: 3px; font-weight: 600; font-size: 11.5px;
  padding: 1px 6px; border-radius: 5px; background: var(--hover-wash); color: var(--ink-soft);
}
.delta.good { color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); }
.delta.bad { color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, transparent); }
.sparkline { display: block; width: 100%; height: 30px; margin-top: 10px; overflow: visible; }
.sparkline path.area { opacity: 0.14; }
.sparkline path.line { fill: none; stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.balance-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; margin-top: 12px; background: var(--hover-wash); gap: 2px; }
.balance-bar span { display: block; height: 100%; border-radius: 3px; transition: width 0.5s cubic-bezier(.2,.8,.3,1); }
.balance-bar .in { background: var(--good); }
.balance-bar .out { background: var(--bad); }
.balance-legend { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-soft); margin-top: 6px; }
.mix-list { display: flex; flex-direction: column; gap: 3px; margin-top: 10px; font-size: 12px; color: var(--ink-soft); }
.mix-list div { display: flex; justify-content: space-between; gap: 8px; }
.mix-list b { font-family: var(--font-num); font-weight: 500; color: var(--ink); }

@media (max-width: 1000px) {
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(3) { border-left: none; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .stat-row { grid-template-columns: 1fr; }
  .stat { border-left: none; border-top: 1px solid var(--line); }
  .stat:first-child { border-top: none; }
}

/* ============================================
   PERIOD CONTROL (segmented) + custom range
   ============================================ */
.filter-tabs {
  display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; flex-wrap: wrap;
  background: color-mix(in srgb, var(--ink) 5%, transparent); border: 1px solid var(--line);
}
.filter-tab {
  border: none; background: transparent; color: var(--ink-soft);
  padding: 6px 13px; border-radius: 7px; font-size: 13px; font-weight: 600; white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.filter-tab:hover { color: var(--ink); }
.filter-tab.active {
  background: var(--raised-bg); color: var(--ink);
  box-shadow: 0 1px 2px rgba(0,0,0,0.12), 0 0 0 1px var(--line);
}
.filter-tab.active::before {
  content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); margin-right: 7px; vertical-align: 1px;
}
.custom-range {
  display: none; position: absolute; right: 0; top: calc(100% + 8px); z-index: 150;
  align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--raised-bg); box-shadow: var(--shadow-float);
  font-size: 12.5px; color: var(--ink-soft);
  animation: fadeInUp 0.18s ease both;
}
.custom-range.show { display: flex; }
.custom-range input[type="date"] {
  font-family: var(--font-num); font-size: 12.5px;
  border: 1px solid var(--line-strong); border-radius: 8px; padding: 6px 8px;
  color: var(--ink); background: var(--panel);
}
.custom-range button {
  font-size: 12.5px; font-weight: 600; height: 32px; padding: 0 14px;
  border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent); border-radius: 8px;
}
/* Legacy collapsible container (kept for structure; the control is always inline now). */
.filter-panel { position: relative; }

/* ============================================
   BUTTONS & TOOLBARS
   ============================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 34px; padding: 0 14px; border-radius: 9px;
  font-family: var(--font-ui); font-size: 13px; font-weight: 600; white-space: nowrap;
  border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink);
  backdrop-filter: var(--panel-blur); -webkit-backdrop-filter: var(--panel-blur);
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast), transform 0.1s ease;
}
.btn:hover { border-color: var(--ink-soft); background: linear-gradient(var(--hover-wash), var(--hover-wash)), var(--panel); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { background: var(--accent-2); border-color: var(--accent-2); color: var(--on-accent); }
.btn.danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn.danger:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-soft); }
.btn.ghost:hover { color: var(--ink); background: var(--hover-wash); }
.btn.small { height: 28px; padding: 0 10px; font-size: 12px; border-radius: 7px; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn .count {
  font-family: var(--font-num); font-size: 11px; font-weight: 600;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--hover-wash); color: var(--ink-soft);
}
#toggleUnresolvedBtn.has-unresolved { border-color: color-mix(in srgb, var(--bad) 60%, transparent); color: var(--bad); }
#toggleUnresolvedBtn.has-unresolved .count { background: var(--bad); color: #fff; }
#toggleUnresolvedBtn.has-unresolved .pulse {
  width: 7px; height: 7px; border-radius: 50%; background: var(--bad);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--bad) 50%, transparent);
  animation: unresolvedPulse 2s ease-in-out infinite;
}
@keyframes unresolvedPulse { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bad) 45%, transparent); } 50% { box-shadow: 0 0 0 5px transparent; } }

.toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.toolbar .spacer { flex: 1; }
.search-box {
  position: relative; display: flex; align-items: center;
  height: 34px; min-width: 260px; border-radius: 9px;
  border: 1px solid var(--line-strong); background: var(--panel);
  backdrop-filter: var(--panel-blur); -webkit-backdrop-filter: var(--panel-blur);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.search-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.search-box .search-ico { padding: 0 4px 0 11px; color: var(--ink-soft); font-size: 13px; }
.search-box input { flex: 1; border: none; background: transparent; outline: none; font-size: 13px; padding: 0 6px; min-width: 0; color: var(--ink); }
.search-box input::placeholder { color: var(--ink-faint); }
.search-box .clear-search { border: none; background: none; color: var(--ink-soft); padding: 0 10px; font-size: 13px; display: none; }
.search-box.has-value .clear-search { display: block; }

/* ============================================
   LEDGER TABLES
   ============================================ */
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin-bottom: 16px; }
.two-col > .panel { min-width: 0; }
@media (max-width: 900px) { .two-col { grid-template-columns: minmax(0, 1fr); } }

.col-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; min-height: 34px; }
.col-heading h2 { margin: 0; }
.col-heading-left { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.col-total { font-family: var(--font-num); font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; }
.col-total.expense { color: var(--bad); }
.col-total.income { color: var(--good); }
.col-note { font-size: 12px; color: var(--ink-soft); }

table { width: 100%; border-collapse: collapse; }
thead th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-soft); font-weight: 600; padding: 9px 10px 8px;
  border-bottom: 3px double var(--line-strong);
}
tbody td { padding: 10px 10px; border-bottom: 1px solid var(--line); font-size: 13.5px; vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background 0.15s ease; }
tbody tr:hover { background: var(--row-hover); }
/* The red margin rule down the left of every ledger page. */
.table-scroll tbody td:first-child { box-shadow: inset 2px 0 0 var(--margin-rule); padding-left: 16px; }
.table-scroll thead th:first-child { padding-left: 16px; }

.amt { font-family: var(--font-num); font-weight: 500; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.amt.expense { color: var(--ink); }
.amt.income { color: var(--good); }
.amt.expense::before { content: '−'; color: var(--bad); margin-right: 1px; opacity: 0.85; }
.amt.income::before { content: '+'; margin-right: 1px; opacity: 0.85; }
.msg { color: var(--ink); }
.msg-row-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.msg-row-line > span:first-child { white-space: normal; word-break: break-word; font-weight: 500; }
.row-sub { display: block; font-size: 11.5px; color: var(--ink-soft); margin-top: 1px; }
.row-message {
  font-family: var(--font-num); font-size: 11.5px; color: var(--ink-soft);
  background: var(--hover-wash); border-left: 2px solid var(--line-strong); border-radius: 0 6px 6px 0;
  max-height: 0; opacity: 0; overflow: hidden; padding: 0 10px; margin-top: 0;
  white-space: normal; word-break: break-word;
  transition: max-height 0.25s ease, opacity 0.2s ease, padding 0.25s ease, margin 0.25s ease;
}
.row-message.show { max-height: 220px; opacity: 1; padding: 8px 10px; margin-top: 7px; }

.date-group-row td {
  background: transparent; padding: 15px 10px 6px; border-bottom: none;
}
.date-group-row:hover { background: transparent; }
.day-line { display: flex; align-items: baseline; gap: 8px; }
.day-line .day-name {
  font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 14px; color: var(--ink);
  font-variation-settings: 'opsz' 24;
}
.day-line .leader { flex: 1; border-bottom: 1px dotted var(--line-strong); transform: translateY(-4px); min-width: 20px; }
.day-line .day-sum { font-family: var(--font-num); font-size: 11.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.table-scroll {
  max-height: 460px; overflow-y: auto; overflow-x: hidden; min-width: 0;
  /* Soft fade at the bottom edge hints there's more below (scrollbars are hidden). */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
}
.table-scroll.at-end { -webkit-mask-image: none; mask-image: none; }
.table-scroll thead th { position: sticky; top: 0; z-index: 1; background: var(--raised-bg); }
.table-scroll table { table-layout: fixed; width: 100%; }
.table-scroll th:nth-child(2), .table-scroll td:nth-child(2) { width: 158px; }
.table-scroll th:nth-child(3), .table-scroll td:nth-child(3) { width: 112px; }
.table-scroll th:nth-child(4), .table-scroll td:nth-child(4) { width: 38px; padding-left: 2px; padding-right: 4px; }

.ledger-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 8px; padding-top: 10px; border-top: 3px double var(--line-strong);
  font-size: 12px; color: var(--ink-soft);
}
.ledger-foot .foot-total { display: flex; align-items: baseline; gap: 10px; }
.ledger-foot:empty { display: none; }
.ledger-foot .foot-total b { font-family: var(--font-num); font-size: 14px; color: var(--ink); font-weight: 600; }

/* Category "stamps" */
.tag {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
  padding: 3px 8px 3px 6px; border-radius: 5px;
  font-size: 11.5px; font-weight: 600; line-height: 1.3;
  background: color-mix(in srgb, var(--accent-soft) 70%, transparent);
  color: var(--tag-ink);
  border: 1px solid color-mix(in srgb, var(--tag-ink) 28%, transparent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tag .tag-ico { font-size: 11px; flex-shrink: 0; }
.tag .tag-text { overflow: hidden; text-overflow: ellipsis; }
.tag-unknown {
  border: 1px dashed var(--bad); color: var(--bad); background: var(--danger-soft);
  transition: transform 0.12s ease, background var(--t-fast);
}
.tag-unknown:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--bad) 18%, transparent); }
.tag-unknown { cursor: pointer; font-family: inherit; }
.tag-unknown::after { content: '→'; font-size: 11px; margin-left: 1px; transition: transform var(--t-fast); }
.tag-unknown:hover::after { transform: translateX(2px); }

.row-actions { text-align: center; white-space: nowrap; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-soft); font-size: 15px; line-height: 1; padding: 0; width: 28px; height: 28px;
  border-radius: 7px; border: none; background: transparent;
  transition: color 0.15s ease, background 0.15s ease;
}
.icon-btn:hover { color: var(--ink); background: var(--hover-wash); }
.icon-btn.danger:hover { color: var(--bad); background: var(--danger-soft); }
.icon-btn:active { transform: scale(0.88); }

.show-more-btn { margin: 0; }

/* Row toolbar (⋮ menu → delete flow) */
.row-toolbar { display: flex; align-items: center; gap: 6px; min-height: 30px; }
.toolbar-label { font-size: 12.5px; color: var(--ink-soft); }
tbody tr.row-selected, tbody tr.row-selected:hover { background: color-mix(in srgb, var(--bad) 12%, transparent); }
tbody tr.row-selected td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
table.selecting tbody tr:not(.date-group-row) { cursor: pointer; }
table.selecting .icon-btn.row-menu-btn { pointer-events: none; opacity: 0.3; }

table tbody tr.row-just-arrived { animation: rowEnter 0.3s ease both, rowNewPulse 1.6s ease 0.3s; }

/* Text + Plaid pairs: the same charge arrived both ways — one outline around
   both rows (and any split pieces in between). */
table tbody tr.pair-start td, table tbody tr.pair-mid td, table tbody tr.pair-end td {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
table tbody tr.pair-start td { border-top: 2px solid var(--accent); }
table tbody tr.pair-end td { border-bottom: 2px solid var(--accent); }
table tbody tr.pair-mid td { border-bottom-color: color-mix(in srgb, var(--accent) 25%, transparent); }
table tbody tr.pair-start td:first-child, table tbody tr.pair-mid td:first-child, table tbody tr.pair-end td:first-child { border-left: 2px solid var(--accent); }
table tbody tr.pair-start td:last-child, table tbody tr.pair-mid td:last-child, table tbody tr.pair-end td:last-child { border-right: 2px solid var(--accent); }
table tbody tr.pair-start td { border-bottom-color: color-mix(in srgb, var(--accent) 25%, transparent); }

/* Where each transaction came from: Text / Plaid / By hand. */
.src-chip {
  display: inline-block; vertical-align: 1px; margin-right: 6px;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  border-radius: 4px; padding: 0 4px; line-height: 15px;
  color: var(--ink-soft); border: 1px solid var(--line-strong);
}
.src-chip.src-plaid { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); }

.split-chip {
  font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent-2); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 4px; padding: 0 4px; white-space: nowrap;
}

/* ============================================
   MENUS, DROPDOWNS, POPOVERS
   ============================================ */
.row-menu, .custom-select-list, .export-menu {
  background: var(--raised-bg);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-float);
  padding: 6px;
}
.row-menu {
  position: fixed; display: block; z-index: 350; min-width: 210px;
  opacity: 0; visibility: hidden; transform: scale(0.96) translateY(-4px); transform-origin: top right;
  transition: opacity var(--t-fast), visibility var(--t-fast), transform var(--t-pop);
}
.row-menu.show { opacity: 1; visibility: visible; transform: scale(1) translateY(0); }
.row-menu-item, .custom-select-item, .export-menu-item {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 8px 10px; font-size: 13px; border-radius: 7px;
  color: var(--ink); background: none; border: none; font-family: inherit;
}
.row-menu-item:hover, .custom-select-item:hover, .export-menu-item:hover { background: var(--hover-wash); }
.row-menu-item:disabled { color: var(--ink-soft); cursor: default; opacity: 0.5; }
.row-menu-item:disabled:hover { background: none; }
.row-menu-item.danger { color: var(--bad); }
.row-menu-divider, .export-menu-divider { height: 1px; background: var(--line); margin: 6px 4px; }
.row-menu-info { padding: 5px 10px; font-size: 12px; color: var(--ink-soft); font-family: var(--font-num); }

.custom-select-btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 10px;
  height: 34px; padding: 0 12px; border-radius: 9px; text-align: left; font-size: 13px; font-weight: 500;
  border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink);
  min-width: 150px;
}
.custom-select-btn:hover { border-color: var(--ink-soft); }
.custom-select-caret { font-size: 10px; color: var(--ink-soft); flex-shrink: 0; }
.custom-select-list {
  position: fixed; display: block; z-index: 360; max-height: 300px; overflow-y: auto;
  opacity: 0; visibility: hidden; transform: scale(0.97) translateY(-4px); transform-origin: top;
  transition: opacity var(--t-fast), visibility var(--t-fast), transform var(--t-pop);
}
.custom-select-list.show { opacity: 1; visibility: visible; transform: scale(1) translateY(0); }
.custom-select-item { white-space: nowrap; }
.custom-select-item.active { font-weight: 600; }
.custom-select-item.active::after { content: '✓'; margin-left: auto; color: var(--accent); font-weight: 700; }

/* ============================================
   DIALOGS
   ============================================ */
.modal-overlay {
  display: flex; position: fixed; inset: 0; z-index: 300;
  background: color-mix(in srgb, #0b1220 42%, transparent);
  align-items: center; justify-content: center; padding: 20px;
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--t-med), visibility var(--t-med);
}
.modal-overlay.show { opacity: 1; visibility: visible; pointer-events: auto; }
.modal {
  position: relative;
  background: var(--raised-bg);
  border: 1px solid var(--line); border-radius: 16px;
  padding: 26px 28px 22px; width: min(440px, 94vw);
  box-shadow: var(--shadow-float);
  transform: scale(0.96) translateY(10px);
  transition: transform var(--t-pop);
}
/* A thin accent "binding" along the top edge of every dialog. */
.modal::before {
  content: ''; position: absolute; left: 28px; right: 28px; top: 0; height: 3px;
  background: var(--accent); border-radius: 0 0 3px 3px;
}
.modal-overlay.show .modal { transform: scale(1) translateY(0); }
.modal-wide { width: min(700px, 94vw); max-height: 86vh; overflow-y: auto; }
.modal-wide .table-scroll { max-height: 52vh; }
.modal h3 {
  margin: 0 0 6px; font-family: var(--font-display); font-weight: 600; font-size: 23px; letter-spacing: -0.015em;
  padding-right: 36px; font-variation-settings: 'opsz' 72;
}
.modal p { color: var(--ink-soft); font-size: 13.5px; margin: 0 0 18px; }
.modal-close {
  position: absolute; top: 16px; right: 16px; width: 30px; height: 30px; border-radius: 8px;
  border: none; background: transparent; color: var(--ink-soft); font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.modal-close:hover { background: var(--hover-wash); color: var(--ink); }
.modal-field { margin-bottom: 14px; }
.modal-field label {
  display: block; font-size: 10.5px; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: 0.12em;
}
.modal-field input, .modal-field select, .text-input {
  width: 100%; font-size: 14px; padding: 9px 11px; height: 40px;
  border: 1px solid var(--line-strong); border-radius: 9px; background: var(--panel); color: var(--ink);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.modal-field input:focus, .text-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.modal-field .custom-select-btn { width: 100%; height: 40px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }

/* Manual message entry */
.manual-entry-row { display: flex; gap: 10px; }
.manual-entry-row input {
  flex: 1; height: 42px; padding: 0 13px; border-radius: 9px; border: 1px solid var(--line-strong);
  background: var(--panel); color: var(--ink); font-size: 14px; font-family: var(--font-num);
}
.manual-entry-row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.manual-entry-row .btn { height: 42px; }
.manual-entry-status { font-size: 12.5px; color: var(--ink-soft); margin-top: 9px; min-height: 17px; }
.manual-entry-status.error { color: var(--bad); }
.manual-entry-status.success { color: var(--good); }
.example-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.example-chip {
  font-family: var(--font-num); font-size: 11.5px; color: var(--ink-soft);
  border: 1px dashed var(--line-strong); background: transparent; border-radius: 6px; padding: 3px 8px;
}
.example-chip:hover { color: var(--ink); border-style: solid; }

/* "What was this for?" follow-up — a real Sage chat */
.cq-modal { display: flex; flex-direction: column; }
.cq-chat { max-height: 300px; min-height: 70px; margin-bottom: 4px; }
.cq-options { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 2px; }
.cq-option-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; padding: 8px 13px; border-radius: 9px;
  border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink);
  animation: agentMsgIn 0.28s cubic-bezier(.2,.8,.2,1) both;
  transition: transform var(--t-fast), border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.cq-option-btn:nth-child(1){ animation-delay:0.03s; } .cq-option-btn:nth-child(2){ animation-delay:0.07s; }
.cq-option-btn:nth-child(3){ animation-delay:0.11s; } .cq-option-btn:nth-child(4){ animation-delay:0.15s; }
.cq-option-btn:nth-child(5){ animation-delay:0.19s; } .cq-option-btn:nth-child(6){ animation-delay:0.23s; }
.cq-option-btn:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); }
.cq-option-btn:active { transform: scale(0.97); }
.cq-option-btn.cq-keep-btn { border-style: dashed; color: var(--ink-soft); }
.cq-option-btn.cq-keep-btn:hover { color: var(--ink); }
.cq-option-btn.cq-split-btn { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.cq-other-row.cq-hidden { display: none; }

/* ============================================
   STATES, LEGENDS, MISC
   ============================================ */
.empty, .loading, .error { text-align: center; padding: 46px 20px; color: var(--ink-soft); font-size: 13.5px; }
.empty::before { content: '— '; opacity: 0.5; }
.empty::after { content: ' —'; opacity: 0.5; }
.error { color: var(--bad); }
.loading::after { content: ''; display: inline-block; width: 12px; height: 12px; margin-left: 8px; vertical-align: -1px; border: 2px solid var(--line-strong); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; }

.legend { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; }
.legend-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; padding: 5px 6px; border-radius: 6px; }
.legend-left { display: flex; align-items: center; gap: 9px; min-width: 0; }
.legend-left .legend-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.legend-pct { font-family: var(--font-num); color: var(--ink-soft); font-size: 11.5px; width: 40px; text-align: right; }
.legend-amt { font-family: var(--font-num); color: var(--ink); font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* ============================================
   TOASTS
   ============================================ */
.toast-stack { position: fixed; left: 24px; bottom: 24px; z-index: 600; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: 12px;
  max-width: min(92vw, 440px); padding: 11px 14px; border-radius: 11px;
  background: var(--ink); color: var(--bg); font-size: 13px; font-weight: 500; line-height: 1.4;
  box-shadow: var(--shadow-float); animation: fadeInUp 0.22s ease both;
}
.toast.error { background: var(--bad); color: #fff; }
.toast.leaving { opacity: 0; transform: translateY(6px); transition: opacity 0.25s ease, transform 0.25s ease; }
.toast button { border: none; background: none; color: inherit; font-weight: 700; text-decoration: underline; padding: 0; }
.update-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px);
  max-width: min(92vw, 520px); padding: 12px 18px; border-radius: 12px;
  background: var(--ink); color: var(--bg); font-size: 13px; font-weight: 500; line-height: 1.45;
  box-shadow: var(--shadow-float); z-index: 500; cursor: pointer;
  opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease;
}
.update-toast.show { opacity: 1; transform: translate(-50%, 0); }


/* ============================================
   SAGE — chat panel (Charts tab + dashboard bubble)
   ============================================ */
.agent-panel { display: flex; flex-direction: column; height: 620px; max-height: 76vh; position: relative; overflow: hidden; padding: 0 22px 18px; }
.agent-panel.compact { height: 470px; max-height: calc(100vh - 140px); padding: 0 4px; }
.agent-panel::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-light), var(--accent));
  background-size: 200% 100%; animation: agentTopBarShift 6s linear infinite;
}
.agent-panel.compact::before { display: none; }
@keyframes agentTopBarShift { to { background-position: -200% 0; } }

.agent-header { display: flex; align-items: center; gap: 12px; margin: 16px 0 12px; flex-shrink: 0; }
.agent-header h2 { font-family: var(--font-display); font-size: 21px; font-weight: 600; margin: 0; }
.agent-header .agent-header-tools { margin-left: auto; display: flex; gap: 6px; padding-right: 26px; }
.agent-panel:not(.compact) .agent-header .agent-header-tools { padding-right: 0; }
.agent-avatar {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; position: relative; z-index: 0;
  background: radial-gradient(circle at 32% 28%, var(--accent-light), var(--accent) 58%, var(--accent-2) 100%);
  color: var(--on-accent); display: flex; align-items: center; justify-content: center; font-size: 18px;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 40%, transparent);
  animation: agentOrbBreathe 4s ease-in-out infinite;
}
.agent-panel.compact .agent-avatar { width: 36px; height: 36px; font-size: 15px; }
@keyframes agentOrbBreathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.agent-avatar::before {
  content: ''; position: absolute; inset: -5px; border-radius: 50%; z-index: -1;
  background: conic-gradient(from 0deg, var(--accent), var(--accent-light), var(--accent-2), var(--accent));
  opacity: 0.32; filter: blur(2px); animation: agentAvatarSpin 8s linear infinite;
}
.agent-avatar.thinking { animation: agentOrbBreathe 0.8s ease-in-out infinite; }
.agent-avatar.thinking::before { opacity: 0.9; filter: blur(1px); animation: agentAvatarSpin 1s linear infinite; }
@keyframes agentAvatarSpin { to { transform: rotate(360deg); } }

.agent-subtitle { font-size: 12px; color: var(--ink-soft); display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.agent-status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--good); flex-shrink: 0; animation: statusPulse 2s ease-in-out infinite; }
@keyframes statusPulse { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 45%, transparent); } 50% { box-shadow: 0 0 0 4px transparent; } }

.agent-chat { flex: 1; overflow-y: auto; padding: 6px 2px; display: flex; flex-direction: column; gap: 12px; }
.agent-msg { display: flex; animation: agentMsgIn 0.32s cubic-bezier(.2,.8,.2,1) both; }
.agent-msg-user { justify-content: flex-end; }
.agent-bubble { max-width: 82%; padding: 10px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.agent-bubble.rich { white-space: normal; }
.agent-bubble.rich p { margin: 0 0 6px; }
.agent-bubble.rich p:last-child { margin-bottom: 0; }
.agent-bubble.rich ul, .agent-bubble.rich ol { margin: 4px 0 6px; padding-left: 20px; }
.agent-bubble.rich li { margin: 2px 0; }
.agent-msg-bot .agent-bubble {
  background: linear-gradient(180deg, var(--bubble-bot-from), color-mix(in srgb, var(--accent-soft) 70%, transparent));
  color: var(--ink); border-top-left-radius: 4px; border: 1px solid var(--line);
}
.agent-msg-user .agent-bubble { background: var(--ink); color: var(--bg); border-top-right-radius: 4px; }
@keyframes agentMsgIn { from { opacity: 0; transform: translateY(8px) scale(0.99); } to { opacity: 1; transform: none; } }
.agent-cursor { display: inline-block; width: 2px; height: 1em; background: var(--ink); margin-left: 1px; vertical-align: -2px; animation: cursorBlink 0.9s steps(1) infinite; }
@keyframes cursorBlink { 50% { opacity: 0; } }

.agent-thinking-bubble { display: flex; align-items: center; gap: 9px; }
.agent-typing-dots { display: inline-flex; gap: 4px; align-items: center; }
.agent-typing-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-soft); animation: agentDotBounce 1.1s ease-in-out infinite; }
.agent-typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.agent-typing-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes agentDotBounce { 0%,60%,100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-5px); opacity: 1; } }
.agent-thinking-label { font-size: 12px; color: var(--ink-soft); animation: agentLabelFade 0.35s ease; }
@keyframes agentLabelFade { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }

.agent-suggestions { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 4px; flex-shrink: 0; }
.agent-chip {
  font-size: 12px; padding: 6px 11px; border-radius: 8px; border: 1px dashed var(--line-strong);
  background: transparent; color: var(--ink);
  opacity: 0; animation: chipIn 0.4s ease forwards;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.agent-chip:nth-child(1) { animation-delay: 0.05s; }
.agent-chip:nth-child(2) { animation-delay: 0.12s; }
.agent-chip:nth-child(3) { animation-delay: 0.19s; }
.agent-chip:nth-child(4) { animation-delay: 0.26s; }
@keyframes chipIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.agent-chip:hover { background: var(--accent-soft); border-style: solid; border-color: var(--accent); }

.agent-input-row { display: flex; gap: 8px; margin-top: 10px; flex-shrink: 0; }
.agent-input-row input {
  flex: 1; height: 42px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 11px;
  font-size: 14px; background: var(--panel); color: var(--ink);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.agent-input-row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.agent-input-row input:disabled { opacity: 0.6; }
.agent-send-btn {
  width: 42px; height: 42px; border-radius: 11px; padding: 0; flex-shrink: 0;
  background: var(--accent); border: 1px solid var(--accent); color: var(--on-accent);
  display: flex; align-items: center; justify-content: center; transition: transform 0.15s ease, background 0.15s ease;
}
.agent-send-btn:hover:not(:disabled) { background: var(--accent-2); }
.agent-send-btn:disabled { opacity: 0.55; cursor: default; }
.agent-send-btn:active:not(:disabled) { transform: scale(0.9); }
.agent-send-icon.sending { animation: sendFly 0.5s ease; }
@keyframes sendFly {
  0% { transform: translate(0,0); opacity: 1; } 55% { transform: translate(11px,-11px); opacity: 0; }
  56% { transform: translate(-11px,11px); opacity: 0; } 100% { transform: translate(0,0); opacity: 1; }
}

.sage-usage-notice {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--accent-soft); border: 1px solid var(--line); border-radius: 10px;
  color: var(--ink); font-size: 11.5px; line-height: 1.4;
  max-height: 0; opacity: 0; overflow: hidden; padding: 0 10px; margin: 0; flex-shrink: 0;
  transition: max-height 0.25s ease, opacity 0.2s ease, padding 0.25s ease, margin 0.25s ease;
}
.sage-usage-notice.show { max-height: 80px; opacity: 1; padding: 8px 10px; margin: 0 0 10px; }
.sage-usage-dismiss {
  border: none; background: transparent; color: var(--ink-soft); font-size: 13px;
  flex-shrink: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 6px;
}
.sage-usage-dismiss:hover { background: var(--hover-wash); color: var(--ink); }

/* ============================================
   FLOATING HELPERS — Sage + Calculator
   ============================================ */
.fab-bar { position: fixed; right: 24px; bottom: 24px; display: flex; flex-direction: column-reverse; gap: 10px; z-index: 200; }
.fab {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 16px; border: 1px solid var(--line-strong);
  font-size: 21px; box-shadow: var(--shadow-float);
  transition: transform 0.18s ease, border-radius 0.2s ease;
}
.fab:hover { transform: translateY(-2px); }
.fab:active { transform: scale(0.94); }
.fab-sage {
  background: radial-gradient(circle at 32% 28%, var(--accent-light), var(--accent) 58%, var(--accent-2) 100%);
  color: var(--on-accent); border-color: transparent; border-radius: 50%;
}
.fab-calc { background: var(--raised-bg); color: var(--ink); }
.fab .fab-label {
  position: absolute; right: calc(100% + 10px); top: 50%; transform: translate(6px, -50%);
  background: var(--ink); color: var(--bg); font-size: 12px; font-weight: 600; white-space: nowrap;
  padding: 5px 9px; border-radius: 7px; opacity: 0; pointer-events: none; transition: opacity var(--t-fast), transform var(--t-fast);
}
.fab:hover .fab-label, .fab:focus-visible .fab-label { opacity: 1; transform: translate(0, -50%); }
.fab .fab-badge {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--bad); color: #fff; font-size: 10.5px; font-weight: 700; font-family: var(--font-num);
  display: none; align-items: center; justify-content: center; border: 2px solid var(--bg);
}
.fab .fab-badge.show { display: flex; }

.fab-popup {
  position: fixed; right: 88px; bottom: 24px; width: 370px; max-width: calc(100vw - 110px);
  background: var(--raised-bg); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow-float); z-index: 199; padding: 4px 16px 16px;
  transform-origin: bottom right; transform: scale(0.94) translateX(10px); opacity: 0;
  pointer-events: none; transition: transform 0.22s cubic-bezier(.2,.8,.2,1), opacity 0.2s ease;
}
#calcFabPopup { width: 300px; padding-top: 16px; }
.fab-popup.open { transform: none; opacity: 1; pointer-events: auto; }
.fab-popup h2 { font-family: var(--font-display); font-size: 20px; font-weight: 600; }
.fab-popup-close {
  position: absolute; top: 14px; right: 12px; width: 28px; height: 28px; border-radius: 8px;
  border: none; background: transparent; color: var(--ink-soft); font-size: 15px;
  display: flex; align-items: center; justify-content: center; z-index: 2;
}
.fab-popup-close:hover { background: var(--hover-wash); color: var(--ink); }

/* Calculator — styled like a desk adding machine */
.calc-screen {
  background: color-mix(in srgb, var(--ink) 6%, transparent); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; text-align: right; font-family: var(--font-num); margin: 8px 0 12px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.06);
}
.calc-screen-prev { font-size: 12px; color: var(--ink-soft); min-height: 16px; }
.calc-screen-current { font-size: 30px; color: var(--ink); overflow-x: auto; white-space: nowrap; font-weight: 500; letter-spacing: -0.01em; }
.calc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.calc-btn {
  font-family: var(--font-num); font-size: 16px; height: 46px; border-radius: 10px;
  border: 1px solid var(--line); border-bottom-width: 2px; background: var(--panel); color: var(--ink);
  transition: transform 0.08s ease, background 0.15s ease;
}
.calc-btn:hover { background: linear-gradient(var(--hover-wash), var(--hover-wash)), var(--panel); }
.calc-btn:active { transform: translateY(1px); border-bottom-width: 1px; }
.calc-btn.op { background: var(--accent-soft); font-weight: 600; }
.calc-btn.equals { background: var(--accent); color: var(--on-accent); border-color: var(--accent-2); font-weight: 600; }
.calc-btn.wide { grid-column: span 2; }
.calc-hint { font-size: 11px; color: var(--ink-soft); margin-top: 10px; text-align: center; }

/* ============================================
   FEATURES — at-a-glance strip, budgets, recurring,
   duplicates, spending calendar
   ============================================ */

[hidden] { display: none !important; }

/* "This month at a glance" — four small cards under the totals */
.glance-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
.glance-card {
  display: flex; flex-direction: column; gap: 3px; min-width: 0; text-align: left;
  padding: 12px 14px; border-radius: 12px; color: var(--ink);
  background: var(--panel); border: var(--panel-border); box-shadow: var(--panel-shadow);
  backdrop-filter: var(--panel-blur); -webkit-backdrop-filter: var(--panel-blur);
  transition: border-color var(--t-fast), transform var(--t-fast);
}
button.glance-card:hover { border-color: var(--line-strong); }
@media (hover: hover) { button.glance-card:hover { transform: translateY(-1px); } }
.glance-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-soft); display: flex; justify-content: space-between; gap: 6px; }
.glance-label .go { letter-spacing: 0; text-transform: none; font-weight: 600; color: var(--ink-faint); }
.glance-main { font-family: var(--font-display); font-size: 18px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.01em; }
.glance-main .up { color: var(--bad); } .glance-main .down { color: var(--good); }
.glance-sub { font-size: 12px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.glance-bars { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.glance-bar { display: grid; grid-template-columns: minmax(0, 1fr) 46px; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink-soft); }
.glance-bar .gb-track { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--hover-wash); overflow: hidden; }
.glance-bar .gb-track span { display: block; height: 100%; border-radius: 2px; background: var(--good); }
.glance-bar.near .gb-track span { background: var(--s4); }
.glance-bar.over .gb-track span { background: var(--bad); }
.glance-bar .gb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.glance-bar .gb-pct { text-align: right; font-family: var(--font-num); }
@media (max-width: 1100px) { .glance-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Budgets dialog */
.budget-list { display: flex; flex-direction: column; max-height: 52vh; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.budget-row { display: grid; grid-template-columns: minmax(120px, 190px) minmax(0, 1fr) 128px; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.budget-row:last-child { border-bottom: none; }
.budget-name { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13.5px; min-width: 0; }
.budget-name .b-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.budget-track { height: 8px; border-radius: 4px; background: var(--hover-wash); overflow: hidden; }
.budget-track span { display: block; height: 100%; border-radius: 4px; background: var(--good); transition: width 0.4s ease; }
.budget-row.near .budget-track span { background: var(--s4); }
.budget-row.over .budget-track span { background: var(--bad); }
.budget-row:not(.ok):not(.near):not(.over) .budget-track span { background: var(--line-strong); }
.budget-note { font-size: 11.5px; color: var(--ink-soft); margin-top: 4px; font-family: var(--font-num); }
.budget-row.over .budget-note { color: var(--bad); }
.budget-input { display: flex; align-items: center; gap: 4px; border: 1px solid var(--line-strong); border-radius: 9px; padding: 0 10px; background: var(--panel); height: 38px; }
.budget-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.budget-input span { color: var(--ink-soft); font-family: var(--font-num); }
.budget-input input { border: none; outline: none; background: transparent; width: 100%; font-family: var(--font-num); font-size: 14px; color: var(--ink); min-width: 0; }

/* Budget status on the Categories bars */
.cat-budget { font-size: 11px; font-family: var(--font-num); color: var(--ink-soft); white-space: nowrap; }
.cat-budget.near { color: color-mix(in srgb, var(--s4) 75%, var(--ink)); }
.cat-budget.over { color: var(--bad); font-weight: 600; }

/* Recurring dialog */
.recurring-total { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: -4px 0 14px; color: var(--ink-soft); font-size: 13px; }
.recurring-total b { font-family: var(--font-display); font-size: 26px; color: var(--ink); font-weight: 600; }
.recurring-list { display: flex; flex-direction: column; max-height: 54vh; overflow-y: auto; }
.recurring-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 128px; align-items: center; gap: 14px; padding: 11px 4px 11px 14px; border-bottom: 1px solid var(--line); box-shadow: inset 2px 0 0 var(--margin-rule); }
.recurring-row:last-child { border-bottom: none; }
.rec-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rec-ico { font-size: 18px; width: 24px; text-align: center; flex-shrink: 0; }
.rec-name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-sub { font-size: 12px; color: var(--ink-soft); }
.rec-amt { font-family: var(--font-num); font-weight: 500; white-space: nowrap; }
.rec-amt span { color: var(--ink-soft); font-size: 11px; margin-left: 2px; }
.rec-next { font-size: 12.5px; text-align: right; font-weight: 600; }
.rec-next span { display: block; font-weight: 400; color: var(--ink-soft); font-size: 11.5px; }
.rec-next.late { color: var(--s4); }

/* Duplicates dialog */
.dup-list { display: flex; flex-direction: column; gap: 12px; max-height: 56vh; overflow-y: auto; }
.dup-group { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.dup-row { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.dup-row:last-of-type { border-bottom: none; }
.dup-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 2px 6px; border-radius: 4px; background: var(--hover-wash); color: var(--ink-soft); flex-shrink: 0; margin-top: 2px; }
.dup-row + .dup-row .dup-badge { background: var(--danger-soft); color: var(--bad); }
.dup-main { min-width: 0; }
.dup-name { font-weight: 600; font-size: 13.5px; }
.dup-name b { font-family: var(--font-num); font-weight: 500; margin-left: 6px; }
.dup-sub { font-size: 12px; color: var(--ink-soft); overflow-wrap: anywhere; }
.dup-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; flex-wrap: wrap; }
#dupBtn { border-color: color-mix(in srgb, var(--s4) 70%, transparent); }
#dupBtn .count { background: var(--s4); color: #1a1205; }

/* Notes on transactions */
.row-note { display: block; font-size: 12px; color: var(--ink); margin-top: 3px; font-style: italic; overflow-wrap: anywhere; }
.row-note::before { content: '✎ '; font-style: normal; color: var(--ink-soft); }
.modal-field textarea {
  width: 100%; font-size: 14px; padding: 9px 11px; min-height: 64px; resize: vertical; font-family: inherit;
  border: 1px solid var(--line-strong); border-radius: 9px; background: var(--panel); color: var(--ink);
}
.modal-field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }

@media (max-width: 640px) {
  .glance-row { gap: 8px; }
  .glance-card { padding: 10px 11px; }
  .glance-label .go { display: none; }
  .glance-main { font-size: 15.5px; white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .glance-sub { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 11.5px; }
  .budget-row { grid-template-columns: minmax(0, 1fr) 112px; grid-template-areas: "name input" "prog prog"; row-gap: 8px; }
  .budget-name { grid-area: name; }
  .budget-progress { grid-area: prog; }
  .budget-input { grid-area: input; height: 42px; }
  .budget-list, .recurring-list, .dup-list { max-height: none; }
  .recurring-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main amt" "main next"; row-gap: 2px; padding-right: 0; }
  .rec-main { grid-area: main; }
  .rec-amt { grid-area: amt; text-align: right; }
  .rec-next { grid-area: next; }
  .rec-next span { display: none; }
}

/* ============================================
   RESPONSIVE — one site that adapts to every screen:
   big monitors · laptops · tablets · phones (upright and sideways)
   ============================================ */

/* Wider monitors get a little more room instead of a narrow strip. */
:root { --page-max: 1280px; --nav-bar-h: 0px; }
@media (min-width: 1680px) { :root { --page-max: 1440px; } }
@media (min-width: 2200px) { :root { --page-max: 1600px; } }
.topnav, .wrap { max-width: var(--page-max); width: 100%; }

/* Small laptops and tablets turned sideways */
@media (max-width: 1180px) {
}
@media (max-width: 1100px) {
  /* side-by-side ledgers get a little more room for store names */
  .table-scroll th:nth-child(2), .table-scroll td:nth-child(2) { width: 132px; }
  .table-scroll th:nth-child(3), .table-scroll td:nth-child(3) { width: 108px; }
}

/* Tablets (and narrow laptop windows): masthead wraps onto two rows */
@media (max-width: 860px) {
  .topnav { flex-wrap: wrap; gap: 0 18px; padding: 0 20px; }
  .topnav::after { left: 20px; right: 20px; }
  .topnav-left { gap: 14px; width: 100%; }
  .masthead-tools { width: 100%; margin-left: 0; padding: 0 0 10px; justify-content: flex-end; }
  .navlinks a { padding: 18px 10px 8px; }
  .wrap { padding: 20px 20px 100px; }
  .page-title { font-size: 32px; }
  .search-box { min-width: 0; flex: 1 1 100%; }
  /* Floating helpers sit side by side, slimmer, covering less of the page. */
  .fab-bar { flex-direction: row-reverse; gap: 8px; right: 16px; bottom: 16px; }
  .fab { width: 48px; height: 48px; font-size: 19px; border-radius: 14px; }
  .fab-sage { border-radius: 50%; }
  .fab-popup { right: 16px; bottom: 76px; }
  /* Ledgers grow with the page instead of scrolling inside a box —
     a box-inside-a-page is awkward to scroll with a finger. */
  .two-col > .panel .table-scroll { max-height: none; -webkit-mask-image: none; mask-image: none; }
}

/* ---------------- Phones ---------------- */
.hide-sm { display: inline; }
@media (max-width: 640px) {
  :root { --nav-bar-h: calc(62px + env(safe-area-inset-bottom)); }
  .hide-sm { display: none; }

  /* Masthead: one slim row — brand on the left, tools on the right. */
  .topnav {
    flex-wrap: nowrap; align-items: center; gap: 10px; min-height: 58px;
    padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  }
  .topnav::after { left: 16px; right: 16px; }
  .topnav-left { width: auto; gap: 0; }
  .brand { font-size: 25px; }
  .masthead-tools { width: auto; margin-left: auto; padding: 0; gap: 6px; }

  /* The four pages become a tab bar pinned to the bottom of the screen. */
  .navlinks {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 250;
    height: var(--nav-bar-h);
    padding: 0 max(6px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(6px, env(safe-area-inset-left));
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
    background: var(--raised-bg);
    border-top: 1px solid var(--line-strong);
    box-shadow: 0 -8px 28px -14px rgba(0, 0, 0, 0.35);
  }
  .navlinks a {
    flex-direction: column; justify-content: center; align-items: center; gap: 4px;
    padding: 6px 2px 4px; font-size: 11px; letter-spacing: 0.01em;
    -webkit-tap-highlight-color: transparent;
  }
  .navlinks a .nav-ico { display: flex; opacity: 0.7; }
  .navlinks a .nav-ico svg { width: 22px; height: 22px; }
  .navlinks a.active { color: var(--ink); }
  .navlinks a.active .nav-ico { opacity: 1; color: var(--accent-2); }
  .navlinks a.active::after { display: none; }
  /* the bookmark ribbon now hangs from the top edge of the tab bar */
  .navlinks a.active::before { top: -1px; width: 14px; height: 12px; margin-left: -7px; }
  .navlinks a:active { background: var(--hover-wash); }

  .wrap {
    padding: 16px max(16px, env(safe-area-inset-right)) calc(var(--nav-bar-h) + 92px) max(16px, env(safe-area-inset-left));
  }

  /* Floating things sit just above the tab bar, side by side, so they
     cover as little of the page as possible. */
  .fab-bar { right: 12px; bottom: calc(var(--nav-bar-h) + 12px); flex-direction: row-reverse; gap: 8px; }
  .fab { width: 46px; height: 46px; font-size: 18px; border-radius: 14px; }
  .fab-sage { border-radius: 50%; }
  .fab .fab-label { display: none; }
  .fab-popup {
    left: 10px; right: 10px; bottom: calc(var(--nav-bar-h) + 66px); width: auto !important; max-width: none;
    max-height: calc(100dvh - var(--nav-bar-h) - 130px); overflow-y: auto;
  }
  .agent-panel.compact { height: min(480px, calc(100dvh - var(--nav-bar-h) - 170px)); max-height: none; }
  .toast-stack { left: 12px; right: 12px; bottom: calc(var(--nav-bar-h) + 12px); }
  .toast { max-width: none; }
  .update-toast { bottom: calc(var(--nav-bar-h) + 12px); width: calc(100vw - 24px); }

  /* Page heading + period switcher */
  .page-head { margin: 2px 0 16px; gap: 12px; }
  .page-title { font-size: 30px; }
  .subtitle { font-size: 13px; }
  .page-head-tools { width: 100%; }
  .filter-tabs { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; }
  .page-head-tools > .filter-tabs { width: 100%; }
  /* all four periods fit across the screen — no hidden "Custom…" */
  .page-head-tools > .filter-tabs .filter-tab { flex: 1 1 auto; min-width: 0; padding: 9px 4px; font-size: 12.5px; text-align: center; }
  .page-head-tools > .filter-tabs .filter-tab.active::before { display: none; }
  .custom-range { left: 0; right: 0; }

  /* Totals: two-up */
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { padding: 13px 14px 12px; border-left: none; border-top: 1px solid var(--line); }
  .stat:nth-child(even) { border-left: 1px solid var(--line); }
  .stat:nth-child(-n+2) { border-top: none; }
  .stat-label { font-size: 10px; letter-spacing: 0.1em; }
  .stat-value { font-size: 25px; }

  /* Toolbar buttons share the row; search gets a full line. */
  .toolbar { gap: 8px; }
  .toolbar .btn { flex: 1 1 auto; }
  .toolbar .spacer { display: none; }

  .panel { padding: 16px 14px; border-radius: 12px; }
  .panel h2, .sheet-title { font-size: 19px; }
  .col-heading { flex-wrap: wrap; row-gap: 6px; }

  /* Ledger tables become tidy two-line rows:
       Store name ............ amount
       time · note ........... category  ⋯            */
  .table-scroll { max-height: none !important; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .table-scroll table, .table-scroll tbody { display: block; width: 100%; }
  .table-scroll thead { display: none; }
  .table-scroll tbody tr[data-id] {
    display: grid; grid-template-columns: minmax(0, 1fr) auto 38px;
    grid-template-areas: "main amt act" "main cat act";
    column-gap: 10px; row-gap: 5px; align-items: center;
    padding: 11px 0 11px 14px; border-bottom: 1px solid var(--line);
    box-shadow: inset 2px 0 0 var(--margin-rule);
  }
  .table-scroll tbody tr[data-id]:last-child { border-bottom: none; }
  .table-scroll tbody td { display: block; padding: 0; border: none; width: auto !important; box-shadow: none !important; min-width: 0; }
  .table-scroll tbody td:first-child { padding-left: 0; }
  .table-scroll td.msg { grid-area: main; }
  .table-scroll tbody tr[data-id] td:nth-child(2) { grid-area: cat; justify-self: end; max-width: 100%; }
  .table-scroll td.amt { grid-area: amt; font-size: 14px; }
  .table-scroll td.row-actions { grid-area: act; justify-self: end; }
  .table-scroll .date-group-row, .table-scroll .date-group-row td { display: block; }
  .table-scroll .date-group-row td { padding: 16px 0 6px 14px !important; box-shadow: inset 2px 0 0 var(--margin-rule) !important; }
  .table-scroll tbody tr.row-selected { box-shadow: inset 4px 0 0 var(--bad); }
  /* Pairs on phones: a rounded box around the rows. */
  .table-scroll tbody tr.pair-start, .table-scroll tbody tr.pair-mid, .table-scroll tbody tr.pair-end {
    border-left: 2px solid var(--accent); border-right: 2px solid var(--accent);
    background: color-mix(in srgb, var(--accent) 6%, transparent); padding-right: 4px;
  }
  .table-scroll tbody tr.pair-start { border-top: 2px solid var(--accent); border-radius: 12px 12px 0 0; margin-top: 4px; }
  .table-scroll tbody tr.pair-end { border-bottom: 2px solid var(--accent); border-radius: 0 0 12px 12px; margin-bottom: 4px; }
  .table-scroll tbody tr.pair-start, .table-scroll tbody tr.pair-mid { border-bottom-color: color-mix(in srgb, var(--accent) 25%, transparent); }
  .table-scroll tbody tr.pair-start td:nth-child(n), .table-scroll tbody tr.pair-mid td:nth-child(n), .table-scroll tbody tr.pair-end td:nth-child(n) { background: none; border: none; }
  .tag { font-size: 11px; }
  .tag-unknown::after { content: none; }
  .ledger-foot { flex-wrap: wrap; row-gap: 8px; }

  /* Dialogs slide up from the bottom, like a phone app. */
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal, .modal-wide {
    width: 100% !important; max-width: none; max-height: 92dvh; overflow-y: auto;
    border-radius: 20px 20px 0 0; border-bottom: none;
    padding: 28px max(18px, env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
    transform: translateY(60px);
  }
  .modal-overlay.show .modal { transform: none; }
  /* the accent strip becomes a little grab handle */
  .modal::before { left: 50%; right: auto; width: 42px; height: 4px; top: 9px; margin-left: -21px; border-radius: 4px; background: var(--line-strong); }
  .modal h3 { font-size: 21px; }
  .modal-close { top: 14px; right: 12px; width: 36px; height: 36px; }
  .modal-actions { gap: 8px; }
  .modal-actions .btn { flex: 1; height: 46px; }
  .modal-wide .table-scroll { max-height: none; }
  .cq-chat { max-height: 38dvh; }
  .row-menu { min-width: 220px; }
}

/* Very small phones */
@media (max-width: 380px) {
  .brand { font-size: 22px; }
  .stat-value { font-size: 22px; }
  .navlinks a { font-size: 10.5px; }
}

/* Phones and small tablets turned sideways: short screens get a slimmer masthead. */
@media (max-height: 520px) and (min-width: 641px) {
  /* masthead back on one row so it doesn't eat a third of the screen */
  .topnav { min-height: 54px; flex-wrap: nowrap; }
  .topnav-left { width: auto; }
  .masthead-tools { width: auto; margin-left: auto; padding: 4px 0 0; }
  .navlinks a { padding-top: 12px; }
  .page-title { font-size: 28px; }
  .wrap { padding-top: 12px; }
  .modal, .modal-wide { max-height: 94vh; overflow-y: auto; }
  .agent-panel { height: calc(100vh - 30px); max-height: none; }
  .agent-panel.compact { height: calc(100vh - 110px); }
  .fab-popup { bottom: 12px; }
}

/* ---------------- Touch screens (any size) ---------------- */
/* Bigger tap targets, and nothing that only appears on mouse-hover. */
@media (pointer: coarse) {
  .icon-btn { width: 40px; height: 40px; font-size: 18px; }
  .btn { height: 42px; }
  .btn.small { height: 36px; }
  .filter-tab { padding: 10px 14px; }
  .row-menu-item, .custom-select-item, .export-menu-item { padding: 12px 12px; font-size: 14.5px; }
  .cq-option-btn { padding: 11px 14px; }
  .agent-chip { padding: 9px 12px; }
  .custom-select-btn { height: 42px; }
  .table-scroll th:nth-child(4), .table-scroll td:nth-child(4) { width: 46px; }
  .tree-node-actions { opacity: 1; }
  .fab .fab-label { display: none; }
}
@media (hover: none) {
  .theme-card:hover, .cq-option-btn:hover, .fab:hover, .carousel-arrow:hover, .tag-unknown:hover, .btn:active:not(:disabled) { transform: none; }
  .theme-card:hover { box-shadow: none; }
}

/* Phones zoom in on any text box with letters smaller than 16px when you tap
   it — keep every input at 16px on small screens so the page stays put. */
@media (max-width: 900px) and (pointer: coarse), (max-width: 640px) {
  input, select, textarea, .palette-input, .search-box input, .agent-input-row input,
  .manual-entry-row input, .modal-field input, .text-input, .cat-detail-category-input,
  .custom-range input[type="date"] { font-size: 16px !important; }
}

/* ============================================
   SIGN-IN, INVITE / RESET, AND ADMIN PAGES
   ============================================ */
.auth-page { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 28px 16px; }
.auth-card {
  width: 100%; max-width: 420px; background: var(--panel); border: 1px solid var(--line);
  border-top: 4px double var(--line-strong); border-radius: 16px; padding: 28px 26px 24px;
  box-shadow: inset 2px 0 0 var(--margin-rule), var(--shadow-sm, 0 8px 30px rgba(0,0,0,0.06));
}
.auth-card .brand { font-size: 26px; margin-bottom: 18px; }
.auth-card h1, .auth-card .auth-h { font-family: var(--font-display); font-weight: 600; font-size: 28px; line-height: 1.15; margin: 0 0 6px; letter-spacing: -0.01em; }
.auth-card .auth-sub { color: var(--ink-soft); font-size: 13.5px; margin: 0 0 20px; }
.auth-field { margin-bottom: 14px; }
.auth-field label { display: block; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-soft); margin-bottom: 6px; }
.auth-field .text-input { width: 100%; height: 42px; }
.auth-field .hint { font-size: 12px; color: var(--ink-soft); margin-top: 5px; }
.auth-card .btn.primary.wide { width: 100%; height: 44px; font-size: 14.5px; margin-top: 6px; }
.auth-error { color: var(--bad); font-size: 13px; min-height: 18px; margin: 10px 0 0; }
.auth-foot { font-size: 12.5px; color: var(--ink-soft); margin: 18px 0 0; padding-top: 14px; border-top: 1px dashed var(--line); }
.auth-readonly { font-family: var(--font-num); font-size: 15px; padding: 10px 12px; border-radius: 9px; background: var(--hover-wash); overflow-wrap: anywhere; }

/* ---- Welcome showcase (sign-in and invite pages) ----
   Computer: story and pictures on the left, the card pinned on the right.
   Phone: short hero, then the card, then the pictures as you scroll. */
.welcome-page {
  position: relative; max-width: 1200px; margin: 0 auto;
  padding: 48px 32px 64px; display: grid; gap: 28px 56px;
  grid-template-columns: minmax(0, 1fr) 400px;
  grid-template-areas: "hero card" "feats card";
  align-items: start;
}
.welcome-page::before {
  content: ""; position: fixed; inset: -20% -10% auto auto; width: 70vw; height: 70vw; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 22%, transparent), transparent);
}
/* "hidden" turns the page into its own scroller and breaks the pinned card. */
html:has(.welcome-page), html:has(.welcome-page) body { overflow-x: clip; }
.wl-hero { grid-area: hero; animation: fadeInUp 0.6s both; }
.welcome-page > .auth-card { grid-area: card; position: sticky; top: 40px; max-width: none; animation: fadeInUp 0.6s 0.1s both; }
.welcome-page > .auth-card > .brand { display: none; }
.wl-feats { grid-area: feats; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.wl-brand { font-size: 30px; margin-bottom: 34px; }
.wl-eyebrow {
  display: inline-block; margin: 0 0 14px; padding: 5px 11px; border-radius: 99px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tag-ink); background: var(--accent-soft); border: 1px solid var(--tag-border);
}
.wl-title {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(38px, 5vw, 62px);
  line-height: 1.02; letter-spacing: -0.025em; margin: 0 0 18px; max-width: 13ch; text-wrap: balance;
}
.wl-title em { font-style: italic; font-weight: 500; color: color-mix(in srgb, var(--accent) 80%, var(--ink)); position: relative; white-space: nowrap; }
.wl-title em::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.06em; height: 0.14em; z-index: -1; border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 45%, transparent); transform-origin: left; animation: wlSwipe 0.7s 0.5s both;
}
.wl-lede { font-size: 17px; line-height: 1.55; color: var(--ink-soft); max-width: 54ch; margin: 0 0 22px; }
.wl-pills { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.wl-pills li {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 99px; font-size: 13px; font-weight: 600;
  background: var(--panel); border: 1px solid var(--line); backdrop-filter: var(--panel-blur);
}

.wl-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 18px;
  backdrop-filter: var(--panel-blur); box-shadow: var(--panel-shadow);
  display: flex; flex-direction: column; gap: 16px; overflow: hidden;
  opacity: 0; transform: translateY(14px); transition: opacity 0.6s, transform 0.6s cubic-bezier(.2,.8,.3,1);
}
.wl-card.in { opacity: 1; transform: none; }
.wl-wide { grid-column: 1 / -1; container-type: inline-size; }
.wl-wide-in { display: flex; flex-direction: column; gap: 16px; }
@container (min-width: 760px) {
  .wl-wide-in { flex-direction: row; align-items: center; gap: 24px; }
  .wl-wide-in .wl-copy { flex: 0 0 32%; }
  .wl-wide-in .wl-scene { flex: 1; min-width: 0; }
}
.wl-copy h2 { font-family: var(--font-display); font-weight: 600; font-size: 21px; letter-spacing: -0.01em; margin: 0 0 5px; }
.wl-copy p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
.wl-scene { position: relative; border-radius: 13px; padding: 14px; background: var(--hover-wash); }

/* Shared mini transaction row */
.wl-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 10px;
  background: var(--raised-bg); border: 1px solid var(--line); font-size: 13px;
}
.wl-ico { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--accent-soft); font-size: 15px; }
.wl-name { flex: 1; min-width: 0; font-weight: 600; line-height: 1.2; }
.wl-name small { display: block; font-weight: 500; font-size: 11.5px; color: var(--ink-soft); }
.wl-amt { font-family: var(--font-num); font-weight: 600; font-variant-numeric: tabular-nums; }
.wl-chip {
  font-family: var(--font-num); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; padding: 2px 7px; border-radius: 99px;
  color: var(--tag-ink); border: 1px solid var(--tag-border);
}
.wl-chip.alt { color: var(--good); border-color: color-mix(in srgb, var(--good) 45%, transparent); }

/* Texts → rows */
.wl-sms { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.wl-sms .wl-bubble { align-self: flex-start; max-width: 300px; }
.wl-sms .wl-flow { justify-content: center; }
@container (min-width: 500px) {
  .wl-sms { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.25fr); align-items: center; gap: 12px; }
}
.wl-bubble {
  font-size: 12.5px; line-height: 1.4; padding: 10px 12px; border-radius: 14px 14px 14px 4px;
  background: var(--raised-bg); border: 1px solid var(--line);
}
.wl-bubble b { display: block; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 3px; }
.wl-flow { display: flex; gap: 4px; }
.wl-flow i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: 0.25; }
.in .wl-flow i { animation: wlFlow 1.4s infinite; }
.in .wl-flow i:nth-child(2) { animation-delay: 0.2s; }
.in .wl-flow i:nth-child(3) { animation-delay: 0.4s; }
.wl-sms .wl-row { opacity: 0; }
.in .wl-sms .wl-row { animation: popIn 0.45s 0.9s both, rowNewPulse 2.4s 1.3s; }
.in .wl-sms .wl-bubble { animation: fadeInUp 0.45s 0.2s both; }

/* Sage chat */
.wl-chat { display: flex; flex-direction: column; gap: 8px; min-height: 128px; }
.wl-msg { max-width: 88%; font-size: 13px; line-height: 1.45; padding: 9px 12px; border-radius: 14px; }
.wl-me { align-self: flex-end; background: var(--accent); color: var(--on-accent); border-bottom-right-radius: 4px; }
.wl-sage { align-self: flex-start; background: var(--raised-bg); border: 1px solid var(--line); border-bottom-left-radius: 4px; position: relative; }
.wl-sage::before { content: "✦ Sage"; display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--accent-2); margin-bottom: 2px; }
.wl-typing { display: inline-flex; gap: 3px; padding: 4px 0; }
.wl-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-soft); animation: wlFlow 1s infinite; }
.wl-typing i:nth-child(2) { animation-delay: 0.15s; }
.wl-typing i:nth-child(3) { animation-delay: 0.3s; }
.wl-answer { display: none; }
.wl-chat .wl-me, .wl-chat .wl-sage { opacity: 0; }
.in .wl-chat .wl-me { animation: fadeInUp 0.4s 0.15s both; }
.in .wl-chat .wl-sage { animation: fadeInUp 0.4s 0.7s both; }
.wl-chat.answered .wl-typing { display: none; }
.wl-chat.answered .wl-answer { display: inline; animation: fadeIn 0.4s both; }

/* Budget bars */
.wl-bars { display: flex; flex-direction: column; gap: 12px; }
.wl-bar-top { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; font-weight: 600; margin-bottom: 5px; }
.wl-bar-top .num { font-size: 11.5px; color: var(--ink-soft); font-weight: 500; }
.wl-track { height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 9%, transparent); overflow: hidden; }
.wl-fill { height: 100%; width: 0; border-radius: inherit; background: var(--good); transition: width 1.1s cubic-bezier(.2,.8,.3,1) 0.3s; }
.wl-bar.warn .wl-fill { background: var(--bad); }
.wl-bar.warn .wl-bar-top .num { color: var(--bad); }
.in .wl-fill { width: var(--p); }

/* Split */
.wl-split { display: flex; flex-direction: column; gap: 6px; }
.wl-branch { height: 10px; margin-left: 26px; border-left: 2px dashed var(--line-strong); }
.wl-split .wl-sub { margin-left: 26px; opacity: 0; }
.in .wl-split .wl-sub { animation: fadeInUp 0.4s 0.5s both; }
.in .wl-split .wl-sub + .wl-sub { animation-delay: 0.75s; }

/* Bank + paired charge */
.wl-bank { display: flex; flex-direction: column; gap: 10px; }
.wl-bank-head { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 13.5px; }
.wl-bank-head small { display: flex; align-items: center; gap: 6px; font-weight: 500; font-size: 11.5px; color: var(--good); }
.wl-bank-ico { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--raised-bg); border: 1px solid var(--line); font-size: 17px; }
.wl-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 0 var(--good); animation: wlPing 2s infinite; }
.wl-pair { position: relative; display: flex; flex-direction: column; gap: 5px; padding: 8px; padding-bottom: 20px; border-radius: 13px; border: 1.5px solid var(--accent); }
.wl-pair-tag {
  position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); white-space: nowrap;
  font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 99px; background: var(--accent); color: var(--on-accent);
}

/* Themes + privacy */
.wl-themes { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; padding: 16px; }
.wl-themes i {
  width: 30px; height: 30px; border-radius: 50%; background: var(--c);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.35), 0 2px 6px rgba(0,0,0,0.12); transform: scale(0);
}
.in .wl-themes i { animation: popIn 0.35s var(--d) both; transform: none; }
.wl-lock { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: var(--raised-bg); border: 1px solid var(--line); font-size: 18px; margin-right: 6px; }

@keyframes wlFlow { 0%, 100% { opacity: 0.25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
@keyframes wlSwipe { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes wlPing { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 60%, transparent); } 80%, 100% { box-shadow: 0 0 0 7px transparent; } }

@media (max-width: 980px) {
  .welcome-page { grid-template-columns: minmax(0, 1fr); grid-template-areas: "hero" "card" "feats"; padding: 28px 16px 48px; max-width: 560px; gap: 22px; }
  .welcome-page > .auth-card { position: static; }
  .wl-brand { margin-bottom: 20px; font-size: 26px; }
  .wl-lede { font-size: 15.5px; margin-bottom: 16px; }
  .wl-feats { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .wl-feats::before {
    content: "What you can do here"; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--ink-soft); margin: 8px 2px -2px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wl-card { opacity: 1; transform: none; }
  .wl-typing { display: none; }
  .wl-answer { display: inline; }
  .wl-sms .wl-row, .wl-chat .wl-me, .wl-chat .wl-sage, .wl-split .wl-sub { opacity: 1; }
  .wl-themes i { transform: none; }
  .wl-fill { width: var(--p); }
}

.admin-wrap { max-width: 860px; margin: 0 auto; padding: 28px 16px 60px; }
.admin-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 3px double var(--line-strong); margin-bottom: 22px; }
.admin-head .brand { font-size: 26px; }
.admin-head .brand em { font-style: normal; font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-left: 10px; padding: 2px 7px; border: 1px solid var(--line-strong); border-radius: 5px; vertical-align: 5px; }
.admin-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 22px; }
.admin-stats div { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 12px; color: var(--ink-soft); }
.admin-stats b { display: block; font-family: var(--font-display); font-weight: 500; font-size: 28px; color: var(--ink); line-height: 1.1; }
.admin-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px; margin-bottom: 18px; }
.admin-panel h2 { font-family: var(--font-display); font-weight: 600; font-size: 20px; margin: 0 0 4px; }
.admin-panel .sub { color: var(--ink-soft); font-size: 13px; margin: 0 0 14px; }
.admin-row-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.admin-row-form .auth-field { flex: 1 1 220px; margin: 0; }
.admin-row-form .btn { height: 42px; }
.acct-list { display: flex; flex-direction: column; }
.acct-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 2px; border-bottom: 1px solid var(--line); }
.acct-row:last-child { border-bottom: none; }
.acct-row .who { font-weight: 600; font-size: 14.5px; overflow-wrap: anywhere; }
.acct-row .who.unset { color: var(--ink-soft); font-weight: 500; font-style: italic; }
.acct-row .meta { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }
.acct-row .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.status-chip { display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0 5px; line-height: 16px; border-radius: 4px; margin-left: 6px; vertical-align: 2px; border: 1px solid var(--line-strong); color: var(--ink-soft); }
.status-chip.active { color: var(--good); border-color: color-mix(in srgb, var(--good) 50%, transparent); }
.status-chip.locked { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 50%, transparent); }
.status-chip.owner { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.link-box { flex-basis: 100%; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 10px; background: var(--hover-wash); font-size: 12.5px; }
.link-box .row { display: flex; gap: 8px; }
.link-box input { flex: 1; min-width: 0; height: 36px; font-family: var(--font-num); font-size: 12.5px; }
.choice-box { flex-basis: 100%; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--hover-wash); font-size: 13px; }
.choice-box span { flex-basis: 100%; }
.btn.danger-ghost { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
@media (max-width: 640px) {
  .admin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acct-row .acts { width: 100%; }
  .acct-row .acts .btn { flex: 1; }
}

/* ============================================
   GUIDED TOUR (assets/tour.js)
   ============================================ */
.tour-layer { position: fixed; inset: 0; z-index: 600; opacity: 0; transition: opacity 0.18s ease; }
.tour-layer.shown { opacity: 1; }
.tour-layer.leaving { opacity: 0; }
.tour-layer.no-target { background: rgba(12, 18, 30, 0.55); }
/* The highlight: a clear window with everything around it dimmed. */
.tour-spot {
  position: fixed; border-radius: 14px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(12, 18, 30, 0.55), 0 0 0 3px var(--accent);
  transition: top 0.3s ease, left 0.3s ease, width 0.3s ease, height 0.3s ease, opacity 0.2s ease;
}
.tour-bubble {
  position: fixed; width: min(360px, calc(100vw - 32px)); padding: 18px 18px 14px;
  background: var(--panel); color: var(--ink); border: 1px solid var(--line);
  border-top: 3px solid var(--accent); border-radius: 14px; box-shadow: var(--shadow-float);
  transition: top 0.3s ease, left 0.3s ease;
}
.tour-bubble.centered { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.tour-count { font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; }
.tour-title { font-family: var(--font-display); font-weight: 600; font-size: 21px; line-height: 1.2; margin: 0 0 6px; }
.tour-text { font-size: 14px; line-height: 1.55; color: var(--ink); margin: 0 0 14px; }
.tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tour-nav { display: flex; gap: 8px; }
.tour-skip { background: none; border: none; padding: 6px 2px; font: inherit; font-size: 13px; color: var(--ink-soft); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.tour-skip:hover { color: var(--ink); }
@media (max-width: 640px) {
  /* Phones: the bubble is a sheet at the bottom; the highlight stays above it. */
  .tour-bubble, .tour-bubble.centered {
    top: auto; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); width: auto; transform: none;
  }
  .tour-bubble.at-top { top: calc(12px + env(safe-area-inset-top)); bottom: auto; }
  .tour-nav .btn { height: 42px; padding: 0 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .tour-spot, .tour-bubble, .tour-layer { transition: none; }
}

/* Show / hide password eye (addPasswordToggles in shared.js) */
.pw-wrap { position: relative; }
.pw-wrap input { width: 100%; padding-right: 44px !important; }
.pw-eye {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 34px; height: 34px; display: grid; place-items: center;
  border: none; background: none; border-radius: 8px; color: var(--ink-soft); cursor: pointer;
}
.pw-eye:hover { color: var(--ink); background: var(--hover-wash); }
.pw-eye:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ============================================
   LOADING LINE (top of the screen, shared.js)
   Always the current theme's accent color.
   ============================================ */
.loading-line {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1000;
  background: var(--accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 70%, transparent), 0 0 3px var(--accent);
  border-radius: 0 3px 3px 0;
  transform-origin: left center; transform: scaleX(0);
  opacity: 0; pointer-events: none;
  transition: transform 0.25s ease, opacity 0.3s ease;
}
.loading-line.active { opacity: 1; }
.loading-line.done { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .loading-line { transition: opacity 0.2s ease; }
}

/* "What was this for?" — review a split before saving (index.html) */
.agent-bubble.cq-review { max-width: 100%; width: 100%; padding: 12px 12px 10px; white-space: normal; }
.cq-review-title { font-weight: 600; margin-bottom: 10px; }
.cq-review-items { display: flex; flex-direction: column; gap: 8px; }
.cq-review-item { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr) 92px 30px; gap: 6px; align-items: center; }
.cq-review-name { font-size: 13px; overflow-wrap: anywhere; }
.cq-review-item .text-input { height: 34px; padding: 0 8px; font-size: 13px; min-width: 0; width: 100%; }
.cq-review-item .cq-rv-amt { font-family: var(--font-num); text-align: right; }
.cq-review-item .text-input.invalid { border-color: var(--bad); }
.cq-review-item .cq-rv-del { width: 30px; height: 30px; }
.cq-review-sum { font-size: 12.5px; color: var(--ink-soft); margin: 10px 0 8px; }
.cq-review-sum.bad { color: var(--bad); font-weight: 600; }
.cq-review-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .cq-review-item { grid-template-columns: minmax(0, 1fr) 84px 30px; }
  .cq-review-name { grid-column: 1 / -1; font-weight: 600; }
}

/* ============================================
   MFS — THE BUBBLY LAYER
   Rounder, softer, more "switchy" versions of everything above. Applies to
   every theme; colors still come from the theme palettes at the top.
   ============================================ */
:root, [data-theme] {
  --r-card: 24px;
  --r-pop: 20px;
  --press: 0 3px 0 color-mix(in srgb, var(--ink) 16%, transparent);
  --press-accent: 0 3px 0 var(--accent-2);
}
body {
  background: var(--bg-image), var(--bg);
  background-attachment: fixed, fixed;
  background-size: cover, cover;
  font-variant-numeric: tabular-nums;
  font-size: 14.5px;
}

/* ---- Brand: the switch logo + MFS ---- */
.brand {
  gap: 9px; font-family: var(--font-display); font-weight: 650; font-size: 26px; letter-spacing: 0.01em;
}
.brand-mark {
  position: relative; display: inline-block; flex-shrink: 0;
  width: 40px; height: 24px; border-radius: 999px;
  background: var(--accent);
  box-shadow: inset 0 -2px 0 color-mix(in srgb, #000 18%, transparent);
}
.brand-mark::after {
  content: ''; position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff 0 18%, var(--accent-light) 22%);
  transition: transform var(--t-pop);
}
a.brand:hover .brand-mark::after { transform: translateX(-16px); }
.auth-card .brand, .wl-brand { font-size: 28px; }
.brand em { font-style: normal; font-family: var(--font-ui); font-size: 13px; font-weight: 800; margin-left: 4px;
  padding: 3px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-2); letter-spacing: 0.02em; }

/* ---- Masthead: no ruled lines; page links are a pill switch ---- */
.topnav::after { display: none; }
.topnav { min-height: 76px; }
.navlinks { align-items: center; gap: 4px; padding: 5px; margin: auto 0; border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 6%, transparent); align-self: center; }
.navlinks a { padding: 9px 16px; border-radius: 999px; font-weight: 700;
  transition: color var(--t-fast), background var(--t-med), transform 0.12s ease; }
.navlinks a:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.navlinks a.active { background: var(--ink); color: var(--bg); box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--ink) 50%, transparent); }
.navlinks a.active .nav-ico { opacity: 1; }
.navlinks a.active::before, .navlinks a.active::after { display: none; }
.navlinks a:active { transform: scale(0.95); }
@media (max-width: 860px) {
  .navlinks a { padding: 9px 13px; }
  .topnav-left { padding: 10px 0 6px; }
}
@media (max-width: 640px) {
  .topnav { min-height: 60px; }
  .topnav-left { padding: 0; }
  .navlinks {
    padding: 8px max(10px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(10px, env(safe-area-inset-left));
    margin: 0; border-radius: 26px 26px 0 0; border-top: none; gap: 4px;
    background: var(--raised-bg);
    box-shadow: 0 -10px 30px -14px rgba(0, 0, 0, 0.35);
  }
  .navlinks a { padding: 4px 2px 6px; border-radius: 18px; font-weight: 700; }
  .navlinks a.active { background: transparent; color: var(--ink); box-shadow: none; }
  .navlinks a .nav-ico { padding: 4px 18px; border-radius: 999px; transition: background var(--t-med); }
  .navlinks a.active .nav-ico { background: var(--accent-soft); color: var(--accent-2); }
  .navlinks a:hover, .navlinks a:active { background: transparent; }
}
@media (max-height: 520px) and (min-width: 641px) {
  .navlinks a { padding: 7px 14px; }
}

/* ---- Headings ---- */
.page-title { font-weight: 600; letter-spacing: -0.01em; }
.page-title em { font-style: normal; color: var(--accent); font-weight: 600; }
.panel h2, .sheet-title, .modal h3, .agent-header h2 { font-weight: 600; letter-spacing: 0; }
.day-line .day-name { font-style: normal; font-family: var(--font-display); font-weight: 600; }
.day-line .leader { border-bottom-style: dashed; }

/* ---- Cards ---- */
.panel, .stat-row { border-radius: var(--r-card); }
.panel { padding: 24px 26px; }
.balance-bar { height: 12px; border-radius: 999px; }
.balance-bar span { border-radius: 999px; }
.dot { border-radius: 50%; }
.legend-row { border-radius: 12px; }
.table-scroll tbody td:first-child { box-shadow: none; }
tbody tr.row-selected td:first-child { box-shadow: inset 3px 0 0 var(--bad); }

/* ---- Buttons: chunky pills you can press ---- */
.btn {
  height: 38px; padding: 0 18px; border-radius: 999px; font-weight: 700; font-size: 13.5px;
  border: 1.5px solid var(--line-strong); box-shadow: var(--press);
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast), transform 0.1s ease, box-shadow 0.1s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 16%, transparent); }
.btn.primary { box-shadow: var(--press-accent); }
.btn.primary:active:not(:disabled) { box-shadow: 0 1px 0 var(--accent-2); }
.btn.primary:hover { background: color-mix(in srgb, var(--accent) 88%, #fff); border-color: color-mix(in srgb, var(--accent) 88%, #fff); }
.btn.danger { box-shadow: 0 3px 0 color-mix(in srgb, var(--bad) 70%, #000); }
.btn.ghost { box-shadow: none; }
.btn.ghost:hover { transform: none; }
.btn.small { height: 31px; padding: 0 13px; border-radius: 999px; font-size: 12.5px; }
.btn:disabled { box-shadow: none; transform: none; }
.btn .count { border-radius: 999px; }
.icon-btn { border-radius: 50%; }
.icon-btn:active { transform: scale(0.85); }

/* ---- Period switch & search ---- */
.filter-tabs { padding: 4px; border-radius: 999px; border: none; gap: 3px;
  background: color-mix(in srgb, var(--ink) 7%, transparent); }
.filter-tab { padding: 7px 15px; border-radius: 999px; font-weight: 700; transition: background var(--t-med), color var(--t-fast); }
.filter-tab.active { background: var(--ink); color: var(--bg); box-shadow: 0 3px 10px -3px color-mix(in srgb, var(--ink) 50%, transparent); }
.filter-tab.active::before { background: var(--accent-light); }
.custom-range { border-radius: var(--r-pop); }
.custom-range input[type="date"] { border-radius: 12px; }
.custom-range button { border-radius: 999px; }
.search-box { height: 40px; border-radius: 999px; border-width: 1.5px; }
.search-box .search-ico { padding-left: 15px; }

/* ---- Inputs and chips ---- */
.modal-field input, .modal-field select, .text-input, .manual-entry-row input,
.custom-select-btn { border-radius: 14px; border-width: 1.5px; }
.example-chip, .cq-option-btn, .src-chip, .split-chip { border-radius: 999px; }
.cq-option-btn { padding-left: 16px; padding-right: 16px; }
.tag { border-radius: 999px; padding: 3px 10px 3px 7px; }

/* ---- Menus, dialogs, toasts ---- */
.row-menu, .custom-select-list, .export-menu { border-radius: var(--r-pop); padding: 6px; }
.row-menu-item, .custom-select-item, .export-menu-item { border-radius: 12px; }
.modal { border-radius: 28px; padding: 28px 28px 24px; }
.modal::before { display: none; }
.modal-close { border-radius: 50%; }
.toast { border-radius: 18px; padding: 12px 18px; font-weight: 600; }

/* ---- Sage + floating helpers ---- */
.agent-bubble { border-radius: 20px; }
.fab, .fab-sage { border-radius: 50%; }
@media (max-width: 860px) { .fab { border-radius: 50%; } }
.fab .fab-label { border-radius: 999px; padding: 5px 11px; }

/* ---- Sign-in / invite ---- */
.auth-card { border-radius: 28px; border-top: 1px solid var(--line); box-shadow: var(--panel-shadow), 0 20px 50px -24px rgba(13,31,21,0.28); }
.auth-field label { text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 700; }
.auth-card .btn.primary.wide { height: 48px; font-size: 15px; }
.auth-readonly { border-radius: 14px; }
.agent-input-row input { border-radius: 999px; padding: 0 18px; border-width: 1.5px; }
.agent-send-btn { border-radius: 50%; }
.agent-chip { border-radius: 999px; }

/* ---- Admin → Dependencies ---- */
.admin-tabs { margin: 0 0 18px; }
.dep-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.dep-list { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.dep-card { border: 1.5px solid var(--line); border-radius: 20px; background: var(--panel); overflow: hidden; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.dep-card.open { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: 0 10px 28px -18px rgba(13,31,21,0.35); }
.dep-card.st-off, .dep-card.st-planned { background: color-mix(in srgb, var(--ink) 2.5%, var(--panel)); }
.dep-card.st-off .dep-head { opacity: 0.7; }
.dep-head { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 14px 16px; }
.dep-head:hover { background: var(--hover-wash); }
.dep-head:focus-visible { box-shadow: inset var(--focus-ring); }
.dep-ico { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; background: var(--accent-soft); }
.dep-title b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 16px; }
.dep-sub { display: block; font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dep-side { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 12.5px; }
.dep-cost { font-weight: 800; }
.dep-status { font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: 999px; background: var(--hover-wash); color: var(--ink-soft); }
.dep-status.active { background: var(--accent-soft); color: var(--accent-2); }
.dep-status.planned { background: color-mix(in srgb, #E0A927 22%, transparent); color: #8A6410; }
.dep-status.paused { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); }
.dep-renew { color: var(--ink-soft); font-size: 11.5px; font-weight: 700; }
.dep-renew.soon { color: #A9740E; }
.dep-renew.late { color: var(--bad); }
.dep-caret { color: var(--ink-soft); transition: transform var(--t-med); }
.dep-card.open .dep-caret { transform: rotate(180deg); }
.dep-body { padding: 4px 18px 16px 74px; display: grid; gap: 12px; animation: fadeInUp 0.2s ease both; }
.dep-field h4 { margin: 0 0 3px; font-size: 11.5px; font-weight: 800; color: var(--ink-soft); letter-spacing: 0.02em; }
.dep-field > div { font-size: 13.5px; line-height: 1.55; overflow-wrap: anywhere; }
.dep-field a { color: var(--accent-2); font-weight: 700; }
.dep-note { margin: 4px 0 0; color: var(--ink-soft); font-size: 12.5px; }
.dep-secrets { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.dep-secrets li { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border-radius: 999px; background: var(--hover-wash); font-size: 12px; }
.dep-secrets code { font-family: ui-monospace, 'Cascadia Mono', monospace; font-size: 11.5px; }
.dep-secrets span { padding: 1px 8px; border-radius: 999px; font-weight: 800; font-size: 11px; color: var(--ink-soft); }
.dep-secrets .ok { background: var(--accent-soft); color: var(--accent-2); }
.dep-secrets .bad { background: var(--danger-soft); color: var(--bad); }
.dep-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 12px; color: var(--ink-soft); }
.dep-edit { padding: 18px; margin-bottom: 10px; border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.dep-edit h3 { margin: 0 0 12px; font-family: var(--font-display); font-weight: 600; font-size: 18px; }
.dep-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.dep-grid .dep-wide { grid-column: 1 / -1; }
.dep-grid textarea.text-input { width: 100%; height: auto; min-height: 70px; padding: 10px 13px; resize: vertical; font: inherit; line-height: 1.45; }
.dep-grid select.text-input, .dep-grid input.text-input { width: 100%; height: 42px; padding: 0 13px; }
.dep-actions { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.dep-actions .spacer { flex: 1; }
@media (max-width: 640px) {
  .dep-head { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; padding: 12px; }
  .dep-side { grid-column: 2 / 4; grid-row: 2; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
  .dep-caret { grid-column: 3; grid-row: 1; }
  .dep-ico { width: 38px; height: 38px; font-size: 19px; }
  .dep-body { padding: 4px 14px 14px; }
  .dep-grid { grid-template-columns: minmax(0, 1fr); }
  .dep-top .btn { width: 100%; }
}

/* ---- Dashboard "Insights & tools" button and its panel ---- */
.toolbar { position: relative; }
.hub { position: static; }
.hub-btn .hub-caret { font-size: 11px; color: var(--ink-soft); transition: transform var(--t-med); }
.hub.open .hub-btn { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.hub.open .hub-btn .hub-caret { transform: rotate(180deg); color: inherit; }
.hub-btn.has-alert .hub-alert { background: var(--bad); color: #fff; }
.hub-panel {
  position: absolute; left: 0; top: calc(100% + 8px); z-index: 160;
  width: min(760px, 100%); padding: 16px; border-radius: 24px;
  background: var(--raised-bg); border: 1px solid var(--line); box-shadow: var(--shadow-float);
  animation: fadeInUp 0.18s ease both;
}
.hub-panel[hidden] { display: none; }
.hub-label { font-size: 12px; font-weight: 800; color: var(--ink-soft); margin: 2px 4px 8px; }
.hub-panel .glance-row { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 16px; }
.hub-panel .glance-card { border-radius: 18px; }
.hub-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hub-actions .btn { justify-content: flex-start; height: 44px; }
.hub-actions .btn .count { margin-left: auto; }
.hub-actions .btn[hidden] { display: none; }
@media (max-width: 640px) {
  .hub-panel { padding: 12px; border-radius: 22px; }
  .hub-panel .glance-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .hub-actions { grid-template-columns: minmax(0, 1fr); }
}