/* Fluid sizing and touch-friendly layouts across phones, tablets, and desktops. */
html{font-size:calc(clamp(14px,1vw + 10px,16px) * var(--system-font-scale, 1));-webkit-text-size-adjust:100%}
img,svg,video,canvas{max-width:100%;height:auto}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
.table-wrap,.table-scroll{max-width:100%;overscroll-behavior-x:contain}
.app-body{overflow-x:hidden}
.app-main{width:calc(100% - 250px);min-width:0}
.app-topbar{gap:clamp(10px,2vw,24px)}
.app-topbar>div{min-width:0}
.panel,.stat-card,.feature-card,.auth-card{min-width:0}
.field input,.field select,.field textarea,.filter-row input,.filter-row select{max-width:100%;font-size:calc(16px * var(--system-font-scale, 1))}
.btn,.side-logout button{min-height:44px}
.field .password-input-wrap{position:relative;display:block;width:100%;min-width:0}
.field .password-input-wrap>input{width:100%;padding-right:48px!important}
.field .password-input-wrap>.password-visibility-toggle{position:absolute;top:50%;right:7px;z-index:2;display:grid;place-items:center;width:34px;height:34px;min-height:34px;padding:0;transform:translateY(-50%);border:0;border-radius:8px;background:transparent;color:#587080;cursor:pointer}
.field .password-input-wrap>.password-visibility-toggle:hover{background:#eaf2f6;color:#123957}
.field .password-input-wrap>.password-visibility-toggle:focus-visible{outline:3px solid #0b6db84d;outline-offset:1px}
.field .password-input-wrap>.password-visibility-toggle svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8}
.field .password-input-wrap>.password-visibility-toggle circle{fill:currentColor;stroke:none}
.modal-launcher-row{display:flex;justify-content:flex-end;margin:0 0 16px}
.app-modal,.password-confirmation-modal{padding:0;border:1px solid #d6e4eb;border-radius:20px;background:#fff;color:#142b3a;box-shadow:0 30px 90px #09283b38;overflow:hidden;overscroll-behavior:contain}
.app-modal{width:min(720px,calc(100vw - 36px));max-width:720px;max-height:min(90dvh,860px)}
.app-modal::backdrop,.password-confirmation-modal::backdrop{background:#0b263b80;backdrop-filter:blur(5px)}
.app-modal-header{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;border-bottom:1px solid #e1ebf0;background:linear-gradient(135deg,#f7fbfd,#eef7f8)}
.app-modal-heading{display:flex;align-items:center;gap:13px;min-width:0}
.app-modal-icon{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border:1px solid #cbe8e7;border-radius:14px;background:linear-gradient(145deg,#e6f7f6,#e9f1fb);color:#087c89;font-size:calc(19px * var(--system-font-scale, 1));font-weight:850}
.app-modal-header h2{margin:0;font-size:calc(clamp(17px,2vw,20px) * var(--system-font-scale, 1));font-weight:850;letter-spacing:-.45px;color:#123957;line-height:1.25}
.app-modal-close{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;padding:0;border:1px solid #d7e4eb;border-radius:12px;background:#fff;color:#36576c;font-size:calc(24px * var(--system-font-scale, 1));line-height:1;cursor:pointer}
.app-modal-close:hover{border-color:#a9cbd4;background:#f4fafb;color:#087c89}
.app-modal-close:focus-visible{outline:3px solid #0b6db84d;outline-offset:2px}
.app-modal-content{max-height:calc(min(90dvh,860px) - 84px);overflow:auto;overscroll-behavior:contain}
.app-modal-form{padding:clamp(20px,4vw,30px)}
.app-modal-form .field{gap:7px}
.app-modal-form .field>span,.app-modal-form label{color:#294b60;font-weight:750}
.app-modal-form input,.app-modal-form select,.app-modal-form textarea{border-radius:11px}
.app-modal-form .form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:10px;padding-top:18px;border-top:1px solid #e9eff3}
.app-modal-form .btn{min-height:46px;border-radius:11px}
.app-modal-user-edit{width:min(560px,calc(100vw - 32px));max-width:560px}
.app-modal-user-edit .app-modal-content{max-height:calc(min(90dvh,760px) - 82px)}
.app-modal-icon svg{display:block;width:23px;height:23px}
.app-modal-user-edit .app-modal-user-form{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:14px;width:100%;padding:24px}
.app-modal-user-form .field{width:100%;min-width:0;margin:0}
.app-modal-user-form .field input,.app-modal-user-form .field select{width:100%;min-width:0;min-height:46px;padding:10px 13px}
.app-modal-user-edit .app-modal-user-form .form-actions{display:flex;grid-column:1/-1;width:100%;justify-content:flex-end;margin:2px 0 0;padding-top:16px}
.password-confirmation-modal{width:min(470px,calc(100vw - 32px));max-height:min(90dvh,640px)}
.password-confirmation-content{padding:22px 26px 26px}
.password-confirmation-content>p{margin:0 0 20px;color:#587080;font-size:calc(13px * var(--system-font-scale, 1));line-height:1.65}
.password-confirmation-modal .field{margin-bottom:20px}
.password-confirmation-modal .field>span{font-size:calc(12px * var(--system-font-scale, 1));color:#294b60;font-weight:750}
.password-confirmation-modal input{width:100%;min-height:48px;padding:10px 13px;border:1px solid #ccdae3;border-radius:11px;font-size:calc(16px * var(--system-font-scale, 1))}
.password-confirmation-modal input:focus{outline:3px solid #0b6db82e;border-color:#0b6db8}
.password-confirmation-actions{display:flex;justify-content:flex-end;gap:10px;padding-top:17px;border-top:1px solid #e9eff3}
.password-confirmation-actions .btn{min-height:46px;border-radius:11px}
.settings-intro{display:flex;align-items:center;gap:18px;margin:3px 0 22px;padding:clamp(19px,3vw,28px);border:1px solid #d3e7eb;border-radius:14px;background:linear-gradient(115deg,#e3f2f2,#edf5fa 72%,#fff);box-shadow:0 8px 22px #12395708}
.dashboard-stat-link{position:relative;color:inherit;text-decoration:none;cursor:pointer}
.dashboard-stat-link:hover{border-color:#a8d6d4;box-shadow:0 12px 28px #12395715}
.dashboard-stat-link:focus-visible{outline:3px solid #0b6db84d;outline-offset:3px}
.stat-card-action{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;color:#087c89;font-size:calc(10px * var(--system-font-scale, 1));font-style:normal;font-weight:800}
.stat-card-action span{font-size:calc(14px * var(--system-font-scale, 1));line-height:1}
.table-action-group{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:0}
.table-action-form{display:inline-flex;width:max-content;max-width:100%;grid-template-columns:1fr;gap:0;margin:0}
.table-action-form .form-actions{display:flex;width:max-content;grid-column:auto;justify-content:flex-start;margin:0;padding:0;border:0}
.table-action-group .btn,.table-action-group .modal-open-button{align-self:flex-start;flex:0 0 auto;width:auto;min-width:0;min-height:34px;padding:6px 10px;border-radius:8px;font-size:calc(11px * var(--system-font-scale, 1));line-height:1.2;box-shadow:none;white-space:nowrap}
.table-action-delete .btn{border:1px solid #efcfca;background:#fff5f3;color:#a14435}
.table-action-delete .btn:hover{background:#ffebe7}
.sidebar nav a{font-weight:800}
.sidebar nav a .nav-mark{flex:0 0 32px;width:32px;height:32px;border-radius:9px;background:#ffffff17;color:#75ded5}
.sidebar nav a .nav-mark svg{display:block;width:19px;height:19px;stroke-width:2.6}
.sidebar nav a.active .nav-mark{background:#0b6db8;color:#a7fff0}
.sidebar nav a.active{box-shadow:none!important}
.alert.caution{border:1px solid #f1d49b;background:#fff8e8;color:#77520b}
.auth-feedback{position:static;width:100%;margin:0 0 18px;padding:12px 14px;border:1px solid #e8bcb7;border-radius:10px;box-shadow:none;line-height:1.5}
.auth-captcha-dialog{width:min(440px,calc(100vw - 32px));max-width:440px;padding:0;border:1px solid #d6e4eb;border-radius:18px;background:#fff;color:#142b3a;box-shadow:0 28px 80px #09283b38;overflow:hidden}
.auth-captcha-dialog::backdrop{background:#0b263b80;backdrop-filter:blur(5px)}
.auth-captcha-header{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid #e1ebf0;background:linear-gradient(135deg,#f7fbfd,#eef7f8)}
.auth-captcha-header h2{flex:1;margin:0;color:#123957;font-size:calc(18px * var(--system-font-scale, 1));font-weight:850}
.auth-captcha-icon{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border:1px solid #cbe8e7;border-radius:13px;background:#e6f7f6;color:#087c89}
.auth-captcha-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.auth-captcha-content{display:grid;gap:13px;padding:22px}
.auth-captcha-content>p:first-child{margin:0;color:#587080;font-size:calc(13px * var(--system-font-scale, 1))}
.auth-captcha-content .field{gap:7px;margin:0}
.auth-captcha-content .field input{width:100%;min-height:48px;padding:10px 13px}
.auth-captcha-error{min-height:0;margin:0;color:#8a3833;font-size:calc(12px * var(--system-font-scale, 1));font-weight:700}
.auth-captcha-error:empty{display:none}
.auth-captcha-actions{display:flex;justify-content:flex-end;gap:10px;padding-top:8px}
.profile-no-changes{margin:0 0 16px}
.avatar{position:relative;overflow:hidden;padding:0}
.avatar img{display:block;width:100%;height:100%;object-fit:cover}
.profile-photo-field{display:grid;grid-template-columns:104px minmax(0,1fr);align-items:center;gap:18px;padding:17px;border:1px solid #dce8ee;border-radius:13px;background:#f8fbfc}
.profile-photo-preview{display:grid;place-items:center;width:104px;height:104px;overflow:hidden;border:3px solid #fff;border-radius:50%;background:linear-gradient(145deg,#d9f1ed,#dcebf7);box-shadow:0 0 0 1px #cbdde6,0 7px 18px #12395712}
.profile-photo-preview img{display:block;width:100%;height:100%;object-fit:cover}
.profile-picture-initial{color:#087c89;font-size:calc(38px * var(--system-font-scale, 1));font-weight:850;line-height:1}
.profile-photo-field .field{gap:7px}
.profile-photo-field .field input[type="file"]{min-height:44px;padding:7px;border-radius:9px;background:#fff;font-size:calc(12px * var(--system-font-scale, 1))}
.profile-photo-field .field small{color:#718897;font-size:calc(11px * var(--system-font-scale, 1))}
.settings-intro-icon{display:grid;place-items:center;flex:0 0 52px;width:52px;height:52px;border-radius:15px;background:#d2eeeb;color:#087c89;font-size:calc(23px * var(--system-font-scale, 1));font-weight:800}
.settings-intro .eyebrow{margin:0 0 5px}
.settings-intro h2{margin:0 0 5px;color:#123957;font-size:calc(clamp(21px,3vw,28px) * var(--system-font-scale, 1));font-weight:850;letter-spacing:-.8px}
.settings-intro>div>p:last-child{margin:0;color:#587080;font-size:calc(13px * var(--system-font-scale, 1))}
.settings-tabs{display:flex;gap:6px;margin:0 0 18px;padding:5px;border:1px solid #d9e5ec;border-radius:11px;background:#eaf1f5;width:max-content;max-width:100%}
.settings-tab{min-height:42px;padding:9px 17px;border:0;border-radius:8px;background:transparent;color:#526f81;font-size:calc(12px * var(--system-font-scale, 1));font-weight:800;white-space:nowrap}
.settings-tab[aria-selected="true"]{background:#fff;color:#0b6db8;box-shadow:0 2px 8px #12395712}
.system-notice-toast{position:fixed;top:18px;right:18px;z-index:1000;width:min(420px,calc(100vw - 36px));margin:0;box-shadow:0 12px 32px #12395725}
.settings-tab:focus-visible{outline:3px solid #0b6db84d;outline-offset:2px}
.settings-tab-panel[hidden]{display:none!important}
.settings-section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:0 0 13px}
.settings-section-heading .eyebrow{margin:0 0 4px}
.settings-section-heading h2{margin:0;color:#142b3a;font-size:calc(19px * var(--system-font-scale, 1));font-weight:850;letter-spacing:-.5px}
.settings-section-heading>p{max-width:400px;margin:0;color:#6a8190;font-size:calc(11px * var(--system-font-scale, 1));text-align:right}
.settings-options{display:grid;gap:10px}
.brand-custom-logo{display:inline-flex;align-items:center;gap:10px;min-width:0}
.brand-logo{display:block;flex:0 0 auto;width:auto;max-width:calc(170px * var(--brand-logo-scale,1));height:auto;max-height:calc(42px * var(--brand-logo-scale,1));object-fit:contain}
.brand-custom-name{font:800 calc(18px * var(--brand-logo-scale,1) * var(--system-font-scale,1)) system-ui,sans-serif;letter-spacing:-1px;white-space:nowrap}
.sidebar .brand-custom-name{color:#fff}
.settings-logo-preview-wrap{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.settings-logo-preview-wrap strong{white-space:nowrap;color:#18364a;font-size:calc(12px * var(--system-font-scale,1))}
.settings-logo-preview{display:block;flex:0 0 auto;width:60px;height:48px;object-fit:contain;border:1px solid #d9e5ec;border-radius:8px;padding:5px;background:#fff}
.settings-option{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:17px 19px;border:1px solid #d9e5ec;border-radius:12px;background:#fff;box-shadow:0 5px 16px #12395707}
.settings-option-copy{display:flex;align-items:center;gap:13px;min-width:0}
.settings-option-icon{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border-radius:11px;background:#e4f2f3;color:#087c89;font-size:calc(16px * var(--system-font-scale, 1));font-weight:850}
.settings-option h3{margin:0 0 3px;color:#18364a;font-size:calc(14px * var(--system-font-scale, 1));font-weight:850;letter-spacing:-.2px}
.settings-option p{margin:0 0 5px;color:#60798a;font-size:calc(11px * var(--system-font-scale, 1))}
.settings-option small{color:#758b99;font-size:calc(10px * var(--system-font-scale, 1))}
.settings-option small strong{color:#25495f;font-weight:800}
.settings-option>.btn,.settings-option>.modal-open-button{flex:0 0 auto;min-width:78px}
.system-color-reset-form{flex:0 0 auto;margin:0}
.settings-edit-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 15px}
.settings-table-wrap{border:1px solid #d9e5ec;border-radius:11px;background:#fff}
.settings-table{font-size:calc(12px * var(--system-font-scale, 1))}
.settings-table th{background:#f2f7f9;color:#527084;font-size:calc(10px * var(--system-font-scale, 1));letter-spacing:.55px;text-transform:uppercase}
.settings-table td{line-height:1.55;color:#29485b}
.settings-table td:first-child{min-width:205px}
.settings-table td strong,.settings-table td small{display:block}
.settings-table td strong{color:#17384d;font-size:calc(12px * var(--system-font-scale, 1))}
.settings-table td small{margin-top:2px;color:#718897;font-size:calc(10px * var(--system-font-scale, 1))}
.settings-footnote{margin:12px 2px 0;color:#718897;font-size:calc(11px * var(--system-font-scale, 1))}
.table-pagination,.pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:13px;color:#60798a;font-size:calc(11px * var(--system-font-scale, 1))}
.table-pagination[hidden],.pagination[hidden],.bulk-select-toolbar[hidden]{display:none!important}
.table-pagination-summary{font-size:calc(11px * var(--system-font-scale, 1));font-weight:650;white-space:nowrap}
.table-pagination-controls{display:flex;align-items:center;justify-content:flex-end;gap:4px;flex-wrap:wrap}
.table-page-button{display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:32px;padding:5px 9px;border:1px solid #d5e1e8;border-radius:6px;background:#fff;color:#36576c;font:700 calc(11px * var(--system-font-scale, 1))/1.2 system-ui,sans-serif;text-decoration:none;white-space:nowrap}
.table-page-button:hover:not(:disabled):not(.is-disabled){border-color:#8abacb;color:#0b6db8}
.table-page-button:disabled,.table-page-button.is-disabled{background:#f3f6f8;color:#9aabb5;cursor:default}
.table-page-button.is-current{border-color:#0b6db8;background:#0b6db8;color:#fff}
.table-page-ellipsis{padding-inline:2px;color:#718897}
.table-pagination-controls .table-page-ellipsis{margin:0}
.bulk-select-toolbar{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin:0 0 14px;padding:13px 15px;border:1px solid #cfdee7;border-radius:10px;background:#f8fbfc}
.bulk-select-toolbar>span{align-self:center;margin-right:auto;color:#36576c;font-size:calc(12px * var(--system-font-scale, 1));font-weight:800}
.bulk-select-toolbar .field{min-width:190px}
.bulk-select-toolbar .field>span{font-size:calc(10px * var(--system-font-scale, 1))}
.bulk-select-toolbar select{min-height:40px}
.expense-filters .status-filter{min-width:180px;flex:1.2}
.expense-filters .status-filter select[multiple]{min-height:112px;padding:6px 9px}
.expense-filters .status-filter small{color:#718897;font-size:calc(10px * var(--system-font-scale, 1));line-height:1.4}
.expense-filters .status-filter{position:relative;display:grid;gap:4px;min-width:140px;margin:0;padding:0;border:0;align-self:end}
.expense-filters .status-filter legend{padding:0;color:#61798a;font-size:calc(10px * var(--system-font-scale, 1))}
.status-picker{position:relative}
.status-picker summary{display:flex;align-items:center;justify-content:space-between;min-height:40px;padding:0 11px;border:1px solid #d2e0e8;border-radius:7px;background:#fff;color:#29465a;font-size:calc(13px * var(--system-font-scale, 1));cursor:pointer;list-style:none}
.status-picker summary::-webkit-details-marker{display:none}
.status-picker summary::after{content:"⌄";margin-left:10px;color:#587486;font-size:calc(15px * var(--system-font-scale, 1))}
.status-picker[open] summary{border-color:#1681c4;box-shadow:0 0 0 3px #1681c41c}
.status-picker-options{position:absolute;top:calc(100% + 5px);left:0;z-index:30;display:grid;gap:2px;width:max(100%,190px);max-height:230px;overflow:auto;padding:6px;border:1px solid #d2e0e8;border-radius:9px;background:#fff;box-shadow:0 12px 28px #18354b24}
.status-picker-options label{display:flex;align-items:center;gap:8px;padding:8px;border-radius:6px;color:#29465a;font-size:calc(12px * var(--system-font-scale, 1));cursor:pointer}
.status-picker-options label:hover{background:#eef7fa}
.status-picker-options input{width:16px;height:16px;margin:0;accent-color:#087e91}
.alternative-remove{display:block;margin:8px 0 0 auto;padding:7px 10px;border:1px solid #f0d4d1;border-radius:7px;background:#fff7f6;color:#a33b35;font-size:calc(10px * var(--system-font-scale, 1));font-weight:800;cursor:pointer}
.alternative-remove:hover{background:#fdebea}
.alternative-remove:focus-visible{outline:3px solid #d96a6233;outline-offset:2px}
input[name="ends_on"][readonly]{background:#f2f7f9;color:#526f81;cursor:not-allowed}
.report-section-tabs{display:flex;gap:5px;width:max-content;max-width:100%;margin:14px 0;padding:5px;border:1px solid #d7e5eb;border-radius:10px;background:#eaf2f6;overflow-x:auto}
.report-section-tabs button{flex:0 0 auto;min-height:38px;padding:0 16px;border:0;border-radius:7px;background:transparent;color:#587486;font:inherit;font-size:calc(12px * var(--system-font-scale, 1));font-weight:800;cursor:pointer}
.report-section-tabs button[aria-pressed="true"]{background:#fff;color:#0874b8;box-shadow:0 2px 8px #1d405014}
.report-tab-overview[hidden],.report-tab-transactions[hidden],.report-tab-priorities[hidden],.report-tab-savings[hidden]{display:none!important}
[data-admin-dashboard-panel][hidden]{display:none!important}
@media(max-width:520px){.report-section-tabs{width:100%;justify-content:flex-start}.report-section-tabs button{padding:0 12px}}
@media print{.report-section-tabs{display:none!important}.report-tab-overview,.report-tab-transactions,.report-tab-priorities,.report-tab-savings{display:block!important}.report-tab-overview[hidden],.report-tab-transactions[hidden],.report-tab-priorities[hidden],.report-tab-savings[hidden]{display:block!important}}
input[type="checkbox"][data-select-all],input[type="checkbox"][data-row-select]{width:18px;height:18px;accent-color:#0b6db8;vertical-align:middle}
.site-header{position:sticky;top:0;z-index:20;width:100%;max-width:none}
.site-header{padding-left:max(20px,calc((100% - 1320px)/2));padding-right:max(20px,calc((100% - 1320px)/2))}
.hero h1,.page-hero h1{font-size:calc(clamp(2.6rem,6vw,4.6rem) * var(--system-font-scale, 1))}
.feature-section,.steps,.privacy-content,.story-grid{min-width:0}
.sidebar-backdrop{display:none}
.sidebar-open{overflow:hidden}

@media(max-width:1100px){
  .app-main{padding-inline:clamp(16px,3vw,28px)}
  .sidebar{width:220px}
  .app-main{width:calc(100% - 220px);margin-left:220px}
  .app-topbar h1{font-size:calc(clamp(20px,2.4vw,25px) * var(--system-font-scale, 1))}
  .criteria-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:800px){
  .site-header .primary-nav{gap:clamp(14px,3vw,28px)}
  .hero{gap:clamp(18px,4vw,34px)}
  .story-grid{gap:clamp(24px,5vw,48px)}
  .steps article{grid-template-columns:42px minmax(0,1fr) minmax(150px,210px);gap:clamp(12px,2.5vw,22px)}
  .app-main{padding-inline:20px}
  .content-grid{grid-template-columns:minmax(0,1fr)}
  .panel{padding:clamp(16px,2.6vw,22px)}
  .recommendation-intro{gap:16px}
}
@media(max-width:900px){
  .sidebar{width:min(310px,86vw);height:100dvh;overflow-y:auto;overscroll-behavior:contain;transform:translateX(-105%);box-shadow:10px 0 34px #071d2b38}
  .sidebar.is-open{transform:translateX(0)}
  .sidebar-toggle{display:inline-grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border:1px solid #d3e1e8;border-radius:11px;background:#fff;color:#123957;font-size:calc(20px * var(--system-font-scale, 1))}
  .sidebar-backdrop{display:block;position:fixed;z-index:9;inset:0;border:0;padding:0;background:#071d2b70;opacity:0;visibility:hidden}
  .sidebar-open .sidebar-backdrop{opacity:1;visibility:visible}
  .app-main{width:100%;margin-left:0;padding-inline:clamp(18px,4vw,34px)}
  .app-topbar{gap:12px}
  .app-topbar>div{flex:1;min-width:0}
  .app-topbar time{white-space:nowrap}
}
@media(max-width:700px){
  .sidebar{padding:18px 16px 16px}
  .sidebar.is-open{transform:translateX(0)}
  .sidebar-backdrop{display:block}
  .sidebar-open .sidebar-backdrop{opacity:1;visibility:visible}
  .sidebar nav{gap:5px}
  .sidebar nav a{min-height:46px;padding:10px 12px;font-size:calc(14px * var(--system-font-scale, 1))}
  .side-logout button{min-height:46px}
  .app-main{width:100%;margin-left:0;padding:0 clamp(14px,4vw,22px) 24px}
  .app-topbar{min-height:76px;margin-bottom:18px}
  .sidebar-toggle{width:44px;height:44px;flex:0 0 44px;font-size:calc(20px * var(--system-font-scale, 1))}
  .app-topbar h1{font-size:calc(clamp(19px,5vw,23px) * var(--system-font-scale, 1));line-height:1.2}
  .app-topbar .eyebrow{font-size:calc(9px * var(--system-font-scale, 1));letter-spacing:1px}
  .app-topbar time{font-size:calc(10px * var(--system-font-scale, 1));white-space:nowrap}
  .welcome-row{padding:clamp(16px,4vw,22px);border-radius:12px}
  .welcome-row h2{font-size:calc(clamp(21px,6vw,27px) * var(--system-font-scale, 1));line-height:1.2}
  .stats-grid,.compact-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .stat-card{min-height:100px;padding:12px}
  .stat-card>b{font-size:calc(clamp(20px,5.5vw,25px) * var(--system-font-scale, 1));overflow-wrap:anywhere}
  .panel{padding:clamp(14px,4vw,19px);border-radius:12px}
  .app-modal{width:calc(100vw - 20px);max-width:none;max-height:92dvh;border-radius:17px}
  .app-modal-header{padding:15px 17px}
  .app-modal-header h2{font-size:calc(17px * var(--system-font-scale, 1))}
  .app-modal-icon{flex-basis:38px;width:38px;height:38px;border-radius:12px}
  .app-modal-content{max-height:calc(92dvh - 70px)}
  .app-modal-form{padding:18px 16px}
  .app-modal-user-edit .app-modal-user-form{gap:12px;padding:18px 16px}
  .profile-photo-field{grid-template-columns:1fr;justify-items:start;gap:13px;padding:14px}
  .profile-photo-preview{width:92px;height:92px}
  .app-modal-form .form-actions{flex-direction:column-reverse;align-items:stretch}
  .app-modal-form .form-actions .btn{width:100%;min-height:46px}
  .password-confirmation-modal{width:calc(100vw - 24px);border-radius:17px}
  .password-confirmation-content{padding:18px 19px 20px}
  .password-confirmation-actions{flex-direction:column-reverse}
  .password-confirmation-actions .btn{width:100%;min-height:46px}
  .settings-intro{align-items:flex-start;gap:12px;padding:17px}
  .settings-intro-icon{flex-basis:42px;width:42px;height:42px;border-radius:12px;font-size:calc(19px * var(--system-font-scale, 1))}
  .settings-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
  .settings-tab{padding-inline:9px;font-size:calc(11px * var(--system-font-scale, 1))}
  .settings-edit-form{grid-template-columns:minmax(0,1fr)}
  .settings-section-heading{align-items:flex-start;flex-direction:column;gap:4px}
  .settings-section-heading>p{text-align:left}
  .settings-option{align-items:flex-start;padding:14px;gap:12px}
  .settings-option-copy{gap:10px}
  .settings-option p{line-height:1.45}
  .settings-option>.btn,.settings-option>.modal-open-button{min-width:62px;padding-inline:12px}
  .settings-table{min-width:650px}
  .table-pagination,.pagination{align-items:flex-start;flex-direction:column;gap:9px}
  .table-pagination-summary,.pagination .table-pagination-summary{width:auto;margin:0}
  .table-pagination-controls{justify-content:flex-start;gap:3px;max-width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px}
  .table-page-button{min-width:31px;min-height:34px;padding-inline:8px}
  .pagination .table-pagination-controls span{width:auto}
  .bulk-select-toolbar{align-items:stretch;flex-direction:column}
  .bulk-select-toolbar>span{margin:0}
  .bulk-select-toolbar .field,.bulk-select-toolbar>.btn{width:100%}
  .expense-filters .status-filter{grid-column:1/-1}
  .modal-launcher-row{margin-bottom:12px}
  .panel-heading{align-items:flex-start;flex-wrap:wrap}
  .panel-heading h2{font-size:calc(16px * var(--system-font-scale, 1))}
  .form-grid{grid-template-columns:minmax(0,1fr);gap:13px}
  .span-2,.form-actions{grid-column:1}
  .field>span{font-size:calc(12px * var(--system-font-scale, 1))}
  .field input,.field select,.field textarea{min-height:46px}
  .field textarea{min-height:96px}
  .form-actions{justify-content:stretch}
  .form-actions .btn,.auth-form>.btn{width:100%;min-height:48px}
  .filter-form,.filter-row{align-items:stretch;flex-direction:column}
  .filter-form .field{min-width:0;width:100%}
  .filter-form .btn{width:100%}
  .table-wrap{margin-inline:-2px}
  .table-wrap table{min-width:620px}
  .table-wrap th,.table-wrap td{padding:10px 9px}
  .row-actions{white-space:nowrap}
  .recommendation-item{gap:10px}
  .recommendation-title{align-items:flex-start;flex-wrap:wrap}
  .recommendation-copy{min-width:calc(100% - 51px)}
  .allocation{margin-left:49px}
  .alternative-fields,.criteria-grid{grid-template-columns:minmax(0,1fr)}
  .alternative-field{padding:12px}
  .auth-page{min-height:calc(100dvh - 70px);padding:clamp(18px,5vw,30px) 16px 46px}
  .auth-card{width:min(100%,480px);padding:clamp(20px,6vw,30px);border-radius:14px}
  .auth-card h1{font-size:calc(clamp(25px,7vw,32px) * var(--system-font-scale, 1));line-height:1.15}
  .auth-footnote{position:static;max-width:480px;margin:12px auto 0}
  .site-header{padding-inline:18px}
  .site-header .brand-name{font-size:calc(18px * var(--system-font-scale, 1))}
  .value-inner{gap:clamp(8px,2vw,12px)}
  .value-inner span{font-size:calc(clamp(9px,2.6vw,11px) * var(--system-font-scale, 1))}
  .steps article{grid-template-columns:30px minmax(0,1fr);gap:10px;padding:25px 0}
  .steps article>div:nth-child(2){min-width:0}
  .steps .step-visual{grid-column:2;width:100%}
  .steps h2{font-size:calc(clamp(19px,5.4vw,23px) * var(--system-font-scale, 1))}
}
@media(max-width:390px){
  .app-main{padding-inline:12px}
  .app-topbar{gap:8px}
  .app-topbar .eyebrow{letter-spacing:.5px;font-size:calc(8px * var(--system-font-scale, 1))}
  .app-topbar time{font-size:calc(9px * var(--system-font-scale, 1))}
  .stats-grid,.compact-stats{gap:7px}
  .stat-card{padding:10px;min-height:92px}
  .stat-card>span{font-size:calc(10px * var(--system-font-scale, 1))}
  .stat-card>b{font-size:calc(19px * var(--system-font-scale, 1))}
  .site-header{padding-inline:14px}
  .brand{gap:8px}
  .brand-mark{width:36px;height:36px}
  .hero h1,.page-hero h1{font-size:calc(clamp(2.35rem,11vw,2.8rem) * var(--system-font-scale, 1))}
  .hero-art{min-height:340px;height:340px}
  .budget-card{width:92%;padding:17px}
  .amount{font-size:calc(32px * var(--system-font-scale, 1))}
  .value-inner{justify-content:space-between;gap:5px}
  .value-inner span:last-child{max-width:105px}
}
@media(max-width:700px){
  .table-wrap{width:100%;margin:0;overflow:visible}
  .table-wrap table,.table-wrap .settings-table{display:block;width:100%;min-width:0;border-collapse:separate;border-spacing:0}
  .table-wrap table thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .table-wrap table tbody{display:grid;gap:12px;width:100%}
  .table-wrap table tbody tr{display:grid;min-width:0;padding:8px 13px;border:1px solid #d8e5eb;border-radius:13px;background:#fff;box-shadow:0 5px 15px #1239570b}
  .table-wrap table tbody td{display:grid;grid-template-columns:minmax(88px,.68fr) minmax(0,1.32fr);align-items:start;gap:12px;min-width:0;padding:9px 2px;border:0;overflow-wrap:anywhere;color:#18364a;font-weight:700}
  .table-wrap table tbody td::before{content:attr(data-label);color:#34576d;font-size:calc(11px * var(--system-font-scale, 1));font-weight:900;line-height:1.5}
  .table-wrap table tbody td[data-label=""]{display:flex;align-items:center;justify-content:flex-start;gap:9px;padding-block:7px}
  .table-wrap table tbody td[data-label=""]::before{content:none}
  .table-wrap table tbody td:first-child:not([data-label=""]){padding-top:10px}
  .table-wrap .settings-table td:first-child{min-width:0}
  .table-wrap table .row-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;white-space:normal}
  .table-wrap table .row-actions form{display:inline-flex}
  .table-wrap table tbody td>form:not(.inline-category-form){display:flex;align-items:flex-start;justify-content:flex-start;min-width:0}
  .table-wrap table tbody td>form:not(.inline-category-form) .form-actions{display:flex;grid-column:auto;justify-content:flex-start;margin:0;padding:0;border:0}
  .table-wrap table tbody td>form:not(.inline-category-form) .btn{min-width:0;min-height:32px;padding:5px 9px;border-radius:8px;font-size:calc(10px * var(--system-font-scale, 1));line-height:1.2;box-shadow:none;white-space:nowrap}
  .table-action-group .btn,.table-action-group .modal-open-button{align-self:flex-start;flex:0 0 auto;width:auto;min-width:0;min-height:32px;padding:5px 9px;border-radius:8px;font-size:calc(10px * var(--system-font-scale, 1));line-height:1.2;box-shadow:none;white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){.sidebar,.sidebar-backdrop{transition:none!important}}

/* Keep navigation and controls still; reserve motion for page changes. */
*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.sidebar,.sidebar nav a,.sidebar .brand,.sidebar .side-logout button,.sidebar-backdrop{transition:none!important;animation:none!important}
.sidebar nav a:hover,.sidebar nav a:active,.sidebar nav a.active,.sidebar .brand:hover,.sidebar .side-logout button:hover{transform:none!important}
.site-header .primary-nav a,.site-header .header-actions a,.site-header .brand{transition:none!important;animation:none!important;transform:none}
.site-header .primary-nav a[aria-current="page"]::after{animation:none!important}
.motion-ready .hero-copy,.motion-ready .hero-art,.motion-ready .value-strip,.motion-ready .feature-card,.motion-ready .page-hero,.budget-card,.orbit-one,.orbit-two,.motion-ready .app-topbar,.motion-ready .welcome-row,.motion-ready .stats-grid .stat-card,.motion-ready .panel,.motion-ready .auth-card,.motion-ready #main-content{animation:none!important}
.motion-ready .feature-card.is-visible{animation:feature-card-reveal .68s cubic-bezier(.2,.75,.2,1) both!important}
.motion-ready .feature-card.is-visible:nth-child(2){animation-delay:.12s!important}
.motion-ready .feature-card.is-visible:nth-child(3){animation-delay:.24s!important}
.feature-card{transition:transform .3s cubic-bezier(.2,.75,.2,1),box-shadow .3s ease,border-color .3s ease!important}
.feature-card:hover,.feature-card:focus-within{transform:translateY(-8px) scale(1.012)!important;box-shadow:0 18px 36px #12395720!important}
.feature-card .feature-symbol{transition:transform .3s cubic-bezier(.2,.75,.2,1)!important}
.feature-card:hover .feature-symbol,.feature-card:focus-within .feature-symbol{transform:rotate(-5deg) scale(1.08)!important}
@keyframes feature-card-reveal{from{opacity:0;transform:translateY(22px) scale(.985);filter:blur(3px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
@media(prefers-reduced-motion:reduce){.feature-card,.feature-card:hover,.feature-card:focus-within,.feature-card .feature-symbol,.feature-card:hover .feature-symbol,.feature-card:focus-within .feature-symbol{animation:none!important;transition:none!important;transform:none!important;filter:none!important}}
body.page-exiting{opacity:0;transform:translateY(-5px);transition:opacity .14s ease,transform .14s ease!important}
@view-transition{navigation:auto}
.app-main{view-transition-name:app-main}
#main-content{view-transition-name:public-main}
::view-transition-old(root),::view-transition-new(root){animation:none!important}
::view-transition-old(app-main){animation:page-only-out .18s ease-in both!important}
::view-transition-new(app-main){animation:page-only-in .32s cubic-bezier(.2,.75,.2,1) both!important}
::view-transition-old(public-main){animation:page-only-out .18s ease-in both!important}
::view-transition-new(public-main){animation:page-only-in .32s cubic-bezier(.2,.75,.2,1) both!important}
@keyframes page-only-out{to{opacity:0;transform:translateY(-5px)}}
@keyframes page-only-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root),::view-transition-old(app-main),::view-transition-new(app-main),::view-transition-old(public-main),::view-transition-new(public-main){animation:none!important}body.page-exiting{opacity:1;transform:none;transition:none!important}}

/* Group system appearance controls by task and keep the three color roles side by side. */
.appearance-settings{gap:22px}
.appearance-group{display:grid;gap:10px;min-width:0}
.appearance-group-heading{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.appearance-group-heading h3{margin:0;color:#18364a;font-size:calc(15px * var(--system-font-scale,1));font-weight:850;letter-spacing:-.25px}
.appearance-group-heading p{margin:0;color:#718897;font-size:calc(11px * var(--system-font-scale,1));text-align:right}
.appearance-color-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.appearance-color-option{min-width:0;min-height:100%;align-items:stretch;flex-direction:column;justify-content:flex-start;gap:14px}
.appearance-color-option .settings-option-copy{align-items:flex-start}
.appearance-color-option .settings-option-copy>div{min-width:0}
.appearance-color-option .settings-edit-form{display:flex;width:100%;flex-direction:column;align-items:stretch;gap:11px;margin-top:auto}
.appearance-color-option .settings-edit-form .field input[type="color"]{width:100%;height:42px;padding:4px}
.color-picker-control{display:inline-flex;align-items:center;gap:10px;width:max-content;max-width:100%;padding:5px 12px 5px 5px;border:1px solid #c9dbe5;border-radius:9px;background:#fff;cursor:pointer;transition:border-color .16s,box-shadow .16s,background .16s}
.color-picker-control:hover{border-color:var(--system-theme-color,#0b6db8);background:#f7fbfd;box-shadow:0 3px 10px #12395712}
.color-picker-control:focus-within{outline:3px solid color-mix(in srgb,var(--system-theme-color,#0b6db8) 24%,transparent);outline-offset:2px}
.appearance-color-option .color-picker-control input[type="color"]{flex:0 0 56px;width:56px!important;height:38px!important;padding:3px!important;border:1px solid #d2e0e8;border-radius:6px;background:#fff;cursor:pointer}
.color-picker-button{color:#0b6db8;font-size:calc(11px * var(--system-font-scale,1));font-weight:850;white-space:nowrap;cursor:pointer}
.appearance-color-option .form-actions{grid-column:auto}
.appearance-logo-option .settings-edit-form{width:min(610px,55%)}
.appearance-reset-option{grid-column:1/-1;min-height:76px;padding-block:12px}
.appearance-font-option .settings-edit-form{width:min(360px,40%);grid-template-columns:minmax(0,1fr)}
.appearance-font-option .form-actions{grid-column:auto}
@media(max-width:1100px){.appearance-color-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.appearance-color-option:nth-of-type(3){grid-column:1/-1}}
@media(max-width:700px){.appearance-color-grid{grid-template-columns:minmax(0,1fr)}.appearance-color-option:nth-of-type(3){grid-column:auto}.appearance-group-heading{align-items:flex-start;flex-direction:column;gap:2px}.appearance-group-heading p{text-align:left}.appearance-logo-option,.appearance-font-option{align-items:stretch;flex-direction:column}.appearance-logo-option .settings-edit-form,.appearance-font-option .settings-edit-form{width:100%}.appearance-reset-option{align-items:stretch;flex-direction:column}}
html[data-gastoswise-theme="dark"] .appearance-group-heading h3{color:#e7eef5}
html[data-gastoswise-theme="dark"] .appearance-group-heading p{color:#a8bac9}

/* Keep the registration note in normal flow so zoom and short viewports cannot overlap the form. */
.auth-page{min-height:calc(100vh - 85px);min-height:calc(100dvh - 85px);grid-template-columns:minmax(0,1fr);align-content:center;gap:12px;padding:clamp(20px,5vh,48px) clamp(16px,4vw,32px)}
.auth-card{width:min(100%,480px);margin-inline:auto}
.auth-footnote{position:static;inset:auto;width:min(100%,480px);margin:0 auto;text-align:center;overflow-wrap:anywhere}
.auth-form,.auth-form>*{min-width:0}
.auth-form>.btn{white-space:normal;line-height:1.35;padding-inline:12px}
.field-hint{overflow-wrap:anywhere}
@media(max-width:560px){.auth-page{align-content:start;padding:20px 14px 30px}.auth-card{padding:clamp(18px,5vw,24px)}}
@media(max-height:620px){.auth-page{align-content:start}}

/* Keep both dashboard sidebars usable when browser or display zoom reduces viewport height. */
.app-body .sidebar{height:100vh;height:100dvh;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch}
.app-body .sidebar nav,.app-body .sidebar .side-logout{flex-shrink:0}


/* Separate the final navigation link from the sign-out action. */
.app-body .sidebar .side-logout{padding-top:18px}


/* Raise undersized dashboard copy while preserving larger existing type and user scaling. */
body.app-body{font-size:max(16px,calc(15px * var(--system-font-scale, 1)))}
body.app-body :where(*){font-size:max(12px,1em)}


/* Keep dashboard text clear while reducing the heavy weight used across shared views. */
body.app-body{font-weight:400}
body.app-body :is(p,li,td,small,time,.subtle,.app-footer,.field-hint,.side-user small,.plan-summary,.chart-bar-value,.chart-bar-label,.category-chart-row>small,.usage-trend-row>*){font-weight:400}
body.app-body :is(label,.field>span,.sidebar nav a,.side-user b,.text-link,.mini-link,.badge,.pagination,.table-wrap th){font-weight:500}
body.app-body :is(h1,h2,h3,.app-topbar h1,.welcome-row h2,.stat-card>b,.goal-progress b,.balance-panel h2){font-weight:650}
body.app-body :is(.btn,.side-logout button,.app-topbar .eyebrow,.eyebrow){font-weight:600}


/* Restore emphasis for semantic strong text and important dashboard UI. */
body.app-body :is(strong,b,th,.badge,.sidebar nav a.active,.panel-heading h2,.app-topbar h1,.welcome-row h2,.stat-card>b,.goal-progress b,.balance-panel h2){font-weight:700}
body.app-body :is(.btn,.side-logout button,.field>span,.sidebar nav a,.side-user b,.text-link,.mini-link,label){font-weight:600}


/* Slightly enlarge sidebar labels without changing their spacing or icons. */
body.app-body .sidebar nav a{font-size:max(14px,calc(14px * var(--system-font-scale, 1)))}


/* Keep category edit and status actions aligned in the same row. */
.category-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.category-actions>.modal-launcher-row{justify-content:flex-start;margin:0}.category-actions>.category-toggle-form{display:block;flex:0 0 auto;margin:0}.category-actions>.category-toggle-form .form-actions{grid-column:auto;justify-content:flex-start;margin:0;padding:0;border:0}


/* Slightly enlarge the uploaded GastosWise logo across shared headers and sidebars. */
.brand-logo{max-width:calc(185px * var(--brand-logo-scale,1));max-height:calc(48px * var(--brand-logo-scale,1))}


/* Give the uploaded brand logo a more noticeable size increase. */
.brand-logo{max-width:calc(210px * var(--brand-logo-scale,1));max-height:calc(56px * var(--brand-logo-scale,1))}


/* Enlarge the full sidebar brand lockup: image, fallback mark, and name. */
.app-body .sidebar .brand-logo{max-width:calc(225px * var(--brand-logo-scale,1));max-height:calc(64px * var(--brand-logo-scale,1))}
.app-body .sidebar .brand-custom-name{font-size:calc(21px * var(--brand-logo-scale,1) * var(--system-font-scale,1))}
.app-body .sidebar .brand-mark{width:44px;height:44px;font-size:calc(28px * var(--system-font-scale,1))}
.app-body .sidebar .brand-name{font-size:calc(21px * var(--system-font-scale,1))}