:root {
  --bg: #090b0d;
  --surface: #101419;
  --surface-raised: #171c22;
  --line: #29313a;
  --line-bright: #3a4652;
  --text: #e7edf2;
  --muted: #8c99a5;
  --green: #65d69e;
  --red: #ff756f;
  --amber: #e8c36a;
  --cyan: #63c5da;
  --mono: "Iosevka", "SFMono-Regular", Consolas, monospace;
  --sans: Inter, ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    linear-gradient(rgba(99, 197, 218, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99, 197, 218, 0.025) 1px, transparent 1px),
    var(--bg);
  background-size: 32px 32px;
  font-family: var(--sans);
}

.auth-required .topbar nav { display: none; }
.auth-panel { max-width: 30rem; margin: 12vh auto; border: 1px solid var(--line); padding: 2rem; background: var(--surface-raised); }
.auth-form { display: grid; gap: 1rem; }
.auth-form label { display: grid; gap: .4rem; }
.auth-form input { width: 100%; }
dialog { color: var(--text); background: var(--panel); border: 1px solid var(--border); max-width: 32rem; width: calc(100% - 2rem); }
dialog::backdrop { background: rgb(0 0 0 / 70%); }

a { color: inherit; }
button, input, select { font: inherit; }

.app-shell {
  width: min(1280px, calc(100% - 32px));
  min-height: 100vh;
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.topbar {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--line);
}

.wordmark {
  font: 700 1.05rem var(--mono);
  text-decoration: none;
  letter-spacing: -0.02em;
}

.prompt { color: var(--green); }

nav { display: flex; gap: 8px; }
nav a, .nav-account {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 8px 11px;
  color: var(--muted);
  border: 1px solid transparent;
  background: transparent;
  text-decoration: none;
  font: 600 0.78rem var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.nav-account {
  appearance: none;
  cursor: pointer;
}
nav a:hover, nav a[aria-current="page"], .nav-account:hover {
  color: var(--text);
  border-color: var(--line);
  background: var(--surface);
}
.nav-add {
  flex: 0 0 auto;
  width: 34px;
  min-height: 34px;
  padding: 0;
  color: var(--bg);
  background: var(--green);
  border: 1px solid var(--green);
  cursor: pointer;
  font: 800 1.2rem var(--mono);
}
.nav-add:hover { filter: brightness(1.12); }

main { padding: 44px 0 72px; outline: none; }
footer {
  display: flex;
  justify-content: space-between;
  padding: 18px 0;
  color: var(--muted);
  border-top: 1px solid var(--line);
  font: 0.72rem var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  margin-bottom: 30px;
}
.page-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }

.eyebrow {
  margin: 0 0 8px;
  color: var(--cyan);
  font: 0.72rem var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(2rem, 5vw, 3.7rem); letter-spacing: -0.055em; }
h2 { font-size: 1rem; font-family: var(--mono); letter-spacing: 0.02em; }
.muted { color: var(--muted); }
.mono, .money, time { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.button {
  min-height: 40px;
  padding: 9px 14px;
  color: var(--bg);
  background: var(--green);
  border: 1px solid var(--green);
  cursor: pointer;
  font: 700 0.78rem var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.button:hover { filter: brightness(1.1); }
.button.secondary { color: var(--text); background: transparent; border-color: var(--line-bright); }
.button.danger { color: var(--red); background: transparent; border-color: var(--red); }
.button:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.balance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  margin-bottom: 40px;
}
.balance-cell {
  min-height: 140px;
  padding: 22px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(16, 20, 25, 0.86);
}
.balance-cell .label { color: var(--muted); font: 0.7rem var(--mono); text-transform: uppercase; }
.balance-cell .money { display: block; margin-top: 22px; font-size: 1.55rem; }
.balance-cell.income .money { color: var(--green); }
.balance-cell.expense .money { color: var(--red); }
.metric-cash-flow { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.metric-cash-flow .income { color: var(--green); }
.metric-cash-flow .expense { color: var(--red); }
.balance-cell .metric-cash-flow { margin-top: 22px; font-size: 1.55rem; }
.balance-cell .metric-cash-flow .money { display: inline; margin: 0; font-size: inherit; }

.split { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, 0.8fr); gap: 30px; }
.section-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }

.ledger { border-top: 1px solid var(--line); }
.ledger-row {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) minmax(150px, 220px) 170px;
  gap: 18px;
  align-items: center;
  min-height: 64px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--line);
}
.ledger-row.deletable { grid-template-columns: minmax(130px, 1fr) minmax(150px, 220px) 170px 88px; }
.ledger-row:hover { background: rgba(23, 28, 34, 0.65); }
.ledger-row .primary { min-width: 0; }
.ledger-row .primary strong, .ledger-row .primary span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ledger-row small { color: var(--muted); }
.ledger-row .amount { text-align: right; font: 700 0.95rem var(--mono); }
.ledger-row .amount.positive { color: var(--green); }
.ledger-row .amount.negative { color: var(--red); }
.ledger-row .contribution, .transfer-row .contribution { color: var(--amber); font-family: var(--mono); }

.account-list { border-top: 1px solid var(--line); }
.account-link {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.account-link:hover { background: var(--surface); }

.filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.date-control { position: relative; display: grid; gap: 7px; min-width: 0; color: var(--muted); font: 0.72rem var(--mono); letter-spacing: 0.05em; text-transform: uppercase; }
.date-control-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px; height: 42px; }
.date-step, .date-value, .calendar-nav, .calendar-day {
  appearance: none;
  margin: 0;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-bright);
  border-radius: 0;
  cursor: pointer;
  font-family: var(--mono);
}
.date-step { height: 100%; min-height: 0; padding: 0; color: var(--cyan); line-height: 1; }
.date-value { display: flex; align-items: center; min-width: 0; height: 100%; min-height: 0; padding: 0 10px; border-inline: 0; overflow: hidden; line-height: 1; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.date-value.placeholder { color: var(--muted); }
.date-control.disabled { opacity: 0.48; }
.date-control.compact { width: min(230px, 100%); }
.date-control button:disabled { cursor: not-allowed; }
.date-time-control { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
.date-time-control > .control-label, .date-time-control > .date-control-row, .date-time-control > .time-control { grid-column: 1; }
.time-control { display: grid; grid-template-columns: 66px auto 66px; align-items: center; gap: 5px; }
.date-time-control > .time-control { justify-content: start; }
.time-part { min-width: 0; font-variant-numeric: tabular-nums; }
.calendar-popover {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  left: 0;
  width: min(330px, calc(100vw - 44px));
  padding: 14px;
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--line-bright);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  text-transform: none;
}
.calendar-popover[hidden] { display: none; }
.calendar-header { display: grid; grid-template-columns: 38px 1fr 38px; align-items: center; gap: 8px; margin-bottom: 10px; }
.calendar-month { text-align: center; }
.calendar-nav { min-height: 36px; padding: 0; color: var(--cyan); font-size: 1.2rem; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.calendar-weekday { padding: 5px 0; color: var(--muted); text-align: center; font-size: 0.62rem; text-transform: uppercase; }
.calendar-empty, .calendar-day { min-height: 40px; }
.calendar-day { padding: 0; border-color: transparent; }
.calendar-day:hover { border-color: var(--line-bright); background: var(--surface); }
.calendar-day.today { color: var(--cyan); }
.calendar-day.selected { color: var(--bg); background: var(--green); border-color: var(--green); font-weight: 800; }
.calendar-day:disabled { color: color-mix(in srgb, var(--muted), transparent 55%); cursor: not-allowed; }
.calendar-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.calendar-actions .button { min-height: 34px; padding: 6px 10px; }
.date-pair > .date-control:last-child .calendar-popover, .recurrence-grid > .date-control:last-child .calendar-popover { right: 0; left: auto; }
.combobox { position: relative; }
.combobox-options {
  position: absolute;
  z-index: 18;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  max-height: 230px;
  overflow-y: auto;
  background: var(--surface-raised);
  border: 1px solid var(--line-bright);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}
.combobox-options[hidden] { display: none; }
.combobox-option { display: block; width: 100%; padding: 10px 12px; color: var(--text); background: transparent; border: 0; cursor: pointer; text-align: left; font: 0.78rem var(--mono); }
.combobox-option:hover, .combobox-option.active { color: var(--bg); background: var(--cyan); }

label { display: grid; gap: 7px; color: var(--muted); font: 0.72rem var(--mono); text-transform: uppercase; letter-spacing: 0.05em; }
input, select {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-bright);
  border-radius: 0;
}

dialog {
  width: min(520px, calc(100% - 28px));
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--line-bright);
  padding: 0;
}
dialog::backdrop { background: rgba(0, 0, 0, 0.78); backdrop-filter: blur(4px); }
.dialog-body { padding: 26px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 18px 26px; border-top: 1px solid var(--line); }
.form-grid { display: grid; gap: 16px; }
.budget-preview { padding: 16px; border: 1px solid var(--line-bright); background: rgba(16, 20, 25, 0.7); }
.budget-preview .section-heading { align-items: end; }
.budget-preview h3 { margin: 0; }
.preview-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.preview-metrics > div { min-width: 0; padding: 10px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.preview-metrics .label { display: block; color: var(--muted); font: 0.62rem var(--mono); text-transform: uppercase; }
.preview-metrics .money { display: block; margin-top: 8px; overflow-wrap: anywhere; font: 700 0.82rem var(--mono); }
.preview-occurrences { margin: 14px 0 0; padding-left: 18px; color: var(--muted); font: 0.72rem/1.7 var(--mono); }
.error-box { padding: 12px; color: var(--red); border: 1px solid color-mix(in srgb, var(--red), transparent 50%); font: 0.82rem var(--mono); }
.empty { padding: 36px 0; color: var(--muted); border-block: 1px solid var(--line); }
.loading { color: var(--muted); font-family: var(--mono); }
.status-tag { color: var(--amber); font: 0.68rem var(--mono); text-transform: uppercase; }

.budget-list, .goal-list { border-top: 1px solid var(--line); }
.budget-link, .goal-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 20px 4px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.goal-row { grid-template-columns: minmax(150px, 0.7fr) minmax(280px, 1.3fr) auto; }
.goal-progress { width: 100%; }
.goal-progress .progress-copy { gap: 16px; }
.goal-progress-track { margin-bottom: 8px; }
.goal-remaining { text-align: right; }
.goal-open-ended { min-width: 180px; }
.goal-open-ended .money { display: block; margin-top: 7px; }
.budget-link:hover { background: var(--surface); }
.budget-link strong, .budget-link small, .goal-row strong, .goal-row small { display: block; margin-top: 5px; }
.budget-link-value { text-align: right; }
.budget-link-value small { font-size: 0.7rem; }
.date-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.account-choices { display: grid; gap: 8px; margin: 0; padding: 14px; border: 1px solid var(--line); }
.account-choices legend { padding: 0 7px; color: var(--muted); font: 0.72rem var(--mono); text-transform: uppercase; }
.checkbox-row { display: flex; align-items: center; gap: 10px; color: var(--text); text-transform: none; }
.checkbox-row input { width: 18px; min-height: 18px; accent-color: var(--green); }
.budget-command {
  display: grid;
  grid-template-columns: 1fr minmax(250px, 0.65fr);
  align-items: end;
  gap: 40px;
  margin-bottom: 22px;
  padding: 22px;
  border: 1px solid var(--line-bright);
  background: linear-gradient(105deg, rgba(101, 214, 158, 0.09), rgba(16, 20, 25, 0.8));
}
.dashboard-budget { margin-bottom: 34px; padding: 22px; border: 1px solid var(--line-bright); background: linear-gradient(105deg, rgba(101, 214, 158, 0.08), rgba(16, 20, 25, 0.88)); }
.dashboard-budget .section-heading { align-items: start; }
.dashboard-budget h2 { margin-bottom: 4px; font-size: 1.25rem; }
.dashboard-budget-body { display: grid; grid-template-columns: minmax(230px, 0.8fr) minmax(0, 1.5fr); gap: 32px; padding-top: 20px; border-top: 1px solid var(--line); }
.dashboard-pacing .label, .dashboard-budget-metrics .label { display: block; color: var(--muted); font: 0.68rem var(--mono); text-transform: uppercase; }
.dashboard-pacing strong { display: block; margin: 9px 0; color: var(--green); font-size: clamp(1.7rem, 4vw, 2.7rem); }
.dashboard-budget-metrics { display: grid; grid-template-columns: repeat(2, minmax(130px, 1fr)); gap: 20px; }
.dashboard-budget-metrics .money { display: block; margin-top: 7px; font-size: 1rem; }
.dashboard-budget-metrics .metric-cash-flow { margin-top: 7px; font-size: 1rem; }
.dashboard-budget-metrics .metric-cash-flow .money { display: inline; margin: 0; font-size: inherit; }
.budget-command .label, .goal-row .label { display: block; color: var(--muted); font: 0.68rem var(--mono); text-transform: uppercase; }
.budget-command strong { display: block; margin: 8px 0; color: var(--green); font-size: clamp(1.8rem, 4vw, 3.2rem); }
.progress-copy { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-bottom: 9px; font: 0.72rem var(--mono); text-transform: uppercase; }
.progress-copy span:last-child { text-align: right; }
.progress-track { position: relative; height: 8px; overflow: hidden; background: var(--bg); border: 1px solid var(--line); }
.progress-track span { display: block; height: 100%; background: var(--green); }
.progress-track .bar-primary, .progress-track .bar-reserved { position: absolute; top: 0; bottom: 0; }
.progress-track .bar-primary { left: 0; }
.progress-track .bar-reserved { left: 0; z-index: 1; background: repeating-linear-gradient(135deg, var(--red) 0 4px, color-mix(in srgb, var(--red), transparent 35%) 4px 8px); }
.pacing-bars { display: grid; gap: 15px; }
.progress-track.reversed .bar-primary { right: 0; left: auto; }
.progress-track.time .bar-primary { background: var(--cyan); }
.progress-track.money.warning .bar-primary { background: var(--amber); }
.progress-track.money.behind .bar-primary { background: var(--red); }
.progress-track.money.neutral .bar-primary { background: var(--muted); }
.progress-track.reserved .bar-primary { background: repeating-linear-gradient(135deg, var(--red) 0 4px, color-mix(in srgb, var(--red), transparent 35%) 4px 8px); }

.term-label { display: inline-flex; align-items: center; gap: .35rem; position: relative; }
.term-help { width: 1.1rem; height: 1.1rem; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--muted); font: inherit; font-size: .72rem; line-height: 1; cursor: help; }
.term-help:hover::after, .term-help:focus-visible::after { content: attr(data-help); position: absolute; z-index: 20; left: 0; top: calc(100% + .4rem); width: min(22rem, 75vw); padding: .65rem .75rem; border: 1px solid var(--line); border-radius: .45rem; background: var(--ink); color: var(--paper); box-shadow: 0 .4rem 1rem rgb(0 0 0 / 20%); font-size: .8rem; font-weight: 400; line-height: 1.35; text-transform: none; letter-spacing: normal; }
.budget-command.pacing-warning strong, .dashboard-pacing.pacing-warning strong { color: var(--amber); }
.budget-command.pacing-behind strong, .dashboard-pacing.pacing-behind strong { color: var(--red); }
.budget-command.pacing-neutral strong, .dashboard-pacing.pacing-neutral strong { color: var(--muted); }
.dashboard-budget-body > .pacing-bars { grid-column: 1 / -1; padding-top: 20px; border-top: 1px solid var(--line); }
.balance-cell.focus .money { color: var(--green); }
.balance-cell.reserve .money { color: var(--amber); }
.balance-cell.forecast .money { color: var(--cyan); }
.target-list { border-top: 1px solid var(--line); }
.target-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 16px; min-height: 66px; border-bottom: 1px solid var(--line); }
.target-row strong, .target-row small { display: block; }
.icon-button { padding: 6px; color: var(--muted); background: transparent; border: 0; cursor: pointer; font: 0.68rem var(--mono); text-transform: uppercase; }
.icon-button:hover { color: var(--red); }
.icon-button:disabled { opacity: 0.35; cursor: not-allowed; }
.membership-list { border-top: 1px solid var(--line); }
.membership-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px; min-height: 66px; border-bottom: 1px solid var(--line); }
.membership-row a { text-decoration: none; }
.membership-row strong, .membership-row small { display: block; }
.field-note { margin: -4px 0 0; color: var(--muted); font: 0.72rem/1.5 var(--mono); }
.spending-funds { margin: 38px 0; padding-top: 24px; border-top: 1px solid var(--line); }
.fund-intro { max-width: 760px; color: var(--muted); font: 0.78rem/1.6 var(--mono); }
.fund-grid { display: grid; gap: 18px; }
.fund-card { padding: 20px; border: 1px solid var(--line-bright); background: linear-gradient(110deg, rgba(71, 187, 206, 0.08), rgba(16, 20, 25, 0.88)); }
.fund-card.closed { opacity: 0.75; background: rgba(16, 20, 25, 0.72); }
.fund-card-header { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.fund-card-header h3 { margin: 5px 0 0; font-size: 1.2rem; }
.fund-remaining { text-align: right; }
.fund-remaining .label, .fund-flow .label { display: block; color: var(--muted); font: 0.64rem var(--mono); text-transform: uppercase; }
.fund-remaining .money { display: block; margin-top: 5px; color: var(--cyan); font-size: 1.35rem; }
.fund-flow { display: grid; grid-template-columns: repeat(4, minmax(100px, 1fr)); gap: 1px; margin: 18px 0; background: var(--line); border: 1px solid var(--line); }
.fund-flow > div { padding: 11px; background: var(--surface); }
.fund-flow .money { display: block; margin-top: 5px; font-size: 0.82rem; }
.fund-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.fund-actions .button { min-height: 34px; padding: 6px 10px; }
.fund-activity { margin-top: 16px; border-top: 1px solid var(--line); }
.fund-activity summary { padding: 13px 0 0; color: var(--muted); cursor: pointer; font: 0.7rem var(--mono); text-transform: uppercase; }
.fund-activity-list { margin-top: 10px; border-top: 1px solid var(--line); }
.fund-activity-row { display: grid; grid-template-columns: minmax(150px, 1fr) 180px auto auto; align-items: center; gap: 16px; min-height: 60px; border-bottom: 1px solid var(--line); }
.fund-activity-row strong, .fund-activity-row small { display: block; }
.transfer-list, .occurrence-list, .plan-list { border-top: 1px solid var(--line); }
.transfer-row { display: grid; grid-template-columns: minmax(180px, 1fr) 180px minmax(180px, auto); align-items: center; gap: 20px; min-height: 78px; border-bottom: 1px solid var(--line); }
.transfer-row.deletable { grid-template-columns: minmax(180px, 1fr) 180px minmax(180px, auto) 88px; }
.ledger .transfer-row { padding-inline: 4px; }
.transfer-row:hover { background: rgba(23, 28, 34, 0.65); }
.transfer-route strong, .transfer-route small, .transfer-values span, .transfer-values small { display: block; }
.transfer-values { text-align: right; }
.transfer-values .negative { color: var(--red); }
.transfer-values .positive { color: var(--green); }
.recurrence-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.occurrence-row { display: grid; grid-template-columns: minmax(150px, 1fr) 120px 140px auto; align-items: center; gap: 16px; min-height: 72px; border-bottom: 1px solid var(--line); }
.occurrence-row strong, .occurrence-row small, .occurrence-row time, .occurrence-row .status-tag { display: block; }
.occurrence-row .money { text-align: right; }
.occurrence-amount { text-align: right; }
.occurrence-amount .money { display: block; }
.occurrence-amount .money.expense { color: var(--red); }
.occurrence-amount .money.income { color: var(--green); }
.transfer-amounts small { display: block; margin-top: 3px; }
.occurrence-row.overdue { border-left: 2px solid var(--red); padding-left: 10px; }
.occurrence-actions { display: flex; align-items: center; gap: 6px; }
.occurrence-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; padding: 14px; border: 1px solid var(--line); background: rgba(16, 20, 25, 0.72); }
.occurrence-filters .date-control.compact { width: 100%; }
.occurrence-filter-actions { display: flex; align-items: end; justify-content: flex-end; gap: 8px; }
.occurrence-filter-actions .button { min-width: 0; }
.plan-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; min-height: 64px; border-bottom: 1px solid var(--line); }
.plan-row strong, .plan-row small { display: block; }
.plan-actions { display: flex; align-items: center; gap: 4px; }
.danger-text { color: var(--red); }
.archived-plans { margin-top: 34px; }
.plan-row.archived { opacity: 0.72; }
.plan-forecast { margin-bottom: 38px; }
.plan-forecast-scroll { overflow-x: auto; padding-bottom: 8px; }
.plan-forecast-grid { display: grid; grid-template-columns: repeat(6, minmax(210px, 1fr)); min-width: 1260px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.forecast-month { min-height: 250px; padding: 17px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(16, 20, 25, 0.86); }
.forecast-month > time { display: block; margin-bottom: 22px; color: var(--cyan); font-size: 0.76rem; }
.forecast-currency { display: grid; gap: 15px; }
.forecast-currency + .forecast-currency { margin-top: 20px; padding-top: 17px; border-top: 1px solid var(--line); }
.forecast-currency .label { display: block; margin-bottom: 5px; color: var(--muted); font: 0.65rem var(--mono); text-transform: uppercase; }
.forecast-currency strong { font-size: 1.08rem; }
.forecast-values { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 5px 12px; }
.forecast-currency .money.expense { color: var(--red); }
.forecast-currency .money.income { color: var(--green); }
.forecast-currency .money.neutral { color: var(--muted); }
.forecast-balance { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.forecast-balance .label { margin: 0; }
.category-breakdown { margin-top: 3px; }
.category-bar { display: flex; width: 100%; height: 13px; margin-top: 7px; overflow: hidden; background: var(--bg); border: 1px solid var(--line-bright); }
.category-segment { position: relative; min-width: 2px; height: 100%; cursor: help; transition: filter 100ms ease, transform 100ms ease; }
.category-segment:hover, .category-segment:focus-visible { z-index: 1; filter: brightness(1.25); transform: scaleY(1.35); outline: 1px solid var(--text); outline-offset: -1px; }
.category-detail { min-height: 34px; margin-top: 8px; font: 0.65rem/1.35 var(--mono); }
.category-charts { margin: 30px 0 38px; padding-top: 24px; border-top: 1px solid var(--line); }
.category-charts > .section-heading { margin-bottom: 18px; }
.category-currency-group + .category-currency-group { margin-top: 28px; }
.category-currency { margin: 0 0 14px; color: var(--cyan); font: 0.76rem var(--mono); letter-spacing: 0.08em; }
.category-pie-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.category-pie-card { min-width: 0; padding: 18px; border: 1px solid var(--line); background: rgba(16, 20, 25, 0.72); }
.category-pie-card.expense { border-top-color: var(--red); }
.category-pie-card.income { border-top-color: var(--green); }
.category-pie-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.category-pie-heading h3 { margin: 0; font-size: 0.9rem; }
.category-pie-heading .money { font-size: 0.9rem; }
.category-pie-card.expense .category-pie-heading .money { color: var(--red); }
.category-pie-card.income .category-pie-heading .money { color: var(--green); }
.category-pie-body { display: grid; grid-template-columns: minmax(130px, 190px) minmax(120px, 1fr); align-items: center; gap: 20px; }
.category-pie { display: block; width: 100%; max-width: 190px; aspect-ratio: 1; overflow: visible; filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.28)); }
.pie-slice { cursor: help; stroke: var(--surface); stroke-width: 0.8; transition: filter 100ms ease, stroke-width 100ms ease; }
.pie-slice:hover, .pie-slice:focus-visible { filter: brightness(1.22); stroke: var(--text); stroke-width: 1.8; outline: none; }
.category-pie-legend { display: grid; align-content: center; gap: 8px; min-width: 0; font: 0.68rem/1.3 var(--mono); }
.category-pie-legend > div { display: grid; grid-template-columns: 11px minmax(0, 1fr); align-items: center; gap: 8px; }
.category-pie-legend span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pie-swatch { width: 10px; height: 10px; border: 1px solid rgba(255, 255, 255, 0.2); }
.category-pie-detail { min-height: 22px; margin-top: 14px; font: 0.68rem/1.4 var(--mono); }
.dashboard-budget-body > .category-charts { grid-column: 1 / -1; margin: 0; padding-top: 20px; }
.burndown-chart { margin: 30px 0 38px; padding-top: 24px; border-top: 1px solid var(--line); }
.burndown-chart.compact { margin: 0; }
.burndown-chart figure { margin: 18px 0 0; }
.burndown-svg { display: block; width: 100%; min-height: 220px; overflow: visible; }
.burndown-grid { stroke: var(--line); stroke-width: 1; }
.burndown-zero { stroke: var(--muted); stroke-width: 1.2; }
.burndown-axis-label { fill: var(--muted); font: 12px var(--mono); }
.burndown-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.burndown-line.actual { stroke: var(--cyan); }
.burndown-line.target { stroke: var(--amber); stroke-dasharray: 3 7; }
.burndown-line.forecast { stroke: var(--cyan); stroke-dasharray: 10 7; }
.burndown-as-of { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 5 6; }
.burndown-selection { stroke: var(--text); stroke-width: 1; pointer-events: none; }
.burndown-svg { cursor: crosshair; }
.burndown-svg:focus-visible { outline: 1px solid var(--text); outline-offset: 4px; }
.burndown-legend { display: flex; flex-wrap: wrap; gap: 10px 24px; font: 0.68rem var(--mono); }
.burndown-legend span::before { content: ""; display: inline-block; width: 24px; margin-right: 8px; vertical-align: middle; border-top: 3px solid; }
.burndown-legend .actual::before { border-color: var(--cyan); }
.burndown-legend .target::before { border-color: var(--amber); border-top-style: dotted; }
.burndown-detail { min-height: 22px; margin-top: 12px; font: 0.7rem/1.5 var(--mono); }
.burndown-toggle { align-self: end; }
.burndown-data { margin-top: 18px; color: var(--muted); font: 0.72rem var(--mono); }
.burndown-data summary { cursor: pointer; }
.burndown-data table { width: 100%; margin-top: 12px; border-collapse: collapse; white-space: nowrap; }
.burndown-data th, .burndown-data td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: right; }
.burndown-data th:first-child { text-align: left; }
.table-scroll { overflow-x: auto; }
.dashboard-budget-body > .burndown-chart { grid-column: 1 / -1; padding-top: 20px; }
.transfer-plan-fields[hidden] { display: none; }

@media (max-width: 760px) {
  .app-shell { width: min(100% - 22px, 1280px); }
  .topbar { align-items: flex-start; flex-direction: column; padding: 18px 0 12px; gap: 13px; }
  nav { width: 100%; overflow-x: auto; }
  nav a, .nav-account { flex: 0 0 auto; }
  main { padding-top: 30px; }
  .page-header { align-items: flex-start; flex-direction: column; }
  .page-actions { width: 100%; justify-content: flex-start; }
  .split { grid-template-columns: 1fr; }
  .filters { grid-template-columns: 1fr 1fr; }
  .ledger-row { grid-template-columns: 1fr auto; }
  .ledger-row.deletable { grid-template-columns: 1fr auto; }
  .ledger-row > :nth-child(2) { display: none; }
  .ledger-row.deletable .button { grid-column: 1 / -1; justify-self: end; }
  .budget-command { grid-template-columns: 1fr; }
  .dashboard-budget-body { grid-template-columns: 1fr; }
  .category-pie-grid { grid-template-columns: 1fr; }
  .category-pie-body { grid-template-columns: minmax(120px, 160px) minmax(100px, 1fr); }
  .budget-link, .goal-row { align-items: start; }
  .goal-row { grid-template-columns: minmax(120px, 0.7fr) minmax(220px, 1.3fr); }
  .goal-row .icon-button { grid-column: 1 / -1; justify-self: end; }
  .budget-link-value { text-align: right; }
  .target-row { grid-template-columns: 1fr auto; }
  .target-row .icon-button { grid-column: 1 / -1; justify-self: end; }
  .date-pair { grid-template-columns: 1fr; }
  .transfer-row { grid-template-columns: 1fr auto; }
  .transfer-row.deletable { grid-template-columns: 1fr auto; }
  .transfer-row time { display: none; }
  .transfer-row.deletable .button { grid-column: 1 / -1; justify-self: end; }
  .recurrence-grid { grid-template-columns: 1fr 1fr; }
  .occurrence-row { grid-template-columns: 1fr auto; padding: 12px 0; }
  .occurrence-row > :nth-child(2) { grid-row: 2; }
  .occurrence-actions { grid-column: 1 / -1; justify-self: end; }
  .occurrence-filters { grid-template-columns: 1fr 1fr; }
  .plan-row { grid-template-columns: minmax(0, 1fr) auto; padding: 12px 0; }
  .plan-actions { grid-column: 1 / -1; justify-self: end; }
  .fund-flow { grid-template-columns: repeat(2, minmax(100px, 1fr)); }
  .fund-activity-row { grid-template-columns: minmax(0, 1fr) auto auto; }
  .fund-activity-row time { display: none; }
  dialog { width: 100%; max-width: none; margin: auto 0 0; }
}

@media (max-width: 480px) {
  .filters, .recurrence-grid, .preview-metrics { grid-template-columns: 1fr; }
  .time-control { justify-content: start; }
  .page-actions .button { flex: 1 1 auto; }
  .transfer-row { grid-template-columns: minmax(0, 1fr); padding-block: 12px; }
  .transfer-row.deletable { grid-template-columns: minmax(0, 1fr); }
  .transfer-row.deletable .button { justify-self: start; }
  .transfer-values { text-align: left; }
  .goal-row { grid-template-columns: minmax(0, 1fr); }
  .goal-row .icon-button { justify-self: start; }
  .occurrence-row { grid-template-columns: minmax(0, 1fr); }
  .occurrence-row > :nth-child(2) { grid-row: auto; }
  .occurrence-amount { text-align: left; }
  .occurrence-actions { justify-self: start; }
  .occurrence-filters { grid-template-columns: minmax(0, 1fr); }
  .fund-card-header { align-items: start; flex-direction: column; }
  .fund-remaining { text-align: left; }
  .fund-flow { grid-template-columns: minmax(0, 1fr); }
  .fund-activity-row { grid-template-columns: minmax(0, 1fr) auto; padding: 10px 0; }
  .fund-activity-row .money { grid-row: 2; }
}

@media (prefers-reduced-motion: no-preference) {
  dialog[open] { animation: rise 120ms ease-out; }
  @keyframes rise { from { opacity: 0; transform: translateY(8px); } }
}