:root {
  --bg: #f5f6f8;
  --card-bg: #ffffff;
  --text: #1a1d23;
  --muted: #6b7280;
  --border: #e5e7eb;
  --accent: #2563eb;
  --overdue: #dc2626;
  --overdue-bg: #fef2f2;
  --today: #ea580c;
  --today-bg: #fff7ed;
  --soon: #ca8a04;
  --soon-bg: #fefce8;
  --upcoming: #16a34a;
  --upcoming-bg: #f0fdf4;

  /* chart tokens */
  --chart-grid: #e1e0d9;
  --chart-baseline: #c3c2b7;
  --chart-ink-muted: #898781;
  --series-seq: #2a78d6;
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;
  --series-6: #008300;
  --series-7: #6250d6;
  --series-8: #e34948;
  --series-9: #0891b2;
  --series-10: #65a30d;
  --series-11: #78350f;
  --series-12: #0d9488;
  --series-13: #c026d3;
  --series-14: #4338ca;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161a;
    --card-bg: #1e2127;
    --text: #e8eaed;
    --muted: #9aa1ac;
    --border: #2d313a;
    --overdue-bg: #2a1515;
    --today-bg: #2a1f10;
    --soon-bg: #2a2510;
    --upcoming-bg: #122a17;

    --chart-grid: #2c2c2a;
    --chart-baseline: #383835;
    --chart-ink-muted: #898781;
    --series-seq: #3987e5;
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #c98500;
    --series-5: #d55181;
    --series-6: #008300;
    --series-7: #9085e9;
    --series-8: #e66767;
    --series-9: #22b8d4;
    --series-10: #84cc16;
    --series-11: #c2843f;
    --series-12: #2dd4bf;
    --series-13: #e879f9;
    --series-14: #818cf8;
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239aa1ac' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }

  body {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cdefs%3E%3Cg id='cf' fill='none' stroke='%234ade80' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-8 2c-1-5 3-9 8-9s9 4 8 9c1 1 1 3 0 4-1 4-4 6-8 6s-7-2-8-6c-1-1-1-3 0-4z'/%3E%3Cpath d='M-7-6c-1-3-1-5 0-7 2 1 4 3 5 6'/%3E%3Cpath d='M7-6c1-3 1-5 0-7-2 1-4 3-5 6'/%3E%3Ccircle cx='-3' cy='2' r='1' fill='%234ade80' stroke='none'/%3E%3Ccircle cx='3' cy='2' r='1' fill='%234ade80' stroke='none'/%3E%3Cpath d='M-1.5 6c1 1 3 1 3 0'/%3E%3Cpath d='M-8 3c-3 0-5 1-7 2M-8 5c-2 1-4 2-6 4'/%3E%3Cpath d='M8 3c3 0 5 1 7 2M8 5c2 1 4 2 6 4'/%3E%3C/g%3E%3Cg id='cs' fill='none' stroke='%234ade80' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-10 10c-1-9 4-16 10-16 2-6 1-10-1-13 3 0 6 3 7 7 2-1 4-1 6 0 1-4 4-7 7-7-2 3-3 7-1 13 6 0 11 7 10 16 1 4-4 7-19 7s-20-3-19-7z'/%3E%3Cpath d='M9 9c4-2 7-6 6-11'/%3E%3C/g%3E%3Cg id='cp' fill='none' stroke='%234ade80' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-13 7c-1-5 2-8 5-8 0-3-1-5-3-7 2-1 4 0 5 2 1-2 3-3 5-2-1 2-2 4-1 6 4 1 7 4 7 8 1 2 0 4-2 5-3 2-12 2-16 0-1-1-1-3 0-4z'/%3E%3Cpath d='M-8-6c-1-2-1-4 0-5 1 1 2 3 2 5'/%3E%3Cpath d='M-9 7v4M-3 7v4M3 6v4M8 5v4'/%3E%3Cpath d='M9 2c3-1 5-4 4-7'/%3E%3Ccircle cx='-6' cy='-2' r='0.9' fill='%234ade80' stroke='none'/%3E%3C/g%3E%3Cg id='sn' fill='none' stroke='%234ade80' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 -12c5 2 -5 5 0 7s-5 5 0 7s-5 5 0 7'/%3E%3Ccircle cx='0' cy='-12' r='1.6' fill='%234ade80' stroke='none'/%3E%3Cpath d='M0 -13.5l-1.5 -2M0 -13.5l1.5 -2'/%3E%3C/g%3E%3C/defs%3E%3Cg opacity='0.32'%3E%3Cuse href='%23cf' transform='translate(30,40) rotate(-10) scale(0.8)'/%3E%3Cuse href='%23cs' transform='translate(150,25) rotate(8) scale(0.6)'/%3E%3Cuse href='%23cf' transform='translate(205,110) rotate(14) scale(0.9)'/%3E%3Cuse href='%23cs' transform='translate(55,140) rotate(-6) scale(0.7)'/%3E%3Cuse href='%23cf' transform='translate(120,205) rotate(5) scale(0.65)'/%3E%3Cuse href='%23cs' transform='translate(205,205) rotate(-12) scale(0.8)'/%3E%3Cuse href='%23cp' transform='translate(90,75) rotate(6) scale(0.8)'/%3E%3Cuse href='%23cp' transform='translate(20,180) rotate(-8) scale(0.75)'/%3E%3Cuse href='%23cp' transform='translate(175,165) rotate(10) scale(0.85)'/%3E%3Cuse href='%23sn' transform='translate(175,45) rotate(15) scale(0.7)'/%3E%3Cuse href='%23sn' transform='translate(15,115) rotate(-20) scale(0.6)'/%3E%3Cuse href='%23sn' transform='translate(130,165) rotate(25) scale(0.65)'/%3E%3C/g%3E%3C/svg%3E");
  }
}

.chart-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 20px;
}

.chart-card h3 { margin: 0 0 4px; font-size: 1rem; }
.chart-sub { color: var(--muted); font-size: 0.82rem; margin-bottom: 12px; }

.legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: 0.82rem; }
.legend-item { display: flex; align-items: center; gap: 6px; color: var(--text); }
.legend-swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

table.report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
table.report-table th, table.report-table td {
  text-align: left;
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
table.report-table th { color: var(--muted); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; }
details.table-toggle summary { cursor: pointer; color: var(--accent); font-size: 0.85rem; margin-top: 4px; }

/* Notification toggle grid: every column but the person's name is a
   checkbox, so center those and give the columns some breathing room. */
table.notif-table th,
table.notif-table td {
  padding-left: 16px;
  padding-right: 16px;
}
table.notif-table th:not(:first-child),
table.notif-table td:not(:first-child) {
  text-align: center;
}
table.notif-table .notif-toggle-form {
  display: inline-block;
}
table.notif-table input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cdefs%3E%3Cg id='cf' fill='none' stroke='%234ade80' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-8 2c-1-5 3-9 8-9s9 4 8 9c1 1 1 3 0 4-1 4-4 6-8 6s-7-2-8-6c-1-1-1-3 0-4z'/%3E%3Cpath d='M-7-6c-1-3-1-5 0-7 2 1 4 3 5 6'/%3E%3Cpath d='M7-6c1-3 1-5 0-7-2 1-4 3-5 6'/%3E%3Ccircle cx='-3' cy='2' r='1' fill='%234ade80' stroke='none'/%3E%3Ccircle cx='3' cy='2' r='1' fill='%234ade80' stroke='none'/%3E%3Cpath d='M-1.5 6c1 1 3 1 3 0'/%3E%3Cpath d='M-8 3c-3 0-5 1-7 2M-8 5c-2 1-4 2-6 4'/%3E%3Cpath d='M8 3c3 0 5 1 7 2M8 5c2 1 4 2 6 4'/%3E%3C/g%3E%3Cg id='cs' fill='none' stroke='%234ade80' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-10 10c-1-9 4-16 10-16 2-6 1-10-1-13 3 0 6 3 7 7 2-1 4-1 6 0 1-4 4-7 7-7-2 3-3 7-1 13 6 0 11 7 10 16 1 4-4 7-19 7s-20-3-19-7z'/%3E%3Cpath d='M9 9c4-2 7-6 6-11'/%3E%3C/g%3E%3Cg id='cp' fill='none' stroke='%234ade80' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-13 7c-1-5 2-8 5-8 0-3-1-5-3-7 2-1 4 0 5 2 1-2 3-3 5-2-1 2-2 4-1 6 4 1 7 4 7 8 1 2 0 4-2 5-3 2-12 2-16 0-1-1-1-3 0-4z'/%3E%3Cpath d='M-8-6c-1-2-1-4 0-5 1 1 2 3 2 5'/%3E%3Cpath d='M-9 7v4M-3 7v4M3 6v4M8 5v4'/%3E%3Cpath d='M9 2c3-1 5-4 4-7'/%3E%3Ccircle cx='-6' cy='-2' r='0.9' fill='%234ade80' stroke='none'/%3E%3C/g%3E%3Cg id='sn' fill='none' stroke='%234ade80' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 -12c5 2 -5 5 0 7s-5 5 0 7s-5 5 0 7'/%3E%3Ccircle cx='0' cy='-12' r='1.6' fill='%234ade80' stroke='none'/%3E%3Cpath d='M0 -13.5l-1.5 -2M0 -13.5l1.5 -2'/%3E%3C/g%3E%3C/defs%3E%3Cg opacity='0.26'%3E%3Cuse href='%23cf' transform='translate(30,40) rotate(-10) scale(0.8)'/%3E%3Cuse href='%23cs' transform='translate(150,25) rotate(8) scale(0.6)'/%3E%3Cuse href='%23cf' transform='translate(205,110) rotate(14) scale(0.9)'/%3E%3Cuse href='%23cs' transform='translate(55,140) rotate(-6) scale(0.7)'/%3E%3Cuse href='%23cf' transform='translate(120,205) rotate(5) scale(0.65)'/%3E%3Cuse href='%23cs' transform='translate(205,205) rotate(-12) scale(0.8)'/%3E%3Cuse href='%23cp' transform='translate(90,75) rotate(6) scale(0.8)'/%3E%3Cuse href='%23cp' transform='translate(20,180) rotate(-8) scale(0.75)'/%3E%3Cuse href='%23cp' transform='translate(175,165) rotate(10) scale(0.85)'/%3E%3Cuse href='%23sn' transform='translate(175,45) rotate(15) scale(0.7)'/%3E%3Cuse href='%23sn' transform='translate(15,115) rotate(-20) scale(0.6)'/%3E%3Cuse href='%23sn' transform='translate(130,165) rotate(25) scale(0.65)'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  color: var(--text);
}

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 16px;
}

header.topbar {
  border-bottom: 1px solid var(--border);
  background: var(--card-bg);
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

header.topbar h1 {
  font-size: 1.7rem;
  margin: 0;
}

/* Matches .container's max-width/centering AND side padding exactly, so
   the logo and action buttons line up with the left/right edges of the
   cards below instead of sitting flush at the viewport edge on wide
   screens or drifting a few px off from a padding mismatch. */
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 960px;
  margin: 0 auto;
  padding: 14px 16px;
}

@media (max-width: 480px) {
  header.topbar h1 { font-size: 1.35rem; }
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}

.menu-wrap {
  position: relative;
}

.icon-btn-circle {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.08);
}

.icon-btn-circle:hover {
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.08), 0 2px 6px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.icon-btn-circle:active {
  transform: translateY(0) scale(0.94);
}

.icon-btn-circle.primary {
  background: #16a34a;
  border-color: #16a34a;
  color: white;
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.18), 0 2px 8px rgba(22, 163, 74, 0.35);
  font-size: 1.4rem;
  font-weight: 600;
}

.icon-btn-circle.primary:hover {
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.22), 0 2px 8px rgba(22, 163, 74, 0.4);
}

/* Drawn as two bars instead of a text glyph so it's always pixel-centered,
   independent of font metrics/baseline quirks. */
.icon-btn-circle.primary .plus::before,
.icon-btn-circle.primary .plus::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: white;
  border-radius: 1px;
}

.icon-btn-circle.primary .plus::before {
  width: 16px;
  height: 2px;
  transform: translate(-50%, -50%);
}

.icon-btn-circle.primary .plus::after {
  width: 2px;
  height: 16px;
  transform: translate(-50%, -50%);
}

/* Same idea as .plus: three bars positioned off a centered middle bar,
   instead of the ☰ text glyph, so it's pixel-centered in the circle. */
.icon-btn-circle .hamburger {
  display: inline-block;
  position: relative;
  width: 18px;
  height: 2px;
  background: var(--text);
  border-radius: 1px;
}

.icon-btn-circle .hamburger::before,
.icon-btn-circle .hamburger::after {
  content: '';
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: var(--text);
  border-radius: 1px;
}

.icon-btn-circle .hamburger::before { top: -6px; }
.icon-btn-circle .hamburger::after { top: 6px; }

.menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 180px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  display: none;
  flex-direction: column;
  overflow: hidden;
  z-index: 50;
}

.menu-panel.open {
  display: flex;
}

.menu-panel a,
.menu-panel button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 11px 16px;
  font-size: 0.92rem;
  color: var(--text);
  background: none;
  border: none;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
}

.menu-panel a:hover,
.menu-panel button:hover {
  background: var(--bg);
}

.menu-panel form {
  margin: 0;
}

.wordmark {
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #16a34a;
}

.wordmark .accent {
  color: #14532d;
}

.btn {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text);
  text-decoration: none;
  font-size: 0.9rem;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.btn:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0) scale(0.96);
  box-shadow: none;
}

.btn-primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

.btn-reports:hover {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
}

.btn-logout:hover {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #b91c1c;
}

.btn-sm { padding: 5px 10px; font-size: 0.8rem; }

/* Progress-bar button: label sits on its own line, with a thin 7-segment
   bar (one segment per day of the 7-day window) below it — kept separate
   so the text never overlaps the fill and never looks choppy. */
.btn-progress-bar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 7px;
  width: 100%;
  min-width: 230px;
  max-width: 100%;
  padding: 9px 16px;
  border: 2px solid var(--upcoming);
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
}

/* The Recently Paid version is a static display, not a button. */
.btn-progress-bar.paid-bar {
  cursor: default;
  border-color: transparent;
  background: transparent;
  padding: 0 16px;
}

.btn-progress-bar .progress-bar-label {
  font-weight: 700;
  font-size: 1.05rem;
  text-align: center;
  white-space: nowrap;
  color: var(--upcoming);
}

.btn-progress-bar .progress-segments {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 22px;
  overflow: visible;
}

.btn-progress-bar .progress-segment {
  flex: 1;
  align-self: center;
  height: 10px;
  background: var(--border);
  border-radius: 2px;
}

.btn-progress-bar .progress-cap {
  flex-shrink: 0;
  width: auto;
  display: block;
}

/* The source artwork's actual snake-body stroke is much thinner than its
   own transparent bounding box (the curve/head bends within a taller
   crop), and the stroke sits off-center in that box. These heights and
   offsets are tuned so the visible body reads at the segment's 10px
   thickness and lines up on the segment's vertical midline, not the
   image box's midline. */
.progress-tail {
  height: 17px;
  transform: translateY(3px);
}

.progress-head {
  height: 16px;
  transform: translateY(-1px);
}

.btn-progress-bar .progress-segment.filled {
  background: var(--upcoming);
}

.summary-row {
  display: flex;
  gap: 12px;
  margin: 16px 0;
  flex-wrap: wrap;
}

.summary-card {
  flex: 1;
  min-width: 140px;
  max-width: 100%;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  text-align: center;
}

/* Never break mid-number (e.g. "$10,838." / "84") — shrink to fit the
   card instead, since there's no natural word break in a dollar amount. */
.summary-card .num { font-size: 1.25rem; font-weight: 700; white-space: nowrap; }
.summary-card .label { color: var(--muted); font-size: 0.85rem; overflow-wrap: break-word; }
.summary-card .label-sub { display: block; font-size: 0.78rem; white-space: nowrap; }

.filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.filters select {
  padding: 6px 28px 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background-color: var(--card-bg);
  color: var(--text);
  appearance: none;
  -webkit-appearance: none;
  background-image: var(--select-arrow);
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px 6px;
}

.bill-list { display: flex; flex-direction: column; gap: 10px; }

.bill-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-left: 5px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow 0.12s ease;
}

.bill-card[data-edit-href] {
  cursor: pointer;
}

.bill-card[data-edit-href]:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.bill-card.overdue { border-left-color: var(--overdue); background: var(--overdue-bg); }
.bill-card.today { border-left-color: var(--today); background: var(--today-bg); }
.bill-card.soon { border-left-color: var(--soon); background: var(--soon-bg); }
.bill-card.upcoming { border-left-color: var(--upcoming); background: var(--upcoming-bg); }

.bill-name { font-weight: 600; font-size: 1.05rem; flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.bill-name .icon { display: inline-flex; align-items: center; flex-shrink: 0; }
.bill-name .name-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bill-meta { display: flex; flex-wrap: wrap; align-items: center; color: var(--muted); font-size: 0.85rem; flex: 1; min-width: 0; }

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  background: var(--border);
  color: var(--text);
  margin-right: 4px;
  margin-bottom: 4px;
}

.badge-autopay { background: #dbeafe; color: #1e40af; }
.badge-tag { background: #fef3c7; color: #92400e; }
.badge-business { background: #ede9fe; color: #5b21b6; }
.badge-variable { background: #ffe4e6; color: #9f1239; }
.badge-duedate { background: #e0e7ff; color: #3730a3; font-weight: 700; }
@media (prefers-color-scheme: dark) {
  .badge-autopay { background: #1e3a5f; color: #93c5fd; }
  .badge-tag { background: #3a2e14; color: #fbbf24; }
  .badge-business { background: #2e1f4d; color: #c4b5fd; }
  .badge-variable { background: #4c1d2b; color: #fda4af; }
  .badge-duedate { background: #312e81; color: #c7d2fe; }
}

.countdown {
  font-weight: 700;
  font-size: 0.95rem;
}

.countdown.overdue { color: var(--overdue); }
.countdown.today { color: var(--today); }
.countdown.soon { color: var(--soon); }
.countdown.upcoming { color: var(--upcoming); }

/* Compact signed-day-count pill ("+5", "0", "-4") replacing the longer
   "Due in 5 days" text, color-coded the same as the countdown text was.
   Sized to match .badge/.badge-duedate exactly so the pair reads as one
   matched set of pills. */
.badge-days {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.badge-days.overdue { background: var(--overdue); }
.badge-days.today { background: var(--today); }
.badge-days.soon { background: var(--soon); }
.badge-days.upcoming { background: var(--upcoming); }

/* Row 1: due-date pill + countdown on the left, the mark-paid/log form
   pinned to the right, as its own group separate from Edit/Delete. */
.bill-header-row {
  display: flex;
  align-items: flex-start;
  gap: 6px 12px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 140px;
  min-width: 0;
}

.header-left .badge-duedate {
  flex-shrink: 0;
  margin-bottom: 0;
}

.header-left .countdown {
  min-width: 0;
}

.complete-form-row {
  display: flex;
  justify-content: center;
}

.complete-form {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* Row 1: due-date pill + name on the left, amount pinned right. */
.bill-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}

.bill-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.bill-title-group .badge-duedate,
.bill-title-group .badge-recurrence,
.bill-title-group .badge-autopay {
  flex-shrink: 0;
  margin-bottom: 0;
}

/* "Recently Paid" cards reuse .bill-top with name/countdown/amount as
   three direct children (no due-date-pill row), so let the countdown
   shrink/wrap instead of forcing an overflow. */
.bill-top .countdown {
  min-width: 0;
  flex-shrink: 1;
}

/* The name's flex-basis:0% (from .bill-name's flex:1) means it reports
   zero size toward the wrap decision, so the countdown+amount could
   squeeze it down to nothing instead of wrapping to their own line.
   Giving it a real flex-basis here makes the wrap trigger correctly. */
.bill-top-paid .bill-name {
  flex: 1 1 100px;
}

.bill-top .amount {
  flex-shrink: 0;
}

/* Smaller top-line text on narrow screens so the bill/expense name has
   more room before it has to truncate with an ellipsis. */
@media (max-width: 480px) {
  .bill-name { font-size: 0.82rem; }
  .bill-top .amount { font-size: 0.85rem; }
  .bill-title-group .badge-duedate,
  .bill-title-group .badge-days,
  .bill-title-group .badge-recurrence,
  .bill-title-group .badge-autopay { font-size: 0.66rem; padding: 2px 6px; }
  .header-left .countdown { font-size: 0.78rem; }
}

.amount { font-size: 1.1rem; font-weight: 700; text-align: right; }

.cred-box {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cred-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
}

.cred-label { color: var(--muted); min-width: 60px; }
.cred-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem;
  word-break: break-all;
}

.icon-btn {
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text);
  border-radius: 6px;
  width: 26px;
  height: 26px;
  padding: 0;
  line-height: 1;
  font-size: 0.85rem;
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.empty-state {
  text-align: center;
  padding: 48px 16px;
  color: var(--muted);
}

form.bill-form {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
  max-width: 760px;
  margin: 0 auto;
}

form.bill-form .full { grid-column: 1 / -1; }

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

form.bill-form label { font-size: 0.85rem; color: var(--muted); display: block; margin-bottom: 4px; }
form.bill-form > div, form.bill-form > .full {
  min-width: 0;
}

form.bill-form input, form.bill-form select, form.bill-form textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background-color: var(--bg);
  color: var(--text);
  font-size: 0.95rem;
}

form.bill-form input[type="date"] {
  text-align: left;
  -webkit-appearance: none;
  appearance: none;
}

form.bill-form select {
  padding-right: 30px;
  appearance: none;
  -webkit-appearance: none;
  background-image: var(--select-arrow);
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 11px 7px;
}

.checkbox-row { display: flex; align-items: center; gap: 8px; }
form.bill-form .checkbox-row input { width: auto; }

.login-wrap {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 100vh;
  padding-top: 12vh;
}

.login-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px;
  width: 320px;
  text-align: center;
}

.error-text { color: var(--overdue); font-size: 0.85rem; }

.section-title {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 24px 0 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.section-heading {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 24px 0 10px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-heading .icon { display: inline-flex; align-items: center; flex-shrink: 0; }

.section-heading-overdue { color: var(--overdue); }

.bill-card.paid { border-left-color: var(--upcoming); background: var(--upcoming-bg); opacity: 0.85; }

.confetti-piece {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--size);
  height: var(--size);
  background: var(--color);
  pointer-events: none;
  z-index: 1000;
  animation: confetti-burst var(--duration) cubic-bezier(0.15, 0.6, 0.3, 1) forwards;
}

.confetti-piece.round { border-radius: 50%; }

@keyframes confetti-burst {
  0% { transform: translate(-50%, -50%) rotate(0deg); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)); opacity: 0; }
}