:root {
    color-scheme: light;
    --ink: #3d4840;
    --muted: #818a82;
    --green: #628268;
    --green-dark: #496c52;
    --sage: #edf3e8;
    --paper: #fffaf2;
    --line: #eee9df;
    --serif: Georgia, 'Times New Roman', serif;
    --sans: 'Segoe UI', Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.brand { align-items: center; color: var(--ink); display: inline-flex; font-size: 22px; font-weight: 700; gap: 8px; letter-spacing: -1.2px; }
.brand-mark { align-items: center; background: #dce7d9; border-radius: 11px 11px 11px 4px; color: var(--green-dark); display: inline-flex; font: italic 22px var(--serif); height: 34px; justify-content: center; letter-spacing: 0; width: 34px; }
.brand-dot { color: #95aa91; margin-left: -8px; }
.eyebrow { color: #859188; display: block; font-size: 10px; font-weight: 700; letter-spacing: 1.45px; }
.muted { color: var(--muted); }
.button { align-items: center; border: 0; border-radius: 7px; cursor: pointer; display: inline-flex; font-size: 12px; font-weight: 600; gap: 13px; justify-content: center; padding: 12px 16px; transition: background .18s ease, transform .18s ease; }
.button:hover { transform: translateY(-1px); }
.button-dark { background: var(--green-dark); color: white; }
.button-dark:hover { background: #263e32; }
.button-wide { justify-content: space-between; margin-top: 4px; padding: 14px 17px; width: 100%; }
.button-soft { background: #eaf0e9; color: #47604f; padding: 9px 15px; }
.alert { border: 1px solid #dfe8dc; border-radius: 7px; color: #48634e; font-size: 12px; margin: 17px 0; overflow-wrap: anywhere; padding: 10px 12px; }
.alert.error { background: #fff0ec; border-color: #f4dbd2; color: #a34f3d; }

/* Sign-in and registration */
.auth-layout { background: #fff; display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.auth-story { background: #405d4e; color: #f9faf6; display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; overflow: hidden; padding: 42px 8.2%; position: relative; }
.brand-light { color: #fff; position: relative; z-index: 1; }
.brand-light .brand-mark { background: #dce9d6; }
.story-copy { margin: auto 0; max-width: 475px; position: relative; z-index: 1; }
.story-copy .eyebrow { color: #bdcfbc; }
.story-copy h1 { font: 53px/1.14 var(--serif); letter-spacing: -.8px; margin: 19px 0 18px; }
.story-copy h1 em { color: #c5d8bc; font-weight: 400; }
.story-copy p { color: #d1dbd1; font-size: 14px; line-height: 1.8; max-width: 360px; }
.story-foot { color: #e1e7dd; font-size: 11px; margin-top: 58px; }
.tiny-spark { color: #cedfbe; font-size: 16px; margin-right: 8px; }
.story-orb { border: 1px solid rgba(235, 242, 231, .08); border-radius: 50%; pointer-events: none; position: absolute; }
.orb-one { height: 450px; right: -246px; top: 24%; width: 450px; }
.orb-two { height: 590px; right: -316px; top: 17%; width: 590px; }
.auth-panel { align-items: center; display: flex; justify-content: center; padding: 60px 30px; }
.auth-card { max-width: 370px; width: 100%; }
.auth-card h2 { font: 36px/1.2 var(--serif); letter-spacing: -.35px; margin: 12px 0 8px; }
.auth-card > .muted { font-size: 12px; margin: 0; }
.auth-tabs { border-bottom: 1px solid var(--line); display: flex; gap: 25px; margin: 27px 0 22px; }
.auth-tab { background: transparent; border: 0; color: #929b94; cursor: pointer; font-size: 12px; padding: 0 0 11px; position: relative; }
.auth-tab.active { color: var(--green-dark); font-weight: 700; }
.auth-tab.active::after { background: #6f8a73; bottom: -1px; content: ''; height: 2px; left: 0; position: absolute; right: 0; }
.auth-form { display: grid; gap: 15px; }
.auth-form.hidden { display: none; }
.auth-form label, .transaction-form label, .budget-form label { color: #59665e; display: grid; font-size: 11px; font-weight: 600; gap: 7px; }
.optional { color: #a0a8a1; font-size: 10px; font-weight: 400; }
.auth-form input, .transaction-form input, .transaction-form select, .budget-input-wrap input { background: #fff; border: 1px solid #e5e9e3; border-radius: 6px; color: var(--ink); min-width: 0; outline: 0; padding: 11px 12px; transition: border-color .15s, box-shadow .15s; width: 100%; }
.auth-form input { font-size: 12px; }
input:focus, select:focus { border-color: #8ba18b; box-shadow: 0 0 0 3px rgba(112, 139, 113, .1); }
.auth-note { color: #9ca59e; font-size: 10px; margin-top: 21px; text-align: center; }
.brand-mobile { display: none; }
.brand-mark { border-radius: 7px; font: 700 11px/1 var(--sans); height: 34px; letter-spacing: -.3px; width: 42px; }

/* Authenticated layout */
.app-shell { min-height: 100vh; }
.sidebar { background: #fff; border-right: 1px solid #eef0eb; bottom: 0; display: flex; flex-direction: column; left: 0; padding: 27px 19px 17px; position: fixed; top: 0; width: 226px; z-index: 3; }
.sidebar > .brand { margin: 1px 0 31px 5px; }
.household-switch { align-items: center; background: #f7f8f5; border: 1px solid #eef0ec; border-radius: 7px; display: flex; gap: 10px; margin-bottom: 31px; padding: 10px 9px; }
.household-avatar { align-items: center; background: #e5ede4; border-radius: 6px; color: #57735c; display: inline-flex; font-size: 17px; height: 34px; justify-content: center; width: 34px; }
.household-switch strong, .household-switch small, .profile-info strong, .profile-info small { display: block; }
.household-switch strong { font-size: 10px; font-weight: 700; }
.household-switch small { color: #99a19b; font-size: 9px; margin-top: 3px; }
.chevron { color: #969f98; font-size: 14px; margin-left: auto; }
.nav-label { color: #a0a8a1; font-size: 9px; font-weight: 700; letter-spacing: 1px; margin: 0 0 9px 9px; }
.side-nav { display: grid; gap: 4px; }
.nav-item { align-items: center; border-radius: 6px; color: #77837a; display: flex; font-size: 11px; gap: 11px; padding: 10px 11px; transition: background .15s, color .15s; }
.nav-item:hover, .nav-item.selected { background: #edf2eb; color: #425c48; }
.nav-item.selected { font-weight: 700; }
.nav-icon { font-size: 15px; text-align: center; width: 16px; }
.sidebar-bottom { margin-top: auto; }
.invite-card { background: #f2f5ef; border: 1px solid #e9eee6; border-radius: 8px; margin-bottom: 17px; padding: 14px 12px 12px; position: relative; }
.invite-spark { color: #719072; font-size: 15px; position: absolute; right: 12px; top: 12px; }
.invite-card > strong { display: block; font-size: 11px; }
.invite-card p { color: #858f86; font-size: 9px; line-height: 1.55; margin: 5px 0 10px; }
.invite-code { background: #fff; border: 1px dashed #cad7c7; border-radius: 5px; color: #49644f; display: block; font-size: 12px; font-weight: 700; letter-spacing: 2px; padding: 7px; text-align: center; }
.invite-card small { color: #929c93; display: block; font-size: 8px; margin-top: 6px; text-align: center; }
.profile { align-items: center; border-top: 1px solid #eff0ed; display: flex; gap: 9px; padding: 15px 0 0; }
.profile-avatar, .topbar-avatar { align-items: center; background: #e8eee7; border-radius: 50%; color: #52705a; display: inline-flex; flex: 0 0 auto; font-size: 11px; font-weight: 700; height: 31px; justify-content: center; width: 31px; }
.profile-info { min-width: 0; }
.profile-info strong { font-size: 10px; }
.profile-info small { color: #9aa29c; font-size: 8px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logout-form { margin-left: auto; }
.icon-button { background: none; border: 0; color: #89948b; cursor: pointer; font-size: 17px; padding: 5px; }
.main-content { margin-left: 226px; min-height: 100vh; }
.topbar { align-items: center; background: rgba(255,255,255,.83); border-bottom: 1px solid #edf0eb; display: flex; height: 55px; justify-content: space-between; padding: 0 4.1%; }
.breadcrumb { color: #939c95; font-size: 10px; }
.breadcrumb > span { color: #c8cec8; margin: 0 9px; }
.breadcrumb strong { color: #58655c; font-weight: 600; }
.topbar-right { align-items: center; color: #818c83; display: flex; font-size: 9px; gap: 7px; }
.live-dot { background: #88ab81; border-radius: 50%; height: 6px; width: 6px; }
.topbar-avatar { height: 27px; margin-left: 9px; width: 27px; }
.page-content { margin: 0 auto; max-width: 1120px; padding: 32px 4.1% 0; }
.dashboard-alert { margin: -12px 0 20px; }
.welcome-row { align-items: center; display: flex; justify-content: space-between; }
.welcome-row h1 { font: 33px/1.2 var(--serif); letter-spacing: -.4px; margin: 8px 0 5px; }
.welcome-row h1 em { color: #66816a; font-weight: 400; }
.welcome-row .muted { font-size: 11px; margin: 0; }
.add-button { font-size: 10px; padding: 11px 14px; }
.add-button > span { font-size: 15px; font-weight: 400; }
.month-picker { align-items: center; color: #606c63; display: flex; font-size: 10px; gap: 13px; margin: 24px 0 13px; }
.month-picker > a:not(.month-today) { align-items: center; border: 1px solid #e7ebe5; border-radius: 5px; color: #748077; display: inline-flex; height: 24px; justify-content: center; width: 24px; }
.month-today { color: #748177; font-size: 9px; margin-left: 1px; text-decoration: underline; text-underline-offset: 2px; }
.summary-grid { display: grid; gap: 13px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.summary-card { background: #fff; border: 1px solid #ecefea; border-radius: 8px; min-height: 140px; overflow: hidden; padding: 15px 15px 12px; position: relative; }
.balance-card { background: #eaf0e8; border-color: #e6ede3; }
.card-heading { align-items: center; color: #88938b; display: flex; font-size: 8px; font-weight: 700; justify-content: space-between; letter-spacing: .8px; position: relative; z-index: 1; }
.balance-card .card-heading { color: #687e69; }
.card-symbol { align-items: center; border-radius: 6px; display: inline-flex; font-size: 12px; height: 24px; justify-content: center; width: 24px; }
.balance-symbol { background: rgba(255,255,255,.57); color: #5a795d; }
.income-symbol { background: #edf4ed; color: #66896a; }
.expense-symbol { background: #f6eeea; color: #b77d66; }
.budget-symbol { background: #f2f0e9; color: #9b9169; }
.summary-value { color: #263a30; font-size: 24px; font-weight: 600; letter-spacing: -.9px; margin-top: 13px; position: relative; z-index: 1; }
.summary-caption { color: #929b94; font-size: 9px; margin: 2px 0 0; position: relative; z-index: 1; }
.balance-card .summary-caption { color: #738576; }
.balance-decoration { border: 1px solid rgba(99,127,99,.11); border-radius: 50%; height: 150px; position: absolute; right: -66px; top: 70px; width: 150px; }
.mini-bar { background: #eff3ef; border-radius: 5px; height: 3px; margin-top: 13px; overflow: hidden; }
.mini-bar span { background: #88aa88; border-radius: inherit; display: block; height: 100%; }
.expense-mini span { background: #c99780; }
.budget-mini span { background: #b4aa80; }
.dashboard-columns { display: grid; gap: 14px; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .85fr); margin-top: 15px; }
.panel { background: #fff; border: 1px solid #ecefea; border-radius: 8px; }
.spending-panel, .budget-panel { min-height: 255px; padding: 16px 17px; }
.panel-heading { align-items: flex-start; display: flex; justify-content: space-between; }
.panel-heading h2 { font: 20px/1.25 var(--serif); letter-spacing: -.15px; margin: 4px 0 0; }
.panel-heading .eyebrow { font-size: 8px; letter-spacing: 1px; }
.panel-period { background: #f5f7f3; border-radius: 4px; color: #828c83; font-size: 9px; padding: 5px 8px; }
.category-list { display: grid; gap: 11px; margin: 19px 0 14px; }
.category-row { align-items: center; display: grid; gap: 9px; grid-template-columns: 25px minmax(75px, 1fr) auto; }
.category-icon { align-items: center; background: #f2f5f0; border-radius: 6px; color: #6d846e; display: inline-flex; font-size: 13px; height: 25px; justify-content: center; width: 25px; }
.category-detail { min-width: 0; }
.category-meta { align-items: center; display: flex; justify-content: space-between; margin-bottom: 4px; }
.category-meta strong { font-size: 9px; font-weight: 600; }
.category-meta > span { color: #9aa19b; font-size: 8px; }
.category-track { background: #f0f2ee; border-radius: 5px; height: 4px; overflow: hidden; }
.category-track > span { background: #8ca58b; border-radius: inherit; display: block; height: 100%; }
.category-row:nth-child(3n + 2) .category-track > span { background: #b9b68e; }
.category-row:nth-child(3n) .category-track > span { background: #d5a68c; }
.category-amount { font-size: 9px; font-weight: 600; }
.spending-foot { align-items: center; border-top: 1px solid #eff1ed; color: #7e8980; display: flex; font-size: 9px; justify-content: space-between; padding-top: 10px; }
.spending-foot strong { color: #33473a; font-size: 11px; }
.empty-chart { align-items: center; color: #8a968c; display: flex; flex-direction: column; padding: 27px 6px 25px; text-align: center; }
.empty-chart > span { align-items: center; background: #f0f4ed; border-radius: 50%; color: #779274; display: flex; font-size: 17px; height: 34px; justify-content: center; width: 34px; }
.empty-chart strong { color: #526157; font-size: 10px; margin-top: 9px; }
.empty-chart p { font-size: 9px; margin: 3px 0 0; }
.budget-icon { align-items: center; background: #f3f2eb; border-radius: 6px; color: #958e68; display: inline-flex; font-size: 16px; height: 29px; justify-content: center; width: 29px; }
.budget-amount { color: #34463a; font-size: 20px; font-weight: 600; letter-spacing: -.5px; margin-top: 24px; }
.budget-amount span { color: #8f9991; font-size: 10px; font-weight: 400; letter-spacing: 0; }
.budget-track { background: #edf1eb; border-radius: 8px; height: 8px; margin-top: 11px; overflow: hidden; }
.budget-track > span { background: #829c80; border-radius: inherit; display: block; height: 100%; transition: width .25s ease; }
.budget-track.over-budget > span { background: #ca896e; }
.budget-message { color: #8b968d; font-size: 9px; margin: 8px 0 0; }
.budget-setup { margin: 17px 0 14px; }
.setup-spark { color: #7e987a; display: block; font-size: 17px; }
.budget-setup strong { color: #526157; display: block; font-size: 10px; margin-top: 3px; }
.budget-setup p { color: #929b94; font-size: 9px; line-height: 1.55; margin: 3px 0 0; max-width: 240px; }
.budget-form { border-top: 1px solid #eff1ed; margin-top: 17px; padding-top: 11px; }
.budget-form > label { color: #859087; font-size: 9px; gap: 6px; }
.budget-input-wrap { align-items: center; background: #fff; border: 1px solid #e7eae5; border-radius: 5px; display: flex; height: 34px; margin-top: 6px; padding-left: 9px; }
.budget-input-wrap > span { color: #879289; font-size: 10px; }
.budget-input-wrap input { border: 0; box-shadow: none; font-size: 10px; padding: 7px 5px; }
.budget-input-wrap .button { border-radius: 4px; font-size: 9px; margin-right: 3px; padding: 7px 10px; }
.transactions-panel { margin-top: 15px; padding: 16px 17px 9px; }
.transactions-heading { align-items: center; }
.transaction-count { color: #8f9991; font-size: 9px; }
.empty-transactions { align-items: center; border-top: 1px solid #eff1ed; display: flex; gap: 11px; margin-top: 14px; padding: 16px 0 11px; }
.empty-icon { align-items: center; background: #f2f5f0; border-radius: 7px; color: #779073; display: inline-flex; font-size: 16px; height: 34px; justify-content: center; width: 34px; }
.empty-transactions strong { font-size: 10px; }
.empty-transactions p { color: #959e97; font-size: 9px; margin: 2px 0 0; }
.text-link { color: #637e65; font-size: 9px; font-weight: 600; margin-left: auto; white-space: nowrap; }
.text-link span { margin-left: 4px; }
.table-wrap { margin-top: 14px; overflow-x: auto; }
table { border-collapse: collapse; text-align: left; width: 100%; }
th { border-bottom: 1px solid #eef0ec; color: #9aa29c; font-size: 8px; font-weight: 600; letter-spacing: .55px; padding: 9px 6px; white-space: nowrap; }
td { border-bottom: 1px solid #f0f2ee; color: #818c84; font-size: 9px; padding: 9px 6px; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
td:first-child { align-items: center; display: flex; gap: 8px; }
.transaction-category-icon { align-items: center; background: #f2f5ef; border-radius: 6px; color: #758c70; display: inline-flex; flex: 0 0 auto; font-size: 12px; height: 27px; justify-content: center; width: 27px; }
.transaction-category-icon.income { background: #edf4ed; color: #64866a; }
.transaction-name { color: #455349; font-size: 9px; font-weight: 600; }
.transaction-name small { color: #a1a9a2; display: block; font-size: 8px; font-weight: 400; margin-top: 2px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.added-by { background: #f2f4f0; border-radius: 20px; color: #738077; display: inline-block; font-size: 8px; padding: 4px 8px; }
.amount { color: #b47863; font-size: 10px; font-weight: 600; text-align: right; }
.amount.positive { color: #66876a; }
td:last-child, th:last-child { text-align: right; width: 26px; }
.delete-button { background: transparent; border: 0; color: #a0a9a2; cursor: pointer; font-size: 16px; height: 24px; width: 24px; }
.delete-button:hover { color: #b66f5d; }
.list-limit { color: #969f98; font-size: 9px; text-align: center; }
.history-pagination { align-items: center; border-top: 1px solid #e3e8e3; color: #6c786f; display: flex; font-size: 10px; justify-content: space-between; margin-top: 8px; padding: 12px 6px 3px; }
.history-pagination nav { align-items: center; display: flex; gap: 12px; }
.history-pagination nav a { border: 1px solid #e3e8e3; border-radius: 5px; color: #41694d; padding: 6px 9px; }
.history-pagination nav a:hover { background: #eff3ef; }
.history-pagination nav span { white-space: nowrap; }
.add-panel { margin-top: 15px; padding: 16px 17px 18px; }
.add-panel-icon { align-items: center; background: #edf2eb; border-radius: 6px; color: #627d64; display: inline-flex; font-size: 17px; height: 29px; justify-content: center; width: 29px; }
.transaction-form { align-items: end; display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 16px; }
.transaction-form label { font-size: 9px; }
.transaction-form input, .transaction-form select { font-size: 10px; height: 35px; padding: 8px 9px; }
.amount-input { align-items: center; border: 1px solid #e5e9e3; border-radius: 6px; display: flex; padding-left: 9px; }
.amount-input:focus-within { border-color: #8ba18b; box-shadow: 0 0 0 3px rgba(112, 139, 113, .1); }
.amount-input span { color: #879289; font-size: 10px; }
.amount-input input { border: 0; box-shadow: none; }
.note-field { grid-column: span 2; }
.save-transaction { font-size: 10px; height: 35px; }
.page-footer { align-items: center; color: #9aa39b; display: flex; font-size: 8px; justify-content: space-between; padding: 20px 0 18px; }
.footer-heart { color: #b88470; font-size: 12px; margin-right: 3px; }
.auth-link { background: none; border: 0; color: #63805f; cursor: pointer; font-size: 11px; justify-self: center; padding: 2px 8px; text-decoration: underline; text-underline-offset: 3px; }
.auth-link:hover { color: #496c52; }
.registration-help { color: #788379; font-size: 11px; line-height: 1.55; margin: 0; }
.account-panel { margin-top: 15px; padding: 16px 17px 18px; }
.account-lock { align-items: center; background: #f5f2e7; border-radius: 7px; color: #99834e; display: inline-flex; font-size: 18px; height: 30px; justify-content: center; width: 30px; }
.security-forms { display: grid; gap: 26px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 17px; }
.security-form { align-content: start; display: grid; gap: 10px; }
.security-form > strong { color: #4b594e; font-size: 11px; }
.security-form > p { color: #89948b; font-size: 9px; line-height: 1.6; margin: -5px 0 2px; }
.security-form > p b { color: #657664; font-weight: 600; }
.security-form label { color: #59665e; display: grid; font-size: 9px; font-weight: 600; gap: 6px; }
.security-form input { background: #fff; border: 1px solid #eae5db; border-radius: 8px; color: var(--ink); min-height: 36px; outline: none; padding: 8px 10px; width: 100%; }
.security-form .button { justify-self: start; margin-top: 2px; }
.password-field { display: block; position: relative; width: 100%; }
.password-field > input { padding-right: 60px; }
.password-toggle { background: transparent; border: 0; border-radius: 4px; color: #526e59; cursor: pointer; font-size: 11px; font-weight: 600; min-height: 36px; min-width: 48px; padding: 6px 8px; position: absolute; right: 3px; top: 50%; transform: translateY(-50%); }
.password-toggle:hover { background: #eff3ef; }
.password-toggle:focus-visible { outline: 2px solid #41694d; outline-offset: 1px; }
progress { appearance: none; background: #f2f0e8; border: 0; border-radius: 8px; display: block; overflow: hidden; width: 100%; }
progress::-webkit-progress-bar { background: #f2f0e8; border-radius: inherit; }
progress::-webkit-progress-value { background: var(--progress-fill, #8eaf7d); border-radius: inherit; }
progress::-moz-progress-bar { background: var(--progress-fill, #8eaf7d); border-radius: inherit; }
.mini-bar { height: 3px; margin-top: 13px; --progress-fill: #8eaf7d; }
.mini-bar.expense-mini { --progress-fill: #e3a083; }
.mini-bar.budget-mini { --progress-fill: #d4b36d; }
.category-track { height: 4px; --progress-fill: #8eaf7d; }
.budget-track { height: 8px; margin-top: 11px; --progress-fill: #90ad7e; }
.budget-track.over-budget { --progress-fill: #df9474; }

@media (min-width: 1500px) {
    .page-content { padding-top: 38px; }
    .summary-card { min-height: 150px; padding: 18px; }
    .summary-value { font-size: 27px; }
}
@media (max-width: 1050px) {
    .sidebar { width: 200px; }
    .main-content { margin-left: 200px; }
    .summary-grid { gap: 9px; }
    .summary-card { padding: 13px 11px; }
    .summary-value { font-size: 21px; }
    .dashboard-columns { grid-template-columns: minmax(0, 1.2fr) minmax(250px, .9fr); }
    .transaction-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .note-field { grid-column: span 1; }
}
@media (max-width: 760px) {
    .auth-layout { grid-template-columns: 1fr; }
    .auth-story { display: none; }
    .auth-panel { align-items: flex-start; min-height: 100vh; padding: 36px 24px; }
    .auth-card { margin: auto; max-width: 400px; }
    .brand-mobile { display: inline-flex; margin-bottom: 46px; }
    .sidebar { border-bottom: 1px solid #edf0eb; border-right: 0; bottom: auto; height: 56px; padding: 0 17px; right: 0; width: 100%; }
    .sidebar > .brand { margin: 0; }
    .household-switch, .nav-label, .side-nav, .sidebar-bottom { display: none; }
    .main-content { margin-left: 0; padding-top: 56px; }
    .topbar { height: 43px; padding: 0 17px; }
    .topbar-right { font-size: 0; }
    .topbar-avatar { margin-left: 0; }
    .page-content { padding: 25px 17px 0; }
    .welcome-row { align-items: flex-start; gap: 15px; }
    .welcome-row h1 { font-size: 28px; }
    .welcome-row .muted { font-size: 10px; }
    .add-button { flex: 0 0 auto; font-size: 0; gap: 0; height: 34px; justify-content: center; padding: 0; width: 36px; }
    .add-button > span { font-size: 20px; }
    .month-picker { margin-top: 19px; }
    .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .summary-card { min-height: 126px; padding: 13px; }
    .summary-value { font-size: 23px; }
    .dashboard-columns { grid-template-columns: 1fr; }
    .spending-panel { min-height: 220px; }
    .budget-panel { min-height: auto; }
    .transactions-panel { padding: 14px 12px 7px; }
    .transactions-heading h2 { font-size: 18px; }
    .table-wrap { margin-left: -4px; margin-right: -4px; }
    table { min-width: 520px; }
    .history-pagination { align-items: flex-start; flex-direction: column; gap: 10px; }
    .history-pagination nav { justify-content: space-between; width: 100%; }
    th, td { padding-left: 5px; padding-right: 5px; }
    .transaction-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .note-field { grid-column: span 2; }
    .security-forms { grid-template-columns: 1fr; }
    .security-form { padding-bottom: 16px; }
    .security-form + .security-form { border-top: 1px solid #f0ece4; padding-top: 16px; }
    .security-form label { font-size: 11px; }
    .security-form input { min-height: 44px; }
    .security-form .button { min-height: 44px; }
    .password-toggle { min-height: 40px; min-width: 50px; }
    .page-footer { align-items: flex-start; gap: 8px; line-height: 1.5; }
    .page-footer > span:last-child { text-align: right; }
}
@media (max-width: 390px) {
    .welcome-row h1 { font-size: 25px; }
    .summary-card { min-height: 120px; padding: 11px; }
    .summary-value { font-size: 21px; }
    .card-heading { font-size: 7px; }
    .transaction-form { gap: 10px; }
}

@media (max-width: 760px) {
    .auth-form { gap: 17px; }
    .auth-form label { font-size: 12px; }
    .auth-form input { min-height: 46px; padding: 12px 13px; }
    .auth-form .button { min-height: 48px; }
    .auth-link { font-size: 12px; min-height: 40px; }
    .auth-tabs { gap: 28px; }
    .auth-tab { font-size: 13px; padding-bottom: 13px; }
}

/* Warm, cheerful colors keep the shared money space feeling welcoming. */
body {
    background:
        radial-gradient(ellipse at 96% 5%, rgba(250, 224, 194, .24), transparent 28rem),
        var(--paper);
}
.auth-layout { background: #fffdf9; }
.auth-story {
    background: linear-gradient(145deg, #bd7457 0%, #d18a63 58%, #d99d6c 100%);
}
.story-copy .eyebrow { color: #ffebd4; }
.story-copy h1 em { color: #ffdfb8; }
.story-copy p { color: #fff2e6; }
.story-foot { color: #fff3e4; }
.tiny-spark { color: #ffe2ad; }
.story-orb { border-color: rgba(255, 249, 237, .16); }
.brand-mark { background: #e7efde; color: #496c52; }
.brand-light .brand-mark { background: #fff0d9; color: #a86143; }
.button-dark { background: #496c52; }
.button-dark:hover { background: #395941; }
.button-soft { background: #edf3e8; color: #496c52; }
.alert { background: #f0f5ec; border-color: #e0ead9; color: #496c52; }
.alert.error { background: #fff0e9; border-color: #f3d8c9; color: #a3523c; }
.auth-card h2 { color: #414d43; }
.auth-tabs { border-color: #eee9df; }
.auth-tab.active { color: #496c52; }
.auth-tab.active::after { background: #82a477; }
.auth-form input, .transaction-form input, .transaction-form select,
.budget-input-wrap input { border-color: #eae5db; }
input:focus, select:focus { border-color: #91ad88; box-shadow: 0 0 0 3px rgba(121, 157, 111, .13); }
.sidebar { background: #fffefa; border-color: #efeae1; }
.household-switch { background: #faf7ef; border-color: #eee9df; }
.household-avatar { background: #edf3e8; color: #55785a; }
.nav-item:hover, .nav-item.selected { background: #eef4e9; color: #496c52; }
.invite-card { background: #f5f3e9; border-color: #ebe7d8; }
.invite-code { border-color: #d5ddc8; color: #496c52; }
.profile { border-color: #f0ece4; }
.profile-avatar, .topbar-avatar { background: #f5e9dc; color: #a36347; }
.topbar { background: rgba(255, 254, 250, .9); border-color: #efeae1; }
.breadcrumb strong { color: #59665b; }
.welcome-row h1 em { color: #c17c57; }
.month-picker > a:not(.month-today) { background: #fffefa; border-color: #eee9df; }
.summary-card, .panel { border-color: #eee9df; border-radius: 12px; }
.balance-card { background: #eef4e8; border-color: #e6edde; }
.balance-card .card-heading { color: #647e5f; }
.balance-symbol { color: #64815d; }
.income-symbol { background: #edf5e9; color: #63855d; }
.expense-symbol { background: #fff0e8; color: #bd7659; }
.budget-symbol { background: #fbf2df; color: #aa8b48; }
.summary-value { color: #3d4b41; }
.balance-card .summary-caption { color: #74866d; }
.mini-bar { background: #f2f0e8; }
.mini-bar span { background: #8eaf7d; }
.expense-mini span { background: #e3a083; }
.budget-mini span { background: #d4b36d; }
.panel-heading h2 { color: #414d43; }
.panel-period { background: #f8f4ea; }
.category-icon, .transaction-category-icon { background: #f1f4e9; color: #6c8964; }
.transaction-category-icon.income { background: #edf5e9; color: #63855d; }
.category-track { background: #f2f0e8; }
.category-track > span { background: #8eaf7d; }
.category-row:nth-child(3n + 2) .category-track > span { background: #d7b766; }
.category-row:nth-child(3n) .category-track > span { background: #e1a084; }
.spending-foot, .budget-form, th { border-color: #f0ece4; }
.spending-foot strong, .transaction-name { color: #46564a; }
.empty-chart > span, .empty-icon { background: #f1f4e9; color: #718d68; }
.empty-chart strong, .empty-transactions strong, .budget-setup strong { color: #526352; }
.budget-icon { background: #fbf2df; color: #a78b4d; }
.budget-track { background: #f1f1e8; }
.budget-track > span { background: #90ad7e; }
.budget-track.over-budget > span { background: #df9474; }
.budget-input-wrap { border-color: #eae5db; }
.added-by { background: #f4f1e8; color: #788273; }
.amount { color: #bd7659; }
.amount.positive { color: #63855d; }
.transaction-category-icon.income { background: #edf5e9; }
.add-panel-icon { background: #edf3e8; color: #55795c; }
.amount-input { border-color: #eae5db; }
.amount-input:focus-within { border-color: #91ad88; box-shadow: 0 0 0 3px rgba(121, 157, 111, .13); }
.delete-button:hover { color: #bd7659; }
.footer-heart { color: #d28b70; }
.auth-form input, .transaction-form input, .transaction-form select,
.budget-input-wrap, .amount-input { border-radius: 8px; }
.button, .auth-form .button { border-radius: 9px; }
.button-soft { background: #edf3e8; }
:focus-visible { outline: 3px solid rgba(193, 124, 87, .48); outline-offset: 2px; }

/* A clean, low-distraction theme for everyday use. */
:root {
    --ink: #26332b;
    --muted: #6c786f;
    --green: #41694d;
    --green-dark: #41694d;
    --sage: #eff3ef;
    --paper: #f7f8f6;
    --line: #e3e8e3;
    --serif: 'Segoe UI', Arial, sans-serif;
    --sans: 'Segoe UI', Arial, sans-serif;
}
body { background: var(--paper); }
.auth-layout { background: #fff; }
.auth-story { background: #eff3ef; color: var(--ink); }
.brand-light { color: var(--ink); }
.brand-light .brand-mark { background: #dfe9e0; color: var(--green-dark); }
.story-copy .eyebrow, .story-copy p, .story-foot { color: #66756a; }
.story-copy h1 { font: 600 42px/1.2 var(--sans); letter-spacing: -1.1px; }
.story-copy h1 em { color: var(--green-dark); font-style: normal; }
.tiny-spark { color: var(--green-dark); }
.story-orb { display: none; }
.auth-card h2 { font: 600 30px/1.25 var(--sans); letter-spacing: -.5px; }
.auth-tabs { gap: 20px; }
.auth-tab.active::after { background: var(--green-dark); }
.button, .auth-form .button { border-radius: 6px; }
.button-dark, .button-dark:hover { background: var(--green-dark); }
.button-soft { background: #eff3ef; color: var(--green-dark); }
.auth-form input, .transaction-form input, .transaction-form select, .security-form input,
.budget-input-wrap { border-radius: 5px; }
.sidebar, .topbar { background: #fff; border-color: var(--line); }
.household-switch, .invite-card { background: #f7f8f6; border-color: var(--line); }
.nav-item:hover, .nav-item.selected { background: #eff3ef; color: var(--green-dark); }
.nav-item, .side-nav { border-radius: 4px; }
.profile-avatar, .topbar-avatar { background: #eff3ef; color: var(--green-dark); }
.welcome-row h1 { font: 600 29px/1.3 var(--sans); letter-spacing: -.65px; }
.welcome-row h1 em { color: var(--green-dark); font-style: normal; }
.summary-card, .panel { background: #fff; border-color: var(--line); border-radius: 6px; box-shadow: none; }
.balance-card { background: #eff3ef; border-color: var(--line); }
.balance-card .card-heading, .balance-card .summary-caption { color: #607066; }
.balance-decoration { display: none; }
.income-symbol, .expense-symbol, .budget-symbol, .balance-symbol,
.category-icon, .transaction-category-icon, .budget-icon, .add-panel-icon,
.empty-chart > span, .empty-icon { background: #eff3ef; color: var(--green-dark); }
.expense-symbol, .amount { color: #a35749; }
.income-symbol, .amount.positive { color: var(--green-dark); }
.category-row:nth-child(3n + 2) .category-track,
.category-row:nth-child(3n) .category-track { --progress-fill: var(--green-dark); }
.panel-heading h2 { font: 600 19px/1.3 var(--sans); letter-spacing: -.2px; }
.budget-track, .category-track, .mini-bar { border-radius: 3px; }
.budget-track, .category-track, .mini-bar, progress::-webkit-progress-bar { background: #edf0ed; }
.budget-track, .category-track, .mini-bar { --progress-fill: #6c8c71; }
.budget-track.over-budget { --progress-fill: #b86a56; }
.budget-form, .spending-foot, th { border-color: var(--line); }
.transactions-panel, .add-panel, .account-panel { border-radius: 6px; }
.transaction-form input, .transaction-form select, .security-form input { min-height: 40px; }
.page-footer { color: #778179; }
:focus-visible { outline: 2px solid #41694d; outline-offset: 2px; }
@media (max-width: 760px) {
    .auth-story { display: none; }
    .auth-panel { background: #fff; }
    .auth-card h2 { font-size: 28px; }
    .welcome-row h1 { font-size: 25px; }
    .summary-card, .panel { border-radius: 6px; }
}

/* Center the complete sign-in experience instead of splitting it into panels. */
.auth-layout { display: block; min-height: 100vh; }
.auth-story { display: none; }
.auth-panel { min-height: 100vh; padding: 32px 22px; width: 100%; }
.auth-card { max-width: 400px; }
.brand-mobile { display: inline-flex; margin-bottom: 28px; }
@media (max-width: 760px) {
    .auth-panel { align-items: center; padding: 24px 20px; }
    .auth-card { margin: auto; }
    .brand-mobile { margin-bottom: 28px; }
}
.brand { gap: 9px; letter-spacing: -.45px; }