/* =========================================================================
   LEDGER — Expense Tracker
   Design language: a modern take on a bound accounting ledger.
   Serif display numerals (Fraunces) + tabular mono figures (JetBrains Mono)
   + a quiet pine/brass palette instead of the usual cream/terracotta combo.
   ========================================================================= */

/* ---------- Design tokens ---------- */
:root {
  /* Palette — light (paper) */
  --paper: #F5F6F2;
  --paper-raised: #FFFFFF;
  --paper-sunken: #ECEEE8;
  --ink: #17241F;
  --ink-soft: #4B5A54;
  --ink-faint: #8B978F;
  --hairline: #DCDFD6;

  --pine: #14453C;
  --pine-strong: #0D332C;
  --pine-tint: #E4ECE8;
  --brass: #B8863E;
  --brass-tint: #F5EBD8;

  --income: #2F8F5B;
  --income-tint: #E4F3EA;
  --expense: #C24A3D;
  --expense-tint: #FBEAE7;
  --warn: #C97A1F;
  --warn-tint: #FCEEDA;

  --focus-ring: #14453C;

  /* Fixed brand color for mobile chrome (top bar) that should stay a deep
     green in both themes — var(--pine) intentionally flips to a light mint
     accent in dark mode, which works for text/icons but not as a full-bar
     background with white foreground content. */
  --bar-fixed: #14453C;

  /* Typography */
  --font-display: "Fraunces", "Iowan Old Style", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Radii / shadows / motion */
  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 20px;
  --shadow-card: 0 1px 2px rgba(20, 30, 25, 0.06), 0 6px 20px rgba(20, 30, 25, 0.05);
  --shadow-modal: 0 20px 60px rgba(10, 18, 15, 0.28);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --sidebar-w: 232px;
}

[data-theme="dark"] {
  --paper: #101613;
  --paper-raised: #17201C;
  --paper-sunken: #0C1210;
  --ink: #EDF1EE;
  --ink-soft: #AEBAB3;
  --ink-faint: #6C7A73;
  --hairline: #263029;

  --pine: #6FBFA6;
  --pine-strong: #8FD3BC;
  --pine-tint: #16261F;
  --brass: #D8AE68;
  --brass-tint: #2A2317;

  --income: #4FBE86;
  --income-tint: #16281F;
  --expense: #E17A6C;
  --expense-tint: #2C1917;
  --warn: #E3A24A;
  --warn-tint: #2E220F;

  --focus-ring: #8FD3BC;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-modal: 0 24px 70px rgba(0, 0, 0, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ---------- Reset ---------- */
* , *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  /* Prevent the browser from "helpfully" adjusting scroll position when
     content above the viewport resizes (e.g. Chart.js canvases settling
     into their final size) — that's what was pulling panels up behind
     the sticky mobile header after switching tabs. */
  overflow-anchor: none;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 600; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; }
input, select, textarea { font-family: inherit; }
a { color: inherit; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* The `hidden` attribute must always win over component classes that set
   their own `display` (e.g. .btn, .modal-overlay, .recovery-bar), otherwise
   the cascade lets those class rules override the browser's default
   `[hidden]{display:none}` UA style. */
[hidden] { display: none !important; }

/* Tabular figures everywhere numeric */
.stat-card__value, .tx-table td.num, .tx-card__amount, .pace-item__value,
.budget-status__row, #budgetUsedText, #budgetRemainingText, .rank-list__amount {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ---------- App shell ---------- */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

/* ---------- Spine (sidebar) nav ---------- */
.spine {
  background: var(--pine);
  color: #F2F5F1;
  display: flex;
  flex-direction: column;
  padding: 28px 18px;
  position: sticky;
  top: 0;
  height: 100vh;
}
.spine__brand { display: flex; align-items: center; gap: 10px; padding: 0 10px 28px; }
.spine__mark {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--brass);
  line-height: 1;
}
.spine__title { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: 0.02em; }
.spine__nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.spine__link {
  display: flex; align-items: center; gap: 12px;
  background: none; border: none; color: rgba(242,245,241,0.72);
  text-align: left; padding: 11px 12px; border-radius: var(--radius-s);
  font-size: 14.5px; font-weight: 500; cursor: pointer;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.spine__icon { font-size: 13px; width: 16px; text-align: center; opacity: 0.9; }
.spine__link:hover { background: rgba(255,255,255,0.08); color: #fff; }
.spine__link.is-active { background: rgba(255,255,255,0.14); color: #fff; box-shadow: inset 3px 0 0 var(--brass); }
.spine__foot { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.12); }

.theme-toggle {
  display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14); color: #fff; padding: 9px 12px;
  border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 500;
  transition: background 0.18s var(--ease);
}
.theme-toggle:hover { background: rgba(255,255,255,0.15); }
.theme-toggle__dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--brass);
  box-shadow: 0 0 0 3px rgba(184,134,62,0.25);
}

/* ---------- Main column ---------- */
.main { display: flex; flex-direction: column; min-width: 0; }
.topbar { display: none; }

.views { padding: 32px 40px 80px; max-width: 1180px; width: 100%; margin: 0 auto; }
.view { display: none; animation: fadeUp 0.35s var(--ease); }
.view.is-active { display: block; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.view__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; }
.eyebrow { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass); font-weight: 600; margin-bottom: 4px; }
.view__title { font-size: 30px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: var(--radius-s); border: 1px solid transparent;
  font-weight: 600; font-size: 14px; padding: 11px 18px; cursor: pointer;
  transition: transform 0.12s var(--ease), background 0.15s var(--ease), box-shadow 0.15s var(--ease), border-color 0.15s var(--ease);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--pine); color: #fff; }
.btn--primary:hover { background: var(--pine-strong); box-shadow: 0 4px 14px rgba(20,69,60,0.25); }
[data-theme="dark"] .btn--primary { color: #0C1210; }
[data-theme="dark"] .btn--primary:hover { background: var(--pine-strong); }
.btn--secondary { background: var(--paper-raised); color: var(--ink); border-color: var(--hairline); }
.btn--secondary:hover { border-color: var(--pine); color: var(--pine); }
.btn--ghost { background: transparent; color: var(--ink-soft); }
.btn--ghost:hover { background: var(--paper-sunken); color: var(--ink); }
.btn--danger { background: var(--expense); color: #fff; }
.btn--danger:hover { filter: brightness(0.92); }
.btn--small { padding: 8px 13px; font-size: 13px; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }
.link-btn { background: none; border: none; color: var(--pine); font-weight: 600; font-size: 13.5px; cursor: pointer; padding: 2px; }
[data-theme="dark"] .link-btn { color: var(--pine-strong); }
.link-btn:hover { text-decoration: underline; }

/* ---------- Stat cards ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
.stat-card {
  background: var(--paper-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
  padding: 18px 18px 16px;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(20,30,25,0.10); }
.stat-card::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
}
.stat-card--balance::before { background: var(--pine); }
.stat-card--income::before { background: var(--income); }
.stat-card--expense::before { background: var(--expense); }
.stat-card--month::before { background: var(--brass); }
.stat-card--count::before { background: var(--ink-faint); }
.stat-card--savings::before { background: var(--income); }
.stat-card__icon { font-size: 15px; color: var(--ink-faint); margin-bottom: 10px; }
.stat-card--balance .stat-card__icon { color: var(--pine); }
.stat-card--income .stat-card__icon { color: var(--income); }
.stat-card--expense .stat-card__icon { color: var(--expense); }
.stat-card--month .stat-card__icon { color: var(--brass); }
.stat-card__label { font-size: 12.5px; color: var(--ink-soft); font-weight: 500; margin-bottom: 6px; }
.stat-card__value { font-size: 25px; font-weight: 600; letter-spacing: -0.01em; overflow-wrap: break-word; }
.stat-card__sub { font-size: 12px; color: var(--ink-faint); margin-top: 4px; }
.stat-card.tx-flash { animation: flashCard 0.9s var(--ease); }
@keyframes flashCard { 0% { box-shadow: 0 0 0 3px var(--brass-tint), var(--shadow-card); } 100% { box-shadow: var(--shadow-card); } }

/* ---------- Panels ---------- */
.panel {
  background: var(--paper-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-m);
  padding: 22px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-card);
}
.panel--wide { grid-column: 1 / -1; }
.panel--danger { border-color: color-mix(in srgb, var(--expense) 40%, var(--hairline)); }
.panel__title { font-size: 16.5px; margin-bottom: 14px; }
.panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.panel__head .panel__title { margin-bottom: 0; }
.panel__count { font-size: 12.5px; color: var(--ink-faint); }
.panel__text { color: var(--ink-soft); font-size: 13.5px; margin-bottom: 14px; max-width: 60ch; }

/* Pace grid */
.pace-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pace-item { background: var(--paper-sunken); border-radius: var(--radius-s); padding: 14px 16px; }
.pace-item__label { font-size: 12px; color: var(--ink-soft); margin-bottom: 6px; }
.pace-item__value { font-size: 18px; font-weight: 600; }

/* Quick add chips */
.quick-add { display: flex; flex-wrap: wrap; gap: 10px; }
.quick-add__chip {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--hairline); background: var(--paper-sunken);
  border-radius: 999px; padding: 9px 15px; font-size: 13.5px; font-weight: 500;
  cursor: pointer; color: var(--ink); transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.quick-add__chip:hover { border-color: var(--pine); background: var(--pine-tint); }
.quick-add__chip--fav { border-color: var(--brass); }

/* Insights */
.insights { display: flex; flex-direction: column; gap: 10px; }
.insights li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 14px; color: var(--ink); padding: 3px 0;
}
.insights li::before { content: "—"; color: var(--brass); font-weight: 700; }
.insights .insights__empty { color: var(--ink-faint); }
.insights .insights__empty::before { content: ""; }

/* ---------- Transaction list (compact, on dashboard) ---------- */
.tx-list--compact { display: flex; flex-direction: column; gap: 2px; }
.tx-row {
  display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center;
  padding: 11px 6px; border-radius: var(--radius-s);
  transition: background 0.15s var(--ease);
}
.tx-row:hover { background: var(--paper-sunken); }
.tx-row__icon {
  width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  font-size: 15px; background: var(--pine-tint); color: var(--pine);
}
.tx-row--expense .tx-row__icon { background: var(--expense-tint); color: var(--expense); }
.tx-row--income .tx-row__icon { background: var(--income-tint); color: var(--income); }
.tx-row__main { min-width: 0; }
.tx-row__desc { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-row__meta { font-size: 12.5px; color: var(--ink-faint); }
.tx-row__amount { font-weight: 600; font-size: 14.5px; }
.tx-row--income .tx-row__amount { color: var(--income); }
.tx-row--expense .tx-row__amount { color: var(--expense); }
.tx-row.is-new { animation: highlightRow 1.8s var(--ease); }
@keyframes highlightRow { 0% { background: var(--brass-tint); } 100% { background: transparent; } }

/* ---------- Filter bar ---------- */
.filter-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius-s);
  padding: 10px 12px; font-size: 14px; color: var(--ink); min-width: 0;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--pine); box-shadow: 0 0 0 3px var(--pine-tint); outline: none;
}
.field--search { flex: 1 1 220px; }
.field--search input { width: 100%; }
.field-optional { font-weight: 400; color: var(--ink-faint); }
.field-error { font-size: 12px; color: var(--expense); min-height: 15px; }
.field-note { font-size: 12.5px; color: var(--ink-soft); margin-top: 8px; }

/* ---------- Transactions table (desktop) ---------- */
.table-wrap { overflow-x: auto; }
.tx-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tx-table th {
  text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-faint); font-weight: 600; padding: 0 10px 10px; border-bottom: 1px solid var(--hairline);
}
.tx-table td { padding: 13px 10px; border-bottom: 1px solid var(--hairline); vertical-align: middle; }
.tx-table tbody tr { transition: background 0.15s var(--ease); }
.tx-table tbody tr:hover { background: var(--paper-sunken); }
.tx-table tbody tr:last-child td { border-bottom: none; }
.ta-right { text-align: right; }
.tx-table th.ta-right { text-align: right; }
.tx-table td.num { text-align: right; font-weight: 600; }
.tx-table tr.tx-income td.num { color: var(--income); }
.tx-table tr.tx-expense td.num { color: var(--expense); }
.tx-table tr.is-new { animation: highlightRow 1.8s var(--ease); }

.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
}
.badge--income { background: var(--income-tint); color: var(--income); }
.badge--expense { background: var(--expense-tint); color: var(--expense); }
.badge--recurring { background: var(--brass-tint); color: var(--brass); margin-left: 6px; }

.row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.icon-btn {
  width: 30px; height: 30px; border-radius: var(--radius-s); border: 1px solid var(--hairline);
  background: var(--paper-raised); color: var(--ink-soft); cursor: pointer; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease), background 0.15s var(--ease);
}
.icon-btn:hover { border-color: var(--pine); color: var(--pine); }
.icon-btn--danger:hover { border-color: var(--expense); color: var(--expense); background: var(--expense-tint); }

/* ---------- Mobile transaction cards ---------- */
.tx-cards { display: none; flex-direction: column; gap: 10px; }
.tx-card {
  border: 1px solid var(--hairline); border-radius: var(--radius-m); padding: 14px;
  background: var(--paper-raised); position: relative; overflow: hidden;
}
.tx-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; }
.tx-card.tx-income::before { background: var(--income); }
.tx-card.tx-expense::before { background: var(--expense); }
.tx-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.tx-card__desc { font-weight: 600; font-size: 14.5px; }
.tx-card__amount { font-weight: 700; font-size: 16px; }
.tx-card.tx-income .tx-card__amount { color: var(--income); }
.tx-card.tx-expense .tx-card__amount { color: var(--expense); }
.tx-card__meta { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 12.5px; color: var(--ink-soft); margin-bottom: 10px; }
.tx-card__actions { display: flex; gap: 8px; }
.tx-card__actions .btn { flex: 1; }
.tx-card.is-new { animation: highlightRow 1.8s var(--ease); }

/* ---------- Empty states ---------- */
.empty-state { text-align: center; padding: 52px 20px; }
.empty-state__mark { font-size: 34px; color: var(--brass); margin-bottom: 12px; font-family: var(--font-display); }
.empty-state__title { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.empty-state__text { color: var(--ink-soft); font-size: 13.5px; max-width: 42ch; margin: 0 auto 18px; }

/* Recovery / undo bar */
.recovery-bar {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--paper); padding: 12px 18px; border-radius: 999px;
  display: flex; align-items: center; gap: 16px; font-size: 13.5px; box-shadow: var(--shadow-modal);
  z-index: 40; animation: fadeUp 0.25s var(--ease);
}
.recovery-bar .link-btn { color: var(--brass); }

/* ---------- Analytics ---------- */
.analytics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.chart-wrap { position: relative; width: 100%; }
.legend { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 14px; }
.legend__item { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-soft); }
.legend__swatch { width: 10px; height: 10px; border-radius: 3px; }
.rank-list { display: flex; flex-direction: column; gap: 10px; }
.rank-list__row { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 12px; }
.rank-list__pos { font-family: var(--font-display); color: var(--brass); font-weight: 600; }
.rank-list__bar-wrap { background: var(--paper-sunken); border-radius: 999px; height: 8px; overflow: hidden; }
.rank-list__bar { height: 100%; background: var(--pine); border-radius: 999px; transition: width 0.5s var(--ease); }
.rank-list__label-row { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 4px; }
.rank-list__amount { font-weight: 600; }

.history-panel__head { align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.history-panel__head .panel__text { margin-bottom: 0; }
.period-toggle { display: inline-flex; gap: 6px; background: var(--paper-sunken); padding: 4px; border-radius: 999px; flex-shrink: 0; }
.period-toggle__opt {
  border: none; background: none; padding: 8px 16px; border-radius: 999px; font-weight: 600; font-size: 13px;
  color: var(--ink-soft); cursor: pointer; transition: background 0.18s var(--ease), color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.period-toggle__opt.is-active { background: var(--paper-raised); color: var(--ink); box-shadow: var(--shadow-card); }
.history-table td.is-net-negative { color: var(--expense); }
.history-table td.is-net-positive { color: var(--income); }
.history-table-wrap { overflow-x: auto; }

/* ---------- Budget ---------- */
.budget-panel { max-width: 640px; }
.budget-form { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 24px; flex-wrap: wrap; }
.input-prefix { display: flex; align-items: center; border: 1px solid var(--hairline); border-radius: var(--radius-s); overflow: hidden; background: var(--paper); }
.input-prefix span { padding: 10px 6px 10px 12px; color: var(--ink-faint); font-weight: 600; }
.input-prefix input { border: none; background: transparent; padding: 10px 12px 10px 2px; }
.input-prefix:focus-within { border-color: var(--pine); box-shadow: 0 0 0 3px var(--pine-tint); }
.budget-bar { height: 14px; border-radius: 999px; background: var(--paper-sunken); overflow: hidden; margin-bottom: 10px; }
.budget-bar__fill { height: 100%; border-radius: 999px; background: var(--pine); transition: width 0.6s var(--ease), background 0.3s var(--ease); width: 0%; }
.budget-bar__fill.is-warn { background: var(--warn); }
.budget-bar__fill.is-over { background: var(--expense); }
.budget-status__row { display: flex; justify-content: space-between; font-size: 14px; font-weight: 600; }
.budget-warning {
  margin-top: 12px; padding: 10px 14px; border-radius: var(--radius-s);
  background: var(--warn-tint); color: var(--warn); font-size: 13.5px; font-weight: 600;
}
.budget-warning.is-over { background: var(--expense-tint); color: var(--expense); }

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(10, 16, 13, 0.45); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px;
  animation: overlayIn 0.2s var(--ease);
}
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: var(--paper-raised); border-radius: var(--radius-l); padding: 26px;
  width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto;
  box-shadow: var(--shadow-modal); animation: modalIn 0.25s var(--ease);
}
.modal--small { max-width: 400px; }
@keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.modal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.modal__close { background: none; border: none; font-size: 15px; color: var(--ink-soft); cursor: pointer; padding: 6px; border-radius: var(--radius-s); }
.modal__close:hover { background: var(--paper-sunken); color: var(--ink); }
.modal__body { color: var(--ink-soft); font-size: 14px; margin-bottom: 22px; }
.modal__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }

/* Type switch */
.type-switch { display: flex; gap: 8px; margin-bottom: 18px; background: var(--paper-sunken); padding: 5px; border-radius: 999px; }
.type-switch__opt {
  flex: 1; border: none; background: none; padding: 10px; border-radius: 999px; font-weight: 600; font-size: 13.5px;
  color: var(--ink-soft); cursor: pointer; transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.type-switch__opt.is-active { background: var(--paper-raised); box-shadow: var(--shadow-card); }
.type-switch__opt[data-type="expense"].is-active { color: var(--expense); }
.type-switch__opt[data-type="income"].is-active { color: var(--income); }

.tx-form { display: flex; flex-direction: column; gap: 14px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-row--checks { grid-template-columns: 1fr 1fr; }
.checkbox { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-soft); cursor: pointer; }
.checkbox input { width: 16px; height: 16px; accent-color: var(--pine); }

.shortcuts-list { display: flex; flex-direction: column; gap: 12px; }
.shortcuts-list li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-soft); }
kbd {
  background: var(--paper-sunken); border: 1px solid var(--hairline); border-bottom-width: 2px;
  border-radius: 6px; padding: 3px 8px; font-family: var(--font-mono); font-size: 12px; color: var(--ink);
}

/* ---------- Toasts ---------- */
.toast-stack {
  position: fixed; top: 20px; right: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 200;
  max-width: 340px;
}
.toast {
  background: var(--ink); color: var(--paper); padding: 13px 16px; border-radius: var(--radius-s);
  font-size: 13.5px; font-weight: 500; box-shadow: var(--shadow-modal); display: flex; align-items: center; gap: 10px;
  animation: toastIn 0.25s var(--ease);
}
.toast::before { content: "✓"; color: var(--pine-strong); font-weight: 700; }
.toast.toast--error::before { content: "!"; color: var(--expense); }
.toast.is-leaving { animation: toastOut 0.2s var(--ease) forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(20px); } }

/* ---------- Mobile bottom tab bar ---------- */
.tabbar { display: none; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1024px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .analytics-grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .spine { display: none; }
  .topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; background: var(--bar-fixed); color: #fff; position: sticky; top: 0; z-index: 30;
  }
  .topbar__brand { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 17px; font-weight: 600; }
  .topbar__brand .spine__mark { font-size: 20px; }
  .topbar__actions { display: flex; align-items: center; gap: 10px; }
  .topbar__icon-btn {
    width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.08); color: #fff; font-size: 15px; display: flex; align-items: center;
    justify-content: center; cursor: pointer; transition: background 0.18s var(--ease); flex-shrink: 0;
  }
  .topbar__icon-btn:hover { background: rgba(255,255,255,0.15); }
  .theme-icon { display: flex; align-items: center; justify-content: center; line-height: 0; }
  .views { padding: 20px 16px 100px; }
  .view__title { font-size: 24px; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .stat-card { padding: 16px 14px 14px; }
  .stat-card__value { font-size: 21px; }
  .pace-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }

  /* switch table -> cards */
  .table-wrap { display: none; }
  .tx-cards { display: flex; }

  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
    position: fixed; bottom: 0; left: 0; right: 0; background: var(--paper-raised);
    border-top: 1px solid var(--hairline); padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
    z-index: 30;
  }
  .tabbar__link {
    display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: none;
    color: var(--ink-faint); font-size: 10.5px; font-weight: 600; padding: 6px 2px; cursor: pointer;
  }
  .tabbar__link span { font-size: 16px; }
  .tabbar__link.is-active { color: var(--pine); }
  .tabbar__fab {
    width: 50px; height: 50px; border-radius: 50%; background: var(--pine); color: #fff; border: none;
    font-size: 24px; display: flex; align-items: center; justify-content: center; margin: -26px auto 0;
    box-shadow: 0 6px 16px rgba(20,69,60,0.4); cursor: pointer;
  }
}

@media (max-width: 520px) {
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-bar .field { width: 100%; }
  .modal { padding: 20px; }

  /* Keep large monetary values from forcing analytics cards wider than the viewport. */
  .panel { min-width: 0; }
  .rank-list__row { min-width: 0; }
  .rank-list__row > div { min-width: 0; }
  .rank-list__label-row { min-width: 0; gap: 8px; }
  .rank-list__label-row > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rank-list__amount { min-width: 0; white-space: nowrap; font-size: 11px; }

  /* Keep the history table inside the card even with very large amounts. */
  .history-table-wrap { width: 100%; max-width: 100%; min-width: 0; overflow-x: hidden; }
  .history-table { width: 100%; min-width: 0; table-layout: fixed; font-size: 10px; }
  .history-table th,
  .history-table td { padding: 9px 4px; }
  .history-table th { font-size: 9px; letter-spacing: 0.03em; }
  .history-table td.num { overflow-wrap: anywhere; word-break: break-word; }
  .history-table th.ta-right,
  .history-table td.num { text-align: right; }
  .btn-row { flex-direction: column; }
  .btn-row .btn { width: 100%; }
}