:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #17251e;
  background: #f3f5f1;
  font-synthesis: none;
  --ink: #17251e;
  --muted: #637068;
  --green: #185c3b;
  --green-dark: #10482d;
  --green-soft: #e5f0e8;
  --border: #d9dfda;
  --surface: #ffffff;
  --danger: #a23a2a;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; background: linear-gradient(180deg, #edf4ee 0, #f6f6f2 24rem, #f3f5f1 100%); }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 3px solid rgba(36, 116, 73, .26); outline-offset: 2px; }

.shell { width: min(1120px, calc(100% - 2rem)); margin: 0 auto; padding: 1.25rem 0 5rem; }
.site-header { display: flex; align-items: center; justify-content: space-between; min-height: 4.5rem; margin-bottom: clamp(2rem, 5vw, 4.5rem); }
.brand { align-items: center; color: var(--ink); display: inline-flex; font-weight: 800; gap: .7rem; text-decoration: none; }
.brand-mark { align-items: center; background: var(--green); border-radius: 11px; color: white; display: inline-flex; font-size: .73rem; height: 2.1rem; justify-content: center; letter-spacing: .04em; width: 2.1rem; }
.environment { color: var(--muted); font-size: .82rem; margin: 0; }
.app-nav { align-items: center; background: rgba(255,255,255,.72); border: 1px solid var(--border); border-radius: 999px; display: flex; gap: .2rem; padding: .25rem; }
.app-nav a { border-radius: 999px; color: var(--muted); font-size: .82rem; font-weight: 750; padding: .5rem .8rem; text-decoration: none; }
.app-nav a:hover { color: var(--green-dark); }
.app-nav a[aria-current="page"] { background: var(--green); color: white; }

h1, h2, h3, h4, p { margin-top: 0; }
h1 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.45rem, 6.3vw, 4.8rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.02; margin-bottom: 1.2rem; }
h2 { font-size: clamp(1.45rem, 3vw, 1.85rem); letter-spacing: -.025em; margin-bottom: .35rem; }
h3 { font-size: 1.15rem; margin-bottom: .3rem; }
h4 { font-size: 1rem; margin-bottom: .45rem; }
.eyebrow { color: var(--green); font-size: .72rem; font-weight: 850; letter-spacing: .15em; margin-bottom: .55rem; text-transform: uppercase; }
.lede { color: #526158; font-size: 1.08rem; line-height: 1.65; max-width: 650px; }
.lede.compact { margin-bottom: 0; }
.muted { color: var(--muted); line-height: 1.5; }

.auth-layout { align-items: center; display: grid; gap: clamp(2rem, 7vw, 6rem); grid-template-columns: minmax(0, 1.15fr) minmax(310px, .85fr); padding: 2rem 0 6rem; }
.auth-intro { max-width: 650px; }
.panel { background: rgba(255, 255, 255, .94); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 16px 55px rgba(25, 55, 38, .075); padding: clamp(1.25rem, 4vw, 2rem); }
.auth-card h2 { margin-bottom: .25rem; }
.auth-card > .muted { margin-bottom: 1.5rem; }
form { display: grid; gap: 1rem; }
label { display: grid; font-size: .88rem; font-weight: 750; gap: .45rem; }
input, select, textarea { background: white; border: 1px solid #bfc8c1; border-radius: 9px; color: var(--ink); min-height: 2.85rem; padding: .75rem .85rem; width: 100%; }
textarea { line-height: 1.5; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: #98a69d; }
input:focus, select:focus, textarea:focus { border-color: var(--green); }
small { color: var(--muted); font-size: .75rem; font-weight: 500; line-height: 1.4; }
button { background: var(--green); border: 1px solid var(--green); border-radius: 999px; color: white; font-weight: 780; min-height: 2.65rem; padding: .7rem 1.15rem; }
button:hover { background: var(--green-dark); border-color: var(--green-dark); }
button:disabled { cursor: wait; opacity: .65; }
button.secondary { background: var(--green-soft); border-color: var(--green-soft); color: var(--green-dark); }
button.secondary:hover { background: #d8e8dc; }
.actions { align-items: center; display: flex; flex-wrap: wrap; gap: .7rem; justify-content: space-between; }
.form-message { font-size: .86rem; line-height: 1.45; margin: 0; min-height: 1.25rem; }
.error { color: var(--danger); }
.success-text { color: var(--green); }

.dashboard-heading { align-items: flex-start; display: flex; gap: 2rem; justify-content: space-between; margin: 1rem 0 3.25rem; }
.dashboard-heading h1 { font-size: clamp(2.35rem, 5vw, 3.8rem); margin-bottom: .65rem; }
.quiet-button { background: transparent; border-color: #b9c6bd; color: var(--green-dark); flex: 0 0 auto; }
.quiet-button:hover { background: white; border-color: #9ead9f; }
.notice { border: 1px solid #ecc5be; border-radius: 10px; color: var(--danger); margin-bottom: 1.5rem; padding: .85rem 1rem; }
.notice.success { background: #e9f4ec; border-color: #c8dfce; color: var(--green-dark); }

.section-heading { align-items: end; display: flex; gap: 1.5rem; justify-content: space-between; margin-bottom: 1.25rem; }
.section-heading h2 { margin-bottom: 0; }
.date-control { align-items: center; display: flex; flex: 0 0 auto; gap: .65rem; }
.date-control label { white-space: nowrap; }
.date-control input { min-height: 2.55rem; width: auto; }
.summary-grid { display: grid; gap: 1rem; grid-template-columns: 1.25fr 1fr 1fr; }
.summary-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; display: grid; min-height: 150px; padding: 1.35rem; }
.summary-card p { color: var(--muted); font-size: .82rem; font-weight: 800; letter-spacing: .02em; margin-bottom: .8rem; }
.summary-card strong { align-self: center; font-size: clamp(1.65rem, 3.5vw, 2.35rem); letter-spacing: -.04em; overflow-wrap: anywhere; }
.summary-card span { align-self: end; color: var(--muted); font-size: .75rem; margin-top: .8rem; }
.summary-card.primary-summary { background: var(--green); border-color: var(--green); color: white; }
.summary-card.primary-summary p, .summary-card.primary-summary span { color: #d8e9de; }
.negative { color: var(--danger); }
.primary-summary .negative { color: #ffd7ce; }
.summary-grid[aria-busy="true"] strong { color: transparent; position: relative; }
.summary-grid[aria-busy="true"] strong::after { animation: pulse 1.2s infinite; background: #e7ece8; border-radius: 6px; content: ""; inset: 20% 10% 20% 0; position: absolute; }
.summary-grid[aria-busy="true"] .primary-summary strong::after { background: rgba(255,255,255,.2); }
@keyframes pulse { 50% { opacity: .45; } }

.accounts-section { margin-top: 3.75rem; }
.accounts-heading { align-items: center; }
.account-form-panel { margin-bottom: 1rem; }
.edit-account-panel { margin-bottom: 1.5rem; }
.subsection-heading { align-items: start; display: flex; gap: 1rem; justify-content: space-between; margin-bottom: 1.4rem; }
.subsection-heading p { margin-bottom: 0; }
.icon-button { align-items: center; background: transparent; border: 0; color: var(--muted); display: flex; font-size: 1.65rem; height: 2rem; justify-content: center; min-height: 0; padding: 0; width: 2rem; }
.icon-button:hover { background: #edf1ed; color: var(--ink); }
.form-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.money-input { align-items: center; border: 1px solid #bfc8c1; border-radius: 9px; display: flex; overflow: hidden; }
.money-input:focus-within { border-color: var(--green); outline: 3px solid rgba(36, 116, 73, .26); outline-offset: 2px; }
.money-input > span { color: var(--muted); padding-left: .85rem; }
.money-input input { border: 0; outline: 0; padding-left: .35rem; }
.money-input input:focus { outline: none; }
.checkbox-label { align-items: start; background: #f6f8f5; border: 1px solid var(--border); border-radius: 10px; display: flex; gap: .7rem; padding: .85rem; }
.checkbox-label input { accent-color: var(--green); min-height: auto; margin-top: .15rem; width: auto; }
.checkbox-label span { display: grid; gap: .15rem; }
.form-actions { justify-content: flex-start; }
.edit-section { border-top: 1px solid var(--border); padding: 1.5rem 0 .35rem; }
.edit-section:first-of-type { border-top: 0; padding-top: 0; }
.edit-section h4 { margin-bottom: .25rem; }
.section-description { font-size: .86rem; margin-bottom: 1rem; }
.inline-warning { background: #fff7e5; border: 1px solid #eed9a9; border-radius: 9px; color: #70521b; font-size: .82rem; line-height: 1.5; padding: .75rem .85rem; }
.account-status-section { align-items: center; display: flex; gap: 1.5rem; justify-content: space-between; margin-top: .5rem; }
.account-status-section .section-description { margin-bottom: 0; max-width: 680px; }
button.danger-button { background: white; border-color: #d7a49a; color: var(--danger); flex: 0 0 auto; }
button.danger-button:hover { background: #fff1ee; border-color: #bd7264; }

.loading-state, .empty-state { box-shadow: none; color: var(--muted); text-align: center; }
.empty-state { padding: 3rem 1.25rem; }
.empty-state p { margin: .4rem auto 1.25rem; max-width: 440px; }
.empty-icon { align-items: center; background: var(--green-soft); border-radius: 50%; color: var(--green); display: flex; font-size: 1.7rem; height: 3rem; justify-content: center; margin: 0 auto 1rem; width: 3rem; }
.account-groups { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.account-group { min-width: 0; }
.group-heading { align-items: center; display: flex; justify-content: space-between; padding: .2rem .2rem .7rem; }
.group-heading h3 { margin: 0; }
.count-badge { align-items: center; background: #e5eae6; border-radius: 999px; color: #4e5c53; display: flex; font-size: .72rem; font-weight: 800; height: 1.55rem; justify-content: center; min-width: 1.55rem; padding: 0 .45rem; }
.account-list { display: grid; gap: .7rem; }
.account-row { align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 13px; display: flex; gap: 1rem; justify-content: space-between; min-height: 92px; padding: 1rem; }
.account-details { min-width: 0; }
.account-metadata { display: flex; flex-wrap: wrap; gap: .35rem; }
.badge { background: var(--green-soft); border-radius: 999px; color: var(--green-dark); display: inline-block; font-size: .67rem; font-weight: 750; line-height: 1.25; padding: .25rem .48rem; }
.badge.warning-badge { background: #fff0cf; color: #7a5514; }
.badge.muted-badge { background: #eaedeb; color: #5f6862; }
.badge.system-badge { background: #e8e9f5; color: #4d4f7b; }
.account-side { align-items: flex-end; display: grid; flex: 0 0 auto; gap: .65rem; }
.account-amount { display: grid; flex: 0 0 auto; gap: .25rem; text-align: right; }
.account-amount strong { font-size: 1.05rem; }
.account-amount span { color: var(--muted); font-size: .68rem; }
.account-controls { display: flex; gap: .4rem; justify-content: flex-end; }
button.small-button { font-size: .73rem; min-height: 2rem; padding: .35rem .75rem; }
.archived-section { background: rgba(255,255,255,.58); border: 1px solid var(--border); border-radius: 14px; margin-top: 1.5rem; padding: 0 1rem 1rem; }
.archived-section summary { align-items: center; cursor: pointer; display: flex; font-size: .92rem; font-weight: 800; gap: .65rem; justify-content: space-between; list-style: none; padding: 1rem 0; }
.archived-section summary::-webkit-details-marker { display: none; }
.archived-section summary::after { color: var(--muted); content: "+"; font-size: 1.25rem; margin-left: auto; order: 2; }
.archived-section[open] summary::after { content: "−"; }
.archived-section summary .count-badge { margin-left: .2rem; order: 1; }
.archived-section > p { color: var(--muted); font-size: .8rem; line-height: 1.5; margin: -.15rem 0 1rem; }
.archived-list .account-row { background: rgba(255,255,255,.78); }

.transaction-page-heading { margin-bottom: 3rem; }
.transactions-heading { align-items: center; }
.transaction-form-panel { margin-bottom: 1rem; }
.transaction-type-control { max-width: 34rem; }
.transaction-fields { display: grid; gap: 1rem; }
.transaction-list { display: grid; gap: .65rem; }
.transaction-row { align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 13px; display: grid; gap: 1rem; grid-template-columns: 9rem minmax(0, 1fr) auto; min-height: 92px; padding: 1rem 1.1rem; }
.transaction-date { color: var(--muted); font-size: .78rem; font-weight: 700; }
.transaction-details { min-width: 0; }
.transaction-details h3 { font-size: 1rem; margin-bottom: .2rem; }
.transaction-details p { color: var(--muted); font-size: .78rem; margin-bottom: 0; }
.transaction-details .transaction-memo { color: #435148; margin-top: .35rem; overflow-wrap: anywhere; }
.transaction-side { align-items: flex-end; display: grid; gap: .65rem; justify-items: end; }
.transaction-amount { font-size: 1.05rem; white-space: nowrap; }
.expense-amount { color: var(--danger); }
.transaction-empty-icon { font-size: 1.35rem; }
.compact-error-heading { font-size: clamp(2rem, 5vw, 3rem); }

@media (max-width: 800px) {
  .auth-layout { grid-template-columns: 1fr; padding-top: 0; }
  .auth-intro { max-width: 700px; }
  .summary-grid { grid-template-columns: repeat(2, 1fr); }
  .primary-summary { grid-column: 1 / -1; }
  .account-groups { grid-template-columns: 1fr; gap: 1.75rem; }
}

@media (max-width: 560px) {
  .shell { width: min(100% - 1.25rem, 1120px); padding-top: .7rem; }
  .site-header { margin-bottom: 2.2rem; }
  .brand > span:last-child { display: none; }
  .app-nav a { font-size: .76rem; padding: .45rem .65rem; }
  .environment { display: none; }
  .auth-layout { gap: 1rem; padding-bottom: 3rem; }
  .auth-card { padding: 1.2rem; }
  .stacked-mobile button { width: 100%; }
  .dashboard-heading { align-items: start; margin-bottom: 2.4rem; }
  .dashboard-heading .lede { display: none; }
  .section-heading { align-items: start; flex-direction: column; }
  .accounts-heading { align-items: center; flex-direction: row; }
  .date-control { justify-content: space-between; width: 100%; }
  .summary-grid { grid-template-columns: 1fr; }
  .primary-summary { grid-column: auto; }
  .summary-card { min-height: 132px; }
  .form-grid { grid-template-columns: 1fr; }
  .account-row { align-items: flex-start; }
  .account-side { max-width: 47%; }
  .account-status-section { align-items: flex-start; flex-direction: column; }
  .transactions-heading { align-items: stretch; }
  .transaction-row { align-items: start; gap: .45rem .8rem; grid-template-columns: minmax(0, 1fr) auto; }
  .transaction-date { grid-column: 1 / -1; }
  .transaction-side { grid-column: 2; grid-row: 2; }
  .transaction-details { grid-column: 1; grid-row: 2; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .summary-grid[aria-busy="true"] strong::after { animation: none; }
}