:root {
  --bg:#f6f7f5;
  --surface:#fff;
  --ink:#243b33;
  --muted:#6d7771;
  --line:#e1e6e1;
  --green:#285e49;
  --soft:#edf3ed;
  --radius:14px;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:var(--bg);
  font-synthesis:none
}

* {
  box-sizing:border-box
}
body {
  margin:0
}
button,input,select,textarea {
  font:inherit
}
button,a,input,select,textarea {
  -webkit-tap-highlight-color:transparent
}
button,a {
  touch-action:manipulation
}
button {
  cursor:pointer
}
a {
  color:inherit;
  text-decoration:none
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline:3px solid #97b69d;
  outline-offset:3px
}
button:disabled {
  cursor:not-allowed;
  opacity:.5
}
h1,h2,h3,p {
  margin:0
}
h1 {
  font-size:34px;
  font-weight:550;
  letter-spacing:-1.2px;
  line-height:1.2
}
h2 {
  font-size:19px;
  font-weight:600;
  letter-spacing:-.4px
}
h3 {
  font-size:15px;
  font-weight:600
}
p {
  line-height:1.6
}
.muted,.description {
  color:var(--muted);
  font-size:14px
}
.description {
  margin-top:9px
}
.app-header {
  height:86px;
  background:white;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  gap:42px;
  padding:0 max(28px,calc((100vw - 1200px)/2))
}
.brand {
  display:flex;
  align-items:center;
  font-size:23px;
  font-weight:650;
  letter-spacing:-1px;
  white-space:nowrap
}
.brand-mark {
  display:grid;
  place-items:center;
  color:white;
  background:var(--green);
  width:35px;
  height:35px;
  border-radius:10px;
  margin-right:10px;
  font-size:24px;
  letter-spacing:-2px;
  padding-right:3px
}
.brand-dot {
  color:#91a088
}
.app-header nav {
  display:flex;
  gap:30px;
  height:100%;
  margin:auto
}
.app-header nav a {
  display:flex;
  align-items:center;
  border-bottom:3px solid transparent;
  padding:3px 0 0;
  font-size:14px;
  color:var(--muted)
}
.app-header nav a[aria-current=page] {
  border-color:var(--green);
  color:var(--green);
  font-weight:600
}
.settings-link {
  font-size:13px;
  color:var(--muted)
}
.settings-link[aria-current=page] {
  color:var(--green);
  font-weight:700
}
.workspace {
  max-width:1200px;
  margin:auto;
  padding:0 28px
}
.scope-bar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:28px 0
}
.eyebrow {
  font-size:10px;
  letter-spacing:1.8px;
  font-weight:650;
  color:var(--muted)
}
.scope-label {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:12px;
  color:var(--muted)
}
select {
  background:white;
  border:1px solid var(--line);
  border-radius:8px;
  padding:10px 32px 10px 12px;
  color:var(--ink)
}
.scope-label select {
  min-width:140px
}
.page-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin:7px 0 30px
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid var(--line);
  background:white;
  color:var(--ink);
  border-radius:8px;
  padding:11px 16px;
  font-size:13px;
  font-weight:550;
  white-space:nowrap;
  min-height:42px
}
.button:hover {
  background:#f0f3ef
}
.button.primary {
  background:var(--green);
  border-color:var(--green);
  color:white
}
.button.primary:hover {
  background:#1c4938
}
.button.quiet {
  border-color:transparent;
  background:transparent;
  color:var(--green);
  padding:8px
}
.button.danger {
  color:#a13d37
}
.overview-grid {
  display:grid;
  grid-template-columns:1fr 320px;
  gap:22px
}
.panel {
  border:1px solid var(--line);
  background:var(--surface);
  border-radius:var(--radius);
  overflow:hidden
}
.panel-head {
  padding:23px 25px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px
}
.panel-head .muted {
  font-size:12px;
  margin-top:5px
}
.balance-summary {
  padding:28px 28px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(110deg,#f4f7ef,#fff)
}
.balance-summary .amount {
  font-size:42px;
  letter-spacing:-1.5px;
  font-weight:550;
  margin:10px 0
}
.balance-summary .muted {
  font-size:12px;
  max-width:290px
}
.summary-count {
  text-align:right;
  font-size:12px;
  color:var(--muted);
  line-height:1.8
}
.summary-count strong {
  display:block;
  color:var(--ink);
  font-size:22px;
  font-weight:500
}
.account-row {
  display:grid;
  grid-template-columns:minmax(160px,1fr) 130px 95px 65px;
  gap:14px;
  align-items:center;
  padding:21px 25px;
  border-top:1px solid var(--line)
}
.account-row:first-child {
  border-top:0
}
.table-head {
  padding:13px 25px;
  background:#fbfcfa;
  font-size:10px;
  letter-spacing:.8px;
  text-transform:uppercase;
  color:var(--muted)
}
.account-title {
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0
}
.account-icon {
  width:36px;
  height:36px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:var(--soft);
  color:var(--green);
  font-size:15px;
  flex-shrink:0
}
.person-icon {
  background:color-mix(in srgb,var(--person-color) 12%,white);
  color:var(--person-color)
}
.account-title strong {
  display:block;
  font-size:14px;
  font-weight:600
}
.account-title small {
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:12px
}
.number {
  font-variant-numeric:tabular-nums;
  font-size:15px;
  font-weight:550
}
.record-date {
  color:var(--muted);
  font-size:12px
}
.account-row .button {
  font-size:12px;
  padding:6px;
  min-height:36px
}
.aside-stack {
  display:flex;
  flex-direction:column;
  gap:20px
}
.reminder-item {
  padding:18px 23px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:flex-start;
  gap:13px
}
.date-tile {
  border:1px solid color-mix(in srgb,var(--person-color,var(--green)) 45%,var(--line));
  border-radius:8px;
  min-width:42px;
  text-align:center;
  padding:6px 3px;
  background:color-mix(in srgb,var(--person-color,var(--green)) 10%,white);
  color:var(--person-color,var(--ink))
}
.date-tile span {
  display:block;
  font-size:9px;
  text-transform:uppercase;
  color:var(--muted)
}
.date-tile strong {
  font-size:17px;
  font-weight:550
}
.reminder-title {
  background:none;
  border:0;
  padding:0;
  text-align:left;
  color:var(--ink);
  font-size:13px;
  line-height:1.5
}
.reminder-title:hover {
  text-decoration:underline
}
.reminder-item .muted {
  font-size:11px;
  margin-top:5px
}
.projection-link {
  padding:24px;
  background:#edf2e9;
  border-color:#dfe7d8
}
.projection-link p {
  font-size:13px;
  margin:12px 0 19px;
  color:#67745f
}
.projection-link .button {
  background:transparent;
  border-color:#b9c8b2
}
.section-note {
  padding:15px 25px;
  font-size:11px;
  line-height:1.6;
  color:var(--muted);
  border-top:1px solid var(--line)
}
footer {
  display:flex;
  gap:18px;
  margin:45px 0 25px;
  color:#8b948d;
  font-size:11px
}
footer>span:last-child {
  margin-left:auto
}
.chart-summary {
  padding:26px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px
}
.chart-amount {
  font-size:34px;
  font-weight:500;
  letter-spacing:-1px;
  margin-top:9px
}
.chart-wrap {
  padding:0 24px 10px
}
.projection-accounts {
  margin-top:24px
}
.projection-accounts .account-row {
  grid-template-columns:1fr 140px 140px 95px
}
.stack {
  display:grid;
  gap:20px
}
.settings-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px
}
.setting-row {
  display:flex;
  justify-content:space-between;
  gap:15px;
  align-items:center;
  padding:20px 25px;
  border-top:1px solid var(--line)
}
.setting-row .muted {
  font-size:12px;
  margin-top:5px
}
.panel-content {
  padding:0 25px 25px
}
.panel-content .actions {
  margin-top:20px
}
.actions {
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap
}
.calendar-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding:22px 25px;
  flex-wrap:nowrap;
  overflow-x:auto
}
.calendar-navigation,.calendar-view-actions {
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
  flex:0 0 auto
}
.calendar-view-actions {
  margin-left:auto
}
.calendar-month-label {
  flex:0 0 10rem;
  text-align:center
}
.segmented {
  display:flex;
  padding:3px;
  background:#f0f3ee;
  border-radius:8px
}
.segmented button {
  border:0;
  border-radius:6px;
  padding:8px 13px;
  background:transparent;
  color:var(--muted);
  font-size:12px
}
.segmented button[aria-pressed=true] {
  background:white;
  color:var(--green);
  box-shadow:0 1px 3px #00000010
}
.calendar-grid {
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr))
}
.weekday {
  font-size:10px;
  color:var(--muted);
  padding:13px 10px;
  border-top:1px solid var(--line);
  text-align:center
}
.day {
  min-height:110px;
  border-top:1px solid var(--line);
  border-right:1px solid var(--line);
  padding:9px;
  min-width:0
}
.day:nth-child(7n) {
  border-right:0
}
.day-number {
  background:none;
  border:0;
  padding:4px;
  width:28px;
  height:28px;
  color:var(--ink);
  border-radius:50%;
  font-size:12px
}
.day-number:hover {
  background:var(--soft)
}
.day.today .day-number {
  background:var(--green);
  color:white
}
.day.blank {
  background:#fafbf9
}
.calendar-event {
  display:block;
  width:100%;
  border:0;
  border-left:2px solid var(--person-color,var(--green));
  background:color-mix(in srgb,var(--person-color,var(--green)) 11%,white);
  color:var(--person-color,var(--green));
  text-align:left;
  font-size:10px;
  line-height:1.4;
  padding:5px;
  margin-top:5px;
  border-radius:3px;
  overflow-wrap:anywhere
}
.empty {
  padding:35px 25px;
  color:var(--muted);
  font-size:14px
}
.completed {
  text-decoration:line-through;
  color:var(--muted)
}
dialog {
  border:1px solid var(--line);
  border-radius:18px;
  padding:0;
  width:min(560px,calc(100% - 28px));
  max-height:90dvh;
  box-shadow:0 24px 100px #1f342a30;
  color:var(--ink)
}
dialog::backdrop {
  background:#182b2455;
  backdrop-filter:blur(3px)
}
.dialog-header {
  padding:25px 26px 20px;
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:15px;
  align-items:flex-start
}
.dialog-header h2 {
  font-size:23px
}
.dialog-header p {
  font-size:12px;
  color:var(--muted);
  margin-top:8px
}
.close-button {
  border:0;
  background:#f3f5f1;
  border-radius:50%;
  width:30px;
  height:30px;
  font-size:20px;
  color:var(--muted);
  flex-shrink:0
}
.dialog-body {
  padding:24px 26px;
  display:grid;
  gap:18px
}
.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px
}
.field {
  display:grid;
  gap:8px;
  font-size:12px;
  font-weight:550
}
.field input,.field select,.field textarea {
  width:100%;
  min-width:0;
  padding:11px 12px;
  border:1px solid #d5ddd4;
  border-radius:7px;
  background:white;
  color:var(--ink);
  font-size:14px;
  font-weight:400
}
.field input[type="color"] {
  min-height:44px;
  padding:5px;
  cursor:pointer
}
.field textarea {
  resize:vertical;
  min-height:85px
}
.field small {
  font-size:11px;
  color:var(--muted);
  font-weight:400;
  line-height:1.5
}
.dialog-actions {
  padding:18px 26px;
  background:#fafbf9;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:flex-end;
  gap:10px
}
.dialog-actions .danger {
  margin-right:auto
}
.history-item {
  border:1px solid var(--line);
  border-radius:9px;
  padding:15px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center
}
.history-item p {
  font-size:12px;
  color:var(--muted);
  margin-top:6px
}
.check-label {
  display:flex;
  gap:9px;
  align-items:center;
  font-size:13px;
  color:var(--muted)
}
#toast {
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  padding:13px 20px;
  border-radius:10px;
  background:#243b33;
  color:white;
  font-size:13px;
  box-shadow:0 4px 20px #0002;
  z-index:10;
  max-width:90%;
  display:none
}
#toast.visible {
  display:block
}


.birth-picker { border: 0; padding: 0; margin: 0; min-width: 0; }
.birth-picker legend { font-size: 12px; font-weight: 550; margin-bottom: 14px; }
.birth-picker-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }

.projection-legend { display: flex; flex-wrap: wrap; gap: 12px 28px; padding: 12px 26px 24px; }
.projection-legend-item { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; max-width: 100%; padding: 4px 0; border: 0; background: transparent; color: var(--muted); font-size: 13px; line-height: 1.5; text-align: left; border-radius: 4px; }
.projection-legend-item > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.projection-legend-marker { flex: 0 0 12px; width: 12px; height: 12px; border: 2px solid var(--series-color); border-radius: 50%; background: var(--series-color); }
.projection-legend-marker.total { background: transparent; }
.projection-legend-item[aria-pressed="false"] { opacity: .55; }
.projection-legend-item[aria-pressed="false"] > span:last-child { text-decoration: line-through; }