/* Mijn Betalingen · modern editorial dashboard · 2026 */
:root {
 color-scheme:dark;
 --ink:#eef4ff; --ink-2:#c4d6f4; --muted:#8ea5c7; --line:#26354d;
 --navy:#081629; --green:#2b7fff; --green-deep:#1d62c9; --green-soft:#12243d;
 --canvas:#07111f; --paper:#0d1a2b; --shadow:0 16px 48px rgba(2,8,20,.45);
 font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
 font-synthesis:none; -webkit-font-smoothing:antialiased;
}
* {box-sizing:border-box}
html {scroll-behavior:smooth}
body {margin:0;background:radial-gradient(circle at top,#102540 0,#091525 45%,#07111f 100%);color:var(--ink);min-height:100vh}
body::before {content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(125deg,rgba(5,12,22,.72),rgba(8,18,34,.90) 48%,rgba(7,17,31,.72)),url('./italia-atlas.svg');background-size:cover;background-position:center top;opacity:.38}
button,input,select {font:inherit}
button {cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #69a8ff;outline-offset:3px}
button:disabled{opacity:.5;cursor:default}
.app-shell {max-width:1240px;margin:auto;padding:0 32px;min-height:100vh}
.topbar {display:flex;align-items:center;justify-content:space-between;gap:18px;padding:24px 0 20px;border-bottom:1px solid rgba(111,140,185,.18)}
.identity {display:flex;align-items:center;gap:14px;min-width:0}
.logo {height:52px;width:52px;min-width:52px;display:grid;place-items:center;border-radius:16px;color:white;background:linear-gradient(145deg,#3194ff,#1c4ea2);box-shadow:0 8px 22px rgba(20,56,140,.28)}
.overline {display:flex;align-items:center;gap:8px;color:#7ab0ff;font-size:10px;font-weight:800;letter-spacing:1.65px;text-transform:uppercase}
.flag {display:flex;width:23px;height:13px;overflow:hidden;border-radius:2px;border:1px solid #d7dfe1;box-shadow:0 1px 2px #0001}
.flag i{flex:1}.flag i:first-child{background:#008c5b}.flag i:nth-child(2){background:#fff}.flag i:nth-child(3){background:#e04550}
.identity h1 {margin:3px 0 0;font-size:23px;letter-spacing:-1px;font-weight:850;line-height:1.18;color:#f3f7ff}
.subtitle{margin:4px 0 0;color:#a7bad6;font-size:11px}
.top-actions{display:flex;align-items:center;gap:12px}
.local-pill {border-radius:50px;border:1px solid #253753;background:#101e33;padding:9px 12px;white-space:nowrap;color:#a6c1ea;font-size:11px;font-weight:600}
.tiny-dot{display:inline-block;width:7px;height:7px;background:#4ea1ff;border-radius:100%;vertical-align:middle;margin-right:6px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:4px;border:1px solid transparent;border-radius:13px;padding:12px 16px;font-size:13px;font-weight:750;white-space:nowrap;transition:background .17s,transform .17s,box-shadow .17s}
.button:hover{transform:translateY(-1px)}
.button-primary{color:white;background:linear-gradient(180deg,#2f8cff,#226fe0);box-shadow:0 8px 18px rgba(31,97,201,.35)}
.button-primary:hover{background:#1e63ca}
.add-icon{font-size:21px;font-weight:400;line-height:0;vertical-align:middle;margin-right:3px}
.button-quiet{background:#0f1b2c;border-color:#24364e;color:#d7e7ff}
.button-quiet:hover{background:#14253a}
.button-outline{background:#10213a;color:#8db9ff;border-color:#23436d}
.button-outline:hover{background:#173155}
/* Italian atlas, but with a modern clean graphic treatment */
.intro{margin-top:23px;min-height:195px;padding:31px 40px;display:flex;align-items:center;justify-content:space-between;gap:20px;position:relative;isolation:isolate;overflow:hidden;color:white;border-radius:24px;background:radial-gradient(circle at 88% 10%,rgba(67,133,255,.46) 0,rgba(27,76,177,.46) 29%,transparent 60%),linear-gradient(116deg,#0e1f37 0%,#0c1a2f 70%,#123056 100%);box-shadow:0 17px 42px rgba(17,47,55,.13)}
.intro::before {content:"";position:absolute;inset:0;z-index:-1;background:url('./italia-atlas.svg') 79% 39%/790px auto no-repeat;opacity:.13;filter:saturate(.15) contrast(1.45)}
.intro::after {content:"";position:absolute;width:350px;height:350px;border:1px solid #fff2;border-radius:50%;top:-230px;right:80px;pointer-events:none}
.eyebrow,.section-eyebrow{display:block;font-size:10px;letter-spacing:2px;font-weight:800;text-transform:uppercase}
.eyebrow {color:#9ec4ff}
.intro h2 {font-size:clamp(29px,3.5vw,41px);letter-spacing:-1.65px;line-height:1.13;margin:11px 0 11px;font-weight:850}
.intro h2 em{color:#82b4ff;font-weight:780;font-style:normal}
.intro p {font-size:12px;color:#bfd2ec;max-width:490px;line-height:1.6;margin:0}
.intro-stamp{width:124px;height:124px;flex:0 0 124px;border-radius:100%;border:1px solid rgba(150,192,255,.42);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;transform:rotate(11deg);opacity:.86;color:#b9d6ff;font-size:9px;font-weight:700;letter-spacing:2px}
.toolbar{display:flex;align-items:end;justify-content:space-between;gap:15px;padding:34px 0 16px;scroll-margin-top:15px}
.section-eyebrow{color:#8ca5c9}
.toolbar h2{font-size:29px;margin:6px 0 0;line-height:1.2;letter-spacing:-1.25px;font-weight:850;color:#f3f7ff}
.picker-actions{display:flex;align-items:center;gap:10px}
.date-nav{min-width:250px;height:46px;background:#0e1a2b;border:1px solid #22334b;border-radius:14px;display:flex;justify-content:space-between;align-items:center;overflow:hidden;box-shadow:0 2px 6px rgba(20,50,60,.025)}
.date-nav span{font-size:13px;letter-spacing:-.2px;font-weight:780;text-align:center;color:#e8f0ff}
.date-nav button,.year-controls button{border:0;background:transparent;color:#7ab0ff;font-size:27px;font-weight:400;line-height:1;padding:7px 15px;min-width:42px;min-height:42px}
.date-nav button:hover,.year-controls button:hover{background:#142a49}
.stats-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:16px}
.stat{position:relative;isolation:isolate;min-height:136px;display:flex;align-items:center;gap:20px;padding:24px 29px;border-radius:22px;color:#fff;background:linear-gradient(112deg,#1747a6,#2167da 58%,#3f97ff);border:1px solid #397be0;box-shadow:0 18px 35px rgba(10,46,112,.34);overflow:hidden}
.stat::after{content:"€";position:absolute;z-index:-1;right:35px;top:-56px;font-size:240px;line-height:1;color:rgba(255,255,255,.075);font-weight:850}
.stat-icon {width:64px;height:64px;min-width:64px;display:grid;place-items:center;border-radius:20px;font-size:31px;font-weight:800;background:rgba(255,255,255,.18);border:1px solid #fff3;box-shadow:inset 0 1px 3px #fff2}
.stat-label{display:block;font-size:13px;color:#d8e7ff;font-weight:670;letter-spacing:.15px}
.stat-value{display:block;font-size:clamp(32px,3.4vw,47px);font-weight:850;letter-spacing:-1.6px;margin:2px 0 1px;line-height:1.25;white-space:nowrap;font-variant-numeric:tabular-nums}
.stat-description{display:block;font-size:12px;color:#d4e4ff}
.main-grid{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.84fr);align-items:start;gap:17px;margin-top:18px}
.panel{background:rgba(13,26,43,.92);border:1px solid var(--line);border-radius:22px;min-width:0;box-shadow:var(--shadow);overflow:hidden}
.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:13px;padding:24px 24px 19px;border-bottom:1px solid #1f3047}
.panel-heading h3{margin:6px 0 0;font-size:20px;font-weight:830;letter-spacing:-.7px;line-height:1.25;color:#f3f7ff}
.count-badge{backdrop-filter: blur(4px);border:1px solid #223753;border-radius:100px;padding:8px 12px;background:#122034;color:#bfd0e8;font-size:11px;white-space:nowrap;font-weight:750}
.due-list{padding:2px 24px 15px}
.due-row{display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:13px;border-bottom:1px solid #1f3047;padding:19px 0}
.due-row:last-child{border:0}
.due-icon{width:45px;height:45px;border-radius:15px;display:grid;place-items:center;background:#112540;color:#75b0ff;font-size:24px}
.due-icon[data-category="Nutsvoorzieningen"]{color:#337fac;background:#102844}
.due-icon[data-category="Belastingen"]{color:#cb9043;background:#372816}
.due-icon[data-category="Verzekeringen"]{color:#796abb;background:#241a42}
.due-icon[data-category="Abonnementen"]{color:#c76b85;background:#351b2b}
.due-name{font-size:14px;font-weight:790;line-height:1.3;overflow-wrap:anywhere;color:#f2f7ff}
.due-meta{margin-top:6px;color:#8ca4c2;font-size:11px;line-height:1.4}
.due-amount{font-size:16px;font-weight:830;letter-spacing:-.4px;white-space:nowrap;font-variant-numeric:tabular-nums;color:#f5f8ff}
.empty{text-align:center;padding:43px 22px 49px}
.empty-mark{display:grid;place-items:center;margin:0 auto 17px;width:64px;height:64px;border-radius:21px;background:#11243e;font-size:30px;color:#84b4ff}
.empty strong{display:block;font-size:16px;color:#f0f6ff}.empty p{max-width:340px;margin:8px auto 18px;color:#96abc7;font-size:12px;line-height:1.7}
.year-controls{display:flex;gap:3px;align-items:center}
.year-overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:20px}
.month-tile{display:flex;flex-direction:column;gap:7px;min-height:91px;min-width:0;text-align:left;padding:14px 12px;background:#0f1b2c;border:1px solid #1f3149;border-radius:14px;color:var(--ink);transition:transform .16s,border-color .16s,background .16s}
.month-tile:hover{transform:translateY(-1px);background:#132846;border-color:#30598d}
.month-tile.selected{background:#153056;border-color:#4b88e4;box-shadow:inset 0 0 0 1px #4b88e4}
.month-tile .name{font-size:11px;color:#bcd0ea;font-weight:760}
.month-tile strong{font-size:14px;font-weight:850;letter-spacing:-.5px;white-space:nowrap;color:#eef4ff}
.month-tile small{font-size:10px;color:#7f96b7}
.year-total{margin:0 20px 21px;padding:16px 17px;background:#0f2137;border-radius:14px;border:1px solid #213750;display:flex;justify-content:space-between;align-items:center;gap:10px}
.year-total small{display:block;color:#9ab8e8;font-size:11px;margin-bottom:5px}
.year-total strong{color:#8ebbff;display:block;font-size:22px;font-weight:850;letter-spacing:-.8px}
.year-total>span{font-size:10px;color:#7f99bf;text-align:right}
.manage-panel{margin-top:19px}
.panel-subtitle{font-size:12px;line-height:1.5;color:#97afcf;margin:8px 0 0}
.heading-wrap{flex-wrap:wrap}
.manage-list{padding:0 24px 12px}
.manage-row{display:flex;align-items:center;gap:15px;padding:17px 0;border-bottom:1px solid #1f3047;color:#edf4ff}
.manage-row:last-child{border:0}
.manage-icon{width:39px;height:39px;min-width:39px;border-radius:13px;background:#10213a;color:#80b5ff;display:grid;place-items:center;font-size:22px}
.manage-detail{min-width:0;flex:1}
.manage-detail strong{font-size:13px;display:block;line-height:1.3;overflow-wrap:anywhere}
.manage-detail small{display:block;font-size:11px;color:#90a8ca;margin-top:5px;line-height:1.5}
.manage-cost{font-weight:830;font-size:14px;white-space:nowrap;letter-spacing:-.3px;color:#f5f8ff}
.manage-actions{display:flex;gap:5px}
.action-btn{border:1px solid #28405f;background:#0e1c30;color:#bcd8ff;font-size:11px;font-weight:750;padding:8px 10px;border-radius:10px}
.action-btn:hover{background:#132742}.action-btn.danger{color:#ff9ca8}.action-btn.danger:hover{background:#311923;border-color:#61313d}
.manage-blank{text-align:center;padding:24px;font-size:12px;color:#90a4c0}
footer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:24px 6px 30px;color:#9ab0cf;font-size:11px}
footer strong{color:#9fc3ff}
.footer-actions{display:flex;gap:15px}
.text-button{border:0;background:transparent;color:#81b3ff;font-weight:750;font-size:12px;padding:6px 0}.text-button:hover{text-decoration:underline}
.safety-note{width:100%;margin:2px 0 0;color:#8299ba;font-size:10px;line-height:1.5}
/* Invoice editor */
dialog{width:min(94vw,530px);border:0;border-radius:24px;padding:0;color:var(--ink);box-shadow:0 30px 120px rgba(0,0,0,.58);max-height:calc(100vh - 35px);max-height:calc(100dvh - 35px);overflow-y:auto}
dialog::backdrop{background:rgba(3,10,20,.72);backdrop-filter:blur(4px)}
.dialog-top{display:flex;align-items:flex-start;justify-content:space-between;padding:27px 29px 22px;background:#132742;border-bottom:1px solid #213751}
.dialog-top h2{font-size:25px;font-weight:850;letter-spacing:-.7px;margin:8px 0 5px}
.dialog-top p{font-size:12px;color:#90add5;margin:0}
.close-button{border:0;background:#0d1a2c;color:#b5cff0;width:35px;height:35px;display:grid;place-items:center;border-radius:10px;font-size:25px;line-height:1}
.form-content{padding:26px 29px 20px;display:grid;gap:19px}
.form-content label{display:flex;flex-direction:column;gap:9px;color:#d8e6ff;font-size:12px;font-weight:800}
.form-content label span{color:#c26b62}
.form-content input,.form-content select{width:100%;min-height:48px;background:#0d1a2c;border:1px solid #263a58;border-radius:12px;color:#eef4ff;font-size:14px;padding:12px 14px;outline:0}
.form-content input:focus,.form-content select:focus{border-color:#4a8fff;box-shadow:0 0 0 3px rgba(74,143,255,.24)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.hint{padding:12px 14px;border:1px solid #23436d;background:#10233d;color:#a9c7f5;font-size:11px;line-height:1.6;border-radius:12px}
.form-error{background:#331c25;color:#ffb2bb;padding:11px;border-radius:10px;font-size:12px;margin:0}
.dialog-actions{display:flex;justify-content:flex-end;gap:10px;border-top:1px solid #213751;padding:19px 29px 24px;background:#0d1a2b}
.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);z-index:20;max-width:90vw;background:#1b4ea2;color:#fff;font-size:12px;font-weight:750;border-radius:13px;padding:14px 18px;box-shadow:0 15px 30px #13363f4f;text-align:center}
@media(max-width:1020px){.app-shell{padding:0 22px}.main-grid{grid-template-columns:1fr}.year-overview{grid-template-columns:repeat(4,minmax(0,1fr))}.local-pill{display:none}}
@media(max-width:640px){
 .app-shell{padding:0 14px}
 .topbar{padding:16px 0 14px;gap:7px}
 .identity{gap:10px}
 .logo{height:43px;width:43px;min-width:43px;border-radius:13px}.logo svg{width:23px}
 .overline{font-size:8px;letter-spacing:1px;gap:5px}.flag{width:21px;height:12px}
 .identity h1{font-size:19px;letter-spacing:-.6px}
 .subtitle{font-size:10px;max-width:240px;line-height:1.35}
 .top-actions .button{width:43px;height:43px;padding:0;border-radius:13px;font-size:0;overflow:hidden}
 .top-actions .button .add-icon{font-size:28px;margin:0;line-height:1}
 .intro{margin-top:13px;min-height:147px;padding:20px 23px;border-radius:19px}
 .intro::before{background-size:540px auto;background-position:85% 32%}
 .eyebrow{font-size:9px;letter-spacing:1.25px}
 .intro h2{font-size:26px;letter-spacing:-.9px;margin:10px 0 8px;line-height:1.12}
 .intro p{font-size:11px;line-height:1.5;max-width:330px}
 .intro-stamp{display:none}
 .toolbar{padding:25px 0 12px;align-items:flex-start;flex-direction:column;gap:12px}
 .toolbar h2{font-size:24px;letter-spacing:-.6px;margin-top:6px}
 .section-eyebrow{font-size:9px;letter-spacing:1.4px}
 .picker-actions{width:100%;gap:9px}
 .date-nav{min-width:0;flex:1;height:45px;border-radius:12px}
 .date-nav span{font-size:13px}
 .date-nav button{padding:7px 11px}
 .picker-actions .button{padding:12px 14px;min-height:45px;border-radius:12px}
 .stat{min-height:110px;padding:18px 18px;gap:14px;border-radius:18px}
 .stat-icon{width:48px;height:48px;min-width:48px;border-radius:14px;font-size:23px}
 .stat-value{font-size:clamp(27px,7.3vw,36px);letter-spacing:-1.1px}
 .stat-label{font-size:11px}
 .stat-description{font-size:11px}
 .stat::after{right:5px;font-size:180px;top:-33px}
 .main-grid{margin-top:13px;gap:13px}
 .panel{border-radius:18px}
 .panel-heading{padding:19px 16px 17px;gap:8px}
 .panel-heading h3{font-size:18px}
 .count-badge{backdrop-filter: blur(4px);padding:7px 9px;font-size:10px}
 .due-list{padding:2px 15px 9px}
 .due-row{grid-template-columns:39px minmax(0,1fr) auto;gap:10px;padding:17px 0}
 .due-icon{width:38px;height:38px;border-radius:12px;font-size:21px}
 .due-name{font-size:13px}
 .due-meta{font-size:10px;margin-top:5px}
 .due-amount{font-size:14px;letter-spacing:-.35px}
 .year-overview{grid-template-columns:repeat(3,minmax(0,1fr));padding:14px;gap:7px}
 .month-tile{min-height:82px;padding:12px 9px;border-radius:12px}
 .month-tile .name{font-size:10px}.month-tile strong{font-size:13px}.month-tile small{font-size:9px}
 .year-total{margin:0 14px 16px;padding:13px 15px}
 .year-total strong{font-size:20px}
 .manage-panel{margin-top:13px}
 .manage-list{padding:0 15px 11px}
 .manage-row{gap:10px;flex-wrap:wrap;padding:15px 0}
 .manage-icon{width:33px;height:33px;min-width:33px;font-size:19px}
 .manage-detail strong{font-size:12px}.manage-detail small{font-size:10px}
 .manage-cost{font-size:13px}
 .manage-actions{width:100%;justify-content:flex-end;gap:7px}
 .action-btn{font-size:11px}
 .panel-subtitle{font-size:11px}
 footer{padding:20px 3px 33px}.footer-actions{gap:16px}
 .dialog-top{padding:22px 18px 17px}.form-content{padding:20px 18px;gap:15px}.form-grid{grid-template-columns:1fr}.dialog-actions{padding:15px 18px 22px}.dialog-actions .button{padding:11px 12px}
}
@media(max-width:370px){.intro h2{font-size:23px}.identity h1{font-size:18px}.subtitle{display:none}.stat-value{font-size:25px}.due-amount{font-size:12px}.due-name{font-size:12px}.month-tile strong{font-size:11px}.picker-actions .button{padding:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}

/* Sinking-fund plan: reserve separately for quarterly, half-yearly and annual bills */
.stats-grid .stat {min-width:0}
.stat-copy {min-width:0}
.reserve-card {min-width:0;border-radius:22px;border:1px solid #31547b;background:radial-gradient(circle at 85% 0,rgba(51,119,212,.17),transparent 60%),linear-gradient(143deg,#10233e,#101c31 80%);padding:23px 27px 21px;box-shadow:0 14px 32px rgba(0,6,17,.28);display:flex;flex-direction:column;justify-content:center}
.reserve-card-top{display:flex;align-items:center;gap:8px;margin-bottom:9px;min-width:0}
.reserve-card-icon{display:grid;place-items:center;width:26px;height:26px;border-radius:9px;background:#204573;color:#b9d8ff;font-size:18px;font-weight:700;flex-shrink:0}
.reserve-card-caption{font-size:10px;color:#99b7d8;letter-spacing:.3px;font-weight:600;line-height:1.3}
.reserve-card-label{font-size:13px;font-weight:750;color:#c0d7f4}
.reserve-card-value{display:block;color:#fff;font-size:clamp(31px,3.4vw,47px);letter-spacing:-1.3px;line-height:1.2;margin:5px 0 17px;font-variant-numeric:tabular-nums;white-space:nowrap}
.reserve-breakdown{display:grid;gap:8px;padding-top:13px;border-top:1px solid rgba(158,193,230,.16)}
.reserve-breakdown>div{display:flex;justify-content:space-between;align-items:center;gap:14px;color:#b3c6e0;font-size:11px}
.reserve-breakdown strong{font-variant-numeric:tabular-nums;font-size:12px;color:#e9f2ff;white-space:nowrap}
.reserve-panel{margin-top:18px}
.reserve-heading{align-items:center}
.reserve-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:20px}
.reserve-group{min-width:0;background:#0f1d30;border:1px solid #263953;border-radius:16px;overflow:hidden}
.reserve-group-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;background:#132541;padding:14px 14px;border-bottom:1px solid #29405c}
.reserve-group-title{display:block;color:#b9d5fa;font-size:12px;font-weight:780;line-height:1.3}
.reserve-group-total{display:block;color:#eff6ff;font-size:13px;font-weight:850;font-variant-numeric:tabular-nums;white-space:nowrap}
.reserve-table{width:100%;border-collapse:collapse;table-layout:fixed}
.reserve-table thead th{text-align:left;font-size:10px;font-weight:670;color:#89a7c8;padding:11px 12px 9px;border-bottom:1px solid #23354d}
.reserve-table th:last-child,.reserve-table td:last-child{text-align:right;width:44%}
.reserve-table td{padding:13px 12px;color:#c8d8ee;font-size:11px;border-bottom:1px solid #203149;vertical-align:middle;overflow-wrap:anywhere}
.reserve-table tr:last-child td{border-bottom:0}
.reserve-table .bill-name{display:block;color:#f0f6ff;font-size:12px;font-weight:780;margin-bottom:5px}
.reserve-table .bill-meta{display:block;font-size:10px;color:#8ca8c9;line-height:1.45}
.reserve-table .reserve-per-month{display:block;color:#87bbff;font-size:15px;font-weight:850;white-space:nowrap;font-variant-numeric:tabular-nums}
.reserve-table .reserve-period{display:block;color:#94abc8;margin-top:4px;font-size:10px}
.reserve-note{margin:0 20px 21px;padding:12px 14px;border-radius:12px;background:#0d2138;border:1px solid #223b5c;color:#a7bfda;font-size:11px;line-height:1.65}
.reserve-note strong{color:#deebff}
.reserve-empty{grid-column:1/-1;text-align:center;padding:18px;color:#9fb4cf;font-size:12px;line-height:1.65}
@media(max-width:1020px){.reserve-groups{grid-template-columns:1fr}.reserve-group{width:100%}.reserve-table th:last-child,.reserve-table td:last-child{width:39%}}
@media(max-width:640px){
 .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
 .stats-grid .stat,.reserve-card{min-height:171px;padding:14px 12px;border-radius:17px}
 .stats-grid .stat{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:0}
 .stats-grid .stat-icon{display:none}
 .stats-grid .stat .stat-label{font-size:11px;line-height:1.4}
 .stats-grid .stat .stat-value{font-size:clamp(18px,5vw,25px);letter-spacing:-.65px;white-space:nowrap;margin:8px 0}
 .stats-grid .stat .stat-description{font-size:10px;line-height:1.35}
 .stat::after{right:0;top:-20px;font-size:115px;opacity:.5}
 .reserve-card-top{margin:0 0 5px;gap:5px}.reserve-card-icon{display:none}.reserve-card-caption{font-size:9px}
 .reserve-card-label{font-size:11px;line-height:1.4}
 .reserve-card-value{font-size:clamp(18px,5vw,25px);letter-spacing:-.6px;white-space:nowrap;margin:6px 0 9px}
 .reserve-breakdown{gap:6px;padding-top:9px}
 .reserve-breakdown>div{font-size:9px;gap:5px}
 .reserve-breakdown strong{font-size:9px}
 .reserve-panel{margin-top:12px}
 .reserve-groups{padding:13px;gap:10px}
 .reserve-group-top{padding:12px 13px}
 .reserve-group-total{font-size:12px}
 .reserve-table thead th{padding:9px 12px}
 .reserve-table td{padding:12px}
 .reserve-note{margin:0 13px 14px;font-size:10px}
}
@media(max-width:360px){.reserve-card{padding:13px 9px}.stats-grid .stat{padding:13px 9px}.reserve-card-value,.stats-grid .stat .stat-value{font-size:17px}.reserve-breakdown strong{font-size:8px}}

/* Uitklapbaar spaarplan: het bedrag blijft zichtbaar, rekeningdetails pas na een tik. */
.reserve-groups[hidden],.reserve-note[hidden]{display:none!important}
.reserve-toggle{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;cursor:pointer;color:#dceaff;transition:border-color .18s,background .18s}
.reserve-toggle:hover{background:#1b375b;border-color:#517ebd}
.reserve-toggle:focus-visible{outline:3px solid #78b6ff;outline-offset:3px}
.reserve-chevron{display:inline-block;font-size:18px;line-height:1;transition:transform .2s ease;color:#8cbfff}
.reserve-toggle[aria-expanded="true"] .reserve-chevron{transform:rotate(180deg)}
@media(prefers-reduced-motion:reduce){.reserve-chevron{transition:none}}

/* Versie 7: de knop is overduidelijk blauw en gemakkelijk aan te tikken. */
.reserve-toggle{background:linear-gradient(150deg,#235cbb,#2d79e2)!important;border:1px solid #75aaff!important;color:#fff!important;padding:10px 13px!important;box-shadow:0 8px 18px rgba(5,42,101,.36);font-size:12px!important;white-space:nowrap}
.reserve-toggle:hover,.reserve-toggle:active{background:linear-gradient(150deg,#2f6fd8,#3b8bff)!important}
.reserve-toggle-hint{color:#d6e8ff;font-size:10px;font-weight:650}
.reserve-chevron{color:#fff!important}
@media(max-width:370px){.reserve-toggle{padding:8px!important;gap:4px!important}.reserve-toggle-hint{font-size:9px}}

/* Versie 9: ook het maandoverzicht openen via de blauwe rekeningen-knop. */
.due-list[hidden] {display:none!important}
.month-toggle {flex-shrink:0}
.month-toggle[aria-expanded="true"] .reserve-chevron {transform:rotate(180deg)}
@media(max-width:380px){
 .scheduled-panel .panel-heading {gap:6px}
 .month-toggle{font-size:11px!important;padding:8px!important}
 .month-toggle .reserve-toggle-hint {font-size:9px}
}

/* Versie 10: de beheerlijst alleen tonen na de knop ‘Bewerken’. */
.manage-contents[hidden]{display:none!important}
.manage-toggle{flex-shrink:0}
.manage-toolbar{display:flex;justify-content:flex-end;padding:16px 20px 4px}
.manage-contents .manage-list{padding-top:0}
@media(max-width:640px){.manage-toolbar{padding:12px 15px 2px}.manage-toggle{min-width:106px}}

/* Nederlands / Italiano - permanente taalkeuze */
.language-bar{display:flex;justify-content:flex-end;align-items:center;gap:12px;padding:10px 0 0;min-height:48px}
.language-bar-title{font-size:11px;letter-spacing:.25px;color:#90a9cf;font-weight:700}
.language-buttons{display:flex;gap:4px;padding:4px;border:1px solid #274465;background:#101f35;border-radius:12px}
.language-choice{color:#a8bad5;background:transparent;border:1px solid transparent;border-radius:9px;min-height:34px;padding:7px 12px;font-size:12px;font-weight:760;white-space:nowrap}
.language-choice[aria-pressed="true"]{color:white;background:#2165cd;border-color:#4f96f7;box-shadow:0 2px 12px #1563d53a}
.language-choice:focus-visible{outline:2px solid #85baff;outline-offset:2px}
@media(max-width:640px){.language-bar{justify-content:space-between;gap:6px;padding:10px 0 0}.language-bar-title{font-size:10px}.language-choice{padding:7px 9px;font-size:11px}.language-buttons{gap:2px}}