/* Shared theme tokens, full-pill navigation and bounded responsive layouts. */
html { scroll-padding-top: 20px; }
body { background: var(--bg); color: var(--ink); }
button, a, input, select { outline-color: var(--accent-mid); }
:where(button,a,input,select):focus-visible { outline: 2px solid var(--accent-mid); outline-offset: 3px; }
:where(main,.workspace,.panel,.panel-heading,.page-heading,.stats-grid,.stat,.header-left,.header-right) { min-width: 0; }
:where(.panel-heading,.page-heading,.balance-row,.stat-top) { flex-wrap: wrap; }
:where(.panel-heading h2,.page-heading p,.bookmark-item strong,.profile-summary small,.goal strong) { overflow-wrap: anywhere; }
:where(.form-stack input,.form-stack select) { min-width: 0; max-width: 100%; }
.panel-foot { flex-wrap: wrap; }
.table-scroll { max-width: 100%; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.table-scroll:focus-visible { outline-offset: 2px; }
#sidebar { background: var(--sidebar); min-height: 0; }
#sidebar .brand { flex-shrink: 0; }
#sidebar nav { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
#sidebar .sidebar-bottom { flex-shrink: 0; padding-top: 20px; }
#sidebar .nav-link, #sidebar .submenu button { border-radius: 9999px; }
#sidebar .nav-link { color: var(--muted); }
#sidebar .nav-link.active { background: var(--accent); color: var(--accent-text); font-weight: 600; }
#sidebar .nav-link:hover:not(.active), #sidebar .nav-link:focus-visible:not(.active), #sidebar .submenu button:hover:not(.selected) { background: var(--accent-soft); color: var(--ink); }
#sidebar .nav-link::after { display: none; }
#sidebar .submenu button { color: var(--muted); }
#sidebar .submenu button.selected { background: var(--accent); color: var(--accent-text); }
#sidebar .submenu button.selected::before { background: currentColor; }
#sidebar .submenu { border-color: var(--line); }
#sidebar .brand-symbol i { background: var(--ink); }
#sidebar .help-link { color: var(--muted); }
.nav-tooltip { position: fixed; z-index: 90; pointer-events: none; max-width: calc(100vw - 24px); padding: 6px 10px; border-radius: 7px; background: var(--ink); color: var(--surface); box-shadow: 0 4px 12px #0002; font-size: 10px; }
.nav-tooltip[hidden] { display: none; }
.lime, .pro-badge, .recent-panel .status.pending { background: var(--accent); color: var(--accent-text); }
#menu-toggle { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.sidebar-expanded #menu-toggle { background: var(--surface); border-color: var(--line); color: var(--ink); }
.profile:hover, .profile[aria-expanded=true], .icon-btn[aria-expanded=true] { outline-color: var(--accent-mid); }
.search, .select-wrap, .filter-button, .tabs, .tag { background: var(--soft); border-color: var(--line); color: var(--ink); }
.profile svg, .search, .search input::placeholder, .icon-btn, .popover-option svg { color: var(--muted); }
.search input { color: var(--ink); }
.filter-active { background: var(--accent-soft); color: var(--ink); }
.select-wrap select, .form-stack select { color: var(--ink); }
select option { background: var(--surface); color: var(--ink); }
.bookmark-item:hover, .popover-option:hover { background: var(--soft); }
.bookmark-item>svg { background: var(--soft); color: var(--muted); }
.bookmark-item small.danger, .recent-panel .expense.amount, .logout { color: var(--danger); }
.bookmark-item small.income, .income { color: var(--success); }
.top-popover { max-width: calc(100vw - 28px); }
.bookmark-item>span, .profile-summary>div { min-width: 0; }
.bookmark-item strong, .bookmark-item small { white-space: normal; overflow-wrap: anywhere; }
.popover-footer { flex-wrap: wrap; }
.logout:hover { background: color-mix(in srgb, var(--danger) 10%, var(--surface)); }
.stat-top>span:first-child, .stat-top>span:first-child svg { color: var(--ink); }
.stat-top>span:first-child::before { background: var(--accent-mid); }
.stat:first-child .stat-top>span:first-child::before, .stat:nth-child(3) .stat-top>span:first-child::before { background: var(--accent-deep); }
.stat p { color: var(--muted); }
.stat p:first-letter { color: var(--success); }
.stat:nth-child(2) p { color: var(--danger); }
.change { background: color-mix(in srgb, var(--success) 9%, var(--surface)); color: var(--success); }
.stat:nth-child(2) .change { background: color-mix(in srgb, var(--danger) 9%, var(--surface)); color: var(--danger); }
.legend span:first-child { color: var(--accent-mid); }
.legend span:last-child { color: var(--accent-deep); }
.text-link { color: var(--accent-deep); }
.expense-legend>div>span, .expense-legend>div:first-child>span { color: var(--ink); }
.expense-legend>div>span::first-letter { color: var(--accent-deep); }
.expense-legend>div:nth-child(2)>span::first-letter { color: var(--accent-mid); }
.expense-legend>div:nth-child(3)>span::first-letter { color: var(--accent-light); }
.goal>div>span { color: var(--accent-deep); }
.goal>small, .goal small span { color: var(--muted); }
.progress { background: var(--soft); }
.progress i { background: var(--accent); }
.saving-panel .progress { background: var(--soft); }
.saving-panel .progress i { background: linear-gradient(to right, var(--accent-deep) 0 65%, var(--accent-mid) 65%); }
.saving-panel .goal>div>span { color: var(--ink); }
.recent-panel td .tag, .status { background: var(--soft); color: var(--ink); }
.recent-panel .status { background: var(--accent-deep); color: var(--surface); }
.recent-panel .status.pending { background: var(--accent); color: var(--accent-text); }
.reference-chart svg>g { stroke: var(--line); }
.reference-chart .chart-labels, .chart-days, .chart-labels { color: var(--muted); }
.chart-days .current { color: var(--ink); }
.chart-tip { background: var(--surface); border-color: var(--line); }
.donut { background: conic-gradient(var(--accent) 0 49%,var(--accent-mid) 49% 79%,var(--soft) 79% 100%); }
.donut>div { border-color: var(--soft); }
.bars i { background: var(--accent); }
.bars i+i { background: var(--accent-deep); }
.welcome-banner, .budget-overview, .tip-banner { background: var(--accent-soft); color: var(--ink); border-color: var(--line); }
.budget-overview p:last-child, .budget-overview small, .mini-label, .welcome-banner p { color: var(--muted); }
.tip-banner>svg, .tip-banner a, .security-note, .insight>span, .pro-icon { color: var(--accent-deep); }
.tip-banner a { white-space: normal; }
.insight>span { background: var(--accent-soft); }
.insight p, .security-note p, .detail-row>span { color: var(--muted); }
.bank-card { background: radial-gradient(ellipse at 90% 120%,color-mix(in srgb,var(--accent) 32%,#1b3024) 0,transparent 65%),#1b3024; }
.light-card { background: radial-gradient(ellipse at 90% 120%,var(--accent-soft) 0,transparent 65%),var(--soft); color: var(--ink); }
.merchant, .merchant.income { background: var(--soft); color: var(--accent-deep); }
.pro-card { background: #1b3b2a; }
.pro-card .pro-icon { color: var(--accent); background: #2e5038; }
.pro-card .btn { color: var(--accent-text); }
.dark .recent-panel .status { background: var(--accent-deep); color: #173527; }
.dark .recent-panel .status.pending { background: var(--accent); color: var(--accent-text); }
.dark .change { background: color-mix(in srgb,var(--success) 12%,var(--surface)); color: var(--success); }
.dark .stat:nth-child(2) .change { background: color-mix(in srgb,var(--danger) 12%,var(--surface)); color: var(--danger); }
.dark .expense-legend>div>span { color: var(--ink); }
.dark .nav-link:hover { background: var(--accent-soft); }
.dark .tip-banner { background: var(--accent-soft); }
footer strong, .footer-status { color: var(--muted); }

/* Floating customization panel, with native dialog focus trapping. */
.appearance-toggle { position: fixed; right: max(22px,env(safe-area-inset-right)); bottom: max(22px,env(safe-area-inset-bottom)); z-index: 55; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--accent-text); border: 4px solid var(--surface); box-shadow: 0 5px 20px #17352726; transition: transform .18s; }
.appearance-toggle svg { width: 20px; height: 20px; }
.appearance-toggle:hover { transform: rotate(20deg); }
.appearance-panel { position: fixed; inset: auto 22px 80px auto; margin: 0; width: 354px; max-width: calc(100vw - 28px); max-height: calc(100dvh - 100px); padding: 0; border-radius: 22px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 20px 80px #102a2330; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.appearance-panel::backdrop { background: #13291d35; backdrop-filter: none; }
.appearance-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 24px 24px 20px; border-bottom: 1px solid var(--line); }
.appearance-heading .eyebrow { margin-bottom: 7px; font-size: 8px; }
.appearance-heading h2 { font-size: 23px; letter-spacing: -.7px; margin: 0; }
.appearance-heading p:last-child { font-size: 11px; color: var(--muted); margin-top: 7px; }
.appearance-close { flex-shrink: 0; width: 29px; height: 29px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; font-size: 21px; color: var(--muted); line-height: 1; }
.appearance-content { padding: 22px 24px 6px; }
.appearance-content fieldset { border: 0; margin: 0 0 26px; padding: 0; min-width: 0; }
.appearance-content legend { font-size: 11px; font-weight: 600; margin-bottom: 12px; }
.appearance-hint { font-size: 10px; color: var(--muted); line-height: 1.7; margin: -4px 0 13px; }
.appearance-modes { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.appearance-modes button { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 10px; border: 1px solid var(--line); border-radius: 9px; padding: 11px 5px; color: var(--muted); min-width: 0; }
.appearance-modes svg { width: 15px; height: 15px; }
.appearance-modes button[aria-pressed=true] { color: var(--ink); background: var(--accent-soft); border-color: var(--accent-mid); }
.accent-swatches { display: flex; flex-wrap: wrap; gap: 11px; padding: 3px; }
.accent-swatch { display: grid; place-items: center; width: 33px; height: 33px; border-radius: 50%; border: 1px solid transparent; padding: 4px; flex-shrink: 0; }
.accent-swatch span { background: var(--swatch); border-radius: 50%; height: 100%; width: 100%; }
.accent-swatch[aria-pressed=true] { border-color: var(--ink); }
.custom-color { display: flex; align-items: center; gap: 8px; font-size: 10px; color: var(--muted); border: 1px solid var(--line); border-radius: 9px; padding: 10px 11px; margin-top: 15px; }
.custom-color .color-value { margin-left: auto; font-size: 9px; font-variant-numeric: tabular-nums; }
.custom-color input { width: 23px; height: 23px; padding: 0; background: none; border: 0; cursor: pointer; border-radius: 5px; flex-shrink: 0; }
.custom-color input::-webkit-color-swatch-wrapper { padding: 0; }
.custom-color input::-webkit-color-swatch { border: 1px solid var(--line); border-radius: 5px; }
.background-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; }
.background-options button { font-size: 10px; display: grid; gap: 8px; padding: 0; color: var(--muted); min-width: 0; }
.background-preview { position: relative; display: block; width: 100%; height: 57px; border-radius: 9px; border: 1px solid var(--line); padding: 10px; overflow: hidden; }
.background-tinted { background: color-mix(in srgb,var(--accent) 12%,var(--surface)); }
.background-neutral { background: #eff1f3; }
.background-warm { background: #f4f0e9; }
.dark .background-neutral { background: #141719; }
.dark .background-warm { background: #1c1915; }
.background-preview i { position: absolute; top: 10px; bottom: 10px; left: 10px; width: 11px; border-radius: 3px; background: var(--accent); }
.background-preview b { position: absolute; top: 10px; bottom: 10px; left: 26px; right: 10px; background: var(--surface); border-radius: 3px; border: 1px solid var(--line); }
.background-options button[aria-pressed=true] { color: var(--ink); }
.background-options button[aria-pressed=true] .background-preview { border-color: var(--accent-mid); outline: 1px solid var(--accent-mid); outline-offset: 2px; }
.appearance-saved { display: flex; gap: 7px; align-items: flex-start; color: var(--muted); font-size: 9px; line-height: 1.7; margin-bottom: 17px; }
.appearance-saved svg { width: 13px; height: 13px; color: var(--success); flex-shrink: 0; }
.appearance-footer { position: sticky; bottom: 0; display: flex; gap: 12px; padding: 17px 24px; border-top: 1px solid var(--line); background: var(--surface); }
.appearance-footer .btn { flex: 1; font-size: 10px; }
.appearance-footer svg { width: 13px; height: 13px; }
@media(max-height:820px) and (min-width:901px) { #sidebar .pro-card { display: none; } }
@media(max-width:1150px) and (min-width:641px) { .header-right .profile-name { display: none!important; } }
@media(max-width:900px) { #sidebar nav { flex: none; overflow: visible; } #sidebar .sidebar-bottom { margin-top: auto; } }
@media(max-width:640px) {
  .header-right { margin-left: auto; flex-shrink: 0; }
  .header-left { flex: 1; }
  .header-title { overflow-wrap: anywhere; }
  .cash-controls { position: static; margin-left: auto; flex-wrap: wrap; }
  .cash-panel .panel-heading { align-items: flex-start; gap: 8px; }
  .cash-panel .panel-heading h2 { flex-shrink: 0; }
  .cash-controls .legend { font-size: 8px; }
  .page-heading { align-items: flex-start; }
  .page-heading>div { min-width: 0; }
  .stat .change { margin-left: auto; }
  .stat h2 { font-size: clamp(20px,6.1vw,25px); overflow-wrap: anywhere; }
  .stat p { line-height: 1.6; }
  .cards-layout, .budget-grid, .reports-grid { grid-template-columns: minmax(0,1fr); }
  .bank-card { min-width: 0; }
  .bank-card p { font-size: clamp(15px,4.9vw,21px); letter-spacing: 1px; }
  .card-controls .btn { flex: 1; }
  .table-search { min-width: 0; }
  .tip-banner a { margin-left: 0; }
  .goal>div:first-child { gap: 12px; }
  .goal>div:first-child>span { flex-shrink: 0; }
  .appearance-toggle { right: max(16px,env(safe-area-inset-right)); bottom: max(16px,env(safe-area-inset-bottom)); width: 44px; height: 44px; }
  .appearance-panel { right: 14px; bottom: 72px; max-height: calc(100dvh - 88px); }
  .appearance-content { padding: 20px 21px 6px; }
  .appearance-heading { padding: 21px; }
  .appearance-footer { padding: 15px 21px; }
  .accent-swatches { gap: 9px; }
  footer { padding-bottom: 70px; }
}
@media(max-width:360px) {
  .header-title { font-size: 16px; }
  .header-right { gap: 4px; }
  .header-right .icon-btn { width: 27px; height: 27px; }
  header { padding-left: 12px; padding-right: 12px; }
  .cash-controls .legend { display: none; }
  .appearance-modes button { flex-direction: column; gap: 6px; }
  .accent-swatches { gap: 5px; }
  .accent-swatch { width: 31px; height: 31px; }
}
@media(prefers-reduced-motion:reduce) { .appearance-toggle { transition: none; } }
/* On phones each transaction becomes a complete card: no hidden columns. */
@media(max-width:640px) {
  .table-scroll { overflow: visible; margin-right: 0; }
  table, tbody { display: block; width: 100%; white-space: normal; }
  thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  tbody { display: grid; gap: 12px; }
  tbody tr { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px; border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
  tbody td, .recent-panel tbody td, td:first-child { border: 0; padding: 0; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
  tbody td:first-child { grid-column: 1/-1; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
  tbody td::before { content: attr(data-label); display: block; color: var(--muted); font-size: 9px; font-weight: 400; margin-bottom: 7px; }
  tbody td:first-child::before { display: none; }
  td .tag, .recent-panel td .tag { white-space: normal; min-width: 0; max-width: 100%; font-size: 9px; display: inline-block; line-height: 1.6; }
  .recent-panel td>strong, .transaction strong { font-size: 11px; }
  .recent-panel td, td { font-size: 10px; }
  .transaction { min-width: 0; }
  .transaction>div { min-width: 0; }
  .status, .recent-panel .status { display: inline-block; font-size: 9px; }
}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline-color: var(--accent-mid); }
.dark #sidebar { background: var(--sidebar); }
.dark .light-card { color: var(--ink); }
.dark .merchant { background: var(--soft); color: var(--accent-deep); }
.dark .budget-overview, .dark .welcome-banner { background: var(--accent-soft); }
.dark .reference-chart svg>g { stroke: var(--line); }
.dark .recent-panel td .tag { background: var(--soft); color: var(--ink); }
.appearance-panel .btn { transition: transform .15s; }
/* Foregrounds follow their own backgrounds, not just the page's dark-mode flag. */
#sidebar .nav-link { color: var(--nav-text); }
#sidebar .nav-link.active, #sidebar .submenu button.selected { color: var(--accent-text); }
#sidebar .nav-link.active svg, #sidebar .submenu button.selected::before { color: inherit; }
#sidebar .nav-link:hover:not(.active), #sidebar .nav-link:focus-visible:not(.active), #sidebar .submenu button:hover:not(.selected) { color: var(--accent-soft-text); }
#sidebar .submenu button { color: var(--nav-text); }
.dark #sidebar .nav-link.active { background: var(--accent); color: var(--accent-text); }
.dark #sidebar .nav-link.active:hover { background: var(--accent); color: var(--accent-text); }
.lime, .pro-card .btn.lime, .pro-badge, #menu-toggle, .appearance-toggle, .recent-panel .status.pending, .dark .recent-panel .status.pending { color: var(--accent-text); }
.sidebar-expanded #menu-toggle { color: var(--ink); }
.recent-panel .status, .dark .recent-panel .status { color: var(--status-text); }
.tag, .tabs .selected, .recent-panel td .tag, .dark .recent-panel td .tag { color: var(--soft-text); }
.appearance-modes button[aria-pressed=true], .insight>span { color: var(--accent-soft-text); }
.nav-tooltip { background: var(--ink); color: var(--surface); white-space: nowrap; border: 1px solid var(--line); }
/* Each sidebar destination has its own HTML; the chevron only expands the group. */
.payments-row { position: relative; }
.payments-row>.nav-link { padding-right: 32px; }
#payments-toggle { display: none; position: absolute; right: 8px; top: 9px; width: 27px; height: 27px; border-radius: 50%; color: var(--nav-text); }
#payments-toggle svg { width: 12px; height: 12px; }
#payments-toggle:hover { background: var(--accent-soft); }
.sidebar-expanded #payments-toggle { display: grid; place-items: center; }
.payments-group .submenu { display: none; }
.sidebar-expanded .payments-group:has(#payments-toggle[aria-expanded=true]) .submenu { display: grid; gap: 3px; }
.submenu a { position: relative; display: block; padding: 7px 13px; border-radius: 9999px; font-size: 11px; color: var(--nav-text); }
.submenu a:hover { background: var(--accent-soft); color: var(--accent-soft-text); }
.submenu a.selected { background: var(--accent); color: var(--accent-text); font-weight: 600; }
.submenu a.selected::before { content: ''; position: absolute; width: 3px; height: 10px; left: 7px; top: 9px; border-radius: 4px; background: currentColor; }
.payments-group:has(.submenu .selected) .payments-row>.nav-link { background: var(--accent-soft); color: var(--accent-soft-text); }
body:not(.sidebar-expanded) .payments-row>.nav-link { padding-right: 12px; }
.empty-page { min-height: 360px; display: flex; align-items: center; justify-content: center; text-align: center; flex-direction: column; gap: 16px; padding: 40px 24px; }
.empty-page-icon { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 20px; background: var(--accent-soft); color: var(--accent-soft-text); }
.empty-page-icon svg { width: 25px; height: 25px; }
.empty-page h2 { font-size: 20px; }
.empty-page p { max-width: 330px; color: var(--muted); line-height: 1.8; font-size: 12px; }
.empty-page-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
@media(max-width:900px) { #sidebar #payments-toggle { display: grid; place-items: center; } #sidebar .payments-row>.nav-link { padding-right: 32px; } #sidebar .payments-group:has(#payments-toggle[aria-expanded=true]) .submenu { display: grid; gap: 3px; } }
#sidebar .help-link.active { background: var(--accent); color: var(--accent-text); border-radius: 9999px; padding: 10px 12px; margin-top: 10px; }
/* Filtering only changes visibility; the complete table remains in the HTML. */
[hidden] { display: none !important; }
/* Keep the custom outline button variant separate from Tailwind's outline utility. */
.btn.outline { outline: none; }
.btn.outline:focus-visible { outline: 2px solid var(--accent-mid); outline-offset: 3px; }
/* Dark surfaces stay charcoal; the chosen brand color remains an accent. */
.dark .pro-card { background: #252a33; color: var(--ink); }
.dark .pro-card p { color: var(--muted); }
.dark .pro-card::after { border-color: var(--line); }
.dark .pro-card .pro-icon { background: var(--soft); color: var(--accent); }
.dark .bank-card { background: #272c35; color: var(--ink); }
.dark .bank-card.light-card { background: var(--soft); color: var(--ink); }
.dark .bank-card::after { border-color: var(--line); box-shadow: 0 0 0 30px #ffffff04,0 0 0 60px #ffffff02; }
.dark .bank-card .chip { color: var(--muted); }
.dark .background-tinted { background: #111318; }
.dark .background-neutral { background: #101114; }
.dark .background-warm { background: #191817; }