:root {
    --ink: #17201d;
    --muted: #66736e;
    --faint: #8c9893;
    --paper: #f5f3ed;
    --surface: #fffefa;
    --surface-2: #eceae3;
    --line: #deddd6;
    --forest: #17372f;
    --forest-2: #244a40;
    --mint: #dcece4;
    --sage: #6e9183;
    --coral: #f36f56;
    --coral-dark: #d9553e;
    --red: #c9473d;
    --green: #267a5f;
    --amber: #b87923;
    --blue: #507e9d;
    --shadow: 0 12px 35px rgba(34, 46, 41, .07);
    --radius: 18px;
    --radius-sm: 11px;
    --sidebar: 258px;
    --chart-1: #c4513e;
    --chart-2: #557f72;
    --chart-3: #e4a84a;
    --chart-4: #6f85b1;
    --chart-5: #a57390;
}

* { box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.45; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }
img, canvas { max-width: 100%; }
[hidden] { display: none !important; }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; width: var(--sidebar); display: flex; flex-direction: column; color: #eef6f2; background: var(--forest); border-right: 1px solid rgba(255,255,255,.07); }
.brand { min-height: 82px; padding: 19px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.08); }
.brand > a, .mobile-brand, .guest-brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 13px 7px 13px 7px; background: var(--coral); color: #fff; font-family: Georgia, serif; font-weight: 800; font-size: 1.35rem; box-shadow: 0 6px 18px rgba(243,111,86,.24); }
.brand strong { display: block; letter-spacing: -.02em; font-size: 1.06rem; }
.brand small, .sidebar-footer small { display: block; margin-top: 1px; color: #9fb5ae; font-size: .69rem; }
.sidebar-close { display: none; border: 0; color: #fff; background: transparent; font-size: 1.8rem; }
.environment-switcher { position: relative; padding: 16px 15px 7px; }
.eyebrow { display: block; margin-bottom: 5px; color: var(--sage); font-size: .68rem; line-height: 1.2; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow.light { color: #b6d0c6; }
.environment-switcher > .eyebrow { padding-left: 7px; color: #819e95; }
.environment-button { width: 100%; padding: 9px 8px; display: flex; align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,.09); border-radius: 12px; color: #fff; background: rgba(255,255,255,.055); text-align: left; }
.environment-button:hover { background: rgba(255,255,255,.09); }
.environment-button > span:nth-child(2) { min-width: 0; flex: 1; }
.environment-button strong, .environment-button small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.environment-button strong { font-size: .85rem; }
.environment-button small { color: #9fb5ae; font-size: .67rem; }
.environment-avatar, .user-avatar { display: inline-grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px; color: #17372f; background: #d7e7df; font-weight: 800; font-size: .78rem; }
.chevron { color: #aac0b8; }
.popover { position: absolute; z-index: 50; top: calc(100% - 4px); left: 16px; right: 16px; padding: 6px; border: 1px solid #d5ddd8; border-radius: 13px; color: var(--ink); background: #fff; box-shadow: 0 18px 42px rgba(0,0,0,.22); }
.popover form { margin: 0; }
.popover-item { width: 100%; padding: 9px 10px; display: flex; align-items: center; justify-content: space-between; border: 0; border-radius: 8px; color: var(--ink); background: transparent; text-align: left; font-size: .8rem; }
.popover-item:hover, .popover-item.selected { background: var(--mint); }
.popover-item small { color: var(--muted); font-size: .66rem; text-transform: capitalize; }
.popover-link { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; color: var(--green); font-weight: 700; }

.main-nav { flex: 1; padding: 13px 14px; overflow-y: auto; }
.main-nav a, .sidebar-footer > a { min-height: 41px; margin: 2px 0; padding: 9px 11px; display: flex; align-items: center; gap: 11px; border-radius: 10px; color: #c6d8d2; font-size: .82rem; font-weight: 600; }
.main-nav a:hover, .main-nav a.is-active, .sidebar-footer > a:hover { color: #fff; background: rgba(255,255,255,.08); }
.main-nav a.is-active { box-shadow: inset 3px 0 var(--coral); }
.nav-icon { width: 20px; display: inline-grid; place-items: center; color: #9bb5ac; font-size: 1.07rem; }
.main-nav a.is-active .nav-icon { color: var(--coral); }
.nav-section { display: block; padding: 18px 11px 6px; color: #78968c; font-size: .61rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.sidebar-footer { padding: 8px 14px 14px; border-top: 1px solid rgba(255,255,255,.08); }
.sidebar-footer > a:last-of-type { margin-top: 6px; padding-top: 11px; padding-bottom: 11px; background: rgba(0,0,0,.1); }
.sidebar-footer > a:last-of-type > span:nth-child(2) { min-width: 0; }
.sidebar-footer strong, .sidebar-footer small { display: block; max-width: 145px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logout-form { margin: 2px 0 0; text-align: center; }
.logout-form button { padding: 5px; border: 0; color: #8fa79f; background: transparent; font-size: .68rem; }
.logout-form button:hover { color: #fff; }

.main-content { min-height: 100vh; margin-left: var(--sidebar); padding: 38px clamp(28px, 4vw, 64px) 64px; }
.mobile-topbar, .sidebar-backdrop { display: none; }
.page-header { min-height: 74px; margin-bottom: 27px; display: flex; align-items: flex-end; justify-content: space-between; gap: 26px; }
.page-header h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2rem, 3.2vw, 3rem); line-height: 1.02; font-weight: 500; letter-spacing: -.045em; }
.page-header p { margin: 9px 0 0; color: var(--muted); font-size: .92rem; }
.page-header p strong { color: var(--ink); }
.back-link { display: inline-block; margin-bottom: 10px; color: var(--muted); font-size: .78rem; font-weight: 700; }
.back-link:hover { color: var(--coral-dark); }
.header-actions { display: flex; align-items: center; gap: 9px; }
.button { min-height: 42px; padding: 10px 17px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 10px; font-weight: 750; font-size: .79rem; transition: transform .15s, background .15s, border-color .15s; }
.button:hover { transform: translateY(-1px); }
.button-primary { color: #fff; background: var(--coral); box-shadow: 0 7px 16px rgba(243,111,86,.18); }
.button-primary:hover { background: var(--coral-dark); }
.button-secondary { border-color: var(--line); color: var(--ink); background: var(--surface); }
.button-secondary:hover { border-color: #bac8c2; background: #fff; }
.button-ghost { color: var(--muted); background: transparent; }
.button-small { min-height: 34px; padding: 7px 11px; font-size: .72rem; }
.button-block { width: 100%; }
.text-button { padding: 3px; border: 0; color: var(--green); background: transparent; font-size: .71rem; font-weight: 800; white-space: nowrap; }
.row-delete { width: 28px; height: 28px; border: 0; border-radius: 8px; color: var(--faint); background: transparent; font-size: 1.15rem; }
.row-delete:hover { color: var(--red); background: #fde8e5; }

.alert { max-width: 100%; margin: 0 0 17px; padding: 12px 14px; display: flex; align-items: center; gap: 11px; border: 1px solid; border-radius: 11px; background: #fff; box-shadow: var(--shadow); font-size: .8rem; }
.alert > span { width: 23px; height: 23px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; font-weight: 800; }
.alert p { flex: 1; margin: 0; }
.alert button { border: 0; color: inherit; background: transparent; font-size: 1.1rem; }
.alert-success { border-color: #b9d8ca; color: #22634e; background: #f0faf5; }
.alert-success > span { color: #fff; background: var(--green); }
.alert-error { border-color: #edc0bb; color: #8d342d; background: #fff4f2; }
.alert-error > span { color: #fff; background: var(--red); }
.alert-warning { border-color: #ead29f; color: #7d581f; background: #fff9eb; }
.alert-warning > span { color: #fff; background: var(--amber); }

.panel, .form-panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.panel { padding: 22px; }
.panel-heading { min-height: 42px; margin-bottom: 18px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.panel-heading h2, .panel h3 { margin: 0; font-family: Georgia, serif; font-size: 1.25rem; font-weight: 500; letter-spacing: -.025em; }
.panel-heading > a { color: var(--green); font-size: .73rem; font-weight: 800; }
.panel-heading > a:hover { color: var(--coral-dark); }
.panel-wide { min-width: 0; }

.metric-grid { margin-bottom: 20px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.metric-card { position: relative; min-height: 137px; padding: 21px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: 0 8px 22px rgba(34,46,41,.045); }
.metric-card > span { display: block; color: var(--muted); font-size: .72rem; font-weight: 750; }
.metric-card > strong { display: block; margin-top: 16px; font-family: Georgia, serif; font-size: clamp(1.35rem, 2vw, 1.85rem); font-weight: 500; letter-spacing: -.04em; white-space: nowrap; }
.metric-card > small { display: block; margin-top: 7px; color: var(--faint); font-size: .66rem; }
.metric-card > small a { color: var(--green); font-weight: 750; }
.metric-featured { border-color: transparent; color: #fff; background: var(--forest); }
.metric-featured > span, .metric-featured > small { color: #b4cac2; }
.metric-spark { position: absolute; right: 16px; bottom: 10px; left: 16px; height: 25px; display: flex; align-items: flex-end; gap: 4px; opacity: .18; }
.metric-spark i { flex: 1; height: 50%; border-radius: 3px 3px 0 0; background: #fff; }
.metric-spark i:nth-child(2) { height: 70%; }.metric-spark i:nth-child(3) { height: 40%;}.metric-spark i:nth-child(4) { height: 80%;}.metric-spark i:nth-child(5) { height: 62%;}.metric-spark i:nth-child(6) { height: 91%;}.metric-spark i:nth-child(7) { height: 75%; }
.positive { color: var(--green) !important; }
.negative { color: var(--red) !important; }
.dashboard-grid { margin-bottom: 20px; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, .9fr); gap: 18px; }
.chart-container { position: relative; height: 260px; }
.chart-container canvas { width: 100%; height: 100%; }
.chart-legend { margin: 7px 0 0; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 5px 14px; color: var(--muted); font-size: .61rem; }
.chart-legend span { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; }
.chart-legend i { width: 9px; height: 9px; display: inline-block; border-radius: 3px; }.chart-legend .is-income { background: #557f72; }.chart-legend .is-expense { background: #c4513e; }
.chart-legend small { flex-basis: 100%; color: var(--muted); font-size: .59rem; text-align: center; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.category-bars > div { margin: 0 0 13px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; }
.category-bars span, .category-bars strong { font-size: .73rem; }
.category-bars span small { margin-top: 2px; display: block; color: var(--green); font-size: .56rem; font-weight: 700; }
.category-bars strong { font-weight: 750; }
.category-bars i { grid-column: 1 / -1; height: 6px; overflow: hidden; border-radius: 10px; background: var(--surface-2); }
.category-bars b { display: block; width: var(--bar); height: 100%; border-radius: inherit; background: var(--color); }
.transaction-list { margin: -3px 0; }
.transaction-row { padding: 10px 2px; display: grid; grid-template-columns: 37px minmax(0, 1fr) auto auto; gap: 11px; align-items: center; border-bottom: 1px solid #ecebe6; }
.transaction-row:last-child { border-bottom: 0; }
.transaction-row:hover .transaction-main strong { color: var(--coral-dark); }
.transaction-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #993c30; background: #fee6e1; font-weight: 800; }
.transaction-avatar.income { color: #276a54; background: #e1f1e9; }
.transaction-main { min-width: 0; }
.transaction-main strong, .transaction-main small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.transaction-main strong { font-size: .78rem; }
.transaction-main small, .transaction-date { color: var(--muted); font-size: .66rem; }
.transaction-amount { min-width: 96px; text-align: right; font-size: .76rem; }
.account-mini-list a { padding: 9px 0; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #ecebe6; }
.account-mini-list a:last-child { border-bottom: 0; }
.account-mini-list i { width: 9px; height: 34px; border-radius: 7px; background: var(--account-color); }
.account-mini-list span { min-width: 0; flex: 1; }
.account-mini-list strong, .account-mini-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-mini-list strong { font-size: .75rem; }.account-mini-list small { margin-top: 2px; color: var(--muted); font-size: .63rem; }
.account-mini-list b { font-size: .72rem; }
.empty-inline { padding: 34px 16px; color: var(--muted); text-align: center; font-size: .78rem; }
.empty-inline a { color: var(--green); font-weight: 800; }

.account-grid, .environment-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.account-card { position: relative; min-height: 220px; padding: 22px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); transition: transform .18s, box-shadow .18s; }
.account-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: var(--account-color); }
.account-card:hover { transform: translateY(-3px); box-shadow: 0 18px 38px rgba(34,46,41,.1); }
.account-card.is-archived { opacity: .55; }
.account-card-top { margin-bottom: 28px; display: flex; align-items: center; justify-content: space-between; }
.account-icon { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 12px; color: var(--account-color); background: color-mix(in srgb, var(--account-color) 12%, white); font-size: 1.15rem; }
.status-dot { color: var(--muted); font-size: .64rem; }
.status-dot::before { content: ""; width: 6px; height: 6px; margin-right: 5px; display: inline-block; border-radius: 50%; background: var(--green); }
.account-card > span { display: block; color: var(--muted); font-size: .72rem; }
.account-card > strong { display: block; margin: 5px 0 8px; font-family: Georgia, serif; font-size: 1.75rem; font-weight: 500; letter-spacing: -.04em; }
.account-card > small { color: var(--faint); font-size: .66rem; }
.credit-meter { margin-top: 18px; }
.credit-meter i, .credit-line i { height: 5px; display: block; overflow: hidden; border-radius: 10px; background: #e7e6e0; }
.credit-meter i b, .credit-line i b { height: 100%; display: block; border-radius: inherit; background: var(--coral); }
.credit-meter span { display: block; margin-top: 5px; color: var(--muted); font-size: .6rem; }
.empty-state { min-height: 360px; padding: 55px 24px; display: grid; place-items: center; align-content: center; border: 1px dashed #c8cdc8; border-radius: var(--radius); text-align: center; background: rgba(255,255,255,.34); }
.empty-state > span { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px; color: var(--green); background: var(--mint); font-size: 1.65rem; }
.empty-state h2, .empty-state h3 { margin: 16px 0 4px; font-family: Georgia, serif; font-weight: 500; }
.empty-state p { max-width: 420px; margin: 0 0 19px; color: var(--muted); font-size: .8rem; }
.empty-state.compact { min-height: 220px; padding: 30px; border: 0; background: transparent; }
.empty-state.compact > span { width: 44px; height: 44px; font-size: 1.2rem; }

.form-panel { max-width: 920px; margin: 0 auto; padding: clamp(24px, 4vw, 42px); }
.form-panel.narrow { max-width: 690px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 19px; }
.form-stack { display: flex; flex-direction: column; gap: 17px; }
.form-grid label, .form-stack label { min-width: 0; color: #3d4a45; font-size: .72rem; font-weight: 750; }
.form-grid label > small, .form-stack label > small { display: block; margin-top: 5px; color: var(--muted); font-size: .64rem; font-weight: 500; }
input, select, textarea { width: 100%; min-height: 43px; margin-top: 7px; padding: 10px 12px; border: 1px solid #d4d6d1; border-radius: 9px; outline: 0; color: var(--ink); background: #fff; font-size: .8rem; transition: border .15s, box-shadow .15s; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--sage); box-shadow: 0 0 0 3px rgba(110,145,131,.14); }
input[type="checkbox"], input[type="radio"], input[type="color"] { width: auto; min-height: 0; margin: 0; padding: 0; }
input[type="color"] { width: 56px; height: 38px; padding: 3px; }
.field-error { display: block; margin-top: 4px; color: var(--red); font-size: .65rem; }
.span-2 { grid-column: 1 / -1; }
.form-actions { display: flex; justify-content: flex-end; gap: 9px; padding-top: 8px; }
.checkbox-card { min-height: 66px; padding: 13px 15px; display: flex !important; align-items: flex-start; gap: 11px; border: 1px solid var(--line); border-radius: 11px; background: #fafaf6; cursor: pointer; }
.checkbox-card input { margin-top: 3px; }
.checkbox-card strong, .checkbox-card small { display: block; }
.checkbox-card small { margin-top: 3px; color: var(--muted); font-size: .64rem; font-weight: 500; }
.checkbox-line { display: flex !important; align-items: center; gap: 7px; }
.checkbox-line input { flex: 0 0 auto; }
.card-fields { padding: 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; border: 1px solid #cbdcd4; border-radius: 13px; background: #f3f9f6; }
.card-fields .subsection-heading { grid-column: 1 / -1; }
.subsection-heading { display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.subsection-heading strong, .subsection-heading small { display: block; }
.subsection-heading strong { font-size: .8rem; }.subsection-heading small { color: var(--muted); font-size: .64rem; }
.segmented { width: fit-content; display: flex; padding: 4px; border-radius: 11px; background: var(--surface-2); }
.segmented label { cursor: pointer; }
.segmented input { position: absolute; opacity: 0; }
.segmented span { min-width: 110px; padding: 8px 16px; display: block; border-radius: 8px; color: var(--muted); text-align: center; font-size: .75rem; }
.segmented input:checked + span { color: var(--ink); background: #fff; box-shadow: 0 3px 10px rgba(0,0,0,.08); }
.amount-input { position: relative; }.amount-input > span { position: absolute; z-index: 1; left: 12px; top: 36px; color: var(--muted); font-size: .67rem; }.amount-input input { padding-left: 43px; }
.split-section { padding-top: 17px; border-top: 1px solid var(--line); }
.split-row { margin-top: 10px; display: grid; grid-template-columns: 1.2fr .7fr 1fr 30px; gap: 8px; }
.split-row select, .split-row input { margin: 0; }
.split-row button { border: 0; border-radius: 8px; color: var(--muted); background: #f0efea; }
.danger-zone { max-width: 920px; margin: 24px auto 0; padding-top: 16px; border-top: 1px solid #e5ceca; text-align: right; }
.danger-zone button { border: 0; color: var(--red); background: transparent; font-size: .72rem; font-weight: 750; }
.info-banner { margin-bottom: 22px; padding: 14px; display: flex; align-items: flex-start; gap: 11px; border: 1px solid #c9ddd4; border-radius: 11px; color: #315d4d; background: #f0f8f4; font-size: .75rem; }
.info-banner > span { width: 24px; height: 24px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: #fff; background: var(--green); font-weight: 800; }
.info-banner p { margin: 2px 0 0; }
.form-separator { padding: 8px 0 4px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.two-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.compact-form { gap: 13px; }.compact-form input, .compact-form select, .compact-form textarea { min-height: 38px; padding: 8px 10px; }

.title-with-icon { display: flex; align-items: center; gap: 13px; }
.title-with-icon > span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; color: var(--account-color); background: color-mix(in srgb, var(--account-color) 13%, white); }
.balance-callout { text-align: right; }.balance-callout span { display: block; color: var(--muted); font-size: .7rem; }.balance-callout strong { display: block; margin-top: 4px; font-family: Georgia, serif; font-size: 2rem; font-weight: 500; }
.detail-layout, .split-layout { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(280px, .72fr); gap: 18px; align-items: start; }
.detail-aside { display: flex; flex-direction: column; gap: 15px; }
.detail-aside .panel h3 { margin-bottom: 15px; }
.muted { color: var(--muted); font-size: .72rem; }
.reconcile-note { padding: 12px 14px; border-radius: 10px; color: var(--green); background: var(--mint); font-size: .67rem; }
.sticky-panel { position: sticky; top: 24px; }

.filter-panel { margin-bottom: 15px; padding: 15px; }
.filter-grid { display: grid; grid-template-columns: minmax(180px, 1.5fr) repeat(3, minmax(120px, 1fr)) repeat(2, auto) auto auto; gap: 8px; }
.filter-grid input, .filter-grid select { min-width: 0; min-height: 37px; margin: 0; padding: 7px 9px; font-size: .7rem; }
.filter-grid .button { min-height: 37px; padding: 7px 11px; }
.search-field { position: relative; }.search-field span { position: absolute; left: 11px; top: 8px; color: var(--muted); }.search-field input { padding-left: 29px; }
.table-panel { padding: 0; overflow: hidden; }
.table-panel > .panel-heading { margin: 0; padding: 20px 22px 14px; }
.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { padding: 10px 14px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); background: #f7f6f1; text-align: left; font-size: .62rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
td { padding: 12px 14px; border-bottom: 1px solid #ecebe6; color: #46514d; font-size: .72rem; vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fbfaf6; }
td strong, td small { display: block; }td small { margin-top: 2px; color: var(--muted); font-size: .63rem; }
td a { color: var(--ink); font-weight: 700; }td a:hover { color: var(--coral-dark); }
.align-right { text-align: right; }.amount { font-weight: 800; white-space: nowrap; }
.row-action { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 7px; color: var(--muted); }.row-action:hover { background: var(--surface-2); }
.badge { width: fit-content; padding: 4px 7px; display: inline-flex; border-radius: 20px; color: #59645f; background: #ebece8; font-size: .59rem; font-weight: 800; text-transform: capitalize; white-space: nowrap; }
.badge-cleared, .badge-imported, .badge-completed, .badge-paid { color: #27664f; background: #dff0e8; }
.badge-reconciled, .badge-owner { color: #385d83; background: #e3edf5; }
.badge-uncleared, .badge-preview, .badge-planned, .badge-billed { color: #8a6021; background: #f7ebcf; }
.badge-error, .badge-failed, .badge-rejected { color: #963d34; background: #fae3df; }
.badge-duplicate, .badge-cancelled { color: #6e5c83; background: #ebe4f0; }
.table-account-dot { width: 6px; height: 6px; margin-right: 6px; display: inline-block; border-radius: 50%; background: var(--sage); }
.row-error { background: #fff8f7; }
.wide-column { min-width: 250px; }
.table-bar { display: flex; align-items: center; gap: 9px; }.table-bar-track { position: relative; min-width: 0; height: 6px; flex: 1; overflow: hidden; border-radius: 8px; background: #ecebe6; }.table-bar-track i { position: absolute; inset: 0 auto 0 0; height: 100%; border-radius: inherit; background: #c4513e; }.table-bar.is-refund .table-bar-track i { background: var(--green); }.table-bar > span:last-child { min-width: 36px; color: var(--muted); font-size: .65rem; text-align: right; }
.table-panel tr.net-refund td:nth-child(2) small { margin-top: 2px; display: block; color: var(--green); font-size: .56rem; font-weight: 700; }

.month-switcher, .date-range { display: flex; align-items: center; gap: 8px; }
.month-switcher { padding: 5px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.month-switcher a { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 7px; }.month-switcher a:hover { background: var(--surface-2); }.month-switcher strong { min-width: 78px; text-align: center; font-size: .73rem; }
.budget-summary, .import-stats { margin-bottom: 17px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.budget-summary article, .import-stats article { padding: 16px 18px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
.budget-summary span, .import-stats span { display: block; color: var(--muted); font-size: .65rem; }.budget-summary strong, .import-stats strong { display: block; margin-top: 7px; font-family: Georgia, serif; font-size: 1.3rem; font-weight: 500; }.budget-summary small { display: block; margin-top: 3px; color: var(--faint); font-size: .59rem; }
.budget-panel { padding: 0; overflow: hidden; }
.budget-table { display: grid; }
.budget-head, .budget-row { display: grid; grid-template-columns: minmax(240px, 1.7fr) repeat(3, minmax(130px, .7fr)); align-items: center; }
.budget-head { min-height: 40px; padding: 0 20px; color: var(--muted); background: #f1f0ea; font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }.budget-head span:not(:first-child) { text-align: right; }
.budget-group { padding: 16px 20px 8px; border-top: 1px solid var(--line); background: #faf9f5; }.budget-group strong { font-family: Georgia, serif; font-size: 1rem; font-weight: 500; }.budget-group small { margin-left: 8px; color: var(--muted); font-size: .6rem; }
.budget-row { min-height: 57px; padding: 6px 20px; border-top: 1px solid #efeee9; }.budget-row:hover { background: #fdfcf8; }.budget-row > div:first-child strong, .budget-row > div:first-child small { display: block; }.budget-row > div:first-child strong { font-size: .75rem; }.budget-row > div:first-child small { color: var(--muted); font-size: .59rem; }.budget-row > span, .budget-row > strong { text-align: right; font-size: .73rem; }.budget-row.overspent { background: #fff8f6; }
.input-money { position: relative; max-width: 120px; margin-left: auto; display: block; }.input-money b { position: absolute; z-index: 1; left: 8px; top: 9px; color: var(--muted); font-size: .57rem; }.input-money input { min-height: 34px; margin: 0; padding: 6px 8px 6px 30px; text-align: right; }
.budget-actions { padding: 16px 20px; display: flex; justify-content: flex-end; border-top: 1px solid var(--line); background: #faf9f5; }
.create-category { max-width: 800px; margin: 16px auto; }.create-category summary { cursor: pointer; color: var(--green); font-size: .78rem; font-weight: 800; }.create-category form { margin-top: 18px; }
.hidden-budget-categories { margin-top: 16px; padding: 0; overflow: hidden; }.hidden-budget-categories > summary { padding: 17px 20px; cursor: pointer; color: #5f594c; font-size: .74rem; font-weight: 800; }.hidden-budget-categories > summary .badge { margin-left: 6px; }.hidden-budget-categories > p { margin: -5px 20px 16px; color: var(--muted); font-size: .65rem; }.hidden-budget-categories .budget-table { border-top: 1px solid var(--line); }

.category-summary { margin-bottom: 17px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.category-summary article { padding: 15px 18px; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
.category-summary span { color: var(--muted); font-size: .68rem; font-weight: 750; }.category-summary strong { font-family: Georgia,serif; font-size: 1.35rem; font-weight: 500; }
.category-admin-layout { display: grid; grid-template-columns: minmax(0,1fr); gap: 18px; align-items: start; }.category-admin-layout.has-create-form { grid-template-columns: minmax(0,1.75fr) minmax(280px,.68fr); }
.category-list-panel { padding: 0; overflow: hidden; }.category-list-panel > .panel-heading { margin: 0; padding: 22px 22px 15px; }.category-table-wrap { border-top: 1px solid var(--line); }
.category-table { min-width: 760px; }.category-table th,.category-table td { vertical-align: middle; }.category-table td > strong,.category-table td > small,.category-setting { display: block; }.category-table td > strong { font-size: .75rem; }.category-table td > small { margin-top: 3px; color: var(--muted); font-size: .58rem; }.category-setting { font-size: .67rem; }
.category-group-row th { padding: 12px 16px 7px; color: var(--ink); background: #faf9f5; font-family: Georgia,serif; font-size: .92rem; font-weight: 500; text-align: left; }.category-group-row th small { margin-left: 7px; color: var(--muted); font-family: Inter,sans-serif; font-size: .55rem; font-weight: 700; text-transform: uppercase; }
.category-row-hidden { background: #f6f5f1; }.category-row-hidden td:first-child strong { color: #68736f; }
.badge-category-visible { color: #27664f; background: #dff0e8; }.badge-category-hidden { color: #6b6455; background: #e9e5da; }
.category-action-cell { width: 1%; text-align: right; }
.category-edit-layout { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(290px,.72fr); gap: 18px; align-items: start; }.category-edit-form { max-width: none; margin: 0; }
.category-edit-sidebar { display: flex; flex-direction: column; gap: 16px; }.category-edit-sidebar .panel { margin: 0; }
.usage-total-number { color: var(--green); font-family: Georgia,serif; font-size: 1.5rem; font-weight: 500; }.usage-breakdown { margin: 0; }.usage-breakdown > div { padding: 8px 0; display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); }.usage-breakdown > div:last-child { border-bottom: 0; }.usage-breakdown dt { color: var(--muted); font-size: .65rem; }.usage-breakdown dd { margin: 0; font-size: .68rem; font-weight: 800; }
.panel-copy { margin: -4px 0 16px; color: var(--muted); font-size: .69rem; }.category-merge-panel { border-color: #e5c9b1; }.category-delete-panel { border-color: #e7c8c3; }
.button-danger { color: #fff; background: var(--red); }.button-danger:hover { background: #ad382f; }.button-danger-outline { border-color: #e3b8b2; color: var(--red); background: #fff7f5; }.button-danger-outline:hover { border-color: var(--red); background: #fdeae7; }
:where(a,button,input,select,textarea):focus-visible { outline: 3px solid rgba(80,126,157,.35); outline-offset: 2px; }

.credit-card { min-height: 375px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); box-shadow: var(--shadow); transition: transform .18s; }.credit-card:hover { transform: translateY(-3px); }
.credit-card-face { min-height: 190px; padding: 22px; display: flex; flex-direction: column; justify-content: space-between; color: #fff; background: linear-gradient(135deg, var(--card-color), color-mix(in srgb, var(--card-color) 63%, #0e2520)); }.credit-card-face > div { display: flex; justify-content: space-between; font-size: .58rem; letter-spacing: .12em; }.chip { width: 31px; height: 23px; border-radius: 5px; background: linear-gradient(135deg,#d7c58e,#f1e4b7); }.credit-card-face > strong { font-family: Georgia,serif; font-size: 1.3rem; font-weight: 500; }.credit-card-face > small { color: rgba(255,255,255,.72); font-size: .63rem; }
.credit-card-data { padding: 19px 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }.credit-card-data span,.credit-card-data strong,.credit-card-data small { display: block; }.credit-card-data span { color: var(--muted); font-size: .62rem; }.credit-card-data strong { margin-top: 3px; font-size: 1rem; }.credit-card-data small { color: var(--faint); font-size: .58rem; }.credit-line { grid-column: 1/-1; }.credit-line small { margin-top: 6px; }
.card-summary-hero { margin-bottom: 16px; padding: 25px 28px; display: grid; grid-template-columns: 1.1fr 1.6fr 1fr; gap: 30px; align-items: center; border-radius: var(--radius); color: #fff; background: linear-gradient(125deg,var(--card-color),color-mix(in srgb,var(--card-color) 52%,#102a24)); box-shadow: var(--shadow); }.card-summary-hero span,.card-summary-hero strong,.card-summary-hero small { display: block; }.card-summary-hero span { color: rgba(255,255,255,.7); font-size: .65rem; }.card-summary-hero > div > strong { margin: 4px 0; font-family: Georgia,serif; font-size: 1.8rem; font-weight: 500; }.card-summary-hero small { color: rgba(255,255,255,.63); font-size: .61rem; }.card-summary-breakdown { padding: 0 30px; border-left: 1px solid rgba(255,255,255,.18); border-right: 1px solid rgba(255,255,255,.18); }.card-summary-breakdown span { padding: 5px 0; display: flex; justify-content: space-between; }.card-summary-breakdown b { color: #fff; }
.plan-list > div { padding: 11px 0; display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); }.plan-list > div:last-child { border: 0; }.plan-list strong,.plan-list small { display: block; }.plan-list strong { font-size: .72rem; }.plan-list small { color: var(--muted); font-size: .59rem; }.plan-list b { font-size: .7rem; }.plan-actions { text-align: right; }.plan-actions form { margin-top: 4px; }

.import-layout { margin-bottom: 18px; display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; }.import-upload,.import-guide { padding: 30px; }.import-upload h2,.import-guide h2 { margin: 7px 0; font-family: Georgia,serif; font-size: 1.45rem; font-weight: 500; }.import-upload > p,.import-guide > p { color: var(--muted); font-size: .75rem; }.step-number { width: fit-content; padding: 4px 8px; border-radius: 6px; color: var(--green); background: var(--mint); font-size: .62rem; font-weight: 900; letter-spacing: .08em; }
.file-drop { min-height: 180px; padding: 25px; display: flex !important; flex-direction: column; align-items: center; justify-content: center; border: 1.5px dashed #aebdb6; border-radius: 13px; background: #fafbf8; text-align: center; cursor: pointer; }.file-drop:hover,.file-drop.is-dragging { border-color: var(--green); background: #f1f8f4; }.file-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }.file-icon { width: 43px; height: 43px; margin-bottom: 9px; display: grid; place-items: center; border-radius: 13px; color: var(--green); background: var(--mint); font-size: 1.2rem; }.file-drop strong { font-size: .77rem; }.file-drop small { color: var(--muted); font-size: .64rem; font-weight: 500; }.file-drop b { margin-top: 8px; color: var(--green); font-size: .68rem; }
.import-guide ol { margin: 19px 0 0; padding: 0; list-style: none; }.import-guide li { padding: 10px 0; display: flex; gap: 11px; border-bottom: 1px solid var(--line); }.import-guide li:last-child { border: 0; }.import-guide li > span { width: 25px; height: 25px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 8px; color: #fff; background: var(--forest); font-size: .65rem; font-weight: 800; }.import-guide strong,.import-guide small { display: block; }.import-guide strong { font-size: .72rem; }.import-guide small { margin-top: 2px; color: var(--muted); font-size: .61rem; }

.schedule-list,.rule-list,.member-list { margin: -6px -5px; }.schedule-item { padding: 13px 5px; display: grid; grid-template-columns: 43px minmax(130px,1fr) 100px 100px; gap: 12px; align-items: center; border-bottom: 1px solid var(--line); }.schedule-item.has-actions { grid-template-columns: 43px minmax(130px,1fr) 100px 100px minmax(180px,auto); }.schedule-item:last-child,.rule-item:last-child,.member-row:last-child { border-bottom: 0; }.schedule-item.is-disabled { opacity: .45; }.schedule-date { width: 40px; height: 43px; display: grid; place-items: center; align-content: center; border-radius: 10px; color: var(--green); background: var(--mint); line-height: 1; }.schedule-date b { font-family: Georgia,serif; font-size: 1.1rem; }.schedule-date small { margin-top: 3px; font-size: .52rem; text-transform: uppercase; }.schedule-info strong,.schedule-info small,.schedule-frequency small { display: block; }.schedule-info strong { font-size: .75rem; }.schedule-info small,.schedule-frequency,.schedule-frequency small { color: var(--muted); font-size: .61rem; }.schedule-frequency small { margin-top: 3px; }.schedule-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 4px 9px; }.schedule-actions form { margin: 0; }.schedule-actions .schedule-publish { color: var(--green); font-weight: 800; }
.rule-item { padding: 14px 6px; display: grid; grid-template-columns: 58px minmax(160px,1fr) minmax(180px,1fr) auto; gap: 12px; align-items: center; border-bottom: 1px solid var(--line); }.rule-stage { padding: 5px; border-radius: 7px; color: var(--green); background: var(--mint); text-align: center; font-size: .58rem; font-weight: 800; text-transform: uppercase; }.rule-item strong,.rule-item small { display: block; }.rule-item strong { font-size: .73rem; }.rule-item small { margin-top: 3px; color: var(--muted); font-size: .6rem; }.rule-actions { display: flex; flex-wrap: wrap; gap: 4px; }.rule-actions b { padding: 4px 6px; border-radius: 6px; color: #5d5873; background: #eeeaf2; font-size: .55rem; }
.member-row { min-height: 69px; padding: 12px 5px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); }.user-avatar.large { width: 39px; height: 39px; border-radius: 12px; }.member-row > span:nth-child(2) { min-width: 130px; flex: 1; }.member-row strong,.member-row small { display: block; }.member-row strong { font-size: .75rem; }.member-row small { margin-top: 2px; color: var(--muted); font-size: .6rem; }.member-role-form { display: flex; align-items: center; gap: 8px; }.member-role-form select { min-height: 34px; margin: 0; padding: 6px 9px; font-size: .65rem; }.member-role-form .checkbox-line { white-space: nowrap; font-size: .64rem; }.role-explainer { margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--line); }.role-explainer p { color: var(--muted); font-size: .64rem; }.role-explainer strong { color: var(--ink); }
.rank-list > div { padding: 8px 0; display: flex; align-items: center; gap: 10px; }.rank-list > div > span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; color: var(--muted); background: var(--surface-2); font-size: .56rem; }.rank-list p { min-width: 0; flex: 1; margin: 0; }.rank-list strong { display: block; font-size: .69rem; }.rank-list p small { margin-top: 2px; display: block; color: var(--green); font-size: .55rem; font-weight: 700; }.rank-list i { height: 4px; margin-top: 5px; display: block; overflow: hidden; border-radius: 4px; background: var(--surface-2); }.rank-list i b { height: 100%; display: block; border-radius: inherit; background: var(--sage); }.rank-list .net-refund i b { background: var(--green); }.rank-list > div > b { font-size: .65rem; }
.date-range input { width: 135px; min-height: 38px; margin: 0; padding: 7px; font-size: .67rem; }

.environment-card { min-height: 230px; padding: 24px; display: flex; flex-direction: column; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }.environment-card.is-current { border-color: #9ab9ac; box-shadow: inset 0 0 0 1px #9ab9ac,var(--shadow); }.environment-card-icon { width: 45px; height: 45px; margin-bottom: 18px; display: grid; place-items: center; border-radius: 14px; color: #fff; background: var(--forest); font-family: Georgia,serif; font-size: 1.15rem; }.environment-card h2 { margin: 7px 0 3px; font-family: Georgia,serif; font-size: 1.25rem; font-weight: 500; }.environment-card p { margin: 0 0 17px; color: var(--muted); font-size: .67rem; }.current-label { margin-top: auto; color: var(--green); font-size: .7rem; }.environment-card form { margin-top: auto; }.environment-card-new { align-items: center; justify-content: center; border-style: dashed; color: var(--muted); box-shadow: none; text-align: center; }.environment-card-new > span { width: 44px; height: 44px; margin-bottom: 10px; display: grid; place-items: center; border-radius: 14px; color: var(--green); background: var(--mint); font-size: 1.4rem; }.environment-card-new strong { color: var(--ink); font-size: .78rem; }.environment-card-new small { margin-top: 3px; font-size: .62rem; }

.guest-shell { min-height: 100vh; padding: 32px; display: grid; place-items: center; align-content: center; background: radial-gradient(circle at 17% 15%,#315a4e 0,transparent 27%),radial-gradient(circle at 90% 80%,#e0a263 0,transparent 23%),var(--forest); }.guest-brand { position: fixed; top: 24px; left: 28px; color: #fff; }.guest-brand .brand-mark { width: 35px; height: 35px; }.login-card { width: min(960px,94vw); min-height: 590px; display: grid; grid-template-columns: 1.08fr .92fr; overflow: hidden; border-radius: 26px; background: var(--surface); box-shadow: 0 30px 80px rgba(0,0,0,.26); }.login-intro { position: relative; padding: 60px 52px; overflow: hidden; color: #fff; background: #1d463b; }.login-intro::after { content: ""; position: absolute; width: 300px; height: 300px; right: -100px; bottom: -120px; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; box-shadow: 0 0 0 45px rgba(255,255,255,.025),0 0 0 90px rgba(255,255,255,.02); }.login-intro h1 { margin: 22px 0 17px; font-family: Georgia,serif; font-size: clamp(2.3rem,4vw,3.35rem); line-height: 1.03; font-weight: 500; letter-spacing: -.05em; }.login-intro > p { max-width: 420px; color: #b7d0c6; font-size: .86rem; }.login-visual { position: absolute; right: 45px; bottom: 47px; left: 45px; height: 145px; padding: 20px; border: 1px solid rgba(255,255,255,.13); border-radius: 17px; background: rgba(255,255,255,.07); backdrop-filter: blur(8px); }.login-visual > div span,.login-visual > div strong,.login-visual > div small { display: block; }.login-visual span { color: #b7d0c6; font-size: .62rem; }.login-visual strong { margin: 4px 0; font-family: Georgia,serif; font-size: 1.6rem; font-weight: 500; }.login-visual small { color: #98cbb7; font-size: .58rem; }.login-visual > i { position: absolute; bottom: 20px; width: 10%; border-radius: 5px 5px 0 0; background: rgba(243,111,86,.8); }.login-visual > i:nth-of-type(1){height:28px;right:135px}.login-visual > i:nth-of-type(2){height:48px;right:105px}.login-visual > i:nth-of-type(3){height:35px;right:75px}.login-visual > i:nth-of-type(4){height:65px;right:45px}.login-visual > i:nth-of-type(5){height:53px;right:15px}.login-form-wrap { padding: 70px 54px; display: flex; flex-direction: column; justify-content: center; }.login-form-wrap h2 { margin: 0; font-family: Georgia,serif; font-size: 2.1rem; font-weight: 500; }.login-form-wrap > div > p { margin: 8px 0 27px; color: var(--muted); font-size: .75rem; }.security-note { margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--faint); font-size: .61rem; text-align: center; }.security-note span { color: var(--green); }
.error-page { max-width: 570px; padding: 60px; border-radius: 22px; background: var(--surface); text-align: center; box-shadow: var(--shadow); }.error-code { color: var(--coral); font-family: Georgia,serif; font-size: 4rem; }.error-page h1 { margin: 5px 0; font-family: Georgia,serif; font-weight: 500; }.error-page p { color: var(--muted); }

@media (max-width: 1180px) {
    .metric-grid { grid-template-columns: repeat(2,1fr); }
    .account-grid,.card-grid { grid-template-columns: repeat(2,1fr); }
    .filter-grid { grid-template-columns: repeat(4,1fr); }.search-field { grid-column: span 2; }
    .card-summary-hero { grid-template-columns: 1fr 1fr; }.card-summary-breakdown { grid-row: 2; grid-column: 1/-1; padding: 14px 0 0; border: 0; border-top: 1px solid rgba(255,255,255,.18); }
}

@media (max-width: 900px) {
    :root { --sidebar: 280px; }
    .mobile-topbar { position: sticky; top: 0; z-index: 20; height: 60px; padding: 0 16px; display: flex; align-items: center; gap: 13px; color: #fff; background: var(--forest); }
    .mobile-brand { font-size: .85rem; }.mobile-brand .brand-mark { width: 31px; height: 31px; font-size: 1rem; }
    .icon-button { width: 34px; padding: 6px; display: flex; flex-direction: column; gap: 4px; border: 0; background: transparent; }.icon-button span { height: 2px; display: block; border-radius: 2px; background: #fff; }
    .sidebar { transform: translateX(-102%); transition: transform .22s ease; box-shadow: 20px 0 60px rgba(0,0,0,.3); }.sidebar.is-open { transform: translateX(0); }.sidebar-close { display: block; }
    .sidebar-backdrop { position: fixed; inset: 0; z-index: 25; border: 0; background: rgba(10,20,17,.55); }.sidebar.is-open + .sidebar-backdrop { display: block; }
    .main-content { margin-left: 0; padding: 28px 22px 50px; }
    .dashboard-grid,.detail-layout,.split-layout,.import-layout,.category-admin-layout.has-create-form,.category-edit-layout { grid-template-columns: 1fr; }
    .sticky-panel { position: static; }
    .budget-head,.budget-row { grid-template-columns: minmax(180px,1.5fr) repeat(3,minmax(105px,.7fr)); }
    .environment-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 640px) {
    .main-content { padding: 22px 14px 42px; }
    .page-header { align-items: flex-start; flex-direction: column; }.page-header h1 { font-size: 2.15rem; }.header-actions { width: 100%; flex-wrap: wrap; }.header-actions .button { flex: 1; }
    .metric-grid,.budget-summary,.import-stats,.account-grid,.card-grid,.environment-grid,.category-summary { grid-template-columns: 1fr; }
    .metric-card { min-height: 120px; }
    .dashboard-grid { gap: 13px; }.panel { padding: 17px; }
    .transaction-row { grid-template-columns: 35px minmax(0,1fr) auto; }.transaction-date { display: none; }.transaction-amount { min-width: 80px; }
    .form-panel { padding: 22px 17px; }.form-grid { grid-template-columns: 1fr; }.span-2 { grid-column: auto; }.card-fields { grid-template-columns: 1fr; }.card-fields .subsection-heading { grid-column: auto; }.split-row { grid-template-columns: 1fr 1fr 30px; }.split-row input:nth-of-type(2) { grid-column: 1/3; }
    .filter-grid { grid-template-columns: 1fr 1fr; }.search-field { grid-column: 1/-1; }
    .budget-panel { overflow-x: auto; }.budget-table { min-width: 700px; }.budget-summary { grid-template-columns: 1fr 1fr; }
    .credit-card { min-height: 350px; }.card-summary-hero { padding: 21px; grid-template-columns: 1fr; }.card-summary-breakdown { grid-row: auto; grid-column: auto; }.card-summary-hero > div > strong { font-size: 1.55rem; }
    .schedule-item,.schedule-item.has-actions { grid-template-columns: 42px minmax(0,1fr) auto; }.schedule-frequency { display: none; }.schedule-actions { grid-column: 2/-1; justify-content: flex-start; }.rule-item { grid-template-columns: 54px 1fr auto; }.rule-actions { grid-column: 2/4; }.member-row { flex-wrap: wrap; }.member-role-form { width: 100%; margin-left: 51px; }
    .date-range { width: 100%; flex-wrap: wrap; }.date-range input { flex: 1; }
    .login-card { width: min(94vw,430px); min-height: auto; grid-template-columns: 1fr; }.login-intro { min-height: 230px; padding: 34px 28px; }.login-intro h1 { font-size: 2rem; }.login-visual { display: none; }.login-form-wrap { padding: 38px 28px; }.guest-shell { padding: 14px; }.guest-brand { position: static; margin-bottom: 15px; }
    .wide-column { min-width: 180px; }.balance-callout { text-align: left; }
}

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