:root {
    color-scheme: light;
    --ink: #18231f;
    --muted: #66736e;
    --canvas: #f3f5f1;
    --surface: #ffffff;
    --surface-soft: #e9efeb;
    --line: #dbe2dd;
    --primary: #163a32;
    --primary-hover: #0f2d27;
    --accent: #b9d8c8;
    --accent-strong: #398167;
    --danger: #a33e3e;
    --danger-soft: #f9eaea;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --shadow: 0 18px 45px rgba(22, 58, 50, 0.08);
    --sidebar-width: 252px;
    --font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--canvas); font-family: var(--font); color: var(--ink); }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--canvas); }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

:focus-visible { outline: 3px solid rgba(57, 129, 103, 0.35); outline-offset: 3px; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 100; background: var(--surface); padding: 10px 14px; border-radius: var(--radius-sm); }
.skip-link:focus { top: 16px; }

.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-width); padding: 28px 20px 20px; background: var(--primary); color: #f4f7f5; display: flex; flex-direction: column; z-index: 20; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; font-size: 1rem; font-weight: 650; letter-spacing: -0.01em; }
.brand svg { color: var(--accent); }
.sidebar-nav { display: grid; gap: 5px; margin-top: 42px; }
.nav-link { min-height: 44px; display: flex; align-items: center; gap: 12px; padding: 0 12px; border-radius: 10px; color: #cbd7d2; text-decoration: none; font-size: 0.92rem; }
.nav-link svg { width: 20px; height: 20px; }
.nav-link.is-active { color: #fff; background: rgba(255,255,255,.1); }
.is-disabled { opacity: .55; cursor: not-allowed; }
.sidebar-footer { margin-top: auto; border-top: 1px solid rgba(255,255,255,.13); padding-top: 18px; }
.user-summary { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
.user-summary > span:last-child { display: grid; gap: 2px; min-width: 0; }
.user-summary strong { font-size: .86rem; overflow: hidden; text-overflow: ellipsis; }
.user-summary small, .version { color: #aebeb7; font-size: .73rem; }
.avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--primary); font-weight: 700; }
.text-button { border: 0; background: transparent; color: #dce5e1; padding: 8px 0; cursor: pointer; }
.version { display: block; margin-top: 12px; }

.app-main { margin-left: var(--sidebar-width); min-height: 100vh; padding: 48px clamp(28px, 5vw, 72px) 64px; }
.mobile-header, .bottom-nav { display: none; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 30px; }
.eyebrow { margin: 0 0 7px; color: var(--accent-strong); font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 8px; font-size: clamp(1.85rem, 3vw, 2.55rem); line-height: 1.08; letter-spacing: -.035em; font-weight: 650; }
h2 { margin-bottom: 6px; font-size: clamp(1.08rem, 2vw, 1.35rem); letter-spacing: -.02em; font-weight: 620; }
.page-heading p:last-child, .login-heading p:last-child { color: var(--muted); margin-bottom: 0; line-height: 1.55; }
.primary-button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: 10px; padding: 0 18px; background: var(--primary); color: #fff; text-decoration: none; font-weight: 620; cursor: pointer; transition: background .18s ease, transform .18s ease; }
.primary-button:not(:disabled):hover { background: var(--primary-hover); transform: translateY(-1px); }
.primary-button:disabled { opacity: .48; cursor: not-allowed; }
.primary-button svg { width: 18px; height: 18px; }
.secondary-button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 0 16px; border: 1px solid #bac8c0; border-radius: 10px; background: var(--surface); color: var(--primary); text-decoration: none; font-weight: 620; }
.secondary-button:hover { border-color: var(--accent-strong); }
.heading-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.text-link { color: var(--accent-strong); font-size: .9rem; text-decoration: none; font-weight: 620; }
.small-button { min-height: 34px; padding: 0 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); cursor: pointer; font-size: .78rem; }
.icon-button { width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); text-decoration: none; cursor: pointer; }
.icon-button svg { width: 17px; height: 17px; }
.icon-button.danger { color: var(--danger); }

.foundation-note { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; padding: 20px 22px; margin-bottom: 38px; border: 1px solid #cde0d6; background: #edf5f0; border-radius: var(--radius-md); }
.foundation-note p { margin: 0; color: var(--muted); line-height: 1.5; }
.note-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--primary); color: #fff; }
.note-icon svg { width: 21px; height: 21px; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 16px; }
.section-heading h2 { margin: 0; }
.period-label { color: var(--muted); font-size: .86rem; text-transform: capitalize; }
.summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.summary-grid.four-columns { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metric { min-height: 142px; display: flex; flex-direction: column; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); }
.metric > span { color: var(--muted); font-size: .82rem; }
.metric strong { margin: 17px 0 5px; font-size: 1.7rem; font-weight: 580; }
.metric small { color: var(--muted); margin-top: auto; }
.metric.accent { background: var(--primary); border-color: var(--primary); color: #fff; }
.metric.accent > span, .metric.accent small { color: #bbcbc5; }
.metric.income strong, .amount.income { color: #24735a; }
.metric.expense strong, .amount.expense { color: #a44a4a; }
.empty-workspace { display: grid; justify-items: center; text-align: center; margin-top: 34px; padding: 54px 22px; border: 1px dashed #c8d2cc; border-radius: var(--radius-lg); background: rgba(255,255,255,.35); }
.empty-workspace > svg { width: 34px; height: 34px; margin-bottom: 16px; color: var(--accent-strong); }
.empty-workspace p { max-width: 520px; margin-bottom: 0; color: var(--muted); line-height: 1.55; }
.empty-workspace .primary-button { margin-top: 20px; }

.auth-page { background: var(--primary); display: grid; place-items: center; padding: 24px; }
.auth-page::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 18% 15%, rgba(185,216,200,.15), transparent 34%), radial-gradient(circle at 86% 82%, rgba(185,216,200,.1), transparent 30%); }
.auth-shell { width: min(100%, 430px); position: relative; z-index: 1; }
.login-panel { background: var(--surface); border-radius: var(--radius-lg); padding: clamp(28px, 6vw, 42px); box-shadow: var(--shadow); }
.login-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 46px; font-weight: 680; }
.login-brand svg { color: var(--accent-strong); }
.login-heading { margin-bottom: 26px; }
.login-heading h1 { font-size: clamp(1.65rem, 6vw, 2.1rem); }
.login-form { display: grid; gap: 9px; }
.login-form label { margin-top: 8px; font-size: .84rem; font-weight: 620; }
.login-form input { width: 100%; min-height: 48px; padding: 0 13px; border: 1px solid #cbd4ce; border-radius: 9px; color: var(--ink); background: #fff; }
.login-form input:hover { border-color: #a9b8b0; }
.login-form input:focus { border-color: var(--accent-strong); outline: 3px solid rgba(57,129,103,.14); }
.login-form .primary-button { margin-top: 18px; }
.password-panel { width: min(100%, 520px); }
.field-help { color: var(--muted); font-size: .72rem; }
.secondary-link { margin-top: 10px; color: var(--accent-strong); font-size: .8rem; text-align: center; }
.account-security-link { display: inline-block; margin-top: 8px; text-decoration: none; }
.first-access-logout { margin-top: 18px; text-align: center; }
.alert { padding: 12px 14px; margin-bottom: 18px; border-radius: var(--radius-sm); font-size: .87rem; line-height: 1.45; }
.alert-error { background: var(--danger-soft); color: var(--danger); border: 1px solid #efcaca; }
.alert-success { background: #e8f4ed; color: #256348; border: 1px solid #c9e2d3; }
.alert-neutral { background: #f3f5f1; color: var(--muted); border: 1px solid var(--line); }

.surface-section { padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); }
.compact-heading { align-items: center; margin-bottom: 18px; }
.compact-heading > a { color: var(--accent-strong); text-decoration: none; font-size: .82rem; font-weight: 620; }
.compact-heading > span { color: var(--muted); font-size: .78rem; }
.dashboard-columns { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 16px; margin-top: 18px; }
.compact-empty { margin: 0; padding: 24px 0; color: var(--muted); text-align: center; }
.statement-payment-history { margin-top: 28px; padding-top: 22px; border-top: 1px solid #e2e7e4; }
.balance-list, .movement-list, .record-list, .category-list { display: grid; }
.balance-list > div, .movement-list > a { min-height: 58px; display: flex; align-items: center; gap: 12px; border-top: 1px solid #edf0ee; }
.balance-list > div:first-child, .movement-list > a:first-child { border-top: 0; }
.balance-list span, .movement-list a > span:nth-child(2), .record-main > span:last-child, .category-row > span { display: grid; gap: 3px; min-width: 0; }
.balance-list b { margin-left: auto; font-size: .92rem; }
.balance-list small, .movement-list small, .record-row small, .category-row small { color: var(--muted); font-size: .75rem; }
.movement-list a { color: inherit; text-decoration: none; }
.movement-list a > b { margin-left: auto; font-size: .84rem; white-space: nowrap; }
.movement-icon { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px; }
.movement-icon svg { width: 17px; height: 17px; }
.movement-icon.income { color: #24735a; background: #e4f2ea; }
.movement-icon.expense { color: #a44a4a; background: #f8e9e9; }

.split-layout { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(440px, 1.28fr); gap: 18px; align-items: start; }
.split-layout.narrow-form { grid-template-columns: minmax(260px, .58fr) minmax(460px, 1.42fr); }
.form-surface { position: sticky; top: 24px; }
.data-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
.data-form.wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field { display: grid; align-content: start; gap: 7px; }
.field.full, .form-actions.full, .conversion-fields.full { grid-column: 1 / -1; }
.field label { font-size: .8rem; font-weight: 640; }
.field label span { color: var(--muted); font-weight: 450; }
.field input, .field select, .field textarea, .toolbar input { width: 100%; min-height: 44px; padding: 9px 11px; border: 1px solid #cad3cd; border-radius: 8px; background: #fff; color: var(--ink); }
.field textarea { resize: vertical; line-height: 1.45; }
.field input:focus, .field select:focus, .field textarea:focus, .toolbar input:focus { border-color: var(--accent-strong); outline: 3px solid rgba(57,129,103,.13); }
.field-error { color: var(--danger); font-size: .75rem; }
.form-actions { display: flex; justify-content: flex-end; padding-top: 4px; }
.record-row, .category-row { min-height: 74px; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 16px; border-top: 1px solid #edf0ee; }
.record-row:first-child, .category-row:first-child { border-top: 0; }
.record-row.is-inactive, .category-row.is-inactive { opacity: .55; }
.record-main { display: flex; align-items: center; gap: 11px; min-width: 0; }
.record-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: var(--primary); background: var(--surface-soft); }
.record-icon svg { width: 18px; height: 18px; }
.record-value { display: grid; gap: 3px; text-align: right; }
.record-value strong { font-size: .9rem; }
.row-actions, .table-actions { display: flex; align-items: center; gap: 6px; }
.row-actions form, .table-actions form { margin: 0; }
.inline-empty { min-height: 180px; display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--muted); }
.inline-empty > svg { width: 28px; height: 28px; }
.inline-empty p { margin: 4px 0 0; }

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.toolbar form { display: flex; align-items: center; gap: 8px; }
.toolbar label { font-size: .78rem; color: var(--muted); }
.toolbar input { min-height: 38px; width: auto; padding-block: 6px; }
.segmented-control { display: inline-flex; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.segmented-control a { min-height: 32px; display: grid; place-items: center; padding: 0 13px; border-radius: 7px; color: var(--muted); text-decoration: none; font-size: .8rem; }
.segmented-control a.is-selected { background: var(--surface-soft); color: var(--primary); font-weight: 650; }
.responsive-table { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { padding: 10px 12px; color: var(--muted); font-size: .72rem; font-weight: 650; text-align: left; border-bottom: 1px solid var(--line); }
td { padding: 13px 12px; border-bottom: 1px solid #edf0ee; font-size: .82rem; vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
.align-right { text-align: right; }
.transaction-title { display: flex; align-items: center; gap: 10px; min-width: 220px; }
.transaction-title > span:last-child { display: grid; gap: 3px; }
.status-badge { display: inline-flex; padding: 5px 8px; border-radius: 999px; background: var(--surface-soft); color: var(--muted); font-size: .72rem; white-space: nowrap; }
.amount { font-weight: 650; white-space: nowrap; }
.table-actions { justify-content: flex-end; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.form-heading { align-items: center; }
.transaction-form { display: grid; gap: 14px; max-width: 880px; }
.form-section, .advanced-section { padding: clamp(20px, 4vw, 30px); }
.step-label { margin: 0 0 4px; color: var(--accent-strong); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.advanced-section summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; list-style: none; }
.advanced-section summary::-webkit-details-marker { display: none; }
.advanced-section summary > span:first-child { display: grid; gap: 4px; }
.advanced-section summary small { color: var(--muted); font-size: .77rem; font-weight: 450; }
.advanced-section summary > span:last-child { font-size: 1.35rem; color: var(--accent-strong); transition: transform .18s ease; }
.advanced-section[open] summary > span:last-child { transform: rotate(45deg); }
.details-grid { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.conversion-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; padding: 16px; border-radius: 10px; background: var(--surface-soft); }
.sticky-form-actions { display: flex; justify-content: flex-end; align-items: center; gap: 18px; padding: 8px 0; }
.recurrence-summary { margin-bottom: 18px; }
.automatic-debits { margin-bottom: 18px; }
.recurrence-editor { margin-bottom: 18px; }
.recurrence-editor .data-form { max-width: 920px; }
.recurrence-toolbar { justify-content: flex-start; }
.check-group { display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 14px 0; border-block: 1px solid var(--line); }
.check-group label { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: .82rem; }
.check-group input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--primary); }
.area-allocation { margin: 0; padding: 16px; border: 1px solid var(--line); border-radius: 10px; }
.area-allocation legend { padding: 0 5px; font-size: .8rem; font-weight: 640; }
.area-allocation legend span, .area-allocation > p { color: var(--muted); font-weight: 450; }
.area-allocation > p { margin-bottom: 12px; font-size: .76rem; line-height: 1.45; }
.allocation-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.allocation-grid label { display: grid; grid-template-columns: auto minmax(0,1fr) 72px; align-items: center; gap: 8px; padding: 8px 10px; background: var(--surface-soft); border-radius: 8px; font-size: .8rem; }
.allocation-grid input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary); }
.allocation-grid input:last-child { min-height: 34px; padding: 5px 7px; }
.work-results { margin-top: 18px; }
.work-unallocated { margin-top: 18px; }
.work-catalogs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin-top: 18px; align-items: start; }
.single-form { grid-template-columns: repeat(2,minmax(0,1fr)); padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.mini-list { display: grid; }
.mini-list > div { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid #edf0ee; font-size: .82rem; }
.mini-list > div:first-child { border-top: 0; }
.mini-list span { display: grid; gap: 3px; }
.mini-list small { color: var(--muted); }
.mini-actions { display: flex !important; align-items: center; gap: 8px; }
.text-button.light { color: var(--accent-strong); font-size: .76rem; }
.settlement-choice { padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.settlement-choice > label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.settlement-choice input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--primary); }
.settlement-choice span { display: grid; gap: 3px; }
.settlement-choice small { color: var(--muted); font-weight: 450; }
.settlement-balance { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(22px,4vw,34px); border-radius: 14px; color: #fff; background: var(--primary); }
.settlement-balance.credit { background: #355b68; }
.settlement-balance.settled { background: #59655f; }
.settlement-balance span { font-size: .76rem; opacity: .78; }
.settlement-balance h2 { margin: 5px 0; font-size: clamp(1.25rem,2vw,1.75rem); }
.settlement-balance p { margin: 0; color: inherit; opacity: .8; font-size: .8rem; }
.settlement-balance > strong { font-size: clamp(1.65rem,4vw,2.65rem); white-space: nowrap; }
.settlement-summary { margin-top: 16px; }
.settlement-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 18px; }
.settlement-breakdown { display: grid; gap: 0; margin: 0; }
.settlement-breakdown > div { display: flex; justify-content: space-between; gap: 18px; padding: 12px 0; border-top: 1px solid #edf0ee; }
.settlement-breakdown dt { color: var(--muted); }
.settlement-breakdown dd { margin: 0; font-weight: 650; }
.settlement-entry, .settlement-history, .settlement-reversal { margin-top: 18px; }
.settlement-entry .data-form { max-width: 920px; }
.table-note { display: block; margin-top: 4px; color: var(--muted); font-size: .72rem; }
.settlement-reversal summary { cursor: pointer; font-weight: 650; }
.settlement-reversal form { margin-top: 18px; }
.settlement-dashboard { margin-top: 18px; min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); text-decoration: none; }
.settlement-dashboard > span { display: flex; align-items: center; gap: 12px; }
.settlement-dashboard svg { width: 23px; height: 23px; color: var(--accent-strong); }
.settlement-dashboard span span { display: grid; gap: 3px; }
.settlement-dashboard small { color: var(--muted); }
.settlement-dashboard b { white-space: nowrap; }
.report-filters summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; }
.report-filters summary::-webkit-details-marker { display: none; }
.report-filters summary > span:first-child { display: grid; gap: 3px; }
.report-filters summary small, .report-note { color: var(--muted); font-size: .76rem; }
.report-filters summary > span:last-child { color: var(--accent-strong); font-size: 1.3rem; transition: transform .18s ease; }
.report-filters[open] summary > span:last-child { transform: rotate(45deg); }
.report-filter-grid { grid-template-columns: repeat(4,minmax(0,1fr)); margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.report-summary { margin-top: 18px; }
.report-main-grid, .report-detail-grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(280px,.65fr); gap: 16px; margin-top: 18px; align-items: start; }
.report-detail-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.report-chart .section-heading span { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .7rem; }
.legend { width: 8px; height: 8px; border-radius: 2px; background: var(--primary); }
.legend.expense { margin-left: 7px; background: var(--danger); }
.monthly-bars { display: grid; gap: 13px; }
.month-bar { display: grid; grid-template-columns: 72px minmax(100px,1fr) 95px; align-items: center; gap: 12px; font-size: .75rem; }
.month-bar > div { display: grid; gap: 4px; }
.month-bar > strong { text-align: right; font-size: .75rem; }
.bar { display: block; width: max(2px,var(--bar)); height: 7px; border-radius: 2px; background: var(--primary); }
.bar.expense { background: var(--danger); opacity: .72; }
.monthly-comparison { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.monthly-comparison > div { display: grid; gap: 4px; padding: 10px; background: var(--surface-soft); border-radius: 8px; }
.monthly-comparison strong { font-size: .76rem; }
.monthly-comparison span { color: var(--muted); font-size: .68rem; }
.category-bars { display: grid; gap: 14px; }
.category-bars > div { display: grid; grid-template-columns: minmax(80px,1fr) minmax(80px,1.4fr) auto; align-items: center; gap: 10px; font-size: .75rem; }
.category-bars i { height: 6px; overflow: hidden; border-radius: 4px; background: var(--surface-soft); }
.category-bars i b { display: block; width: max(3px,var(--bar)); height: 100%; background: var(--accent); }
.category-bars strong { text-align: right; font-size: .73rem; }
.report-areas, .report-transactions { margin-top: 18px; }
.flow-openings { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 12px; margin-bottom: 18px; }
.flow-filter { flex-wrap: wrap; align-items: end !important; }
.flow-filter .field { min-width: 150px; }
.flow-openings article { display: grid; gap: 4px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.flow-openings span, .flow-openings small { color: var(--muted); font-size: .72rem; }
.cash-timeline { position: relative; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.cash-timeline::before { content: ''; position: absolute; left: 94px; top: 12px; bottom: 12px; width: 1px; background: var(--line); }
.cash-timeline li { position: relative; min-height: 72px; display: grid; grid-template-columns: 78px minmax(160px,1fr) auto auto auto; align-items: center; gap: 18px; padding: 12px 0; border-bottom: 1px solid #edf0ee; }
.cash-timeline li::before { content: ''; position: absolute; left: 90px; width: 9px; height: 9px; border: 3px solid var(--surface); border-radius: 50%; background: var(--primary); }
.cash-timeline li.out::before { background: var(--danger); }
.cash-timeline time { color: var(--muted); font-size: .72rem; }
.cash-timeline li > span { display: grid; gap: 4px; }
.cash-timeline small { color: var(--muted); }
.cash-timeline b, .cash-timeline em { white-space: nowrap; font-size: .78rem; font-style: normal; }
.cash-timeline em { color: var(--muted); }
.cash-timeline a { color: var(--accent-strong); font-size: .75rem; }
.calendar-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.calendar-toolbar > div { display: grid; justify-items: center; gap: 3px; }
.calendar-toolbar small { color: var(--muted); }
.calendar-empty { display: none; padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--muted); text-align: center; }
.financial-calendar { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.calendar-weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); }
.calendar-weekdays { background: var(--surface-soft); }
.calendar-weekdays span { padding: 10px; color: var(--muted); font-size: .7rem; text-align: center; }
.calendar-day { min-width: 0; min-height: 124px; padding: 9px; border-top: 1px solid var(--line); border-right: 1px solid var(--line); }
.calendar-day:nth-child(7n) { border-right: 0; }
.calendar-day.outside { background: #fafbfa; opacity: .45; }
.calendar-day > time { width: 25px; height: 25px; display: grid; place-items: center; margin-bottom: 6px; color: var(--muted); font-size: .72rem; }
.calendar-day.today > time { border-radius: 50%; background: var(--primary); color: #fff; }
.calendar-day > div { display: grid; gap: 4px; }
.calendar-event { min-width: 0; display: grid; gap: 2px; padding: 5px 6px; border-left: 3px solid var(--accent); border-radius: 4px; background: var(--surface-soft); color: var(--ink); text-decoration: none; font-size: .66rem; }
.calendar-event span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-event strong { font-size: .62rem; }
.calendar-event.due, .calendar-event.installment, .calendar-event.statement { border-color: var(--danger); }
.calendar-event.received, .calendar-event.paid { border-color: var(--primary); }
.calendar-event.subscription, .calendar-event.recurrence { border-color: #76659a; }
.calendar-legend { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 12px; color: var(--muted); font-size: .68rem; }
.calendar-legend span { display: inline-flex; align-items: center; gap: 6px; }
.calendar-legend i { width: 8px; height: 8px; border-radius: 2px; background: var(--accent); }
.calendar-legend i.due, .calendar-legend i.installment, .calendar-legend i.statement { background: var(--danger); }
.calendar-legend i.received { background: var(--primary); }
.calendar-legend i.subscription, .calendar-legend i.recurrence { background: #76659a; }
.planning-dashboard { margin-top: 18px; min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 20px; border: 1px solid #bfd5ca; border-radius: 12px; background: var(--soft); color: var(--ink); text-decoration: none; }
.planning-dashboard > span { display: flex; align-items: center; gap: 12px; }
.planning-dashboard svg { width: 23px; height: 23px; flex: 0 0 auto; color: var(--accent-strong); }
.planning-dashboard span span { display: grid; gap: 3px; }
.planning-dashboard small { color: var(--muted); }
.planning-dashboard b { color: var(--accent-strong); white-space: nowrap; }
.planning-focus { display: grid; gap: 6px; min-width: 190px; }
.planning-focus label { color: var(--muted); font-size: .72rem; }
.planning-hero { display: grid; grid-template-columns: minmax(260px,.9fr) minmax(360px,1.1fr); gap: 34px; margin: 20px 0 18px; padding: 30px; border-radius: 14px; background: var(--primary); color: #fff; }
.planning-hero h2 { margin: 6px 0 12px; font-size: clamp(1.25rem,2vw,1.75rem); font-weight: 600; }
.planning-hero > div > strong { display: block; font-size: clamp(2rem,4vw,3.15rem); font-weight: 650; letter-spacing: -.035em; }
.planning-hero > div > p:last-child { max-width: 48ch; margin: 13px 0 0; color: rgba(255,255,255,.76); line-height: 1.55; }
.planning-hero .eyebrow { color: var(--accent); }
.planning-hero dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; margin: 0; overflow: hidden; border-radius: 10px; background: rgba(255,255,255,.12); }
.planning-hero dl div { min-width: 0; display: grid; align-content: center; gap: 6px; padding: 14px 16px; background: rgba(9,39,32,.42); }
.planning-hero dt { color: rgba(255,255,255,.67); font-size: .68rem; }
.planning-hero dd { margin: 0; font-size: .92rem; font-weight: 650; }
.planning-hero .planning-result { background: rgba(191,139,74,.2); }
.planning-timeline { margin-top: 0; }
.planning-timeline tr.is-selected { background: var(--soft); }
.planning-timeline td:first-child { font-weight: 650; }
.planning-details { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 18px; align-items: start; }
.planning-breakdown { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-bottom: 18px; }
.planning-breakdown span { display: grid; gap: 5px; padding: 11px; border-radius: 8px; background: var(--surface-soft); color: var(--muted); font-size: .68rem; }
.planning-breakdown b { color: var(--ink); font-size: .76rem; }
.planning-income-action { margin-top: 18px; }
.planning-note { max-width: 82ch; margin: 18px 2px 0; color: var(--muted); font-size: .7rem; line-height: 1.55; }
[hidden] { display: none !important; }

@media (max-width: 800px) {
    .sidebar { display: none; }
    .mobile-header { position: sticky; top: 0; z-index: 15; height: 58px; display: flex; align-items: center; padding: 0 18px; background: rgba(243,245,241,.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
    .brand.compact { color: var(--ink); font-size: .92rem; }
    .app-main { margin-left: 0; padding: 28px 18px calc(106px + env(safe-area-inset-bottom)); }
    .bottom-nav { position: fixed; inset: auto 0 0; z-index: 30; min-height: 70px; padding: 8px 10px calc(7px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; background: var(--surface); border-top: 1px solid var(--line); }
    .bottom-link { display: grid; justify-items: center; gap: 4px; text-decoration: none; color: var(--muted); font-size: .65rem; }
    .bottom-link svg { width: 21px; height: 21px; }
    .bottom-link.is-active { color: var(--primary); }
    .mobile-more { position: relative; align-self: stretch; }
    .mobile-more > summary { height: 100%; cursor: pointer; list-style: none; align-content: end; }
    .mobile-more > summary::-webkit-details-marker { display: none; }
    .mobile-more-panel { position: absolute; right: 0; bottom: calc(100% + 12px); width: min(340px, calc(100vw - 20px)); padding: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 44px rgba(20, 43, 37, .18); }
    .mobile-more-panel a { min-height: 48px; padding: 9px 10px; display: flex; align-items: center; gap: 9px; border-radius: 9px; color: var(--ink); font-size: .78rem; line-height: 1.2; text-decoration: none; }
    .mobile-more-panel a svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--muted); }
    .mobile-more-panel a.is-active { background: var(--soft); color: var(--primary); }
    .mobile-more-panel a.is-active svg { color: var(--primary); }
    .quick-add { width: 52px; height: 52px; align-self: center; justify-self: center; display: grid; place-items: center; border: 4px solid var(--surface); border-radius: 50%; background: var(--primary); color: #fff; text-decoration: none; transform: translateY(-15px); }
    .quick-add svg { width: 22px; height: 22px; }
    .page-heading { align-items: flex-start; }
    .desktop-action { display: none; }
    .summary-grid { grid-template-columns: 1fr; }
    .summary-grid.four-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .metric { min-height: 116px; }
    .foundation-note { align-items: start; }
    .dashboard-columns, .split-layout, .split-layout.narrow-form { grid-template-columns: 1fr; }
    .form-surface { position: static; }
    .record-row { grid-template-columns: minmax(0, 1fr) auto; }
    .record-row .row-actions { grid-column: 1 / -1; justify-content: flex-end; padding-bottom: 12px; }
    .category-row { grid-template-columns: minmax(0, 1fr) auto; }
    .toolbar { align-items: stretch; flex-direction: column; }
    .toolbar form { justify-content: flex-end; }
    .check-group { display: grid; }
    .allocation-grid { grid-template-columns: 1fr; }
    .work-catalogs { grid-template-columns: 1fr; }
    .settlement-columns { grid-template-columns: 1fr; }
    .report-filter-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .report-main-grid, .report-detail-grid { grid-template-columns: 1fr; }
    .planning-hero, .planning-details { grid-template-columns: 1fr; }
    .cash-timeline::before, .cash-timeline li::before { display: none; }
    .cash-timeline li { grid-template-columns: 80px minmax(0,1fr) auto; gap: 9px 12px; }
    .cash-timeline em { grid-column: 2; }
    .cash-timeline a { grid-column: 3; grid-row: 2; }
}

@media (max-width: 430px) {
    .app-main { padding-inline: 14px; }
    .foundation-note { grid-template-columns: 1fr; padding: 18px; }
    .section-heading { align-items: flex-start; flex-direction: column; gap: 7px; }
    .auth-page { padding: 14px; }
    .login-panel { padding: 27px 22px 30px; }
    .login-brand { margin-bottom: 36px; }
    .page-heading { flex-direction: column; gap: 18px; }
    .settlement-balance { align-items: flex-start; flex-direction: column; gap: 16px; }
    .report-filter-grid { grid-template-columns: 1fr; }
    .month-bar { grid-template-columns: 58px minmax(80px,1fr); }
    .month-bar > strong { grid-column: 2; text-align: left; }
    .category-bars > div { grid-template-columns: minmax(80px,1fr) auto; }
    .category-bars i { grid-column: 1 / -1; grid-row: 2; }
    .calendar-weekdays { display: none; }
    .calendar-grid { grid-template-columns: 1fr; }
    .calendar-day { min-height: auto; display: grid; grid-template-columns: 34px 1fr; border-right: 0; }
    .calendar-day.outside, .calendar-day:not(:has(.calendar-event)) { display: none; }
    .calendar-day > time { margin: 0; }
    .calendar-empty { display: block; }
    .financial-calendar.is-empty { display: none; }
    .flow-filter { grid-template-columns: 1fr !important; }
    .flow-filter .small-button { width: 100%; }
    .heading-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
    .planning-focus { width: 100%; }
    .planning-hero { gap: 24px; padding: 23px 18px; }
    .planning-hero dl, .planning-breakdown { grid-template-columns: 1fr; }
    .planning-dashboard { align-items: flex-start; flex-direction: column; }
    .summary-grid.four-columns, .data-form, .data-form.wide, .conversion-fields { grid-template-columns: 1fr; }
    .field.full, .form-actions.full, .conversion-fields.full { grid-column: auto; }
    .surface-section { padding: 18px 15px; }
    .segmented-control { display: grid; grid-template-columns: repeat(3, 1fr); }
    .toolbar form { display: grid; grid-template-columns: 1fr auto; }
    .toolbar form label { grid-column: 1 / -1; }
    .toolbar input { width: 100%; }
    .table-surface { padding-inline: 12px; }
    .responsive-table { overflow: visible; }
    table, thead, tbody, tr, td { display: block; }
    thead { display: none; }
    tr { padding: 14px 2px; border-bottom: 1px solid var(--line); }
    td { display: flex; justify-content: space-between; gap: 18px; padding: 5px 4px; border: 0; text-align: right; }
    td::before { content: attr(data-label); color: var(--muted); font-size: .72rem; text-align: left; }
    td:nth-child(2) { display: block; text-align: left; padding-bottom: 10px; }
    td:nth-child(2)::before, .table-actions::before { display: none; }
    .transaction-title { min-width: 0; }
    .table-actions { justify-content: flex-end; }
    .sticky-form-actions { position: sticky; bottom: calc(73px + env(safe-area-inset-bottom)); margin: 0 -14px; padding: 12px 16px; background: rgba(243,245,241,.95); border-top: 1px solid var(--line); backdrop-filter: blur(12px); z-index: 10; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

.quick-entry-shell { max-width: 780px; }
.quick-setup-note { max-width: 780px; border-color: var(--line); background: var(--surface-soft); color: var(--ink); }
.quick-setup-note a { color: inherit; font-weight: 650; }
.quick-entry-shell form { display: grid; gap: 12px; }
.quick-guide { margin-bottom: 18px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); }
.quick-guide summary { color: var(--primary); cursor: pointer; font-weight: 650; }
.quick-guide p { margin: 10px 0 7px; color: var(--muted); font-size: .78rem; }
.quick-guide ul { margin: 0; padding-left: 19px; color: var(--ink); font-size: .76rem; line-height: 1.55; }
.quick-guide li + li { margin-top: 4px; }
.quick-entry-input { position: relative; }
.quick-entry-input textarea { width: 100%; resize: vertical; }
.quick-dictation-note { margin: 0; padding: 10px 12px; border-left: 3px solid var(--accent-strong); background: var(--surface-soft); color: var(--muted); font-size: .76rem; line-height: 1.45; }
.quick-preview { max-width: 920px; margin-top: 20px; }
.quick-preview dl { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; margin: 0 0 20px; background: var(--line); }
.quick-preview dl div { padding: 14px; background: var(--surface, #fff); }
.quick-preview dt { color: var(--muted); font-size: .78rem; }
.quick-preview dd { margin: 5px 0 0; font-weight: 650; }
.quick-needs { margin: 0 0 18px; padding: 12px 14px; border-left: 3px solid #9a6a23; background: var(--surface-soft); color: var(--muted); font-size: .78rem; }
.quick-needs strong { color: var(--ink); }
.quick-areas { border: 0; padding: 0; }
.quick-areas legend { margin-bottom: 8px; font-weight: 650; }
.quick-area-options { display: flex; flex-wrap: wrap; gap: 8px; }
.quick-area-options label, .quick-check { display: flex; align-items: center; gap: 8px; }
.quick-area-options label { min-width: 0; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.quick-area-options input[type="checkbox"], .quick-check input[type="checkbox"] { width: 18px; min-width: 18px; height: 18px; min-height: 18px; margin: 0; padding: 0; flex: 0 0 18px; accent-color: var(--primary); }
.quick-area-options span, .quick-check span { min-width: 0; overflow-wrap: anywhere; }
.quick-area-options label span { color: var(--ink); font-weight: 500; }
.quick-cancel-form { margin-top: 10px; }
.quick-cancel { color: var(--primary); }
@media (max-width: 700px) {
    .quick-preview .section-heading { align-items: flex-start; flex-direction: column; gap: 7px; }
    .quick-preview dl { grid-template-columns: 1fr 1fr; }
    .quick-preview .data-form { grid-template-columns: 1fr; }
    .quick-preview .field.full, .quick-preview .form-actions.full { grid-column: auto; }
    .quick-area-options { display: grid; grid-template-columns: 1fr; }
    .quick-area-options label { width: 100%; }
    .quick-preview .form-actions { display: grid; grid-template-columns: 1fr; gap: 9px; }
    .quick-preview .form-actions > * { width: 100%; }
}