@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;650;700;750;800&display=swap');
:root{color-scheme:light;--ink:#213b32;--muted:#6d7c73;--green:#296449;--green-strong:#153e2c;--primary:#296449;--light:#eef3e9;--line:#e3e8e1;--line-soft:#edf0e9;--line-strong:#dce3d8;--line-accent:#b5c8a8;--paper:#f7f8f4;--lime:#d9ed9c;--surface:#fff;--surface-2:#f8f9f5;--surface-accent:#edf2e8;--topbar:#ffffffa6;--group-ink:#4a6746;--positive:#2a6f49;--danger:#b54a3b;--danger-bg:#fbebe7;--danger-ink:#903828;--success-bg:#e8f0df;--success-ink:#31552f;--warning-bg:#fff6de;--warning-ink:#6b5418;--warning-line:#d7b872;--chart-grid:#dfe6e1;--chart-grid-soft:#edf0ed;--chart-nominal:#267052;--chart-real:#92a550;--skeleton:#e9eee6;--skeleton-shine:#f6f8f3;--shadow:#2f553509}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:14px}a{color:var(--green);text-decoration:none}a:hover{text-decoration:none;color:var(--green-strong)}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.55;cursor:wait}h1,h2,h3,strong{font-family:'Manrope',sans-serif}h1{font-size:32px;letter-spacing:-1.3px;font-weight:750;margin:8px 0 12px}h1:focus{outline:none}h2{font-size:18px;font-weight:750;margin:0 0 12px;letter-spacing:-.35px}h3{font-size:17px}p{line-height:1.7;color:var(--muted)}small{font-size:12px}small,.hint{color:var(--muted)}.accent{color:#74a265}.muted{color:var(--muted)}.positive{color:var(--positive)}.negative{color:var(--danger)}.eyebrow{color:var(--muted);font-weight:700;font-size:10px;letter-spacing:1.7px}.app-shell{display:flex;min-height:100vh}.sidebar{width:238px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--line);padding:36px 20px;display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;z-index:20}.brand{display:flex;align-items:center;gap:12px;margin:0 10px 54px;color:var(--ink);font-family:Manrope,sans-serif;font-size:31px;font-weight:800;letter-spacing:-1.5px}.brand small{display:block;font:600 7px 'DM Sans',sans-serif;letter-spacing:1px;margin-top:4px;color:var(--muted)}.brand-symbol{background:var(--primary);color:#fff;width:40px;height:43px;border-radius:12px;font-size:32px;position:relative;text-align:center}.brand-symbol span{font-size:15px;position:absolute;right:4px;top:3px}.nav-label{font-size:9px;letter-spacing:1.8px;color:var(--muted);font-weight:700;margin:0 16px 16px}.sidebar nav{display:flex;flex-direction:column;gap:8px}.sidebar nav a{padding:13px 15px;border-radius:8px;color:var(--muted);font-weight:550;display:flex;gap:13px;align-items:center}.sidebar nav a span{font-size:20px;line-height:1}.sidebar nav a.active,.sidebar nav a:hover{background:var(--light);color:var(--green)}.sidebar-note{font-size:11px;line-height:1.7;margin:auto 12px 0;padding-top:50px}.sidebar-note p{font-size:11px;margin:8px 0 20px}.status-dot{width:6px;height:6px;display:inline-block;border-radius:50%;background:#79a45b;margin-right:6px}.logout{border-top:1px solid var(--line);padding-top:14px}.main-shell{margin-left:238px;width:calc(100% - 238px);min-width:0}.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:0 40px;background:var(--topbar);font-size:12px}.topbar .muted{margin-left:12px}.profile{display:flex;align-items:center;gap:8px;font-size:11px}.avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--surface-accent);font-size:10px;margin-left:14px}main{max-width:1560px;margin:auto;padding:38px 40px 24px;outline:0;min-height:calc(100vh - 140px)}footer{padding:10px 40px 22px;font-size:10px;color:var(--muted);display:flex;justify-content:space-between}.page-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:30px}.page-heading p{margin:0;font-size:13px}.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:40px;padding:10px 16px;border:1px solid transparent;border-radius:7px;font-size:12px;font-weight:650;line-height:1.4;white-space:nowrap}.primary{background:var(--primary);color:#fff}.primary:hover{background:#204f39;color:#fff}.secondary{background:var(--surface);border-color:var(--line-strong);color:var(--ink)}.secondary:hover{background:var(--light)}.ghost{background:transparent;color:var(--green);padding-left:4px}.actions{display:flex;gap:10px;flex-wrap:wrap}.section-line{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}.section-line h2{margin:0}.section-line a{font-size:12px}.pill{background:var(--surface-2);border:1px solid var(--line-strong);border-radius:5px;padding:5px 8px;font-size:10px;color:var(--muted);white-space:nowrap}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:26px}.stat{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:22px;min-width:0}.stat>span{display:flex;justify-content:space-between;color:var(--muted);font-size:12px}.stat i{font-style:normal;color:#779661}.stat>strong{display:block;font-size:27px;letter-spacing:-1px;margin:18px 0 10px;overflow-wrap:anywhere}.stat>small{font-size:10px;display:block;line-height:1.5}.stat.featured{background:#294f3d;color:#fff;border-color:#294f3d;position:relative;overflow:hidden}.stat.featured>span,.stat.featured>small{color:#d9e5d5}.stat.featured:after{content:'';position:absolute;right:-26px;bottom:-45px;border:1px solid #aac29133;border-radius:50%;width:150px;height:150px;pointer-events:none}.panel{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:24px;margin-bottom:24px;min-width:0}.dashboard-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:24px}.step-row{display:flex;align-items:center;gap:16px;padding:20px 0;border-bottom:1px solid var(--line-soft);color:var(--ink)}.step-row:last-child{border-bottom:0;padding-bottom:0}.step-number{width:34px;height:34px;flex-shrink:0;display:grid;place-items:center;border-radius:8px;background:var(--surface-2);font-size:11px;color:var(--muted)}.step-row strong{font-size:12px}.step-row small{display:block;margin-top:5px;line-height:1.5;font-size:11px}.step-row>span:last-child{margin-left:auto}.intention{background:var(--surface-accent);position:relative;overflow:hidden}.intention h2{font-size:27px;line-height:1.35;margin:20px 0 12px}.intention p{font-size:12px;max-width:270px}.growth-art{height:115px;display:flex;align-items:flex-end;gap:12px;justify-content:center;margin-bottom:14px}.growth-art i{width:35px;border-radius:7px 7px 0 0;background:#c7d3b2;height:30%}.growth-art i:nth-child(2){height:47%;background:#b4c898}.growth-art i:nth-child(3){height:65%;background:#96b27b}.growth-art i:nth-child(4){height:90%;background:#5a895e}.growth-art>span{font-size:40px;align-self:flex-start;color:#7b9c62}.empty{text-align:center;padding:46px 20px}.empty>span{font-size:30px;color:#81986b;display:block;margin-bottom:14px}.empty h2,.empty h3{margin-bottom:10px}.empty p{font-size:13px;max-width:460px;margin:0 auto 20px}.table-scroll{overflow:auto;max-width:100%;border-radius:5px}table{width:100%;border-collapse:collapse;font-size:12px;white-space:nowrap}th{font-weight:600;color:var(--muted);text-align:left;background:var(--surface-2)}td,th{padding:14px 12px;border-bottom:1px solid var(--line-soft)}td small{display:block;margin-top:4px;font-size:10px}.numeric{text-align:right;font-variant-numeric:tabular-nums}caption{caption-side:bottom;font-size:11px;color:var(--muted)}.toolbar{display:flex;gap:20px;align-items:end;margin-bottom:22px;flex-wrap:wrap}.toolbar label{font-size:11px;min-width:160px}.toolbar .pill{margin-bottom:10px}.form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:20px 0}.form-grid.single{grid-template-columns:1fr}.form-grid .wide{grid-column:span 2}label{display:block;font-size:12px;font-weight:550;color:var(--muted)}input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea{display:block;width:100%;margin-top:7px;min-height:42px;border:1px solid var(--line-strong);border-radius:6px;padding:9px 11px;color:var(--ink);background:var(--surface);outline:none}input:focus,select:focus,textarea:focus{border-color:var(--line-accent);box-shadow:0 0 0 3px #70926120}input[type=checkbox],input[type=radio]{accent-color:var(--green);width:16px;height:16px}.check{display:flex;align-items:center;gap:9px;padding-top:20px}.hint{font-size:11px;line-height:1.7}.editor{border-color:var(--line-accent);box-shadow:0 5px 24px var(--shadow)}.validation-message,.validation-errors{color:var(--danger);font-size:12px}.notice{padding:13px 16px;border-radius:8px;margin-bottom:18px;font-size:13px}.notice.error{background:var(--danger-bg);color:var(--danger-ink)}.notice.success{background:var(--success-bg);color:var(--success-ink)}.notice.warning{background:var(--warning-bg);color:var(--warning-ink)}.group-row th,.group-row td{background:var(--surface-accent);font-weight:650;color:var(--group-ink)}.total-row{background:var(--surface-2);font-weight:700}.annual-table table th:first-child{position:sticky;left:0;z-index:1;background:var(--surface-2);min-width:180px}.annual-table table th small{display:block;font-size:9px;font-weight:400;margin-top:3px}.text-button{border:0;background:none;color:var(--green);padding:0;text-align:left;font-size:12px}.text-button small{display:block;font-size:10px;margin-top:4px}.cell-button{border:1px solid transparent;background:transparent;color:var(--ink);padding:7px 9px;min-width:70px;border-radius:4px;white-space:nowrap}.cell-button:hover{background:var(--surface-accent);border-color:var(--line-accent)}.mobile-budget{display:none}.summary-list{margin:14px 0 0;font-size:12px}.summary-list>div{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid var(--line-soft)}.summary-list dt{font-weight:400;color:var(--muted)}.summary-list dd{margin:0;font-weight:650;text-align:right}.account-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.account-card>strong{font-size:26px;display:block;margin:12px 0 22px;letter-spacing:-1px}.account-card>p{font-size:12px;margin-top:-4px}.account-card .section-line:last-child{margin-bottom:0}.account-icon{width:38px;height:38px;border-radius:11px;background:var(--surface-accent);display:grid;place-items:center;color:#729257;font-weight:700}.compact{max-width:240px}.credit-card{background:linear-gradient(120deg,#254e3e,#41694c);color:white;border-radius:14px;padding:25px;margin-bottom:24px;min-width:0}.credit-card:nth-child(even){background:linear-gradient(120deg,#4f5f44,#809262)}.credit-card .section-line{font-size:11px;margin-bottom:10px}.credit-card h2{margin-top:10px;color:#fff}.credit-card p{color:#dbe5d4;letter-spacing:4px}.credit-card small{color:#dce7d7;font-size:10px}.card-chip{font-size:35px;color:#ddcb89;line-height:1}.card-edit{background:#ffffff16;color:white;min-height:32px;padding:6px 9px}.invoice-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.invoice-month{padding:15px 9px;border:1px solid var(--line);border-radius:7px;background:var(--surface-2);text-align:left;color:var(--ink)}.invoice-month>span{font-size:11px;text-transform:capitalize}.invoice-month strong{display:block;margin:10px 0;font-size:13px}.invoice-month small{font-size:9px}.invoice-month.selected{border-color:var(--line-accent);background:var(--surface-accent)}.planning-grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:24px;align-items:start}.two{grid-template-columns:1fr 1fr}.projection-chart{width:100%;height:auto;max-height:330px;margin:16px 0}.chart-legend{display:flex;gap:22px;justify-content:center;margin-bottom:25px;font-size:11px}.chart-legend i{display:inline-block;width:16px;height:3px;margin:0 6px 3px 0}.legend-nominal{background:var(--chart-nominal)}.legend-real{background:var(--chart-real)}.scenario-row{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:15px 0;width:100%;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;color:var(--ink)}.scenario-row strong{font-size:12px}.scenario-row small{display:block;margin-top:6px}.scenario-row>span:last-child{font-size:11px;color:var(--green)}.auth-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;max-width:970px;margin:50px auto;align-items:center}.auth-copy h1{font-size:43px;line-height:1.15;letter-spacing:-1.8px}.auth-copy p{max-width:360px}.auth-form{padding:32px}.auth-form label{margin-bottom:18px}.auth-form .primary{width:100%}.auth-form .check{padding:0}.auth-form>p{font-size:12px;text-align:center}.auth-form h2{font-size:25px}.auth-form .validation-errors{padding-left:18px}.skip-link{position:absolute;top:-60px;left:20px;z-index:100;background:var(--surface);padding:12px}.skip-link:focus{top:10px}:focus-visible{outline:3px solid #91b55f;outline-offset:3px}#blazor-error-ui{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--warning-bg);padding:16px;z-index:200}#blazor-error-ui .dismiss{float:right;border:0;background:none}.blazor-error-boundary{background:var(--danger-bg);padding:20px}
@media(min-width:1600px){h1{font-size:36px}.stat>strong{font-size:31px}}
@media(max-width:1200px){.sidebar{width:208px;padding:30px 14px}.main-shell{margin-left:208px;width:calc(100% - 208px)}main{padding:28px}.topbar{padding:0 28px}.stats{gap:12px}.stat{padding:18px}.stat>strong{font-size:22px}.account-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.page-heading{align-items:flex-start}h1{font-size:28px}.invoice-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.planning-grid{grid-template-columns:260px minmax(0,1fr)}.auth-grid{gap:30px}.auth-copy h1{font-size:34px}}
@media(max-width:960px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-grid{grid-template-columns:1fr}.dashboard-grid .intention{display:none}.form-grid{grid-template-columns:1fr 1fr}.page-heading{flex-direction:column;gap:20px}.planning-grid{grid-template-columns:1fr}.planning-grid .form-grid.single{grid-template-columns:1fr 1fr}.auth-grid{grid-template-columns:1fr;max-width:440px;margin:20px auto}.auth-copy p{display:none}.auth-copy h1{font-size:30px}.auth-copy h1 br{display:none}.auth-form{padding:25px}}
@media(max-width:700px){.app-shell{display:block}.brand{font-size:23px;margin:0 0 8px;gap:8px}.brand-symbol{width:29px;height:30px;font-size:24px;border-radius:8px}.brand-symbol span{font-size:11px}.brand small{display:none}.main-shell{width:100%;margin:0}.topbar{height:46px;padding:0 18px;font-size:10px}.avatar{width:26px;height:26px;margin-left:5px}.profile{font-size:9px}.topbar .muted{margin-left:5px}main{padding:25px 16px 20px}.page-heading{margin-bottom:24px;gap:18px}h1{font-size:27px;letter-spacing:-1px}.page-heading p{font-size:12px}.eyebrow{font-size:9px}.stats{gap:10px;margin-bottom:20px}.stat{padding:16px 13px}.stat>span{font-size:10px}.stat>strong{font-size:22px;margin:16px 0 8px}.stat>small{font-size:9px}.panel{padding:18px;margin-bottom:18px;border-radius:9px}.section-line{gap:10px;flex-wrap:wrap;margin-bottom:16px}h2{font-size:16px}.pill{font-size:9px}.step-row{gap:12px;padding:18px 0}.step-row strong{font-size:11px}.step-row small{font-size:10px}.step-number{width:30px;height:30px}.button{font-size:11px;padding:10px 13px}.account-grid{grid-template-columns:1fr;gap:0}.account-card>strong{font-size:27px}.form-grid,.planning-grid .form-grid.single{grid-template-columns:1fr;gap:15px}.form-grid .wide{grid-column:auto}.check{padding-top:0}.toolbar{gap:12px}.toolbar label{min-width:0;flex:1}.toolbar .pill{display:none}.annual-table{display:none}.mobile-budget{display:block}.mobile-budget-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 0;border-bottom:1px solid var(--line);font-size:12px}.mobile-budget-row strong{font-size:12px}.mobile-budget-row small{font-size:9px}.invoice-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.invoice-month{padding:12px 8px}.invoice-month strong{font-size:12px}.invoice-month small{font-size:8px}.summary-list{font-size:11px}.empty{padding:32px 10px}.empty p{font-size:12px}.auth-grid{margin:10px auto;gap:20px}.auth-copy h1{font-size:31px}.auth-form{padding:23px}.chart-legend{font-size:10px;gap:15px}footer{padding:10px 18px 20px;font-size:9px}.two .stat>strong{font-size:19px}.table-scroll table{font-size:11px}}
@media(prefers-reduced-motion:no-preference){.button,.sidebar nav a,.invoice-month{transition:background .15s,border-color .15s}}

/* Dark theme: the head script sets data-theme from the saved choice or the system preference. */
[data-theme="dark"]{color-scheme:dark;--ink:#e2ebe5;--muted:#9eb0a5;--green:#8fd0a6;--green-strong:#b6e6c5;--primary:#2e7a55;--light:#1f2f27;--line:#2b3a32;--line-soft:#24332b;--line-strong:#344639;--line-accent:#4d7058;--paper:#0e1512;--lime:#b9d77a;--surface:#151f1a;--surface-2:#1a2620;--surface-accent:#1f3027;--topbar:#151f1ad9;--group-ink:#bcd9b9;--positive:#86d6a1;--danger:#f19282;--danger-bg:#3b201c;--danger-ink:#f6b9ae;--success-bg:#1c3424;--success-ink:#b8e2bd;--warning-bg:#382e15;--warning-ink:#f0d48e;--warning-line:#8a7336;--chart-grid:#33443a;--chart-grid-soft:#26352d;--chart-nominal:#6cc596;--chart-real:#c3d46f;--skeleton:#1f2c25;--skeleton-shine:#2a3a31;--shadow:#00000040}
@media (prefers-color-scheme:dark){:root:not([data-theme]){color-scheme:dark;--ink:#e2ebe5;--muted:#9eb0a5;--green:#8fd0a6;--green-strong:#b6e6c5;--primary:#2e7a55;--light:#1f2f27;--line:#2b3a32;--line-soft:#24332b;--line-strong:#344639;--line-accent:#4d7058;--paper:#0e1512;--surface:#151f1a;--surface-2:#1a2620;--surface-accent:#1f3027;--topbar:#151f1ad9;--group-ink:#bcd9b9;--positive:#86d6a1;--danger:#f19282;--danger-bg:#3b201c;--danger-ink:#f6b9ae;--success-bg:#1c3424;--success-ink:#b8e2bd;--warning-bg:#382e15;--warning-ink:#f0d48e;--warning-line:#8a7336;--chart-grid:#33443a;--chart-grid-soft:#26352d;--chart-nominal:#6cc596;--chart-real:#c3d46f;--skeleton:#1f2c25;--skeleton-shine:#2a3a31;--shadow:#00000040}}
[data-theme="dark"] .brand,[data-theme="dark"] .category-item{color:var(--ink)}
[data-theme="dark"] .growth-art i{opacity:.75}
[data-theme="dark"] .stat.featured{background:#1f4a36;border-color:#2c5c45}

/* Theme toggle */
.theme-toggle{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:5px 10px;border:1px solid var(--line-strong);border-radius:20px;background:var(--surface);color:var(--ink);font-size:11px;font-weight:600}
.theme-toggle:hover{background:var(--surface-accent)}
.theme-toggle .theme-icon{font-size:14px;line-height:1}

/* Loading */
.loading-state{display:flex;flex-direction:column;gap:18px}
.loading-state .loading-label{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px;font-weight:550}
.loading-state.compact{padding:18px}
.spinner{width:18px;height:18px;flex-shrink:0;border-radius:50%;border:2px solid var(--line-strong);border-top-color:var(--green);animation:spin .8s linear infinite}
.skeleton-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.skeleton{border-radius:9px;background:linear-gradient(90deg,var(--skeleton) 0%,var(--skeleton-shine) 50%,var(--skeleton) 100%);background-size:200% 100%;animation:shimmer 1.4s ease-in-out infinite}
.skeleton.card{height:112px}.skeleton.line{height:14px}.skeleton.block{height:220px}
.skeleton.line.short{width:40%}.skeleton.line.medium{width:70%}
.busy-bar{position:fixed;top:0;left:0;right:0;height:3px;z-index:300;overflow:hidden;background:transparent}
.busy-bar::after{content:'';position:absolute;inset:0 auto 0 -40%;width:40%;background:var(--green);animation:busy 1.1s ease-in-out infinite}
.busy-toast{position:fixed;right:20px;bottom:20px;z-index:300;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:8px;background:var(--surface);border:1px solid var(--line-strong);box-shadow:0 6px 24px var(--shadow);color:var(--ink);font-size:12px;font-weight:600}
.route-loading{padding:8px 0}
main:has(> :not(.route-loading)) .route-loading{display:none}
.button.is-loading{position:relative;color:transparent !important;pointer-events:none}
.button.is-loading::after{content:'';position:absolute;width:16px;height:16px;border-radius:50%;border:2px solid #ffffff66;border-top-color:#fff;animation:spin .8s linear infinite}
.button.secondary.is-loading::after,.button.ghost.is-loading::after{border-color:var(--line-strong);border-top-color:var(--green)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
@keyframes busy{0%{left:-40%}100%{left:100%}}
@media (prefers-reduced-motion:reduce){.spinner,.skeleton,.busy-bar::after,.button.is-loading::after{animation-duration:2.4s}.skeleton{animation:none}}
@media(max-width:700px){.skeleton-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.skeleton.card{height:92px}.busy-toast{left:16px;right:16px;bottom:16px;justify-content:center}.theme-toggle .theme-text{display:none}}

/* Tables that become labelled cards on phones instead of scrolling sideways (cells carry data-label). */
@media(max-width:700px){
  .cards-on-mobile,.cards-on-mobile tbody{display:block;width:100%;white-space:normal}
  .cards-on-mobile thead,.cards-on-mobile caption{display:none}
  .cards-on-mobile tr{display:block;padding:10px 0;border-bottom:1px solid var(--line)}
  .cards-on-mobile td,.cards-on-mobile tr>th{display:grid;grid-template-columns:110px minmax(0,1fr);gap:8px;align-items:start;padding:4px 0;border:0;text-align:left;background:none;position:static}
  .cards-on-mobile td::before,.cards-on-mobile tr>th::before{content:attr(data-label);font-size:10px;font-weight:650;color:var(--muted);padding-top:2px}
  .cards-on-mobile td>*,.cards-on-mobile tr>th>*{grid-column:2}
  .cards-on-mobile td:empty{display:none}
}

/* Navigation: desktop sidebar of icons that opens on hover; on phones a bottom bar plus the same menu as a sheet ("Mais"). */
.sidebar .nav-text{font-size:inherit;line-height:inherit}
.sidebar nav a{position:relative}
.sidebar .nav-icon{width:22px;flex-shrink:0;text-align:center;font-size:19px;line-height:1}
.logout .button{gap:10px}.logout .nav-icon{font-size:14px;width:auto}
.sheet-head,.menu-backdrop,.bottom-nav,.topbar-brand{display:none}
.topbar-title{display:flex;align-items:center;gap:12px;min-width:0}
.crumb{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.crumb strong{font-family:inherit;font-weight:650;color:var(--ink)}.topbar .crumb .muted{margin:0 4px}
.currency{display:inline-flex;align-items:center}
/* Transitions only within each layout, so resizing across the phone breakpoint never animates the page wider than the screen. */
@media(prefers-reduced-motion:no-preference) and (min-width:701px){.sidebar{transition:width .18s ease,box-shadow .18s ease}.sidebar :is(.brand-text,.nav-label,.sidebar-note,.nav-text){transition:opacity .15s ease}}
@media(prefers-reduced-motion:no-preference) and (max-width:700px){.sidebar{transition:transform .22s ease,visibility .22s}}
@media(min-width:701px){
  /* Always icons only. Hovering it (or moving through it with the keyboard) widens it over the page after a short pause, so crossing
     it with the mouse does not flash it. Only the width changes: icons and content never move. Labels are faded, not removed, so
     they keep the same place and stay in the accessibility tree. */
  .sidebar{width:78px;padding-left:12px;padding-right:12px;overflow:hidden;white-space:nowrap}
  .sidebar .brand{margin-left:7px;margin-right:0}.sidebar .brand-symbol{flex-shrink:0}
  .sidebar .logout .button{padding-left:15px}
  .main-shell{margin-left:78px;width:calc(100% - 78px)}
  .sidebar:is(:hover,:has(:focus-visible)){width:238px;box-shadow:8px 0 32px var(--shadow);transition-delay:.12s}
  .sidebar:not(:hover):not(:has(:focus-visible)) :is(.brand-text,.nav-label,.sidebar-note,.nav-text){opacity:0}
}
@media(max-width:700px){
  .app-shell{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .topbar{position:sticky;top:0;z-index:30;height:54px;padding:0 16px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  .topbar-brand{display:flex;margin:0}.topbar-brand .brand-symbol{width:30px;height:32px;font-size:24px;border-radius:9px}.topbar-brand .brand-symbol span{font-size:11px}
  .crumb{font-size:12px}.crumb>:not(strong){display:none}
  .currency,.avatar{display:none}
  /* Bottom bar: large targets, above the iPhone home indicator. */
  .bottom-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:50;padding:4px 6px env(safe-area-inset-bottom);background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -6px 24px var(--shadow)}
  .bottom-nav a,.bottom-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:56px;padding:6px 2px;border:0;border-radius:10px;background:none;color:var(--muted);font-size:10px;font-weight:600;line-height:1.2;text-align:center;-webkit-tap-highlight-color:transparent}
  .bottom-nav .nav-icon{font-size:19px;line-height:1}
  .bottom-nav a.active,.bottom-nav button.active,html[data-menu-open] .bottom-nav button{color:var(--green)}
  .bottom-nav a.active .nav-icon,.bottom-nav button.active .nav-icon{background:var(--light);border-radius:12px;padding:3px 12px}
  /* The sidebar becomes a sheet that slides up above the bottom bar. */
  .sidebar{position:fixed;inset:auto 0 calc(64px + env(safe-area-inset-bottom)) 0;width:auto;max-height:calc(100dvh - 140px);overflow:auto;overscroll-behavior:contain;padding:14px 16px 18px;border:1px solid var(--line);border-bottom:0;border-radius:18px 18px 0 0;box-shadow:0 -12px 40px var(--shadow);transform:translateY(calc(100% + 80px));visibility:hidden;z-index:45}
  html[data-menu-open] .sidebar{transform:none;visibility:visible}
  html[data-menu-open]{overflow:hidden}
  html[data-menu-open] .menu-backdrop{display:block;position:fixed;inset:0;z-index:44;background:#071a1366}
  .sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.sheet-head strong{font-size:15px}
  .sheet-close{width:36px;height:36px;border:0;border-radius:8px;background:var(--surface-2);color:var(--ink);font-size:24px;line-height:1}
  .sidebar>.brand,.sidebar .nav-label,.sidebar .sidebar-note{display:none}
  .sidebar nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .sidebar nav a{flex-direction:column;justify-content:center;gap:6px;min-height:76px;padding:10px 4px;border:1px solid var(--line);border-radius:12px;text-align:center;font-size:11px;line-height:1.25}
  .sidebar nav a.active{border-color:var(--line-accent)}
  .sidebar .logout{display:block;margin-top:14px;padding-top:12px}
  .sidebar .logout .button{width:100%;justify-content:center;min-height:44px}
  .busy-toast{bottom:calc(76px + env(safe-area-inset-bottom))}
}

/* Messages float together at the bottom right: progress, errors (stay until closed) and confirmations (fade after 6 s,
   paused while hovered or focused). With a dialog open, only the dialog's own messages show. */
.app-toast-stack{position:fixed;right:24px;bottom:24px;z-index:290;display:flex;flex-direction:column;align-items:flex-end;gap:10px;max-width:min(440px,calc(100vw - 32px));pointer-events:none}
.app-toast-stack>*{pointer-events:auto}
.app-toast-stack:empty{display:none}
.app-toast{display:flex;align-items:flex-start;gap:10px;margin:0;border:1px solid var(--line-strong);box-shadow:0 12px 32px var(--shadow);animation:toast-in .2s ease-out}
.app-toast-stack .busy-toast{position:static}
.app-toast.error{border-color:var(--danger)}
.app-toast.error::before{content:'!';display:inline-grid;place-items:center;flex-shrink:0;width:20px;height:20px;border-radius:50%;background:var(--danger);color:var(--surface);font-weight:800;font-size:12px}
.app-toast.success{border-color:var(--line-accent);animation:toast-in .2s ease-out,toast-out .4s ease-in 6s forwards}
.app-toast.success:hover,.app-toast.success:focus-within{animation-play-state:paused}
.app-toast-text{flex:1;min-width:0;overflow-wrap:anywhere}
.app-toast-close{flex-shrink:0;display:grid;place-items:center;width:28px;height:28px;margin:-4px -6px -4px 0;padding:0;border:0;border-radius:6px;background:transparent;color:inherit;font-size:20px;line-height:1}
.app-toast-close:hover{background:color-mix(in srgb,currentColor 12%,transparent)}
body:has(dialog[open]) .app-toast-stack:not(dialog .app-toast-stack){display:none}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}}
@keyframes toast-out{to{opacity:0;visibility:hidden;transform:translateY(8px)}}
@media(prefers-reduced-motion:reduce){.app-toast{animation:none}.app-toast.success{animation:toast-out .01s linear 6s forwards}}
@media(max-width:700px){.app-toast-stack{left:16px;right:16px;bottom:calc(76px + env(safe-area-inset-bottom));max-width:none;align-items:stretch}}

/* iOS zooms into fields smaller than 16px on focus. */
@media(max-width:700px){input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px}}

/* Short desktop screens: the full menu fits without scrolling the sidebar. */
@media(min-width:701px) and (max-height:900px){.sidebar{padding-top:22px}.brand{margin-bottom:26px}.sidebar nav{gap:3px}.sidebar nav a{padding:9px 15px}.sidebar-note{display:none}}
@media(min-width:701px) and (max-height:700px){.sidebar nav a{padding:6px 15px}.nav-label{display:none}}
.lock-option{padding:4px 0 16px}
.space-banner{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 40px;background:var(--surface-accent);border-bottom:1px solid var(--line-accent);font-size:12px;color:var(--ink)}.space-banner.read-only{background:var(--warning-bg)}.space-list{list-style:none;padding:0;margin:0}.space-list li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line-soft)}.space-list li:last-child{border-bottom:0}.space-list small{display:block;margin-top:4px}.space-list li.current strong{color:var(--green)}
@media(max-width:700px){.space-banner{padding:10px 16px}}
.audit-changes{white-space:normal;min-width:260px;overflow-wrap:anywhere}
.auth-top{display:flex;justify-content:space-between;align-items:center;gap:16px;max-width:1560px;margin:auto;padding:28px 40px 0}.auth-top .brand{margin:0}
@media(max-width:700px){.auth-top{padding:16px 16px 0}}
.import-wizard h3{margin:26px 0 8px}.comparison-table .reason{white-space:normal;min-width:280px}.card-answers th{white-space:normal;min-width:260px}.card-answers th small{display:block;white-space:normal;font-weight:400}.card-answers input{width:90px}.pending-cells{margin:0 0 8px;padding-left:18px}
@media(max-width:700px){.comparison-table .reason,.card-answers th{min-width:0}.card-answers input{width:100%}}
.pdf-reading{margin:6px 0 14px}.pdf-reading .spinner{margin-right:6px}.pdf-text h4{font-size:12px;margin:14px 0 6px}.pdf-text pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:260px;overflow:auto;background:var(--surface-2);border:1px solid var(--line-soft);border-radius:6px;padding:10px;font-size:11px}
/* Button tones: the color reinforces what the action does (the label always says it); the icon follows the text color in both themes. */
.button .icon{width:16px;height:16px;flex-shrink:0}
.button.tone-accent{background:var(--surface-accent);color:var(--green);border-color:var(--line-accent)}
.button.tone-accent:hover{background:var(--light);border-color:var(--green)}
.button.tone-warning{background:var(--warning-bg);color:var(--warning-ink);border-color:var(--warning-line)}
.button.tone-warning:hover{border-color:var(--warning-ink)}
.button.tone-danger{background:var(--danger-bg);color:var(--danger-ink);border-color:var(--danger)}
.button.tone-danger:hover{border-color:var(--danger-ink)}
.button.danger{background:var(--danger);color:var(--surface)}
.button.danger:hover{filter:brightness(.92)}
/* Reordering: a drag handle plus buttons that move one place (keyboard and single-click alternative to dragging). */
.reorder-side{display:flex;align-items:center;gap:8px}
.reorder-controls{display:inline-flex;align-items:center;gap:2px}
.drag-handle{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:6px;cursor:grab;touch-action:none;color:inherit;opacity:.8}
.drag-handle:hover{opacity:1;background:color-mix(in srgb,currentColor 12%,transparent)}
.reorder-move{display:inline-grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:6px;background:transparent;color:inherit}
.reorder-move:hover:not(:disabled){background:color-mix(in srgb,currentColor 12%,transparent)}
.reorder-move:disabled{opacity:.3;cursor:default}
.reorder-controls .icon{width:18px;height:18px}
[data-reorder-id]{transition:opacity .15s,transform .15s}
.reorder-dragging{opacity:.5;transform:scale(.98)}
/* Where the item will land: a bar on that side, plus an outline (not color alone). */
.reorder-before,.reorder-after{outline:2px dashed var(--green);outline-offset:4px}
.reorder-before{box-shadow:-6px 0 0 var(--green)!important}
.reorder-after{box-shadow:6px 0 0 var(--green)!important}
body.reordering,body.reordering *{cursor:grabbing!important;user-select:none}
@media(max-width:700px){.reorder-before{box-shadow:0 -6px 0 var(--green)!important}.reorder-after{box-shadow:0 6px 0 var(--green)!important}.drag-handle,.reorder-move{width:40px;height:40px}}
@media(prefers-reduced-motion:reduce){[data-reorder-id]{transition:none}.reorder-dragging{transform:none}}
/* Icon-only button: the name comes from aria-label (and a tooltip from title); same height as its row neighbors. */
.button.icon-only{width:34px;padding:0;gap:0;justify-content:center;flex-shrink:0}
/* Tables never scroll sideways (fit-tables.js): text wraps, values stay on one line, and a table that still does not fit its
   box becomes stacked cards (one card per row, each value labeled with its column), at any screen width. */
table{white-space:normal}
td,th{overflow-wrap:break-word}
.numeric{white-space:nowrap}
table.stacked,table.stacked tbody,table.stacked tfoot{display:block;width:100%}
table.stacked thead,table.stacked caption{display:none}
table.stacked tr{display:block;padding:10px 0;border-bottom:1px solid var(--line)}
table.stacked td,table.stacked tr>th{display:grid;grid-template-columns:minmax(96px,32%) minmax(0,1fr);gap:8px;align-items:start;padding:4px 0;border:0;text-align:left;background:none;position:static;white-space:normal}
table.stacked td::before,table.stacked tr>th::before{content:attr(data-label);font-size:10px;font-weight:650;color:var(--muted);padding-top:2px}
table.stacked td>*,table.stacked tr>th>*{grid-column:2}
/* A cell with no column name (a group title spanning the row) uses the whole width. */
table.stacked td:not([data-label]),table.stacked tr>th:not([data-label]){display:block}
table.stacked td:not([data-label])::before,table.stacked tr>th:not([data-label])::before{content:none}
table.stacked td:empty{display:none}
table.stacked input,table.stacked select,table.stacked textarea{min-width:0;max-width:100%}
/* Annual budget (budget-matrix.js): two half years one under the other, or the month view when not even half a year fits. */
.annual-matrix caption{caption-side:top;text-align:left;font-weight:700;font-size:13px;color:var(--ink);padding:0 0 8px}
.annual-matrix .annual-table+.annual-table{margin-top:24px}
.matrix-months .mobile-budget{display:block}
.matrix-months .mobile-budget-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 0;border-bottom:1px solid var(--line);font-size:12px}
.matrix-months .mobile-budget-row strong{font-size:12px}
.matrix-months .mobile-budget-row small{font-size:9px}
/* Until budget-matrix.js has measured (a fraction of a second), the annual table keeps its place but is not shown. */
.matrix-pending .annual-table{visibility:hidden;overflow:hidden}
/* Icons in place of text symbols: line icons in the color of the text around them, sized to each place. */
svg.icon{display:inline-block;flex-shrink:0;vertical-align:-.18em}
.nav-icon{display:inline-grid;place-items:center}
.nav-icon .icon{width:20px;height:20px}
.empty>span .icon{width:34px;height:34px}
.brand-symbol span .icon{width:14px;height:14px;stroke-width:2.6}
.brand-symbol .brand-dot{width:.55em;height:.55em;border-radius:50%;background:var(--lime);top:.4em;right:.4em}
.growth-art>span .icon{width:42px;height:42px}
.card-chip .icon{width:32px;height:32px;stroke-width:1.6}
.stat>span .icon{width:16px;height:16px;color:#779661}
.stat.featured>span .icon{color:inherit}
small .icon,.hint .icon,th .icon,.text-button .icon{width:13px;height:13px}
.modal-close .icon,.sheet-close .icon{width:18px;height:18px}
.modal-close,.sheet-close{display:grid;place-items:center}
.app-toast-close .icon{width:15px;height:15px}
.check-mark .icon{width:14px;height:14px;stroke-width:3}
.theme-icon{display:inline-grid;place-items:center}
.theme-icon .icon{width:14px;height:14px}
.theme-icon .icon-sol{display:none}
[data-theme="dark"] .theme-icon .icon-lua{display:none}
[data-theme="dark"] .theme-icon .icon-sol{display:inline-block}
/* Check marks drawn by CSS (confirmation messages, chosen color) use the same check icon as a mask. */
.app-toast.success::before{content:'';width:16px;height:16px;margin-top:2px;flex-shrink:0;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
/* Date and month fields never grow past their column. Safari (iPhone, iPad, Mac) otherwise gives them a native fixed width
   that ignores the layout and spills over the next field; the value stays left-aligned like the other fields. */
input[type=date],input[type=month],input[type=time],input[type=datetime-local]{-webkit-appearance:none;appearance:none;min-width:0;max-width:100%}
input[type=date]::-webkit-date-and-time-value,input[type=month]::-webkit-date-and-time-value,input[type=time]::-webkit-date-and-time-value{text-align:left;min-width:0}
input[type=date]::-webkit-datetime-edit,input[type=month]::-webkit-datetime-edit,input[type=time]::-webkit-datetime-edit{min-width:0;overflow:hidden}
.form-trap{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}