:root {
  color-scheme: dark;
  --bg: #080b14;
  --surface: rgba(17, 21, 35, .82);
  --surface-solid: #111523;
  --surface-2: #171c2d;
  --line: rgba(255, 255, 255, .09);
  --line-strong: rgba(255, 255, 255, .16);
  --text: #f4f5fb;
  --muted: #9299ad;
  --violet: #a975ff;
  --violet-strong: #8455ef;
  --cyan: #36d9e9;
  --coral: #ff7187;
  --green: #4ade9a;
  --yellow: #f7ca61;
  --radius: 20px;
  --shadow: 0 22px 60px rgba(0, 0, 0, .28);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { min-width: 320px; min-height: 100vh; margin: 0; overflow-x: hidden; background: radial-gradient(circle at 55% -20%, #252044 0, transparent 35%), var(--bg); color: var(--text); font-family: "DM Sans", sans-serif; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
[hidden] { display: none !important; }

.ambient { position: fixed; width: 420px; height: 420px; border-radius: 50%; filter: blur(120px); opacity: .09; pointer-events: none; }
.ambient--one { left: 20%; top: -230px; background: var(--violet); }
.ambient--two { right: -250px; bottom: -180px; background: var(--cyan); }

h1, h2, h3, p { margin-top: 0; }
h1, h2, h3, strong, .brand { font-family: "Manrope", sans-serif; }
h1 { margin-bottom: 0; font-size: clamp(1.6rem, 2.5vw, 2.15rem); letter-spacing: -.045em; }
h2 { margin-bottom: 0; font-size: 1.18rem; letter-spacing: -.025em; }
h3 { margin-bottom: 0; font-size: .95rem; }
.eyebrow { margin-bottom: .35rem; color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }

.auth-shell { display: grid; min-height: 100vh; padding: 32px 20px; place-items: center; }
.auth-card { position: relative; width: min(100%, 450px); padding: 50px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 28px; background: linear-gradient(145deg, rgba(24, 29, 48, .96), rgba(12, 15, 27, .98)); box-shadow: var(--shadow); }
.auth-card::before { position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, transparent, var(--violet), var(--cyan), transparent); content: ""; }
.auth-card h1 { margin: 10px 0 10px; font-size: 2.3rem; text-align: center; }
.auth-card > .eyebrow { margin-top: 42px; text-align: center; }
.auth-card__lede { margin: 0 auto 30px; max-width: 330px; color: var(--muted); text-align: center; line-height: 1.55; }
.brand { display: flex; align-items: center; gap: 11px; font-size: .98rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.2; }
.brand--centered { justify-content: center; font-size: 1.1rem; }
.brand__mark { display: grid; width: 39px; height: 39px; border: 1px solid rgba(169, 117, 255, .4); border-radius: 12px; background: rgba(169, 117, 255, .1); place-items: center; }
.brand__mark svg { width: 26px; fill: var(--cyan); stroke: var(--violet); stroke-linecap: round; stroke-width: 2.5; }
.auth-form { display: grid; gap: 9px; }
label { color: #cdd1de; font-size: .78rem; font-weight: 600; }
.label-row { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
input, select, textarea { width: 100%; min-height: 46px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 11px; outline: none; background: rgba(5, 8, 17, .56); color: var(--text); transition: border-color .2s, box-shadow .2s; }
textarea { padding-top: 12px; padding-bottom: 12px; resize: vertical; line-height: 1.45; }
input:focus, select:focus, textarea:focus { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(169, 117, 255, .12); }
.text-button { padding: 0; border: 0; background: none; color: var(--violet); font-size: .76rem; cursor: pointer; }
.form-message { min-height: 20px; margin: 14px 0 0; color: var(--coral); font-size: .8rem; text-align: center; }
.form-message.is-success { color: var(--green); }
.security-note { margin: 18px 0 0; color: #646c82; font-size: .7rem; text-align: center; }
.security-note span { margin-right: 4px; color: var(--green); }

.button { display: inline-flex; min-height: 42px; padding: 0 17px; align-items: center; justify-content: center; gap: 12px; border: 1px solid transparent; border-radius: 11px; font-size: .8rem; font-weight: 700; text-decoration: none; cursor: pointer; transition: transform .15s, border-color .2s, background .2s; }
.button:hover { transform: translateY(-1px); }
.button:disabled { cursor: wait; opacity: .55; transform: none; }
.button--wide { width: 100%; margin-top: 14px; }
.button--primary { background: linear-gradient(135deg, var(--violet), var(--violet-strong)); color: white; box-shadow: 0 10px 30px rgba(132, 85, 239, .22); }
.button--secondary { border-color: var(--line-strong); background: rgba(255, 255, 255, .045); }
.button--ghost { background: transparent; color: var(--muted); }
.button--danger { border-color: rgba(255, 113, 135, .28); background: rgba(255, 113, 135, .08); color: #ff9dac; }

.app-shell { display: grid; min-height: 100vh; grid-template-columns: 220px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; display: flex; height: 100vh; padding: 27px 22px 22px; flex-direction: column; border-right: 1px solid var(--line); background: rgba(8, 11, 20, .72); backdrop-filter: blur(20px); }
.nav { display: grid; gap: 7px; margin-top: 54px; }
.nav__item { display: flex; width: 100%; min-height: 44px; padding: 0 13px; align-items: center; gap: 12px; border: 1px solid transparent; border-radius: 11px; background: transparent; color: var(--muted); font-size: .82rem; font-weight: 600; text-align: left; cursor: pointer; }
.nav__item:hover { color: var(--text); background: rgba(255, 255, 255, .035); }
.nav__item.is-active { border-color: rgba(169, 117, 255, .18); background: rgba(169, 117, 255, .1); color: #cdb5ff; }
.nav__icon { width: 20px; color: currentColor; font-size: 1rem; text-align: center; }
.sidebar__bottom { display: grid; gap: 16px; margin-top: auto; }
.nav__item--muted { border-top: 1px solid var(--line); border-radius: 0; }
.secure-pill { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; color: #6f778c; font-size: .65rem; }
.secure-pill span { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }

.content-shell { min-width: 0; }
.balance-controls { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.balance-controls .button { min-height: 38px; }
.balance-control-slot { display: flex; }
.balance-control-slot--dashboard { justify-content: flex-end; margin-bottom: 14px; }
.asset-heading-actions { display: flex; align-items: center; gap: 9px; }
.as-of-control { display: flex; height: 42px; padding: 0 6px 0 14px; align-items: center; gap: 8px; border: 1px solid var(--line-strong); border-radius: 11px; background: rgba(255, 255, 255, .035); }
.as-of-control span { color: var(--muted); white-space: nowrap; }
.as-of-control select { width: auto; min-height: 32px; padding: 0 26px 0 4px; border: 0; background: transparent; font-size: .78rem; }
.icon-button { display: grid; width: 38px; height: 38px; border: 1px solid var(--line-strong); border-radius: 10px; background: rgba(255, 255, 255, .035); cursor: pointer; place-items: center; }
.mobile-only { display: none; }
.mobile-menu-trigger { position: fixed; top: 12px; right: 12px; z-index: 16; }

#mainContent, .empty-state, .loading-state { padding: 32px 4vw 60px; }
.loading-state { display: grid; min-height: 60vh; color: var(--muted); place-items: center; align-content: center; }
.loader { width: 34px; height: 34px; border: 3px solid var(--line-strong); border-top-color: var(--violet); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty-state { max-width: 620px; min-height: 65vh; margin: auto; text-align: center; place-content: center; }
.empty-state:not([hidden]) { display: grid; }
.empty-state__icon { display: grid; width: 62px; height: 62px; margin: 0 auto 20px; border: 1px solid rgba(169, 117, 255, .35); border-radius: 18px; background: rgba(169, 117, 255, .1); color: var(--violet); font-size: 1.6rem; place-items: center; }
.empty-state h2 { font-size: 1.7rem; }
.empty-state > p:not(.eyebrow):not(.form-message) { margin: 14px auto 26px; color: var(--muted); line-height: 1.6; }

.metric-grid { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.metric-card, .panel { border: 1px solid var(--line); background: linear-gradient(145deg, rgba(20, 25, 41, .88), rgba(13, 17, 29, .82)); box-shadow: 0 16px 46px rgba(0, 0, 0, .12); }
.metric-card { min-height: 130px; padding: 16px 18px; border-radius: 17px; }
.metric-card--hero { border-color: rgba(169, 117, 255, .24); background: linear-gradient(145deg, rgba(82, 55, 137, .28), rgba(19, 22, 37, .88)); }
.metric-card__heading { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: .73rem; font-weight: 600; }
.metric-icon { display: grid; width: 27px; height: 27px; border-radius: 8px; font-size: .65rem; place-items: center; }
.metric-icon--violet { background: rgba(169, 117, 255, .13); color: var(--violet); }
.metric-icon--cyan { background: rgba(54, 217, 233, .12); color: var(--cyan); }
.metric-icon--coral { background: rgba(255, 113, 135, .11); color: var(--coral); }
.metric-icon--green { background: rgba(74, 222, 154, .11); color: var(--green); }
.metric-icon--yellow { background: rgba(247, 202, 97, .11); color: var(--yellow); }
.metric-card > strong { display: block; margin: 10px 0 3px; font-size: clamp(1.45rem, 2vw, 1.85rem); letter-spacing: -.045em; }
.metric-change { margin: 0; color: var(--muted); font-size: .67rem; line-height: 1.35; }
.metric-change.is-positive { color: var(--green); }
.metric-change.is-negative { color: var(--coral); }

.dashboard-grid { display: grid; gap: 14px; margin-top: 14px; grid-template-columns: minmax(0, 2.15fr) minmax(280px, .85fr); }
.panel { padding: 22px; border-radius: var(--radius); }
.panel__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.panel__header > div > p:not(.eyebrow) { margin: 7px 0 0; color: var(--muted); font-size: .78rem; }
.chart-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 16px; color: var(--muted); font-size: .66rem; }
.legend-dot { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; }
.legend-dot--violet { background: var(--violet); }
.legend-dot--cyan { background: var(--cyan); }
.legend-dot--coral { background: var(--coral); }
.chart-wrap { position: relative; width: 100%; }
.chart-wrap--main { height: 280px; margin-top: 20px; }
.debt-history-panel { margin-top: 14px; }
.chart-wrap--debt { height: 340px; margin-top: 16px; }
.balance-sheet { display: grid; gap: 0; margin-top: 18px; }
.balance-sheet__section { margin-top: 10px; }
.balance-sheet__section:first-child { margin-top: 0; }
.balance-sheet__section--liabilities { margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line-strong); }
.balance-sheet__heading { margin: 0 0 4px; color: var(--muted); font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.balance-sheet__row { display: flex; padding: 8px 0; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); font-size: .76rem; }
.balance-sheet__row span { color: #cdd1de; }
.balance-sheet__row strong, .balance-sheet__net-worth strong { font-variant-numeric: tabular-nums; }
.balance-sheet__row strong { font-weight: 600; }
.balance-sheet__subtotal { padding: 9px 0; border-bottom: 0; font-weight: 700; }
.balance-sheet__subtotal span, .balance-sheet__subtotal strong { color: var(--text); }
.balance-sheet__net-worth { display: flex; margin-top: 10px; padding-top: 14px; align-items: center; justify-content: space-between; gap: 12px; border-top: 2px solid var(--line-strong); color: #cfbaff; font-size: .9rem; font-weight: 700; }

.projection-panel { margin-top: 14px; }
.panel__header--projection { align-items: center; }
.projection-summary { display: flex; gap: 14px; }
.projection-summary > div { min-width: 150px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.025); }
.projection-summary span, .projection-summary small { display: block; color: var(--muted); font-size: .63rem; }
.projection-summary strong { display: block; margin: 5px 0 2px; color: #cfbaff; font-size: 1.15rem; }
.projection-content { display: grid; gap: 36px; margin-top: 25px; grid-template-columns: minmax(0, 1.8fr) minmax(260px, .7fr); }
.chart-wrap--projection { height: 320px; }
.rate-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rate-heading span { color: var(--violet); font-size: .65rem; }
.rate-heading__actions { display: flex; align-items: center; gap: 9px; }
.reset-rate-button { min-height: 30px; padding: 0 10px; border: 1px solid rgba(169,117,255,.28); border-radius: 8px; background: rgba(169,117,255,.08); color: #cdb8ff; font: 600 .61rem/1 "DM Sans", sans-serif; cursor: pointer; }
.reset-rate-button:hover { border-color: rgba(169,117,255,.55); background: rgba(169,117,255,.14); }
.reset-rate-button:disabled { cursor: wait; opacity: .65; }
.growth-rates { display: grid; gap: 10px; margin-top: 14px; }
.growth-rate { display: grid; padding: 12px 13px; align-items: center; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.025); grid-template-columns: 1fr 72px 18px; }
.growth-rate label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.growth-rate input { min-height: 32px; padding: 0 7px; text-align: right; }
.growth-rate span { color: var(--muted); font-size: .75rem; text-align: right; }
.fine-print { margin: 14px 0 0; color: #656d81; font-size: .64rem; line-height: 1.5; }

.section-heading { display: flex; margin-bottom: 22px; align-items: center; justify-content: space-between; }
.section-heading h2 { font-size: 1.55rem; }
.account-heading-actions { display: flex; gap: 9px; }
.account-groups { display: grid; gap: 18px; }
.asset-summary-grid { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.asset-account-groups { margin-top: 18px; }
.account-group { padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(17,21,35,.72); }
.account-group__header { display: flex; margin-bottom: 14px; align-items: center; justify-content: space-between; }
.account-group__header span { color: var(--muted); font-size: .7rem; line-height: 1.45; text-align: right; }
.account-list { display: grid; gap: 8px; }
.account-row { display: grid; min-height: 62px; padding: 8px 13px; align-items: center; border: 1px solid transparent; border-radius: 11px; background: rgba(255,255,255,.025); grid-template-columns: minmax(260px, 1fr) minmax(90px, .25fr) 100px 250px; }
.account-row:hover { border-color: var(--line); }
.account-row--hidden { border-color: rgba(169, 117, 255, .13); background: rgba(169, 117, 255, .045); }
.account-row__details { display: flex; min-width: 0; align-items: center; gap: 11px; }
.account-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; }
.account-row__image { width: 54px; aspect-ratio: 1.59 / 1; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.04); object-fit: cover; }
.account-row__name { max-width: 190px; overflow: hidden; flex: 0 1 auto; font-family: "DM Sans", sans-serif; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.account-row__inception, .account-row__limit, .account-row__note, .account-row__rate { color: var(--muted); font-size: .68rem; }
.account-row__inception, .account-row__limit { flex: 0 0 auto; }
.account-row__note { min-width: 0; flex: 1 1 140px; line-height: 1.4; overflow-wrap: anywhere; }
.account-row__balance { font-size: .86rem; font-weight: 700; text-align: right; }
.account-row__rate { text-align: right; }
.account-row__actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.visibility-button { min-width: 66px; height: 30px; padding: 0 9px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.025); color: var(--muted); font-size: .65rem; cursor: pointer; }
.visibility-button:hover { border-color: rgba(169,117,255,.35); color: #cdb5ff; }
.account-history-button { min-height: 30px; padding: 0 9px; border: 1px solid rgba(169,117,255,.24); border-radius: 8px; background: rgba(169,117,255,.06); color: #cdb5ff; font-size: .64rem; white-space: nowrap; cursor: pointer; }
.account-history-button:hover { border-color: rgba(169,117,255,.45); background: rgba(169,117,255,.11); }
.edit-account { width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.edit-account:hover { background: rgba(255,255,255,.06); color: var(--text); }
.account-delete-button { min-height: 30px; padding: 0 8px; border-radius: 8px; font-size: .63rem; white-space: nowrap; }

.spend-loading { display: grid; min-height: 45vh; color: var(--muted); place-items: center; align-content: center; }
.income-heading { align-items: flex-end; gap: 18px; }
.income-heading > div:first-child > p:not(.eyebrow) { margin: 7px 0 0; color: var(--muted); font-size: .78rem; line-height: 1.5; }
.income-heading-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.income-heading-actions .button { min-height: 38px; padding: 0 13px; }
.income-view-tabs { display: flex; width: max-content; max-width: 100%; margin: 0 0 14px; padding: 3px; overflow-x: auto; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.025); gap: 4px; }
.income-view-tabs .filter-pill { min-height: 32px; border-color: transparent; }
.income-chart-panel { margin-bottom: 25px; }
.income-chart-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; color: var(--muted); font-size: .66rem; }
.income-chart-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.income-legend-dot { width: 8px; height: 8px; border-radius: 3px; }
.income-legend-dot--regular { background: var(--cyan); }
.income-legend-dot--bonus { background: var(--violet); }
.income-legend-line { width: 18px; border-top: 2px dashed var(--yellow); }
.chart-wrap--income { height: 350px; margin-top: 18px; }
.income-tables-heading { display: flex; margin: 0 0 14px; align-items: flex-end; justify-content: space-between; gap: 14px; }
.income-tables-heading > p { max-width: 470px; margin: 0; color: var(--muted); font-size: .68rem; line-height: 1.5; text-align: right; }
.income-tables { display: grid; margin-bottom: 14px; gap: 14px; }
.income-bottom-panels { display: grid; gap: 14px; }
.income-table-panel, .paycheck-history-panel, .social-security-panel { padding: 0; overflow: hidden; }
.income-table-panel .panel__header, .paycheck-history-panel .panel__header, .social-security-panel .panel__header { padding: 19px 21px 14px; }
.income-table-panel .panel__header h3 { font-size: .97rem; }
.paycheck-history-panel .panel__header { align-items: center; }
.paycheck-history-panel .panel__header .button { flex: 0 0 auto; }
.income-table-scroll { max-width: 100%; overflow-x: auto; border-top: 1px solid var(--line); }
.income-table-scroll table { width: max-content; min-width: 100%; font-variant-numeric: tabular-nums; }
.income-table-scroll th, .income-table-scroll td { padding: 10px 13px; }
.income-table-scroll thead th { background: #151929; }
.income-table-scroll tbody th { position: sticky; left: 0; z-index: 1; min-width: 190px; background: #111523; color: #cdd1de; font-weight: 500; }
.income-table-scroll tbody td { min-width: 110px; }
.income-table-scroll .income-change-row th, .income-table-scroll .income-change-row td { color: #9ca4b8; font-size: .64rem; }
.income-yoy-rate { display: block; margin-top: 2px; color: #747d93; font-size: .58rem; }
.income-empty-cell { color: var(--muted); text-align: left; }
.income-error { margin: 0 0 14px; padding: 14px 16px; border: 1px solid rgba(255,113,135,.25); border-radius: 11px; background: rgba(255,113,135,.07); color: #ff9cac; font-size: .75rem; }
.paycheck-history-scroll { max-height: 480px; overflow: auto; }
.paycheck-history-panel .income-table-scroll table { width: 100%; }
.paycheck-history-panel .income-table-scroll th, .paycheck-history-panel .income-table-scroll td { text-align: left; }
.paycheck-history-panel .income-table-scroll th:last-child, .paycheck-history-panel .income-table-scroll td:last-child { text-align: right; }
.paycheck-history-scroll thead th { position: sticky; top: 0; z-index: 2; }
.paycheck-history-panel .income-table-scroll tbody td { min-width: 0; }
.social-security-panel { margin-top: 0; }
.social-security-panel > summary { cursor: pointer; list-style: none; }
.social-security-panel > summary::-webkit-details-marker { display: none; }
.social-security-panel > summary:focus-visible { outline: 2px solid var(--violet); outline-offset: -4px; }
.social-security-toggle { display: grid; width: 30px; height: 30px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); font-size: 1.2rem; place-items: center; transition: transform .2s; }
.social-security-panel[open] .social-security-toggle { transform: rotate(180deg); }
.social-security-panel .income-table-scroll table { width: 100%; }
.social-security-panel .income-table-scroll th, .social-security-panel .income-table-scroll td { text-align: left; }
.social-security-panel .income-table-scroll td:last-child { text-align: right; }
.social-security-panel .income-table-scroll th:last-child { text-align: right; }
.social-security-panel .income-table-scroll tbody td { min-width: 0; }
.spend-year-filter-pills { margin: 0 0 14px; overflow: visible; flex-wrap: wrap; }
.spend-metric-grid { display: grid; gap: 12px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.spend-metric-grid .metric-card > strong { text-align: right; font-variant-numeric: tabular-nums; }
.spend-metric--credits > strong, .spend-summary-grid-row .spend-summary-credit { color: var(--green); }
.spend-metric--spend > strong, .spend-summary-grid-row .spend-summary-spend { color: var(--coral); }
.spend-metric--net > strong.is-positive { color: var(--green); }
.spend-metric--net > strong.is-negative { color: var(--coral); }
.spend-summary-grid-row--head > .spend-summary-credit { color: var(--green); }
.spend-summary-grid-row--head > .spend-summary-spend { color: var(--coral); }
.spend-summary-grid { display: grid; margin-top: 14px; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.spend-summary-scroll { max-height: 360px; margin: 18px -22px -22px; overflow-x: hidden; overflow-y: hidden; border-top: 1px solid var(--line); }
.spend-summary-table { display: flex; width: 100%; max-width: 100%; min-width: 0; flex-direction: column; overflow-x: hidden; }
.spend-summary-table--month { --spend-summary-columns: minmax(0, 1.2fr) repeat(4, minmax(0, 1fr)); }
.spend-summary-grid-row { display: grid; width: 100%; min-width: 0; grid-template-columns: var(--spend-summary-columns); }
.spend-summary-grid-row > * { min-width: 0; padding: 12px 7px; overflow: hidden; border-bottom: 1px solid var(--line); font-size: .68rem; text-overflow: ellipsis; text-align: right; white-space: nowrap; }
.spend-summary-grid-row > :not(:first-child) { font-variant-numeric: tabular-nums; }
.spend-summary-number { display: flex; width: 100%; min-width: 0; align-items: center; justify-content: flex-end; text-align: right; font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1; }
.spend-summary-grid-row > :first-child { text-align: left; }
.spend-summary-head { min-width: 0; flex: 0 0 auto; overflow-x: hidden; overflow-y: auto; scrollbar-gutter: stable; background: #151929; }
.spend-summary-grid-row--head > * { color: var(--muted); font-weight: 600; }
.spend-summary-grid-row--category-head > * { padding: 10px 7px; vertical-align: top; }
.spend-summary-body { max-height: 320px; min-height: 0; overflow-x: hidden; overflow-y: auto; scrollbar-gutter: stable; }
.spend-summary-body--categories { max-height: 288px; }
.spend-summary-grid-row:not(.spend-summary-grid-row--head):hover { background: rgba(169,117,255,.035); }
.spend-summary-empty > * { grid-column: 1 / -1; color: var(--muted); text-align: left; }
.spend-transactions-panel, .vendor-rules-panel { margin-top: 14px; }
.spend-transactions-header { display: grid; align-items: start; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 20px; }
.spend-transactions-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.duplicate-filter-button.is-active { border-color: rgba(169,117,255,.38); background: rgba(169,117,255,.13); color: #d5c2ff; }
.transaction-detail-filters { display: grid; width: 100%; align-items: end; grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.transaction-detail-filters > div { display: grid; gap: 7px; }
.transaction-date-shortcut { justify-self: start; }
.transaction-date-shortcut.is-active { border-color: rgba(169,117,255,.38); background: rgba(169,117,255,.13); color: #d5c2ff; }
.spend-table-scroll { position: relative; isolation: isolate; max-height: 360px; margin: 18px -22px -22px; overflow: auto; border-top: 1px solid var(--line); }
.spend-table-scroll table { border-collapse: separate; border-spacing: 0; }
.spend-table-scroll thead { position: sticky; top: 0; z-index: 5; background: #151929; }
.spend-table-scroll thead th { position: sticky; top: 0; z-index: 6; background: #151929; }
.spend-table-scroll tbody { position: relative; z-index: 0; }
.spend-category-column-heading { display: grid; width: 100%; min-width: 0; gap: 6px; justify-items: stretch; text-align: right; }
.spend-category-column-heading > span { color: var(--muted); font-weight: 600; }
.spend-category-column-heading > strong { display: block; width: 100%; color: var(--text); font-size: .68rem; font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1; font-weight: 700; text-align: right; }
.spend-table-scroll--transactions { max-height: 560px; overflow-x: hidden; }
.spend-table-scroll--transactions table { table-layout: fixed; white-space: normal; }
.spend-table-scroll--transactions th, .spend-table-scroll--transactions td { padding: 10px 8px; overflow: hidden; text-overflow: ellipsis; }
.spend-table-scroll--transactions th:nth-child(1) { width: 90px; }
.spend-table-scroll--transactions th:nth-child(2) { width: 14%; }
.spend-table-scroll--transactions th:nth-child(3) { width: 20%; }
.spend-table-scroll--transactions th:nth-child(4) { width: 11%; }
.spend-table-scroll--transactions th:nth-child(5) { width: 11%; }
.spend-table-scroll--transactions th:nth-child(6) { width: 100px; }
.spend-table-scroll--transactions th:nth-child(7) { width: 82px; }
.spend-table-scroll--transactions th:nth-child(8) { width: 116px; }
.spend-table-scroll--transactions td:nth-child(1), .spend-table-scroll--transactions td:nth-child(7) { white-space: nowrap; }
.spend-table-scroll--transactions th:nth-child(7), .spend-table-scroll--transactions td:nth-child(7) { text-align: right; font-variant-numeric: tabular-nums; }
.spend-table-scroll--transactions td:nth-child(2), .spend-table-scroll--transactions td:nth-child(3), .spend-table-scroll--transactions td:nth-child(5) { overflow-wrap: anywhere; }
.spend-table-scroll--transactions th:nth-child(2), .spend-table-scroll--transactions td:nth-child(2),
.spend-table-scroll--transactions th:nth-child(3), .spend-table-scroll--transactions td:nth-child(3),
.spend-table-scroll--transactions th:nth-child(4), .spend-table-scroll--transactions td:nth-child(4),
.spend-table-scroll--transactions th:nth-child(5), .spend-table-scroll--transactions td:nth-child(5) { text-align: left; }
.transaction-category { display: block; overflow: hidden; color: #cdd1de; text-overflow: ellipsis; white-space: nowrap; }
.transaction-category--missing { color: #ff9cac; }
.transaction-towards-max { text-align: center; }
.transaction-max-toggle { display: inline-flex; min-width: 30px; min-height: 30px; align-items: center; justify-content: center; cursor: pointer; }
.transaction-max-toggle input { width: 16px; height: 16px; min-height: 16px; margin: 0; padding: 0; border-radius: 4px; accent-color: var(--violet); cursor: pointer; }
.transaction-max-toggle input:disabled { cursor: wait; }
.spend-table-scroll--rules { max-height: 600px; }
.spend-table-scroll th:first-child { position: sticky; top: 0; left: auto; z-index: 3; background: #151929; }
.spend-table-scroll td:first-child { position: static; }
.spend-table-scroll td:first-child { background: transparent; }
.spend-table-scroll tbody tr:hover td { background: rgba(169,117,255,.035); }
.spend-duplicate-group td { padding: 8px 10px; border-top: 1px solid rgba(169,117,255,.24); border-bottom: 1px solid rgba(169,117,255,.18); background: rgba(169,117,255,.13); color: #d5c2ff; font-size: .68rem; font-weight: 700; }
.spend-duplicate-group td span { margin-left: 8px; color: var(--muted); font-weight: 500; }
.spend-table-scroll--transactions tbody tr.spend-duplicate-row td { border-bottom-color: rgba(169,117,255,.13); background: rgba(169,117,255,.045); }
.spend-table-scroll--transactions tbody tr.spend-duplicate-row td:first-child { box-shadow: inset 3px 0 0 rgba(169,117,255,.55); }
.spend-table-scroll--transactions tbody tr.spend-duplicate-row td:last-child { box-shadow: inset -3px 0 0 rgba(169,117,255,.55); }
.spend-month-net { font-weight: 700; }
.spend-month-net--negative { color: var(--coral); }
.spend-month-net--positive { color: var(--green); }
.spend-description { max-width: 310px; overflow: hidden; text-overflow: ellipsis; }
.spend-amount { font-weight: 700; }
.spend-amount--credit { color: var(--green); }

.commute-heading { align-items: end; }
.commute-intro { margin: 8px 0 0; color: var(--muted); font-size: .75rem; }
.commute-month-nav { display: flex; align-items: end; gap: 8px; }
.commute-month-nav label, .commute-reload-input label { display: grid; gap: 6px; color: var(--muted); font-size: .67rem; }
.commute-month-nav input { width: 180px; min-height: 42px; }
.commute-annual-summary { margin-top: 2px; }
.commute-summary-heading { display: flex; margin-bottom: 12px; align-items: end; justify-content: space-between; gap: 16px; }
.commute-summary-heading h2 { margin: 0; font-size: 1.12rem; }
.commute-summary-heading .eyebrow { margin-bottom: 5px; }
.commute-summary-note { margin: 0; color: var(--muted); font-size: .68rem; }
.commute-metric-grid { display: grid; gap: 12px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.commute-metric-grid .metric-card { min-width: 0; }
.commute-card-balance { border-color: rgba(54, 217, 233, .2); }
.commute-calendar-panel, .commute-card-panel, .commute-transaction-panel { margin-top: 14px; }
.commute-calendar-header { align-items: center; }
.commute-calendar-header-actions { display: flex; align-items: center; gap: 10px; }
.commute-month-ticket-editor { display: grid; min-width: 390px; padding: 9px 11px; align-items: center; grid-template-columns: minmax(0, 1fr) 160px; gap: 5px 10px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.025); }
.commute-month-ticket-editor > label { display: flex; align-items: center; gap: 7px; color: var(--text); font-size: .69rem; }
.commute-month-ticket-editor > label input { width: 16px; min-height: 16px; accent-color: var(--violet); }
.commute-monthly-ticket-cost { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr); }
.commute-monthly-ticket-cost .currency-input input { min-height: 34px; padding-left: 27px; }
.commute-month-ticket-editor > small { grid-column: 1 / -1; color: var(--muted); font-size: .59rem; }
.commute-ticket-legend { display: flex; margin-top: 16px; flex-wrap: wrap; gap: 12px; color: var(--muted); font-size: .62rem; }
.commute-ticket-legend span { display: inline-flex; align-items: center; gap: 4px; }
.commute-ticket-legend b { display: grid; width: 17px; height: 17px; border: 1px solid var(--line-strong); border-radius: 5px; color: var(--text); font-size: .58rem; place-items: center; }
.commute-weekdays, .commute-calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.commute-calendar-scroll { min-width: 0; }
.commute-weekdays { margin-top: 20px; color: var(--muted); font-size: .64rem; font-weight: 700; text-align: center; text-transform: uppercase; }
.commute-calendar { margin-top: 7px; }
.commute-day { min-width: 0; min-height: 65px; padding: 2px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.02); }
.commute-day.is-today { border-color: rgba(54,217,233,.47); box-shadow: inset 0 0 0 1px rgba(54,217,233,.11); }
.commute-day.is-outside { border-color: transparent; background: transparent; }
.commute-day__head { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.commute-day__number { display: grid; min-height: 10px; padding: 0; border: 0; background: transparent; color: #d5d8e3; font-size: .62rem; font-weight: 700; line-height: 10px; cursor: pointer; place-items: center; }
.commute-day.is-today .commute-day__number { color: var(--cyan); }
.commute-day__clear { display: grid; width: 12px; height: 10px; padding: 0; border: 0; border-radius: 3px; background: transparent; color: var(--muted); font-size: .6rem; line-height: 10px; cursor: pointer; place-items: center; }
.commute-day__clear:hover { background: rgba(255,113,135,.12); color: #ff9cac; }
.commute-day__clear:disabled { visibility: hidden; }
.commute-day__tickets { display: grid; margin-top: 1px; grid-template-columns: minmax(0, 1fr); gap: 0; }
.commute-day__option { display: grid; min-width: 0; min-height: 12px; padding: 0 3px; align-items: center; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 2px; overflow: hidden; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.025); color: var(--muted); cursor: pointer; }
.commute-day__option:has(input:checked) { border-color: rgba(169,117,255,.68); background: rgba(169,117,255,.22); color: #e0d2ff; }
.commute-day__option:hover { border-color: rgba(169,117,255,.48); }
.commute-day__option input { width: 10px; height: 10px; min-height: 10px; margin: 0; padding: 0; accent-color: var(--violet); }
.commute-day__option .commute-day__label, .commute-day__option .commute-day__cost { overflow: hidden; font-size: .62rem; font-weight: 600; line-height: 10px; white-space: nowrap; }
.commute-day__option .commute-day__label { text-overflow: clip; }
.commute-day__option .commute-day__cost { font-variant-numeric: tabular-nums; }
.commute-reload-panel { display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.commute-reload-panel__intro { max-width: 540px; }
.commute-reload-panel__intro h2 { margin: 0 0 7px; }
.commute-reload-form { display: grid; min-width: 450px; align-items: end; grid-template-columns: minmax(135px, 1fr) minmax(155px, 1fr) auto; gap: 8px; }
.commute-reload-form > label { display: grid; gap: 6px; color: var(--muted); font-size: .67rem; }
.commute-reload-form .currency-input input, .commute-reload-form input[type="date"] { min-height: 40px; }
.commute-reload-form .button { min-height: 40px; padding: 0 13px; font-size: .7rem; }
.commute-table-scroll { max-height: 510px; margin: 18px -22px -22px; overflow: auto; border-top: 1px solid var(--line); }
.commute-table-scroll table { min-width: 680px; }
.commute-table-scroll th:first-child, .commute-table-scroll td:first-child { position: sticky; left: 0; text-align: left; }
.commute-table-scroll th:first-child { z-index: 2; }
.commute-table-scroll td:first-child { background: #111523; color: #cdd1de; }
.commute-table-scroll td { font-variant-numeric: tabular-nums; }
.commute-transaction-row:hover td { background: rgba(169,117,255,.045); }
.commute-transaction-row.is-reload td:nth-child(2), .commute-transaction-row.is-reload td:nth-child(4) { color: var(--green); }
.commute-transaction-row td:last-child { font-weight: 700; }
.commute-balance-meta { display: block; margin-top: 3px; color: var(--muted); font-size: .58rem; }
.commute-empty-row td { color: var(--muted); text-align: center; }
.commute-day-fare-help { margin: 0 0 13px; color: var(--muted); font-size: .68rem; line-height: 1.5; }
.commute-day-ticket-list { display: grid; gap: 8px; }
.commute-day-ticket { display: grid; min-height: 48px; padding: 7px 10px; align-items: center; grid-template-columns: 1fr 125px; gap: 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.02); }
.commute-day-ticket label { display: flex; align-items: center; gap: 9px; color: var(--text); font-size: .73rem; }
.commute-day-ticket label input { width: 16px; min-height: 16px; accent-color: var(--violet); }
.commute-day-ticket .currency-input input { min-height: 35px; padding-left: 27px; }
.transaction-row-actions { display: flex; justify-content: flex-end; gap: 4px; }
.transaction-row-actions .edit-rule-button, .transaction-row-actions .delete-transaction-button { padding: 0 7px; }
.delete-transaction-button { min-height: 28px; padding: 0 9px; border: 1px solid rgba(255,113,135,.22); border-radius: 8px; background: rgba(255,113,135,.06); color: #ff9cac; font-size: .64rem; cursor: pointer; }
.delete-transaction-button:hover { border-color: rgba(255,113,135,.45); background: rgba(255,113,135,.11); }
.category-chip { display: inline-flex; min-height: 24px; padding: 0 8px; align-items: center; border: 1px solid rgba(54,217,233,.2); border-radius: 999px; background: rgba(54,217,233,.07); color: #8ce8f1; font-size: .64rem; }
.category-chip--missing { border-color: rgba(255,113,135,.25); background: rgba(255,113,135,.08); color: #ff9cac; }
.edit-rule-button { min-height: 28px; padding: 0 9px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.03); color: #cdb5ff; font-size: .64rem; cursor: pointer; white-space: nowrap; }
.edit-rule-button:hover { border-color: rgba(169,117,255,.4); background: rgba(169,117,255,.08); }
.vendor-rules-header { align-items: flex-start; }
.vendor-rules-header input { width: min(100%, 290px); }
.vendor-rules-tools { display: grid; justify-items: end; gap: 8px; }
.vendor-rule-filter-pills { margin-top: 0; }
.vendor-rule-results { margin: 15px 0 0; color: var(--muted); font-size: .68rem; }
.vendor-group-row { vertical-align: top; }
.vendor-group-row > td:nth-child(4), .vendor-group-spend { font-variant-numeric: tabular-nums; white-space: nowrap; }
.vendor-group-spend { font-weight: 700; }
.vendor-group-name { display: grid; min-width: 170px; gap: 4px; }
.vendor-group-name strong { color: var(--text); font-size: .76rem; }
.vendor-group-name small { color: var(--muted); font-size: .62rem; }
.vendor-group-categories { display: flex; max-width: 230px; min-width: 0; flex: 1 1 auto; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.vendor-group-category-editor { display: flex; min-width: 0; align-items: center; justify-content: flex-end; gap: 7px; }
.vendor-group-category-editor > .edit-rule-button { flex: 0 0 auto; }
.vendor-description-list { display: grid; min-width: 380px; gap: 5px; white-space: normal; }
.vendor-descriptions-toggle { min-height: 28px; padding: 0 4px; border: 0; background: transparent; color: #cdb5ff; font-size: .67rem; text-align: left; white-space: nowrap; cursor: pointer; }
.vendor-descriptions-toggle:hover { color: #e0d1ff; text-decoration: underline; }
.vendor-description-item { display: grid; min-height: 34px; padding: 4px 5px 4px 10px; align-items: center; border: 1px solid rgba(255,255,255,.045); border-radius: 8px; background: rgba(255,255,255,.018); grid-template-columns: minmax(190px, 1fr) auto auto; gap: 9px; }
.vendor-description-text { min-width: 0; overflow: hidden; color: #cdd1de; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.vendor-description-count { color: var(--muted); font-size: .62rem; white-space: nowrap; }
.new-vendor-category { display: grid; gap: 9px; }
.vendor-category-help { margin: 0 0 4px; color: var(--muted); font-size: .72rem; line-height: 1.55; }
.vendor-category-help strong { color: var(--text); }
.transaction-import-help { margin: 0 0 4px; color: var(--muted); font-size: .72rem; line-height: 1.55; }
.transaction-import-help strong { color: var(--text); }
.transaction-import-preview { display: grid; margin-top: 4px; padding: 13px; border: 1px solid rgba(74,222,154,.2); border-radius: 11px; background: rgba(74,222,154,.055); gap: 7px; }
.transaction-import-preview strong { color: #9cebc4; font-size: .78rem; }
.transaction-import-preview span { color: var(--muted); font-size: .68rem; line-height: 1.45; }
.transaction-import-error { margin: 4px 0 0; padding: 11px 13px; border: 1px solid rgba(255,113,135,.24); border-radius: 10px; background: rgba(255,113,135,.07); color: #ff9cac; font-size: .7rem; line-height: 1.45; }
.delete-transaction-details { display: grid; padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.025); gap: 6px; }
.delete-transaction-details strong { color: var(--text); font-size: .82rem; }
.delete-transaction-details span { color: var(--muted); font-size: .7rem; }
.delete-transaction-warning { margin: 3px 0 0; color: #ff9cac; font-size: .69rem; line-height: 1.45; }

.history-actions { display: flex; gap: 8px; }
.table-panel { padding: 0; overflow: hidden; }
.table-scroll { max-height: calc(100vh - 220px); overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: .72rem; white-space: nowrap; }
th, td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: right; }
th { position: sticky; top: 0; z-index: 1; background: #151929; color: var(--muted); font-weight: 600; }
th:first-child, td:first-child { position: sticky; left: 0; text-align: left; }
th:first-child { z-index: 2; }
td:first-child { background: #111523; color: #cdd1de; }
tbody tr:hover td { background-color: rgba(169, 117, 255, .035); }

.modal { width: min(680px, calc(100% - 32px)); max-height: calc(100vh - 40px); padding: 0; overflow: auto; border: 1px solid var(--line-strong); border-radius: 22px; background: #111523; color: var(--text); box-shadow: var(--shadow); }
.modal::backdrop { background: rgba(2,4,10,.76); backdrop-filter: blur(5px); }
.modal--small { width: min(480px, calc(100% - 32px)); }
.modal form { display: grid; gap: 9px; padding: 26px; }
.modal form > #initialBalanceField, .modal form > #assetCategoryField, .modal form > #growthRateField, .modal form > #loanCategoryField, .modal form > .account-image-field { display: grid; gap: 9px; }
.account-image-editor { display: flex; align-items: center; gap: 12px; }
.account-image-preview { width: 96px; aspect-ratio: 1.59 / 1; overflow: hidden; flex: 0 0 auto; border: 1px solid var(--line-strong); border-radius: 10px; background: rgba(255,255,255,.04); }
.account-image-preview img { width: 100%; height: 100%; object-fit: cover; }
.account-image-controls { display: grid; min-width: 0; flex: 1; gap: 5px; }
.account-image-controls input { min-height: 40px; padding: 7px; font-size: .7rem; }
.account-image-controls small { color: var(--muted); font-size: .63rem; }
.account-image-controls .text-button { width: max-content; }
.backfill-help { margin: 4px 0 6px; color: var(--muted); font-size: .7rem; line-height: 1.5; }
.backfill-balance-fields { display: grid; max-height: min(52vh, 520px); padding: 4px 8px 4px 0; overflow-y: auto; gap: 9px; }
.backfill-balance-row { display: grid; padding: 9px 11px; align-items: center; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.025); gap: 14px; grid-template-columns: minmax(110px, .65fr) minmax(150px, 1fr); }
.backfill-balance-row label { color: var(--muted); font-size: .72rem; }
.backfill-balance-row input { min-height: 40px; }
.modal__header { display: flex; margin-bottom: 12px; align-items: flex-start; justify-content: space-between; }
.modal__footer { display: flex; margin-top: 17px; justify-content: flex-end; gap: 9px; }
.filter-pills { display: flex; margin: 12px -2px 0; padding: 2px; overflow-x: auto; gap: 7px; scrollbar-width: none; }
.filter-pills::-webkit-scrollbar { display: none; }
.filter-pill { min-height: 31px; padding: 0 11px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.025); color: var(--muted); font-size: .66rem; font-weight: 600; white-space: nowrap; cursor: pointer; }
.filter-pill:hover { border-color: var(--line-strong); color: var(--text); }
.filter-pill.is-active { border-color: rgba(169,117,255,.38); background: rgba(169,117,255,.13); color: #d5c2ff; }
.filter-pill span { margin-left: 4px; opacity: .65; }
.balance-fields-heading { display: flex; margin-top: 12px; align-items: center; justify-content: space-between; }
.balance-fields-heading > span { color: #cdd1de; font-size: .78rem; font-weight: 600; }
.balance-fields { display: grid; gap: 12px; margin-top: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.balance-fields-empty { margin: 10px 0; padding: 18px; border: 1px dashed var(--line); border-radius: 11px; color: var(--muted); font-size: .72rem; text-align: center; grid-column: 1 / -1; }
.balance-field { display: grid; gap: 6px; }
.balance-field label { display: flex; justify-content: space-between; }
.balance-field label span { color: var(--muted); font-size: .65rem; }
.currency-input { position: relative; }
.currency-input > span { position: absolute; left: 13px; top: 50%; z-index: 1; color: var(--muted); font-size: .82rem; transform: translateY(-50%); pointer-events: none; }
.currency-input > input { padding-left: 28px; }
.toggle-row { display: flex; margin-top: 8px; align-items: center; gap: 10px; }
.toggle-row input { width: 16px; min-height: 16px; accent-color: var(--violet); }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 20; max-width: 360px; padding: 13px 17px; border: 1px solid var(--line-strong); border-radius: 11px; background: #1a2031; box-shadow: var(--shadow); font-size: .78rem; opacity: 0; pointer-events: none; transform: translateY(15px); transition: opacity .2s, transform .2s; }
.toast.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1050px) {
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spend-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .commute-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .commute-calendar-scroll { overflow-x: auto; }
  .commute-weekdays, .commute-calendar { min-width: 830px; grid-template-columns: repeat(7, minmax(116px, 1fr)); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .projection-content { grid-template-columns: 1fr; }
  .asset-summary-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .app-shell { display: block; }
  .sidebar { position: fixed; z-index: 15; width: 240px; transform: translateX(-100%); transition: transform .25s; }
  .app-shell.menu-open .sidebar { transform: translateX(0); }
  .mobile-only { display: grid; }
  #mainContent, .empty-state, .loading-state { padding: 60px 16px 50px; }
  .panel__header--projection, .section-heading { align-items: flex-start; flex-direction: column; }
  .income-heading { align-items: stretch; }
  .income-heading-actions { justify-content: flex-start; }
  .income-heading-actions .button { flex: 1; }
  .income-chart-panel .panel__header { flex-direction: column; }
  .income-chart-legend { justify-content: flex-start; }
  .income-tables-heading { align-items: flex-start; flex-direction: column; }
  .income-tables-heading > p { text-align: left; }
  .commute-heading { align-items: flex-start; }
  .commute-month-nav { width: 100%; flex-wrap: wrap; }
  .commute-month-nav label { flex: 1; }
  .commute-month-nav input { width: 100%; }
  .commute-calendar-header { align-items: flex-start; }
  .commute-calendar-header-actions { width: 100%; align-items: stretch; flex-direction: column; }
  .commute-month-ticket-editor { width: 100%; min-width: 0; }
  .commute-reload-panel { align-items: stretch; flex-direction: column; }
  .commute-reload-form { min-width: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .commute-reload-form .button { grid-column: 1 / -1; }
  .commute-calendar-scroll { overflow-x: auto; }
  .commute-weekdays, .commute-calendar { min-width: 718px; gap: 3px; }
  .commute-weekdays { font-size: .55rem; }
  .commute-weekdays, .commute-calendar { grid-template-columns: repeat(7, minmax(100px, 1fr)); }
  .commute-day { min-height: 56px; padding: 2px; }
  .commute-day__number { min-height: 8px; font-size: .52rem; line-height: 8px; }
  .commute-day__clear { width: 10px; height: 8px; font-size: .52rem; line-height: 8px; }
  .commute-day__option { min-height: 10px; padding: 0 2px; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 2px; }
  .commute-day__option input { width: 8px; height: 8px; min-height: 8px; }
  .commute-day__option .commute-day__label, .commute-day__option .commute-day__cost { font-size: .48rem; line-height: 9px; }
  .commute-ticket-legend { gap: 7px; }
  .account-heading-actions { width: 100%; }
  .account-heading-actions .button { flex: 1; }
  .asset-heading-actions { width: 100%; flex-wrap: wrap; }
  .asset-heading-actions > .button { flex: 1; }
  .balance-controls { width: 100%; flex-wrap: wrap; justify-content: flex-start; }
  .balance-control-slot--dashboard { justify-content: flex-start; }
  .balance-controls .as-of-control { flex: 1; min-width: 180px; }
  .projection-summary { width: 100%; }
  .projection-summary > div { min-width: 0; flex: 1; }
  .account-row { grid-template-columns: minmax(150px, 1fr) 86px minmax(180px, auto); }
  .account-row__details { flex-wrap: wrap; padding: 5px 0; }
  .account-row__note { flex-basis: 100%; padding-left: 18px; }
  .account-row__rate { display: none; }
  .spend-summary-grid { grid-template-columns: 1fr; }
  .spend-transactions-header { grid-template-columns: minmax(0, 1fr); }
  .spend-transactions-actions { justify-content: flex-start; grid-column: 1; }
  .transaction-detail-filters { width: 100%; grid-template-columns: 1fr; }
  .spend-table-scroll--transactions { overflow-x: auto; }
  .spend-table-scroll--transactions table { min-width: 900px; }
  .vendor-rules-header { align-items: flex-start; flex-direction: column; }
  .vendor-rules-header input { width: 100%; }
  .vendor-rules-tools { width: 100%; justify-items: stretch; }
}

@media (max-width: 520px) {
  .auth-card { padding: 38px 24px; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .spend-metric-grid { grid-template-columns: 1fr 1fr; }
  .commute-metric-grid { grid-template-columns: 1fr 1fr; }
  .asset-summary-grid { grid-template-columns: 1fr; }
  .metric-card { min-height: 122px; padding: 14px; }
  .metric-card > strong { font-size: 1.25rem; }
  .chart-legend { display: none; }
  .projection-summary { flex-direction: column; }
  .rate-heading__actions { width: 100%; justify-content: space-between; }
  .account-group { padding: 16px; }
  .account-group__header { align-items: flex-start; flex-direction: column; gap: 6px; }
  .account-group__header span { text-align: left; }
  .account-row { gap: 4px 10px; grid-template-columns: minmax(0, 1fr) auto; }
  .account-row__details { grid-column: 1 / -1; }
  .account-row__balance { padding-left: 18px; text-align: left; }
  .account-row__actions { grid-column: 2; gap: 2px; }
  .visibility-button { min-width: 58px; padding: 0 6px; font-size: .58rem; }
  .account-history-button, .account-delete-button { padding: 0 6px; font-size: .58rem; }
  .edit-account { width: 28px; }
  .balance-fields { grid-template-columns: 1fr; }
  .history-actions { width: 100%; }
  .history-actions { flex-wrap: wrap; }
  .history-actions .button { flex: 1; }
  .backfill-balance-row { grid-template-columns: 1fr; gap: 7px; }
  .spend-metric-grid .metric-card { min-height: 116px; }
  .commute-metric-grid .metric-card { min-height: 110px; padding: 12px; }
  .commute-metric-grid .metric-card > strong { font-size: 1.08rem; }
  .commute-day { min-height: 56px; padding: 2px; }
  .chart-wrap--income { height: 290px; }
  .income-heading-actions .button { min-width: 0; padding: 0 8px; font-size: .69rem; }
  .income-table-panel .panel__header, .paycheck-history-panel .panel__header, .social-security-panel .panel__header { padding: 16px 15px 12px; }
  .paycheck-history-panel .panel__header { align-items: flex-start; flex-direction: column; }
  .paycheck-history-panel .panel__header .button { align-self: flex-start; }
  .income-table-scroll tbody th { min-width: 170px; }
  .commute-day__head { gap: 0; }
}