@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;1,9..144,500&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* Neither html nor body previously had a background color — only the
   inner .trk-root wrapper did. That's invisible in normal use, but
   Safari's overscroll "rubber-band" bounce (scrolling up past the very
   top) briefly stretches the viewport beyond the actual page content,
   exposing html/body's own background — which, being unset, fell back
   to an unstyled default rather than the app's actual pink. This is a
   static fallback matching the default theme; a JS sync (further down)
   keeps it matching whichever theme is actually active. */
html, body {
  margin: 0;
  padding: 0;
  background: #fdf1f5;
}

.trk-root {
  --bg: #fdf1f5;
  --panel: #ffffff;
  --panel-alt: #fdeef4;
  --rule: #f2d3e0;
  --rose: #c23a71;
  --rose-deep: #9c2c59;
  --blush: #f7a8c4;
  --text: #4a2434;
  --muted: #a9748c;
  --danger: #b5473f;
  --good: #2f7a52;

  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  min-height: 100%;
  padding: calc(32px + env(safe-area-inset-top)) 20px 60px;
  box-sizing: border-box;
}

.trk-root.theme-blue {
  --bg: #eef4fb;
  --panel: #ffffff;
  --panel-alt: #e7f0fa;
  --rule: #cfe0f3;
  --rose: #2a6bb0;
  --rose-deep: #1c4d82;
  --blush: #8fc0ea;
  --text: #1f3a52;
  --muted: #6d8aa3;
  --danger: #b5473f;
  --good: #2f7a52;
}

.trk-root.theme-black {
  --bg: #141318;
  --panel: #1e1c22;
  --panel-alt: #26232b;
  --rule: #37343d;
  --rose: #c9a227;
  --rose-deep: #a3841f;
  --blush: #e3c766;
  --text: #ececec;
  --muted: #9a97a0;
  --danger: #e2645f;
  --good: #4caf7d;
}

.trk-root.theme-black-white {
  --bg: #141318;
  --panel: #1e1c22;
  --panel-alt: #26232b;
  --rule: #37343d;
  --rose: #f2f2f2;
  --rose-deep: #ffffff;
  --blush: #cfcfd6;
  --text: #ececec;
  --muted: #9a97a0;
  --danger: #e2645f;
  --good: #4caf7d;
}

.trk-root.theme-gray {
  --bg: #f2f2f4;
  --panel: #ffffff;
  --panel-alt: #ececed;
  --rule: #dcdce0;
  --rose: #5b5f66;
  --rose-deep: #3f4247;
  --blush: #b9bcc2;
  --text: #2c2e33;
  --muted: #84878d;
  --danger: #b5473f;
  --good: #2f7a52;
}

.trk-root.theme-white {
  --bg: #ffffff;
  --panel: #ffffff;
  --panel-alt: #f6f6f7;
  --rule: #e4e4e7;
  --rose: #27272a;
  --rose-deep: #000000;
  --blush: #d4d4d8;
  --text: #18181b;
  --muted: #71717a;
  --danger: #b5473f;
  --good: #2f7a52;
}

.trk-root * { box-sizing: border-box; }
.trk-wrap { max-width: 920px; margin: 0 auto; }

.eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--rose);
  text-transform: uppercase;
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.year-select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: 2px;
  background-color: var(--panel-alt);
  border: 1px solid var(--rose);
  border-radius: 5px;
  padding: 2px 8px;
}

.year-select-display {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--rose-deep);
  white-space: nowrap;
  pointer-events: none;
}

.year-select-native {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: none;
  margin: 0;
  padding: 0;
}

.title {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 38px;
  margin: 0 0 4px;
  letter-spacing: -0.5px;
  color: var(--rose-deep);
}

.subtitle { color: var(--muted); font-size: 14px; margin: 0 0 22px; }

.sticky-header {
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 20;
  padding-top: calc(2px + env(safe-area-inset-top));
  padding-bottom: 14px;
  margin-bottom: 8px;
  box-shadow: 0 6px 10px -8px rgba(74, 36, 52, 0.25);
}

.tabs-wrap {
  position: relative;
}
.tabs-wrap.has-overflow::before {
  /* A small backdrop behind the arrow so it stays legible over whatever
     tab label happens to sit at the very edge, rather than the arrow
     glyph competing directly with tab text for the same pixels. */
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 2px;
  width: 30px;
  background: linear-gradient(to right, transparent, var(--bg) 55%);
  pointer-events: none;
}
.tabs-wrap.has-overflow-left::after {
  /* Mirrors the right-side backdrop above — ::after was free to reuse
     here since the arrow itself is a real button now, not a pseudo-element. */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 2px;
  width: 30px;
  background: linear-gradient(to left, transparent, var(--bg) 55%);
  pointer-events: none;
}
.tabs-scroll-arrow {
  display: none;
  position: absolute;
  top: 50%;
  right: 2px;
  transform: translateY(-50%);
  font-size: 18px;
  line-height: 1;
  color: var(--rose);
  background: none;
  border: none;
  padding: 6px 6px;
  margin: 0;
  cursor: pointer;
  z-index: 2;
  touch-action: manipulation;
}
.tabs-scroll-arrow-left {
  display: none;
  position: absolute;
  top: 50%;
  left: 2px;
  transform: translateY(-50%);
  font-size: 18px;
  line-height: 1;
  color: var(--rose);
  background: none;
  border: none;
  padding: 6px 6px;
  margin: 0;
  cursor: pointer;
  z-index: 2;
  touch-action: manipulation;
}
.tabs-scroll-arrow.is-visible {
  display: block;
}
.tabs-scroll-arrow-left.is-visible {
  display: block;
}
.table-scroll .tabs-scroll-arrow.is-visible {
  display: block;
  top: 20px;
  transform: none;
}
.table-scroll .tabs-scroll-arrow-left.is-visible {
  display: block;
  top: 20px;
  transform: none;
}
.table-scroll.has-overflow::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 30px;
  background: linear-gradient(to right, transparent, var(--panel) 55%);
  pointer-events: none;
}
.table-scroll.has-overflow-left::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 30px;
  background: linear-gradient(to left, transparent, var(--panel) 55%);
  pointer-events: none;
}

.tabs {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  border-bottom: 2px solid var(--rule);
  margin-bottom: 24px;
  scrollbar-width: thin;
}

.label-short { display: none; }
.th-short { display: none; }

.tab-btn {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 11px 14px;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  position: relative;
  top: 2px;
  white-space: nowrap;
  flex-shrink: 0;
}

.tab-btn.active {
  background: var(--rose);
  color: #fff;
  font-weight: 600;
  border-radius: 6px;
}

.tab-btn.income-tab { color: var(--rose-deep); font-weight: 600; }
.tab-btn.income-tab.active { color: #fff; }

.tab-group-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  background: var(--panel-alt);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 8px;
  margin: -18px 0 18px;
}
.tab-group-item {
  position: static;
  top: 0;
  border-radius: 6px;
  padding: 8px 12px;
  background: var(--panel);
  border: 1px solid transparent;
}
.tab-group-item.active {
  border-color: var(--rose);
  color: var(--rose-deep);
  font-weight: 600;
}

.tab-group-item-wrap {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.pin-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 11px;
  padding: 4px 6px;
  opacity: 0.6;
  border-radius: 6px;
}
.pin-btn:hover { opacity: 1; background: var(--panel); }

.pinned-tab-wrap {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.unpin-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 10px;
  padding: 2px 4px 2px 0;
  position: relative;
  top: 2px;
}
.unpin-btn:hover { color: var(--danger); }

.month-selector-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}
.month-chip-wrap {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--panel-alt);
  border-radius: 8px;
  padding: 2px;
}
.month-chip {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 8px 10px;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
}
.month-chip.active { background: var(--rose); color: #fff; font-weight: 600; }
.month-chip-current { color: var(--rose-deep); font-weight: 700; }
.month-chip-current.active { background: var(--rose); color: #fff; }

.dedicated-month-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.dedicated-month-name {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 18px;
  font-weight: 700;
  color: var(--rose-deep);
}
.unpinned-note {
  margin-left: 8px;
  animation: unpinned-note-fade-in 0.2s ease;
}
.unpinned-note .link-btn { font-size: 12.5px; }
@keyframes unpinned-note-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.check-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  background: var(--panel-alt);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 4px;
  margin-bottom: 18px;
}
.check-tab {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.5px;
  white-space: nowrap;
  flex-shrink: 0;
  border-radius: 6px;
  padding: 9px 14px;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
}
.check-tab.active {
  background: var(--rose);
  color: #fff;
  font-weight: 600;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 22px;
  margin-bottom: 22px;
  box-shadow: 0 2px 10px rgba(194, 58, 113, 0.05);
}
.panel-collapsed { padding: 14px 18px; }
.panel-snug { padding: 14px 18px 10px; }

.panel-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 16px;
}

.summary-row {
  display: flex;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  margin-bottom: 24px;
}

.summary-cell { background: var(--panel); padding: 12px 10px; flex: 1 1 0; min-width: 0; }
.clickable-cell { cursor: pointer; }
.clickable-cell:hover { background: var(--panel-alt); }

.link-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--rose-deep);
  text-decoration: underline;
  cursor: pointer;
}

.jump-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--panel-alt);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 6px 12px;
  margin-bottom: 12px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--rose-deep);
  cursor: pointer;
}
.jump-back-btn:hover { background: var(--bg); border-color: var(--rose); }

.toast-banner {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--rose-deep);
  color: #fff;
  padding: 10px 20px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
  z-index: 3000;
  white-space: nowrap;
  max-width: calc(100vw - 40px);
  overflow: hidden;
  text-overflow: ellipsis;
  animation: toast-fade 2.6s ease forwards;
  pointer-events: none;
}
.toast-banner-clickable {
  pointer-events: auto;
  cursor: pointer;
  border: none;
  font-family: inherit;
}
.toast-banner-clickable:hover { background: var(--rose); }
@keyframes toast-fade {
  0% { opacity: 0; transform: translateX(-50%) translateY(8px); }
  10% { opacity: 1; transform: translateX(-50%) translateY(0); }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4000;
  padding: 20px;
}
.modal-box {
  background: var(--panel, #fff);
  border-radius: 14px;
  padding: 22px;
  max-width: 400px;
  width: 100%;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
  position: relative;
}
.modal-close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  font-size: 16px;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}
.modal-close-btn:hover { color: var(--rose-deep); }

.field-required-mark { color: #b5473f; font-weight: 700; }

.desc-autocomplete-wrap { position: relative; }
.desc-autocomplete-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  max-height: 220px;
  overflow-y: auto;
  background: var(--panel-alt);
  border: 1px solid var(--rule);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
  margin-top: 4px;
}
.desc-autocomplete-item {
  padding: 9px 12px;
  font-size: 13.5px;
  cursor: pointer;
  border-bottom: 1px solid var(--rule);
}
.desc-autocomplete-item:last-child { border-bottom: none; }
.desc-autocomplete-item:hover, .desc-autocomplete-item.active { background: var(--blush); }
.desc-autocomplete-item .autocomplete-cat { color: var(--muted); font-size: 11px; margin-left: 6px; }
.trk-root input.date-untouched { color: var(--muted); }
.field-error input, .field-error select { border-color: #b5473f !important; background: rgba(181,71,63,0.06); }

.summary-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
  line-height: 1.4;
}
/* Only the Income tab's row has labels long enough to wrap a different
   number of lines per cell ("Combined annual income" vs "Next payday") —
   reserving consistent height there keeps values aligned. Every other
   summary row (short, single-line labels like "Total"/"Spent") should stay
   compact rather than inheriting that same reserved space. */
.summary-row-income .summary-label { min-height: 42px; }

.summary-value {
  font-family: 'Fraunces', serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--rose-deep);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.summary-value.negative { color: var(--danger); }
.summary-value.positive { color: var(--good); }
.summary-value.muted { color: var(--muted); font-size: 13px; }

/* Moved here (was previously further down the file, after the mobile
   media query below) specifically so the narrow-screen override for
   table.trk-table wins the cascade. Both rules share identical
   specificity (table.trk-table), so with equal specificity the LATER
   rule in source order wins regardless of the media query — meaning this
   unconditional min-width:600px was silently overriding the mobile fix
   on every screen size, forcing horizontal scroll on phones that the
   fix below was already written to prevent. */
.table-scroll { position: relative; overflow-x: auto; }
table.trk-table { width: 100%; border-collapse: collapse; min-width: 600px; }

@media (max-width: 640px) {
  .subtitle { margin-bottom: 10px; }

  /* Was a single flex row squeezing however many cells it had (4, 5+)
     into one line — on a ~390px phone each cell got ~70px, nowhere near
     enough for a real dollar figure, so values truncated hard ("$55,2…").
     A 2-column grid gives every cell roughly half the screen width,
     which comfortably fits real amounts without shrinking the type or
     abbreviating anything — same look as desktop, just rearranged. */
  .summary-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    overflow-x: visible;
  }
  .summary-cell { flex: none; min-width: 0; padding: 12px 10px; }
  .summary-value {
    font-size: 15px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .label-full { display: none; }
  .label-short { display: inline; }
  .th-full { display: none; }
  .th-short { display: inline; }
  .tab-btn {
    padding: 10px 9px;
    font-size: 10.5px;
    letter-spacing: 0.5px;
  }

  /* The main ledger/goal/bill tables were tuned with a 600px minimum width
     for desktop readability — on a phone that just forces horizontal
     scrolling for every single table in the app. Without table-layout:fixed,
     browsers size columns by content width and mostly ignore max-width
     hints on individual cells — so badges like "QUICK ADD" or "INCOME"
     were still forcing rows wider regardless of padding/font shrinking.
     Fixed layout + explicit widths for the narrow columns (date, category,
     actions) forces the table to actually respect the container width,
     letting description/amount share whatever's left. Scoped to this
     breakpoint only — desktop is untouched. */
  table.trk-table {
    min-width: 0;
    table-layout: fixed;
  }
  table.trk-table th, table.trk-table td { padding: 5px 3px; font-size: 11px; }
  table.trk-table td.td-cat { font-size: 8px; }
  table.trk-table .td-date { width: 34px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  table.trk-table .td-cat { width: 40px; }
  table.trk-table .td-cat.td-cat-has-icon { width: 16px; }
  table.trk-table .td-cat-has-icon .td-cat-text { display: none; }
  table.trk-table .td-actions { width: 20px; padding-left: 1px; padding-right: 1px; }
  /* !important here is deliberate: several tables (Category Budgets, Fixed
     Expenses, Credit Card, Goals) set their column widths as inline
     percentages directly on the <th> elements (e.g. style="width:15%"),
     which — since table-layout:fixed takes its column widths from the
     first row — wins over this class-based rule by specificity alone,
     regardless of source order. That's why those tables kept overlapping
     even after the main ledger's amount column was fixed: this rule was
     already correct, it just never had a chance to apply anywhere but the
     ledger. Forcing it to win here fixes every one of those tables at
     once, since they all already use this same .td-amt class. */
  table.trk-table .td-amt { width: 84px !important; padding-left: 4px !important; white-space: normal !important; }
  table.trk-table th.th-amt { width: 84px !important; padding-left: 4px !important; }
  table.trk-table .td-amt:nth-child(2), table.trk-table th.th-amt:nth-child(2) { padding-left: 10px !important; }
  table.trk-table thead th:first-child:not(.th-date-small), table.trk-table tbody tr:not(.group-header-row):not(.batch-row) td:first-child:not(.td-date) { width: 110px !important; min-width: 110px !important; }
  table.trk-table th.th-date-small { width: 50px !important; padding-left: 4px !important; }
  table.trk-table td:not(.td-date):not(.td-amt):not(.td-actions):not(.td-cat) {
    overflow-wrap: normal;
    word-break: normal;
  }
  .td-desc-row { min-width: 0; }
  .ahead-badge { font-size: 7.5px; padding: 1px 3px; white-space: normal; }

  /* Description text and the quick-add badge were both cramming into a
     single narrow cell and wrapping onto multiple lines, bleeding into
     neighboring rows. Truncating to one line with an ellipsis, tappable
     to reveal the full text in place, keeps rows compact by default
     without losing access to the full detail. Placed after the
     .ahead-badge rule above (both single-class selectors, so with equal
     specificity the later one in source order wins) — otherwise that
     rule's white-space:normal silently overrides this one's nowrap. */
  .truncate-peek {
    display: inline-block;
    max-width: 64px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    cursor: pointer;
  }
  .truncate-peek.peek-expanded {
    max-width: none;
    white-space: normal;
    overflow: visible;
  }

  /* Ledger rows re-flow into cards instead of table columns: description
     (with its badges) and the amount share a top line — amount keeps its
     full size and weight, never squeezed — with date and category
     dropping to a smaller secondary line below. Scoped to tr[data-id]
     specifically (the actual expense rows), so category-group header
     rows and batch-summary rows are untouched, and !important is used
     deliberately here to cleanly override the fixed table-column widths
     set earlier in this same media query, which don't apply once a row
     is a flex card instead of a table row. */
  .ledger-cards thead { display: none; }
  .ledger-cards, .ledger-cards tbody {
    display: block;
    width: 100%;
  }
  .ledger-cards tbody tr[data-id] {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    align-items: flex-start;
    background: var(--panel);
    padding: 10px 12px;
    border-bottom: 1px solid var(--rule);
  }
  .ledger-cards tbody tr[data-id]:last-child {
    border-bottom: none;
  }
  .ledger-cards .group-header-row {
    display: flex;
    width: 100%;
  }
  .ledger-cards .group-header-row td[colspan] {
    flex: 1;
  }
  .ledger-cards tbody tr[data-id] td {
    display: block;
    border: none;
    padding: 0;
    width: auto !important;
  }
  .ledger-cards tbody tr[data-id] td:nth-child(3) {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
  }
  .ledger-cards tbody tr[data-id] td:nth-child(3) .td-desc-row > span:first-child {
    font-family: 'Fraunces', serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    max-width: 160px;
  }
  .ledger-cards tbody tr[data-id] td:nth-child(4) {
    order: 2;
    flex: 0 0 auto;
    margin-left: 10px;
    font-size: 16px;
  }
  .ledger-cards tbody tr[data-id] td:nth-child(5) {
    order: 3;
    flex: 0 0 auto;
    margin-left: 6px;
  }
  .ledger-cards tbody tr[data-id] td:nth-child(1) {
    order: 4;
    flex-basis: 100%;
    margin-top: 6px;
    font-size: 12px;
    color: var(--muted);
  }
  .ledger-cards tbody tr[data-id] td:nth-child(2) {
    order: 5;
    font-size: 12px;
    color: var(--muted);
    margin-left: 8px;
    width: auto;
  }
  .ledger-cards tbody tr[data-id] td.td-cat-has-icon .td-cat-text {
    display: inline;
  }

  .panel { padding: 16px; }
  .panel-collapsed { padding: 12px 14px; }
}

.remaining-bar {
  margin-bottom: 22px;
}
.remaining-track {
  height: 10px;
  border-radius: 6px;
  background: var(--panel-alt);
  border: 1px solid var(--rule);
  overflow: hidden;
}
.remaining-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--blush), var(--rose));
  transition: width 0.25s ease;
}
.remaining-fill.over { background: linear-gradient(90deg, #e0796d, var(--danger)); }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 11px; color: var(--muted); letter-spacing: 0.5px; }

.trk-root input, .trk-root select {
  background: var(--panel-alt);
  border: 1px solid var(--rule);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 6px;
  outline: none;
  width: 100%;
}
.trk-root input:focus, .trk-root select:focus { border-color: var(--rose); }
.trk-root input[type="number"] { font-family: 'IBM Plex Mono', monospace; }

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0 2px;
}
.checkbox-row input[type="checkbox"] { width: auto; accent-color: var(--rose); }
.checkbox-row label { font-size: 13px; color: var(--text); letter-spacing: 0; }

.hint { font-size: 12px; color: var(--muted); margin-top: 10px; }
.hint-alert {
  background: rgba(181, 71, 63, 0.1);
  border: 1px solid var(--danger);
  color: var(--danger);
  border-radius: 8px;
  padding: 8px 10px;
  font-weight: 600;
}
.hint-ok {
  background: rgba(47, 122, 82, 0.1);
  border: 1px solid var(--good);
  color: var(--good);
  border-radius: 8px;
  padding: 8px 10px;
}

.cc-charged-over { color: var(--danger); font-weight: 700; }
.cc-charged-equal { color: var(--good); font-weight: 700; }
.cc-charged-under { color: #c9822a; font-weight: 700; }

.jump-highlight { background: var(--blush) !important; transition: background 1.6s ease; }
.jump-highlight td { background: var(--blush) !important; transition: background 1.6s ease; }

.btn {
  background: var(--rose);
  color: #fff;
  border: none;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
  padding: 12px;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s ease;
}
.btn:hover { background: var(--rose-deep); }
.btn.full { width: 100%; margin-top: 16px; }
.btn-row { display: flex; gap: 8px; margin-top: 16px; align-items: stretch; }
.btn-row .btn.full { margin-top: 0; width: auto; flex: 1; }
.btn-row .btn.secondary { flex-shrink: 0; }
.btn.secondary { background: var(--panel-alt); color: var(--rose-deep); border: 1px solid var(--rule); }
.btn.secondary:hover { background: var(--panel); border-color: var(--rose); }
.cc-quickpay-btn.active {
  background: var(--rose);
  color: #fff;
  border-color: var(--rose);
}
.cc-quickpay-btn.active:hover { background: var(--rose-deep); }
.btn.small { padding: 6px 10px; font-size: 10px; width: auto; margin-top: 0; }

table.trk-table-compact { min-width: 0; }
table.trk-table-compact th, table.trk-table-compact td { padding: 7px 6px; font-size: 12px; }
table.trk-table th {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  padding: 8px 10px;
  border-bottom: 2px solid var(--rule);
}
table.trk-table td {
  padding: 10px 10px;
  border-bottom: 1px solid var(--rule);
  font-size: 13.5px;
  vertical-align: middle;
}
table.trk-table tr:hover td { background: var(--panel-alt); }
.clickable-row { cursor: pointer; }
.jump-arrow { color: var(--muted); margin-right: 6px; font-size: 13px; }
.td-date { font-family: 'IBM Plex Mono', monospace; color: var(--muted); white-space: nowrap; }
table.trk-table td.td-cat {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--rose);
  white-space: nowrap;
}
.td-desc { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.td-desc-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.td-desc-row + .td-desc-row { margin-top: 4px; }
.recur-badge { font-size: 11px; color: var(--rose); cursor: default; }
.row-jump-indicator { font-size: 12px; color: var(--rose); cursor: pointer; margin-right: 2px; }
.needs-attention-row { background: rgba(181, 71, 63, 0.08); }
.needs-attention-row td { color: #b5473f; font-weight: 600; }
.ahead-badge {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--rose-deep);
  background: var(--panel-alt);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 1px 7px;
}
.ahead-badge-clickable {
  cursor: pointer;
  font-family: inherit;
}
.ahead-badge-clickable:hover { background: var(--rose); border-color: var(--rose); color: #fff; }
.muted { color: var(--muted); }
.variance-badge {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: #9a6b1f;
  background: rgba(154, 107, 31, 0.12);
  border-radius: 5px;
  padding: 1px 6px;
}
.td-amt { font-family: 'IBM Plex Mono', monospace; text-align: right; white-space: nowrap; }
.td-amt.spent { color: var(--danger); font-weight: 700; }
.td-amt.pending { color: var(--muted); font-style: italic; }
.td-actions { text-align: center; white-space: nowrap; width: 60px; }
.del-btn, .edit-btn { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 14px; padding: 2px 4px; }
.del-btn:hover { color: var(--danger); }
.edit-btn:hover { color: var(--rose-deep); }
.inline-edit { display: flex; gap: 4px; align-items: center; justify-content: flex-end; }
.inline-edit input { width: 80px; padding: 4px 6px; font-size: 12px; }

.group-header-row td {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--rose-deep);
  font-weight: 600;
  background: var(--panel-alt);
  padding: 8px 10px;
  border-bottom: 1px solid var(--rule);
}
table.trk-table tr.sub-header-row td {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--rose-deep);
  font-weight: 600;
  background: var(--panel-alt);
  padding: 8px 10px;
  border-bottom: 1px solid var(--rule);
}
.echo-row td { color: var(--muted); font-style: italic; }
.echo-row .td-desc { opacity: 0.85; }
.echo-note { font-size: 10.5px; color: var(--muted); margin-top: 2px; font-style: normal; }

.batch-row td { background: var(--panel-alt); }
.batch-row .collapse-toggle { margin: 0; }
.batch-label { font-size: 13.5px; color: var(--text); font-weight: 500; }

.rollover-ledger-row td { background: var(--panel-alt); color: var(--muted); font-style: italic; }
.rollover-ledger-row .td-amt { font-style: normal; }

.trk-root select.assign-select {
  width: auto;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--rose-deep);
  background: var(--panel-alt);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 1px 6px;
  margin-top: 4px;
}

.confirm-box {
  background: var(--panel-alt);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 14px 16px;
  margin-top: 16px;
}
.confirm-item {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}
.confirm-reason {
  font-size: 13px;
  color: var(--text);
  opacity: 0.85;
  margin: 6px 0 0;
  line-height: 1.5;
}

.empty-state { text-align: center; padding: 36px 20px; color: var(--muted); font-size: 13px; }
.empty-state .big {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 19px;
  color: var(--muted);
  display: block;
  margin-bottom: 8px;
}

.loading-note { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--muted); text-align: center; padding: 30px; }

.collapse-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 0 0 4px;
}
.collapse-toggle .panel-title { margin: 0; }
.chevron { font-family: 'IBM Plex Mono', monospace; color: var(--rose); font-size: 12px; }
.add-form { margin-top: 14px; }

.warn-banner {
  background: #fff3e0;
  border: 1px solid #f0c48a;
  color: #8a5a1e;
  font-size: 12.5px;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 16px;
}

.rollover-box { margin-bottom: 22px; }
.rollover-attention-note {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: rgba(181, 71, 63, 0.06);
  border: 1px solid rgba(181, 71, 63, 0.25);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
  cursor: pointer;
  font-family: inherit;
}
.rollover-attention-note:hover { background: rgba(181, 71, 63, 0.12); }
.rollover-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--panel-alt);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
}
.dismiss-rollover-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 15px;
  cursor: pointer;
  padding: 2px 6px;
  flex-shrink: 0;
}
.dismiss-rollover-btn:hover { color: var(--danger); }

.budget-line-card {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--rule);
}
.budget-line-card:last-child { border-bottom: none; }
.budget-line-main { display: flex; align-items: center; flex: 1 1 160px; min-width: 140px; }
.budget-line-name { font-size: 14px; font-weight: 600; color: var(--rose-deep); }
.budget-line-meta { font-size: 12px; color: var(--muted); flex: 1 1 220px; }
.budget-line-actions { display: flex; align-items: center; gap: 8px; }

.pie-chart-wrap {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.pie-chart {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid var(--rule);
}
.pie-chart-clickable { cursor: pointer; transition: transform 0.12s, box-shadow 0.12s; }
.pie-chart-clickable:hover { transform: scale(1.04); box-shadow: 0 3px 10px rgba(0,0,0,0.15); }
.pie-legend { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 180px; }
.pie-legend-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; font-size: 13px; }
.pie-legend-label { flex: 1 1 90px; min-width: 90px; color: var(--text); }
.pie-legend-amt-wrap { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.pie-legend-row-clickable { cursor: pointer; border-radius: 6px; padding: 4px 6px; margin: -4px 0 -4px -6px; transition: background 0.12s; }
.pie-legend-row-clickable:hover { background: var(--panel-alt); }
.pie-legend-arrow { color: var(--muted); font-size: 15px; }
.pie-swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.pie-legend-amt { color: var(--muted); font-family: 'IBM Plex Mono', monospace; font-size: 12px; white-space: nowrap; }

.year-bar-chart {
  display: flex;
  flex-direction: column;
  height: 140px;
  padding-top: 10px;
}
.year-bar-body {
  display: flex;
  flex: 1;
  gap: 8px;
  min-height: 0;
}
.year-bar-yaxis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  flex-shrink: 0;
  padding-bottom: 24px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  color: var(--muted);
}
.year-bar-yaxis-tick {
  line-height: 1;
  white-space: nowrap;
}
.year-bar-plot {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.year-bar-bars-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  flex: 1;
  border-bottom: 1px solid var(--rule);
}
.year-bar-labels-row {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.year-bar-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}
.year-bar-track {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.year-bar-fill {
  width: 60%;
  min-width: 6px;
  background: var(--rose);
  border-radius: 4px 4px 0 0;
}
.year-bar-label {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
}
.year-bar-col-clickable { cursor: pointer; border-radius: 6px; }
.year-bar-col-clickable:hover { background: var(--panel-alt); }
.year-bar-col-clickable:hover .year-bar-fill { background: var(--rose-deep); }

.theme-fab-wrap {
  position: relative;
  display: inline-flex;
  z-index: 500;
}
.theme-fab {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--panel);
  color: var(--rose-deep);
  border: 1px solid var(--rule);
  cursor: pointer;
  font-size: 18px;
  box-shadow: 0 2px 10px rgba(74, 36, 52, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}
.theme-fab:hover { background: var(--panel-alt); border-color: var(--rose); }
.theme-fab-icon { font-style: normal; display: block; }

.theme-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 210px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 10px 30px rgba(74, 36, 52, 0.2);
  z-index: 501;
}
.theme-panel-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 6px 10px 10px;
}
.theme-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  border-radius: 6px;
  padding: 12px 10px;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.theme-option:hover { background: var(--panel-alt); }
.theme-option.active { background: var(--panel-alt); font-weight: 600; }
.theme-swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(0,0,0,0.1);
}
.theme-check { margin-left: auto; color: var(--rose-deep); }

.settings-fullscreen {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 2000;
  overflow-y: auto;
  padding: max(32px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 40px max(20px, env(safe-area-inset-left));
}
.settings-fullscreen-inner {
  max-width: 560px;
  margin: 0 auto;
}
.settings-theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.full-screen-theme-option {
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 14px;
}
.full-screen-theme-option.active { border-color: var(--rose); }

.icon-option-btn {
  font-size: 18px;
  line-height: 1;
  background: var(--panel-alt);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
}
.icon-option-btn.active { border-color: var(--rose); background: var(--bg); }
.icon-custom-input {
  width: 48px;
  text-align: center;
  font-size: 16px;
  padding: 7px 4px;
  border: 1px dashed var(--rule);
  border-radius: 8px;
  background: var(--panel);
}

.calc-fab-wrap {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.calc-fab {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--rose);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 22px;
  box-shadow: 0 4px 14px rgba(194, 58, 113, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.calc-fab:hover { background: var(--rose-deep); }
.calc-fab.pinned { box-shadow: 0 0 0 3px var(--blush), 0 4px 14px rgba(194, 58, 113, 0.4); }
.calc-fab-icon { font-style: normal; }

.calc-panel {
  width: 240px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 10px 30px rgba(74, 36, 52, 0.2);
}
.calc-tape {
  max-height: 90px;
  overflow-y: auto;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--muted);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 6px;
  margin-bottom: 6px;
}
.calc-tape-line { text-align: right; line-height: 1.6; }
.calc-tape-empty { text-align: center; font-style: italic; }
.calc-current {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 24px;
  font-weight: 600;
  color: var(--rose-deep);
  text-align: right;
  padding: 4px 2px 10px;
}
.calc-utility-row {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}
.calc-utility-row .calc-key { flex: 1; }
.calc-keys {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.calc-key {
  background: var(--panel-alt);
  border: 1px solid var(--rule);
  color: var(--text);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 15px;
  padding: 10px 0;
  border-radius: 6px;
  cursor: pointer;
}
.calc-key:hover { background: var(--panel); border-color: var(--rose); }
.calc-key-op { color: var(--rose-deep); font-weight: 600; }
.calc-key-clear { color: var(--danger); font-weight: 600; }
.calc-key-eq { background: var(--rose); color: #fff; border-color: var(--rose); font-weight: 600; }
.calc-key-eq:hover { background: var(--rose-deep); }

@media (max-width: 560px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* ---- Auth / Beta Agreement screens (added for Supabase beta) ----
   Deliberately minimal — #root already carries .trk-root, so the existing
   global input/select/button rules apply automatically. Only new layout
   and status-message styles are needed here. */

.auth-screen {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.auth-card {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 28px;
  max-width: 400px;
  width: 100%;
  box-shadow: 0 2px 10px rgba(194, 58, 113, 0.05);
}
.auth-card label {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 14px 0 6px;
}
.auth-error {
  background: rgba(181, 71, 63, 0.1);
  color: var(--danger);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 13px;
  margin: 12px 0 0;
}
.auth-info {
  background: var(--panel-alt);
  color: var(--text);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 13px;
  margin: 12px 0 0;
}
.auth-link-row {
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  margin-top: 14px;
}
.auth-link-row a {
  color: var(--rose-deep);
  text-decoration: underline;
  cursor: pointer;
}

.agreement-text-box {
  background: var(--panel-alt);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 14px;
  max-height: 240px;
  overflow-y: auto;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
  margin: 16px 0;
}
.agreement-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
.agreement-checkbox-row input[type="checkbox"] {
  width: auto;
  margin-top: 2px;
}