:root{
  /* calendar layout sizing variables */
  --cell-height: 160px;
  --cell-padding: 8px 9px 10px;
  --font-size-line: 12px;
  --font-size-begin: 12px;

  /* greenbar ledger palette */
  --paper:#f3f6f1;
  --paper-2:#e9efe6;      /* alternating bar tint */
  --rule:#cdd8cd;         /* hairline rules */
  --rule-strong:#aebcad;
  --ink:#16241d;          /* near-black green ink */
  --ink-soft:#46584e;
  --ink-faint:#7d8d83;
  --accent:#0e6e63;       /* deep teal */
  --accent-deep:#0a4f47;
  --pos:#1f6b4b;          /* money in */
  --neg:#a8423d;          /* money out */
  --xfer:#7a6a1f;         /* transfer */
  --panel:#ffffff;
  --shadow:0 1px 0 rgba(22,36,29,.04), 0 8px 30px -18px rgba(10,79,71,.45);
  --mono:ui-monospace,"SF Mono","SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --r:9px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:var(--sans); color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; line-height:1.45;
}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.2px}
button{font-family:inherit}
.app{display:flex; flex-direction:column; min-height:100%}

/* ---- masthead ---- */
header.mast{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:14px 22px; background:var(--ink); color:#eaf2ec;
  border-bottom:3px double var(--accent);
}
.brand{display:flex; align-items:baseline; gap:10px}
.brand b{font-size:20px; letter-spacing:-.4px; font-weight:700}
.brand span{font-size:11px; text-transform:uppercase; letter-spacing:.22em; color:#9fc4ba}
.mast .spacer{flex:1}
.user-bar{display:flex; align-items:center; gap:10px}
.acct-pick{display:flex; align-items:center; gap:8px}
.acct-pick label{font-size:11px; text-transform:uppercase; letter-spacing:.16em; color:#9fc4ba}
select.acct, .mast select{
  font-family:var(--sans); font-size:14px; font-weight:600; color:#eaf2ec;
  background:#23362c; border:1px solid #3c5648; border-radius:7px; padding:7px 12px; cursor:pointer;
}
.ribbon{display:flex; gap:22px; align-items:center}
.stat{display:flex; flex-direction:column; line-height:1.15}
.stat .k{font-size:10px; text-transform:uppercase; letter-spacing:.16em; color:#9fc4ba}
.stat .v{font-size:19px; font-weight:700}
.stat .v.neg{color:#ff9b94}
.stat .v.pos{color:#8fe0bd}

/* ---- tabs ---- */
nav.tabs{display:flex; justify-content:space-between; align-items:center; padding:0 16px; background:var(--ink); border-bottom:1px solid #0a1813}
.tab-links{display:flex; gap:2px}
nav.tabs button{
  background:transparent; border:none; color:#9fc4ba; cursor:pointer;
  padding:11px 16px 13px; font-size:13px; font-weight:600; letter-spacing:.02em;
  border-bottom:3px solid transparent;
}
nav.tabs button:hover{color:#eaf2ec}
nav.tabs button.on{color:#fff; border-bottom-color:var(--accent)}

main{flex:1; padding:20px 22px 60px; max-width:1440px; width:100%; margin:0 auto}

/* ---- month bar ---- */
.monthbar{display:flex; align-items:center; gap:14px; margin:4px 0 16px}
.monthbar h2{margin:0; font-size:22px; font-weight:700; letter-spacing:-.4px; min-width:230px}
.nav-btn{
  width:34px; height:34px; border-radius:8px; border:1px solid var(--rule-strong);
  background:var(--panel); color:var(--ink); font-size:16px; cursor:pointer; line-height:1;
}
.nav-btn:hover{border-color:var(--accent); color:var(--accent)}
.monthbar .today-btn{
  border:1px solid var(--rule-strong); background:var(--panel); border-radius:8px;
  padding:7px 12px; font-size:13px; font-weight:600; cursor:pointer; color:var(--ink-soft);
}
.monthbar .today-btn:hover{border-color:var(--accent); color:var(--accent)}
.monthbar .spacer{flex:1}
.add-btn{
  background:var(--accent); color:#fff; border:none; border-radius:8px;
  padding:10px 16px; font-size:14px; font-weight:700; cursor:pointer; box-shadow:var(--shadow);
}
.add-btn:hover{background:var(--accent-deep)}

/* ---- calendar ---- */
.cal{background:var(--panel); border:1px solid var(--rule-strong); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow)}
.dow{display:grid; grid-template-columns:repeat(7,1fr); background:var(--ink); color:#cfe1d8}
.dow div{padding:8px 10px; font-size:11px; text-transform:uppercase; letter-spacing:.14em; font-weight:600}
.weeks{display:grid; grid-template-columns:repeat(7,1fr)}
.cell{
  min-height:var(--cell-height); border-right:1px solid var(--rule); border-bottom:1px solid var(--rule);
  padding:var(--cell-padding); display:flex; flex-direction:column; position:relative; cursor:pointer;
}
.weeks > .cell:nth-child(14n+1),
.weeks > .cell:nth-child(14n+2),
.weeks > .cell:nth-child(14n+3),
.weeks > .cell:nth-child(14n+4),
.weeks > .cell:nth-child(14n+5),
.weeks > .cell:nth-child(14n+6),
.weeks > .cell:nth-child(14n+7){background:var(--paper-2)} /* greenbar: tint alternating weeks */
.cell.dim{background:#f7f9f6 !important; color:var(--ink-faint)}
.cell.dim .daynum{color:var(--ink-faint)}
.cell.today{box-shadow:inset 0 0 0 2px var(--accent)}
.cell:hover{background:#eef4ee !important}
.cell .top{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:3px}
.daynum{font-size:13px; font-weight:700}
.begin{font-size:var(--font-size-begin); color:var(--ink-soft); opacity:0.85}
.lines{flex:1; display:flex; flex-direction:column; gap:1px; overflow:hidden}
.line{display:flex; justify-content:space-between; gap:6px; font-size:var(--font-size-line); align-items:baseline}
.line .d{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink-soft)}
.line .a{font-size:11px; white-space:nowrap}
.a.neg{color:var(--neg)} .a.pos{color:var(--pos)} .a.xfer{color:var(--xfer)}
.end{margin-top:5px; padding-top:4px; border-top:1px solid var(--rule-strong); display:flex; justify-content:space-between; align-items:baseline}
.end .lbl{font-size:9px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-faint)}
.end .v{font-size:13px; font-weight:700}
.end .v.neg{color:var(--neg)}
.end .v.warn-bal{color:#c07010; font-weight:800;}
.gen-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);display:inline-block;margin-right:3px;vertical-align:middle;opacity:.6}

/* ---- generic panels / tables ---- */
.panel{background:var(--panel); border:1px solid var(--rule-strong); border-radius:var(--r); box-shadow:var(--shadow); padding:18px 20px; margin-bottom:18px}
.panel h3{margin:0 0 4px; font-size:16px; letter-spacing:-.3px}
.panel .sub{margin:0 0 14px; color:var(--ink-soft); font-size:13px}
table{width:100%; border-collapse:collapse; font-size:14px}
th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-faint); padding:8px 10px; border-bottom:2px solid var(--rule-strong)}
td{padding:9px 10px; border-bottom:1px solid var(--rule)}
tr:hover td{background:var(--paper-2)}
td.r,th.r{text-align:right}
.pill{display:inline-block; font-size:11px; padding:2px 8px; border-radius:20px; background:var(--paper-2); color:var(--ink-soft); border:1px solid var(--rule)}
.row-actions button{background:none;border:none;cursor:pointer;color:var(--accent);font-size:13px;font-weight:600;padding:2px 6px}
.row-actions button.del{color:var(--neg)}

.ghost{
  border:1px dashed var(--rule-strong); background:transparent; border-radius:8px;
  padding:9px 14px; font-size:13px; font-weight:600; color:var(--ink-soft); cursor:pointer;
}
.ghost:hover{border-color:var(--accent); color:var(--accent)}

/* empty state */
.empty{text-align:center; padding:60px 20px; color:var(--ink-soft)}
.empty h3{font-size:20px; color:var(--ink); margin:0 0 8px}
.empty p{max-width:460px; margin:0 auto 20px}
.empty .actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}

/* ---- modal ---- */
.scrim{position:fixed; inset:0; background:rgba(10,24,19,.45); display:flex; align-items:flex-start; justify-content:center; padding:6vh 16px; z-index:50; overflow:auto}
.modal{background:var(--panel); border-radius:14px; width:100%; max-width:480px; box-shadow:0 30px 80px -20px rgba(0,0,0,.5); overflow:hidden}
.modal header{display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--rule); background:var(--paper)}
.modal header b{font-size:16px}
.modal header button{background:none;border:none;font-size:22px;line-height:1;cursor:pointer;color:var(--ink-faint)}
.modal .body{padding:18px 20px}
.modal .foot{padding:14px 20px; border-top:1px solid var(--rule); display:flex; gap:10px; justify-content:flex-end; background:var(--paper)}
.field{margin-bottom:13px}
.field label{display:block; font-size:12px; font-weight:600; color:var(--ink-soft); margin-bottom:5px; text-transform:uppercase; letter-spacing:.04em}
.field input, .field select, .field textarea{
  width:100%; font-family:var(--sans); font-size:14px; padding:9px 11px;
  border:1px solid var(--rule-strong); border-radius:8px; background:#fff; color:var(--ink);
}
.field input:focus, .field select:focus{outline:2px solid var(--accent); outline-offset:0; border-color:var(--accent)}
.field.amount input{font-family:var(--mono); font-variant-numeric:tabular-nums}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.seg{display:flex; gap:0; border:1px solid var(--rule-strong); border-radius:8px; overflow:hidden}
.seg button{flex:1; border:none; background:#fff; padding:9px; font-size:13px; font-weight:600; cursor:pointer; color:var(--ink-soft)}
.seg button.on{background:var(--accent); color:#fff}
.seg button + button{border-left:1px solid var(--rule-strong)}
.btn{border:1px solid var(--rule-strong); background:#fff; border-radius:8px; padding:9px 16px; font-size:14px; font-weight:600; cursor:pointer; color:var(--ink)}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn.primary:hover{background:var(--accent-deep)}
.btn.danger{color:var(--neg); border-color:#e3c4c2}
.hint{font-size:12px; color:var(--ink-faint); margin-top:6px}

.toolbar{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:14px}
.toolbar .field{margin:0}
.toolbar label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint);margin-bottom:3px}
.toolbar input, .toolbar select{font-family:var(--sans);font-size:13px;padding:7px 10px;border:1px solid var(--rule-strong);border-radius:7px}

.totalrow td{font-weight:700; border-top:2px solid var(--rule-strong); background:var(--paper-2)}
.muted{color:var(--ink-faint)}
table.tot{width:100%;border-collapse:collapse;font-size:14px}
table.tot td{padding:6px 8px;border-bottom:1px solid var(--rule)}
table.tot .grouphdr td{background:var(--ink);color:#eaf2ec;font-size:11px;letter-spacing:.12em;padding:7px 8px}
table.tot .grouphdr td b{color:#fff}

@media (max-width:760px){
  main{padding:16px 12px 50px}
  .ribbon{gap:14px}
  .stat .v{font-size:16px}
  .monthbar h2{min-width:0; font-size:18px}
  /* calendar becomes a vertical list */
  .dow{display:none}
  .weeks{grid-template-columns:1fr}
  .cell{min-height:0}
  .cell.dim{display:none}
}
.fatal{margin:40px auto;max-width:560px;background:#fff;border:1px solid var(--rule-strong);border-radius:10px;padding:22px;color:var(--ink)}
.fatal h3{margin:0 0 8px;color:var(--neg)}
.fatal code{font-family:var(--mono);font-size:12px;background:var(--paper-2);padding:2px 5px;border-radius:4px;display:block;white-space:pre-wrap;margin-top:10px}

/* ---- scheduled vs cleared payments ---- */
:root {
  --sched-blue: #184a7e;
}
.line.sched-debit {
  font-weight: 400;
}
.line.sched-debit .d {
  color: #4a668c;
}
.line.sched-debit .a {
  color: var(--sched-blue) !important;
}
.line.cleared-debit .a {
  color: var(--neg) !important;
  font-weight: 700;
}
.line.cleared-credit .a {
  color: var(--pos) !important;
  font-weight: 700;
}
.line.overdue {
  border-left: 3px solid #e8a430;
  padding-left: 5px;
}
.line.overdue .d {
  color: #b87010;
}
tr.overdue-row td {
  color: #b87010;
}
/* Credit card calendar entries */
.line.credit-interest-line {
  border-left: 3px solid #9b59b6;
  padding-left: 5px;
  opacity: 0.85;
}
.line.credit-interest-line .d {
  color: #7d3c98;
  font-style: italic;
}
.line.credit-due-reminder {
  border-left: 3px solid #e67e22;
  padding-left: 5px;
  background: rgba(230, 126, 34, 0.06);
}
.line.credit-due-reminder .d {
  color: #d35400;
  font-weight: 600;
}

.line-note {
  font-size: 9px;
  color: var(--ink-faint);
  font-style: italic;
  margin-left: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 80px;
}
.upcoming-panel .upcoming-header:hover .upcoming-toggle {
  text-decoration: underline;
}

/* ---- monthly grouped accordion tables ---- */
.month-group {
  margin-bottom: 12px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--panel);
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
.month-group summary {
  padding: 11px 16px;
  background: var(--paper-2);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  outline: none;
}
.month-group summary:hover {
  background: #e3ebe0;
}
.month-group[open] summary {
  border-bottom: 1px solid var(--rule-strong);
}
.month-group summary::-webkit-details-marker {
  display: none;
}
.month-group summary::after {
  content: "▼";
  font-size: 10px;
  color: var(--ink-faint);
  transition: transform 0.2s ease;
  margin-left: 10px;
}
.month-group[open] summary::after {
  transform: rotate(180deg);
}
.month-group table {
  margin: 0;
  border: none;
}
.month-group tr:last-child td {
  border-bottom: none;
}

/* ---- reconciliation checkbox styling ---- */
.clear-chk {
  width: 14px;
  height: 14px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--accent); /* uses our branding color */
  border-radius: 4px;
  flex-shrink: 0;
}
.line .clear-chk {
  width: 12px;
  height: 12px;
}
/* ---- drag-to-reschedule ---- */
.line[draggable]:hover {
  cursor: grab;
}
.line.dragging {
  opacity: 0.4;
  cursor: grabbing;
}
.cell.drag-over {
  background: var(--paper-2) !important;
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
}
.month-group .clear-chk {
  vertical-align: middle;
}

/* ---- danger balance indicators ---- */
.cell.danger-bal {
  background: #fef5f5 !important;
}
.cell.danger-bal:hover {
  background: #faeaea !important;
}
.cell.danger-bal .top .begin {
  color: var(--neg) !important;
  font-weight: 700;
  text-shadow: 0 0 1px rgba(168, 66, 61, 0.05);
}
.cell.danger-bal .end .v {
  color: var(--neg) !important;
  font-weight: 800;
}

/* ---- trend chart styles ---- */
.chart-container {
  background: var(--panel);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 20px 24px;
  position: relative;
  margin-bottom: 24px;
}
.chart-container h3 {
  margin: 0 0 6px;
  font-size: 16px;
  letter-spacing: -.3px;
}
.chart-svg {
  width: 100%;
  height: 340px;
  display: block;
  overflow: visible;
  margin-top: 14px;
}
.chart-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chart-area {
  fill: url(#chartGrad);
  opacity: 0.12;
}
.chart-grid-line {
  stroke: var(--rule);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  opacity: 0.6;
}
.chart-axis-text {
  font-family: var(--sans);
  font-size: 11px;
  fill: var(--ink-soft);
  user-select: none;
}
.chart-axis-text.y-axis {
  text-anchor: end;
  font-family: var(--mono);
}
.chart-axis-text.x-axis {
  text-anchor: middle;
}
.chart-buffer-line {
  stroke: var(--neg);
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
  opacity: 0.75;
}
.chart-buffer-lbl {
  font-family: var(--sans);
  font-size: 10px;
  fill: var(--neg);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  user-select: none;
}
.chart-tracker-line {
  stroke: var(--ink-soft);
  stroke-width: 1.2;
  stroke-dasharray: 3 3;
  pointer-events: none;
  opacity: 0.6;
}
.chart-tooltip {
  position: absolute;
  background: var(--ink);
  color: #eaf2ec;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  box-shadow: 0 10px 30px -8px rgba(0,0,0,0.4);
  pointer-events: none;
  display: none;
  z-index: 100;
  line-height: 1.35;
  border: 1px solid var(--accent);
}
.chart-tooltip .d {
  font-size: 11px;
  color: #9fc4ba;
  font-weight: 600;
  margin-bottom: 2px;
}
.chart-tooltip .b {
  font-family: var(--mono);
  font-size: 13.5px;
  font-weight: 700;
}
.chart-tooltip .b.neg {
  color: #ff9b94;
}

/* ---- bulk clear controls ---- */
.bulk-reconcile {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  margin-right: 12px;
}
.bulk-btn {
  background: transparent;
  border: 1px solid var(--rule-strong);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 5px;
  line-height: 1.2;
  transition: all 0.15s ease;
}
.bulk-btn:hover {
  background: var(--paper-2);
  border-color: var(--accent);
  color: var(--accent-deep);
}
.bulk-btn.unclear {
  color: var(--ink-soft);
}
.bulk-btn.unclear:hover {
  border-color: var(--rule-strong);
  background: var(--paper-2);
  color: var(--ink);
}

/* ---- keyboard shortcuts help link ---- */
.shortcut-link {
  font-size: 12px;
  color: #9fc4ba;
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 11px 16px;
  user-select: none;
  transition: color 0.15s ease;
}
.shortcut-link:hover {
  color: #fff;
}

/* shortcut modal custom helper styles */
.shortcut-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 18px;
  align-items: center;
  font-size: 13.5px;
}
.shortcut-grid kbd {
  background: var(--paper-2);
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  padding: 3px 6px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: bold;
  box-shadow: 0 1px 0 rgba(0,0,0,0.1);
  text-align: center;
  min-width: 28px;
  display: inline-block;
}

/* ---- toggle switch custom component ---- */
.switch {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 18px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #3c5648; /* blend with dark green header background */
  transition: .15s ease-in-out;
  border-radius: 18px;
  border: 1px solid #4a6858;
}
.slider:before {
  position: absolute;
  content: "";
  height: 12px;
  width: 12px;
  left: 2px;
  bottom: 2px;
  background-color: #eaf2ec;
  transition: .15s ease-in-out;
  border-radius: 50%;
}
input:checked + .slider {
  background-color: var(--accent);
  border-color: #148d80;
}
input:checked + .slider:before {
  transform: translateX(14px);
  background-color: #fff;
}

/* ---- reconciled only mode styling highlights ---- */
.cell.reconciled-cell .end .lbl {
  color: var(--accent);
  font-weight: 600;
}
.cell.reconciled-cell .end .v {
  color: var(--accent);
}
.cell.reconciled-cell .end .v.neg {
  color: var(--neg); /* Keep negative values red for safety */
}

/* ---- visuals dashboard subtabs ---- */
.subtabs-bar {
  display: flex;
  background: var(--paper-2);
  border: 1px solid var(--rule-strong);
  border-radius: 20px;
  padding: 2px;
  gap: 2px;
  align-items: center;
}
.subtab-btn {
  background: transparent;
  border: none;
  border-radius: 18px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: var(--ink-soft);
  transition: all 0.15s ease;
  line-height: 1.2;
}
.subtab-btn:hover {
  color: var(--ink);
  background: rgba(0, 0, 0, 0.035);
}
.subtab-btn.on {
  background: var(--accent);
  color: #fff;
}
.subtab-btn.on:hover {
  color: #fff;
  background: var(--accent-deep);
}

/* Donut Slice scale on hover transition */
.donut-slice {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}
.donut-slice:hover {
  opacity: 0.95;
}

/* Legend items and scroll adjustments */
.donut-legend {
  scrollbar-width: thin;
  scrollbar-color: var(--rule-strong) transparent;
}
.donut-legend::-webkit-scrollbar {
  width: 6px;
}
.donut-legend::-webkit-scrollbar-thumb {
  background-color: var(--rule-strong);
  border-radius: 3px;
}
.legend-item:hover {
  background: var(--paper-2);
}

/* ---- sortable column headers ---- */
th.sortable {
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: background 0.15s ease, color 0.15s ease;
}
th.sortable:hover {
  background: var(--paper-2) !important;
  color: var(--ink) !important;
}
th.sortable .sort-arrow {
  color: var(--accent);
  font-size: 10px;
  display: inline-block;
  margin-left: 5px;
}
th.sortable .sort-arrow-hover {
  color: var(--ink-faint);
  font-size: 10px;
  opacity: 0;
  display: inline-block;
  margin-left: 5px;
  transition: opacity 0.12s ease;
}
th.sortable:hover .sort-arrow-hover {
  opacity: 1;
}

/* ---- color-coded type pills ---- */
.pill.income {
  background: #edf7ee !important;
  border-color: #b3dbb8 !important;
  color: var(--pos) !important;
  font-weight: 600;
}
.pill.expense {
  background: #fef5f5 !important;
  border-color: #ffc5c2 !important;
  color: var(--neg) !important;
  font-weight: 600;
}
.pill.transfer {
  background: #fcf5e3 !important;
  border-color: #e8dba5 !important;
  color: var(--xfer) !important;
  font-weight: 600;
}