:root {
  /* Light mode (DLR-110 design tokens) */
  --bg:             #F8FAFC;
  --surface:        #FFFFFF;
  --surface-2:      #F1F5F9;
  --border:         #E2E8F0;
  --text:           #0F172A;
  --muted:          #64748B;
  --accent:         #3B82F6;
  --accent-strong:  #2563EB;
  --danger:         #EF4444;
  --danger-bg:      #FEF2F2;
  --warn:           #B45309; /* amber-700 for AA contrast on --warn-bg */
  --warn-strong:    #F59E0B;
  --warn-bg:        #FFFBEB;
  --ok:             #10B981;
  --ok-bg:          #ECFDF5;
  --shadow:         0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:      0 4px 12px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06);
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-full: 999px;
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s8: 32px;
  --s12: 48px;
  font-size: 16px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:             #0B1220;
    --surface:        #131C2E;
    --surface-2:      #1A2540;
    --border:         #243154;
    --text:           #E6EBF5;
    --muted:          #94A3C4;
    --accent:         #4F8CFF;
    --accent-strong:  #3A78F0;
    --danger:         #FF5D6C;
    --danger-bg:      rgba(255,93,108,0.14);
    --warn:           #F4A73D;
    --warn-strong:    #F4A73D;
    --warn-bg:        rgba(244,167,61,0.14);
    --ok:             #2DD4A7;
    --ok-bg:          rgba(45,212,167,0.14);
    --shadow:         0 6px 20px rgba(0,0,0,0.35);
    --shadow-md:      0 12px 32px rgba(0,0,0,0.45);
  }
}

[data-theme="dark"] {
  --bg:             #0B1220;
  --surface:        #131C2E;
  --surface-2:      #1A2540;
  --border:         #243154;
  --text:           #E6EBF5;
  --muted:          #94A3C4;
  --accent:         #4F8CFF;
  --accent-strong:  #3A78F0;
  --danger:         #FF5D6C;
  --danger-bg:      rgba(255,93,108,0.14);
  --warn:           #F4A73D;
  --warn-strong:    #F4A73D;
  --warn-bg:        rgba(244,167,61,0.14);
  --ok:             #2DD4A7;
  --ok-bg:          rgba(45,212,167,0.14);
  --shadow:         0 6px 20px rgba(0,0,0,0.35);
  --shadow-md:      0 12px 32px rgba(0,0,0,0.45);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

body {
  padding: env(safe-area-inset-top) env(safe-area-inset-right) calc(env(safe-area-inset-bottom) + 16px) env(safe-area-inset-left);
}

.topbar {
  position: sticky;
  top: env(safe-area-inset-top);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.topbar h1 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: 0.1px; }
.topbar-actions { display: flex; gap: 8px; align-items: center; }
.icon-btn {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  border-radius: var(--r-full);
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }

.summary {
  padding: 12px 16px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.summary .card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
}
.summary .label { font-size: 12px; color: var(--muted); }
.summary .value { font-size: 18px; font-weight: 600; margin-top: 2px; }
.summary .value.danger { color: var(--danger); }

.segmented {
  display: flex;
  gap: 4px;
  margin: 12px 16px 0;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.seg {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--muted);
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.seg.active {
  background: var(--accent);
  color: white;
}

.hidden { display: none !important; }

.tabs {
  display: flex;
  gap: 6px;
  padding: 12px 16px 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 0 0 auto;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  border: 1px solid var(--border);
  font-size: 14px;
  cursor: pointer;
}
.tab.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.inline-search {
  padding: 10px 16px 0;
}

.inline-search input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  padding: 10px 12px;
  font-size: 14px;
}

.inline-search input::placeholder {
  color: var(--muted);
}

.list {
  padding: 12px 16px calc(env(safe-area-inset-bottom) + 88px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bill {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  align-items: center;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform 0.1s ease-out, box-shadow 0.15s ease-out, background-color 0.15s ease-out;
}
.bill:hover { box-shadow: var(--shadow-md); }
.bill:active { transform: scale(0.997); }
.bill .name { font-weight: 600; font-size: 16px; }
.bill .meta { color: var(--muted); font-size: 13px; grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.bill .amount { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 18px; }
.payment-link-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--accent);
  cursor: pointer;
  line-height: 1;
}
.payment-link-chip:hover { color: var(--accent-strong); border-color: var(--accent); }
.payment-link-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bill .pill {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 700;
}
.bill.overdue { border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); }
.bill.overdue .pill { background: var(--danger-bg); color: var(--danger); }
.bill.due_soon .pill { background: var(--warn-bg); color: var(--warn); }
.bill.upcoming .pill { background: var(--surface-2); color: var(--accent); }
.bill.archived { opacity: 0.85; }
.bill.archived .pill { background: var(--ok-bg); color: var(--ok); }

.bill.income .amount { color: var(--ok); }
.bill.income.awaiting .pill { background: var(--warn-bg); color: var(--warn); }
.bill.income.today .pill,
.bill.income.soon .pill { background: var(--ok-bg); color: var(--ok); }
.bill.income.scheduled .pill { background: var(--surface-2); color: var(--accent); }
.bill.income.archived .pill { background: var(--surface-2); color: var(--muted); }

.summary .value.ok { color: var(--ok); }
.summary .value.warn { color: var(--warn); }

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

button {
  font: inherit;
  cursor: pointer;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  padding: 10px 14px;
}
button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
  font-weight: 600;
}
button.primary:hover { background: var(--accent-strong); }
button.danger { background: rgba(255,93,108,0.14); color: var(--danger); border-color: rgba(255,93,108,0.3); }
button.ghost { background: transparent; color: var(--muted); border-color: transparent; }
button.big { padding: 14px; font-size: 16px; }

dialog {
  border: none;
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--text);
  padding: 0;
  width: min(420px, calc(100vw - 24px));
  box-shadow: 0 20px 60px rgba(0,0,0,0.18), 0 8px 16px rgba(0,0,0,0.10);
}
[data-theme="dark"] dialog { box-shadow: 0 20px 60px rgba(0,0,0,0.55); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) dialog { box-shadow: 0 20px 60px rgba(0,0,0,0.55); }
}
dialog::backdrop { background: rgba(15,23,42,0.45); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }

#billForm {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
}
#billForm h2 { margin: 0 0 4px; font-size: 18px; }
#billForm label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}
#billForm input, #billForm select, #billForm textarea {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--r-md);
  padding: 14px 12px;
  min-height: 48px;
  font-size: 16px;
  font-family: inherit;
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}
#billForm input:focus, #billForm select:focus, #billForm textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
#billForm textarea { resize: vertical; }

#incomeForm {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
}
#incomeForm h2 { margin: 0 0 4px; font-size: 18px; }
#incomeForm label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}
#incomeForm input, #incomeForm select, #incomeForm textarea {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--r-md);
  padding: 14px 12px;
  min-height: 48px;
  font-size: 16px;
  font-family: inherit;
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}
#incomeForm input:focus, #incomeForm select:focus, #incomeForm textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
#incomeForm textarea { resize: vertical; }

#budgetForm {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
}
#budgetForm h2 { margin: 0 0 4px; font-size: 18px; }
#budgetForm label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}
#budgetForm input, #budgetForm select, #budgetForm textarea {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--r-md);
  padding: 14px 12px;
  min-height: 48px;
  font-size: 16px;
  font-family: inherit;
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}
#budgetForm input:focus, #budgetForm select:focus, #budgetForm textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
#budgetForm textarea { resize: vertical; }

.form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }

.action-sheet {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
}
.action-sheet h2 { margin: 0; font-size: 18px; }
.action-sheet .muted { margin: 0 0 6px; color: var(--muted); font-size: 14px; }
.action-history {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.action-history.hidden { display: none; }
.action-history-head {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.action-history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.action-history-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 8px;
  align-items: baseline;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
.action-history-row:first-child {
  border-top: 0;
  padding-top: 0;
}
.action-history-date {
  font-size: 13px;
  color: var(--text);
}
.action-history-meta {
  font-size: 12px;
  color: var(--muted);
}
.action-history-amt {
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 88px);
  transform: translate(-50%, 20px);
  background: #0F172A;
  color: #F8FAFC;
  border: 1px solid #1E293B;
  padding: 10px 16px;
  border-radius: var(--r-md);
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
  z-index: 60;
  max-width: calc(100vw - 32px);
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow-md);
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.category-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.category-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 2px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}

.category-heading .cat-total {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--text);
}

.category-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 8px;
}

.crunch-banner {
  margin: 10px 16px 0;
  padding: 12px 14px;
  background: var(--warn-bg);
  border: 1px solid color-mix(in srgb, var(--warn-strong) 45%, var(--border));
  border-radius: var(--r-md);
  color: var(--warn);
  font-size: 13px;
  line-height: 1.5;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: baseline;
}
.crunch-banner .crunch-icon { font-size: 16px; flex-shrink: 0; }
.crunch-banner .crunch-label { font-weight: 700; flex-shrink: 0; }
.crunch-banner .crunch-week { display: block; font-size: 13px; color: inherit; }
.crunch-banner .crunch-week strong { color: inherit; }

.timeline {
  margin: 12px 16px 0;
}
.timeline.hidden { display: none; }
.tl-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
}
.tl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.tl-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.tl-legend {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--muted);
}
.tl-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tl-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--muted);
}
.tl-dot.ok { background: var(--ok); }
.tl-dot.warn { background: var(--warn); }
.tl-dot.danger { background: var(--danger); }
.tl-chart {
  width: 100%;
  overflow: hidden;
}
.tl-svg {
  display: block;
  width: 100%;
  height: 168px;
}
.tl-col { cursor: pointer; }
.tl-col .tl-hit { transition: fill 0.15s; }
.tl-col:hover .tl-hit { fill: rgba(255, 255, 255, 0.04); }
.tl-col.tl-selected .tl-hit { fill: rgba(79, 140, 255, 0.14); }
.tl-detail {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tl-detail.muted { color: var(--muted); border-top: none; padding-top: 4px; }
.tl-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  margin-bottom: 2px;
}
.tl-detail-net.ok { color: var(--ok); }
.tl-detail-net.danger { color: var(--danger); }
.tl-detail-row {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
}
.tl-detail-row .muted { color: var(--muted); }
.tl-detail-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 2px 0 6px 14px;
  padding-left: 8px;
  border-left: 1px solid var(--border);
}
.tl-detail-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: baseline;
  font-size: 13px;
  padding: 2px 0;
}
.tl-detail-item-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}
.tl-detail-item-date { font-size: 12px; font-variant-numeric: tabular-nums; }
.tl-detail-item-amt {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text);
}
.tl-detail-item-amt.ok { color: var(--ok); }

@media (min-width: 720px) {
  .summary { grid-template-columns: repeat(3, 1fr); }
}

/* Budgets */
.bill.budget {
  grid-template-columns: 1fr auto;
}
.budget-bar {
  grid-column: 1 / -1;
  position: relative;
  height: 10px;
  background: var(--surface-2);
  border-radius: var(--r-full);
  overflow: hidden;
  margin-top: 8px;
}
.budget-fill {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.2s;
}
.budget-fill.warning { background: var(--warn); }
.budget-fill.over { background: var(--danger); }
.budget-fill.ok { background: var(--ok); }
.budget-fill.unset { background: var(--muted); }
.budget-over {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  background: repeating-linear-gradient(135deg, rgba(255,93,108,0.6), rgba(255,93,108,0.6) 4px, rgba(255,93,108,0.3) 4px, rgba(255,93,108,0.3) 8px);
  border-top-right-radius: 999px;
  border-bottom-right-radius: 999px;
}
.bill.budget.over .pill { background: var(--danger-bg); color: var(--danger); }
.bill.budget.warning .pill { background: var(--warn-bg); color: var(--warn); }
.bill.budget.ok .pill { background: var(--ok-bg); color: var(--ok); }
.bill.budget.unset .pill { background: var(--surface-2); color: var(--muted); }

.forecast-event { cursor: default; }
.forecast-event .pill { text-transform: uppercase; letter-spacing: 0.5px; font-size: 11px; padding: 2px 8px; border-radius: 999px; font-weight: 700; }
.forecast-event .pill.bill { background: var(--danger-bg); color: var(--danger); }
.forecast-event .pill.paycheck { background: var(--ok-bg); color: var(--ok); }
.forecast-event .amount.forecast-in { color: var(--ok); }
.forecast-event .amount.forecast-out { color: var(--danger); }
.forecast-event .forecast-balance { font-variant-numeric: tabular-nums; font-weight: 600; margin-left: auto; }
.forecast-event .forecast-balance.ok { color: var(--ok); }
.forecast-event .forecast-balance.warn { color: var(--warn); }
.forecast-event .forecast-balance.danger { color: var(--danger); }
.forecast-event.forecast-flag { border-color: var(--danger); box-shadow: 0 0 0 1px color-mix(in srgb, var(--danger) 50%, transparent), var(--shadow); }
.forecast-alert { border-color: var(--danger) !important; }

#balanceForm {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
}
#balanceForm h2 { margin: 0 0 4px; font-size: 18px; }
#balanceForm label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}
#balanceForm input, #balanceForm select, #balanceForm textarea {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--r-md);
  padding: 14px 12px;
  min-height: 48px;
  font-size: 16px;
  font-family: inherit;
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}
#balanceForm input:focus, #balanceForm select:focus, #balanceForm textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
#balanceForm textarea { resize: vertical; }
#balanceForm p.muted { color: var(--muted); font-size: 13px; }

/* DLR-105: Monthly payment history chart */
.history-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.history-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.history-title { font-weight: 600; font-size: 15px; }
.history-sub { font-size: 12px; }
.history-total {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 18px;
}
.hc-svg {
  width: 100%;
  height: auto;
  max-height: 240px;
  display: block;
}
.hc-grid {
  stroke: var(--border);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  opacity: 0.55;
}
.hc-ytick, .hc-xtick {
  fill: var(--muted);
  font-size: 11px;
  font-family: inherit;
}
.hc-bar rect {
  fill: var(--accent);
  transition: fill 0.15s;
}
.hc-bar.hc-current rect { fill: var(--accent-strong); }
.hc-bar.hc-empty rect { fill: var(--border); }
.hc-bar:hover rect { fill: var(--accent-strong); }
.history-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.history-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.history-stat .muted { font-size: 11px; }
.history-stat-val {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 15px;
}

/* ============================================================
   DLR-111: New components from DLR-110 design system
   ============================================================ */

/* --- Bottom navigation -------------------------------------- */
.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -4px 12px rgba(0,0,0,0.05);
}
.nav-tab {
  position: relative;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 4px 10px;
  min-height: 56px;
  cursor: pointer;
  border-radius: 0;
  transition: color 0.15s;
}
.nav-tab:hover { color: var(--text); }
.nav-tab svg { width: 22px; height: 22px; flex-shrink: 0; }
.nav-tab.active { color: var(--accent); }
.nav-tab.active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 24%;
  right: 24%;
  height: 2px;
  background: var(--accent);
  border-radius: 0 0 2px 2px;
}

/* --- Home view ---------------------------------------------- */
.home-view {
  padding: 16px 16px calc(env(safe-area-inset-bottom) + 88px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.home-view.hidden { display: none; }

/* Hero balance card */
.hero-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px 20px 18px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.hero-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
}
.hero-label.refreshing::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-left: 6px;
  background: var(--muted);
  animation: hero-refresh-pulse 1.1s ease-in-out infinite;
  vertical-align: middle;
}
@keyframes hero-refresh-pulse {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 1; }
}
.hero-balance {
  font-size: 36px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
  line-height: 1.1;
}
.hero-balance.empty { color: var(--muted); font-size: 22px; font-weight: 500; }
.hero-balance.danger { color: var(--danger); }

.hero-accounts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.hero-acct-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  background: transparent;
  border: 0;
  padding: 4px 0;
  cursor: pointer;
  text-align: left;
  width: 100%;
  font: inherit;
  color: inherit;
}
.hero-acct-row:hover { background: var(--surface-2); border-radius: 4px; }
.hero-acct-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.hero-savings-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
}
.hero-savings-head .hero-acct-mask { text-transform: none; letter-spacing: 0; font-weight: 400; }
.hero-acct-name {
  color: var(--text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hero-acct-mask {
  color: var(--muted);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  margin-left: 2px;
}
.hero-acct-amt {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.hero-acct-amt.danger { color: var(--danger); }

/* Home section divider */
.home-section { display: flex; flex-direction: column; gap: 10px; }
.home-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0 2px 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.home-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.home-section-title .section-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
}
.home-section-title .section-dot.danger { background: var(--danger); }
.home-section-title .section-dot.warn { background: var(--warn); }
.home-section-title .section-dot.accent { background: var(--accent); }
.home-section-title .section-dot.ok { background: var(--ok); }
.home-section-total {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--text);
  font-weight: 600;
}

/* Inline pay button on bill rows */
.bill-pay-btn {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  background: var(--ok-bg);
  color: var(--ok);
  border: 1px solid color-mix(in srgb, var(--ok) 35%, var(--border));
  border-radius: var(--r-full);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background-color 0.15s, border-color 0.15s, transform 0.1s;
  cursor: pointer;
}
.bill-pay-btn:hover { background: color-mix(in srgb, var(--ok) 18%, var(--ok-bg)); }
.bill-pay-btn:active { transform: scale(0.97); }
.bill.has-inline-pay { grid-template-columns: 1fr auto auto; column-gap: 12px; }
.bill.has-inline-pay .amount { grid-column: 2; }
.bill.has-inline-pay .meta { grid-column: 1 / -1; }
.bill.flash-paid { background: var(--ok-bg) !important; }

/* Empty home section */
.home-empty {
  padding: 18px 16px;
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
  color: var(--muted);
  text-align: center;
  font-size: 13px;
}

/* --- Forecast summary card ---------------------------------- */
.forecast-low-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 16px;
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  align-items: center;
  margin-bottom: 12px;
}
.forecast-low-card.danger { border-color: color-mix(in srgb, var(--danger) 50%, var(--border)); }
.forecast-low-card.warn { border-color: color-mix(in srgb, var(--warn-strong) 50%, var(--border)); }
.forecast-low-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
}
.forecast-low-value {
  font-size: 28px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Forecast tab supporting cards grid (2x2 wrapper around .summary cards) */
.forecast-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.forecast-low-value.danger { color: var(--danger); }
.forecast-low-value.warn { color: var(--warn); }
.forecast-low-value.ok { color: var(--ok); }
.forecast-low-meta {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 13px;
}

/* --- Summary card refresh (light-mode polish) --------------- */
.summary { padding-top: 16px; gap: 10px; }
.summary .card {
  border-radius: var(--r-md);
  padding: 12px 14px;
  box-shadow: var(--shadow);
  transition: box-shadow 0.15s;
}
.summary .card:hover { box-shadow: var(--shadow-md); }
.summary .label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--muted);
}
.summary .value { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 4px; }
.summary .value.ok { color: var(--ok); }
.summary .value.warn { color: var(--warn); }
.summary .value.danger { color: var(--danger); }

/* --- Pill polish -------------------------------------------- */
.bill .pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.bill .pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* --- Tabs (top filter chips) refresh ------------------------ */
.tab {
  background: var(--surface);
  color: var(--muted);
  border: 1px solid var(--border);
  font-weight: 500;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.tab.active {
  background: var(--accent);
  color: #FFFFFF;
  border-color: var(--accent);
  font-weight: 600;
}

/* --- Buttons polish ---------------------------------------- */
button {
  border-radius: var(--r-md);
  transition: background-color 0.15s, border-color 0.15s, transform 0.1s;
  min-height: 40px;
}
button:active { transform: scale(0.98); }
button.primary { box-shadow: 0 1px 2px color-mix(in srgb, var(--accent) 35%, transparent); }
button.primary:hover { background: var(--accent-strong); }
button.big { min-height: 48px; padding: 14px; font-size: 16px; font-weight: 600; }
button.danger { background: var(--danger-bg); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); }
button.danger:hover { background: color-mix(in srgb, var(--danger) 14%, var(--danger-bg)); }
button.ghost { background: transparent; color: var(--muted); border-color: transparent; }
button.ghost:hover { background: var(--surface-2); color: var(--text); }

/* --- Action sheet polish ----------------------------------- */
.action-sheet { gap: 10px; padding: 22px 18px; }
.action-sheet button { min-height: 48px; }

/* ============================================================
   DLR-115: Home rework, crunch warning, Forecast richness
   ============================================================ */

/* Module 2: Safe to Spend card */
.sts-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sts-card.ok  { border-left-color: var(--ok); }
.sts-card.danger { border-left-color: var(--danger); }
.sts-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.sts-floor-btn {
  background: transparent;
  border: 0;
  font-size: 14px;
  opacity: 0.5;
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
  color: var(--muted);
}
.sts-floor-btn:hover { opacity: 1; }
.sts-surplus {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--ok) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--ok) 35%, var(--border));
  border-radius: var(--r-md);
  font-size: 13px;
  line-height: 1.4;
  color: var(--text);
}
.sts-surplus-emoji { font-size: 16px; line-height: 1; }
.sts-surplus-text strong { color: var(--ok); font-variant-numeric: tabular-nums; }
.sts-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
}
.sts-value {
  font-size: 32px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
}
.sts-value.ok     { color: var(--ok); }
.sts-value.danger { color: var(--danger); }
.sts-value.muted  { color: var(--muted); }
.sts-explainer {
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.5;
}

/* Module 3: Date strip */
.date-strip-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px 16px 12px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.date-strip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.date-strip-legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
}
.date-strip-legend-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.date-strip {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 -4px;
}
.date-strip::-webkit-scrollbar { display: none; }
.date-strip-item {
  flex: 0 0 auto;
  width: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  border-radius: var(--r-sm);
  background: transparent;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: default;
}
.date-strip-item.has-events { cursor: pointer; }
.date-strip-item.has-events:hover { background: var(--surface-2); }
.date-strip-item.today { background: var(--surface-2); }
.date-strip-item.selected { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); box-shadow: inset 0 0 0 1px var(--accent); }
.date-strip-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.date-strip-day {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--muted);
}
.date-strip-date {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.date-strip-item.today .date-strip-date { color: var(--accent); }
.date-strip-dots {
  display: flex;
  gap: 3px;
  min-height: 10px;
  align-items: center;
  justify-content: center;
}
.date-strip-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.date-strip-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
}
.date-strip-skeleton {
  background: var(--surface-2);
  border-radius: 3px;
  display: inline-block;
}
.date-strip-detail {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.date-strip-detail-head {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.date-strip-detail-empty { font-size: 13px; color: var(--muted); }
.date-strip-detail-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 8px;
  background: var(--surface-2);
  border: 0;
  border-radius: var(--r-sm);
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.date-strip-detail-item:hover { background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); }
.date-strip-detail-name {
  font-size: 14px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.date-strip-detail-amt {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 14px;
}
.date-strip-detail-amt.ok { color: var(--ok); }
.date-strip-detail-amt.danger { color: var(--danger); }

/* Crunch banner enhancements */
.crunch-banner.crunch-interrupt {
  border-left: 4px solid var(--warn-strong);
  padding-left: 12px;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 10px;
}
.crunch-banner.crunch-danger {
  background: var(--danger-bg);
  border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
  border-left: 4px solid var(--danger);
  color: var(--danger);
}
.crunch-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.crunch-cta {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: var(--r-full);
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 600;
  color: inherit;
  cursor: pointer;
  min-height: 32px;
  align-self: flex-start;
  transition: background-color 0.15s;
}
.crunch-cta:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.crunch-banner .crunch-label { font-size: 14px; }
.crunch-banner .crunch-icon  { font-size: 16px; }

/* Module 4: Forecast snapshot link (home) */
.forecast-snap-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  background: transparent;
  border: none;
  padding: 4px 0;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  border-radius: var(--r-sm);
}
.forecast-snap-link:hover { color: var(--accent-strong); }

/* Module 4: danger border-left on forecast-low-card */
.forecast-low-card.danger {
  border-color: color-mix(in srgb, var(--danger) 50%, var(--border));
  border-left: 4px solid var(--danger);
}

/* Forecast tab: Hero card */
.forecast-hero-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
  box-shadow: var(--shadow-md);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 12px;
  grid-column: 1 / -1;
}
.forecast-hero-card.warn {
  border-color: color-mix(in srgb, var(--warn-strong) 50%, var(--border));
}
.forecast-hero-card.danger {
  border-color: color-mix(in srgb, var(--danger) 50%, var(--border));
  border-left: 4px solid var(--danger);
}
.forecast-hero-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
}
.forecast-hero-horizon {
  font-size: 11px;
  color: var(--muted);
  text-align: right;
}
.forecast-hero-subtext {
  font-size: 13px;
  color: var(--muted);
  grid-column: 1 / -1;
}
.forecast-hero-value {
  font-size: 28px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.forecast-hero-value.ok     { color: var(--ok); }
.forecast-hero-value.warn   { color: var(--warn); }
.forecast-hero-value.danger { color: var(--danger); }
.forecast-hero-date {
  font-size: 13px;
  color: var(--muted);
  text-align: right;
  align-self: center;
}

/* Forecast tab: Sparkline card */
.forecast-sparkline {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 16px;
  box-shadow: var(--shadow);
  grid-column: 1 / -1;
}
.forecast-sparkline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.forecast-sparkline-header > :first-child {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
}
.forecast-sparkline-header > :last-child {
  font-size: 11px;
  color: var(--muted);
}
.forecast-sparkline-svg {
  display: block;
  width: 100%;
  height: 96px;
  margin-top: 10px;
}
@media (min-width: 720px) {
  .forecast-sparkline-svg { height: 120px; }
}

/* Forecast meta cards: reduced value size to signal secondary */
.forecast-meta-card .value { font-size: 18px !important; }

/* Forecast tab: 3-column event rows (v2) */
.bill.forecast-event-v2 {
  grid-template-columns: 52px 1fr auto;
  align-items: start;
  column-gap: 10px;
  cursor: default;
}
.forecast-date-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 1px;
}
.forecast-date-day {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  line-height: 1.2;
}
.forecast-date-weekday {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.forecast-name-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.forecast-amount-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}
.forecast-event-amount {
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.forecast-balance-sub {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  white-space: nowrap;
}

/* Desktop home: cap width */
@media (min-width: 720px) {
  .home-view { max-width: 600px; margin: 0 auto; }
}

/* --- Reduced motion ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* === DLR-116: Bills, Income, Budgets refresh ============================ */

/* Hero summary card — single dominant number per view */
.summary .hero-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: box-shadow 0.15s;
}
.summary .hero-card:hover { box-shadow: var(--shadow-md); }
.summary .hero-card.ok     { border-left-color: var(--ok); }
.summary .hero-card.warn   { border-left-color: var(--warn-strong); }
.summary .hero-card.danger { border-left-color: var(--danger); }
.summary .hero-card .label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
}
.summary .hero-card .value {
  font-size: 32px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
  line-height: 1.1;
  margin-top: 2px;
  color: var(--text);
}
.summary .hero-card .value.ok     { color: var(--ok); }
.summary .hero-card .value.warn   { color: var(--warn); }
.summary .hero-card .value.danger { color: var(--danger); }
.summary .hero-card .explainer {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--muted);
}

/* Budgets: full-width progress bar inside hero */
.hero-progress {
  display: block;
  position: relative;
  height: 10px;
  background: var(--surface-2);
  border-radius: var(--r-full);
  overflow: hidden;
  margin-top: 8px;
}
.hero-progress .fill {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.2s;
}
.hero-progress .fill.ok      { background: var(--ok); }
.hero-progress .fill.warn    { background: var(--warn-strong); }
.hero-progress .fill.danger  { background: var(--danger); }
.hero-progress .over {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  background: repeating-linear-gradient(
    135deg,
    color-mix(in srgb, var(--danger) 60%, transparent),
    color-mix(in srgb, var(--danger) 60%, transparent) 4px,
    color-mix(in srgb, var(--danger) 30%, transparent) 4px,
    color-mix(in srgb, var(--danger) 30%, transparent) 8px
  );
  border-top-right-radius: 999px;
  border-bottom-right-radius: 999px;
}

/* Stronger left-border accents on bill / paycheck rows */
.bill.overdue {
  border-left: 4px solid var(--danger);
  padding-left: 13px;
}
.bill.due_soon {
  border-left: 3px solid var(--warn-strong);
  padding-left: 14px;
}
.bill.income.today,
.bill.income.soon {
  border-left: 3px solid var(--ok);
  padding-left: 14px;
}
.bill.income.awaiting {
  border-left: 3px solid var(--warn-strong);
  padding-left: 14px;
}

/* Crunch-week inline tag in bill row meta */
.bill .crunch-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--warn);
  background: var(--warn-bg);
  padding: 2px 8px;
  border-radius: 999px;
}
.bill .crunch-tag::before {
  content: "▲";
  font-size: 9px;
  line-height: 1;
}

/* Budgets: bigger bar + clearer status chip */
.bill.budget .budget-bar { height: 12px; margin-top: 10px; }
.bill.budget .budget-status {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.bill.budget .budget-status.ok     { color: var(--ok); }
.bill.budget .budget-status.warn   { color: var(--warn); }
.bill.budget .budget-status.danger { color: var(--danger); }
.bill.budget .budget-status.muted  { color: var(--muted); font-weight: 400; }

/* Cap summary grid alignment on desktop — keep hero full-width, sub cards 2-up */
@media (min-width: 720px) {
  .summary .hero-card[style*="grid-column: 1 / -1"] {
    /* Inline style already spans the row; nothing more needed. */
  }
}

/* DLR-132: CSV import card */
.csv-import-card {
  margin: 16px 12px 24px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--text);
}
.csv-import-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.csv-import-label { display: flex; flex-direction: column; gap: 2px; flex: 1 1 220px; min-width: 0; }
.csv-import-label .muted { font-size: 0.85em; }
.csv-import-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.csv-import-actions a { font-size: 0.9em; }
.csv-import-result { font-size: 0.95em; line-height: 1.4; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); color: var(--text); }
.csv-import-result.hidden { display: none; }
.csv-import-errors { margin-top: 6px; }
.csv-import-errors ul { margin: 4px 0 0 1.2em; padding: 0; }
.csv-import-errors li { font-size: 0.85em; color: var(--danger, #b91c1c); }

/* === DLR-131: month-over-month spending deltas === */
.history-delta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px;
  margin: 8px 0 4px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  flex-wrap: wrap;
}
.history-delta .history-delta-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
}
.history-delta .history-delta-cur { font-weight: 600; }
.history-delta .history-delta-val {
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
}
.history-delta.delta-up   .history-delta-val { color: var(--danger); }
.history-delta.delta-down .history-delta-val { color: var(--ok); }
.history-delta.delta-flat .history-delta-val { color: var(--muted); }

.cat-compare-card {
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: var(--r-md);
  padding: 12px 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
  margin-bottom: 12px;
  display: grid;
  gap: 6px;
}
.cat-compare-card.delta-up   { border-left-color: var(--danger); }
.cat-compare-card.delta-down { border-left-color: var(--ok); }
.cat-compare-card.delta-flat { border-left-color: var(--border); }
.cat-compare-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.cat-compare-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
}
.cat-compare-delta {
  font-weight: 800;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cat-compare-card.delta-up   .cat-compare-delta { color: var(--danger); }
.cat-compare-card.delta-down .cat-compare-delta { color: var(--ok); }
.cat-compare-card.delta-flat .cat-compare-delta { color: var(--muted); }
.cat-compare-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  gap: 12px;
  flex-wrap: wrap;
}
.cat-compare-row .muted { color: var(--muted); }

.category-heading .cat-heading-right {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}

.cat-delta-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  color: var(--muted);
  white-space: nowrap;
  text-transform: none;
}
.cat-delta-chip.delta-up   { background: var(--danger-bg); color: var(--danger); }
.cat-delta-chip.delta-down { background: var(--ok-bg); color: var(--ok); }
.cat-delta-chip.delta-flat { background: var(--surface-2); color: var(--muted); }

@media (max-width: 380px) {
  .cat-delta-chip { font-size: 10px; padding: 2px 6px; }
  .cat-compare-row { flex-direction: column; gap: 2px; }
}