/* =============================================================================
   Goal Finance — "signal console" design system
   -----------------------------------------------------------------------------
   The look shared with Audio & Tech, tuned for money: a navy base, a teal → sky →
   violet brand gradient with gold for goals, Audiowide for the mark, Saira Semi
   Expanded for headings, Figtree for text and JetBrains Mono for figures.

   Layout: a slim glass top bar (brand, pill tabs with pop-over menus, Ctrl K search,
   theme and account menus) over the existing pages; the old sidebar is now the
   phone menu. On the home page an animated finance line runs behind the hero.

   This file loads LAST and restyles what main.css / additional.css lay out — the
   markup, ids and classes the app's JavaScript uses are untouched. Where the older
   theme rules used !important, the rules here do too, and anything with an inline
   background (coloured buttons, the ledger's row colours, converted amount boxes)
   is left alone on purpose via :not([style*="background"]).

   Themes: the six themes in Settings map onto one token set below. Light, Cool Blue,
   Beach and Ultra Modern are light; Dark and Future are dark (Future adds glass
   panels over a drifting backdrop). The home banner stays navy in every theme —
   it is the brand surface.
   ============================================================================= */

/* ── Tokens ─────────────────────────────────────────────────── */
body {
    color-scheme: light;
    --font-mark: "Audiowide", "Saira Semi Expanded", "Segoe UI", system-ui, sans-serif;
    --font-head: "Saira Semi Expanded", "Segoe UI", system-ui, sans-serif;
    --font-body: "Figtree", "Segoe UI", system-ui, sans-serif;
    --font-code: "JetBrains Mono", ui-monospace, Consolas, monospace;
    --r: 16px; --r-sm: 10px; --topbar-h: 60px;
    --sidebar-width: 320px;

    --bg: #eef1f8; --bg-2: #e6eaf5; --surface: #ffffff; --surface-2: #f3f5fb;
    --text: #0c1431; --muted: #4f5979; --faint: #7a83a3;
    --line: rgba(12, 20, 49, .10); --line-2: rgba(12, 20, 49, .18);
    --accent: #0f9f98; --accent-ink: #0b7f79; --accent-2: #2563eb; --violet: #6d3ae0; --gold: #c98a12;
    --danger: #c81e1e; --ok: #0f8a55;
    --grad: linear-gradient(100deg, #14b8a6 0%, #3b82f6 52%, #7c3aed 100%);
    --btn-bg: #0b7f79; --btn-fg: #ffffff; --btn-hover: #0a6d68;
    --panel-bg: #ffffff; --panel-blur: none; --topbar-bg: rgba(255, 255, 255, .82); --pop-bg: #ffffff;
    --chip-bg: rgba(15, 159, 152, .10); --chip-fg: #0b6f6a;
    --shadow: 0 1px 2px rgba(12, 20, 49, .06), 0 16px 34px -24px rgba(12, 20, 49, .35);
    --band: #070c1f; --band-text: #eef1fb; --band-muted: #9aa4c4;
    --accent-rgb: 15, 159, 152;

    /* the tokens the app's JavaScript-rendered panels use in their inline styles */
    --gf-panel-bg: var(--panel-bg); --gf-panel-border: var(--line-2); --gf-heading: var(--text);
    --gf-text: var(--muted); --gf-text-strong: var(--text); --gf-muted: var(--faint);
    --gf-disabled: var(--line-2); --gf-track: var(--surface-2); --gf-inset-bg: var(--surface-2);
    --gf-input-bg: var(--surface); --gf-input-border: var(--line-2);
    --gf-text-backing: rgba(255, 255, 255, .82); --gf-text-backing-edge: rgba(12, 20, 49, .08);
    /* the timeline graph reads these from the body */
    --chart-line: #0f9f98; --chart-fill: rgba(15, 159, 152, .12);
}
body.theme-blue {
    --bg: #eaf1fb; --bg-2: #e0eaf8; --surface: #ffffff; --surface-2: #eef4fd;
    --text: #0b1a3a; --muted: #4b5b7e; --faint: #7a88aa;
    --accent: #2563eb; --accent-ink: #1d4ed8; --accent-2: #0ea5e9; --violet: #4f46e5; --gold: #d19a1e;
    --grad: linear-gradient(100deg, #0ea5e9 0%, #2563eb 52%, #4f46e5 100%);
    --btn-bg: #1d4ed8; --btn-hover: #1e40af; --chip-bg: rgba(37, 99, 235, .10); --chip-fg: #1d4ed8;
    --accent-rgb: 37, 99, 235; --chart-line: #2563eb; --chart-fill: rgba(37, 99, 235, .12);
}
body.theme-beach {
    --bg: #f8f3ea; --bg-2: #f1e9db; --surface: #fffdf8; --surface-2: #f6efe3;
    --text: #2b2419; --muted: #6b5f4e; --faint: #9a8c78;
    --line: rgba(80, 60, 30, .12); --line-2: rgba(80, 60, 30, .22);
    --accent: #e07a1f; --accent-ink: #b85f10; --accent-2: #0ea5a4; --violet: #c2410c; --gold: #c98a12;
    --grad: linear-gradient(100deg, #f59e0b 0%, #f97316 50%, #0ea5a4 100%);
    --btn-bg: #b85f10; --btn-hover: #9a4e0c; --chip-bg: rgba(224, 122, 31, .12); --chip-fg: #9a4e0c;
    --topbar-bg: rgba(255, 253, 248, .84); --pop-bg: #fffdf8; --panel-bg: #fffdf8;
    --band: #1c1612; --accent-rgb: 224, 122, 31; --chart-line: #e07a1f; --chart-fill: rgba(224, 122, 31, .12);
}
body.theme-ultramodern {
    --r: 12px; --r-sm: 8px;
    --bg: #f6f7fb; --bg-2: #eef0f6; --surface: #ffffff; --surface-2: #f3f4f9;
    --text: #111827; --muted: #4b5563; --faint: #6b7280;
    --line: rgba(17, 24, 39, .12); --line-2: rgba(17, 24, 39, .22);
    --accent: #0891b2; --accent-ink: #0e7490; --accent-2: #3b82f6; --violet: #6366f1; --gold: #d19a1e;
    --grad: linear-gradient(100deg, #06b6d4 0%, #3b82f6 52%, #6366f1 100%);
    --btn-bg: #0e7490; --btn-hover: #155e75; --chip-bg: rgba(8, 145, 178, .10); --chip-fg: #0e7490;
    --shadow: 0 1px 2px rgba(17, 24, 39, .05); --accent-rgb: 8, 145, 178; --chart-line: #0891b2; --chart-fill: rgba(8, 145, 178, .12);
}
body.theme-dark, body.theme-future {
    color-scheme: dark;
    --bg: #070c1f; --bg-2: #0a1230; --surface: #0f1838; --surface-2: #15204a;
    --text: #e9edf9; --muted: #9aa4c4; --faint: #6f79a0;
    --line: rgba(160, 175, 255, .13); --line-2: rgba(160, 175, 255, .24);
    --accent: #2dd4bf; --accent-ink: #5eead4; --accent-2: #38bdf8; --violet: #a78bfa; --gold: #f5c04a;
    --danger: #ff6b6b; --ok: #3ddc97;
    --grad: linear-gradient(100deg, #2dd4bf 0%, #38bdf8 50%, #8b5cf6 100%);
    --btn-bg: #2dd4bf; --btn-fg: #07122a; --btn-hover: #5eead4;
    --panel-bg: var(--surface); --topbar-bg: rgba(7, 12, 31, .78); --pop-bg: #111b40;
    --chip-bg: rgba(45, 212, 191, .14); --chip-fg: #99f6e4;
    --shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 18px 40px -28px rgba(0, 0, 0, .9);
    --gf-text-backing: rgba(7, 12, 31, .72); --gf-text-backing-edge: rgba(255, 255, 255, .08);
    --accent-rgb: 45, 212, 191; --chart-line: #2dd4bf; --chart-fill: rgba(45, 212, 191, .14);
}
body.theme-future {
    --bg: #050a1c;
    --accent: #a06bff; --accent-ink: #c4a4ff; --accent-2: #d65cff; --violet: #7c3aed; --gold: #ffb347;
    --grad: linear-gradient(100deg, #d65cff 0%, #a06bff 50%, #4cc3ff 100%);
    --btn-bg: #a06bff; --btn-fg: #0a0618; --btn-hover: #c4a4ff;
    --panel-bg: rgba(17, 27, 64, .55); --panel-blur: blur(18px) saturate(150%);
    --surface-2: rgba(255, 255, 255, .05); --topbar-bg: rgba(8, 14, 36, .42); --pop-bg: rgba(17, 27, 64, .92);
    --line: rgba(255, 255, 255, .11); --line-2: rgba(255, 255, 255, .2);
    --chip-bg: rgba(160, 107, 255, .16); --chip-fg: #d9c6ff;
    --accent-rgb: 160, 107, 255; --chart-line: #a06bff; --chart-fill: rgba(160, 107, 255, .14);
}

/* ── Base ───────────────────────────────────────────────────── */
body {
    background: var(--bg);
    color: var(--text);
    font: 400 15.5px/1.55 var(--font-body);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); color: var(--text); letter-spacing: -.005em; }
h2 { font-size: 24px; font-weight: 600; border-bottom: 1px solid var(--line); color: var(--text); }
h3 { font-size: 19px; font-weight: 600; color: var(--text); }
a { color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.gf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gf-ic { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: var(--faint); }
#my-list::-webkit-scrollbar-track { background: transparent; }
#my-list::-webkit-scrollbar-thumb { background: var(--line-2); }
#my-list::-webkit-scrollbar-thumb:hover { background: var(--faint); }

/* ── Top bar ─────────────────────────────────────────────────── */
.gf-topbar {
    position: sticky; top: 0; z-index: 100; flex-shrink: 0;
    background: var(--topbar-bg);
    backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-bottom: 1px solid var(--line);
}
.gf-topbar .gf-wrap {
    display: flex; align-items: center; gap: 12px; height: var(--topbar-h); width: 100%;
    padding: 0 max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px));
}
.gf-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); flex-shrink: 0; }
.gf-mark { width: 34px; height: 34px; display: block; border-radius: 9px; box-shadow: 0 6px 18px -8px rgba(56, 189, 248, .6); }
.gf-mark .mk-line { stroke-dasharray: 100; animation: gf-draw 1.4s .2s cubic-bezier(.4, .1, .2, 1) both, gf-pulse 3.4s 1.8s ease-in-out infinite; }
.gf-brand:hover .mk-line { animation: gf-draw .8s cubic-bezier(.4, .1, .2, 1) both; }
@keyframes gf-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes gf-pulse { 0%, 100% { filter: none; } 50% { filter: drop-shadow(0 0 3px #38bdf8); } }
.gf-wm { font-family: var(--font-mark); font-size: 17px; letter-spacing: .06em; line-height: 1; white-space: nowrap; }
.gf-wm em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

.gf-tabs { display: flex; gap: 2px; margin-left: 10px; min-width: 0; flex: 1 1 auto; overflow: hidden; }
.gf-tab {
    display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; margin: 0;
    padding: 8px 13px; border: 0; border-radius: 999px; background: none; color: var(--muted);
    font: 600 14px/1 var(--font-head); letter-spacing: .02em; white-space: nowrap; cursor: pointer;
    transition: background .2s, color .2s; box-shadow: none;
}
.gf-tab:hover, .gf-tab[aria-expanded="true"] { background: var(--surface-2); color: var(--text); }
.gf-tab[aria-current="page"] { color: var(--text); background: var(--surface-2); box-shadow: inset 0 -2px 0 var(--accent); }
.gf-tab-pro { color: var(--gold); }
.gf-chev { width: 7px; height: 7px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; opacity: .8; }
.gf-tab[aria-expanded="true"] .gf-chev { transform: translateY(2px) rotate(225deg); }

.gf-bar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.gf-search-btn {
    display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px; margin: 0;
    border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); color: var(--muted);
    font: 400 14px var(--font-body); min-width: 190px; box-shadow: none; cursor: pointer;
}
.gf-search-btn:hover { border-color: var(--line-2); color: var(--text); background: var(--surface-2); }
.gf-search-btn kbd { margin-left: auto; font: 500 11px/1 var(--font-code); border: 1px solid var(--line-2); border-radius: 6px; padding: 3px 6px; color: var(--faint); background: none; }
.gf-icon-btn {
    width: 38px; height: 38px; display: inline-grid; place-items: center; border-radius: 999px; padding: 0; margin: 0;
    border: 1px solid var(--line); background: var(--surface-2); color: var(--text); position: relative; box-shadow: none; cursor: pointer;
}
.gf-icon-btn:hover { border-color: var(--line-2); background: var(--surface-2); }
.gf-icon-btn[aria-expanded="true"] { border-color: var(--accent); }
.gf-dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--bg); }
.gf-burger { display: none; }
.gf-topbar .pane-selector-wrap { display: flex; align-items: center; }
.gf-topbar .pane-selector {
    height: 38px; padding: 0 30px 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text);
    font: 600 13px var(--font-head); cursor: pointer; appearance: none; -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 16px) 16px, calc(100% - 11px) 16px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.gf-topbar .pane-selector option { background: var(--pop-bg); color: var(--text); }

/* ── Pop-overs: tab menus, theme and account menus ──────────── */
.gf-pop {
    position: fixed; z-index: 1200; background: var(--pop-bg); color: var(--text);
    border: 1px solid var(--line-2); border-radius: var(--r);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .75);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.99);
    transition: opacity .18s, transform .18s, visibility 0s .18s;
    max-height: calc(100vh - var(--topbar-h) - 32px); overflow-y: auto;
}
.gf-pop.open { opacity: 1; visibility: visible; transform: none; transition: opacity .18s, transform .18s; }
.gf-mega { width: min(680px, calc(100vw - 24px)); padding: 16px; }
.gf-mega-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 2px 6px 12px; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.gf-mega-head strong { font: 700 17px var(--font-head); }
.gf-mega-head span { color: var(--muted); font-size: 13px; }
.gf-mega-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.gf-mega-topic { grid-column: 1 / -1; margin: 12px 6px 2px; padding-top: 10px; border-top: 1px solid var(--line); font: 700 15px/1.3 var(--font-head); color: var(--text); }
.gf-mega-grid > .gf-mega-topic:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.gf-item {
    display: block; text-align: left; padding: 10px 12px; margin: 0; border-radius: var(--r-sm); border: 1px solid transparent;
    background: none; color: var(--text); min-width: 0; width: 100%; box-shadow: none; cursor: pointer; font: inherit;
}
.gf-item:hover, .gf-item:focus-visible { background: var(--surface-2); border-color: var(--line); }
.gf-item[aria-current="page"] { border-color: var(--accent); }
.gf-item b { display: block; font: 500 14px/1.35 var(--font-body); color: var(--muted); transition: color .15s; }
.gf-item:hover b, .gf-item[aria-current="page"] b { color: var(--text); }
.gf-item small { display: block; color: var(--faint); font-size: 12.5px; line-height: 1.35; margin-top: 2px; }
.gf-menu { width: 280px; padding: 8px; }
.gf-menu h6 { margin: 10px 10px 6px; font: 600 11px var(--font-head); text-transform: uppercase; letter-spacing: .14em; color: var(--faint); }
.gf-menu-who { padding: 10px 10px 6px; line-height: 1.35; }
.gf-menu-who b { display: block; font: 600 15px var(--font-head); }
.gf-menu-who small { color: var(--muted); font-size: 13px; }
.gf-menu-item {
    width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; margin: 0; border: 0; border-radius: var(--r-sm);
    background: none; text-align: left; font: 400 14px var(--font-body); color: var(--text); text-decoration: none; box-shadow: none; cursor: pointer;
}
.gf-menu-item:hover, .gf-menu-item:focus-visible { background: var(--surface-2); color: var(--text); }
.gf-menu-item[aria-current="page"] { color: var(--accent-ink); }
.gf-menu-item .state { margin-left: auto; font: 500 11px var(--font-code); color: var(--accent-ink); }
.gf-menu-item.danger { color: var(--danger); }
.gf-menu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 4px; }
.gf-menu .note { padding: 4px 10px 8px; font-size: 12.5px; color: var(--faint); line-height: 1.45; margin: 0; }
.gf-swatch { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; border: 1px solid var(--line-2); background: linear-gradient(135deg, var(--sw) 50%, var(--sw2) 50%); }
.gf-menu .user-controls { display: block; }
#guest-controls { display: none; }
#user-controls.hidden + #guest-controls { display: block; }
.gf-pro-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--gold); color: #1a1200; font: 700 11px var(--font-head); letter-spacing: .04em; }

/* ── Search palette (Ctrl K) ────────────────────────────────── */
.gf-overlay { position: fixed; z-index: 1300; inset: 0; display: grid; place-items: start center; padding: 12vh 16px 16px; background: rgba(3, 6, 18, .6); opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; }
.gf-overlay.open { opacity: 1; visibility: visible; transition: opacity .2s; }
.gf-cmdk { width: min(620px, 100%); background: var(--pop-bg); border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.gf-cmdk-in { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--line); color: var(--muted); }
.gf-cmdk-in input, .gf-cmdk-in input[type="text"] { flex: 1; min-width: 0; height: 56px; margin: 0; padding: 0; border: 0 !important; background: none !important; outline: none; box-shadow: none !important; font: 400 17px var(--font-body); color: var(--text) !important; }
.gf-cmdk-in kbd { font: 500 11px var(--font-code); border: 1px solid var(--line-2); border-radius: 6px; padding: 3px 6px; color: var(--faint); background: none; }
.gf-cmdk ul { list-style: none; margin: 0; padding: 8px; max-height: 52vh; overflow-y: auto; }
.gf-cmdk li a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-sm); text-decoration: none; color: var(--text); }
.gf-cmdk li a[aria-selected="true"] { background: var(--surface-2); }
.gf-cmdk li b { font: 500 14.5px var(--font-body); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gf-cmdk li small { margin-left: auto; color: var(--faint); font: 500 12px var(--font-code); white-space: nowrap; }
.gf-cmdk .empty { padding: 22px; text-align: center; color: var(--muted); }

/* ── Ambient backdrop (Future theme) ────────────────────────── */
.gf-ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .6s; }
body.theme-future .gf-ambient { opacity: 1; }
.gf-ambient span { position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%; filter: blur(70px); opacity: .5; }
.gf-ambient span:nth-child(1) { background: #a06bff; left: -18vmax; top: 34vh; animation: gf-drift1 26s ease-in-out infinite alternate; opacity: .25; }
.gf-ambient span:nth-child(2) { background: #2a6dff; right: -14vmax; top: -10vh; animation: gf-drift2 30s ease-in-out infinite alternate; }
.gf-ambient span:nth-child(3) { background: #2dd4bf; left: 30vw; bottom: -24vmax; animation: gf-drift1 34s ease-in-out infinite alternate-reverse; opacity: .3; }
.gf-ambient::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.2px); background-size: 22px 22px; }
@keyframes gf-drift1 { to { transform: translate(14vw, -8vh) scale(1.15); } }
@keyframes gf-drift2 { to { transform: translate(-12vw, 12vh) scale(.9); } }

/* ── The sidebar is now the phone menu ──────────────────────── */
.sidebar {
    background: var(--pop-bg); color: var(--text); width: var(--sidebar-width); left: calc(var(--sidebar-width) * -1);
    border-right: 1px solid var(--line-2); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.sidebar.open { left: 0; }
.sidebar-overlay { background: rgba(3, 6, 18, .55); }
.sidebar-item { border-bottom: 1px solid var(--line); }
.sidebar-link { color: var(--text); font: 600 15px var(--font-head); padding: 14px 18px; }
.sidebar-link:hover, .sidebar-link.active { background: var(--surface-2); color: var(--text); }
.sidebar-item.expanded > .sidebar-link { background: var(--surface-2); color: var(--text); border-left: 3px solid var(--accent); }
.sidebar-submenu { background: transparent; }
.sidebar-submenu a { color: var(--muted); border-bottom: 1px solid var(--line); border-left: 3px solid transparent; }
.sidebar-submenu a:hover { color: var(--text); background: var(--surface-2); border-left-color: var(--accent); }
.active-nav-link { color: var(--accent-ink) !important; }
.floating-menu-container { display: none !important; }

/* ── Layout and surfaces ────────────────────────────────────── */
.main-content { padding: 18px 20px; }
.app-body-wrapper .section, .app-body-wrapper .landing-card, .app-body-wrapper .split-container, .app-body-wrapper .dashboard-card,
.app-body-wrapper .goal-card, .app-body-wrapper .stat-card, .app-body-wrapper .bank-list-item {
    background: var(--panel-bg); color: var(--text);
    border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow);
    backdrop-filter: var(--panel-blur); -webkit-backdrop-filter: var(--panel-blur);
}
.app-body-wrapper .dashboard-card { border-left: 3px solid var(--accent); border-radius: var(--r-sm); padding: 14px 18px; }
.app-body-wrapper .goal-card, .app-body-wrapper .stat-card { border-left-width: 3px; }
.app-body-wrapper .left-pane { background: var(--panel-bg); }
.app-body-wrapper .right-pane { background: var(--bg-2); border-left: 1px solid var(--line); }
.app-body-wrapper .options-pane { background: var(--panel-bg); border-right: 1px solid var(--line); }
.app-body-wrapper .resizer { background: var(--line); }
.app-body-wrapper .resizer:hover, .app-body-wrapper .resizer:active { background: var(--accent); }
.pane h2 { font-size: 20px; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.app-body-wrapper .ad-space { background: var(--surface-2); border: 1px dashed var(--line-2); color: var(--faint); border-radius: var(--r); box-shadow: none; }
.app-body-wrapper .control-panel-header h4, .app-body-wrapper .goal-title, .app-body-wrapper .actual-amount { color: var(--text); }
.app-body-wrapper .list-header, .app-body-wrapper .audit-grid-header { color: var(--faint) !important; border-bottom: 1px solid var(--line); font: 600 11px var(--font-head); letter-spacing: .12em; }
.app-body-wrapper .list-header span, .app-body-wrapper .audit-grid-header span { color: var(--faint) !important; }
.app-body-wrapper .progress-bar-container { background: var(--surface-2); }
.app-body-wrapper .status-pill { font-family: var(--font-head); border-radius: 999px; }
.app-body-wrapper .status-pill.on-track { background: rgba(15, 138, 85, .14); color: var(--ok) !important; }
.app-body-wrapper .status-pill.off-track { background: rgba(200, 30, 30, .12); color: var(--danger) !important; }
.app-footer { color: var(--faint); border-top: 1px solid var(--line); font-size: 12.5px; }
.app-footer a { color: var(--muted); font-weight: 600; }
.app-footer a:hover { color: var(--text); }

/* Setting cards (Ledger Options pane, Settings) — the old rules used an id and !important */
#options-modal .setting-card, #ledger-settings-grid .setting-card, .app-body-wrapper .setting-card {
    background: var(--surface-2) !important; color: var(--text); border: 1px solid var(--line) !important; border-left: 3px solid var(--accent) !important;
    border-radius: var(--r-sm) !important; box-shadow: none;
}
#options-modal .setting-card h4, #ledger-settings-grid .setting-card h4, .app-body-wrapper .setting-card h4 { color: var(--text); font-size: 14px; }
.app-body-wrapper .setting-card p { color: var(--faint); }
.options-pane .modal-header { background: var(--panel-bg); border-bottom-color: var(--line); }
.options-pane .modal-header h3 { font-size: 17px; }
.gf-info { color: var(--faint); }
.gf-info:hover, .gf-info:focus { color: var(--accent-ink); }

/* ── Buttons ─────────────────────────────────────────────────── */
/* Plain buttons become accent pills. Anything with an inline background keeps it
   (green Add, red Delete, the ledger's small controls), as do the classes below. */
body button:not([style*="background"]):not(.secondary-btn):not(.delete-btn):not(.chevron-btn):not(.tab-btn):not(.bank-tab):not(.add-bank-btn):not(.modal-close):not(.cp-menu-btn):not(.dropdown-btn):not(.filter-btn):not(.mobile-tab-btn):not(.lc-swatch):not(.l3d-btn-primary):not(.l3d-btn-ghost):not(.gf-tab):not(.gf-icon-btn):not(.gf-item):not(.gf-menu-item):not(.gf-search-btn):not(.pc-switch):not(.ql-picker-label):not(.ql-picker-item) {
    background: var(--btn-bg) !important; color: var(--btn-fg) !important; border: 0;
    border-radius: 999px; padding: 9px 16px; font: 600 14px var(--font-head); letter-spacing: .02em;
    box-shadow: 0 10px 24px -14px rgba(var(--accent-rgb), .8); transition: filter .2s, transform .1s, background .2s;
}
body button:hover:not([style*="background"]):not(.secondary-btn):not(.delete-btn):not(.chevron-btn):not(.tab-btn):not(.bank-tab):not(.add-bank-btn):not(.modal-close):not(.cp-menu-btn):not(.dropdown-btn):not(.filter-btn):not(.mobile-tab-btn):not(.lc-swatch):not(.l3d-btn-primary):not(.l3d-btn-ghost):not(.gf-tab):not(.gf-icon-btn):not(.gf-item):not(.gf-menu-item):not(.gf-search-btn):not(.pc-switch):not(.ql-picker-label):not(.ql-picker-item) {
    background: var(--btn-hover) !important; color: var(--btn-fg) !important;
}
body button:active:not(.gf-tab):not(.gf-item):not(.gf-menu-item) { transform: translateY(1px); }
body button.secondary-btn { background: var(--surface-2) !important; color: var(--text) !important; border: 1px solid var(--line-2) !important; border-radius: 999px; padding: 9px 16px; font: 600 14px var(--font-head); box-shadow: none; }
body button.secondary-btn:hover { border-color: var(--accent) !important; background: var(--surface-2) !important; }
button[style*="background"] { border-radius: 999px; font-family: var(--font-head); font-weight: 600; }
.app-body-wrapper .filter-btn { background: var(--btn-bg) !important; color: var(--btn-fg) !important; border-radius: 999px; }
.app-body-wrapper .delete-btn { border-radius: 999px; }
.app-body-wrapper .delete-btn:hover { background: rgba(200, 30, 30, .1) !important; }
.app-body-wrapper .cp-menu-btn { border: 1px solid var(--line-2) !important; color: var(--text) !important; border-radius: 999px; font-family: var(--font-head); }
.app-body-wrapper .cp-menu-btn:hover { background: var(--surface-2) !important; border-color: var(--accent) !important; }
.app-body-wrapper .chevron-btn { color: var(--muted) !important; border-radius: 999px; }
.app-body-wrapper .chevron-btn:hover { background: var(--surface-2) !important; color: var(--text) !important; }
.app-body-wrapper .dropdown-content, .app-body-wrapper .cp-dropdown-content { background: var(--pop-bg); border: 1px solid var(--line-2); border-radius: var(--r-sm); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .75); }
.app-body-wrapper .dropdown-content a, .app-body-wrapper .cp-dropdown-content a { color: var(--text); border-bottom-color: var(--line); }
.app-body-wrapper .dropdown-content a:hover, .app-body-wrapper .cp-dropdown-content a:hover { background: var(--surface-2); color: var(--accent-ink) !important; }

/* ── Inputs ──────────────────────────────────────────────────── */
body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([style*="background"]),
body select:not([style*="background"]), body textarea:not([style*="background"]) {
    background: var(--gf-input-bg) !important; color: var(--gf-text-strong) !important;
    border: 1px solid var(--gf-input-border) !important; border-radius: var(--r-sm); font-family: var(--font-body);
    transition: border-color .15s, box-shadow .15s;
}
body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):focus, body select:focus, body textarea:focus {
    outline: none; border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .22) !important;
}
body input::placeholder, body textarea::placeholder { color: var(--faint); }
body select option { background: var(--pop-bg); color: var(--text); }
body input[type="range"] { accent-color: var(--accent); }
body input[type="checkbox"], body input[type="radio"] { accent-color: var(--accent); }
.app-body-wrapper input[type="number"].item-amount { font-family: var(--font-code); border-radius: 8px; }
.app-body-wrapper input[type="number"].item-amount:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .22) !important; }
.app-body-wrapper .setting-group label { color: var(--faint); font-family: var(--font-head); }
.app-body-wrapper .toggle-slider { background-color: var(--line-2); }
.app-body-wrapper input:checked + .toggle-slider { background-color: var(--accent); }
.app-body-wrapper .toggle-slider:before { background-color: #fff; }

/* ── The ledger ──────────────────────────────────────────────── */
.app-body-wrapper .bank-tabs-container { border-bottom: 1px solid var(--line); gap: 8px; }
.app-body-wrapper .bank-tab { background: var(--surface-2) !important; color: var(--text) !important; border: 1px solid var(--line-2) !important; font: 600 13.5px var(--font-head); padding: 8px 14px; box-shadow: none; }
.app-body-wrapper .bank-tab span:not(.color-dot) { color: var(--text) !important; }
.app-body-wrapper .bank-tab:hover { background: var(--surface-2) !important; border-color: var(--accent) !important; color: var(--text) !important; }
.app-body-wrapper .bank-tab:hover span:not(.color-dot) { color: var(--text) !important; }
.app-body-wrapper .bank-tab.active { background: var(--text) !important; color: var(--bg) !important; border-color: var(--text) !important; box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .6); }
.app-body-wrapper .bank-tab.active span:not(.color-dot) { color: var(--bg) !important; }
.app-body-wrapper .bank-tab.options-pane-btn { border-style: dashed !important; }
.app-body-wrapper .add-bank-btn { background: transparent !important; color: var(--accent-ink) !important; border: 1px dashed var(--accent) !important; font: 600 13px var(--font-head); }
.app-body-wrapper .add-bank-btn:hover { background: rgba(var(--accent-rgb), .1) !important; }
.app-body-wrapper .color-dot, .app-body-wrapper .item-group-dot { border-color: rgba(255, 255, 255, .6); }
.app-body-wrapper .tabs { border-bottom: 1px solid var(--line); }
.app-body-wrapper .tab-btn { color: var(--muted) !important; font: 600 14px var(--font-head); border-radius: var(--r-sm) var(--r-sm) 0 0; }
.app-body-wrapper .tab-btn:hover { background: var(--surface-2) !important; color: var(--text) !important; }
.app-body-wrapper .tab-btn.active { color: var(--text) !important; border-bottom: 3px solid var(--accent) !important; background: transparent !important; }
.app-body-wrapper .list-item { background: var(--surface-2); border-radius: var(--r-sm); border-left-width: 4px; }
.app-body-wrapper .list-item-container.incomplete .list-item { background: rgba(200, 30, 30, .08); }
.app-body-wrapper .row-settings-grid { background: var(--surface-2); border-left-color: var(--accent); border-radius: 0 0 var(--r-sm) var(--r-sm); border: 1px solid var(--line); border-top: 0; }
.app-body-wrapper .list-total { color: var(--accent-ink) !important; font-family: var(--font-head); border-top: 1px dashed var(--line-2); }
.app-body-wrapper #list-total { font-family: var(--font-code); }
.app-body-wrapper .pot-completion-info { background: var(--chip-bg); color: var(--chip-fg); border-color: transparent; border-radius: 999px; font-family: var(--font-head); }
.app-body-wrapper .warning-text { color: var(--danger); }
.app-body-wrapper .gf-running-total { background: var(--chip-bg) !important; border-color: transparent !important; color: var(--chip-fg) !important; border-radius: 999px !important; }
.app-body-wrapper #new-row-form { background: var(--surface-2); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r-sm); }
.app-body-wrapper #whatif-banner { border-radius: var(--r-sm); }
.app-body-wrapper .mobile-tab-btn { border-radius: 999px; border-color: var(--line-2); background: var(--surface-2); color: var(--text); font-family: var(--font-head); }
.app-body-wrapper .mobile-tab-btn.active { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }

/* ── Modals ──────────────────────────────────────────────────── */
.modal-overlay { background: rgba(3, 6, 18, .62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
body .modal-content { background: var(--pop-bg); color: var(--text); border: 1px solid var(--line-2); border-radius: 20px; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .85); }
body .modal-header { border-bottom: 1px solid var(--line); padding-bottom: 12px; }
body .modal-header h3 { font-size: 18px; }
body .modal-close { color: var(--muted) !important; }
body .modal-close:hover { color: var(--text) !important; }

/* ── Home page: the banner stays navy in every theme ─────────── */
.landing3d {
    background: radial-gradient(60% 90% at 85% 40%, rgba(139, 92, 246, .22), transparent 70%),
                radial-gradient(50% 80% at 10% 100%, rgba(45, 212, 191, .14), transparent 70%),
                var(--band);
    color: var(--band-text); border-radius: var(--r);
}
.l3d-orb-a { background: radial-gradient(circle, #2dd4bf, transparent 70%); }
.l3d-orb-b { background: radial-gradient(circle, #38bdf8, transparent 70%); }
.l3d-orb-c { background: radial-gradient(circle, #8b5cf6, transparent 70%); }
.l3d-hero { position: relative; }
.l3d-hero > * { position: relative; z-index: 1; }
.l3d-hero > .gf-signal { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.l3d-hero-copy h1 { font-family: var(--font-head); font-weight: 600; letter-spacing: -.01em; }
.l3d-grad-text { background: linear-gradient(90deg, #5eead4, #38bdf8 50%, #c4a4ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.l3d-badge { color: #99f6e4; background: rgba(45, 212, 191, .12); border-color: rgba(45, 212, 191, .35); font-family: var(--font-head); }
.l3d-lead { color: var(--band-muted); }
.l3d-stats strong { font-family: var(--font-head); }
.l3d-btn-primary, .l3d-btn-ghost { border-radius: 999px; font-family: var(--font-head); font-weight: 600; letter-spacing: .02em; }
.l3d-btn-primary { background: linear-gradient(100deg, #2dd4bf 0%, #38bdf8 50%, #8b5cf6 100%); color: #fff; box-shadow: 0 10px 30px -12px rgba(56, 189, 248, .8); }
.l3d-btn-primary:hover { box-shadow: 0 16px 36px -10px rgba(139, 92, 246, .7), 0 5px 12px rgba(0, 0, 0, .35); }
.l3d-btn-ghost { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .18); color: var(--band-text); }
.l3d-section-title { font-family: var(--font-head); }
.l3d-card-icon { background: linear-gradient(135deg, rgba(45, 212, 191, .18), rgba(139, 92, 246, .18)); }
.l3d-card:hover { box-shadow: 0 28px 50px -18px rgba(0, 0, 0, .6), 0 0 0 1px rgba(56, 189, 248, .45); }
.l3d-faq-item[open] { box-shadow: 0 18px 36px -16px rgba(0, 0, 0, .6), 0 0 0 1px rgba(56, 189, 248, .4); }
.l3d-footer a { color: #99f6e4; }
/* The light cards on the banner keep light tokens whatever the theme */
.l3d-auth-card, .l3d-card, .l3d-flat-card, .l3d-faq-item {
    --gf-heading: #0c1431; --gf-text: #4f5979; --gf-text-strong: #0c1431; --gf-muted: #7a83a3;
    --gf-panel-border: rgba(12, 20, 49, .14); --gf-input-bg: #ffffff; --gf-input-border: rgba(12, 20, 49, .2);
    --gf-inset-bg: #f3f5fb; --accent-rgb: 15, 159, 152;
}
.l3d-auth-card .landing-card { border-radius: var(--r); }
.l3d-auth-card h3 { color: #0c1431; }
.l3d-auth-card button:not(.secondary-btn):not([style*="background"]) { background: linear-gradient(100deg, #14b8a6 0%, #3b82f6 52%, #7c3aed 100%) !important; color: #fff !important; }
.l3d-auth-card button.secondary-btn { background: #f3f5fb !important; color: #0c1431 !important; border-color: rgba(12, 20, 49, .18) !important; }
.l3d-auth-card .l3d-auth-card:hover { transform: none; }

/* ── Breakpoints ─────────────────────────────────────────────── */
@media (max-width: 1180px) {
    .gf-search-btn { min-width: 0; width: 38px; padding: 0; justify-content: center; }
    .gf-search-btn .lbl, .gf-search-btn kbd { display: none; }
}
@media (max-width: 991.98px) {
    .gf-tabs { display: none; }
    .gf-burger { display: inline-grid; }
    .gf-wm { font-size: 15px; }
}
@media (max-width: 900px) {
    body { --topbar-h: 56px; }
    .gf-topbar .pane-selector-wrap { display: none !important; }
    .app-body-wrapper .section, .app-body-wrapper .split-container { border-radius: 0; border-left: 0; border-right: 0; }
    .sidebar { z-index: 1001 !important; }
}
@media (max-width: 640px) {
    .gf-mega-grid { grid-template-columns: minmax(0, 1fr); }
    .gf-wm { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .gf-mark .mk-line, .gf-ambient span { animation: none !important; }
    .gf-pop, .gf-overlay { transition: none !important; }
}