/* Design tokens */
:root {
   --ink: #29222c;
   --muted: #766f77;
   --cream: #f7f3ed;
   --paper: #fffdf9;
   --purple: #76558e;
   --purple-dark: #5c3e70;
   --lavender: #eadff0;
   --accent-rgb: 118, 85, 142;
   --accent-border: #cdbdd5;
   --accent-soft-strong: #dfcfe7;
   --green: #3c8b6b;
   --green-soft: #dceee5;
   --amber: #ca8736;
   --red: #c95e5e;
   --line: #e7dfd8;
   --shadow: 0 16px 50px rgba(58, 39, 61, 0.08);
   --chart-bills: var(--purple);
   --chart-food: #d78962;
   --chart-transportation: #4f91a7;
   --chart-household: #78a06b;
   --chart-lifestyle: #c46f92;
   --chart-subscriptions: #9b7bb0;
   --chart-savings: #3c8b6b;
   --chart-other: #a89a88;
   --chart-unallocated: #ddd6d0;
}

:root[data-theme='ocean'] {
   --ink: #172e3a;
   --muted: #607783;
   --cream: #eef6f7;
   --paper: #fcffff;
   --purple: #287b91;
   --purple-dark: #19586d;
   --lavender: #d8edf2;
   --accent-rgb: 40, 123, 145;
   --accent-border: #9fcbd5;
   --accent-soft-strong: #bddde4;
   --green: #27816f;
   --green-soft: #d9eee9;
   --line: #d7e5e8;
   --shadow: 0 16px 50px rgba(23, 76, 91, 0.1);
}

:root[data-theme='sage'] {
   --ink: #29332b;
   --muted: #6d796e;
   --cream: #f1f4ed;
   --paper: #fffef9;
   --purple: #667f62;
   --purple-dark: #465f45;
   --lavender: #e0eadb;
   --accent-rgb: 102, 127, 98;
   --accent-border: #b7c9b1;
   --accent-soft-strong: #cbdcc5;
   --green: #3f8265;
   --green-soft: #dcecdf;
   --line: #dde4d7;
   --shadow: 0 16px 50px rgba(53, 77, 52, 0.09);
}

:root[data-theme='sunset'] {
   --ink: #3b2924;
   --muted: #816f66;
   --cream: #fbf2e8;
   --paper: #fffdfa;
   --purple: #c06c4f;
   --purple-dark: #924a38;
   --lavender: #f5ddd2;
   --accent-rgb: 192, 108, 79;
   --accent-border: #dfb5a5;
   --accent-soft-strong: #ecc9bb;
   --green: #63845c;
   --green-soft: #e2eddd;
   --line: #eadcd2;
   --shadow: 0 16px 50px rgba(111, 62, 43, 0.1);
}

:root[data-theme='rose'] {
   --ink: #38272e;
   --muted: #806c75;
   --cream: #faf0f3;
   --paper: #fffdfd;
   --purple: #ad6681;
   --purple-dark: #81465e;
   --lavender: #f1dce4;
   --accent-rgb: 173, 102, 129;
   --accent-border: #d7b1c0;
   --accent-soft-strong: #e5c8d3;
   --green: #56816c;
   --green-soft: #dfece5;
   --line: #ead9df;
   --shadow: 0 16px 50px rgba(105, 55, 74, 0.09);
}

:root[data-theme='slate'] {
   --ink: #252b35;
   --muted: #69717d;
   --cream: #eef0f3;
   --paper: #ffffff;
   --purple: #586b89;
   --purple-dark: #394b68;
   --lavender: #dfe5ee;
   --accent-rgb: 88, 107, 137;
   --accent-border: #b5c0d1;
   --accent-soft-strong: #cbd4e0;
   --green: #417b70;
   --green-soft: #dcebe7;
   --line: #dce0e6;
   --shadow: 0 16px 50px rgba(36, 46, 61, 0.1);
}

:root[data-mode='dark'] {
   color-scheme: dark;
   --ink: #f4eff4;
   --muted: #b3aab5;
   --cream: #18151a;
   --paper: #242027;
   --line: #3b343e;
   --green-soft: #233f35;
   --shadow: 0 16px 50px rgba(0, 0, 0, 0.25);
}

:root[data-theme='lavender'][data-mode='dark'] { --purple: #b995cf; --purple-dark: #d7bce5; --lavender: #44364d; }
:root[data-theme='ocean'][data-mode='dark'] { --purple: #65b7cc; --purple-dark: #9ed8e5; --lavender: #263f48; }
:root[data-theme='sage'][data-mode='dark'] { --purple: #99bb91; --purple-dark: #c0d8ba; --lavender: #344133; }
:root[data-theme='sunset'][data-mode='dark'] { --purple: #e49a7d; --purple-dark: #f1baa3; --lavender: #4c352f; }
:root[data-theme='rose'][data-mode='dark'] { --purple: #da94af; --purple-dark: #edb9cb; --lavender: #49343d; }
:root[data-theme='slate'][data-mode='dark'] { --purple: #9eb3d4; --purple-dark: #c3d1e8; --lavender: #343d4b; }

* {
   box-sizing: border-box;
}

body {
   margin: 0;
   color: var(--ink);
   background: var(--cream);
   font-family: 'DM Sans', sans-serif;
}

button,
input,
select,
textarea {
   font: inherit;
}

html {
   -webkit-text-size-adjust: 100%;
}

body {
   overflow-x: hidden;
}

button,
label,
select,
input[type='checkbox'],
input[type='radio'] {
   touch-action: manipulation;
}

button {
   color: inherit;
}

.shell {
   width: min(1220px, calc(100% - 40px));
   margin: auto;
}

/* Header and pay-period controls */
.topbar {
   height: 88px;
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   align-items: center;
   border-bottom: 1px solid var(--line);
}

.brand {
   display: flex;
   gap: 11px;
   align-items: center;
   color: var(--ink);
   text-decoration: none;
   font-size: 19px;
   font-weight: 700;
}

.brand-mark {
   display: grid;
   place-items: center;
   width: 34px;
   height: 34px;
   border-radius: 11px 11px 11px 3px;
   color: white;
   background: var(--purple);
   font-family: 'DM Serif Display';
   font-size: 21px;
}

.period-control {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 8px 12px 8px 16px;
   background: rgba(255, 255, 255, 0.55);
   border: 1px solid var(--line);
   border-radius: 30px;
}

.period-control label {
   color: var(--muted);
   font-size: 13px;
}

.period-control select {
   width: 170px;
   padding: 0 22px 0 0;
   border: 0;
   outline: 0;
   color: var(--ink);
   background: transparent;
   cursor: pointer;
   font-weight: 600;
}

.period-control > button {
   display: flex;
   align-items: center;
   gap: 5px;
   height: 30px;
   margin: -3px -5px -3px 0;
   padding: 0 10px;
   color: var(--purple);
   background: var(--lavender);
   border: 0;
   border-radius: 50%;
   cursor: pointer;
   font-size: 13px;
   font-weight: 700;
}

.period-control > button:hover,
.period-control > button:focus-visible {
   color: white;
   background: var(--purple);
   outline: none;
}

.topbar > .button {
   justify-self: end;
}

.button {
   border: 0;
   border-radius: 11px;
   padding: 11px 17px;
   cursor: pointer;
   font-weight: 700;
   transition: 0.18s ease;
}

.button:hover {
   transform: translateY(-1px);
}

.button.primary {
   color: white;
   background: var(--purple);
   box-shadow: 0 5px 15px rgb(var(--accent-rgb) / .2);
}

.button.primary:hover {
   background: var(--purple-dark);
}

.button.ghost {
   background: #f2ece7;
}

/* Page introduction */
main {
   padding: 58px 0 40px;
}

.welcome {
   display: grid;
   grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
   align-items: stretch;
   gap: 20px;
   margin-bottom: 24px;
}

.allocation-card {
   padding: 25px;
   background: var(--paper);
   border: 1px solid var(--line);
   border-radius: 18px;
   box-shadow: var(--shadow);
}

.allocation-heading {
   display: flex;
   align-items: end;
   justify-content: space-between;
   gap: 20px;
   margin-bottom: 20px;
}

.allocation-heading .eyebrow {
   margin-bottom: 5px;
}

.allocation-heading h1 {
   font-size: clamp(28px, 3vw, 38px);
   line-height: 1;
}

.allocation-heading > small {
   color: var(--muted);
   font-size: 11px;
}

.allocation-content {
   display: grid;
   grid-template-columns: 190px minmax(0, 1fr);
   align-items: center;
   gap: 27px;
}

.allocation-chart {
   position: relative;
   display: grid;
   place-items: center;
   width: 190px;
   height: 190px;
   background: conic-gradient(var(--chart-unallocated) 0 100%);
   border-radius: 50%;
   transition: background .25s ease;
}

.allocation-hole {
   display: grid;
   place-content: center;
   width: 126px;
   height: 126px;
   padding: 10px;
   text-align: center;
   background: var(--paper);
   border-radius: 50%;
   box-shadow: inset 0 0 0 1px var(--line);
}

.allocation-hole span,
.allocation-hole small {
   color: var(--muted);
   font-size: 10px;
}

.allocation-hole strong {
   margin: 3px 0;
   font-family: 'DM Serif Display';
   font-size: 24px;
   font-weight: 400;
}

.allocation-legend {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 11px 18px;
}

.allocation-legend-item {
   display: grid;
   grid-template-columns: 9px minmax(0, 1fr) auto;
   align-items: center;
   gap: 7px;
   min-width: 0;
   font-size: 11px;
}

.allocation-legend-item i {
   width: 9px;
   height: 9px;
   border-radius: 50%;
}

.allocation-legend-item span {
   overflow: hidden;
   color: var(--muted);
   text-overflow: ellipsis;
   white-space: nowrap;
}

.allocation-legend-item strong {
   font-size: 11px;
}

.allocation-empty {
   grid-column: 1/-1;
   color: var(--muted);
   font-size: 12px;
   line-height: 1.5;
}

.eyebrow {
   margin: 0 0 11px;
   color: var(--purple);
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 0.15em;
   text-transform: uppercase;
}

h1,
h2 {
   margin: 0;
   font-family: 'DM Serif Display', serif;
   font-weight: 400;
}

h1 {
   font-size: clamp(44px, 5.6vw, 72px);
   line-height: 0.98;
   letter-spacing: -0.035em;
}

h1 em {
   color: var(--purple);
   font-weight: 400;
}

.intro {
   max-width: 590px;
   margin: 22px 0 0;
   color: var(--muted);
   font-size: 17px;
   line-height: 1.6;
}

.income-card {
   padding: 24px;
   background: var(--paper);
   border: 1px solid var(--line);
   border-radius: 18px;
   box-shadow: var(--shadow);
}

.income-card > label {
   display: block;
   margin-bottom: 11px;
   color: var(--muted);
   font-size: 13px;
   font-weight: 600;
}

.income-card p {
   margin: 11px 0 0;
   color: #978e96;
   font-size: 12px;
}

.income-heading {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 15px;
   padding-bottom: 14px;
   border-bottom: 1px solid var(--line);
}

.income-heading span {
   display: block;
   color: var(--muted);
   font-size: 11px;
   font-weight: 600;
}

.income-heading strong {
   display: block;
   margin-top: 2px;
   font-family: 'DM Serif Display';
   font-size: 28px;
   font-weight: 400;
}

.income-heading button {
   padding: 8px 10px;
   color: var(--purple);
   background: var(--lavender);
   border: 0;
   border-radius: 9px;
   cursor: pointer;
   font-size: 11px;
   font-weight: 700;
}

.income-list {
   display: grid;
   gap: 8px;
   margin-top: 12px;
}

.income-row {
   display: grid;
   grid-template-columns: 1fr 112px 27px;
   gap: 7px;
   align-items: center;
}

.income-row input {
   width: 100%;
   min-width: 0;
   height: 35px;
   padding: 0 8px;
   border: 1px solid #ded6dc;
   border-radius: 8px;
   outline: 0;
   font-size: 11px;
}

.income-row input:focus {
   border-color: var(--purple);
}

.income-amount {
   display: flex;
   align-items: center;
   padding-left: 8px;
   background: white;
   border: 1px solid #ded6dc;
   border-radius: 8px;
}

.income-amount span {
   color: var(--muted);
   font-size: 11px;
}

.income-amount input {
   border: 0;
}

.remove-income {
   width: 27px;
   height: 27px;
   padding: 0;
   color: var(--red);
   background: transparent;
   border: 0;
   border-radius: 7px;
   cursor: pointer;
   font-size: 17px;
}

.remove-income:hover {
   background: #f8e8e8;
}

.income-empty {
   padding: 8px 0;
   text-align: center;
}

.money-input {
   display: flex;
   align-items: center;
   height: 44px;
   padding: 0 12px;
   background: white;
   border: 1px solid #d9d0d8;
   border-radius: 10px;
}

.money-input:focus-within {
   border-color: var(--purple);
   box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .12);
}

.money-input span {
   color: var(--muted);
}

.money-input input {
   width: 100%;
   border: 0;
   outline: 0;
   background: transparent;
}

.money-input.large {
   height: 52px;
   background: #fbf8fb;
}

.money-input.large input {
   font-family: 'DM Serif Display';
   font-size: 30px;
}

/* Budget summary cards */
.view-nav {
   display: flex;
   gap: 6px;
   width: fit-content;
   margin: 18px auto 0;
   padding: 5px;
   background: var(--paper);
   border: 1px solid var(--line);
   border-radius: 14px;
   box-shadow: 0 8px 25px rgb(47 36 54 / .06);
}

.view-nav button {
   min-height: 40px;
   padding: 0 18px;
   color: var(--muted);
   background: transparent;
   border: 0;
   border-radius: 10px;
   cursor: pointer;
   font: inherit;
   font-size: 13px;
   font-weight: 700;
}

.view-nav button.active {
   color: white;
   background: var(--purple-dark);
}

.insights-controls { display: grid; gap: 9px; justify-items: end; }
.insights-range { display: flex; gap: 4px; padding: 4px; background: var(--soft); border-radius: 10px; }
.insights-range button { min-height: 34px; padding: 0 12px; color: var(--muted); background: transparent; border: 0; border-radius: 7px; cursor: pointer; font-size: 11px; font-weight: 700; }
.insights-range button.active { color: var(--ink); background: var(--paper); box-shadow: 0 2px 8px rgb(47 36 54 / .08); }

.shell[data-active-view='month'] .period-control,
.shell[data-active-view='quarter'] .period-control,
.shell[data-active-view='year'] .period-control { visibility: hidden; }

.shell[data-active-view='activity'] .period-control { visibility: hidden; }
.shell[data-active-view='activity'] #addExpenseButton { display: none; }
#accountButton { display: none !important; }

.activity-view { padding-bottom: 36px; }
.activity-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 18px; padding: 30px 34px; color: white; background: var(--purple-dark); border-radius: 22px; box-shadow: 0 18px 45px rgb(49 34 57 / .15); }
.activity-hero .eyebrow { color: #bfa9c9; }
.activity-hero > div > span,.activity-hero small { display: block; color: #ddd0e4; font-size: 12px; }
.activity-hero > div > strong { display: block; margin: 4px 0; font-family: 'DM Serif Display'; font-size: clamp(38px, 6vw, 58px); font-weight: 400; line-height: 1; }
.activity-hero > div > strong.over { color: #ffc9c9; }
.activity-log-button { min-height: 52px; padding-inline: 22px; color: var(--purple-dark); background: white; border-color: white; }
.activity-log-button:hover { background: var(--lavender); }
.activity-hero-actions { display: flex; gap: 10px; align-items: center; }
.activity-customize-button { min-height: 52px; color: white; background: transparent; border-color: rgb(255 255 255 / .45); }
.activity-customize-button:hover { background: rgb(255 255 255 / .1); }
.activity-alerts { display: flex; gap: 10px; margin-bottom: 18px; overflow-x: auto; }
.activity-alerts > span { display: flex; flex: 1 0 190px; align-items: center; gap: 10px; padding: 12px 14px; color: #684314; background: #fff2d9; border: 1px solid #e8bd76; border-radius: 12px; }
.activity-alerts b { display: grid; flex: 0 0 28px; place-items: center; width: 28px; height: 28px; color: white; background: var(--amber); border-radius: 50%; }
.activity-alerts strong,.activity-alerts small { display: block; font-size: 11px; }
.activity-alerts small { margin-top: 2px; opacity: .75; }
.activity-layout { display: grid; grid-template-columns: minmax(0, 1fr) 245px; gap: 18px; align-items: start; }
.activity-layout.activity-layout-single { grid-template-columns: 1fr; }
.activity-panel,.activity-side article { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; }
.activity-panel { overflow: hidden; }
.activity-panel-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 24px 26px 18px; border-bottom: 1px solid var(--line); }
.activity-panel-heading h1 { font-size: 30px; }
.activity-feed { display: grid; }
.activity-date { margin: 0; padding: 15px 20px 7px; color: var(--muted); background: var(--soft); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.activity-item { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 36px; align-items: center; gap: 12px; min-width: 0; padding: 15px 20px; border-bottom: 1px solid var(--line); cursor: pointer; }
.activity-item:hover { background: var(--soft); }
.activity-item:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--purple); outline-offset: -2px; }
.activity-item:last-child { border-bottom: 0; }
.activity-category-icon { display: grid; place-items: center; width: 38px; height: 38px; color: white; border-radius: 12px; font-size: 15px; }
.activity-item-name { min-width: 0; }
.activity-item-name strong,.activity-item-name small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-item-name strong { font-size: 13px; }
.activity-item-name small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.activity-item-amount { font-size: 14px; }
.activity-delete { width: 34px; height: 34px; color: var(--muted); background: transparent; border: 0; border-radius: 50%; cursor: pointer; font-size: 19px; }
.activity-delete:hover { color: var(--red); background: var(--red-soft); }
.activity-side { display: grid; gap: 12px; }
.activity-side article { padding: 21px; }
.activity-side span,.activity-side small { display: block; color: var(--muted); font-size: 11px; }
.activity-side strong { display: block; margin: 5px 0; font-family: 'DM Serif Display'; font-size: 27px; font-weight: 400; }
.activity-empty { padding: 45px 22px; color: var(--muted); text-align: center; }
.activity-empty strong { color: var(--ink); }
.activity-empty p { margin: 7px 0 0; font-size: 12px; }

.dashboard-options { display: grid; gap: 9px; }
.dashboard-options label { display: flex; gap: 13px; align-items: center; padding: 13px 14px; background: var(--soft); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.dashboard-options input { width: 18px; height: 18px; accent-color: var(--purple); }
.dashboard-options span,.dashboard-options strong,.dashboard-options small { display: block; }
.dashboard-options strong { font-size: 13px; }
.dashboard-options small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.dashboard-customize-actions { justify-content: space-between; }

.budget-actions-menu { position: relative; }
.budget-actions-menu summary { display: flex; align-items: center; min-height: 42px; list-style: none; cursor: pointer; }
.budget-actions-menu summary::-webkit-details-marker { display: none; }
.budget-actions-menu summary::after { content: '⌄'; margin-left: 8px; }
.budget-actions-menu[open] summary::after { transform: rotate(180deg); }
.budget-actions-menu > div { position: absolute; z-index: 20; top: calc(100% + 8px); right: 0; display: grid; gap: 7px; width: 190px; padding: 9px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 40px rgb(44 33 48 / .16); }
.budget-actions-menu > div .button { justify-content: flex-start; width: 100%; }
.collapse-budget-button { min-height: 42px; }

.transaction-dialog label + label { display: block; margin-top: 15px; }
.app-toast { position: fixed; z-index: 1000; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 22px; min-width: 250px; padding: 13px 15px 13px 18px; color: white; background: #29252b; border: 1px solid rgb(255 255 255 / .15); border-radius: 12px; box-shadow: 0 16px 45px rgb(0 0 0 / .25); transform: translateX(-50%); font-size: 13px; font-weight: 600; }
.app-toast[hidden] { display: none; }
.app-toast button { margin-left: auto; padding: 6px 9px; color: #d9bedf; background: transparent; border: 0; cursor: pointer; font-weight: 800; }

.overview-view {
   padding-bottom: 36px;
}

.overview-heading {
   display: flex;
   align-items: end;
   justify-content: space-between;
   gap: 24px;
   margin-bottom: 24px;
}

.overview-heading h1 { font-size: clamp(36px, 5vw, 58px); }
.overview-heading > div > p:last-child { margin: 8px 0 0; color: var(--muted); font-size: 13px; }

.overview-period-controls {
   display: flex;
   gap: 7px;
   padding: 5px;
   background: var(--paper);
   border: 1px solid var(--line);
   border-radius: 12px;
}

.overview-period-controls button {
   min-width: 42px;
   min-height: 40px;
   padding: 0 13px;
   color: var(--ink);
   background: transparent;
   border: 0;
   border-radius: 8px;
   cursor: pointer;
   font-weight: 700;
}

.overview-period-controls button:hover { background: var(--lavender); }

.overview-totals {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 16px;
   margin-bottom: 20px;
}

.overview-totals article,
.overview-panel {
   background: var(--paper);
   border: 1px solid var(--line);
   border-radius: 18px;
}

.overview-totals article { padding: 24px; }
.overview-totals span,.overview-totals small { display: block; color: var(--muted); font-size: 12px; }
.overview-totals strong { display: block; margin: 6px 0; font-family: 'DM Serif Display'; font-size: 32px; font-weight: 400; }
.overview-totals strong.over { color: var(--red); }

.overview-grid {
   display: grid;
   grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
   gap: 20px;
}

.overview-panel { padding: 25px; }
.overview-panel-heading { margin-bottom: 22px; }
.overview-panel-heading h2 { font-size: 25px; }
.overview-categories,.overview-recent { display: grid; gap: 17px; }
.overview-category-label { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 13px; }
.overview-category-label span { display: flex; align-items: center; gap: 9px; }
.overview-category-label i { width: 10px; height: 10px; border-radius: 50%; }
.overview-bar { height: 7px; margin-top: 8px; overflow: hidden; background: var(--soft); border-radius: 99px; }
.overview-bar span { display: block; height: 100%; border-radius: inherit; }
.overview-purchase { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-bottom: 14px; border-bottom: 1px solid var(--line); font-size: 13px; }
.overview-purchase:last-child { padding-bottom: 0; border-bottom: 0; }
.overview-purchase span { min-width: 0; font-weight: 700; }
.overview-purchase small { display: block; margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 11px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.overview-empty { margin: 0; padding: 28px 10px; color: var(--muted); text-align: center; font-size: 13px; }

.bill-reminders {
   display: grid;
   gap: 10px;
   margin-bottom: 24px;
}

.mobile-budget-overview-toggle { display: none; }

.bill-reminder {
   display: grid;
   grid-template-columns: 38px minmax(0, 1fr) auto;
   align-items: center;
   gap: 14px;
   padding: 15px 18px;
   color: #684314;
   background: #fff2d9;
   border: 1px solid #e8bd76;
   border-radius: 14px;
   box-shadow: 0 8px 24px rgba(123, 80, 25, .08);
}

.bill-reminder.overdue {
   color: #7c3030;
   background: #fae4e4;
   border-color: #dda0a0;
}

.bill-reminder-icon {
   display: grid;
   place-items: center;
   width: 38px;
   height: 38px;
   color: white;
   background: var(--amber);
   border-radius: 50%;
   font-weight: 800;
}

.bill-reminder.overdue .bill-reminder-icon {
   background: var(--red);
}

.bill-reminder strong,
.bill-reminder small {
   display: block;
}

.bill-reminder strong {
   font-size: 14px;
}

.bill-reminder small {
   margin-top: 3px;
   color: currentColor;
   font-size: 11px;
   opacity: .75;
}

.bill-reminder button {
   padding: 8px 12px;
   color: currentColor;
   background: rgb(255 255 255 / .55);
   border: 1px solid currentColor;
   border-radius: 8px;
   cursor: pointer;
   font-size: 11px;
   font-weight: 700;
}

.summary {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 16px;
   margin-bottom: 24px;
}

.summary-card {
   display: flex;
   align-items: center;
   gap: 17px;
   padding: 21px 22px;
   background: var(--paper);
   border: 1px solid var(--line);
   border-radius: 16px;
}

.summary-card.available {
   color: white;
   background: var(--purple-dark);
   border-color: var(--purple-dark);
}

.summary-icon {
   display: grid;
   flex: 0 0 42px;
   place-items: center;
   width: 42px;
   height: 42px;
   border-radius: 50%;
   color: #275f4a;
   background: var(--green-soft);
   font-size: 20px;
}

.summary-icon.lavender {
   color: var(--purple);
   background: var(--lavender);
}

.summary-icon.peach {
   color: #9b642a;
   background: #f4e2cc;
}

.summary-icon.savings {
   color: #27604b;
   background: var(--green-soft);
}

.summary-icon.difference {
   color: var(--purple);
   background: var(--lavender);
}

.plan-difference-card.over strong,
.activity-side .plan-difference-card.over strong {
   color: var(--red);
}

.savings-card {
   position: relative;
}

.savings-card .text-button {
   position: absolute;
   right: 14px;
   bottom: 10px;
}

.summary-card p,
.summary-card small {
   margin: 0;
   color: var(--muted);
   font-size: 12px;
}

.summary-card.available p,
.summary-card.available small {
   color: #ddd0e4;
}

.summary-card strong {
   display: block;
   margin: 3px 0;
   font-family: 'DM Serif Display';
   font-size: 28px;
   font-weight: 400;
}

/* Categorized expense list */
.budget-panel {
   overflow: visible;
   background: transparent;
   border: 0;
   border-radius: 0;
   box-shadow: none;
}

.section-heading {
   display: flex;
   justify-content: space-between;
   align-items: end;
   padding: 28px 30px 20px;
}

.section-heading h2 {
   font-size: 34px;
}

.section-heading .eyebrow {
   margin-bottom: 4px;
}

.section-heading-actions {
   display: flex;
   align-items: center;
   gap: 18px;
}

.category-create-button {
   color: var(--purple-dark);
   background: var(--lavender);
   white-space: nowrap;
}

.legend {
   display: flex;
   gap: 17px;
   color: var(--muted);
   font-size: 12px;
}

.legend span {
   display: flex;
   align-items: center;
   gap: 6px;
}

.dot {
   width: 7px;
   height: 7px;
   border-radius: 50%;
}

.green {
   background: var(--green);
}

.amber {
   background: var(--amber);
}

.red {
   background: var(--red);
}

.list-header {
   display: grid;
   grid-template-columns: minmax(190px, 1.5fr) 0.65fr 0.65fr 1.1fr 110px 36px;
   gap: 20px;
   padding: 9px 30px;
   color: #928a91;
   background: transparent;
   border-top: 0;
   border-bottom: 0;
   font-size: 10px;
   font-weight: 700;
   letter-spacing: 0.09em;
   text-transform: uppercase;
}

.expense-list {
   display: grid;
   gap: 18px;
}

.category-group {
   overflow: hidden;
   background: var(--paper);
   border: 1px solid var(--line);
   border-radius: 18px;
   box-shadow: 0 10px 32px rgba(58, 39, 61, 0.07);
}

.category-group:last-child {
   border-bottom: 1px solid var(--line);
}

.category-header {
   display: grid;
   grid-template-columns: 1fr auto auto auto auto 34px 26px;
   gap: 20px;
   align-items: center;
   padding: 18px 10px 12px;
   background: var(--lavender);
   transition: background .18s ease;
}

.category-header:hover {
   background: var(--accent-soft-strong);
}

.category-chevron {
   padding: 0;
   color: var(--purple-dark);
   background: transparent;
   border: 0;
   cursor: pointer;
   font-size: 22px;
   line-height: 1;
   text-align: center;
   transition: transform .2s ease;
}

.category-delete {
   display: grid;
   width: 34px;
   height: 34px;
   padding: 0;
   place-items: center;
   color: var(--red);
   background: transparent;
   border: 0;
   border-radius: 9px;
   cursor: pointer;
   font-size: 20px;
}

.category-delete:hover,
.category-delete:focus-visible {
   background: rgba(201,94,94,.12);
   outline: none;
}

.category-group.collapsed .category-chevron {
   transform: rotate(-90deg);
}

.category-group.collapsed .expense-row {
   display: none;
}

.category-title {
   display: flex;
   align-items: center;
   gap: 11px;
   min-width: 0;
   padding: 0;
   color: inherit;
   background: transparent;
   border: 0;
   cursor: pointer;
   font: inherit;
   text-align: left;
}

.category-toggle:focus-visible,
.category-chevron:focus-visible {
   border-radius: 7px;
   outline: 2px solid var(--purple);
   outline-offset: 3px;
}

.category-icon {
   display: grid;
   place-items: center;
   width: 31px;
   height: 31px;
   border-radius: 9px;
   color: var(--purple-dark);
   background: var(--lavender);
   font-size: 15px;
}

.category-title .category-name {
   display: block;
   margin: 0;
   font-family: 'DM Serif Display';
   font-size: 21px;
   font-weight: 400;
}

.category-title small {
   display: block;
   margin-top: 1px;
   color: var(--muted);
   font-size: 10px;
}

.category-total {
   text-align: right;
}

.category-total span {
   display: block;
   color: var(--muted);
   font-size: 9px;
   font-weight: 700;
   letter-spacing: 0.08em;
   text-transform: uppercase;
}

.category-total strong {
   font-size: 13px;
}

.category-sort {
   display: grid;
   gap: 2px;
   color: var(--muted);
   cursor: default;
   font-size: 9px;
   font-weight: 700;
   letter-spacing: .08em;
   text-transform: uppercase;
}

.category-sort select {
   width: 126px;
   padding: 6px 23px 6px 8px;
   color: var(--purple-dark);
   background: rgb(255 255 255 / .68);
   border: 1px solid var(--accent-border);
   border-radius: 8px;
   cursor: pointer;
   font-size: 10px;
   font-weight: 700;
   letter-spacing: 0;
   text-transform: none;
}

.expense-row {
   position: relative;
   display: grid;
   grid-template-columns: minmax(190px, 1.5fr) 0.65fr 0.65fr 1.1fr 110px 36px;
   gap: 20px;
   align-items: center;
   min-height: 75px;
   padding: 12px 30px 12px 72px;
   border-top: 1px solid var(--line);
}

.expense-main {
   min-width: 0;
}

.expense-name {
   display: block;
   overflow: hidden;
   max-width: 100%;
   padding: 0;
   border: 0;
   background: none;
   cursor: pointer;
   font-weight: 700;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.expense-name:hover {
   color: var(--purple);
}

.due-date {
   display: block;
   margin-top: 5px;
   color: var(--muted);
   font-size: 12px;
}

.due-date:empty:after {
   content: 'No due date';
   color: #b2abb1;
}

.paid-badge {
   display: none;
   width: max-content;
   margin-top: 6px;
   padding: 3px 8px;
   color: #27684f;
   background: var(--green-soft);
   border-radius: 20px;
   font-size: 10px;
   font-weight: 700;
   text-transform: uppercase;
}

.expense-row.paid {
   background: #fbfdfb;
}

.expense-row.paid .paid-badge {
   display: block;
}

.expense-row.paid .expense-name,
.expense-row.paid .money-column,
.expense-row.paid .progress-column > :not(.paid-toggle) {
   opacity: .58;
}

.money-column strong,
.planned-value {
   font-size: 14px;
}

.planned-column {
   position: relative;
   min-width: 0;
}

.planned-value {
   margin: -4px -6px;
   padding: 4px 6px;
   background: transparent;
   border: 1px dashed transparent;
   border-radius: 7px;
   cursor: default;
   font-weight: 700;
   user-select: none;
}

.planned-value:focus-visible {
   background: var(--lavender);
   border-color: var(--accent-border);
   outline: 2px solid var(--purple);
   outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
   .planned-value:hover {
      color: var(--purple-dark);
      background: var(--lavender);
      border-color: var(--accent-border);
      cursor: text;
   }
}

.planned-editor {
   position: absolute;
   z-index: 4;
   top: 50%;
   left: -8px;
   display: grid;
   grid-template-columns: minmax(0, 1fr) 27px 27px;
   gap: 4px;
   align-items: center;
   width: min(190px, calc(100vw - 64px));
   padding: 6px;
   background: var(--paper);
   border: 1px solid var(--accent-border);
   border-radius: 10px;
   box-shadow: 0 8px 24px rgba(50, 35, 52, .18);
   transform: translateY(-50%);
}

.planned-input {
   width: 100%;
   min-width: 0;
   height: 32px;
   padding: 0 7px;
   color: var(--ink);
   background: var(--paper);
   border: 1px solid var(--purple);
   border-radius: 7px;
   outline: none;
   appearance: textfield;
   font-weight: 700;
}

.planned-input::-webkit-inner-spin-button,
.planned-input::-webkit-outer-spin-button {
   margin: 0;
   appearance: none;
}

.planned-input:focus {
   box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .14);
}

.planned-editor button {
   display: grid;
   width: 27px;
   height: 27px;
   padding: 0;
   border: 0;
   border-radius: 7px;
   cursor: pointer;
   place-items: center;
   font-size: 14px;
   font-weight: 800;
}

.planned-editor button:focus-visible {
   outline: 2px solid var(--purple);
   outline-offset: 2px;
}

.planned-save {
   color: white;
   background: var(--green);
}

.planned-cancel {
   color: var(--muted);
   background: var(--lavender);
}

.expense-row.paid .planned-column.editing {
   opacity: 1;
}

.mobile-label {
   display: none;
}

.progress-label {
   display: flex;
   justify-content: space-between;
   margin-bottom: 7px;
   color: var(--muted);
   font-size: 11px;
}

.progress-label strong {
   color: var(--ink);
}

.progress-track {
   overflow: hidden;
   height: 6px;
   background: #eee8e3;
   border-radius: 8px;
}

.progress-track span {
   display: block;
   width: 0;
   height: 100%;
   background: var(--green);
   border-radius: inherit;
   transition: width 0.35s;
}

.expense-row.paid .progress-track span {
   width: 100% !important;
   background: var(--green);
}

.paid-toggle {
   margin-top: 8px;
   padding: 0;
   color: var(--purple);
   background: transparent;
   border: 0;
   cursor: pointer;
   font-size: 10px;
   font-weight: 700;
}

.paid-toggle:hover {
   text-decoration: underline;
}

.expense-row.paid .paid-toggle {
   color: var(--muted);
}

.expense-row.close .progress-track span {
   background: var(--amber);
}

.expense-row.over .progress-track span {
   background: var(--red);
}

.expense-row.over .remaining {
   color: var(--red);
}

.log-button {
   padding: 9px 12px;
   color: var(--purple-dark);
   background: var(--lavender);
   font-size: 12px;
}

.log-button:hover {
   background: var(--lavender);
}

.icon-button {
   width: 34px;
   height: 34px;
   padding: 0;
   border: 0;
   border-radius: 8px;
   background: transparent;
   cursor: pointer;
   font-size: 18px;
}

.icon-button:hover {
   background: #f2ece7;
}

.row-menu-wrap {
   position: relative;
}

.row-menu {
   position: absolute;
   z-index: 3;
   top: 32px;
   right: 0;
   display: none;
   width: 120px;
   padding: 5px;
   background: white;
   border: 1px solid var(--line);
   border-radius: 10px;
   box-shadow: 0 8px 25px rgba(50, 35, 52, 0.14);
}

.row-menu.open {
   display: grid;
}

.row-menu.open-up {
   top: auto;
   bottom: 32px;
}

.row-menu button {
   padding: 8px 10px;
   border: 0;
   border-radius: 6px;
   background: none;
   cursor: pointer;
   text-align: left;
   font-size: 12px;
}

.row-menu button:hover {
   background: #f4efeb;
}

.row-menu .danger {
   color: var(--red);
}

.category-add {
   padding: 8px 11px;
   color: var(--purple);
   background: rgba(255,255,255,.72);
   border: 1px solid var(--accent-border);
   border-radius: 9px;
   cursor: pointer;
   font-weight: 700;
   font-size: 12px;
}

.category-add:hover,
.category-add:focus-visible {
   background: var(--lavender);
   outline: none;
}

.category-add span {
   margin-right: 5px;
}

footer {
   display: flex;
   justify-content: space-between;
   padding: 25px 2px 35px;
   color: #938b91;
   font-size: 12px;
}

footer span:first-child {
   color: var(--purple);
   font-weight: 700;
}

/* Add, edit, and spending dialogs */
dialog {
   width: min(520px, calc(100% - 30px));
   max-height: calc(100dvh - 30px);
   padding: 0;
   border: 0;
   border-radius: 20px;
   overflow: auto;
   overscroll-behavior: contain;
   box-shadow: 0 24px 90px rgba(38, 25, 40, 0.25);
}

dialog::backdrop {
   background: rgba(39, 29, 42, 0.45);
   backdrop-filter: blur(4px);
}

dialog form {
   padding: 29px;
}

.date-picker-trigger {
   position: relative;
   width: 100%;
   min-height: 45px;
   margin-top: 7px;
   padding: 11px 42px 11px 13px;
   color: var(--ink);
   background: #fbf8fb;
   border: 1px solid var(--line);
   border-radius: 10px;
   cursor: pointer;
   text-align: left;
   font: inherit;
   font-weight: 500;
}

.date-picker-trigger::after {
   content: '▦';
   position: absolute;
   top: 50%;
   right: 13px;
   color: var(--purple);
   font-size: 19px;
   transform: translateY(-52%);
}

.date-picker-trigger.empty {
   color: var(--muted);
   font-weight: 400;
}

.date-picker-trigger:hover,
.date-picker-trigger:focus-visible {
   background: var(--paper);
   border-color: var(--purple);
   outline: none;
   box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .12);
}

.date-picker-dialog {
   width: min(430px, calc(100% - 24px));
   overflow: hidden;
   color: var(--ink);
   background: var(--paper);
}

.date-picker-shell {
   padding: 25px;
}

.date-picker-top,
.date-picker-nav,
.date-picker-actions,
.date-picker-actions > div {
   display: flex;
   align-items: center;
}

.date-picker-top,
.date-picker-actions {
   justify-content: space-between;
}

.date-picker-top {
   gap: 18px;
   margin-bottom: 23px;
}

.date-picker-top .eyebrow {
   margin-bottom: 5px;
   font-size: 10px;
}

.date-picker-top h2 {
   font-size: 29px;
}

.date-picker-nav,
.date-picker-actions > div {
   gap: 8px;
}

.date-picker-nav button {
   display: grid;
   place-items: center;
   width: 38px;
   height: 38px;
   color: var(--purple);
   background: var(--lavender);
   border: 0;
   border-radius: 50%;
   cursor: pointer;
   font-size: 17px;
}

.date-picker-weekdays,
.date-picker-grid {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
}

.date-picker-weekdays {
   margin-bottom: 6px;
   color: var(--muted);
   font-size: 9px;
   font-weight: 700;
   letter-spacing: .06em;
   text-align: center;
   text-transform: uppercase;
}

.date-picker-grid {
   gap: 4px;
}

.date-picker-grid button {
   aspect-ratio: 1;
   padding: 0;
   color: var(--ink);
   background: transparent;
   border: 0;
   border-radius: 50%;
   cursor: pointer;
   font-size: 12px;
   font-weight: 600;
}

.date-picker-grid button:hover,
.date-picker-grid button:focus-visible {
   color: var(--purple-dark);
   background: var(--lavender);
   outline: 2px solid var(--accent-border);
   outline-offset: 1px;
}

.date-picker-grid button.outside-month {
   color: var(--muted);
   opacity: .38;
}

.date-picker-grid button.today {
   color: var(--purple);
   box-shadow: inset 0 0 0 1px var(--accent-border);
}

.date-picker-grid button.selected {
   color: white;
   background: var(--purple);
   box-shadow: 0 5px 14px rgb(var(--accent-rgb) / .28);
}

.date-picker-actions {
   gap: 12px;
   margin-top: 21px;
   padding-top: 17px;
   border-top: 1px solid var(--line);
}

.date-picker-actions .button {
   padding: 9px 13px;
   font-size: 11px;
}

.schedule-history-note {
   display: flex;
   align-items: flex-start;
   gap: 11px;
   margin-top: 17px;
   padding: 13px 14px;
   color: #275f4a;
   background: var(--green-soft);
   border-radius: 11px;
}

.schedule-history-note > span {
   display: grid;
   flex: 0 0 23px;
   place-items: center;
   width: 23px;
   height: 23px;
   color: white;
   background: var(--green);
   border-radius: 50%;
   font-size: 11px;
   font-weight: 800;
}

.schedule-history-note p {
   margin: 1px 0 0;
   font-size: 11px;
   line-height: 1.5;
}

.schedule-history-note strong {
   display: block;
   font-size: 12px;
}

.dialog-top {
   display: flex;
   justify-content: space-between;
   margin-bottom: 24px;
}

.dialog-top h2 {
   font-size: 31px;
}

.dialog-top .eyebrow {
   margin-bottom: 3px;
}

.dialog-top .icon-button {
   font-size: 25px;
}

dialog label {
   display: block;
   color: var(--muted);
   font-size: 12px;
   font-weight: 600;
}

dialog label > input,
dialog label > select {
   width: 100%;
   height: 44px;
   margin-top: 7px;
   padding: 0 12px;
   border: 1px solid #d9d0d8;
   border-radius: 10px;
   outline: 0;
   background: white;
}

dialog label > input:focus,
dialog label > select:focus {
   border-color: var(--purple);
   box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .12);
}

.form-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 14px;
   margin: 15px 0;
}

.form-grid .money-input {
   margin-top: 7px;
}

.dialog-actions {
   display: flex;
   justify-content: flex-end;
   gap: 9px;
   margin-top: 25px;
}

.optional {
   color: #aaa1a8;
   font-weight: 400;
}

.recent-transactions {
   max-height: 150px;
   overflow: auto;
   margin-top: 18px;
}

.quick-purchase-dialog {
   width: min(590px, calc(100% - 24px));
   overflow: hidden;
}

.quick-purchase-dialog form {
   width: 100%;
   max-height: min(760px, calc(100vh - 30px));
   overflow-y: auto;
   overflow-x: hidden;
   overscroll-behavior: contain;
}

.quick-purchase-amount .money-input {
   margin-top: 7px;
}

.quick-purchase-amount .money-input input {
   height: 58px;
   font-size: 25px;
   font-weight: 700;
}

.quick-purchase-categories {
   min-width: 0;
   margin: 22px 0;
   padding: 0;
   border: 0;
}

.quick-purchase-categories > legend {
   margin-bottom: 12px;
   color: var(--muted);
   font-size: 12px;
   font-weight: 600;
}

.add-custom-category {
   width: 100%;
   min-height: 45px;
   margin-top: 16px;
   color: var(--purple-dark);
   background: transparent;
   border: 1px dashed var(--purple);
   border-radius: 10px;
   cursor: pointer;
   font-size: 12px;
   font-weight: 700;
}

.custom-category-fields {
   margin-top: 12px;
   padding: 14px;
   background: var(--lavender);
   border-radius: 12px;
}

.custom-category-fields p {
   margin: 8px 0 0;
   color: var(--muted);
   font-size: 11px;
   line-height: 1.45;
}

.quick-choice-group + .quick-choice-group {
   margin-top: 14px;
}

.quick-choice-group > p {
   margin: 0 0 7px;
   color: var(--muted);
   font-size: 10px;
   font-weight: 800;
   letter-spacing: .06em;
   text-transform: uppercase;
}

.quick-choice-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 8px;
}

.quick-purchase-choice {
   min-width: 0;
}

.quick-purchase-choice input {
   position: absolute;
   opacity: 0;
   pointer-events: none;
}

.quick-purchase-choice span {
   display: grid;
   min-height: 45px;
   padding: 8px 10px;
   place-items: center;
   color: var(--ink);
   background: #fbf8fb;
   border: 1px solid var(--line);
   border-radius: 10px;
   cursor: pointer;
   font-size: 12px;
   font-weight: 700;
   line-height: 1.2;
   text-align: center;
}

.quick-purchase-choice small {
   display: block;
   margin-top: 3px;
   color: var(--muted);
   font-size: 9px;
   font-weight: 600;
}

.quick-purchase-choice input:checked + span {
   color: var(--purple-dark);
   background: var(--lavender);
   border-color: var(--purple);
   box-shadow: 0 0 0 2px rgb(var(--accent-rgb) / .12);
}

.quick-purchase-choice input:focus-visible + span {
   outline: 2px solid var(--purple);
   outline-offset: 2px;
}

.quick-purchase-error,
.quick-purchase-empty {
   margin: 10px 0 0;
   color: var(--red);
   font-size: 12px;
   font-weight: 600;
}

.recurring-prompt-copy {
   margin: 0 0 20px;
   color: var(--muted);
   font-size: 14px;
   line-height: 1.6;
}

.recurring-prompt-copy strong {
   color: var(--ink);
}

.plan-next-dialog { width: min(650px, calc(100% - 24px)); }
.plan-next-copy { margin: 0 0 18px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.plan-next-copy strong { color: var(--ink); }
.plan-next-list { display: grid; max-height: min(390px, 48vh); overflow-y: auto; border: 1px solid var(--line); border-radius: 14px; }
.plan-next-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) 125px; align-items: center; gap: 12px; min-width: 0; padding: 14px 15px; border-bottom: 1px solid var(--line); cursor: pointer; }
.plan-next-row:last-child { border-bottom: 0; }
.plan-next-row:hover { background: var(--soft); }
.plan-next-row > input { width: 18px; height: 18px; accent-color: var(--purple); }
.plan-next-identity { min-width: 0; }
.plan-next-identity strong,.plan-next-identity small { display: block; }
.plan-next-identity strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.plan-next-identity small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.plan-next-amount { display: flex; align-items: center; height: 42px; padding: 0 10px; background: var(--paper); border: 1px solid var(--line); border-radius: 9px; color: var(--muted); }
.plan-next-amount input { width: 100%; height: 40px; padding: 0 0 0 3px; color: var(--ink); background: transparent; border: 0; font: inherit; font-weight: 700; }
.plan-next-amount input:focus { outline: 0; }
.plan-next-note { margin: 12px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.plan-next-empty { margin: 0; padding: 35px 22px; color: var(--muted); text-align: center; font-size: 13px; line-height: 1.5; }
.plan-next-button { color: var(--purple-dark); background: var(--lavender); border-color: transparent; }
.plan-next-button:hover { border-color: var(--purple); }

.category-dialog-help {
   margin: 10px 0 0;
   color: var(--muted);
   font-size: 12px;
   line-height: 1.5;
}

.recent-title {
   margin: 0 0 7px;
   color: var(--muted);
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: 0.08em;
}

.transaction {
   display: grid;
   grid-template-columns: 1fr auto 28px;
   gap: 9px;
   align-items: center;
   padding: 9px 0;
   border-bottom: 1px solid var(--line);
   font-size: 12px;
}

.transaction small {
   display: block;
   color: var(--muted);
}

.transaction button {
   border: 0;
   background: none;
   color: var(--red);
   cursor: pointer;
}

.empty-state {
   padding: 55px 30px;
   text-align: center;
   border-bottom: 1px solid var(--line);
}

.empty-state strong {
   display: block;
   font-family: 'DM Serif Display';
   font-size: 24px;
}

.empty-state p {
   color: var(--muted);
}

/* Expense history drawer */
.drawer-backdrop {
   position: fixed;
   z-index: 20;
   inset: 0;
   visibility: hidden;
   background: rgba(39, 29, 42, 0.35);
   opacity: 0;
   transition:
      opacity 0.25s ease,
      visibility 0.25s ease;
}

.history-drawer {
   position: fixed;
   z-index: 21;
   top: 0;
   right: 0;
   width: min(460px, 100%);
   height: 100dvh;
   overflow-y: auto;
   padding: 30px;
   background: var(--paper);
   box-shadow: -18px 0 60px rgba(43, 30, 46, 0.18);
   transform: translateX(102%);
   transition: transform 0.3s ease;
}

body.drawer-open {
   overflow: hidden;
}

body.drawer-open .drawer-backdrop {
   visibility: visible;
   opacity: 1;
}

body.drawer-open .history-drawer {
   transform: translateX(0);
}

.drawer-heading,
.drawer-category {
   display: flex;
   align-items: center;
}

.drawer-heading {
   justify-content: space-between;
   gap: 20px;
   padding-bottom: 25px;
   border-bottom: 1px solid var(--line);
}

.drawer-category {
   gap: 13px;
}

.drawer-category .category-icon {
   width: 42px;
   height: 42px;
   font-size: 20px;
}

.drawer-category .eyebrow {
   margin-bottom: 2px;
}

.drawer-category h2 {
   font-size: 30px;
}

.history-content {
   padding-top: 24px;
}

.history-stats {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px;
}

.history-stat {
   padding: 17px;
   background: var(--lavender);
   border-radius: 13px;
}

.history-stat span {
   display: block;
   margin-bottom: 4px;
   color: var(--muted);
   font-size: 10px;
   font-weight: 700;
   letter-spacing: 0.06em;
   text-transform: uppercase;
}

.history-stat strong {
   font-family: 'DM Serif Display';
   font-size: 25px;
   font-weight: 400;
}

.history-section {
   margin-top: 28px;
}

.history-section h3 {
   margin: 0 0 13px;
   font-size: 12px;
   letter-spacing: 0.1em;
   text-transform: uppercase;
}

.period-history-row {
   padding: 13px 0;
   border-bottom: 1px solid var(--line);
}

.period-history-top {
   display: flex;
   justify-content: space-between;
   gap: 16px;
   margin-bottom: 7px;
   font-size: 12px;
}

.period-history-top span {
   color: var(--muted);
}

.history-bar {
   overflow: hidden;
   height: 5px;
   background: #eee8e3;
   border-radius: 5px;
}

.history-bar span {
   display: block;
   height: 100%;
   background: var(--purple);
   border-radius: inherit;
}

.history-transaction {
   display: grid;
   grid-template-columns: 1fr auto 28px;
   gap: 14px;
   padding: 12px 0;
   border-bottom: 1px solid var(--line);
   font-size: 12px;
}

.history-delete {
   width: 28px;
   height: 28px;
   padding: 0;
   align-self: center;
   color: var(--red);
   background: transparent;
   border: 0;
   border-radius: 7px;
   cursor: pointer;
   font-size: 18px;
}

.history-delete:hover,
.history-delete:focus-visible {
   background: #f8e8e8;
   outline: none;
}

.history-transaction small {
   display: block;
   margin-top: 2px;
   color: var(--muted);
}

.history-empty {
   padding: 55px 15px;
   text-align: center;
}

.history-empty strong {
   display: block;
   font-family: 'DM Serif Display';
   font-size: 24px;
   font-weight: 400;
}

.history-empty p {
   color: var(--muted);
   line-height: 1.5;
}

/* Online accounts and authentication */
[hidden] {
   display: none !important;
}

.top-actions {
   display: flex;
   justify-self: end;
   align-items: center;
   gap: 9px;
}

.sync-status {
   padding: 5px 8px;
   color: var(--muted);
   background: #eee8e3;
   border-radius: 20px;
   font-size: 10px;
   font-weight: 700;
}

.sync-status.online {
   color: #27684f;
   background: var(--green-soft);
}

.sync-status.error {
   color: var(--red);
   background: #f8e8e8;
}

.account-button {
   padding: 9px 12px;
   color: var(--purple-dark);
   background: transparent;
   border: 1px solid var(--accent-border);
   border-radius: 10px;
   cursor: pointer;
   font-size: 12px;
   font-weight: 700;
}

.auth-gate {
   display: grid;
   min-height: 100dvh;
   place-items: center;
   padding: 28px;
   background: radial-gradient(circle at 20% 10%,var(--lavender),transparent 35%),var(--cream);
}

.auth-card {
   width: min(560px,100%);
   padding: clamp(28px,6vw,55px);
   background: var(--paper);
   border: 1px solid var(--line);
   border-radius: 24px;
   box-shadow: var(--shadow);
}

.auth-card .brand-mark {
   margin-bottom: 25px;
}

.auth-card h1 {
   font-size: clamp(38px,7vw,56px);
}

.auth-form {
   display: grid;
   gap: 10px;
   margin-top: 18px;
}

.auth-tabs {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 4px;
   margin-top: 28px;
   padding: 4px;
   background: var(--lavender);
   border-radius: 12px;
}

.auth-tab {
   padding: 10px;
   color: var(--muted);
   background: transparent;
   border: 0;
   border-radius: 9px;
   cursor: pointer;
   font: inherit;
   font-size: 13px;
   font-weight: 700;
}

.auth-tab.active {
   color: var(--purple-dark);
   background: var(--paper);
   box-shadow: 0 2px 8px rgba(52,35,57,.09);
}

.auth-form label,
.join-form label,
.password-form label {
   color: var(--muted);
   font-size: 12px;
   font-weight: 600;
}

.auth-form input,
.join-form input,
.password-form input {
   width: 100%;
   height: 47px;
   padding: 0 13px;
   border: 1px solid #d9d0d8;
   border-radius: 10px;
   outline: 0;
}

.auth-form input:focus,
.join-form input:focus,
.password-form input:focus {
   border-color: var(--purple);
   box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .12);
}

.auth-message {
   min-height: 18px;
   color: var(--green);
   font-size: 12px;
   line-height: 1.5;
}

.auth-message.error {
   color: var(--red);
}

.text-button {
   justify-self: center;
   padding: 4px;
   color: var(--purple-dark);
   background: transparent;
   border: 0;
   cursor: pointer;
   font: inherit;
   font-size: 12px;
   font-weight: 700;
}

.account-panel {
   padding: 29px;
}

#accountDialog {
   max-height: calc(100dvh - 30px);
   overflow-y: auto;
}

.account-detail {
   padding: 12px 0;
   border-bottom: 1px solid var(--line);
}

.account-detail span,
.invite-box > span {
   display: block;
   margin-bottom: 4px;
   color: var(--muted);
   font-size: 10px;
   font-weight: 700;
   letter-spacing: .07em;
   text-transform: uppercase;
}

.theme-settings {
   margin-top: 22px;
   padding-bottom: 22px;
   border-bottom: 1px solid var(--line);
}

.install-settings {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 18px;
   padding: 18px 0;
   border-bottom: 1px solid var(--line);
}

.install-settings h3 {
   margin: 4px 0 2px;
   font-family: 'DM Serif Display';
   font-size: 18px;
   font-weight: 400;
}

.install-settings small {
   color: var(--muted);
}

.install-settings .button {
   flex: 0 0 auto;
}

.reset-settings {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 18px;
   margin-top: 18px;
   padding: 18px 0;
   border-top: 1px solid var(--line);
   border-bottom: 1px solid var(--line);
}

.reset-settings h3 {
   margin: 4px 0 3px;
   font-family: 'DM Serif Display';
   font-size: 18px;
   font-weight: 400;
}

.reset-settings small {
   color: var(--muted);
   line-height: 1.45;
}

.reset-settings .button {
   flex: 0 0 auto;
}

.button.danger-outline {
   color: var(--red);
   background: transparent;
   border: 1px solid rgba(201, 94, 94, .45);
}

.button.danger-outline:hover,
.button.danger-outline:focus-visible {
   color: white;
   background: var(--red);
   outline: none;
}

.button.danger {
   color: white;
   background: var(--red);
   box-shadow: 0 5px 15px rgba(154, 52, 52, .2);
}

.button:disabled {
   cursor: wait;
   opacity: .62;
   transform: none;
}

.confirmation-dialog form {
   text-align: center;
}

.confirmation-dialog .dialog-top {
   justify-content: center;
   margin-bottom: 18px;
}

.confirmation-warning {
   display: grid;
   width: 54px;
   height: 54px;
   margin: 0 auto 17px;
   color: white;
   background: var(--red);
   border-radius: 50%;
   place-items: center;
   font-family: 'DM Serif Display';
   font-size: 31px;
}

.confirmation-copy {
   color: var(--ink);
   line-height: 1.6;
}

.confirmation-note {
   margin-top: 10px;
   color: var(--muted);
   font-size: 12px;
   line-height: 1.55;
}

.confirmation-dialog .dialog-actions {
   justify-content: center;
}

.settings-label {
   color: var(--muted);
   font-size: 10px;
   font-weight: 700;
   letter-spacing: .07em;
   text-transform: uppercase;
}

.theme-settings h3 {
   margin: 4px 0 14px;
   font-family: 'DM Serif Display';
   font-size: 20px;
   font-weight: 400;
}

.mode-toggle {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 4px;
   margin-bottom: 12px;
   padding: 4px;
   background: var(--cream);
   border-radius: 11px;
}

.mode-toggle button {
   padding: 8px;
   color: var(--muted);
   background: transparent;
   border: 0;
   border-radius: 8px;
   cursor: pointer;
   font-size: 11px;
   font-weight: 700;
}

.mode-toggle button.active {
   color: var(--ink);
   background: var(--paper);
   box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
}

.theme-settings small {
   display: block;
   margin-top: 10px;
   color: var(--muted);
}

.theme-picker {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 8px;
}

.theme-choice {
   display: flex;
   align-items: center;
   gap: 7px;
   padding: 8px;
   color: var(--muted);
   background: var(--paper);
   border: 1px solid var(--line);
   border-radius: 10px;
   cursor: pointer;
   font-size: 11px;
   font-weight: 700;
}

.theme-choice:hover,
.theme-choice.active {
   color: var(--ink);
   border-color: var(--purple);
}

.theme-choice.active {
   box-shadow: 0 0 0 2px var(--lavender);
}

.theme-swatch {
   width: 18px;
   height: 18px;
   border: 4px solid;
   border-radius: 50%;
}

.lavender-swatch { color: #76558e; background: #eadff0; }
.ocean-swatch { color: #287b91; background: #d8edf2; }
.sage-swatch { color: #667f62; background: #e0eadb; }
.sunset-swatch { color: #c06c4f; background: #f5ddd2; }
.rose-swatch { color: #ad6681; background: #f1dce4; }
.slate-swatch { color: #586b89; background: #dfe5ee; }

/* Dark-mode surfaces that are intentionally lighter in the daytime palettes */
:root[data-mode='dark'] .period-control,
:root[data-mode='dark'] .category-add {
   background: rgba(255, 255, 255, .05);
}

:root[data-mode='dark'] input,
:root[data-mode='dark'] select,
:root[data-mode='dark'] .income-amount,
:root[data-mode='dark'] .money-input,
:root[data-mode='dark'] .money-input.large,
:root[data-mode='dark'] .row-menu,
:root[data-mode='dark'] .date-picker-trigger {
   color: var(--ink);
   background: #2c2730;
   border-color: var(--line);
}

:root[data-mode='dark'] .money-input input,
:root[data-mode='dark'] .income-amount input,
:root[data-mode='dark'] .onboarding-form .money-input input,
:root[data-mode='dark'] .onboarding-bill-fields .money-input input {
   background: transparent;
   border-color: transparent;
}

:root[data-mode='dark'] .quick-purchase-choice span {
   color: var(--ink);
   background: #2c2730;
   border-color: var(--line);
}

:root[data-mode='dark'] .quick-purchase-choice input:checked + span {
   color: var(--purple-dark);
   background: var(--lavender);
   border-color: var(--purple);
}

:root[data-mode='dark'] .quick-purchase-dialog form {
   scrollbar-color: var(--muted) transparent;
}

:root[data-mode='dark'] .custom-category-fields {
   background: rgba(255,255,255,.05);
   border: 1px solid var(--line);
}

:root[data-mode='dark'] .expense-row.paid {
   background: #202a26;
}

:root[data-mode='dark'] .log-button,
:root[data-mode='dark'] .history-stat,
:root[data-mode='dark'] .invite-box,
:root[data-mode='dark'] .expense-choice span,
:root[data-mode='dark'] .auth-tabs {
   background: var(--lavender);
}

:root[data-mode='dark'] .row-menu button:hover,
:root[data-mode='dark'] .icon-button:hover,
:root[data-mode='dark'] .category-add:hover,
:root[data-mode='dark'] .category-add:focus-visible {
   background: rgba(255, 255, 255, .08);
}

:root[data-mode='dark'] .progress-track,
:root[data-mode='dark'] .history-bar,
:root[data-mode='dark'] .sync-status {
   background: #3a343d;
}

:root[data-mode='dark'] .auth-gate,
:root[data-mode='dark'] .onboarding {
   background: radial-gradient(circle at 20% 10%, var(--lavender), transparent 35%), var(--cream);
}

.invite-box {
   margin-top: 22px;
   padding: 16px;
   background: var(--lavender);
   border-radius: 13px;
}

.invite-box div {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
}

.invite-box code {
   color: var(--purple-dark);
   font-size: 19px;
   font-weight: 700;
   letter-spacing: .08em;
}

.invite-box small {
   display: block;
   margin-top: 8px;
   color: var(--muted);
}

.join-form {
   display: grid;
   grid-template-columns: 1fr auto;
   gap: 9px;
   align-items: end;
   margin-top: 22px;
}

.password-form {
   display: grid;
   grid-template-columns: 1fr auto;
   gap: 9px;
   align-items: end;
   margin-top: 12px;
   padding-top: 18px;
   border-top: 1px solid var(--line);
}

.password-form input {
   margin-top: 5px;
}

@media (max-width: 480px) {
   .join-form,
   .password-form {
      grid-template-columns: 1fr;
   }

   .theme-picker {
      grid-template-columns: repeat(2, 1fr);
   }

   .install-settings {
      align-items: stretch;
      flex-direction: column;
   }

   .reset-settings {
      align-items: stretch;
      flex-direction: column;
   }

   .reset-settings .button,
   .confirmation-dialog .dialog-actions .button {
      width: 100%;
   }

   .confirmation-dialog .dialog-actions {
      flex-direction: column-reverse;
   }
}

.sign-out {
   width: 100%;
   margin-top: 10px;
   color: var(--red);
   background: #f8e8e8;
}

/* First-time household setup */
.onboarding {
   min-height: 100dvh;
   padding: 35px 20px;
   background: radial-gradient(circle at 85% 15%,var(--lavender),transparent 30%),var(--cream);
}

.onboarding-card {
   width: min(820px,100%);
   margin: auto;
   padding: clamp(28px,5vw,52px);
   background: var(--paper);
   border: 1px solid var(--line);
   border-radius: 25px;
   box-shadow: var(--shadow);
}

.onboarding-progress {
   display: grid;
   grid-template-columns: repeat(3,1fr);
   gap: 8px;
   margin-bottom: 38px;
}

.onboarding-progress span {
   height: 5px;
   background: #e9e1dc;
   border-radius: 5px;
}

.onboarding-progress span.active {
   background: var(--purple);
}

.onboarding-status {
   margin: -22px 0 22px;
   text-align: center;
}

.onboarding-status:empty {
   display: none;
}

.onboarding-form {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 15px;
   margin-top: 30px;
}

.onboarding-form label {
   color: var(--muted);
   font-size: 12px;
   font-weight: 600;
}

.onboarding-form input,
.onboarding-form select,
.onboarding-join input {
   display: block;
   width: 100%;
   height: 46px;
   margin-top: 7px;
   padding: 0 12px;
   background: white;
   border: 1px solid #d9d0d8;
   border-radius: 10px;
}

.onboarding-form .button {
   grid-column: 1/-1;
   margin-top: 5px;
}

.onboarding-form .onboarding-wide {
   grid-column: 1/-1;
}

.onboarding-form .money-input {
   margin-top: 7px;
}

.onboarding-form .money-input input {
   margin-top: 0;
   border: 0;
}

.onboarding-join {
   margin-top: 30px;
   padding-top: 22px;
   border-top: 1px solid var(--line);
}

.onboarding-join > span {
   color: var(--muted);
   font-size: 12px;
}

.onboarding-join > div {
   display: grid;
   grid-template-columns: 1fr auto;
   gap: 9px;
   align-items: end;
}

.expense-picker {
   display: grid;
   grid-template-columns: repeat(2,1fr);
   gap: 13px;
   margin-top: 28px;
}

.expense-picker fieldset {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin: 0;
   padding: 16px;
   border: 1px solid var(--line);
   border-radius: 15px;
}

.expense-picker legend {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 0 5px;
   font-family: 'DM Serif Display';
   font-size: 18px;
}

.expense-choice input {
   position: absolute;
   opacity: 0;
}

.expense-choice span {
   display: block;
   padding: 7px 10px;
   color: var(--muted);
   background: #f5f1ed;
   border: 1px solid transparent;
   border-radius: 20px;
   cursor: pointer;
   font-size: 11px;
}

.expense-choice input:checked + span {
   color: var(--purple-dark);
   background: var(--lavender);
   border-color: var(--accent-border);
   font-weight: 700;
}

.onboarding-actions {
   display: flex;
   justify-content: space-between;
   gap: 10px;
   margin-top: 28px;
}

.onboarding-bill-list {
   display: grid;
   gap: 13px;
   margin-top: 28px;
}

.onboarding-bill {
   padding: 18px;
   background: var(--cream);
   border: 1px solid var(--line);
   border-radius: 16px;
}

.onboarding-bill-heading {
   display: flex;
   align-items: center;
   gap: 11px;
   margin-bottom: 15px;
}

.onboarding-bill-heading strong,
.onboarding-bill-heading small {
   display: block;
}

.onboarding-bill-heading strong {
   font-size: 14px;
}

.onboarding-bill-heading small {
   margin-top: 2px;
   color: var(--muted);
   font-size: 10px;
}

.onboarding-bill-fields {
   display: grid;
   grid-template-columns: .85fr 1.2fr 1fr;
   gap: 12px;
}

.onboarding-bill-fields label {
   color: var(--muted);
   font-size: 11px;
   font-weight: 600;
}

.onboarding-bill-fields input,
.onboarding-bill-fields select {
   width: 100%;
   height: 45px;
   margin-top: 7px;
   padding: 0 12px;
   color: var(--ink);
   background: var(--paper);
   border: 1px solid var(--line);
   border-radius: 10px;
}

.onboarding-bill-fields .money-input {
   margin-top: 7px;
   background: var(--paper);
}

.onboarding-bill-fields .money-input input {
   height: auto;
   margin-top: 0;
   padding-left: 0;
   border: 0;
}

/* Tablet and mobile layout */
@media (max-width: 800px) {
   .onboarding-form,
   .expense-picker,
   .onboarding-bill-fields {
      grid-template-columns: 1fr;
   }
   .shell {
      width: min(100% - 24px, 650px);
   }

   .view-nav { position: fixed; z-index: 90; right: 8px; bottom: max(8px, env(safe-area-inset-bottom)); left: 8px; width: auto; margin: 0; padding: 6px; border-radius: 17px; box-shadow: 0 12px 35px rgb(31 24 34 / .2); }
   .view-nav button { flex: 1; min-width: 0; min-height: 46px; padding-inline: 4px; font-size: 11px; }
   footer { padding-bottom: 100px; }
   .shell[data-active-view='activity'] .period-control { display: none; }
   .activity-hero { align-items: stretch; flex-direction: column; padding: 25px; }
   .activity-hero-actions { display: grid; grid-template-columns: 1fr 1fr; }
   .activity-log-button,.activity-customize-button { width: 100%; }
   .activity-layout { grid-template-columns: 1fr; }
   .activity-side { grid-template-columns: 1fr 1fr; grid-row: 1; }
   .activity-panel-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
   .overview-heading { align-items: stretch; flex-direction: column; }
   .insights-controls { justify-items: stretch; }
   .insights-range { width: 100%; }
   .insights-range button { flex: 1; }
   .overview-period-controls { align-self: stretch; }
   .overview-period-controls button { flex: 1; }

   .topbar {
      grid-template-columns: 1fr auto;
      height: auto;
      padding: 15px 0;
   }

   .period-control {
      grid-row: 2;
      grid-column: 1/-1;
      justify-self: stretch;
      justify-content: center;
      margin-top: 12px;
   }

   .topbar > .button {
      padding: 10px 12px;
   }

   #payView .welcome {
      display: none;
   }

   #payView.mobile-overview-open .welcome {
      grid-template-columns: 1fr;
      display: grid;
      gap: 25px;
      margin: 10px 0 18px;
   }

   .mobile-budget-overview-toggle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      min-height: 58px;
      margin-bottom: 10px;
      padding: 10px 15px;
      color: var(--ink);
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 14px;
      cursor: pointer;
      text-align: left;
   }

   .mobile-budget-overview-toggle strong,
   .mobile-budget-overview-toggle small { display: block; }
   .mobile-budget-overview-toggle strong { font-size: 13px; }
   .mobile-budget-overview-toggle small { margin-top: 2px; color: var(--muted); font-size: 10px; font-weight: 500; }
   .mobile-budget-overview-toggle > span:last-child { color: var(--purple); font-size: 20px; transition: transform .2s ease; }
   .mobile-budget-overview-toggle[aria-expanded='true'] > span:last-child { transform: rotate(180deg); }

   .allocation-content {
      grid-template-columns: 170px minmax(0, 1fr);
   }

   .allocation-chart {
      width: 170px;
      height: 170px;
   }

   main {
      padding-top: 37px;
   }

   #payView .summary { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-bottom: 14px; }
   #payView .summary-card { align-items: flex-start; gap: 9px; min-width: 0; padding: 14px; border-radius: 13px; }
   #payView .summary-card.available,#payView .summary-card.savings-card { grid-column: 1/-1; }
   #payView .summary-icon { flex-basis: 34px; width: 34px; height: 34px; font-size: 16px; }
   #payView .summary-card strong { font-size: 21px; }
   #payView .summary-card p,#payView .summary-card small { font-size: 10px; }
   #payView .savings-card .text-button { position: static; align-self: center; margin-left: auto; }

   .overview-totals { grid-template-columns: 1fr; }
   .overview-grid { grid-template-columns: 1fr; }

   .bill-reminder {
      grid-template-columns: 38px minmax(0, 1fr);
   }

   .bill-reminder button {
      grid-column: 2;
      justify-self: start;
   }

   .section-heading {
      display: block;
      padding: 18px 4px 12px;
   }

   .section-heading h2 { font-size: 28px; }

   .section-heading-actions {
      align-items: stretch;
      flex-direction: column;
      gap: 12px;
      margin-top: 15px;
   }

   #payView .section-heading-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

   .category-create-button {
      width: 100%;
   }

   .plan-next-button { width: 100%; }
   .collapse-budget-button { width: 100%; }
   .budget-actions-menu,.budget-actions-menu summary { width: 100%; }
   .budget-actions-menu > div { position: static; width: 100%; margin-top: 7px; box-shadow: none; }

   .legend {
      margin-top: 15px;
      flex-wrap: wrap;
   }

   .list-header {
      display: none;
   }

   .category-header {
      padding: 17px 20px 11px;
      grid-template-columns: minmax(0,1fr) auto 34px 24px;
      gap: 8px;
   }

   .category-group.collapsed .category-header { grid-template-columns: minmax(0,1fr) auto 24px; padding: 14px 15px; }
   .category-group.collapsed .category-title { grid-column: 1; grid-row: 1; }
   .category-group.collapsed .category-remaining { display: block; grid-column: 2; grid-row: 1; text-align: right; }
   .category-group.collapsed .category-add,.category-group.collapsed .category-delete,.category-group.collapsed .category-sort { display: none; }
   .category-group.collapsed .category-chevron { grid-column: 3; grid-row: 1; }
   .category-group.collapsed .category-title small { font-size: 10px; }

   .category-planned {
      display: none;
   }

   .category-title {
      grid-column: 1/2;
      min-width: 0;
   }

   .category-title .category-name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
   }

   .category-remaining {
      grid-column: 1/2;
      grid-row: 2;
      text-align: left;
   }

   .category-add {
      grid-column: 2;
      grid-row: 1/3;
   }

   .category-delete {
      grid-column: 3;
      grid-row: 1/3;
   }

   .category-sort {
      grid-column: 1/3;
      grid-row: 3;
      grid-template-columns: auto minmax(0,1fr);
      align-items: center;
      justify-self: stretch;
      gap: 8px;
      margin-top: 5px;
   }

   .category-sort select {
      width: 100%;
   }

   .category-chevron {
      grid-column: 4;
      grid-row: 1/3;
   }

   .expense-row {
      grid-template-columns: 1fr 1fr 34px;
      gap: 12px;
      padding: 18px 20px;
   }

   .expense-main {
      grid-column: 1/3;
   }

   .money-column {
      padding: 8px 10px;
      background: #f8f4f1;
      border-radius: 8px;
   }

   :root[data-mode='dark'] .money-column {
      color: var(--ink);
      background: #2c2730;
      box-shadow: inset 0 0 0 1px var(--line);
   }

   :root[data-mode='dark'] .money-column strong {
      color: var(--ink);
   }

   .mobile-label {
      display: block;
      color: var(--muted);
      font-size: 10px;
   }

   .progress-column {
      grid-column: 1/3;
   }

   .log-button {
      grid-column: 1/3;
   }

   .row-menu-wrap {
      grid-column: 3;
      grid-row: 1;
   }

   .form-grid {
      grid-template-columns: 1fr;
   }

   /* Prevent iOS Safari from zooming focused fields and keep native controls
      comfortably tappable with one hand. */
   input,
   select,
   textarea,
   .income-row input,
   .category-sort select,
   .planned-input,
   dialog label > input,
   dialog label > select,
   .auth-form input,
   .join-form input,
   .password-form input,
   .onboarding-form input,
   .onboarding-form select,
   .onboarding-join input,
   .onboarding-bill-fields input,
   .onboarding-bill-fields select {
      font-size: 16px;
   }

   input,
   select,
   textarea {
      min-width: 0;
   }

   input[type='date'] {
      min-height: 48px;
      line-height: 1.2;
   }

   .button,
   .account-button,
   .auth-tab,
   .text-button,
   .category-add,
   .category-chevron,
   .log-button,
   .paid-toggle {
      min-height: 44px;
   }

   .period-control {
      min-width: 0;
      padding: 7px 8px 7px 12px;
   }

   .period-control label {
      flex: 0 0 auto;
   }

   .period-control select {
      flex: 1 1 auto;
      width: auto;
      min-width: 0;
      height: 44px;
      font-size: 16px;
   }

   .period-control > button {
      flex: 0 0 44px;
      width: 44px;
      height: 44px;
      margin: 0;
      justify-content: center;
   }

   .income-row {
      grid-template-columns: minmax(0, 1fr) minmax(112px, .65fr) 44px;
      gap: 8px;
   }

   .income-row input,
   .income-amount {
      height: 44px;
   }

   .remove-income {
      width: 44px;
      height: 44px;
   }

   .money-input,
   .onboarding-form .money-input,
   .onboarding-bill-fields .money-input {
      min-height: 48px;
   }

   .money-input input {
      min-height: 46px;
   }

   .category-sort {
      font-size: 11px;
   }

   .category-sort select {
      min-height: 44px;
      padding: 8px 34px 8px 11px;
   }

   .planned-editor {
      left: 0;
      grid-template-columns: minmax(0, 1fr) 44px 44px;
      width: min(245px, calc(100vw - 64px));
   }

   .planned-input,
   .planned-editor button {
      height: 44px;
   }

   dialog {
      width: min(100% - 16px, 590px);
      max-height: calc(100dvh - 16px);
      border-radius: 18px;
   }

   dialog form,
   .account-panel {
      padding: 22px 20px max(22px, env(safe-area-inset-bottom));
   }

   .quick-purchase-dialog form {
      max-height: calc(100dvh - 16px);
      overscroll-behavior: contain;
   }

   .dialog-top {
      align-items: flex-start;
      gap: 14px;
      margin-bottom: 20px;
   }

   .dialog-top h2 {
      font-size: 28px;
      line-height: 1.05;
   }

   .dialog-top .icon-button {
      flex: 0 0 44px;
      width: 44px;
      height: 44px;
   }

   dialog label > input,
   dialog label > select,
   .auth-form input,
   .join-form input,
   .password-form input,
   .onboarding-form input,
   .onboarding-form select,
   .onboarding-join input,
   .onboarding-bill-fields input,
   .onboarding-bill-fields select {
      height: 48px;
   }

   .form-grid {
      gap: 16px;
      margin: 18px 0;
   }

   .dialog-actions {
      gap: 10px;
      margin-top: 22px;
   }

   .dialog-actions .button {
      min-height: 48px;
      padding-inline: 18px;
   }

   .date-picker-shell {
      padding: 20px 16px max(18px, env(safe-area-inset-bottom));
   }

   .date-picker-nav button {
      width: 44px;
      height: 44px;
   }

   .date-picker-grid {
      gap: 2px;
   }

   .date-picker-grid button {
      min-width: 40px;
      min-height: 40px;
      font-size: 14px;
   }

   .expense-choice span,
   .quick-purchase-choice span {
      display: grid;
      min-height: 48px;
      padding: 10px 12px;
      place-items: center;
      font-size: 14px;
   }

   .add-custom-category {
      min-height: 48px;
      font-size: 14px;
   }

   .onboarding {
      padding: max(16px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom));
   }

   .onboarding-card,
   .auth-card {
      padding: 24px 20px;
      border-radius: 20px;
   }

   .auth-gate {
      padding: max(16px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom));
   }
}

@media (max-width: 520px) {
   .quick-choice-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   .allocation-heading {
      display: block;
   }

   .allocation-heading > small {
      display: block;
      margin-top: 7px;
   }

   .allocation-content {
      grid-template-columns: 1fr;
      justify-items: center;
   }

   .allocation-legend {
      width: 100%;
   }

   .quick-purchase-categories {
      margin: 18px 0;
   }

   .quick-purchase-amount .money-input,
   .quick-purchase-amount .money-input input {
      min-height: 58px;
   }

   .dialog-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
   }

   .dialog-actions .button {
      width: 100%;
   }
}

/* Small phone adjustments */
@media (max-width: 430px) {
   h1 {
      font-size: 43px;
   }

   .brand span:last-child {
      display: none;
   }

   .summary-card {
      padding: 17px;
   }

   .income-card {
      padding: 19px;
   }

   .shell {
      width: calc(100% - 16px);
   }

   .activity-side { grid-template-columns: 1fr; }
   .activity-item { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 9px; padding-inline: 13px; }
   .activity-category-icon { width: 34px; height: 34px; }
   .activity-delete { grid-column: 3; grid-row: 2; justify-self: end; height: 24px; }

   .top-actions {
      gap: 5px;
   }

   .top-actions .button {
      padding-inline: 11px;
   }

   .sync-status {
      display: none;
   }

   .income-row {
      grid-template-columns: minmax(0, 1fr) 44px;
   }

   .income-amount {
      grid-column: 1;
      grid-row: 2;
   }

   .remove-income {
      grid-column: 2;
      grid-row: 1 / 3;
      align-self: stretch;
      height: 100%;
      min-height: 44px;
   }

   .date-picker-top {
      align-items: flex-start;
   }

   .date-picker-top h2 {
      font-size: 25px;
   }

   .date-picker-grid button {
      min-width: 36px;
      min-height: 36px;
   }

   .onboarding-actions,
   .date-picker-actions {
      align-items: stretch;
      flex-direction: column-reverse;
   }

   .onboarding-actions .button,
   .date-picker-actions .button {
      width: 100%;
      min-height: 48px;
   }

   footer {
      display: block;
   }

   footer span {
      display: block;
      margin-bottom: 5px;
   }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
   * {
      scroll-behavior: auto !important;
      transition: none !important;
   }
}