:root{--bg:#f3f6fb;--panel:#fff;--ink:#182235;--muted:#6f7c91;--line:#dde4ee;--nav:#162034;--nav2:#22304a;--accent:#2f6fed;--good:#1f8a5b;--warn:#c17d00;--bad:#b83c4a;--shadow:0 8px 30px rgba(25,41,68,.08)}*{box-sizing:border-box}html,body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--ink);background:var(--bg)}body{min-height:100vh}a{color:inherit;text-decoration:none}.app-shell{display:flex;min-height:100vh}.sidebar{width:245px;background:var(--nav);color:#e8edf7;padding:20px 14px;position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;z-index:20}.sidebar-brand{display:flex;align-items:center;gap:10px;padding:4px 8px 24px}.sidebar-brand strong{display:block}.sidebar-brand span{font-size:12px;color:#9eabc0}.brand-mark{width:52px;height:52px;border-radius:15px;background:linear-gradient(135deg,#4b85ff,#7b61ff);display:grid;place-items:center;color:white;font-size:28px;font-weight:800;box-shadow:var(--shadow);margin:0 auto 10px}.brand-mark.small{width:36px;height:36px;border-radius:10px;font-size:20px;margin:0}.sidebar nav{display:flex;flex-direction:column;gap:5px}.sidebar nav a{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:10px;color:#cbd4e4;font-size:14px}.sidebar nav a:hover,.sidebar nav a.active{background:var(--nav2);color:#fff}.nav-ico{width:22px;text-align:center}.badge{margin-left:auto;min-width:21px;padding:2px 6px;border-radius:99px;background:#e44d5e;color:white;font-size:11px;text-align:center}.sidebar-bottom{margin-top:auto;padding:14px 8px;border-top:1px solid #2e3b55;display:flex;flex-direction:column;gap:4px}.sidebar-bottom small{color:#8e9bb1}.main{margin-left:245px;min-width:0;width:calc(100% - 245px)}.topbar{height:84px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 28px;gap:14px;position:sticky;top:0;z-index:10}.topbar h1{font-size:21px;margin:0}.topbar p{font-size:12px;color:var(--muted);margin:4px 0 0}.menu-btn{display:none;border:0;background:none;font-size:23px}.content{padding:26px;max-width:1500px;margin:auto}.grid{display:grid;gap:18px}.grid.cards{grid-template-columns:repeat(4,minmax(0,1fr))}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:20px}.metric small{display:block;color:var(--muted);margin-bottom:9px}.metric strong{font-size:25px;letter-spacing:-.5px}.metric .sub{font-size:12px;margin-top:8px;color:var(--muted)}.section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:24px 0 12px}.section-title h2{font-size:18px;margin:0}.section-title:first-child{margin-top:0}.btn{border:1px solid var(--line);background:#fff;border-radius:9px;padding:9px 13px;cursor:pointer;font-weight:600;display:inline-flex;align-items:center;gap:6px}.btn.primary{background:var(--accent);border-color:var(--accent);color:white}.btn.danger{background:#fff1f2;border-color:#f0c7cd;color:var(--bad)}.btn.ghost{background:transparent}.btn.full{width:100%;justify-content:center}.table-wrap{overflow:auto;background:#fff;border:1px solid var(--line);border-radius:14px}.table{width:100%;border-collapse:collapse;min-width:720px}.table th,.table td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);font-size:13px;vertical-align:middle}.table th{color:var(--muted);font-size:12px;background:#f8fafc}.table tr:last-child td{border-bottom:0}.amount.plus{color:var(--good);font-weight:700}.amount.minus{color:var(--bad);font-weight:700}.pill{display:inline-flex;border-radius:99px;padding:4px 8px;font-size:11px;font-weight:700;background:#eef2f7;color:#516078}.pill.good{background:#e8f6ef;color:var(--good)}.pill.warn{background:#fff5dd;color:var(--warn)}.pill.bad{background:#fdebed;color:var(--bad)}.form-card{max-width:900px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:700;color:#44516a}input,select,textarea{width:100%;border:1px solid #cfd8e6;border-radius:9px;padding:10px 11px;font:inherit;background:white;color:var(--ink)}textarea{min-height:90px;resize:vertical}.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.muted{color:var(--muted)}.alert{padding:12px 14px;border-radius:10px;margin-bottom:15px;background:#edf3ff;color:#315caa;border:1px solid #c9dafd}.alert.success{background:#eaf7f0;color:#1f7a52;border-color:#bfe5d1}.alert.danger{background:#fff0f1;color:#a52f3d;border-color:#f2c4ca}.alert.warn{background:#fff7e6;color:#926200;border-color:#efd79f}.empty{padding:34px;text-align:center;color:var(--muted)}.progress{height:9px;background:#edf1f6;border-radius:99px;overflow:hidden}.progress>span{display:block;height:100%;background:var(--accent);border-radius:99px}.goal-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.goal-head h3{margin:0 0 4px}.goal-card .progress{margin:15px 0 8px}.goal-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:15px}.goal-actions .btn{padding:7px 9px;font-size:12px}.kpi-line{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line);font-size:13px}.kpi-line:last-child{border-bottom:0}.auth-body{display:grid;place-items:center;min-height:100vh;background:linear-gradient(135deg,#eef4ff,#f8f5ff)}.auth-card{width:min(420px,calc(100% - 28px));background:white;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);padding:30px}.auth-card h1{text-align:center;margin:0}.auth-card p{text-align:center}.auth-card form{display:flex;flex-direction:column;gap:14px;margin-top:20px}.split{display:flex;justify-content:space-between;align-items:center;gap:12px}.review-reason{max-width:340px;color:var(--bad);font-size:12px}.nowrap{white-space:nowrap}.hide{display:none}@media(max-width:1050px){.grid.cards{grid-template-columns:repeat(2,1fr)}.grid.three{grid-template-columns:1fr 1fr}}@media(max-width:760px){.sidebar{transform:translateX(-100%);transition:.2s}.sidebar.open{transform:translateX(0)}.main{margin-left:0;width:100%}.menu-btn{display:block}.content{padding:16px}.topbar{padding:0 16px}.grid.cards,.grid.two,.grid.three,.form-grid{grid-template-columns:1fr}.card{padding:16px}}

.screenshot-preview{max-width:100%;max-height:420px;object-fit:contain;border:1px solid var(--line);border-radius:12px;margin-top:12px;background:#f8fafc}

/* v0.7 mobile/PWA */
.pwa-install-card{display:none}
.sidebar-backdrop{display:none}
.mobile-nav{display:none}
.mobile-only{display:none!important}
.install-steps{margin:12px 0 0;padding-left:20px;color:var(--muted);line-height:1.6}
.install-status{margin-top:12px}
.app-icon-preview{width:84px;height:84px;border-radius:22px;box-shadow:var(--shadow);display:block;margin-bottom:14px}
.touch-row{display:flex;gap:10px;flex-wrap:wrap}
.touch-row .btn{min-height:44px}

@media(max-width:760px){
  html{background:var(--bg)}
  body{padding-bottom:calc(74px + env(safe-area-inset-bottom));-webkit-tap-highlight-color:transparent}
  .mobile-only{display:flex!important}
  .sidebar{width:min(88vw,320px);padding-top:calc(16px + env(safe-area-inset-top));padding-bottom:calc(16px + env(safe-area-inset-bottom));box-shadow:18px 0 40px rgba(11,20,38,.22)}
  .sidebar.open + .sidebar-backdrop,.sidebar-backdrop.open{display:block;position:fixed;inset:0;background:rgba(9,17,31,.42);z-index:19;backdrop-filter:blur(2px)}
  .sidebar nav a{min-height:46px;font-size:15px}
  .main{min-height:100dvh}
  .topbar{height:auto;min-height:70px;padding:calc(10px + env(safe-area-inset-top)) 14px 10px;align-items:center}
  .topbar h1{font-size:19px;line-height:1.2}
  .topbar p{font-size:11px}
  .menu-btn{width:44px;height:44px;border-radius:12px;background:#f3f6fb;border:1px solid var(--line);display:grid;place-items:center;flex:0 0 auto}
  .content{padding:14px 12px 18px}
  .grid{gap:12px}
  .card{border-radius:14px;padding:15px;box-shadow:0 4px 18px rgba(25,41,68,.07)}
  .metric strong{font-size:23px}
  .section-title{margin:20px 0 10px;align-items:flex-start}
  .section-title h2{font-size:17px}
  .section-title .btn{min-height:40px}
  .form-card{max-width:none}
  label{font-size:13px;gap:7px}
  input,select,textarea{font-size:16px!important;min-height:46px;border-radius:11px;padding:11px 12px}
  input[type="checkbox"],input[type="radio"]{min-height:auto}
  textarea{min-height:110px}
  .btn{min-height:44px;padding:10px 13px;border-radius:11px;font-size:14px;justify-content:center}
  .actions{gap:9px}
  .actions .btn{flex:1 1 145px}
  .table-wrap{border-radius:12px;-webkit-overflow-scrolling:touch}
  .table{min-width:680px}
  .table th,.table td{padding:11px 12px}
  .auth-body{min-height:100dvh;padding:calc(18px + env(safe-area-inset-top)) 0 calc(18px + env(safe-area-inset-bottom))}
  .auth-card{width:calc(100% - 24px);padding:24px 18px;border-radius:20px}
  .auth-card h1{font-size:27px}
  .brand-mark{width:64px;height:64px;border-radius:18px;font-size:32px}
  .goal-actions .btn{min-height:40px}
  .screenshot-preview{max-height:55vh}
  .mobile-nav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;z-index:18;left:0;right:0;bottom:0;padding:6px 6px calc(6px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);border-top:1px solid var(--line);box-shadow:0 -8px 30px rgba(25,41,68,.08);backdrop-filter:blur(12px)}
  .mobile-nav a,.mobile-nav button{appearance:none;border:0;background:transparent;color:#657188;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:54px;font:inherit;font-size:10px;font-weight:700;border-radius:10px;padding:4px 2px}
  .mobile-nav a.active{color:var(--accent);background:#edf3ff}
  .mobile-nav .mnav-ico{font-size:20px;line-height:1}
  .pwa-install-card{display:block}
}

@media(display-mode:standalone){
  .pwa-install-card.install-only{display:none!important}
  .topbar{padding-top:calc(10px + env(safe-area-inset-top))}
}

/* v0.7.1 iPhone install help */
.install-modal[hidden]{display:none!important}.install-help-open{overflow:hidden}.install-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-end;justify-content:center}.install-modal-backdrop{position:absolute;inset:0;background:rgba(9,17,31,.5);backdrop-filter:blur(3px)}.install-modal-sheet{position:relative;width:min(520px,100%);background:#fff;border-radius:24px 24px 0 0;padding:16px 20px calc(24px + env(safe-area-inset-bottom));box-shadow:0 -18px 50px rgba(15,24,41,.2);z-index:1}.install-modal-handle{width:42px;height:5px;border-radius:99px;background:#d7dde7;margin:0 auto 16px}.install-modal-close{position:absolute;right:14px;top:14px;width:36px;height:36px;border:0;border-radius:50%;background:#f0f3f8;font-size:24px;line-height:1;color:#5d687b}.install-modal-icon{width:68px;height:68px;border-radius:18px;display:block;margin:0 auto 10px}.install-modal-sheet h2{text-align:center;margin:4px 38px 8px}.install-modal-sheet>p{text-align:center}.install-modal-steps{margin:18px 0;padding:0;list-style:none;counter-reset:steps}.install-modal-steps li{counter-increment:steps;display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line);line-height:1.45}.install-modal-steps li:before{content:counter(steps);display:grid;place-items:center;flex:0 0 28px;height:28px;border-radius:50%;background:#edf3ff;color:var(--accent);font-weight:800}.share-symbol{display:inline-grid;place-items:center;width:25px;height:25px;border:1px solid #cfd8e6;border-radius:7px;color:var(--accent);font-weight:800}

/* v0.9 professional mobile/dashboard refresh */
:root{
  --bg:#eef3f9;
  --panel:#ffffff;
  --ink:#142033;
  --muted:#6f7c91;
  --line:#dde5f0;
  --nav:#10213f;
  --nav2:#183156;
  --accent:#2f6fed;
  --accent-soft:#eaf1ff;
  --good:#18875b;
  --warn:#b97600;
  --bad:#b93c4c;
  --shadow:0 10px 34px rgba(24,43,75,.08);
  --shadow-soft:0 5px 18px rgba(24,43,75,.06)
}
.ui-icon{width:20px;height:20px;display:inline-block;vertical-align:middle;flex:0 0 auto}
.sidebar{background:linear-gradient(180deg,#10213f 0%,#0b1a32 100%);border-right:1px solid rgba(255,255,255,.04)}
.sidebar-brand{padding:4px 8px 20px}
.sidebar-brand .brand-mark{background:linear-gradient(135deg,#3f7cff,#7558ff);box-shadow:0 8px 24px rgba(54,109,237,.34)}
.sidebar nav{gap:4px}
.sidebar nav a{border-radius:12px;min-height:44px;padding:10px 11px;transition:.18s ease}
.sidebar nav a:hover{transform:translateX(2px)}
.sidebar nav a.active{background:linear-gradient(135deg,rgba(69,124,255,.24),rgba(123,88,255,.18));box-shadow:inset 0 0 0 1px rgba(123,161,255,.13)}
.nav-ico{width:24px;display:grid;place-items:center;color:#91a7c8}.sidebar nav a.active .nav-ico{color:#fff}.nav-ico .ui-icon{width:19px;height:19px}
.sidebar-bottom{gap:7px}.sidebar-logout{display:flex;align-items:center;gap:9px;color:#d6deeb;font-size:14px;padding:8px 4px}.sidebar-logout .ui-icon{width:18px;height:18px}
.topbar{height:78px;background:rgba(255,255,255,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:0 26px;box-shadow:0 1px 0 rgba(27,48,82,.03)}
.topbar-page-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);flex:0 0 auto}.topbar-page-icon .ui-icon{width:21px;height:21px}
.topbar-copy{min-width:0}.topbar-copy h1{font-size:20px}.topbar-copy p{margin-top:3px}
.user-chip{margin-left:auto;display:flex;align-items:center;gap:9px;padding:5px 8px 5px 5px;border-radius:14px;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-soft)}
.user-chip>span{width:36px;height:36px;border-radius:11px;background:linear-gradient(135deg,#2f6fed,#7358ff);color:#fff;display:grid;place-items:center;font-weight:800;font-size:12px;letter-spacing:.4px}
.user-chip>div{display:flex;flex-direction:column;min-width:0}.user-chip strong{font-size:12px;max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-chip small{font-size:10px;color:var(--muted);margin-top:2px}
.content{padding:24px;max-width:1480px}
.card{border-radius:18px;box-shadow:var(--shadow-soft);border-color:#e2e9f2}.btn{border-radius:11px}.btn.compact{min-height:36px;padding:7px 10px;font-size:12px}.btn .ui-icon{width:16px;height:16px}

.balance-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#102849 0%,#1d4c89 58%,#326de6 100%);color:#fff;border-radius:24px;padding:24px 26px;box-shadow:0 18px 42px rgba(26,72,143,.20);margin-bottom:18px}
.balance-hero:after{content:"";position:absolute;width:290px;height:290px;border-radius:50%;right:-110px;top:-125px;background:rgba(255,255,255,.08)}
.balance-hero:before{content:"";position:absolute;width:170px;height:170px;border-radius:50%;right:120px;bottom:-120px;background:rgba(255,255,255,.06)}
.balance-hero-head{position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.eyebrow{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:750;letter-spacing:.02em;color:#cfe0ff;text-transform:uppercase}.hero-icon{width:18px;height:18px}.hero-balance{font-size:42px;font-weight:800;letter-spacing:-1.5px;margin:8px 0 5px}.hero-note{font-size:12px;color:#c6d8f4}.hero-action{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.12);padding:10px 13px;border-radius:12px;font-size:12px;font-weight:700;backdrop-filter:blur(8px)}.hero-action .ui-icon{width:17px;height:17px}
.balance-hero-stats{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:21px;padding-top:17px;border-top:1px solid rgba(255,255,255,.18)}.balance-hero-stats>div{display:flex;flex-direction:column;gap:5px}.balance-hero-stats span{font-size:11px;color:#c8daf6}.balance-hero-stats strong{font-size:16px}.balance-hero-stats .positive{color:#bcf4d7}.balance-hero-stats .negative{color:#ffd0d5}

.dashboard-metrics .metric-pro{display:flex;align-items:center;gap:13px;min-height:112px}.metric-icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;flex:0 0 auto}.metric-icon .ui-icon{width:22px;height:22px}.metric-icon.income{background:#e6f7ef;color:#18875b}.metric-icon.expense{background:#fff0f1;color:#b93c4c}.metric-icon.pending{background:#fff5dd;color:#a96e00}.metric-icon.review{background:#edf3ff;color:#2f6fed}.metric-pro small{margin-bottom:5px}.metric-pro strong{font-size:23px}.metric-pro .sub{margin-top:4px}

.account-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.account-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:var(--shadow-soft);transition:.18s ease;min-width:0}.account-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.account-card-top{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:11px;font-weight:700}.account-type-icon{width:34px;height:34px;border-radius:11px;background:#eef4ff;color:var(--accent);display:grid;place-items:center}.account-type-icon .ui-icon{width:18px;height:18px}.account-type-label{margin-right:auto}.account-chevron{width:16px;height:16px;color:#9aa7ba}.account-name{display:block;margin-top:14px;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.account-balance{font-size:25px;font-weight:800;letter-spacing:-.5px;margin:5px 0 11px}.account-meta{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:10px}.empty-account{display:flex;align-items:center;gap:12px;grid-column:1/-1}.empty-account .account-icon{width:25px;height:25px}.empty-account strong{display:block}.empty-account span{display:block;color:var(--muted);font-size:12px;margin-top:3px}

.forecast-card{display:flex;align-items:center;gap:16px;background:linear-gradient(145deg,#f6f9ff,#ffffff)}.forecast-card-icon{width:54px;height:54px;border-radius:17px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;flex:0 0 auto}.forecast-card-icon .ui-icon{width:26px;height:26px}.forecast-card small{color:var(--muted);font-weight:700}.forecast-card h2{margin:3px 0 6px;font-size:18px}.forecast-card p{font-size:12px;color:var(--muted);margin:0 0 10px;line-height:1.55}.text-link{display:inline-flex;align-items:center;gap:4px;color:var(--accent);font-weight:750;font-size:12px}.text-link .ui-icon{width:15px;height:15px}
.quick-action-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.quick-action{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:13px;box-shadow:var(--shadow-soft)}.quick-action>span{width:39px;height:39px;border-radius:12px;background:#eef4ff;color:var(--accent);display:grid;place-items:center}.quick-action>span .ui-icon{width:20px;height:20px}.quick-action strong{display:block;font-size:13px}.quick-action small{display:block;color:var(--muted);font-size:10px;margin-top:3px}

@media(max-width:1050px){.account-card-grid{grid-template-columns:repeat(2,1fr)}.quick-action-grid{grid-template-columns:repeat(2,1fr)}}

@media(max-width:760px){
  :root{--bg:#f3f6fb}
  body{background:linear-gradient(180deg,#eef4fb 0,#f5f7fb 230px,#f5f7fb 100%)}
  .sidebar{width:min(88vw,330px);border-radius:0 24px 24px 0}
  .sidebar nav a{border-radius:13px;min-height:48px}.sidebar nav a:hover{transform:none}
  .topbar{min-height:74px;padding:calc(8px + env(safe-area-inset-top)) 12px 8px;background:rgba(245,248,252,.92);border-bottom-color:rgba(210,220,233,.65)}
  .topbar-page-icon{width:39px;height:39px;border-radius:12px}.topbar-page-icon .ui-icon{width:20px;height:20px}
  .topbar-copy h1{font-size:18px}.topbar-copy p{font-size:10px}.user-chip{display:none}
  .menu-btn{background:#fff;box-shadow:var(--shadow-soft)}.menu-btn .ui-icon{width:22px;height:22px}
  .content{padding:11px 11px 20px}
  .balance-hero{border-radius:21px;padding:20px 18px;margin-bottom:12px;box-shadow:0 16px 34px rgba(24,63,122,.18)}
  .balance-hero-head{display:block}.hero-action{margin-top:15px;width:100%;justify-content:center;min-height:43px}.hero-balance{font-size:37px;margin-top:7px}.hero-note{font-size:10px;line-height:1.5}
  .balance-hero-stats{grid-template-columns:1fr 1fr 1fr;gap:6px;margin-top:17px;padding-top:14px}.balance-hero-stats span{font-size:9px}.balance-hero-stats strong{font-size:13px}
  .dashboard-metrics{grid-template-columns:1fr 1fr!important;gap:9px}.dashboard-metrics .metric-pro{min-height:104px;padding:13px;display:block}.metric-icon{width:36px;height:36px;border-radius:11px;margin-bottom:9px}.metric-icon .ui-icon{width:18px;height:18px}.metric-pro small{font-size:10px}.metric-pro strong{font-size:20px}.metric-pro .sub{font-size:9px;line-height:1.35}
  .section-title{margin:17px 0 9px}.section-title h2{font-size:16px}.section-title .btn.compact{min-height:35px;font-size:11px}
  .account-card-grid{grid-template-columns:1fr;gap:9px}.account-card{border-radius:16px;padding:14px}.account-name{margin-top:11px}.account-balance{font-size:24px}.account-meta{font-size:10px}
  .dashboard-panels{grid-template-columns:1fr!important}
  .forecast-card{padding:15px;align-items:flex-start}.forecast-card-icon{width:45px;height:45px;border-radius:14px}.forecast-card h2{font-size:16px}
  .quick-action-grid{grid-template-columns:1fr 1fr;gap:9px}.quick-action{padding:11px 10px;border-radius:14px}.quick-action>span{width:35px;height:35px;border-radius:11px}.quick-action strong{font-size:12px}.quick-action small{font-size:9px}
  .mobile-nav{left:8px;right:8px;bottom:7px;border:1px solid rgba(214,223,234,.9);border-radius:20px;padding:5px 6px calc(5px + env(safe-area-inset-bottom));box-shadow:0 12px 35px rgba(22,42,72,.18);background:rgba(255,255,255,.94)}
  .mobile-nav a,.mobile-nav button{min-height:54px;border-radius:14px;color:#748198;font-size:9px;gap:4px}.mobile-nav a.active{background:linear-gradient(135deg,#eaf1ff,#f1efff);color:#2f6fed}.mobile-nav .mnav-ico{width:21px;height:21px;font-size:inherit}
  body{padding-bottom:calc(82px + env(safe-area-inset-bottom))}
  .table-wrap{box-shadow:var(--shadow-soft)}
}

/* v1.0 bankherkenning, documenten en authenticator */
.bank-detect{margin:12px 0;padding:12px 14px;border-radius:14px;background:#eef8ff;border:1px solid #b9def8;color:#17395a}
.setup-key{padding:14px;border:1px solid var(--line);border-radius:14px;background:#f8fafc;margin:14px 0;text-align:left}
.setup-key span{display:block;font-size:.82rem;color:var(--muted);margin-bottom:6px}.setup-key strong{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all;letter-spacing:.08em}
.recovery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:16px 0}.recovery-grid code{display:block;padding:10px;border:1px solid var(--line);border-radius:10px;background:#f8fafc;font-weight:700;letter-spacing:.06em}
@media(max-width:640px){.recovery-grid{grid-template-columns:1fr}.setup-key strong{font-size:.95rem}}

/* v1.0.3 - Authenticator QR setup */
.qr-setup-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;margin:18px 0;padding:20px;border:1px solid var(--line,#dbe3ef);border-radius:20px;background:#fff}
.qr-setup-copy h2{margin:10px 0 6px}.totp-qr{width:280px;max-width:100%;display:flex;justify-content:center;align-items:center;padding:10px;border-radius:18px;background:#fff;border:1px solid #e5e7eb;box-shadow:0 10px 30px rgba(15,23,42,.08)}
.totp-qr svg{display:block;width:100%;height:auto;max-width:260px}.manual-totp{margin:14px 0;padding:14px 16px;border:1px solid var(--line,#dbe3ef);border-radius:16px;background:#f8fafc}.manual-totp summary{cursor:pointer;font-weight:700}.manual-totp[open] summary{margin-bottom:12px}
@media(max-width:640px){.qr-setup-card{grid-template-columns:1fr;text-align:center;padding:16px}.totp-qr{margin:0 auto;width:min(280px,100%)}.manual-totp{text-align:left}}

/* v1.0.4 - Mobiel zijmenu: altijd volledig bereikbaar */
@media(max-width:760px){
  .sidebar{
    height:100dvh;
    max-height:100dvh;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    overscroll-behavior:contain;
  }
  .sidebar-brand{
    flex:0 0 auto;
    padding-bottom:14px;
  }
  .sidebar nav{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    padding:0 2px 18px 0;
  }
  .sidebar nav::-webkit-scrollbar{width:4px}
  .sidebar nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:99px}
  .sidebar nav a{
    flex:0 0 auto;
    min-height:45px;
  }
  .sidebar-bottom{
    flex:0 0 auto;
    margin-top:0;
    padding:12px 8px calc(10px + env(safe-area-inset-bottom));
    background:var(--nav);
    position:relative;
    z-index:1;
  }
}


/* v1.1.9 - gegroepeerde, inklapbare zijbalk */
.sidebar-nav{
  display:flex;
  flex-direction:column;
  gap:7px!important;
}
.nav-group{
  border-bottom:1px solid rgba(255,255,255,.07);
  padding-bottom:6px;
}
.nav-group:last-child{border-bottom:0}
.nav-group-summary{
  list-style:none;
  display:flex;
  align-items:center;
  gap:9px;
  min-height:38px;
  padding:7px 10px;
  border-radius:10px;
  cursor:pointer;
  color:#869ab9;
  font-size:10px;
  font-weight:800;
  letter-spacing:.075em;
  text-transform:uppercase;
  user-select:none;
  transition:.18s ease;
}
.nav-group-summary::-webkit-details-marker{display:none}
.nav-group-summary::marker{display:none}
.nav-group-summary:hover{background:rgba(255,255,255,.045);color:#b9c7db}
.nav-group.active-group>.nav-group-summary{color:#b7c9e6}
.nav-group-icon{
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  color:#738aad;
}
.nav-group-icon .ui-icon{width:15px;height:15px}
.nav-group.active-group .nav-group-icon{color:#9ebcff}
.nav-group-chevron{
  margin-left:auto;
  width:17px;
  height:17px;
  display:grid;
  place-items:center;
  transition:transform .18s ease;
  color:#687d9d;
}
.nav-group-chevron .ui-icon{width:14px;height:14px}
.nav-group[open] .nav-group-chevron{transform:rotate(90deg)}
.nav-group-items{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:3px 0 2px 3px;
}
.sidebar .nav-group-items a{
  min-height:40px;
  padding:8px 10px;
  font-size:13px;
}
.sidebar .nav-group-items a .nav-ico{
  width:21px;
}
.sidebar .nav-group-items a .nav-ico .ui-icon{
  width:17px;
  height:17px;
}

@media(max-width:760px){
  .sidebar-nav{gap:6px!important}
  .nav-group-summary{
    min-height:43px;
    padding:9px 10px;
    font-size:11px;
  }
  .nav-group-items{padding-left:4px}
  .sidebar .nav-group-items a{
    min-height:46px;
    font-size:14px;
  }
}


/* v1.2.4 - wizard vaste verplichtingen */
.fixed-wizard{margin-bottom:18px;padding:0;overflow:hidden}
.fixed-wizard>summary{display:flex;align-items:center;gap:10px;justify-content:space-between;cursor:pointer;padding:18px 20px;font-size:18px;font-weight:800;list-style:none}
.fixed-wizard>summary::-webkit-details-marker{display:none}
.fixed-wizard>summary span{display:flex;align-items:center;gap:9px}
.fixed-wizard>summary small{font-size:13px;font-weight:500;color:var(--muted,#64748b)}
.fixed-wizard-body{padding:0 20px 20px}
.wizard-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:14px 0}
.fixed-candidate-list{display:grid;gap:10px}
.fixed-candidate{display:grid;grid-template-columns:34px minmax(0,1fr) 160px;gap:12px;align-items:center;border:1px solid #dbe3ef;border-radius:15px;padding:13px 14px;background:#fff;cursor:pointer;transition:.15s ease}
.fixed-candidate:hover{border-color:#a9b9d2;box-shadow:0 5px 16px rgba(15,23,42,.06)}
.fixed-candidate:has(.candidate-select:checked){border-color:#5b7cff;background:#f7f9ff;box-shadow:0 0 0 2px rgba(91,124,255,.08)}
.candidate-check input{width:21px;height:21px;accent-color:#3478eb}
.candidate-title-row{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.candidate-title-row strong{font-size:15px}
.candidate-compare{font-size:13px;color:#475569;margin-top:5px;line-height:1.35}
.candidate-meta{font-size:12px;color:#7b8798;margin-top:3px}
.candidate-amount>span{display:block;font-size:12px;color:#64748b;margin-bottom:5px;font-weight:700}
.money-input{display:flex;align-items:center;border:1px solid #ccd7e5;border-radius:10px;background:#fff;overflow:hidden}
.money-input span{padding-left:10px;color:#64748b;font-weight:700}
.money-input input{border:0!important;box-shadow:none!important;min-width:0;width:100%;padding:9px 10px 9px 6px!important;text-align:right;font-weight:800;background:transparent!important}
.fixed-wizard-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding-top:16px;border-top:1px solid #e5e7eb}
.inset-card{margin-top:16px;background:#f8fafc;border:1px dashed #cbd5e1;box-shadow:none}
.candidate-changed{border-left:4px solid #f59e0b}
.candidate-new{border-left:4px solid #3b82f6}
.candidate-temporary{background:#fffdf7}
@media(max-width:760px){
  .fixed-wizard>summary{align-items:flex-start;flex-direction:column}
  .fixed-candidate{grid-template-columns:30px minmax(0,1fr)}
  .candidate-amount{grid-column:2}
  .fixed-wizard-footer{align-items:stretch;flex-direction:column}
  .fixed-wizard-footer .btn{width:100%}
}


/* v1.2.8 - vaste inkomsten herkennen uit bankbijschrijvingen */
.candidate-name-input{
  min-width:220px;max-width:440px;font-weight:750;border:1px solid transparent;background:transparent;padding:4px 6px;border-radius:8px;color:inherit;
}
.candidate-name-input:focus{background:#fff;border-color:#bfd0ea;outline:none}
.income-candidate-controls{display:grid!important;grid-template-columns:auto minmax(105px,1fr);gap:5px 8px;align-items:center;min-width:245px}
.income-candidate-controls>span{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:#6b7a90;font-weight:700}
.income-candidate-controls select,.income-candidate-controls input[type=date]{min-height:34px}
@media(max-width:760px){
  .candidate-name-input{min-width:0;width:100%;max-width:none}
  .income-candidate-controls{grid-template-columns:1fr;min-width:0;width:100%}
  .income-candidate-controls>span{margin-top:5px}
}


/* =========================================================
   v1.2.9 - breed en compact Updatecentrum
   ========================================================= */
.updater-page{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(circle at top right,rgba(87,84,255,.11),transparent 34%),
    #f3f6fb;
  color:#152033;
}
.updater-shell{
  width:min(1240px,calc(100% - 40px));
  margin:0 auto;
  padding:28px 0 42px;
}
.updater-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  margin-bottom:20px;
}
.updater-title-wrap{
  display:flex;
  align-items:center;
  gap:16px;
  min-width:0;
}
.updater-brand{
  margin:0;
  flex:0 0 auto;
}
.updater-header h1{
  margin:0 0 4px;
  font-size:30px;
  line-height:1.05;
}
.updater-header p{
  margin:0;
  color:#718096;
}
.updater-version-box{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
}
.updater-version-box span{
  background:#fff;
  border:1px solid #dfe6f0;
  border-radius:999px;
  padding:9px 13px;
  box-shadow:0 5px 16px rgba(15,23,42,.045);
  font-size:13px;
  white-space:nowrap;
}
.updater-global-alert{
  margin:0 0 16px;
}
.updater-main-grid{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);
  gap:18px;
}
.updater-span-all{
  grid-column:1/-1;
}
.updater-main-card,
.updater-status-card,
.updater-install-card,
.updater-db-card{
  margin:0!important;
  text-align:left!important;
}
.updater-card-heading{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-bottom:16px;
}
.updater-card-heading h2{
  margin:0 0 3px;
}
.updater-card-heading p{
  margin:0;
  color:#718096;
}
.updater-step{
  width:36px;
  height:36px;
  border-radius:11px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  color:#fff;
  background:linear-gradient(135deg,#3478f6,#6259f5);
  font-weight:800;
}
.updater-step.secondary{
  background:#e8eef9;
  color:#31517e;
}
.updater-step.ready{
  background:#e7f7ef;
  color:#168354;
}
.updater-compact-info{
  margin:0 0 14px;
}
.updater-upload-form{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:end;
}
.updater-upload-form label{
  margin:0;
}
.updater-upload-form .btn{
  min-height:46px;
}
.updater-status-list{
  display:grid;
  gap:2px;
  margin-bottom:16px;
}
.updater-status-list>div{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:10px 0;
  border-bottom:1px solid #edf1f7;
}
.updater-status-list>div:last-child{
  border-bottom:0;
}
.updater-status-list span{
  color:#718096;
}
.status-good{color:#168354}
.status-warn{color:#b46a00}

.updater-package-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.updater-package-grid>div{
  background:#f7f9fc;
  border:1px solid #e4e9f1;
  border-radius:12px;
  padding:12px;
  min-width:0;
}
.updater-package-grid .wide{
  grid-column:1/-1;
}
.updater-package-grid span{
  display:block;
  color:#718096;
  font-size:12px;
  margin-bottom:4px;
}
.updater-package-grid strong{
  display:block;
  overflow-wrap:anywhere;
}
.updater-install-actions{
  display:flex;
  align-items:flex-end;
  gap:12px;
  flex-wrap:wrap;
  margin-top:16px;
}
.updater-install-actions>form:first-child{
  flex:1 1 540px;
}
.updater-confirm{
  display:flex!important;
  align-items:flex-start!important;
  gap:9px!important;
  margin:0 0 12px!important;
}
.updater-confirm input{
  width:auto!important;
  margin-top:3px!important;
  flex:0 0 auto;
}
.updater-db-pending{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  margin-bottom:14px;
}
.updater-db-pending>div{
  display:flex;
  gap:9px;
  align-items:flex-start;
  background:#f7f9fc;
  border:1px solid #e5eaf1;
  border-radius:11px;
  padding:11px;
}
.updater-db-pending span{
  color:#536174;
}
.updater-inline-action{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}
.updater-inline-action .updater-confirm{
  margin:0!important;
  flex:1 1 520px;
}
.updater-collapsible-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin-top:18px;
}
.updater-details{
  margin:0!important;
  padding:0!important;
  overflow:hidden;
}
.updater-details summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:18px 20px;
  user-select:none;
}
.updater-details summary::-webkit-details-marker{display:none}
.updater-details summary::marker{display:none}
.updater-details summary span:first-child{
  min-width:0;
}
.updater-details summary strong{
  display:block;
  font-size:17px;
}
.updater-details summary small{
  display:block;
  color:#718096;
  margin-top:3px;
  font-size:12px;
}
.updater-summary-arrow{
  font-size:30px;
  line-height:1;
  color:#8190a7;
  transition:transform .18s ease;
}
.updater-details[open] .updater-summary-arrow{
  transform:rotate(90deg);
}
.updater-details-content{
  border-top:1px solid #e8edf4;
  padding:18px 20px 20px;
}
.updater-divider{
  height:1px;
  border:0;
  background:#e8edf4;
  margin:20px 0;
}
.updater-log-details{
  margin-top:18px!important;
}
.updater-log{
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
  background:#0f172a;
  color:#e5e7eb;
  padding:16px;
  border-radius:12px;
  font-size:12px;
  line-height:1.5;
  margin:12px 0 0;
  /* Bewust geen eigen verticale scrollbar meer. */
  max-height:none;
  overflow:visible;
}
.updater-log-actions{
  margin-top:14px;
}
.updater-log-actions form{
  margin:0;
}
.updater-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-top:18px;
}
.updater-footer form{margin:0}
.updater-login{
  width:min(680px,100%);
  margin:54px auto 0;
}
.updater-login h2{margin-top:0}

@media(max-width:900px){
  .updater-shell{
    width:min(100% - 24px,1240px);
    padding-top:16px;
  }
  .updater-header{
    align-items:flex-start;
    flex-direction:column;
  }
  .updater-version-box{
    justify-content:flex-start;
  }
  .updater-main-grid,
  .updater-collapsible-grid{
    grid-template-columns:1fr;
  }
  .updater-span-all{
    grid-column:auto;
  }
  .updater-upload-form{
    grid-template-columns:1fr;
  }
  .updater-package-grid{
    grid-template-columns:1fr;
  }
  .updater-package-grid .wide{
    grid-column:auto;
  }
  .updater-db-pending{
    grid-template-columns:1fr;
  }
}

@media(max-width:560px){
  .updater-shell{
    width:100%;
    padding:10px 10px 28px;
  }
  .updater-header{
    padding:4px 4px 0;
    margin-bottom:14px;
  }
  .updater-title-wrap{
    gap:11px;
  }
  .updater-header h1{
    font-size:24px;
  }
  .updater-header p{
    font-size:13px;
  }
  .updater-brand{
    width:44px;
    height:44px;
  }
  .updater-version-box{
    width:100%;
  }
  .updater-version-box span{
    flex:1 1 auto;
    text-align:center;
  }
  .updater-main-grid,
  .updater-collapsible-grid{
    gap:10px;
  }
  .updater-collapsible-grid,
  .updater-log-details{
    margin-top:10px!important;
  }
  .updater-card-heading{
    gap:10px;
  }
  .updater-details summary{
    padding:16px;
  }
  .updater-details-content{
    padding:16px;
  }
  .updater-footer{
    flex-direction:column;
  }
  .updater-footer .btn,
  .updater-footer form,
  .updater-footer form .btn{
    width:100%;
  }
}


/* v1.3.0 - standaardbibliotheek vaste lasten en abonnementen */
.template-library-card{margin-bottom:18px}
.template-filter-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(180px,280px);
  gap:10px;
  margin-bottom:12px;
}
.template-filter-row:has(input:only-child){grid-template-columns:1fr}
.template-library{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  max-height:none;
  overflow:visible;
  padding-right:0;
}
.template-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0;
  padding:11px;
  border:1px solid #e3e8f0;
  border-radius:11px;
  background:#f9fbfd;
}
.template-item>div{min-width:0}
.template-item strong{
  display:block;
  font-size:13px;
  line-height:1.3;
}
.template-item small{
  display:block;
  margin-top:3px;
  color:#748196;
  line-height:1.25;
}
.template-item .btn{flex:0 0 auto}
.form-subsection{
  border:1px solid #dfe6f0;
  border-radius:12px;
  padding:14px;
  background:#f8fafc;
}
.form-subsection h3{margin:0 0 4px}
.form-subsection p{margin:0 0 12px}

@media(max-width:1000px){
  .template-library{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  .template-filter-row{grid-template-columns:1fr}
  .template-library{
    grid-template-columns:1fr;
    max-height:none;
    overflow:visible;
  }
}


/* v1.3.1 - geen geneste scrollvlakken in keuzebibliotheken */
.template-item.template-hidden{
  display:none !important;
}
.template-more-wrap{
  display:flex;
  justify-content:center;
  margin-top:12px;
}
.template-more-wrap .btn{
  min-width:170px;
}
html{
  scroll-behavior:auto;
}


/* =========================================================
   v1.3.2 - persoonlijke weergavemodellen
   ========================================================= */

.appearance-intro{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:18px;
  background:
    radial-gradient(circle at top right,rgba(91,92,240,.12),transparent 35%),
    var(--panel);
}
.appearance-intro-icon{
  width:54px;height:54px;border-radius:17px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,#5b5cf0,#8459ff);
  color:#fff;flex:0 0 auto;
}
.appearance-intro-icon .ui-icon{width:27px;height:27px}
.appearance-intro h2{margin:0 0 5px}
.appearance-intro p{margin:0;color:var(--muted);line-height:1.5}

.theme-choice-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.theme-choice{
  position:relative;
  display:block;
  color:var(--ink);
  background:var(--panel);
  border:2px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  cursor:pointer;
  box-shadow:var(--shadow);
  transition:.18s ease;
}
.theme-choice:hover{
  transform:translateY(-2px);
  border-color:#aebcf1;
}
.theme-choice.selected{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(47,111,237,.10),var(--shadow);
}
.theme-choice>input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.theme-preview{
  height:178px;
  display:grid;
  grid-template-columns:62px 1fr;
  border-bottom:1px solid rgba(120,136,160,.18);
  background:#f4f7fb;
  overflow:hidden;
}
.preview-sidebar{
  padding:12px 8px;
  background:#162034;
}
.preview-sidebar span{
  display:block;width:28px;height:28px;border-radius:8px;
  margin:0 auto 13px;background:linear-gradient(135deg,#4b85ff,#7b61ff);
}
.preview-sidebar i{
  display:block;height:9px;border-radius:5px;margin:9px 0;
  background:rgba(255,255,255,.18);
}
.preview-main{padding:10px;min-width:0}
.preview-topbar{
  display:flex;justify-content:space-between;align-items:center;
  height:22px;margin-bottom:9px
}
.preview-topbar span{width:44%;height:7px;border-radius:4px;background:#d4ddea}
.preview-topbar b{width:19px;height:19px;border-radius:50%;background:#dfe6f2}
.preview-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:8px}
.preview-metrics i{height:38px;border-radius:8px;background:#fff;border:1px solid #e0e6ef}
.preview-metrics i:nth-child(1){background:#eaf9f2}
.preview-metrics i:nth-child(2){background:#fff0f2}
.preview-metrics i:nth-child(3){background:#eef4ff}
.preview-metrics i:nth-child(4){background:#f4efff}
.preview-content{display:grid;grid-template-columns:1.45fr .75fr;gap:7px}
.preview-panel{height:75px;background:#fff;border:1px solid #e0e6ef;border-radius:9px;padding:8px}
.preview-panel span{display:block;height:6px;border-radius:4px;background:#e2e8f0;margin-bottom:8px}
.preview-panel span:nth-child(2){width:82%}
.preview-panel span:nth-child(3){width:62%}

.theme-choice-copy{padding:14px 15px 16px}
.theme-choice-title{display:flex;align-items:center;gap:10px;min-width:0}
.theme-choice-title>div{min-width:0}
.theme-choice-title strong{display:block;font-size:15px}
.theme-choice-title small{display:block;margin-top:2px;color:var(--muted);font-weight:500}
.theme-choice-icon{
  width:34px;height:34px;border-radius:11px;
  display:grid;place-items:center;
  background:#eef3ff;color:var(--accent);
  flex:0 0 auto;
}
.theme-choice-icon .ui-icon{width:18px;height:18px}
.theme-choice-copy p{margin:10px 0 0;color:var(--muted);font-size:12px;line-height:1.45}
.current-style-badge{
  margin-left:auto;
  background:#eaf7f0;color:#1f7a52;border:1px solid #bfe5d1;
  border-radius:99px;padding:4px 7px;font-size:10px;font-weight:800;
  white-space:nowrap;
}
.theme-check{
  position:absolute;right:10px;top:10px;
  width:28px;height:28px;border-radius:50%;
  display:none;place-items:center;
  background:var(--accent);color:#fff;
  box-shadow:0 5px 14px rgba(47,111,237,.28);
}
.theme-check .ui-icon{width:16px;height:16px}
.theme-choice.selected .theme-check{display:grid}

.appearance-savebar{
  position:sticky;
  bottom:14px;
  z-index:8;
  margin-top:18px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);
  box-shadow:0 12px 40px rgba(25,41,68,.16);
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.appearance-savebar>div:first-child strong{display:block}
.appearance-savebar>div:first-child span{display:block;color:var(--muted);font-size:12px;margin-top:3px}

/* Mini previews per style */
.preview-classic{background:#f3f6fb}
.preview-modern{background:linear-gradient(135deg,#f7f9ff,#f5f1ff)}
.preview-modern .preview-sidebar{background:linear-gradient(180deg,#172243,#1f3158)}
.preview-modern .preview-panel,.preview-modern .preview-metrics i{border-radius:13px;box-shadow:0 5px 14px rgba(55,70,120,.08)}
.preview-dark{background:#0e1729}
.preview-dark .preview-sidebar{background:#08101f}
.preview-dark .preview-topbar span,.preview-dark .preview-topbar b{background:#2d3a52}
.preview-dark .preview-panel,.preview-dark .preview-metrics i{background:#17233a;border-color:#263653}
.preview-dark .preview-panel span{background:#35445e}
.preview-minimal{background:#fff}
.preview-minimal .preview-sidebar{background:#f8fafc}
.preview-minimal .preview-sidebar i{background:#cbd5e1}
.preview-minimal .preview-sidebar span{background:#e2e8f0}
.preview-minimal .preview-panel,.preview-minimal .preview-metrics i{box-shadow:none;border-radius:3px;background:#fff}
.preview-cards{background:#eef2ff}
.preview-cards .preview-panel,.preview-cards .preview-metrics i{border-radius:15px;box-shadow:0 7px 18px rgba(68,65,160,.12)}
.preview-compact .preview-main{padding:7px}
.preview-compact .preview-metrics{gap:3px;margin-bottom:5px}
.preview-compact .preview-metrics i{height:28px;border-radius:4px}
.preview-compact .preview-content{gap:4px}
.preview-compact .preview-panel{height:87px;border-radius:4px;padding:6px}
.preview-tiles{background:linear-gradient(145deg,#f7f9ff,#fff5fb)}
.preview-tiles .preview-metrics i{height:44px;border-radius:13px}
.preview-tiles .preview-sidebar i{height:13px;border-radius:8px}

/* ---------------------------------------------------------
   THEME: CLASSIC
   Geen overrides: dit is exact de bestaande vormgeving.
   --------------------------------------------------------- */

/* ---------------------------------------------------------
   THEME: MODERN
   --------------------------------------------------------- */
body.theme-modern{
  --bg:#f4f6fc;
  --panel:#ffffff;
  --ink:#17213a;
  --muted:#6f7b91;
  --line:#dfe5f0;
  --nav:#15213f;
  --nav2:#2c3a68;
  --accent:#5b5cf0;
  --shadow:0 12px 35px rgba(39,52,92,.09);
  background:
    radial-gradient(circle at 90% 0,rgba(119,92,246,.09),transparent 26%),
    var(--bg);
}
.theme-modern .card,
.theme-modern .table-wrap,
.theme-modern .account-card{
  border-radius:20px;
}
.theme-modern .topbar{
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(14px);
}
.theme-modern .sidebar{
  background:linear-gradient(180deg,#15213f 0%,#101a32 100%);
}
.theme-modern .sidebar nav a.active{
  background:linear-gradient(135deg,#5365ed,#7b58ef);
  box-shadow:0 7px 18px rgba(80,82,220,.28);
}
.theme-modern .btn.primary{
  background:linear-gradient(135deg,#5068ef,#7559f2);
  border-color:transparent;
}
.theme-modern input,
.theme-modern select,
.theme-modern textarea{
  border-radius:12px;
  background:#fbfcff;
}

/* ---------------------------------------------------------
   THEME: DARK
   --------------------------------------------------------- */
body.theme-dark{
  --bg:#0b1220;
  --panel:#131d2f;
  --ink:#e8edf6;
  --muted:#94a3b8;
  --line:#26344b;
  --nav:#08101e;
  --nav2:#1b2b45;
  --accent:#6e7cff;
  --good:#43c894;
  --warn:#f0b84c;
  --bad:#ff6677;
  --shadow:0 10px 30px rgba(0,0,0,.24);
}
.theme-dark .topbar,
.theme-dark .mobile-nav,
.theme-dark .table-wrap,
.theme-dark .table th,
.theme-dark input,
.theme-dark select,
.theme-dark textarea,
.theme-dark .btn,
.theme-dark .appearance-savebar{
  background:#131d2f;
  color:var(--ink);
}
.theme-dark .topbar,
.theme-dark .mobile-nav{border-color:var(--line)}
.theme-dark .table th{background:#17243a}
.theme-dark .btn.primary{background:#6574f5;border-color:#6574f5;color:#fff}
.theme-dark .btn.danger{background:#331c25;border-color:#5a2935;color:#ff8794}
.theme-dark .alert{background:#172844;border-color:#2c4770;color:#acc8ff}
.theme-dark .alert.success{background:#123126;border-color:#245a45;color:#7cdfb3}
.theme-dark .alert.warn{background:#342a15;border-color:#654e21;color:#f6c867}
.theme-dark .alert.danger{background:#361c24;border-color:#63303b;color:#ff9eaa}
.theme-dark .metric-icon,
.theme-dark .theme-choice-icon{background:#202f4b}
.theme-dark .account-card,
.theme-dark .quick-action,
.theme-dark .forecast-card,
.theme-dark .fixed-candidate,
.theme-dark .template-item,
.theme-dark .form-subsection{
  background:#131d2f!important;
  border-color:var(--line)!important;
}
.theme-dark .money-input{background:#101a2b;border-color:var(--line)}
.theme-dark .money-input input{color:var(--ink)!important}
.theme-dark .candidate-name-input:focus{background:#101a2b}
.theme-dark .mobile-nav{box-shadow:0 -8px 30px rgba(0,0,0,.25)}
.theme-dark .mobile-nav a.active{background:#202f4b}

/* ---------------------------------------------------------
   THEME: MINIMAL
   --------------------------------------------------------- */
body.theme-minimal{
  --bg:#ffffff;
  --panel:#ffffff;
  --ink:#172033;
  --muted:#7c8798;
  --line:#e5e8ed;
  --nav:#ffffff;
  --nav2:#edf3ff;
  --accent:#2563eb;
  --shadow:none;
}
.theme-minimal .sidebar{
  color:#364152;
  border-right:1px solid var(--line);
}
.theme-minimal .sidebar-brand span,
.theme-minimal .sidebar-bottom small,
.theme-minimal .nav-group-summary,
.theme-minimal .nav-group-icon{color:#7b8798}
.theme-minimal .sidebar-bottom{border-color:var(--line)}
.theme-minimal .sidebar .nav-group-items a{color:#566174}
.theme-minimal .sidebar .nav-group-items a:hover,
.theme-minimal .sidebar .nav-group-items a.active{
  color:#174ea6;background:#edf3ff;
}
.theme-minimal .card,
.theme-minimal .table-wrap,
.theme-minimal .account-card,
.theme-minimal .quick-action,
.theme-minimal input,
.theme-minimal select,
.theme-minimal textarea{
  border-radius:6px;
  box-shadow:none;
}
.theme-minimal .brand-mark{
  background:#eaf0ff;color:#2b61c8;box-shadow:none;
}
.theme-minimal .topbar{
  box-shadow:none;
}
.theme-minimal .btn{
  border-radius:6px;
}
.theme-minimal .balance-hero{
  box-shadow:none;
  border:1px solid var(--line);
}

/* ---------------------------------------------------------
   THEME: CARDS
   --------------------------------------------------------- */
body.theme-cards{
  --bg:#eef2fb;
  --accent:#5e4ce6;
  --shadow:0 14px 36px rgba(43,50,98,.12);
}
.theme-cards .content{max-width:1380px}
.theme-cards .card,
.theme-cards .account-card,
.theme-cards .quick-action,
.theme-cards .table-wrap{
  border-radius:24px;
  border-color:rgba(203,212,228,.9);
  box-shadow:var(--shadow);
}
.theme-cards .grid{gap:22px}
.theme-cards .content{padding:30px}
.theme-cards .btn{border-radius:13px}
.theme-cards .metric-pro{padding:23px}
.theme-cards .metric-icon{width:45px;height:45px;border-radius:15px}

/* ---------------------------------------------------------
   THEME: COMPACT
   --------------------------------------------------------- */
body.theme-compact{
  --shadow:0 3px 12px rgba(25,41,68,.05);
}
.theme-compact .sidebar{width:215px;padding:14px 10px}
.theme-compact .main{margin-left:215px;width:calc(100% - 215px)}
.theme-compact .sidebar-brand{padding-bottom:14px}
.theme-compact .sidebar .nav-group-items a{min-height:34px;padding:6px 9px;font-size:12px}
.theme-compact .nav-group-summary{min-height:32px;padding:5px 8px;font-size:9px}
.theme-compact .topbar{height:68px;padding:0 20px}
.theme-compact .content{padding:16px;max-width:1600px}
.theme-compact .grid{gap:10px}
.theme-compact .card{padding:13px;border-radius:10px}
.theme-compact .section-title{margin:16px 0 8px}
.theme-compact .table th,
.theme-compact .table td{padding:8px 10px;font-size:12px}
.theme-compact .metric strong{font-size:21px}
.theme-compact .btn{padding:7px 10px}
.theme-compact input,
.theme-compact select,
.theme-compact textarea{padding:8px 9px}
@media(max-width:760px){
  .theme-compact .main{margin-left:0;width:100%}
  .theme-compact .sidebar{width:min(88vw,310px)}
}

/* ---------------------------------------------------------
   THEME: TILES / PICTOGRAMMEN
   --------------------------------------------------------- */
body.theme-tiles{
  --bg:#f5f7fc;
  --accent:#6247eb;
  --shadow:0 10px 26px rgba(36,48,83,.09);
}
.theme-tiles .sidebar{
  background:linear-gradient(180deg,#15213e,#101a31);
}
.theme-tiles .sidebar .nav-group-items a{
  border-radius:13px;
}
.theme-tiles .sidebar .nav-group-items a.active{
  background:linear-gradient(135deg,#5148df,#7b4bea);
}
.theme-tiles .nav-ico{
  width:30px!important;height:30px;
  display:grid!important;place-items:center;
  border-radius:9px;
  background:rgba(255,255,255,.08);
}
.theme-tiles .sidebar .nav-group-items a.active .nav-ico{
  background:rgba(255,255,255,.18);
}
.theme-tiles .card,
.theme-tiles .quick-action,
.theme-tiles .account-card{
  border-radius:18px;
}
.theme-tiles .quick-action{
  min-height:88px;
  align-items:center;
}
.theme-tiles .quick-action>span{
  width:48px;height:48px;border-radius:15px;
}
.theme-tiles .metric-icon{
  width:45px;height:45px;border-radius:15px;
}
.theme-tiles .btn.primary{
  background:linear-gradient(135deg,#5655ed,#7c4be9);
  border-color:transparent;
}

@media(max-width:1100px){
  .theme-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  .theme-choice-grid{grid-template-columns:1fr}
  .theme-preview{height:160px}
  .appearance-savebar{
    position:static;
    flex-direction:column;
    align-items:stretch;
  }
  .appearance-savebar .actions .btn{flex:1 1 100%}
}


/* =========================================================
   v1.3.3 - echte dashboardvoorbeelden in Weergave
   ========================================================= */

.appearance-studio{
  /* Het keuzegedeelte blijft bewust licht en neutraal,
     zodat alle modellen eerlijk naast elkaar te vergelijken zijn. */
  --studio-ink:#11203b;
  --studio-muted:#64748b;
  --studio-line:#dbe3ef;
  --studio-bg:#f7f9fd;
  color:var(--studio-ink);
  background:
    radial-gradient(circle at 88% -10%,rgba(91,92,240,.08),transparent 30%),
    var(--studio-bg);
  border:1px solid #dfe6f0;
  border-radius:22px;
  padding:22px;
  box-shadow:0 12px 34px rgba(25,41,68,.07);
}
.theme-dark .appearance-studio,
.theme-minimal .appearance-studio{
  color:var(--studio-ink);
}
.appearance-studio-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  margin-bottom:20px;
}
.appearance-studio-title{
  display:flex;
  align-items:center;
  gap:14px;
}
.appearance-studio-palette{
  width:50px;height:50px;border-radius:16px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,#5f66f4,#884fea);
  color:#fff;box-shadow:0 8px 20px rgba(99,83,235,.23);
}
.appearance-studio-palette .ui-icon{width:26px;height:26px}
.appearance-studio-title h2{margin:0 0 4px;font-size:25px;color:var(--studio-ink)}
.appearance-studio-title p{margin:0;color:var(--studio-muted);font-size:13px}
.appearance-studio-current{
  display:flex;align-items:center;gap:9px;
  background:#fff;border:1px solid var(--studio-line);
  border-radius:14px;padding:10px 13px;
  box-shadow:0 5px 14px rgba(28,42,70,.05);
}
.appearance-studio-current>span{
  width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:#eef2ff;color:#5b5cf0;
}
.appearance-studio-current .ui-icon{width:16px;height:16px}
.appearance-studio-current small{display:block;color:var(--studio-muted);font-size:9px}
.appearance-studio-current strong{display:block;font-size:12px;color:var(--studio-ink)}

.visual-theme-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:17px;
}
.visual-theme-card{
  position:relative;
  display:block;
  margin:0;
  overflow:hidden;
  border:2px solid #dce4ef;
  border-radius:18px;
  background:#fff;
  cursor:pointer;
  box-shadow:0 6px 20px rgba(25,41,68,.06);
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.visual-theme-card:hover{
  transform:translateY(-2px);
  border-color:#abb9e9;
  box-shadow:0 12px 27px rgba(30,45,75,.10);
}
.visual-theme-card.selected{
  border-color:#635df2;
  box-shadow:0 0 0 3px rgba(99,93,242,.11),0 12px 28px rgba(38,42,94,.10);
}
.visual-theme-card>input{
  position:absolute;opacity:0;pointer-events:none;
}
.visual-theme-check{
  position:absolute;right:14px;top:14px;
  width:30px;height:30px;border-radius:50%;
  display:none;place-items:center;
  color:#fff;background:#635df2;
  box-shadow:0 6px 16px rgba(90,80,228,.32);
}
.visual-theme-check .ui-icon{width:17px;height:17px}
.visual-theme-card.selected .visual-theme-check{display:grid}

.theme-demo{
  height:300px;
  display:grid;
  grid-template-columns:118px minmax(0,1fr);
  overflow:hidden;
  font-size:9px;
  line-height:1.2;
  background:#f5f7fb;
  color:#14213b;
}
.theme-demo *{box-sizing:border-box}
.demo-sidebar{
  padding:12px 8px;
  background:linear-gradient(180deg,#152343,#101b33);
  color:#dfe7f7;
}
.demo-logo{
  display:flex;align-items:center;gap:7px;
  margin-bottom:17px;font-size:8px;white-space:nowrap;
}
.demo-logo>span{
  width:25px;height:25px;border-radius:8px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,#477eff,#8159fb);
  color:#fff;font-size:13px;font-weight:800;
}
.demo-logo b{font-size:8px}
.demo-nav{
  display:flex;align-items:center;gap:7px;
  min-height:28px;padding:6px 7px;border-radius:7px;
  color:#aebdd5;margin-bottom:3px;
}
.demo-nav .ui-icon{width:12px;height:12px;flex:0 0 auto}
.demo-nav.active{
  background:linear-gradient(135deg,#4f5bf2,#7653ed);
  color:#fff;
}
.demo-screen{
  min-width:0;padding:10px;background:#f7f9fd;
}
.demo-top{
  display:flex;justify-content:space-between;align-items:center;
  height:28px;margin-bottom:9px;
}
.demo-search{
  width:58%;height:24px;border-radius:8px;padding:0 8px;
  background:#edf2f8;color:#7b8798;
  display:flex;align-items:center;gap:5px;
}
.demo-search .ui-icon{width:10px;height:10px}
.demo-person>span{
  width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;background:#6158ec;color:#fff;font-size:8px;font-weight:800;
}
.demo-welcome{
  display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px;
}
.demo-welcome strong{display:block;font-size:12px;color:#14213b}
.demo-welcome small{display:block;color:#718096;font-size:7px;margin-top:2px}
.demo-new{
  padding:7px 8px;border-radius:7px;
  background:#5d56ec;color:#fff;font-weight:800;font-size:7px;white-space:nowrap;
}
.demo-kpis{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin-bottom:8px;
}
.demo-kpi{
  min-width:0;padding:7px 6px;border-radius:9px;border:1px solid #e2e7ee;background:#fff;
}
.demo-kpi i{
  width:20px;height:20px;border-radius:7px;display:grid;place-items:center;margin-bottom:4px;
}
.demo-kpi i .ui-icon{width:11px;height:11px}
.demo-kpi span{display:block;font-size:6px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demo-kpi b{display:block;font-size:9px;margin-top:2px}
.demo-kpi.income{background:#eefbf5}.demo-kpi.income i{background:#23b781;color:#fff}
.demo-kpi.expense{background:#fff2f4}.demo-kpi.expense i{background:#f13e65;color:#fff}
.demo-kpi.savings{background:#eff5ff}.demo-kpi.savings i{background:#3a7cf5;color:#fff}
.demo-kpi.budget{background:#f5f0ff}.demo-kpi.budget i{background:#7a51ec;color:#fff}

.demo-lower{
  display:grid;grid-template-columns:.83fr 1.17fr;gap:7px;
}
.demo-actions,.demo-transactions{
  min-width:0;background:#fff;border:1px solid #e0e6ee;border-radius:9px;padding:7px;
}
.demo-panel-title{font-size:7px;font-weight:800;margin-bottom:6px}
.demo-actions .act{
  display:block;padding:5px 6px;border-radius:5px;margin-bottom:4px;font-size:6px;font-weight:800;
}
.demo-actions .act.income{background:#e7f9f0;color:#14835b}
.demo-actions .act.expense{background:#fff0f1;color:#c92948}
.demo-actions .act.purple{background:#f2ecff;color:#6847cf}
.demo-actions .act.blue{background:#eaf3ff;color:#2766c4}
.demo-transactions>div:not(.demo-panel-title){
  display:grid;grid-template-columns:19px minmax(0,1fr) auto;gap:5px;align-items:center;
  padding:4px 0;border-bottom:1px solid #eef1f5;
}
.demo-transactions>div:last-child{border-bottom:0}
.demo-transactions i{
  width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:#edf3ff;color:#4473d8;font-style:normal;
}
.demo-transactions span b{display:block;font-size:6px}
.demo-transactions span small{display:block;color:#8a95a6;font-size:5px;margin-top:1px}
.demo-transactions strong{font-size:6px;color:#e53a50;white-space:nowrap}
.demo-transactions strong.plus{color:#0d9b62}

.demo-compact-tabs{
  display:flex;gap:9px;border-bottom:1px solid #dbe3ee;padding:3px 0 5px;margin-bottom:2px;
}
.demo-compact-tabs span{font-size:6px;font-weight:800;color:#556479}
.demo-table>div{
  display:grid;grid-template-columns:40px 1.2fr .85fr auto;gap:6px;align-items:center;
  min-height:27px;border-bottom:1px solid #e7ebf1;
}
.demo-table b,.demo-table span,.demo-table em,.demo-table strong{font-size:6px}
.demo-table em{font-style:normal;color:#758197}
.demo-table strong{color:#e03d4f}.demo-table strong.plus{color:#0c9960}

.demo-tile-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:8px;
}
.demo-tile-grid>div{
  min-height:58px;border-radius:10px;padding:8px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  border:1px solid #e0e7f0;background:#fff;
}
.demo-tile-grid>div:nth-child(1){background:#eaf9f2}
.demo-tile-grid>div:nth-child(2){background:#fff0ec}
.demo-tile-grid>div:nth-child(3){background:#f1edff}
.demo-tile-grid>div:nth-child(4){background:#eaf4ff}
.demo-tile-grid>div:nth-child(5){background:#e9faf7}
.demo-tile-grid>div:nth-child(6){background:#fff5df}
.demo-tile-grid i{width:24px;height:24px;border-radius:7px;background:rgba(255,255,255,.75);display:grid;place-items:center;color:#4b5fd3}
.demo-tile-grid .ui-icon{width:13px;height:13px}
.demo-tile-grid b{font-size:6px}

/* Miniature theme differences */
.theme-demo-classic .demo-screen{background:#f4f6fb}

.theme-demo-modern{
  background:linear-gradient(145deg,#f6f8ff,#f9f4ff);
}
.theme-demo-modern .demo-sidebar{background:linear-gradient(180deg,#15213d,#19294d)}
.theme-demo-modern .demo-screen{background:linear-gradient(145deg,#f8faff,#f7f4ff)}
.theme-demo-modern .demo-kpi,.theme-demo-modern .demo-actions,.theme-demo-modern .demo-transactions{border-radius:13px;box-shadow:0 5px 12px rgba(52,62,112,.08)}
.theme-demo-modern .demo-new{background:linear-gradient(135deg,#5967ee,#8154ed)}

.theme-demo-dark{background:#08101d;color:#e7edf7}
.theme-demo-dark .demo-sidebar{background:#060c16}
.theme-demo-dark .demo-screen{background:#0d1727}
.theme-demo-dark .demo-search{background:#152238;color:#8fa0b8}
.theme-demo-dark .demo-person>span{background:#6d5df4}
.theme-demo-dark .demo-welcome strong{color:#fff}
.theme-demo-dark .demo-welcome small{color:#8292aa}
.theme-demo-dark .demo-kpi{border-color:#273650;color:#e9eef7}
.theme-demo-dark .demo-kpi.income{background:#0e2b25}
.theme-demo-dark .demo-kpi.expense{background:#321a25}
.theme-demo-dark .demo-kpi.savings{background:#142641}
.theme-demo-dark .demo-kpi.budget{background:#251c3e}
.theme-demo-dark .demo-actions,.theme-demo-dark .demo-transactions{background:#142036;border-color:#273650;color:#eef3fb}
.theme-demo-dark .demo-transactions>div:not(.demo-panel-title){border-color:#25344d}
.theme-demo-dark .demo-transactions span small{color:#8191aa}

.theme-demo-minimal .demo-sidebar{background:#fff;color:#5f6b7a;border-right:1px solid #e2e7ee}
.theme-demo-minimal .demo-logo b{color:#192335}
.theme-demo-minimal .demo-logo>span{background:#e9eef7;color:#315b9a}
.theme-demo-minimal .demo-nav{color:#657184}
.theme-demo-minimal .demo-nav.active{background:#eaf1ff;color:#2e63b9}
.theme-demo-minimal .demo-screen{background:#fff}
.theme-demo-minimal .demo-kpi,.theme-demo-minimal .demo-actions,.theme-demo-minimal .demo-transactions{border-radius:3px;box-shadow:none;background:#fff}
.theme-demo-minimal .demo-new{background:#fff;color:#2c61bd;border:1px solid #cdd9ec}
.theme-demo-minimal .demo-kpi.income,.theme-demo-minimal .demo-kpi.expense,.theme-demo-minimal .demo-kpi.savings,.theme-demo-minimal .demo-kpi.budget{background:#fff}

.theme-demo-cards .demo-screen{
  background:
    linear-gradient(180deg,rgba(136,111,224,.13) 0 57px,transparent 57px),
    #f6f7fc;
}
.theme-demo-cards .demo-kpi,.theme-demo-cards .demo-actions,.theme-demo-cards .demo-transactions{
  border-radius:14px;box-shadow:0 6px 14px rgba(49,50,100,.10);
}
.theme-demo-cards .demo-welcome{padding:4px 2px}
.theme-demo-cards .demo-new{border-radius:11px}

.theme-demo-compact{
  grid-template-columns:102px minmax(0,1fr);
}
.theme-demo-compact .demo-sidebar{padding:8px 6px}
.theme-demo-compact .demo-nav{min-height:23px;padding:4px 5px;margin-bottom:1px}
.theme-demo-compact .demo-screen{padding:7px}
.theme-demo-compact .demo-top{height:22px;margin-bottom:5px}
.theme-demo-compact .demo-welcome{margin-bottom:5px}
.theme-demo-compact .demo-kpis{gap:3px;margin-bottom:5px}
.theme-demo-compact .demo-kpi{padding:4px;border-radius:4px}
.theme-demo-compact .demo-kpi i{display:none}
.theme-demo-compact .demo-kpi span{font-size:5px}
.theme-demo-compact .demo-kpi b{font-size:7px}
.theme-demo-compact .demo-new{padding:5px;border-radius:4px}

.theme-demo-tiles .demo-sidebar{background:linear-gradient(180deg,#14223e,#101931)}
.theme-demo-tiles .demo-nav.active{background:linear-gradient(135deg,#5350e8,#8148e2)}
.theme-demo-tiles .demo-screen{background:linear-gradient(145deg,#f8faff,#fff7fb)}
.theme-demo-tiles .demo-welcome{margin-bottom:6px}
.theme-demo-tiles .demo-kpis{display:none}
.theme-demo-tiles .demo-new{background:linear-gradient(135deg,#5558ed,#8448e3)}

.visual-theme-caption{
  min-height:95px;
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:13px 14px;
  background:#fff;
  color:var(--studio-ink);
}
.visual-theme-number{
  flex:0 0 auto;
  width:29px;height:29px;border-radius:50%;
  display:grid;place-items:center;
  background:#665df2;color:#fff;font-weight:900;font-size:12px;
}
.visual-theme-copy{min-width:0}
.visual-theme-name{display:flex;align-items:center;gap:7px}
.visual-theme-name strong{font-size:15px;color:var(--studio-ink)}
.visual-theme-name span{
  background:#eaf7f0;border:1px solid #bce1ce;color:#19704e;
  border-radius:999px;padding:3px 6px;font-size:8px;font-weight:800;
}
.visual-theme-copy>small{display:block;margin-top:2px;color:#68758a;font-size:10px}
.visual-theme-copy p{margin:6px 0 0;color:#6b7789;font-size:10px;line-height:1.35}

.appearance-studio-save{
  position:sticky;bottom:12px;z-index:9;
  margin-top:18px;
  display:flex;align-items:center;justify-content:space-between;gap:15px;
  padding:13px 15px;
  background:rgba(255,255,255,.96);
  border:1px solid #d9e2ee;border-radius:15px;
  box-shadow:0 12px 32px rgba(26,39,66,.13);
  backdrop-filter:blur(12px);
}
.appearance-studio-save strong{display:block;color:var(--studio-ink)}
.appearance-studio-save span{display:block;margin-top:2px;color:var(--studio-muted);font-size:10px}
.appearance-studio-save .btn{
  color:#28344a;background:#fff;border-color:#ccd7e6;
}
.appearance-studio-save .btn.primary{
  color:#fff;background:linear-gradient(135deg,#5b62f1,#774fe7);border-color:transparent;
}

/* =========================================================
   Sterkere verschillen op de echte applicatie
   ========================================================= */

/* Modern: kleurkaarten zoals het concept */
.theme-modern .dashboard-metrics .metric-pro:nth-child(1){
  background:linear-gradient(145deg,#effbf6,#ffffff);
  border-color:#ccebdd;
}
.theme-modern .dashboard-metrics .metric-pro:nth-child(2){
  background:linear-gradient(145deg,#fff1f3,#ffffff);
  border-color:#f3d0d7;
}
.theme-modern .dashboard-metrics .metric-pro:nth-child(3){
  background:linear-gradient(145deg,#eef5ff,#ffffff);
  border-color:#cfdef7;
}
.theme-modern .dashboard-metrics .metric-pro:nth-child(4){
  background:linear-gradient(145deg,#f5efff,#ffffff);
  border-color:#dfd0f5;
}
.theme-modern .quick-action:nth-child(3n+1)>span{background:#e5f8ef;color:#169767}
.theme-modern .quick-action:nth-child(3n+2)>span{background:#fff0f2;color:#d73b58}
.theme-modern .quick-action:nth-child(3n)>span{background:#f0ebff;color:#694fe1}

/* Dark: meer zoals het donkere voorbeeld, met duidelijke gekleurde KPI's */
.theme-dark .dashboard-metrics .metric-pro:nth-child(1){
  background:linear-gradient(145deg,#113228,#16283a)!important;
  border-color:#225143!important;
}
.theme-dark .dashboard-metrics .metric-pro:nth-child(2){
  background:linear-gradient(145deg,#3a1d27,#1a2638)!important;
  border-color:#5b2a38!important;
}
.theme-dark .dashboard-metrics .metric-pro:nth-child(3){
  background:linear-gradient(145deg,#162c4a,#17273a)!important;
  border-color:#284b74!important;
}
.theme-dark .dashboard-metrics .metric-pro:nth-child(4){
  background:linear-gradient(145deg,#291f45,#192638)!important;
  border-color:#47376f!important;
}
.theme-dark .balance-hero{
  background:linear-gradient(135deg,#102742,#162c4d 48%,#24204c);
  box-shadow:0 18px 45px rgba(0,0,0,.28);
}
.theme-dark .quick-action>span{background:#203452;color:#9bb9ff}

/* Minimal: extra helder en vrijwel zonder decoratie */
.theme-minimal .balance-hero{
  background:#fff;
  color:#172033;
  border:1px solid #e3e7ec;
  border-radius:7px;
}
.theme-minimal .balance-hero .hero-note,
.theme-minimal .balance-hero .eyebrow,
.theme-minimal .balance-hero-stats span{color:#748091}
.theme-minimal .balance-hero-stats{border-color:#e5e8ed}
.theme-minimal .hero-action{
  background:#fff;border:1px solid #ccd8e8;color:#245da9;
}
.theme-minimal .dashboard-metrics .metric-icon{
  background:#f5f7fa!important;color:#4d5f78!important;
}
.theme-minimal .quick-action>span{background:#f5f7fa;color:#4f6078}

/* Cards: meer prominent, zachte headerkleur en grotere kaarten */
.theme-cards .balance-hero{
  background:
    radial-gradient(circle at 85% 5%,rgba(255,255,255,.28),transparent 24%),
    linear-gradient(135deg,#5966df,#8060df);
  border-radius:28px;
}
.theme-cards .dashboard-metrics .metric-pro{
  min-height:130px;
  display:flex;
  align-items:center;
}
.theme-cards .account-card{min-height:145px}

/* Compact: beperk verticale hoogte nog sterker */
.theme-compact .balance-hero{
  padding:16px 18px;
  border-radius:10px;
  margin-bottom:10px;
}
.theme-compact .hero-balance{font-size:30px}
.theme-compact .balance-hero-stats{margin-top:12px;padding-top:10px}
.theme-compact .dashboard-metrics .metric-pro{
  min-height:auto;padding:10px;
}
.theme-compact .metric-icon{width:31px;height:31px;border-radius:8px}
.theme-compact .account-card{padding:11px;border-radius:8px}
.theme-compact .account-balance{font-size:20px;margin:3px 0 7px}
.theme-compact .quick-action{padding:8px;border-radius:8px}

/* Pictogrammen: kleurrijke tegels */
.theme-tiles .dashboard-metrics .metric-pro{
  text-align:center;
  display:block;
  min-height:145px;
  padding:20px 12px;
}
.theme-tiles .dashboard-metrics .metric-icon{
  width:54px;height:54px;border-radius:17px;margin:0 auto 10px;
}
.theme-tiles .dashboard-metrics .metric-icon .ui-icon{width:28px;height:28px}
.theme-tiles .quick-action{
  display:block;text-align:center;padding:18px 12px;min-height:125px;
}
.theme-tiles .quick-action>span{
  width:54px;height:54px;margin:0 auto 10px;border-radius:17px;
}
.theme-tiles .quick-action>span .ui-icon{width:27px;height:27px}
.theme-tiles .quick-action:nth-child(6n+1){background:#eaf9f1}
.theme-tiles .quick-action:nth-child(6n+2){background:#fff0ec}
.theme-tiles .quick-action:nth-child(6n+3){background:#f1edff}
.theme-tiles .quick-action:nth-child(6n+4){background:#eaf4ff}
.theme-tiles .quick-action:nth-child(6n+5){background:#e8faf8}
.theme-tiles .quick-action:nth-child(6n){background:#fff6df}

@media(max-width:1200px){
  .visual-theme-grid{grid-template-columns:1fr}
  .theme-demo{height:320px}
}
@media(max-width:760px){
  .appearance-studio{padding:12px;border-radius:15px}
  .appearance-studio-head{align-items:flex-start;flex-direction:column}
  .appearance-studio-title h2{font-size:21px}
  .appearance-studio-current{width:100%}
  .visual-theme-grid{gap:12px}
  .theme-demo{height:245px;grid-template-columns:78px minmax(0,1fr)}
  .demo-sidebar{padding:8px 5px}
  .demo-logo b,.demo-nav span{display:none}
  .demo-logo{justify-content:center}
  .demo-logo>span{margin:auto}
  .demo-nav{justify-content:center}
  .demo-screen{padding:7px}
  .demo-new{display:none}
  .demo-kpi{padding:5px 4px}
  .demo-kpi i{width:17px;height:17px}
  .demo-lower{grid-template-columns:1fr}
  .demo-actions{display:none}
  .demo-transactions{height:91px;overflow:hidden}
  .theme-demo-compact{grid-template-columns:70px minmax(0,1fr)}
  .demo-table>div{grid-template-columns:32px 1fr auto}
  .demo-table em{display:none}
  .appearance-studio-save{
    position:static;
    align-items:stretch;
    flex-direction:column;
  }
  .appearance-studio-save .actions{width:100%}
  .appearance-studio-save .actions .btn{flex:1 1 100%}
}


/* =========================================================
   v1.3.4 - Opslag & back-up
   ========================================================= */
.storage-hero{display:flex;gap:16px;align-items:center;background:linear-gradient(135deg,var(--panel),rgba(91,92,240,.07));}
.storage-hero-icon{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,#4384f5,#6c58ee);color:#fff;flex:0 0 auto;box-shadow:0 9px 22px rgba(66,91,203,.22)}
.storage-hero-icon .ui-icon{width:29px;height:29px}.storage-hero h2{margin:0 0 4px}.storage-hero p{margin:0;color:var(--muted);line-height:1.5}
.storage-provider-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0 18px}.storage-provider-grid>div{border:1px solid var(--line);border-radius:14px;padding:14px;background:rgba(248,250,253,.65)}
.storage-provider-grid i{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#edf3ff;color:#426fd5;font-style:normal;font-weight:900;margin-bottom:9px}.storage-provider-grid i .ui-icon{width:20px;height:20px}.storage-provider-grid .provider-g{background:#eef5ff;color:#2768d5}.storage-provider-grid .provider-ms{background:#eef9f6;color:#087a63}.storage-provider-grid strong,.storage-provider-grid span{display:block}.storage-provider-grid span{font-size:11px;color:var(--muted);margin-top:4px;line-height:1.4}
.storage-connection-list{display:grid;gap:9px}.storage-connection-row{display:grid;grid-template-columns:42px minmax(0,1fr) auto auto;gap:11px;align-items:center;border:1px solid var(--line);border-radius:13px;padding:11px}.storage-connection-icon{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:#eef3ff;color:var(--accent)}.storage-connection-icon .ui-icon{width:20px;height:20px}.storage-connection-copy strong,.storage-connection-copy span{display:block}.storage-connection-copy span{font-size:11px;color:var(--muted);margin-top:2px}.storage-connection-row .actions{justify-content:flex-end}.storage-connection-row form{margin:0}
.provider-fields{display:contents}.backup-actions-grid{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:15px}.backup-actions-grid form{margin:0}.cron-box{border:1px solid var(--line);border-radius:13px;padding:13px;margin:12px 0;background:rgba(247,249,253,.7)}.cron-box p{font-size:12px;color:var(--muted);line-height:1.5}.cron-box code{display:block;overflow-wrap:anywhere;padding:9px;border-radius:9px;background:rgba(227,234,246,.65);font-size:11px;margin-bottom:10px}.storage-help h3{margin-bottom:5px}.storage-help p{color:var(--muted);line-height:1.5}
.theme-dark .storage-provider-grid>div,.theme-dark .cron-box{background:#131d2f}.theme-dark .cron-box code{background:#101a2b}.theme-minimal .storage-provider-grid>div,.theme-minimal .storage-connection-row{border-radius:6px}
@media(max-width:1000px){.storage-provider-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.storage-connection-row{grid-template-columns:42px minmax(0,1fr) auto}.storage-connection-row .actions{grid-column:2/-1;justify-content:flex-start}}
@media(max-width:650px){.storage-hero{align-items:flex-start}.storage-provider-grid{grid-template-columns:1fr 1fr}.storage-connection-row{grid-template-columns:38px minmax(0,1fr)}.storage-connection-row>.pill{grid-column:2}.storage-connection-row .actions{grid-column:1/-1}.storage-provider-grid span{font-size:10px}}


/* =========================================================
   v1.3.5 - Uitgavenpotjes / reserveringspotjes
   ========================================================= */
.pot-explainer{
  display:flex;align-items:flex-start;gap:13px;
  margin-bottom:18px;padding:15px 17px;
  border:1px solid #cbdcf8;border-radius:15px;
  background:linear-gradient(135deg,#eef5ff,#f7faff);
  color:#24415f;
}
.pot-explainer-icon{
  width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
  background:#fff;box-shadow:0 4px 13px rgba(31,60,100,.09);font-size:21px;flex:0 0 auto;
}
.pot-explainer strong{display:block;margin-bottom:4px}
.pot-explainer span{display:block;font-size:13px;line-height:1.45;color:#52708f}

.pot-toolbar{
  display:flex;justify-content:space-between;align-items:flex-end;gap:16px;
  margin:25px 0 12px;
}
.pot-toolbar h2{margin:0 0 4px}
.pot-toolbar p{margin:0;color:var(--muted)}

.expense-pot-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.expense-pot-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:18px;
  padding:17px;
  box-shadow:var(--shadow);
}
.expense-pot-card.inactive{opacity:.62}
.expense-pot-head{
  display:flex;justify-content:space-between;gap:10px;align-items:flex-start;
}
.expense-pot-title{display:flex;align-items:center;gap:10px;min-width:0}
.expense-pot-title>div{min-width:0}
.expense-pot-title strong{display:block;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.expense-pot-title small{display:block;color:var(--muted);font-size:10px;margin-top:2px}
.expense-pot-emoji{
  width:42px;height:42px;border-radius:13px;
  display:grid;place-items:center;background:#f0f4ff;font-size:20px;flex:0 0 auto;
}
.pot-edit{
  width:31px;height:31px;border-radius:10px;
  display:grid;place-items:center;color:var(--muted);border:1px solid var(--line);background:var(--panel);
}
.pot-edit .ui-icon{width:15px;height:15px}
.expense-pot-money{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;margin-top:17px;
}
.expense-pot-money div{
  padding:9px;border-radius:10px;background:rgba(120,140,170,.07);min-width:0;
}
.expense-pot-money span{display:block;color:var(--muted);font-size:9px;margin-bottom:3px}
.expense-pot-money strong{font-size:13px;white-space:nowrap}
.pot-progress{
  height:8px;border-radius:999px;background:#e6ebf2;overflow:hidden;margin-top:14px;
}
.pot-progress span{
  display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,#3e82f7,#6558ef);
}
.pot-progress.over span{background:linear-gradient(90deg,#ef7a42,#df3f55)}
.pot-progress-note{font-size:9px;color:var(--muted);margin:6px 0 12px}
.pot-book-button{width:100%}

.pot-form-grid{margin-top:20px}
.pot-danger-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.pot-danger-actions form{margin:0}

.pot-method-list{display:grid;gap:10px}
.pot-method-list>div{
  display:flex;align-items:center;gap:10px;padding:11px;border:1px solid var(--line);
  border-radius:12px;background:rgba(120,140,170,.05);
}
.pot-method-list>div>span{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:var(--panel);font-size:17px;flex:0 0 auto;
}
.pot-method-list strong{display:block}
.pot-method-list small{display:block;color:var(--muted);margin-top:2px;line-height:1.35}

.pot-book-modal[hidden]{display:none!important}
.pot-book-modal{
  position:fixed;inset:0;z-index:1000;
  display:grid;place-items:center;padding:20px;
  background:rgba(8,16,30,.54);
  backdrop-filter:blur(4px);
}
.pot-book-dialog{
  position:relative;width:min(680px,100%);max-height:90vh;overflow:auto;
  background:var(--panel);color:var(--ink);border:1px solid var(--line);
  border-radius:20px;padding:22px;box-shadow:0 28px 80px rgba(0,0,0,.28);
}
.pot-book-dialog h2{margin-top:0}
.pot-modal-close{
  position:absolute;right:13px;top:12px;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line);background:var(--panel);color:var(--ink);font-size:22px;cursor:pointer;
}

.receipt-expense-box{
  margin-top:5px;padding:14px;border:1px solid #cfe0f7;border-radius:13px;
  background:#f5f9ff;
}
.receipt-expense-box .check-row span strong{display:block}
.receipt-expense-box .check-row span small{display:block;color:#6d7f95;margin-top:2px}

.hero-pot-note{
  margin-top:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,.18);
  font-size:11px;color:rgba(255,255,255,.76);
}

.theme-dark .pot-explainer{background:#13243c;border-color:#2d4b72;color:#cfe0fb}
.theme-dark .pot-explainer span{color:#9eb5d3}
.theme-dark .expense-pot-emoji{background:#202f4b}
.theme-dark .receipt-expense-box{background:#15253d;border-color:#2c466b}

@media(max-width:1050px){
  .expense-pot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  .pot-toolbar{align-items:stretch;flex-direction:column}
  .pot-toolbar .actions{width:100%}
  .pot-toolbar .actions>*{flex:1 1 100%}
  .expense-pot-grid{grid-template-columns:1fr}
  .expense-pot-money{grid-template-columns:1fr 1fr}
  .expense-pot-money div:last-child{grid-column:1/-1}
  .pot-book-dialog{padding:18px 14px}
}


/* =========================================================
   v1.3.6 - compacte opslagkiezer, iCloud-uitleg en downloads
   ========================================================= */
.storage-compact-page{display:grid;gap:14px}
.storage-compact-hero{
  display:flex;align-items:center;gap:14px;
  padding:16px 18px;border:1px solid var(--line);border-radius:18px;
  background:linear-gradient(135deg,var(--panel),rgba(91,92,240,.07));
  box-shadow:var(--shadow);
}
.storage-compact-hero h2{margin:0 0 4px}
.storage-compact-hero p{margin:0;color:var(--muted);font-size:12px;line-height:1.45}

.storage-top-grid{
  display:grid;grid-template-columns:1.15fr .85fr;gap:14px;
}
.storage-compact-defaults,.storage-download-card{margin:0}
.storage-compact-title{margin-bottom:12px}
.storage-compact-title strong{display:block;font-size:16px}
.storage-compact-title span{display:block;color:var(--muted);font-size:11px;margin-top:3px;line-height:1.4}

.storage-select-row{
  display:grid;grid-template-columns:190px minmax(0,1fr);align-items:center;gap:12px;
  margin-bottom:9px;
}
.storage-select-row>span{
  display:flex;align-items:center;gap:8px;font-weight:800;font-size:12px;
}
.storage-select-row>span .ui-icon{width:17px;height:17px;color:var(--accent)}
.storage-select-row select{margin:0}

.storage-auto-details{
  border-top:1px solid var(--line);
  margin-top:11px;padding-top:10px;
}
.storage-auto-details summary{
  cursor:pointer;font-weight:800;font-size:12px;color:var(--muted);
}
.storage-auto-fields{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px;
}
.storage-auto-fields .check-row{grid-column:1/-1}
.storage-save-defaults{margin-top:10px}

.my-download-actions{display:grid;gap:8px}
.my-download-actions form{margin:0}
.storage-download-button{
  width:100%;display:grid;grid-template-columns:38px minmax(0,1fr) 20px;
  align-items:center;gap:10px;text-align:left;
  padding:10px 11px;border:1px solid var(--line);border-radius:12px;
  background:var(--panel);color:var(--ink);cursor:pointer;
}
.storage-download-button:hover{border-color:#aabce9;background:rgba(73,111,216,.035)}
.storage-download-button>i{
  width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  background:#edf3ff;color:#386dd3;font-style:normal;
}
.storage-download-button>i .ui-icon{width:19px;height:19px}
.storage-download-button>span strong{display:block;font-size:12px}
.storage-download-button>span small{display:block;color:var(--muted);font-size:9px;margin-top:2px;line-height:1.35}
.storage-download-button>.ui-icon{width:17px;height:17px;color:var(--muted)}
.storage-download-button.secondary>i{background:#f1edff;color:#6a50dc}

.storage-provider-card{margin:0}
.storage-icon-menu{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;
}
.storage-icon-choice{
  min-height:102px;padding:10px 6px;border:1px solid var(--line);border-radius:14px;
  background:var(--panel);color:var(--ink);cursor:pointer;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
}
.storage-icon-choice:hover,.storage-icon-choice.active{
  border-color:#7d8cf1;box-shadow:0 0 0 3px rgba(91,92,240,.09);
}
.storage-icon-choice i{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:#edf3ff;color:#3e6dd1;font-style:normal;font-weight:900;font-size:16px;
}
.storage-icon-choice i .ui-icon{width:20px;height:20px}
.storage-icon-choice.google i{background:#eef5ff;color:#2868d3}
.storage-icon-choice.microsoft i{background:#eef9f6;color:#087864}
.storage-icon-choice.icloud i{background:linear-gradient(135deg,#eaf6ff,#f2efff);color:#4772d8}
.storage-icon-choice strong{font-size:11px}
.storage-icon-choice small{font-size:9px;color:var(--muted)}

.storage-provider-info{
  display:flex;gap:12px;align-items:flex-start;
  margin-top:12px;padding:13px;border:1px solid #cadcf7;border-radius:13px;
  background:#f5f9ff;
}
.storage-provider-info[hidden]{display:none!important}
.storage-info-icon{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:#fff;color:#4773d6;flex:0 0 auto;
}
.storage-info-icon .ui-icon{width:20px;height:20px}
.storage-provider-info strong{display:block}
.storage-provider-info p{margin:4px 0 0;color:#5b718c;font-size:11px;line-height:1.45}
.storage-provider-info .actions{margin-top:10px}
.storage-provider-info .actions form{margin:0}

.storage-connection-form-wrap{
  margin-top:12px;border:1px solid var(--line);border-radius:14px;
  padding:14px;background:rgba(248,250,253,.75);
}
.storage-connection-form-wrap[hidden]{display:none!important}
.storage-connection-form-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px;
}
.storage-connection-form-head strong{display:block;font-size:15px}
.storage-connection-form-head span{display:block;color:var(--muted);font-size:10px;margin-top:2px}
.storage-form-close{
  width:30px;height:30px;border-radius:50%;border:1px solid var(--line);
  background:var(--panel);color:var(--ink);font-size:19px;cursor:pointer;
}
.storage-compact-form .provider-fields{
  grid-column:1/-1;
  display:none;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.storage-form-tip,.storage-oauth-help{
  grid-column:1/-1;
  padding:10px 11px;border-radius:10px;background:#f0f5ff;color:#526d8d;
  font-size:10px;line-height:1.45;
}
.storage-oauth-help strong,.storage-oauth-help span{display:block}
.storage-oauth-help code{
  display:block;margin:6px 0;padding:7px;border-radius:7px;
  background:#fff;overflow-wrap:anywhere;color:#334a69;
}

.storage-existing-title{
  margin:16px 0 8px;font-size:12px;font-weight:900;color:var(--muted);
}
.storage-compact-connections{display:grid;gap:7px}
.storage-mini-connection{
  display:grid;grid-template-columns:38px minmax(0,1fr) auto auto;
  align-items:center;gap:10px;padding:9px 10px;
  border:1px solid var(--line);border-radius:12px;background:var(--panel);
}
.storage-mini-icon{
  width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  background:#eef3ff;color:#416dcc;font-weight:900;
}
.storage-mini-icon .ui-icon{width:19px;height:19px}
.storage-mini-copy strong{display:block;font-size:12px}
.storage-mini-copy span{display:block;font-size:9px;color:var(--muted);margin-top:2px}
.storage-mini-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.storage-mini-actions form{margin:0}
.storage-mini-actions .btn{padding:7px 9px;font-size:10px}

.storage-migrate-compact{
  display:flex;justify-content:space-between;align-items:center;gap:15px;margin:0;
}
.storage-migrate-compact strong,.storage-migrate-compact span{display:block}
.storage-migrate-compact>div span{color:var(--muted);font-size:10px;margin-top:2px}

.storage-history{margin:0;padding:0!important;overflow:hidden}
.storage-history>summary,.storage-system-backup>summary{
  cursor:pointer;padding:14px 16px;font-weight:900;list-style:none;
}
.storage-history>summary::-webkit-details-marker,.storage-system-backup>summary::-webkit-details-marker{display:none}
.storage-history .table-wrap{border:0;border-top:1px solid var(--line);border-radius:0}
.storage-system-backup{margin:0;padding:0!important}
.storage-system-backup-body{padding:0 16px 16px}
.storage-system-backup-body>p{color:var(--muted);font-size:11px;line-height:1.45}
.storage-system-backup-body form{margin:0}
.cron-box.compact{margin-top:12px}
.cron-box.compact>summary{cursor:pointer;font-weight:800}

/* Systeembeheer */
.system-admin-grid{display:grid;gap:15px}
.system-admin-hero{
  display:flex;align-items:center;gap:14px;
  background:linear-gradient(135deg,var(--panel),rgba(91,92,240,.07));
}
.system-admin-icon,.admin-download-icon{
  width:50px;height:50px;border-radius:15px;display:grid;place-items:center;
  background:#edf3ff;color:#426fd5;flex:0 0 auto;
}
.system-admin-icon .ui-icon,.admin-download-icon .ui-icon{width:25px;height:25px}
.system-admin-hero h2{margin:0 0 4px}
.system-admin-hero p{margin:0;color:var(--muted);line-height:1.45}
.system-admin-stats{margin:0}
.admin-download-card{display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:start}
.admin-download-card>form{grid-column:1/-1;margin:0}
.admin-download-card h2{margin:0 0 5px}
.admin-download-card p{margin:0;color:var(--muted);font-size:11px;line-height:1.5}
.admin-download-icon.backup{background:#f2edff;color:#6c51dd}
.system-status-list{display:grid;margin-bottom:14px}
.system-status-list>div{
  display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);
}
.system-status-list span{color:var(--muted)}

.theme-dark .storage-provider-info,
.theme-dark .storage-connection-form-wrap,
.theme-dark .storage-form-tip,
.theme-dark .storage-oauth-help{
  background:#14233a;border-color:#29466d;color:#b6cae6;
}
.theme-dark .storage-oauth-help code{background:#101a2b;color:#c8d6ea}
.theme-dark .storage-download-button,
.theme-dark .storage-icon-choice,
.theme-dark .storage-mini-connection{background:#131d2f}
.theme-dark .storage-info-icon{background:#1e304d}
.theme-dark .storage-download-button>i,
.theme-dark .storage-icon-choice i,
.theme-dark .storage-mini-icon,
.theme-dark .system-admin-icon,
.theme-dark .admin-download-icon{background:#1e304d}

@media(max-width:1050px){
  .storage-top-grid{grid-template-columns:1fr}
  .storage-icon-menu{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){
  .storage-select-row{grid-template-columns:1fr;gap:5px}
  .storage-auto-fields{grid-template-columns:1fr}
  .storage-auto-fields .check-row{grid-column:auto}
  .storage-icon-menu{grid-template-columns:repeat(2,minmax(0,1fr))}
  .storage-compact-form .provider-fields{grid-template-columns:1fr}
  .storage-mini-connection{grid-template-columns:38px minmax(0,1fr)}
  .storage-mini-connection>.pill{grid-column:2}
  .storage-mini-actions{grid-column:1/-1;justify-content:flex-start}
  .storage-migrate-compact{align-items:flex-start;flex-direction:column}
  .system-admin-hero{align-items:flex-start}
}


/* =========================================================
   v1.3.7 - bonnen, camerafoto's en afschriften bij potuitgaven
   ========================================================= */
.pot-book-dialog-wide{width:min(840px,100%)}
.pot-book-heading{
  display:flex;align-items:flex-start;gap:12px;margin:0 42px 16px 0;
}
.pot-book-heading h2{margin:0 0 4px}
.pot-book-heading p{margin:0}
.pot-book-heading-icon{
  width:44px;height:44px;border-radius:13px;
  display:grid;place-items:center;background:#eef3ff;font-size:22px;flex:0 0 auto;
}

.pot-book-mode{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;
}
.pot-mode-card{
  position:relative;display:flex!important;align-items:center!important;gap:10px!important;
  margin:0!important;padding:12px!important;
  border:1px solid var(--line);border-radius:12px;background:rgba(120,140,170,.045);
  cursor:pointer;
}
.pot-mode-card input{position:absolute;opacity:0;pointer-events:none}
.pot-mode-card.selected{
  border-color:#6b70ec;
  box-shadow:0 0 0 3px rgba(91,92,240,.09);
  background:rgba(91,92,240,.055);
}
.pot-mode-icon{
  width:37px;height:37px;border-radius:11px;display:grid;place-items:center;
  background:var(--panel);font-size:18px;flex:0 0 auto;
}
.pot-mode-card strong{display:block}
.pot-mode-card small{display:block;color:var(--muted);font-size:9px;margin-top:2px;line-height:1.35}

.pot-existing-tx{
  padding:12px;border:1px solid #cadcf7;border-radius:12px;background:#f5f9ff;
}
.pot-existing-tx[hidden]{display:none!important}
.pot-bank-note{
  margin-top:7px;color:#55718e;font-size:10px;line-height:1.4;
}
.pot-manual-fields.existing-mode{
  padding:10px 12px;border:1px dashed var(--line);border-radius:12px;opacity:.76;
}
.pot-manual-fields.existing-mode::before{
  content:"Gegevens hieronder worden automatisch gevuld vanuit de banktransactie.";
  display:block;margin-bottom:8px;color:var(--muted);font-size:9px;
}

.pot-evidence-section{
  border:1px solid var(--line);border-radius:14px;padding:14px;
  background:rgba(120,140,170,.04);
}
.pot-evidence-title{
  display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:11px;
}
.pot-evidence-title h3{margin:0 0 3px}
.pot-evidence-title h3 small{font-weight:500;color:var(--muted);font-size:10px}
.pot-evidence-title p{margin:0;color:var(--muted);font-size:10px}
.pot-evidence-kind{width:auto;min-width:190px}

.pot-evidence-actions{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;
}
.pot-upload-choice{
  position:relative;display:flex!important;align-items:center!important;gap:9px!important;
  min-height:74px;margin:0!important;padding:10px!important;
  border:1px solid var(--line);border-radius:12px;background:var(--panel);
  color:var(--ink);cursor:pointer;text-decoration:none;
}
.pot-upload-choice:hover{border-color:#8799df;background:rgba(91,92,240,.035)}
.pot-upload-choice input{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  opacity:0!important;cursor:pointer!important;
}
.pot-upload-icon{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:#eef3ff;font-size:19px;flex:0 0 auto;
}
.pot-upload-choice.camera .pot-upload-icon{background:#eaf9f2}
.pot-upload-choice.import .pot-upload-icon{background:#f1edff}
.pot-upload-choice strong{display:block;font-size:11px}
.pot-upload-choice small{display:block;color:var(--muted);font-size:8px;margin-top:2px;line-height:1.35}

.pot-selected-files{
  margin-top:9px;padding:8px 10px;border-radius:9px;
  background:rgba(120,140,170,.075);color:var(--muted);font-size:9px;line-height:1.5;
  overflow-wrap:anywhere;
}
.pot-selected-files.has-files{background:#eaf7f0;color:#28684d}
.pot-evidence-hint{margin-top:6px;color:var(--muted);font-size:8px}

.pot-duplicate-warning{
  padding:10px 12px;border:1px solid #efcf8d;border-radius:11px;
  background:#fff8e8;color:#745723;font-size:10px;line-height:1.45;
}
.pot-duplicate-warning[hidden]{display:none!important}

.theme-dark .pot-existing-tx{
  background:#14253d;border-color:#2d4b72;
}
.theme-dark .pot-bank-note{color:#a3bad8}
.theme-dark .pot-mode-card,
.theme-dark .pot-evidence-section{background:#121d2f}
.theme-dark .pot-upload-choice{background:#17233a}
.theme-dark .pot-mode-icon,
.theme-dark .pot-upload-icon,
.theme-dark .pot-book-heading-icon{background:#20304d}
.theme-dark .pot-selected-files{background:#1c2a42}
.theme-dark .pot-selected-files.has-files{background:#143125;color:#7ddbb0}
.theme-dark .pot-duplicate-warning{background:#342a15;border-color:#654e21;color:#f0c76c}

@media(max-width:700px){
  .pot-book-mode{grid-template-columns:1fr}
  .pot-evidence-title{flex-direction:column}
  .pot-evidence-kind{width:100%}
  .pot-evidence-actions{grid-template-columns:1fr}
  .pot-upload-choice{min-height:64px}
}


/* =========================================================
   v1.3.8 - persoonlijke downloads en ingevulde opslagvoorbeelden
   ========================================================= */
.storage-example-box{
  margin-top:10px;
  padding:11px 12px;
  border:1px dashed #b9c8df;
  border-radius:11px;
  background:rgba(255,255,255,.68);
  display:grid;
  gap:6px;
}
.storage-example-label{
  width:max-content;
  padding:3px 7px;
  border-radius:999px;
  background:#eaf1ff;
  color:#3865ba;
  font-size:8px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.storage-example-box>div{
  display:grid;
  grid-template-columns:minmax(100px,145px) minmax(0,1fr);
  align-items:start;
  gap:8px;
  font-size:10px;
}
.storage-example-box b{
  color:#53657b;
}
.storage-example-box code{
  display:block;
  padding:5px 7px;
  border-radius:7px;
  background:#fff;
  color:#2f435f;
  overflow-wrap:anywhere;
  white-space:normal;
}
.storage-example-box small{
  color:#6d7e93;
  line-height:1.4;
}
.provider-example{
  grid-column:1/-1;
  background:#f8fbff;
}
.theme-dark .storage-example-box,
.theme-dark .provider-example{
  background:#101c2f;
  border-color:#355174;
}
.theme-dark .storage-example-box code{
  background:#17253b;
  color:#d8e4f4;
}
.theme-dark .storage-example-box b,
.theme-dark .storage-example-box small{
  color:#9fb3ce;
}

.account-download-card{
  overflow:hidden;
}
.account-download-head{
  display:flex;
  align-items:flex-start;
  gap:13px;
  margin-bottom:14px;
}
.account-download-head h2{
  margin:0 0 4px;
}
.account-download-head p{
  margin:0;
  color:var(--muted);
  line-height:1.45;
}
.account-download-icon{
  width:44px;
  height:44px;
  border-radius:13px;
  display:grid;
  place-items:center;
  background:#eef3ff;
  color:#426fd5;
  flex:0 0 auto;
}
.account-download-icon .ui-icon{
  width:23px;
  height:23px;
}
.account-download-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.account-download-grid form{
  margin:0;
}
.account-download-button{
  width:100%;
  min-height:104px;
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 19px;
  align-items:center;
  gap:10px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--panel);
  color:var(--ink);
  text-align:left;
  cursor:pointer;
}
.account-download-button:hover{
  border-color:#879be2;
  background:rgba(72,105,214,.035);
}
.account-download-button-icon{
  width:40px;
  height:40px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:#eef3ff;
  color:#416fd1;
}
.account-download-button-icon .ui-icon{
  width:21px;
  height:21px;
}
.account-download-button>span:nth-child(2) strong{
  display:block;
  font-size:12px;
}
.account-download-button>span:nth-child(2) small{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:9px;
  line-height:1.4;
}
.account-download-button>.ui-icon{
  width:17px;
  height:17px;
  color:var(--muted);
}
.account-download-admin-note{
  margin-top:12px;
  padding:9px 11px;
  border-radius:10px;
  background:rgba(91,92,240,.06);
  color:var(--muted);
  font-size:10px;
}
.account-download-admin-note a{
  font-weight:800;
}
.theme-dark .account-download-icon,
.theme-dark .account-download-button-icon{
  background:#1f304c;
}
.theme-dark .account-download-button{
  background:#131d2f;
}

@media(max-width:900px){
  .account-download-grid{
    grid-template-columns:1fr;
  }
}
@media(max-width:700px){
  .storage-example-box>div{
    grid-template-columns:1fr;
    gap:3px;
  }
}


/* =========================================================
   v1.3.9 - rekeningen veilig verwijderen
   ========================================================= */
.account-row-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
}
.account-row-actions form{margin:0}
.account-delete-confirm{
  margin-bottom:18px;
  border-color:#f0c4ca;
}
.account-delete-head{
  display:flex;
  align-items:flex-start;
  gap:13px;
  margin-bottom:13px;
}
.account-delete-head h2{margin:0 0 4px}
.account-delete-head p{margin:0;color:var(--muted);line-height:1.45}
.account-delete-icon{
  width:44px;height:44px;border-radius:13px;
  display:grid;place-items:center;
  background:#fff0f2;color:#d83b57;
  flex:0 0 auto;
}
.account-delete-icon .ui-icon{width:22px;height:22px}
.account-delete-impact{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:8px;
  margin:12px 0 15px;
}
.account-delete-impact>div{
  padding:9px;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(120,140,170,.045);
}
.account-delete-impact span{
  display:block;
  color:var(--muted);
  font-size:9px;
  margin-bottom:3px;
}
.account-delete-impact strong{
  display:block;
  font-size:17px;
}
.account-delete-form{
  border-top:1px solid var(--line);
  padding-top:13px;
}
.theme-dark .account-delete-icon{
  background:#371c25;
  color:#ff8491;
}

@media(max-width:1050px){
  .account-delete-impact{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:700px){
  .account-delete-impact{grid-template-columns:repeat(2,minmax(0,1fr))}
  .account-row-actions{min-width:180px}
}


/* =========================================================
   v1.4.0 - bonherkenning met "Klopt dit?"
   ========================================================= */
.receipt-read-status{
  margin-top:10px;
  padding:10px 12px;
  border:1px solid #cdd9eb;
  border-radius:10px;
  background:#f5f8fd;
  color:#52667f;
  font-size:10px;
  line-height:1.45;
}
.receipt-read-status[hidden]{display:none!important}
.receipt-read-status.working{
  border-color:#c9d5ff;
  background:#f0f3ff;
  color:#5262a6;
}
.receipt-read-status.success{
  border-color:#bde4d0;
  background:#ecf9f2;
  color:#28694e;
}
.receipt-read-status.warn{
  border-color:#eed394;
  background:#fff8e8;
  color:#765a25;
}
.receipt-read-status.info{
  border-color:#c9dff4;
  background:#f1f8ff;
  color:#486987;
}

.receipt-suggestion{
  margin-top:10px;
  padding:14px;
  border:2px solid #6a72ef;
  border-radius:14px;
  background:
    radial-gradient(circle at top right,rgba(104,90,238,.08),transparent 33%),
    var(--panel);
  box-shadow:0 8px 22px rgba(54,64,130,.10);
}
.receipt-suggestion[hidden]{display:none!important}
.receipt-suggestion.accepted{
  border-color:#3aae78;
}
.receipt-suggestion-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}
.receipt-suggestion-head h3{
  margin:5px 0 3px;
  font-size:18px;
}
.receipt-suggestion-head p{
  margin:0;
  color:var(--muted);
  font-size:10px;
}
.receipt-ai-badge{
  display:inline-block;
  padding:4px 7px;
  border-radius:999px;
  background:#eef0ff;
  color:#5b5fca;
  font-size:8px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.receipt-suggestion-icon{
  width:42px;
  height:42px;
  border-radius:13px;
  display:grid;
  place-items:center;
  background:#f2efff;
  font-size:21px;
  flex:0 0 auto;
}
.receipt-suggestion-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr .8fr;
  gap:9px;
  margin-top:12px;
}
.receipt-suggestion-grid>div{
  padding:10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(120,140,170,.045);
  min-width:0;
}
.receipt-suggestion-grid span{
  display:block;
  color:var(--muted);
  font-size:8px;
  margin-bottom:3px;
}
.receipt-suggestion-grid strong{
  display:block;
  font-size:13px;
  overflow-wrap:anywhere;
}
.receipt-suggestion-actions{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin-top:12px;
}
.receipt-ocr-details{
  margin-top:10px;
  border-top:1px solid var(--line);
  padding-top:8px;
}
.receipt-ocr-details summary{
  cursor:pointer;
  color:var(--muted);
  font-size:9px;
  font-weight:800;
}
.receipt-ocr-details pre{
  max-height:180px;
  overflow:auto;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  margin:8px 0 0;
  padding:9px;
  border-radius:9px;
  background:rgba(120,140,170,.075);
  color:var(--ink);
  font-size:9px;
  line-height:1.45;
}

.theme-dark .receipt-read-status{
  background:#142239;
  border-color:#2b466c;
  color:#a9bfdc;
}
.theme-dark .receipt-read-status.success{
  background:#123026;
  border-color:#285a45;
  color:#82ddb4;
}
.theme-dark .receipt-read-status.warn{
  background:#342a15;
  border-color:#654e21;
  color:#f1cb72;
}
.theme-dark .receipt-suggestion{
  background:#131d2f;
  border-color:#6875f1;
}
.theme-dark .receipt-ai-badge{
  background:#24294e;
  color:#aeb5ff;
}
.theme-dark .receipt-suggestion-icon{
  background:#222b49;
}

@media(max-width:700px){
  .receipt-suggestion-grid{
    grid-template-columns:1fr;
  }
  .receipt-suggestion-actions .btn{
    width:100%;
  }
}


/* =========================================================
   v1.4.1 - zelflerende bonherkenning
   ========================================================= */
.receipt-learning-card{
  margin-top:18px;
}
.receipt-learning-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  margin-bottom:12px;
}
.receipt-learning-head h2{margin:0 0 4px}
.receipt-learning-head p{
  margin:0;
  color:var(--muted);
  font-size:11px;
  line-height:1.45;
}
.receipt-learning-head form{margin:0}
.receipt-learning-empty{
  padding:15px!important;
}
.receipt-learning-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.receipt-learning-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 11px;
  border:1px solid var(--line);
  border-radius:11px;
  background:rgba(120,140,170,.04);
}
.receipt-learning-item form{margin:0}
.receipt-learning-shop{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
}
.receipt-learning-shop>span{
  width:34px;
  height:34px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:#f0edff;
  flex:0 0 auto;
}
.receipt-learning-shop strong{
  display:block;
  font-size:11px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.receipt-learning-shop small{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:8px;
}

.receipt-learned-hint{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:10px;
  padding:10px 11px;
  border:1px solid #c8bff3;
  border-radius:11px;
  background:#f5f1ff;
}
.receipt-learned-hint[hidden]{display:none!important}
.receipt-learned-hint>span{
  width:34px;
  height:34px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:#fff;
  flex:0 0 auto;
}
.receipt-learned-hint>div{
  min-width:0;
  flex:1 1 auto;
}
.receipt-learned-hint strong{
  display:block;
  font-size:10px;
}
.receipt-learned-hint small{
  display:block;
  margin-top:2px;
  color:#675b8d;
  font-size:9px;
  line-height:1.4;
}
.receipt-learned-hint .btn{
  flex:0 0 auto;
}

.theme-dark .receipt-learning-item{
  background:#131d2f;
}
.theme-dark .receipt-learning-shop>span{
  background:#242844;
}
.theme-dark .receipt-learned-hint{
  background:#241e3d;
  border-color:#4b4074;
}
.theme-dark .receipt-learned-hint>span{
  background:#181f33;
}
.theme-dark .receipt-learned-hint small{
  color:#bdb2e8;
}

@media(max-width:760px){
  .receipt-learning-head{
    flex-direction:column;
  }
  .receipt-learning-head .btn{
    width:100%;
  }
  .receipt-learning-list{
    grid-template-columns:1fr;
  }
  .receipt-learned-hint{
    align-items:flex-start;
    flex-wrap:wrap;
  }
  .receipt-learned-hint .btn{
    width:100%;
  }
}


/* =========================================================
   v1.4.2 - automatisch sparen + bijstorten/opnemen
   ========================================================= */
.savings-info-banner{
  display:flex;gap:12px;align-items:flex-start;margin-bottom:16px;padding:14px 16px;
  border:1px solid #cbdcf7;border-radius:14px;
  background:linear-gradient(135deg,#f1f7ff,#fafcff);
}
.savings-info-icon{
  width:39px;height:39px;border-radius:11px;display:grid;place-items:center;
  background:#fff;font-size:19px;flex:0 0 auto;
}
.savings-info-banner strong{display:block;margin-bottom:3px}
.savings-info-banner span{display:block;color:#58718d;font-size:10px;line-height:1.45}
.savings-main-grid{margin-top:16px}
.savings-goal-heading{margin-top:25px}
.savings-goal-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;
}
.saving-goal-card{
  padding:16px;border:1px solid var(--line);border-radius:17px;
  background:var(--panel);box-shadow:var(--shadow);
}
.saving-goal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.saving-goal-head>div strong{display:block;font-size:16px}
.saving-goal-head>div span{display:block;margin-top:3px;font-size:22px;font-weight:900}
.saving-goal-target{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:13px}
.saving-goal-target>div{padding:8px 9px;border-radius:10px;background:rgba(120,140,170,.065)}
.saving-goal-target span{display:block;color:var(--muted);font-size:8px;margin-bottom:2px}
.saving-goal-target strong{font-size:11px}
.savings-progress{height:8px;margin-top:10px;overflow:hidden;border-radius:999px;background:#e6ebf2}
.savings-progress span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#38b987,#5b63ed)}
.auto-saving-summary{
  display:flex;align-items:center;gap:9px;margin-top:12px;padding:10px;
  border:1px solid #cbdcf7;border-radius:11px;background:#f4f8ff;
}
.auto-saving-summary>span{
  width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  background:#fff;color:#4771d0;flex:0 0 auto;
}
.auto-saving-summary .ui-icon{width:16px;height:16px}
.auto-saving-summary strong{display:block;font-size:10px}
.auto-saving-summary small{display:block;margin-top:2px;color:#647a93;font-size:8px;line-height:1.35}
.auto-saving-due{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:9px;
  margin-top:9px;padding:10px;border:1px solid #efd08e;border-radius:11px;background:#fff8e8;
}
.auto-saving-due>div strong{display:block;font-size:10px}
.auto-saving-due>div small{display:block;color:#765d2c;font-size:8px;margin-top:2px}
.auto-saving-due .check-row{grid-column:1/-1;margin:0}
.auto-saving-due .btn{white-space:nowrap}
.auto-saving-settings{
  margin-top:10px;border:1px solid var(--line);border-radius:11px;overflow:hidden;
}
.auto-saving-settings>summary{
  display:flex;align-items:center;gap:7px;padding:10px 11px;cursor:pointer;
  list-style:none;font-weight:800;font-size:10px;
}
.auto-saving-settings>summary::-webkit-details-marker{display:none}
.auto-saving-settings>summary .ui-icon{width:15px;height:15px;color:var(--muted)}
.auto-saving-settings>form{padding:11px;border-top:1px solid var(--line)}
.auto-toggle-row{padding:8px 9px!important;border-radius:9px;background:rgba(91,92,240,.055)}
.auto-toggle-row span strong{display:block}
.auto-toggle-row span small{display:block;color:var(--muted);font-size:8px;margin-top:2px}
.saving-goal-footer{
  display:flex;justify-content:flex-end;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)
}
.saving-goal-footer form{margin:0}
.savings-bottom-grid{margin-top:18px}
.savings-history{display:grid}
.savings-history-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 0;border-bottom:1px solid var(--line);
}
.savings-history-row:last-child{border-bottom:0}
.savings-history-row>div{min-width:0}
.savings-history-row>div strong{display:block;font-size:10px}
.savings-history-row>div small{
  display:block;margin-top:2px;color:var(--muted);font-size:8px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.savings-history-row>span{flex:0 0 auto;font-weight:900;font-size:10px}
.savings-history-row>span.plus{color:#139b64}
.savings-history-row>span.minus{color:#d83c52}
.savings-archive{margin-top:16px;padding:0!important;overflow:hidden}
.savings-archive>summary{cursor:pointer;padding:13px 15px;font-weight:900;list-style:none}
.savings-archive>summary::-webkit-details-marker{display:none}
.savings-archive-list{border-top:1px solid var(--line);padding:10px 15px 15px;display:grid;gap:8px}
.savings-archive-list>div{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 0;border-bottom:1px solid var(--line);
}
.savings-archive-list>div:last-child{border-bottom:0}
.savings-archive-list span strong,.savings-archive-list span small{display:block}
.savings-archive-list span small{color:var(--muted);font-size:8px;margin-top:2px}
.savings-archive-list form{display:flex;align-items:center;gap:8px;margin:0}
.theme-dark .savings-info-banner,.theme-dark .auto-saving-summary{
  background:#14253d;border-color:#2b4a72;
}
.theme-dark .savings-info-banner span,.theme-dark .auto-saving-summary small{color:#a6bad4}
.theme-dark .savings-info-icon,.theme-dark .auto-saving-summary>span{background:#1e304c}
.theme-dark .auto-saving-due{background:#342a15;border-color:#654e21}
.theme-dark .auto-saving-due>div small{color:#f0c86e}
@media(max-width:1050px){.savings-goal-grid{grid-template-columns:1fr}}
@media(max-width:700px){
  .auto-saving-due{grid-template-columns:1fr}
  .auto-saving-due .btn{width:100%}
  .saving-goal-target{grid-template-columns:1fr}
  .savings-archive-list>div{align-items:flex-start;flex-direction:column}
}


/* =========================================================
   v1.4.3 - ING leningen import en leningdocumenten
   ========================================================= */
.ing-loan-import-card{
  margin-bottom:18px;
  border-color:#f1c39e;
  background:linear-gradient(135deg,#fffaf6,var(--panel));
}
.ing-loan-import-head{
  display:flex;align-items:flex-start;gap:13px;margin-bottom:13px;
}
.ing-loan-import-icon{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:#fff0e3;font-size:23px;flex:0 0 auto;
}
.ing-loan-import-head h2{margin:0 0 4px}
.ing-loan-import-head p{margin:0;color:var(--muted);line-height:1.45}
.ing-loan-import-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-bottom:12px;
}
.ing-loan-import-grid>div{
  padding:10px;border:1px solid var(--line);border-radius:11px;background:var(--panel);
}
.ing-loan-import-grid strong,.ing-loan-import-grid span,.ing-loan-import-grid b,.ing-loan-import-grid small{display:block}
.ing-loan-import-grid span{font-size:9px;color:var(--muted);margin-top:2px}
.ing-loan-import-grid b{font-size:13px;margin-top:7px}
.ing-loan-import-grid small{font-size:8px;color:var(--muted);margin-top:3px;line-height:1.35}
.ing-loan-import-card form{margin:0}

.loan-import-note{
  margin-top:14px;padding:11px;border:1px solid #d4e0f4;border-radius:11px;background:#f6f9ff;
}
.loan-import-note strong,.loan-import-note span{display:block}
.loan-import-note span{font-size:10px;color:#60758f;margin-top:3px;line-height:1.4}

.loan-card-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;
}
.loan-detail-card{
  padding:16px;border:1px solid var(--line);border-radius:17px;
  background:var(--panel);box-shadow:var(--shadow);
}
.loan-detail-card.inactive{opacity:.65}
.loan-detail-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:10px;
}
.loan-detail-head h3{margin:5px 0 2px;font-size:16px}
.loan-detail-head small{display:block;color:var(--muted);font-size:9px}
.loan-bank-badge{
  display:inline-block;padding:3px 7px;border-radius:999px;
  background:#fff0e2;color:#df6300;font-size:8px;font-weight:900;
}
.loan-money-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px;
}
.loan-money-grid>div,.loan-meta-grid>div{
  padding:9px;border-radius:10px;background:rgba(120,140,170,.06);
}
.loan-money-grid span,.loan-meta-grid span{
  display:block;color:var(--muted);font-size:8px;margin-bottom:3px;
}
.loan-money-grid strong{font-size:13px}
.loan-progress{
  height:8px;margin-top:11px;border-radius:999px;overflow:hidden;background:#e6ebf2;
}
.loan-progress span{
  display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,#f47a20,#5b62ed);
}
.loan-progress-note{font-size:8px;color:var(--muted);margin-top:5px}
.loan-meta-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-top:12px;
}
.loan-meta-grid strong{font-size:10px}
.loan-checked{
  margin-top:9px;padding:7px 9px;border-radius:9px;
  background:#f0f7ff;color:#53708f;font-size:8px;
}
.loan-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.loan-actions form{margin:0}

.loan-documents{
  margin-top:12px;border-top:1px solid var(--line);padding-top:10px;
}
.loan-documents>summary{
  cursor:pointer;font-weight:900;font-size:10px;color:var(--muted);
}
.loan-document-list{display:grid;gap:6px;margin-top:8px}
.loan-document-list>a{
  display:flex;align-items:center;gap:8px;padding:8px 9px;
  border:1px solid var(--line);border-radius:9px;color:var(--ink);background:rgba(120,140,170,.035);
}
.loan-document-list>a>span{font-size:16px}
.loan-document-list strong{display:block;font-size:9px}
.loan-document-list small{display:block;color:var(--muted);font-size:7px;margin-top:2px}

.theme-dark .ing-loan-import-card{
  background:#1f1c1b;border-color:#70482c;
}
.theme-dark .ing-loan-import-icon{background:#382719}
.theme-dark .loan-import-note,.theme-dark .loan-checked{
  background:#14253d;border-color:#2e496d;color:#abc0db;
}

@media(max-width:1000px){
  .loan-card-grid{grid-template-columns:1fr}
  .ing-loan-import-grid{grid-template-columns:1fr}
}
@media(max-width:700px){
  .loan-money-grid{grid-template-columns:1fr 1fr}
  .loan-money-grid>div:last-child{grid-column:1/-1}
  .loan-meta-grid{grid-template-columns:1fr 1fr}
}


/* =========================================================
   v1.4.4 - Saldo vooruit: 1-24 maanden + periodeweergaven
   ========================================================= */
.forecast-control-form{
  display:grid;
  grid-template-columns:1.1fr .9fr auto auto;
  gap:14px;
  align-items:end;
}
.forecast-control-block{
  min-width:0;
}
.forecast-control-block>label{
  margin:0;
}
.forecast-month-input{
  display:flex;
  align-items:center;
  gap:8px;
}
.forecast-month-input input{
  width:120px;
}
.forecast-month-input span{
  color:var(--muted);
  font-size:9px;
  white-space:nowrap;
}
.forecast-preset-buttons{
  display:flex;
  gap:5px;
  flex-wrap:wrap;
  margin-top:7px;
}
.forecast-preset{
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--panel);
  color:var(--ink);
  padding:6px 9px;
  font-size:9px;
  font-weight:800;
  cursor:pointer;
}
.forecast-preset:hover,
.forecast-preset.active{
  border-color:#747cf0;
  background:rgba(91,92,240,.08);
  color:var(--accent);
}
.forecast-view-note{
  margin-top:6px;
  color:var(--muted);
  font-size:9px;
  line-height:1.35;
}
.forecast-free-toggle{
  margin:0!important;
  min-height:42px;
  padding:7px 9px!important;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(120,140,170,.04);
}
.forecast-free-toggle span strong,
.forecast-free-toggle span small{
  display:block;
}
.forecast-free-toggle span small{
  margin-top:2px;
  color:var(--muted);
  font-size:8px;
}
.forecast-apply{
  min-height:42px;
  white-space:nowrap;
}
.forecast-table-caption{
  margin-top:16px;
  color:var(--muted);
  font-size:10px;
}
.forecast-table-caption strong{
  color:var(--ink);
}
.forecast-table table{
  min-width:1120px;
}
.theme-dark .forecast-preset{
  background:#131d2f;
}
.theme-dark .forecast-free-toggle{
  background:#131d2f;
}
@media(max-width:1150px){
  .forecast-control-form{
    grid-template-columns:1fr 1fr;
  }
  .forecast-free-toggle,
  .forecast-apply{
    align-self:stretch;
  }
}
@media(max-width:700px){
  .forecast-control-form{
    grid-template-columns:1fr;
  }
  .forecast-month-input{
    align-items:flex-start;
    flex-direction:column;
  }
  .forecast-month-input input{
    width:100%;
  }
  .forecast-preset-buttons{
    display:grid;
    grid-template-columns:repeat(5,1fr);
  }
  .forecast-preset{
    padding:7px 4px;
  }
  .forecast-apply{
    width:100%;
  }
}


/* =========================================================
   v1.4.5 - ING leningherstel + documentknop
   ========================================================= */
.ing-loan-repair-card{
  margin-bottom:18px;border-color:#f2c69f;
  background:linear-gradient(135deg,#fff8f1,var(--panel));
}
.ing-loan-repair-status{
  display:grid;grid-template-columns:repeat(2,minmax(0,220px));gap:9px;margin:12px 0;
}
.ing-loan-repair-status>div{
  padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel);
}
.ing-loan-repair-status span{display:block;color:var(--muted);font-size:8px;margin-bottom:2px}
.ing-loan-repair-status strong{font-size:14px}
.loan-complete-banner{margin-bottom:16px}
.loan-doc-button{margin-left:auto}
.loan-doc-panel{
  margin-top:12px;padding:12px;border:1px solid #cbd9ef;border-radius:12px;
  background:#f8faff;
}
.loan-doc-panel[hidden]{display:none!important}
.loan-doc-panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px;
}
.loan-doc-close{
  width:30px;height:30px;border-radius:50%;border:1px solid var(--line);
  background:var(--panel);color:var(--ink);font-size:20px;cursor:pointer;
}
.loan-document-row{
  display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:9px;
  padding:8px 0;border-bottom:1px solid var(--line);
}
.loan-document-row:last-child{border-bottom:0}
.loan-document-icon{
  width:31px;height:31px;border-radius:9px;display:grid;place-items:center;background:#fff;
}
.loan-document-row strong{display:block;font-size:9px}
.loan-document-row small{display:block;margin-top:2px;color:var(--muted);font-size:7px;overflow-wrap:anywhere}
.theme-dark .ing-loan-repair-card{background:#211b17;border-color:#70492d}
.theme-dark .loan-doc-panel{background:#14243a;border-color:#2d496d}
.theme-dark .loan-document-icon{background:#1d2d47}
@media(max-width:700px){
  .ing-loan-repair-status{grid-template-columns:1fr}
  .loan-doc-button{margin-left:0;width:100%}
  .loan-document-row{grid-template-columns:32px minmax(0,1fr)}
  .loan-document-row .btn{grid-column:1/-1;width:100%}
}


/* =========================================================
   v1.4.6 - dashboardtegels volledig klikbaar
   ========================================================= */
.dashboard-click-target{
  cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.dashboard-click-target:hover{
  transform:translateY(-2px);
  border-color:#b8c7e3;
  box-shadow:0 14px 34px rgba(27,45,76,.12);
}
.dashboard-click-target:focus-visible,
.dashboard-native-link:focus-visible{
  outline:3px solid rgba(74,103,232,.28);
  outline-offset:3px;
}
.dashboard-metrics .dashboard-click-target,
.dashboard-panels .dashboard-click-target,
.grid.two>.dashboard-click-target{
  position:relative;
  padding-right:44px;
}
.dashboard-metrics .dashboard-click-target::after,
.dashboard-panels .dashboard-click-target::after,
.grid.two>.dashboard-click-target::after{
  content:'›';
  position:absolute;
  right:16px;
  top:16px;
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:rgba(91,92,240,.07);
  color:var(--accent);
  font-size:20px;
  line-height:1;
  font-weight:800;
}
.balance-hero.dashboard-click-target:hover{
  box-shadow:0 22px 50px rgba(26,72,143,.28);
}
.dashboard-native-link{
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.dashboard-native-link:hover{
  transform:translateY(-2px);
  border-color:#b8c7e3;
  box-shadow:0 14px 34px rgba(27,45,76,.12);
}
.theme-dark .dashboard-click-target:hover,
.theme-dark .dashboard-native-link:hover{
  border-color:#40577a;
  box-shadow:0 16px 34px rgba(0,0,0,.25);
}
.theme-dark .dashboard-metrics .dashboard-click-target::after,
.theme-dark .dashboard-panels .dashboard-click-target::after,
.theme-dark .grid.two>.dashboard-click-target::after{
  background:#20304b;
  color:#a9bdff;
}
@media(max-width:760px){
  .dashboard-metrics .dashboard-click-target,
  .dashboard-panels .dashboard-click-target,
  .grid.two>.dashboard-click-target{
    padding-right:40px;
  }
  .dashboard-metrics .dashboard-click-target::after,
  .dashboard-panels .dashboard-click-target::after,
  .grid.two>.dashboard-click-target::after{
    right:11px;
    top:11px;
  }
}


/* =========================================================
   v1.4.8 - salaris compact rolmenu
   ========================================================= */
.salary-compact-intro{
  display:flex;
  align-items:flex-start;
  gap:13px;
  margin-bottom:16px;
  padding:15px 17px;
  border:1px solid var(--line);
  border-radius:16px;
  background:linear-gradient(135deg,var(--panel),rgba(91,92,240,.055));
  box-shadow:var(--shadow);
}
.salary-compact-icon{
  width:42px;height:42px;border-radius:12px;
  display:grid;place-items:center;flex:0 0 auto;
  background:#edf3ff;color:#426fd5;
}
.salary-compact-icon .ui-icon{width:21px;height:21px}
.salary-compact-intro h2{margin:0 0 4px}
.salary-compact-intro p{
  margin:0;color:var(--muted);font-size:10px;line-height:1.45
}
.salary-summary-cards{margin-bottom:16px}

.salary-rollmenu{
  display:grid;
  gap:9px;
}
.salary-roll-card{
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--panel);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.salary-roll-card>summary{
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto 24px;
  align-items:center;
  gap:10px;
  padding:13px 15px;
  cursor:pointer;
  list-style:none;
  user-select:none;
}
.salary-roll-card>summary::-webkit-details-marker{display:none}
.salary-roll-card[open]>summary{
  border-bottom:1px solid var(--line);
  background:rgba(91,92,240,.035);
}
.salary-roll-summary-icon{
  width:36px;height:36px;border-radius:10px;
  display:grid;place-items:center;
  background:#eef3ff;color:#416fd2;
}
.salary-roll-summary-icon .ui-icon{width:18px;height:18px}
.salary-roll-summary-copy{min-width:0}
.salary-roll-summary-copy strong{
  display:block;font-size:12px
}
.salary-roll-summary-copy small{
  display:block;margin-top:2px;
  color:var(--muted);font-size:8px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.salary-roll-summary-value{
  font-size:11px;font-weight:900;white-space:nowrap
}
.salary-roll-summary-value.ok{color:#159565}
.salary-roll-summary-value.warn{color:#c38316}
.salary-roll-chevron{
  font-size:19px;
  color:var(--muted);
  transform:rotate(0deg);
  transition:transform .16s ease;
  text-align:center;
}
.salary-roll-card[open] .salary-roll-chevron{transform:rotate(180deg)}
.salary-roll-content{padding:14px}
.salary-inner-card{
  margin:0;
  box-shadow:none;
  background:rgba(120,140,170,.035);
}
.salary-inner-card h3{margin-top:0}
.salary-post-row{
  padding:10px 0;
  border-bottom:1px solid var(--line);
}
.salary-post-row:last-child{border-bottom:0}
.salary-post-row>form:last-child{margin-top:6px}
.salary-preview-card{margin-top:14px}
.salary-preview-total{
  border-top:1px solid var(--line);
  margin-top:8px;
  padding-top:12px;
}
.salary-period-picker{
  display:flex;
  justify-content:flex-end;
  margin-bottom:12px;
}
.salary-period-picker form{margin:0}
.salary-period-picker label{
  display:flex;
  align-items:center;
  gap:8px;
}
.salary-period-picker input{width:auto}

.theme-dark .salary-compact-icon,
.theme-dark .salary-roll-summary-icon{
  background:#1e304d;
}
.theme-dark .salary-inner-card{
  background:#111b2c;
}
.theme-dark .salary-roll-card[open]>summary{
  background:#17243a;
}

@media(max-width:760px){
  .salary-roll-card>summary{
    grid-template-columns:36px minmax(0,1fr) 20px;
  }
  .salary-roll-summary-value{
    grid-column:2;
    grid-row:2;
    justify-self:start;
    margin-top:-3px;
  }
  .salary-roll-chevron{
    grid-column:3;
    grid-row:1 / span 2;
  }
  .salary-roll-summary-copy small{
    white-space:normal;
  }
}


/* =========================================================
   v1.4.9 - vaste lasten in salaris aanpassen/verwijderen
   ========================================================= */
.salary-fixed-first{margin-bottom:14px}
.salary-fixed-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:12px
}
.salary-fixed-head h2{margin:0 0 4px}
.salary-fixed-head p{margin:0;color:var(--muted);font-size:10px;line-height:1.45;max-width:760px}
.salary-fixed-total{
  min-width:180px;padding:10px 12px;border-radius:12px;background:rgba(91,92,240,.06);text-align:right
}
.salary-fixed-total span,.salary-fixed-total small{display:block;color:var(--muted);font-size:8px}
.salary-fixed-total strong{display:block;font-size:18px;margin:2px 0}
.salary-fixed-list{display:grid;gap:7px}
.salary-fixed-row{
  display:grid;grid-template-columns:minmax(220px,1fr) minmax(300px,.8fr) auto;
  align-items:center;gap:10px;padding:10px 11px;border:1px solid var(--line);border-radius:11px;background:rgba(120,140,170,.035)
}
.salary-fixed-name{min-width:0}
.salary-fixed-name .pill{margin-right:6px}
.salary-fixed-name strong{display:inline;font-size:10px}
.salary-fixed-name small{display:block;margin-top:4px;color:var(--muted);font-size:8px}
.salary-fixed-amount-form{display:flex;align-items:end;gap:7px;margin:0}
.salary-fixed-amount-form label{margin:0;min-width:150px}
.salary-fixed-amount-form .btn{white-space:nowrap}
.salary-fixed-actions{display:flex;justify-content:flex-end;gap:5px;flex-wrap:wrap}
.salary-fixed-actions form{margin:0}
.salary-fixed-actions .btn{padding:7px 9px;font-size:9px;white-space:nowrap}
.salary-fixed-excluded{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.salary-fixed-excluded>summary{cursor:pointer;font-weight:900;font-size:10px;color:var(--muted)}
.salary-fixed-excluded-list{display:grid;gap:6px;margin-top:8px}
.salary-fixed-excluded-list>div{
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 9px;border:1px dashed var(--line);border-radius:9px
}
.salary-fixed-excluded-list span strong,.salary-fixed-excluded-list span small{display:block}
.salary-fixed-excluded-list span small{color:var(--muted);font-size:8px;margin-top:2px}
.salary-fixed-excluded-list form{margin:0}
@media(max-width:1100px){
  .salary-fixed-row{grid-template-columns:1fr 1fr}
  .salary-fixed-actions{grid-column:1/-1;justify-content:flex-start}
}
@media(max-width:700px){
  .salary-fixed-head{flex-direction:column}
  .salary-fixed-total{width:100%;text-align:left}
  .salary-fixed-row{grid-template-columns:1fr}
  .salary-fixed-amount-form{align-items:stretch;flex-direction:column}
  .salary-fixed-actions{grid-column:auto}
  .salary-fixed-actions .btn{width:100%}
  .salary-fixed-actions form{width:100%}
  .salary-fixed-excluded-list>div{align-items:flex-start;flex-direction:column}
}


/* =========================================================
   v1.4.11 - vaste lasten verwijderen + compacte scrollijst
   ========================================================= */
.fixed-list-panel{
  margin-top:18px;
  padding:0!important;
  overflow:hidden;
}
.fixed-list-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  cursor:pointer;
  list-style:none;
  user-select:none;
}
.fixed-list-summary::-webkit-details-marker{display:none}
.fixed-list-summary h2{margin:0 0 2px}
.fixed-list-summary small{display:block;color:var(--muted);font-size:9px}
.fixed-list-summary-right{
  display:flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
}
.fixed-list-summary-right strong{font-size:11px}
.fixed-list-chevron{
  display:inline-block;
  color:var(--muted);
  font-size:20px;
  transition:transform .16s ease;
}
.fixed-list-panel[open] .fixed-list-chevron{transform:rotate(180deg)}
.fixed-list-body{
  border-top:1px solid var(--line);
  padding:12px 14px 14px;
}
.fixed-list-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.fixed-list-toolbar input{
  width:min(420px,100%);
  margin:0;
}
.fixed-list-toolbar span{
  color:var(--muted);
  font-size:9px;
  white-space:nowrap;
}
.fixed-expenses-scroll{
  max-height:520px;
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
.fixed-expenses-scroll table{margin:0}
.fixed-expenses-scroll thead th{
  position:sticky;
  top:0;
  z-index:3;
  background:var(--panel);
  box-shadow:0 1px 0 var(--line);
}
.fixed-expense-row[hidden]{display:none!important}
.fixed-row-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:5px;
  min-width:250px;
}
.fixed-row-actions form{margin:0}
.fixed-delete-btn{
  border-color:#efbbc3!important;
  background:#fff1f3!important;
  color:#c82f48!important;
}
.fixed-delete-btn:hover{
  background:#ffe4e8!important;
}
.theme-dark .fixed-expenses-scroll thead th{background:#131d2f}
.theme-dark .fixed-delete-btn{
  background:#351d25!important;
  border-color:#62303e!important;
  color:#ff8da0!important;
}
@media(max-width:760px){
  .fixed-list-summary{align-items:flex-start}
  .fixed-list-summary-right{align-items:flex-end;flex-direction:column;gap:2px}
  .fixed-list-toolbar{align-items:stretch;flex-direction:column}
  .fixed-list-toolbar input{width:100%}
  .fixed-expenses-scroll{max-height:68vh}
  .fixed-row-actions{min-width:210px}
}


/* =========================================================
   v1.4.13 - saldo-nulpunt / startdatum actuele saldoverwerking
   ========================================================= */
.balance-baseline-card{
  margin:18px 0;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(420px,.85fr);
  gap:18px;
  align-items:center;
  border-color:#cbdaf1;
  background:linear-gradient(135deg,var(--panel),rgba(69,115,210,.045));
}
.balance-baseline-copy{display:flex;align-items:flex-start;gap:12px}
.balance-baseline-icon{
  width:43px;height:43px;border-radius:13px;display:grid;place-items:center;
  background:#edf3ff;font-size:20px;flex:0 0 auto;
}
.balance-baseline-copy h2{margin:0 0 4px}
.balance-baseline-copy p{margin:0;color:var(--muted);font-size:10px;line-height:1.5}
.balance-baseline-form{
  display:grid;grid-template-columns:1fr 1fr;gap:9px;align-items:end;margin:0;
}
.balance-baseline-form .actions{grid-column:1/-1;margin:0}
.balance-baseline-form .btn{width:100%}
.hero-baseline-note{
  margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.16);
  font-size:9px;color:rgba(255,255,255,.84)
}
.theme-dark .balance-baseline-card{border-color:#2c466b}
.theme-dark .balance-baseline-icon{background:#1e304d}
@media(max-width:980px){
  .balance-baseline-card{grid-template-columns:1fr}
}
@media(max-width:700px){
  .balance-baseline-form{grid-template-columns:1fr}
  .balance-baseline-form .actions{grid-column:auto}
}


/* =========================================================
   v1.4.14 - meerdere imports selecteren en verwijderen
   ========================================================= */
.imports-list-heading{margin-bottom:10px}
.imports-list-heading h2{margin-bottom:3px}
.imports-bulk-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:9px;padding:10px 12px;border:1px solid var(--line);
  border-radius:12px;background:var(--panel);box-shadow:var(--shadow);
}
.imports-select-all{
  display:flex!important;align-items:center!important;gap:8px!important;
  margin:0!important;font-weight:800!important;cursor:pointer;
}
.imports-select-all input,.import-select{width:17px;height:17px;accent-color:#5d5fef;cursor:pointer}
.imports-bulk-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
#importsSelectedCount{font-size:10px;color:var(--muted);font-weight:800;min-width:82px;text-align:right}
#importsBulkDelete:disabled{opacity:.45;cursor:not-allowed}
.imports-check-col{width:38px;text-align:center!important}
.imports-table-scroll{max-height:62vh;overflow:auto}
.imports-table thead th{position:sticky;top:0;z-index:2;background:var(--panel)}
.imports-table .import-row.selected td{background:rgba(222,70,84,.045)}
.imports-file-name{max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.theme-dark .imports-table .import-row.selected td{background:rgba(255,105,120,.08)}
@media(max-width:760px){
  .imports-bulk-toolbar{align-items:stretch;flex-direction:column}
  .imports-bulk-actions{justify-content:space-between}
  #importsBulkDelete{flex:1 1 auto}
  .imports-file-name{max-width:160px}
}


/* =========================================================
   v1.4.15 - eenmalig of vaste last bij import
   ========================================================= */
.import-recurrence-box{
  margin-top:6px;padding:12px;border:1px solid var(--line);border-radius:13px;
  background:rgba(120,140,170,.035);
}
.import-recurrence-head strong{display:block;font-size:11px}
.import-recurrence-head small{display:block;color:var(--muted);font-size:9px;margin-top:3px;line-height:1.4}
.import-recurrence-choice{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px;
}
.import-rec-choice{
  position:relative;display:flex!important;align-items:center!important;gap:9px!important;
  margin:0!important;padding:10px!important;border:1px solid var(--line);border-radius:11px;
  background:var(--panel);cursor:pointer;
}
.import-rec-choice input{position:absolute;opacity:0;pointer-events:none}
.import-rec-choice>span{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:#eef3ff;color:#486fd0;font-weight:900;flex:0 0 auto;
}
.import-rec-choice strong{display:block;font-size:10px}
.import-rec-choice small{display:block;color:var(--muted);font-size:8px;margin-top:2px}
.import-rec-choice.selected{border-color:#727bef;box-shadow:0 0 0 3px rgba(91,92,240,.08);background:rgba(91,92,240,.035)}
.import-fixed-options{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.import-fixed-options[hidden]{display:none!important}
.import-fixed-note{
  margin-top:8px;padding:8px 10px;border-radius:9px;background:#f2f7ff;color:#536d89;
  font-size:9px;line-height:1.45;
}
.import-recurrence-interval.muted-field{opacity:.5}
.theme-dark .import-recurrence-box{background:#111b2d}
.theme-dark .import-rec-choice{background:#152238}
.theme-dark .import-rec-choice>span{background:#20324e}
.theme-dark .import-fixed-note{background:#14253d;color:#adc0d7}
@media(max-width:700px){.import-recurrence-choice{grid-template-columns:1fr}}


/* =========================================================
   v1.4.16 - transactieregels per import los wijzigen/verwijderen
   ========================================================= */
.import-tx-card{position:relative}
.import-tx-summary{align-items:flex-start}
.import-tx-row-actions{
  margin-top:11px;padding-top:10px;border-top:1px solid var(--line);
  display:flex;gap:7px;flex-wrap:wrap;
}
.import-tx-row-actions form{margin:0}
.import-tx-edit-form{
  margin-top:12px;padding:13px;border:1px solid #cbd8ee;border-radius:12px;
  background:rgba(80,110,180,.035);
}
.import-tx-edit-form[hidden]{display:none!important}
.import-tx-edit-title{padding-bottom:8px;border-bottom:1px solid var(--line)}
.import-tx-edit-title strong{display:block;font-size:12px}
.import-tx-edit-title span{display:block;margin-top:2px;color:var(--muted);font-size:9px;line-height:1.4}
.import-tx-committed-note{margin-top:10px;padding:8px 10px;border-radius:9px;background:rgba(120,140,170,.06);font-size:9px}
.theme-dark .import-tx-edit-form{background:#121f33;border-color:#2d466b}
@media(max-width:700px){
  .import-tx-row-actions .btn,.import-tx-row-actions form{width:100%}
  .import-tx-row-actions form .btn{width:100%}
}
\n\n/* =========================================================\n   v1.4.17 - laatste afschrijving bij vaste lasten\n   ========================================================= */\n.fixed-last-debit{white-space:nowrap}\n.fixed-last-debit strong{font-size:10px}\n.fixed-last-debit small{font-size:8px}\n@media(max-width:900px){\n  #fixedExpensesTable{min-width:980px}\n}\n

/* =========================================================
   v1.4.18 - import koppelen aan bestaande vaste last of potje
   ========================================================= */
.import-destination-choice{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-top:10px;
}
.import-destination-options{
  margin-top:10px;
  padding:11px;
  border:1px solid var(--line);
  border-radius:11px;
  background:rgba(120,140,170,.035);
}
.import-destination-options[hidden]{display:none!important}
.import-destination-note{
  margin-top:8px;
  padding:8px 9px;
  border-radius:9px;
  background:#f2f7ff;
  color:#55708d;
  font-size:9px;
  line-height:1.45;
}
.import-destination-note.pot-note{
  background:#eef9f3;
  color:#356b53;
}
.theme-dark .import-destination-options{background:#111b2d}
.theme-dark .import-destination-note{background:#172941;color:#abc1dd}
.theme-dark .import-destination-note.pot-note{background:#143126;color:#89d6b2}
@media(max-width:1050px){
  .import-destination-choice{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  .import-destination-choice{grid-template-columns:1fr}
}


/* =========================================================
   v1.4.19 - uitgavenpotjes zichtbaar op dashboard
   ========================================================= */
.dashboard-pots-card{overflow:hidden}
.dashboard-pots-title{align-items:flex-start}
.dashboard-pots-title>div:first-child h2{margin-bottom:3px}
.dashboard-pots-title>div:first-child p{margin:0;font-size:9px}
.dashboard-pots-total{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:flex-end
}
.dashboard-pots-total>span{color:var(--muted);font-size:9px}
.dashboard-pots-total>strong{font-size:15px}
.dashboard-pot-scroll{
  max-height:370px;overflow:auto;padding-right:4px;scrollbar-gutter:stable
}
.dashboard-pot-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px
}
.dashboard-pot-item{
  display:block;padding:12px;border:1px solid var(--line);border-radius:13px;
  background:rgba(120,140,170,.035);color:var(--ink);text-decoration:none;
  transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease
}
.dashboard-pot-item:hover{
  transform:translateY(-1px);border-color:#93a5df;box-shadow:0 8px 18px rgba(39,57,102,.08)
}
.dashboard-pot-item.over{border-color:#edc3c9}
.dashboard-pot-head{
  display:grid;grid-template-columns:34px minmax(0,1fr) 17px;align-items:center;gap:8px
}
.dashboard-pot-emoji{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:#eef3ff;font-size:17px
}
.dashboard-pot-name{min-width:0}
.dashboard-pot-name strong{
  display:block;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.dashboard-pot-name small{display:block;color:var(--muted);font-size:8px;margin-top:2px}
.dashboard-pot-chevron{width:15px;height:15px;color:var(--muted)}
.dashboard-pot-values{
  display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px
}
.dashboard-pot-values>div{
  padding:7px 8px;border-radius:9px;background:var(--panel)
}
.dashboard-pot-values span{display:block;color:var(--muted);font-size:7px;margin-bottom:2px}
.dashboard-pot-values strong{font-size:10px}
.dashboard-pot-progress{
  height:6px;overflow:hidden;border-radius:999px;background:#e7ebf2;margin-top:9px
}
.dashboard-pot-progress span{
  display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#5c72ee,#48bb8a)
}
.dashboard-pot-progress.over span{background:#dc5b69}
.dashboard-pot-progress-note{margin-top:4px;color:var(--muted);font-size:7px}
.dashboard-pot-empty{
  display:grid;grid-template-columns:38px minmax(0,1fr) 18px;align-items:center;gap:10px;
  padding:12px;border:1px dashed var(--line);border-radius:12px;color:var(--ink)
}
.dashboard-pot-empty>span{font-size:21px}
.dashboard-pot-empty strong,.dashboard-pot-empty small{display:block}
.dashboard-pot-empty small{margin-top:2px;color:var(--muted);font-size:8px}
.theme-dark .dashboard-pot-item{background:#121d2f}
.theme-dark .dashboard-pot-emoji{background:#1e304c}
.theme-dark .dashboard-pot-values>div{background:#182338}
.theme-dark .dashboard-pot-progress{background:#263249}
@media(max-width:1100px){.dashboard-pot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){
  .dashboard-pots-title{align-items:stretch;flex-direction:column}
  .dashboard-pots-total{justify-content:flex-start}
  .dashboard-pot-grid{grid-template-columns:1fr}
  .dashboard-pot-scroll{max-height:430px}
}


/* =========================================================
   v1.4.20 - originele bron bekijken vanuit transacties
   ========================================================= */
.transaction-source-cell{white-space:nowrap}
.transaction-source-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 8px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--panel);
  color:var(--ink);
  text-decoration:none;
  font-size:9px;
  font-weight:800;
  transition:border-color .15s ease,background .15s ease,transform .15s ease;
}
.transaction-source-link:hover{
  border-color:#8799df;
  background:rgba(91,92,240,.055);
  transform:translateY(-1px);
}
.transaction-source-icon{
  width:22px;
  height:22px;
  border-radius:7px;
  display:grid;
  place-items:center;
  background:#eef3ff;
  font-size:12px;
}
.transaction-source-text{color:var(--muted);font-size:9px}
.theme-dark .transaction-source-link{background:#131d2f}
.theme-dark .transaction-source-icon{background:#1f304c}
@media(max-width:700px){
  .transaction-source-link span:last-child{display:none}
  .transaction-source-link{padding:5px}
}


/* =========================================================
   v1.4.21 - uitgavenpotjes compact zoals dashboardpanelen
   ========================================================= */
.dashboard-pot-panel{
  min-height:0;
  overflow:hidden;
}
.dashboard-pot-compact-scroll{
  max-height:164px;
  overflow-y:auto;
  padding-right:5px;
  scrollbar-width:thin;
}
.dashboard-pot-compact-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 0;
  border-bottom:1px solid var(--line);
  color:var(--ink);
  text-decoration:none;
}
.dashboard-pot-compact-row:last-child{border-bottom:0}
.dashboard-pot-compact-row:hover .dashboard-pot-compact-name strong{text-decoration:underline}
.dashboard-pot-compact-name{
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
}
.dashboard-pot-mini-icon{
  width:27px;
  height:27px;
  border-radius:8px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  background:rgba(91,92,240,.07);
  font-size:14px;
}
.dashboard-pot-compact-name>span:last-child{min-width:0}
.dashboard-pot-compact-name strong{
  display:block;
  font-size:10px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.dashboard-pot-compact-name small{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:7px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.dashboard-pot-compact-amount{
  flex:0 0 auto;
  font-size:10px;
  white-space:nowrap;
}
.dashboard-pot-compact-total{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:8px;
  padding-top:9px;
  border-top:1px solid var(--line);
  font-size:10px;
}
.dashboard-pot-compact-total span{font-weight:800}
.dashboard-pot-compact-total strong{font-size:11px}
.theme-dark .dashboard-pot-mini-icon{background:#1e304c}
@media(max-width:700px){
  .dashboard-pot-compact-scroll{max-height:210px}
  .dashboard-pot-compact-name small{white-space:normal}
}


/* =========================================================
   v1.4.22 - dashboardpotje opent alleen het gekozen potje
   ========================================================= */
.expense-pot-card:target{
  scroll-margin-top:90px;
  border-color:#7b82f0;
  box-shadow:0 0 0 3px rgba(91,92,240,.08),var(--shadow);
}


/* =========================================================
   v1.4.23 - spaargeld terugstorten naar eigen rekening
   ========================================================= */
.savings-return-help{
  display:block;margin-top:5px;color:var(--muted);font-size:8px;line-height:1.4;
}
.savings-return-own-note{
  display:flex;align-items:flex-start;gap:9px;margin-top:12px;padding:10px 11px;
  border:1px solid #c8d8f2;border-radius:11px;background:#f4f8ff;
}
.savings-return-own-note[hidden]{display:none!important}
.savings-return-own-note>span{
  width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  flex:0 0 auto;background:#fff;color:#4e6fd0;font-size:17px;font-weight:900;
}
.savings-return-own-note strong{display:block;font-size:10px}
.savings-return-own-note small{
  display:block;margin-top:2px;color:#60758f;font-size:8px;line-height:1.45;
}
.savings-return-locked{opacity:.82}
.theme-dark .savings-return-own-note{
  background:#14253d;border-color:#2c496f;
}
.theme-dark .savings-return-own-note>span{background:#1e304c}
.theme-dark .savings-return-own-note small{color:#abc0da}


/* =========================================================
   v1.4.24 - copyright Gerard van Emden
   ========================================================= */
.app-copyright{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin:24px 0 88px;
  padding:12px 4px 0;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:9px;
}
.app-copyright span{font-weight:700}
.app-copyright small{font-size:8px}
.auth-copyright{
  margin-top:18px;
  padding-top:13px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:9px;
  text-align:center;
  line-height:1.4;
}
.theme-dark .app-copyright{border-color:rgba(255,255,255,.09)}
@media(max-width:700px){
  .app-copyright{
    flex-direction:column;
    align-items:center;
    text-align:center;
    margin-bottom:92px;
  }
}


/* =========================================================
   v1.4.25 - vaste betalingen op creditcard + afrekenen
   ========================================================= */
.cc-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.cc-detail-card{padding:16px;border:1px solid var(--line);border-radius:17px;background:var(--panel);box-shadow:var(--shadow)}
.cc-detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.cc-detail-head h3{margin:5px 0 2px;font-size:16px}
.cc-detail-head small{display:block;color:var(--muted);font-size:9px}
.cc-badge{display:inline-block;padding:3px 7px;border-radius:999px;background:#eef3ff;color:#416fd2;font-size:8px;font-weight:900}
.cc-money-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:13px}
.cc-money-grid>div,.cc-settlement-status>div{padding:9px;border-radius:10px;background:rgba(120,140,170,.06)}
.cc-money-grid span,.cc-settlement-status span{display:block;color:var(--muted);font-size:8px;margin-bottom:3px}
.cc-money-grid strong{font-size:13px}
.cc-settlement-status{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px}
.cc-settlement-status strong{display:block;font-size:10px}.cc-settlement-status small{display:block;margin-top:2px;color:var(--muted);font-size:8px}
.cc-section{margin-top:11px;border:1px solid var(--line);border-radius:11px;overflow:hidden}
.cc-section>summary{cursor:pointer;list-style:none;padding:10px 11px;font-size:10px;font-weight:900}.cc-section>summary::-webkit-details-marker{display:none}
.cc-section[open]>summary{border-bottom:1px solid var(--line);background:rgba(91,92,240,.035)}
.cc-section-body{padding:11px}
.cc-recurring-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.cc-recurring-row:last-of-type{border-bottom:0}.cc-recurring-row form{margin:0}.cc-recurring-row strong,.cc-recurring-row small{display:block}.cc-recurring-row strong{font-size:10px}.cc-recurring-row small{margin-top:2px;color:var(--muted);font-size:8px}
.cc-assign-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}
.cc-assign-grid form{margin:0}.cc-assign-grid .btn{margin-top:7px}
.cc-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}.cc-actions form{margin:0}
.cc-settle-section[open]>summary{background:#eef9f3}.theme-dark .cc-settle-section[open]>summary{background:#153126}
.theme-dark .cc-badge{background:#1e304d}.theme-dark .cc-detail-card{background:var(--panel)}
@media(max-width:1000px){.cc-card-grid{grid-template-columns:1fr}}
@media(max-width:700px){.cc-money-grid{grid-template-columns:1fr}.cc-settlement-status,.cc-assign-grid{grid-template-columns:1fr}.cc-recurring-row{align-items:flex-start;flex-direction:column}.cc-recurring-row .btn{width:100%}}


/* =========================================================
   v1.4.26 - compacte creditcard toevoegen/wijzigen
   ========================================================= */
.cc-page-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:18px;
  margin-bottom:18px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--panel);
  box-shadow:var(--shadow);
}
.cc-page-toolbar-info{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.cc-page-toolbar-icon{
  width:38px;
  height:38px;
  border-radius:11px;
  display:grid;
  place-items:center;
  background:#eef3ff;
  flex:0 0 auto;
  font-size:18px;
}
.cc-page-toolbar-info strong{display:block;font-size:11px}
.cc-page-toolbar-info small{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:8px;
  line-height:1.4;
}
.cc-add-button{white-space:nowrap;flex:0 0 auto}

.cc-edit-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  padding:18px;
  background:rgba(10,20,38,.48);
  backdrop-filter:blur(4px);
}
.cc-edit-modal[hidden]{display:none!important}
body.cc-modal-open{overflow:hidden}
.cc-edit-modal-dialog{
  width:min(760px,96vw);
  max-height:min(760px,92vh);
  overflow:auto;
  padding:17px;
  border:1px solid var(--line);
  border-radius:17px;
  background:var(--panel);
  box-shadow:0 26px 80px rgba(12,27,54,.26);
}
.cc-edit-modal-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  padding-bottom:12px;
  margin-bottom:13px;
  border-bottom:1px solid var(--line);
}
.cc-edit-modal-head h2{margin:6px 0 0}
.cc-modal-close{
  width:35px;
  height:35px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--panel);
  color:var(--ink);
  font-size:22px;
  line-height:1;
  cursor:pointer;
}
.cc-modal-close:hover{background:rgba(120,140,170,.08)}
.cc-edit-form textarea{min-height:80px}
.cc-edit-actions{justify-content:flex-end}
.theme-dark .cc-page-toolbar-icon{background:#1f304c}
.theme-dark .cc-edit-modal{background:rgba(2,7,17,.72)}

@media(max-width:700px){
  .cc-page-toolbar{align-items:stretch;flex-direction:column}
  .cc-add-button{width:100%}
  .cc-edit-modal{padding:8px}
  .cc-edit-modal-dialog{width:100%;max-height:96vh;padding:13px}
}


/* =========================================================
   v1.4.27 - creditcard losse betalingen en bonnen
   ========================================================= */
.cc-receipt-toolbar{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  margin-bottom:12px;
}
.cc-receipt-toolbar>div strong{display:block;font-size:11px}
.cc-receipt-toolbar>div small{display:block;margin-top:3px;color:var(--muted);font-size:8px;line-height:1.45;max-width:680px}
.cc-payment-form{
  padding:12px;border:1px solid var(--line);border-radius:12px;background:rgba(120,140,170,.035);
}
.cc-receipt-upload{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px;
  border:1px dashed #bfcde1;border-radius:11px;background:var(--panel);
}
.cc-receipt-upload-copy{flex:1 1 260px;min-width:0}
.cc-receipt-upload-copy strong,.cc-receipt-upload-copy small{display:block}
.cc-receipt-upload-copy small{margin-top:2px;color:var(--muted);font-size:8px}
.cc-file-button{cursor:pointer}
.cc-payment-history{margin-top:12px;display:grid;gap:7px;max-height:300px;overflow:auto;padding-right:3px}
.cc-payment-row{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(150px,auto);align-items:center;gap:10px;
  padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel);
}
.cc-payment-main{min-width:0}
.cc-payment-main strong{display:block;font-size:10px}
.cc-payment-main small{display:block;margin-top:2px;color:var(--muted);font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-payment-amount{font-size:11px;white-space:nowrap}
.cc-payment-docs{display:flex;justify-content:flex-end;align-items:center;gap:5px;flex-wrap:wrap}
.cc-payment-docs .btn.compact{padding:5px 7px;font-size:8px}
.theme-dark .cc-payment-form{background:#111b2c}
.theme-dark .cc-receipt-upload{border-color:#36506f;background:#142238}
@media(max-width:760px){
  .cc-receipt-toolbar{flex-direction:column}
  .cc-receipt-toolbar>.btn{width:100%}
  .cc-payment-row{grid-template-columns:minmax(0,1fr) auto}
  .cc-payment-docs{grid-column:1/-1;justify-content:flex-start}
  .cc-receipt-upload .btn{width:100%}
}


/* =========================================================
   v1.4.28 - vaste creditcardverwerkingsdag + losse stortingen
   ========================================================= */
.cc-settlement-status{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.cc-partial-settle-section>summary{
  color:#365fc0;
}
.cc-settlement-history{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--line);
}
.cc-settlement-history h4{
  margin:0 0 7px;
  font-size:10px;
}
.cc-settlement-history-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:8px 0;
  border-bottom:1px solid var(--line);
}
.cc-settlement-history-row:last-child{
  border-bottom:0;
}
.cc-settlement-history-row>div{
  min-width:0;
}
.cc-settlement-history-row>div strong{
  display:block;
  font-size:9px;
}
.cc-settlement-history-row>div small{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:8px;
  line-height:1.35;
}
.cc-settlement-history-row>strong{
  flex:0 0 auto;
  font-size:10px;
}
@media(max-width:700px){
  .cc-settlement-status{
    grid-template-columns:1fr;
  }
  .cc-settlement-history-row{
    align-items:flex-start;
  }
}


/* =========================================================
   v1.4.29 - compacte creditcard uitschuifmenu's
   ========================================================= */
.cc-detail-card{
  align-self:start;
}
.cc-accordion-item{
  margin-top:8px;
}
.cc-accordion-summary{
  display:grid!important;
  grid-template-columns:30px minmax(0,1fr) auto 18px;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:8px 10px!important;
}
.cc-accordion-icon{
  width:28px;height:28px;border-radius:8px;
  display:grid;place-items:center;
  background:#eef3ff;color:#4269c7;
  font-size:13px;font-weight:900;
}
.cc-accordion-copy{min-width:0}
.cc-accordion-copy strong{
  display:block;font-size:10px;line-height:1.2;
}
.cc-accordion-copy small{
  display:block;margin-top:2px;color:var(--muted);font-size:7px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cc-accordion-value{
  font-size:8px;font-weight:800;color:var(--muted);white-space:nowrap;
}
.cc-accordion-chevron{
  font-size:17px;color:var(--muted);text-align:center;
  transition:transform .16s ease;
}
.cc-accordion-item[open] .cc-accordion-chevron{transform:rotate(180deg)}
.cc-accordion-item[open]>.cc-accordion-summary{
  background:rgba(91,92,240,.035);
}
.cc-accordion-item>.cc-section-body{
  padding:10px;
}
.theme-dark .cc-accordion-icon{
  background:#1f304c;color:#9db8ff;
}
@media(max-width:700px){
  .cc-accordion-summary{
    grid-template-columns:30px minmax(0,1fr) 18px;
  }
  .cc-accordion-value{
    grid-column:2;
    grid-row:2;
    justify-self:start;
    margin-top:-3px;
  }
  .cc-accordion-chevron{
    grid-column:3;
    grid-row:1 / span 2;
  }
  .cc-accordion-copy small{white-space:normal}
}


/* =========================================================
   v1.4.30 - creditcard beter leesbaar op desktop en tablet
   ========================================================= */

/* Kaartkop */
.cc-detail-head h3{
  font-size:18px;
  line-height:1.25;
}
.cc-detail-head small{
  font-size:10px;
  line-height:1.35;
}
.cc-badge{
  font-size:9px;
  padding:4px 8px;
}

/* Belangrijkste bedragen */
.cc-money-grid span,
.cc-settlement-status span{
  font-size:9px;
  line-height:1.3;
}
.cc-money-grid strong{
  font-size:15px;
  line-height:1.25;
}
.cc-settlement-status strong{
  font-size:11px;
  line-height:1.3;
}
.cc-settlement-status small{
  font-size:9px;
  line-height:1.35;
}

/* Uitschuifmenu's */
.cc-accordion-summary{
  grid-template-columns:36px minmax(0,1fr) auto 24px;
  min-height:54px;
  gap:10px;
  padding:10px 12px!important;
}
.cc-accordion-icon{
  width:34px;
  height:34px;
  border-radius:10px;
  font-size:16px;
}
.cc-accordion-copy strong{
  font-size:12px;
  line-height:1.3;
}
.cc-accordion-copy small{
  font-size:9px;
  line-height:1.35;
  margin-top:3px;
}
.cc-accordion-value{
  font-size:10px;
  line-height:1.3;
}
.cc-accordion-chevron{
  font-size:22px;
  font-weight:800;
}

/* Inhoud van de opengeklapte menu's */
.cc-section-body{
  font-size:11px;
}
.cc-section-body label{
  font-size:10px;
}
.cc-section-body input,
.cc-section-body select,
.cc-section-body textarea{
  font-size:11px;
}
.cc-section-body .btn{
  font-size:10px;
  min-height:34px;
}
.cc-recurring-row strong{
  font-size:11px;
}
.cc-recurring-row small{
  font-size:9px;
}
.cc-payment-main strong{
  font-size:11px;
}
.cc-payment-main small{
  font-size:9px;
}
.cc-payment-amount{
  font-size:12px;
}
.cc-payment-docs .btn.compact{
  font-size:9px;
  padding:6px 8px;
}
.cc-settlement-history h4{
  font-size:11px;
}
.cc-settlement-history-row>div strong{
  font-size:10px;
}
.cc-settlement-history-row>div small{
  font-size:9px;
}
.cc-settlement-history-row>strong{
  font-size:11px;
}

/* Knoppen onder de kaart */
.cc-actions .btn{
  font-size:10px;
  min-height:34px;
  padding:7px 11px;
}

/* Bovenste beheerbalk */
.cc-page-toolbar-info strong{
  font-size:12px;
}
.cc-page-toolbar-info small{
  font-size:9px;
}
.cc-page-toolbar-icon{
  width:42px;
  height:42px;
  font-size:20px;
}
.cc-add-button{
  font-size:10px;
  min-height:36px;
  padding:8px 12px;
}

/* Tablet: nog iets ruimer leesbaar */
@media(min-width:768px) and (max-width:1280px){
  .cc-detail-head h3{font-size:19px}
  .cc-money-grid strong{font-size:16px}
  .cc-accordion-copy strong{font-size:13px}
  .cc-accordion-copy small{font-size:9.5px}
  .cc-accordion-value{font-size:10.5px}
  .cc-accordion-icon{width:36px;height:36px;font-size:17px}
  .cc-accordion-chevron{font-size:24px}
}

/* Mobiel blijft compact, maar niet piepklein */
@media(max-width:700px){
  .cc-accordion-summary{
    grid-template-columns:36px minmax(0,1fr) 24px;
  }
  .cc-accordion-copy strong{font-size:12px}
  .cc-accordion-copy small{font-size:9px}
  .cc-accordion-value{font-size:10px}
  .cc-money-grid strong{font-size:15px}
}


/* =========================================================
   v1.4.31 - beginsaldo / saldo-nulpunt voor uitgavenpotjes
   ========================================================= */
.pot-opening-balance-note{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-top:9px;
  padding:9px 10px;
  border:1px solid #cfe0f6;
  border-radius:10px;
  background:#f5f9ff;
}
.pot-opening-balance-note strong{
  flex:0 0 auto;
  font-size:9px;
}
.pot-opening-balance-note span{
  color:#5d7390;
  font-size:8px;
  line-height:1.4;
  text-align:right;
}
.theme-dark .pot-opening-balance-note{
  background:#14253d;
  border-color:#2d4a70;
}
.theme-dark .pot-opening-balance-note span{
  color:#adc0d8;
}
@media(max-width:700px){
  .pot-opening-balance-note{
    flex-direction:column;
  }
  .pot-opening-balance-note span{
    text-align:left;
  }
}


/* =========================================================
   v1.4.32 - potjes automatisch aanvullen + gedeelde boekhoudingen
   ========================================================= */
.pot-card-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:8px}
.pot-card-actions .btn{width:100%}
.pot-auto-topup-check{padding:10px 11px!important;border:1px solid #d9e3f5;border-radius:11px;background:#f7f9ff}
.pot-auto-topup-check span strong,.pot-auto-topup-check span small{display:block}
.pot-auto-topup-check span small{font-size:8px;color:var(--muted);margin-top:2px;line-height:1.4}
.pot-adjust-dialog{max-width:560px}

.bookkeeping-switcher{margin-left:auto;margin-right:8px}
.bookkeeping-switcher label{display:flex;align-items:center;gap:7px;font-size:9px;font-weight:800;color:var(--muted)}
.bookkeeping-switcher select{min-width:190px;max-width:260px;padding:8px 30px 8px 10px;font-size:10px;background:var(--panel)}
.bookkeeping-active-pill{margin-left:auto;margin-right:8px;padding:7px 10px;border-radius:999px;background:#eef3ff;color:#435fc2;font-size:9px;font-weight:900}
.sidebar-bookkeeping-owner{color:#c6d4ed!important;font-weight:800}
.bookkeeping-share-hero{display:flex;gap:13px;align-items:flex-start;margin-bottom:18px;padding:16px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(135deg,var(--panel),rgba(91,92,240,.06));box-shadow:var(--shadow)}
.bookkeeping-share-icon{width:44px;height:44px;display:grid;place-items:center;flex:0 0 auto;border-radius:12px;background:#edf3ff;color:#456ad2}.bookkeeping-share-icon .ui-icon{width:22px;height:22px}
.bookkeeping-share-hero h2{margin:0 0 4px}.bookkeeping-share-hero p{margin:0;color:var(--muted);font-size:10px;line-height:1.5}
.share-permission-note{padding:11px;border:1px solid #d8e4f6;border-radius:11px;background:#f7faff}.share-permission-note strong,.share-permission-note span{display:block}.share-permission-note span{margin-top:3px;color:var(--muted);font-size:9px;line-height:1.45}
.share-steps{margin:10px 0 0;padding-left:22px}.share-steps li{margin:7px 0;font-size:10px;line-height:1.45}
.share-user-list{display:grid}.share-user-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}.share-user-row:last-child{border-bottom:0}.share-user-row>div{min-width:0}.share-user-row strong,.share-user-row small{display:block}.share-user-row small{margin-top:2px;color:var(--muted);font-size:8px}.share-user-row form{margin:0}
.theme-dark .pot-auto-topup-check,.theme-dark .share-permission-note{background:#14253d;border-color:#2f4b70}.theme-dark .bookkeeping-share-icon{background:#1c304d}
@media(max-width:900px){.bookkeeping-switcher label{font-size:0}.bookkeeping-switcher select{min-width:150px;max-width:180px}.bookkeeping-switcher{margin-left:auto}.topbar-copy{min-width:0}}
@media(max-width:700px){.pot-card-actions{grid-template-columns:1fr}.bookkeeping-switcher{order:5;width:100%;margin:7px 0 0}.bookkeeping-switcher label{width:100%;font-size:9px}.bookkeeping-switcher select{width:100%;max-width:none}.bookkeeping-active-pill{display:none}.bookkeeping-share-hero{padding:13px}.share-user-row{align-items:flex-start;flex-direction:column}.share-user-row form{width:100%}.share-user-row form .btn{width:100%}}


/* =========================================================
   v1.4.33 - nieuw potje en wijzigen in apart invoermenu
   ========================================================= */
.pot-method-card{
  margin-top:16px;
}
.pot-form-modal{
  z-index:1200;
}
.pot-form-dialog{
  width:min(760px,calc(100vw - 28px));
  max-height:calc(100vh - 38px);
  overflow:auto;
  padding:20px;
}
.pot-form-close{
  text-decoration:none;
  color:var(--ink);
  display:grid;
  place-items:center;
}
.pot-form-fields{
  margin-top:14px;
}
.pot-form-fields label small{
  display:block;
  margin-top:4px;
  line-height:1.35;
}
.pot-form-actions{
  padding-top:4px;
}
.pot-form-danger{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--line);
}
.pot-form-danger form{
  margin:0;
}
@media(max-width:700px){
  .pot-form-dialog{
    width:calc(100vw - 16px);
    max-height:calc(100vh - 16px);
    padding:15px;
  }
}


/* =========================================================
   v1.4.34 - professioneel delen, boekhoudingpersonen, gezamenlijke potjes, bankkoppeling
   ========================================================= */
.sidebar-bookkeepers{margin:0 10px 10px;padding:10px;border:1px solid rgba(255,255,255,.09);border-radius:12px;background:rgba(255,255,255,.035)}
.sidebar-bookkeepers>small{display:block;color:#91a7c8;font-size:8px;margin-bottom:7px}.sidebar-bookkeeper-avatars{display:flex;gap:6px;flex-wrap:wrap}.sidebar-bookkeeper-avatars form{margin:0}.bookkeeper-avatar{border:0;background:transparent;padding:0;cursor:pointer}.bookkeeper-avatar span{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#263a60;color:white;font-size:9px;font-weight:900;border:2px solid transparent}.bookkeeper-avatar.active span{background:linear-gradient(135deg,#5572ff,#7b55ee);border-color:#fff}.sidebar-active-bookkeeping{display:block;color:white;font-size:9px;margin-top:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.share-pro-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border:1px solid var(--line);background:var(--panel);border-radius:15px;box-shadow:var(--shadow);margin-bottom:14px}.share-pro-header>div{display:flex;gap:11px;align-items:center}.share-pro-header h2{margin:0 0 2px}.share-pro-header p{margin:0;font-size:9px;color:var(--muted)}.share-pro-icon{width:38px;height:38px;border-radius:11px;background:#eef2ff;display:grid;place-items:center;color:#5966df}.share-pro-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:14px}.share-compact-card{padding:14px}.share-card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}.share-card-head h3{margin:0}.share-card-head small{color:var(--muted);font-size:8px}.share-person-row{border-top:1px solid var(--line)}.share-person-row>summary{list-style:none;display:grid;grid-template-columns:36px minmax(0,1fr) 20px;align-items:center;gap:8px;padding:10px 2px;cursor:pointer}.share-person-row>summary::-webkit-details-marker{display:none}.share-person-row summary strong,.share-open-list strong{display:block;font-size:10px}.share-person-row summary small,.share-open-list small{display:block;font-size:8px;color:var(--muted);margin-top:2px}.share-avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#eef2ff;color:#5265d8;font-weight:900;font-size:9px}.share-row-chevron{font-size:18px;color:var(--muted)}.share-person-body{padding:0 0 12px 42px}.share-access-form{display:grid;gap:9px}.permission-matrix{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:9px;background:rgba(120,140,170,.05);border:1px solid var(--line);border-radius:11px}.permission-matrix label{display:grid;grid-template-columns:minmax(0,1fr) 145px;align-items:center;gap:7px;font-size:9px}.permission-matrix select{font-size:9px;padding:7px}.share-open-list>div{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:8px;padding:8px 0;border-top:1px solid var(--line)}.share-open-list>div:first-child{border-top:0}.share-pro-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}.share-action-card{text-align:left;border:1px solid var(--line);background:var(--panel);border-radius:13px;padding:12px;cursor:pointer;box-shadow:var(--shadow)}.share-action-card>span{font-size:20px}.share-action-card strong,.share-action-card small{display:block}.share-action-card strong{margin-top:5px}.share-action-card small{font-size:8px;color:var(--muted);margin-top:2px}.share-modal{position:fixed;inset:0;z-index:1300;background:rgba(5,14,30,.58);display:grid;place-items:center;padding:16px}.share-modal[hidden]{display:none}.share-modal-dialog{position:relative;width:min(720px,100%);max-height:calc(100vh - 28px);overflow:auto;background:var(--panel);border-radius:16px;padding:18px;box-shadow:0 24px 70px rgba(0,0,0,.25)}.share-modal-close{position:absolute;right:12px;top:10px;border:0;background:transparent;font-size:24px;cursor:pointer}.whatsapp-share-result{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.whatsapp-share-result small{display:block;color:var(--muted);margin-top:2px}.btn.whatsapp{background:#1fa855;color:#fff;border-color:#1fa855}.share-open-invites{margin-top:12px}.share-open-invites>summary{cursor:pointer;font-weight:900}.share-invite-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-top:1px solid var(--line)}.share-invite-row small{display:block;color:var(--muted);font-size:8px}
.shared-pot-contributors{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}.shared-pot-contributors span{font-size:8px;padding:5px 7px;border-radius:999px;background:#eef4ff;color:#49648f}.shared-pot-contributors strong{margin-left:3px}
.bank-link-hero{display:flex;gap:12px;align-items:flex-start;padding:15px 16px;border:1px solid var(--line);border-radius:15px;background:linear-gradient(135deg,var(--panel),rgba(80,110,240,.06));box-shadow:var(--shadow);margin-bottom:14px}.bank-link-hero>span{width:40px;height:40px;border-radius:11px;background:#edf3ff;display:grid;place-items:center;color:#4f68dc}.bank-link-hero h2{margin:0 0 4px}.bank-link-hero p{margin:0;color:var(--muted);font-size:9px}.bank-provider-settings{margin-bottom:14px}.bank-provider-settings>summary{cursor:pointer;font-weight:900}.bank-link-grid{margin-top:14px}.bank-connection-card{margin-top:10px}.bank-connection-head{display:flex;justify-content:space-between;gap:12px;align-items:center}.bank-connection-head strong,.bank-connection-head small{display:block}.bank-connection-head small{font-size:8px;color:var(--muted);margin-top:2px}.bank-account-map{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,.7fr) auto;gap:8px;align-items:center;padding:9px 0;border-top:1px solid var(--line)}.bank-account-map span strong,.bank-account-map span small{display:block}.bank-account-map span small{font-size:8px;color:var(--muted)}
@media(max-width:900px){.share-pro-grid,.share-pro-actions{grid-template-columns:1fr}.permission-matrix{grid-template-columns:1fr}.bank-account-map{grid-template-columns:1fr}.whatsapp-share-result,.bank-connection-head{align-items:flex-start;flex-direction:column}}


/* =========================================================
   v1.4.35 - voornamen bij boekhoudingwissel + bonknop per potje
   ========================================================= */

/* Boekhoudingen linksboven: niet alleen initialen, maar ook voornaam */
.sidebar-bookkeeper-avatars{
  display:grid;
  gap:6px;
}
.sidebar-bookkeeper-avatars form{
  margin:0;
  width:100%;
}
.bookkeeper-avatar{
  width:100%;
  display:flex;
  align-items:center;
  gap:8px;
  padding:5px 7px;
  border:1px solid transparent;
  border-radius:10px;
  background:transparent;
  color:#dbe6f8;
  cursor:pointer;
  text-align:left;
}
.bookkeeper-avatar:hover{
  background:rgba(255,255,255,.06);
}
.bookkeeper-avatar.active{
  background:rgba(97,91,245,.19);
  border-color:rgba(129,121,255,.35);
}
.bookkeeper-avatar .bookkeeper-avatar-circle{
  width:30px;
  height:30px;
  flex:0 0 30px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#263a60;
  color:#fff;
  font-size:9px;
  font-weight:900;
  border:2px solid transparent;
}
.bookkeeper-avatar.active .bookkeeper-avatar-circle{
  background:linear-gradient(135deg,#5572ff,#7b55ee);
  border-color:#fff;
}
.bookkeeper-first-name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:10px;
  color:#f2f6ff;
}
.sidebar-active-bookkeeping{
  margin-top:8px;
}

/* Drie duidelijke acties per uitgavenpotje */
.pot-card-actions{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.pot-receipt-button{
  border-color:#d8e2f5;
  background:#f7f9ff;
}
.theme-dark .pot-receipt-button{
  background:#15233a;
  border-color:#2b4365;
}

@media(max-width:1000px){
  .pot-card-actions{
    grid-template-columns:1fr 1fr;
  }
  .pot-card-actions .pot-adjust-button{
    grid-column:1/-1;
  }
}
@media(max-width:700px){
  .pot-card-actions{
    grid-template-columns:1fr;
  }
  .pot-card-actions .pot-adjust-button{
    grid-column:auto;
  }
}


/* =========================================================
   v1.4.36 - begeleide Open Banking wizard
   ========================================================= */
.bank-wizard-hero{
  display:flex;
  align-items:center;
  gap:13px;
  padding:15px 16px;
  margin-bottom:12px;
  border:1px solid var(--line);
  border-radius:16px;
  background:linear-gradient(135deg,var(--panel),rgba(80,110,240,.06));
  box-shadow:var(--shadow);
}
.bank-wizard-hero-icon{
  width:42px;height:42px;flex:0 0 42px;
  display:grid;place-items:center;
  border-radius:12px;
  background:#edf3ff;color:#4f68dc;
}
.bank-wizard-hero-icon .ui-icon{width:21px;height:21px}
.bank-wizard-hero-copy{min-width:0;flex:1}
.bank-wizard-hero-copy h2{margin:0 0 3px;font-size:16px}
.bank-wizard-hero-copy p{margin:0;color:var(--muted);font-size:9px;line-height:1.45}
.bank-wizard-status{
  flex:0 0 auto;
  border-radius:999px;
  padding:6px 9px;
  font-size:8px;
  font-weight:900;
}
.bank-wizard-status.ready{background:#e8f7ef;color:#168057}
.bank-wizard-status.not-ready{background:#fff4dd;color:#9d6814}

.bank-wizard-progress{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;
  margin-bottom:12px;
}
.bank-step{
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel);
}
.bank-step>span{
  width:26px;height:26px;flex:0 0 26px;
  display:grid;place-items:center;
  border-radius:50%;
  background:#edf1f7;color:#73839a;
  font-size:9px;font-weight:900;
}
.bank-step strong,.bank-step small{display:block}
.bank-step strong{font-size:9px}
.bank-step small{margin-top:1px;color:var(--muted);font-size:7.5px}
.bank-step.done>span{background:#e7f7ef;color:#16815a}
.bank-step.current{border-color:#aebcff;background:#f7f8ff}
.bank-step.current>span{background:#5f63ef;color:#fff}
.bank-step.locked{opacity:.55}

.bank-wizard-card{
  margin-bottom:12px;
  padding:15px;
}
.bank-wizard-primary{
  border-color:#cbd6ff;
}
.bank-wizard-card-head{
  display:flex;
  align-items:flex-start;
  gap:11px;
  margin-bottom:13px;
}
.bank-wizard-card-head h3{margin:0 0 3px;font-size:13px}
.bank-wizard-card-head p{margin:0;color:var(--muted);font-size:8.5px;line-height:1.45}
.bank-step-number{
  width:32px;height:32px;flex:0 0 32px;
  display:grid;place-items:center;
  border-radius:10px;
  background:#5f63ef;color:#fff;
  font-size:12px;font-weight:900;
}

.bank-simple-explainer{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.bank-simple-step{
  display:flex;
  gap:8px;
  padding:11px;
  border:1px solid var(--line);
  border-radius:11px;
  background:rgba(100,120,180,.035);
}
.bank-simple-step>span{
  width:25px;height:25px;flex:0 0 25px;
  display:grid;place-items:center;
  border-radius:50%;
  background:#eef2ff;color:#5363da;
  font-size:8px;font-weight:900;
}
.bank-simple-step strong,.bank-simple-step small{display:block}
.bank-simple-step strong{font-size:9px}
.bank-simple-step small{font-size:8px;color:var(--muted);line-height:1.4;margin-top:3px}

.bank-help-actions{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:11px;
}
.bank-provider-simple-form{
  display:none;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--line);
}
.bank-provider-simple-form.show{display:block}
.bank-provider-fields{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.bank-provider-fields label{font-size:9px;font-weight:800}
.bank-provider-fields label small{
  display:block;
  color:var(--muted);
  font-size:7.5px;
  font-weight:400;
  line-height:1.4;
  margin-top:4px;
}
.bank-password-field{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:6px;
}
.bank-provider-safety{margin-top:10px}

.bank-ready-card{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
}
.bank-ready-check{
  width:30px;height:30px;flex:0 0 30px;
  display:grid;place-items:center;
  border-radius:50%;
  background:#e8f7ef;color:#168057;
  font-weight:900;
}
.bank-ready-card>div:nth-child(2){flex:1}
.bank-ready-card strong,.bank-ready-card small{display:block}
.bank-ready-card strong{font-size:9px}
.bank-ready-card small{font-size:8px;color:var(--muted);margin-top:2px}

.bank-bank-picker{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.bank-bank-picker label{font-size:9px}
.bank-what-happens-next{
  grid-column:1/-1;
  display:flex;
  gap:9px;
  align-items:center;
  padding:9px 10px;
  border-radius:10px;
  background:#f5f8ff;
  border:1px solid #dce5fb;
}
.bank-what-happens-next>span{
  width:27px;height:27px;flex:0 0 27px;
  display:grid;place-items:center;
  border-radius:50%;
  background:#e8eeff;color:#5067dc;
  font-weight:900;
}
.bank-what-happens-next strong,.bank-what-happens-next small{display:block}
.bank-what-happens-next strong{font-size:8.5px}
.bank-what-happens-next small{font-size:7.5px;color:var(--muted);margin-top:2px}

.bank-section-title{
  margin-top:18px;
  margin-bottom:8px;
}
.bank-section-title h2{margin:0}
.bank-section-title p{margin:3px 0 0;color:var(--muted);font-size:8px}

.bank-empty-state{
  text-align:center;
  padding:22px;
}
.bank-empty-icon{
  width:38px;height:38px;margin:0 auto 8px;
  display:grid;place-items:center;
  border-radius:12px;
  background:#eef3ff;color:#5268da;
}
.bank-empty-state strong,.bank-empty-state small{display:block}
.bank-empty-state strong{font-size:10px}
.bank-empty-state small{font-size:8px;color:var(--muted);margin-top:3px}

.bank-connection-pro{margin-bottom:10px;padding:13px}
.bank-connection-pro-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
}
.bank-connection-brand{
  display:flex;align-items:center;gap:9px;min-width:0;
}
.bank-connection-brand-icon{
  width:34px;height:34px;flex:0 0 34px;
  display:grid;place-items:center;border-radius:10px;
  background:#edf3ff;color:#4f68dc;
}
.bank-connection-brand strong,.bank-connection-brand small{display:block}
.bank-connection-brand strong{font-size:10px}
.bank-connection-brand small{font-size:8px;color:var(--muted);margin-top:2px}
.bank-connection-actions{display:flex;gap:6px;align-items:center}
.bank-connection-more{position:relative}
.bank-connection-more>summary{list-style:none;cursor:pointer}
.bank-connection-more>summary::-webkit-details-marker{display:none}
.bank-connection-more-menu{
  position:absolute;right:0;top:calc(100% + 5px);
  min-width:130px;padding:7px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--panel);
  box-shadow:var(--shadow);
  z-index:10;
}
.bank-compact-alert{margin:10px 0 0}

.bank-sync-guide{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:6px;
  margin-top:10px;
}
.bank-sync-guide-item{
  display:flex;gap:6px;align-items:flex-start;
  padding:8px;border:1px solid var(--line);border-radius:9px;
}
.bank-sync-guide-item>span{
  width:21px;height:21px;flex:0 0 21px;
  display:grid;place-items:center;border-radius:50%;
  background:#eef1f6;color:#6d7c92;font-size:7px;font-weight:900;
}
.bank-sync-guide-item.done>span{background:#e5f7ee;color:#168057}
.bank-sync-guide-item.current>span{background:#5f63ef;color:#fff}
.bank-sync-guide-item strong,.bank-sync-guide-item small{display:block}
.bank-sync-guide-item strong{font-size:8px}
.bank-sync-guide-item small{font-size:7px;color:var(--muted);margin-top:2px;line-height:1.35}

.bank-account-easy{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:10px;align-items:center;
  padding:10px 0;
  border-top:1px solid var(--line);
}
.bank-account-easy-main strong,.bank-account-easy-main small{display:block}
.bank-account-easy-main strong{font-size:9px}
.bank-account-easy-main small{font-size:8px;color:var(--muted);margin-top:2px}
.bank-account-linked{
  display:flex;gap:7px;align-items:center;
  justify-self:end;
  padding:6px 8px;border-radius:9px;
  background:#edf8f2;
}
.bank-account-linked>span{color:#168057;font-weight:900}
.bank-account-linked strong,.bank-account-linked small{display:block}
.bank-account-linked strong{font-size:8px}
.bank-account-linked small{font-size:7px;color:#5e7e6f;margin-top:1px}
.bank-account-link-choice{
  display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap;
}
.bank-account-map-easy{
  display:flex;align-items:center;gap:5px;margin:0;
}
.bank-account-map-easy select{min-width:190px}
.bank-choice-or{font-size:7px;color:var(--muted)}

.bank-import-note{
  display:grid;
  grid-template-columns:32px minmax(0,1fr) auto;
  gap:8px;align-items:center;
  padding:9px 10px;margin-top:8px;
  border:1px solid #dfe7f7;border-radius:10px;
  background:#f8faff;
}
.bank-import-note>span{
  width:30px;height:30px;display:grid;place-items:center;
  border-radius:9px;background:#eef3ff;color:#4f68dc;
}
.bank-import-note strong,.bank-import-note small{display:block}
.bank-import-note strong{font-size:8.5px}
.bank-import-note small{font-size:7.5px;color:var(--muted);margin-top:2px;line-height:1.4}

.bank-advanced-settings{
  margin-top:16px;
}
.bank-advanced-settings>summary{
  cursor:pointer;
  font-size:8px;
  font-weight:800;
  color:var(--muted);
}

.theme-dark .bank-what-happens-next,
.theme-dark .bank-import-note{
  background:#14233a;
  border-color:#2b4365;
}
.theme-dark .bank-account-linked{
  background:#153329;
}
.theme-dark .bank-simple-step{
  background:#111b2c;
}

@media(max-width:900px){
  .bank-wizard-progress,
  .bank-simple-explainer,
  .bank-sync-guide{
    grid-template-columns:1fr 1fr;
  }
  .bank-provider-fields,
  .bank-bank-picker,
  .bank-account-easy{
    grid-template-columns:1fr;
  }
  .bank-account-link-choice,
  .bank-account-linked{
    justify-self:stretch;
  }
  .bank-account-link-choice{
    justify-content:flex-start;
  }
}

@media(max-width:620px){
  .bank-wizard-hero{
    align-items:flex-start;
    flex-wrap:wrap;
  }
  .bank-wizard-status{
    margin-left:55px;
  }
  .bank-wizard-progress,
  .bank-simple-explainer,
  .bank-sync-guide{
    grid-template-columns:1fr;
  }
  .bank-connection-pro-head{
    align-items:flex-start;
    flex-direction:column;
  }
  .bank-account-map-easy{
    width:100%;
    flex-direction:column;
    align-items:stretch;
  }
  .bank-account-map-easy select{
    min-width:0;
    width:100%;
  }
  .bank-import-note{
    grid-template-columns:32px 1fr;
  }
  .bank-import-note .btn{
    grid-column:1/-1;
  }
}


/* =========================================================
   v1.4.37 - compacte rekeningenpagina
   ========================================================= */
.accounts-page-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  margin-bottom:12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--panel);
  box-shadow:var(--shadow);
}
.accounts-page-toolbar-copy{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.accounts-page-toolbar-icon{
  width:36px;height:36px;flex:0 0 36px;
  display:grid;place-items:center;
  border-radius:10px;
  background:#eef3ff;
  color:#5269da;
}
.accounts-page-toolbar-icon .ui-icon{width:18px;height:18px}
.accounts-page-toolbar-copy strong,
.accounts-page-toolbar-copy small{display:block}
.accounts-page-toolbar-copy strong{font-size:11px}
.accounts-page-toolbar-copy small{font-size:8px;color:var(--muted);margin-top:2px}
.accounts-page-toolbar-actions{display:flex;gap:7px;align-items:center}

.accounts-baseline-compact{
  display:grid;
  grid-template-columns:minmax(240px,.75fr) minmax(0,1.25fr);
  gap:14px;
  align-items:end;
  padding:13px 14px;
  margin-bottom:15px;
}
.accounts-baseline-title{
  display:flex;
  align-items:flex-start;
  gap:9px;
}
.accounts-baseline-icon{
  width:34px;height:34px;flex:0 0 34px;
  display:grid;place-items:center;
  border-radius:10px;
  background:#edf3ff;
}
.accounts-baseline-title strong,
.accounts-baseline-title small{display:block}
.accounts-baseline-title strong{font-size:11px}
.accounts-baseline-title small{
  margin-top:3px;
  color:var(--muted);
  font-size:8px;
  line-height:1.4;
}
.accounts-baseline-form{
  display:grid;
  grid-template-columns:1.25fr .85fr .85fr auto;
  gap:8px;
  align-items:end;
}
.accounts-baseline-form label{
  font-size:8px;
  font-weight:800;
}
.accounts-baseline-form .actions{margin:0}
.accounts-baseline-form .btn{min-height:36px;white-space:nowrap}

.accounts-section-title{
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin-bottom:8px;
}
.accounts-section-title h2{margin:0}
.accounts-section-title p{
  margin:3px 0 0;
  color:var(--muted);
  font-size:8px;
}
.accounts-empty{padding:22px;text-align:center}

.accounts-card-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.account-pro-card{
  min-width:0;
  padding:13px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--panel);
  box-shadow:var(--shadow);
}
.account-pro-card.inactive{opacity:.62}
.account-pro-head{
  display:flex;
  align-items:center;
  gap:8px;
}
.account-pro-icon{
  width:34px;height:34px;flex:0 0 34px;
  display:grid;place-items:center;
  border-radius:10px;
  background:#eef3ff;
  color:#566add;
}
.account-pro-icon .ui-icon{width:17px;height:17px}
.account-pro-title{min-width:0;flex:1}
.account-pro-title strong,
.account-pro-title small{display:block}
.account-pro-title strong{
  font-size:10px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.account-pro-title small{font-size:7.5px;color:var(--muted);margin-top:2px}
.account-owner-pill{
  display:inline-flex;
  align-items:center;
  gap:4px;
  max-width:150px;
  padding:4px 7px;
  border-radius:999px;
  background:#f1f4fb;
  color:#4f6382;
  font-size:7.5px;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.account-owner-pill .ui-icon{width:11px;height:11px;flex:0 0 11px}

.account-pro-balance{
  margin-top:12px;
  padding:11px;
  border-radius:11px;
  background:linear-gradient(135deg,#f7f9ff,#f1f5ff);
}
.account-pro-balance span,
.account-pro-balance strong,
.account-pro-balance small{display:block}
.account-pro-balance span{font-size:7.5px;color:var(--muted)}
.account-pro-balance strong{font-size:18px;line-height:1.2;margin-top:2px}
.account-pro-balance small{font-size:7.5px;color:var(--muted);margin-top:3px}

.account-pro-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
  margin-top:7px;
}
.account-pro-stats>div{
  min-width:0;
  padding:8px;
  border-radius:9px;
  background:var(--soft);
}
.account-pro-stats span,
.account-pro-stats strong,
.account-pro-stats small{display:block}
.account-pro-stats span{font-size:7px;color:var(--muted)}
.account-pro-stats strong{font-size:9px;margin-top:2px}
.account-pro-stats small{font-size:7px;color:var(--muted);margin-top:2px}

.account-pro-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin-top:10px;
}
.account-pro-footer>small{
  color:var(--muted);
  font-size:7.5px;
}
.account-pro-actions{
  display:flex;
  align-items:center;
  gap:5px;
}
.account-pro-actions .btn{
  min-height:30px;
  padding:5px 8px;
  font-size:8px;
}
.account-more{position:relative}
.account-more>summary{
  list-style:none;
  cursor:pointer;
  min-width:34px;
}
.account-more>summary::-webkit-details-marker{display:none}
.account-more-menu{
  position:absolute;
  right:0;
  top:calc(100% + 5px);
  z-index:40;
  min-width:135px;
  padding:6px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--panel);
  box-shadow:var(--shadow);
}
.account-more-menu form{margin:0}
.account-more-menu .btn{
  width:100%;
  justify-content:flex-start;
  margin:2px 0;
}

/* Rekening toevoegen/wijzigen en saldo bijwerken */
.account-modal{
  position:fixed;
  inset:0;
  z-index:1250;
  display:grid;
  place-items:center;
  padding:18px;
  background:rgba(9,19,38,.48);
  backdrop-filter:blur(3px);
}
.account-modal-dialog{
  position:relative;
  width:min(760px,calc(100vw - 28px));
  max-height:calc(100vh - 36px);
  overflow:auto;
  padding:19px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--panel);
  box-shadow:0 24px 70px rgba(10,25,55,.25);
}
.account-balance-dialog{width:min(610px,calc(100vw - 28px))}
.account-modal-close{
  position:absolute;
  right:12px;
  top:10px;
  width:32px;height:32px;
  display:grid;place-items:center;
  border-radius:9px;
  text-decoration:none;
  color:var(--ink);
  font-size:20px;
}
.account-modal-close:hover{background:var(--soft)}
.account-modal-head{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding-right:42px;
  margin-bottom:14px;
}
.account-modal-icon{
  width:38px;height:38px;flex:0 0 38px;
  display:grid;place-items:center;
  border-radius:11px;
  background:#edf3ff;
  color:#5269da;
}
.account-modal-icon.danger{background:#fff0f1;color:#bd3543}
.account-modal-icon .ui-icon{width:18px;height:18px}
.account-modal-head h2{margin:0 0 3px;font-size:14px}
.account-modal-head p{margin:0;color:var(--muted);font-size:8.5px}
.account-modal-form label small{
  display:block;
  margin-top:4px;
  line-height:1.35;
}
.account-delete-impact{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
  margin:10px 0;
}
.account-delete-impact>div{
  padding:8px;
  border-radius:9px;
  background:var(--soft);
}
.account-delete-impact span,
.account-delete-impact strong{display:block}
.account-delete-impact span{font-size:7px;color:var(--muted)}
.account-delete-impact strong{font-size:11px;margin-top:2px}

.theme-dark .account-pro-balance{
  background:linear-gradient(135deg,#14233a,#172943);
}
.theme-dark .account-owner-pill{
  background:#19283e;
  color:#c7d6ec;
}

@media(max-width:1050px){
  .accounts-baseline-compact{
    grid-template-columns:1fr;
  }
  .accounts-baseline-form{
    grid-template-columns:1fr 1fr 1fr auto;
  }
}
@media(max-width:800px){
  .accounts-card-grid{
    grid-template-columns:1fr;
  }
  .accounts-baseline-form{
    grid-template-columns:1fr 1fr;
  }
  .accounts-baseline-form .actions{
    grid-column:1/-1;
  }
  .accounts-page-toolbar{
    align-items:flex-start;
    flex-direction:column;
  }
}
@media(max-width:560px){
  .accounts-page-toolbar-actions{
    width:100%;
  }
  .accounts-page-toolbar-actions .btn{
    flex:1;
  }
  .accounts-baseline-form{
    grid-template-columns:1fr;
  }
  .account-pro-head{
    flex-wrap:wrap;
  }
  .account-owner-pill{
    order:4;
    max-width:none;
  }
  .account-pro-stats{
    grid-template-columns:1fr;
  }
  .account-pro-footer{
    align-items:flex-start;
    flex-direction:column;
  }
  .account-pro-actions{
    width:100%;
    flex-wrap:wrap;
  }
  .account-pro-actions>a.btn{
    flex:1;
  }
  .account-modal{
    padding:8px;
  }
  .account-modal-dialog{
    width:calc(100vw - 16px);
    max-height:calc(100vh - 16px);
    padding:15px;
  }
}


/* =========================================================
   v1.4.38 - Nederlandstalige bankwizard + grotere leesbaarheid
   ========================================================= */

/* Algemeen groter maken zonder de pagina lomp te maken */
.bank-wizard-hero{
  padding:18px 19px;
}
.bank-wizard-hero-icon{
  width:48px;
  height:48px;
  flex-basis:48px;
}
.bank-wizard-hero-icon .ui-icon{
  width:24px;
  height:24px;
}
.bank-wizard-hero-copy h2{
  font-size:20px;
  margin-bottom:5px;
}
.bank-wizard-hero-copy p{
  font-size:12px;
  line-height:1.55;
}
.bank-wizard-status{
  font-size:11px;
  padding:7px 11px;
}

/* Bovenste 4 stappen */
.bank-wizard-progress{
  gap:9px;
}
.bank-step{
  padding:11px 12px;
  gap:10px;
}
.bank-step>span{
  width:30px;
  height:30px;
  flex-basis:30px;
  font-size:11px;
}
.bank-step strong{
  font-size:11px;
}
.bank-step small{
  font-size:9.5px;
  margin-top:2px;
}

/* Kaarten */
.bank-wizard-card{
  padding:18px;
}
.bank-wizard-card-head{
  gap:12px;
  margin-bottom:16px;
}
.bank-wizard-card-head h3{
  font-size:17px;
  margin-bottom:5px;
}
.bank-wizard-card-head p{
  font-size:11.5px;
  line-height:1.55;
}
.bank-step-number{
  width:38px;
  height:38px;
  flex-basis:38px;
  font-size:14px;
}

/* Nieuwe Nederlandse walkthrough */
.bank-dutch-intro{
  padding:13px 14px;
  margin-bottom:12px;
  border:1px solid #d8e3fb;
  border-radius:12px;
  background:#f7f9ff;
}
.bank-dutch-intro strong{
  display:block;
  font-size:14px;
  margin-bottom:4px;
}
.bank-dutch-intro p{
  margin:0;
  color:#536782;
  font-size:11.5px;
  line-height:1.55;
}

.bank-dutch-walkthrough{
  display:grid;
  gap:9px;
}
.bank-guide-row{
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  gap:11px;
  align-items:flex-start;
  padding:13px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel);
}
.bank-guide-num{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#5f63ef;
  color:#fff;
  font-size:13px;
  font-weight:900;
}
.bank-guide-text strong{
  display:block;
  font-size:13px;
  line-height:1.35;
}
.bank-guide-text p{
  margin:4px 0 0;
  color:var(--muted);
  font-size:11px;
  line-height:1.55;
}
.bank-guide-text .btn{
  margin-top:9px;
}

.bank-site-button,
.bank-have-codes-button{
  min-height:40px;
  padding:9px 13px;
  font-size:11.5px;
  font-weight:850;
}

.bank-plain-language-note{
  display:grid;
  grid-template-columns:40px minmax(0,1fr);
  gap:10px;
  align-items:flex-start;
  margin-top:12px;
  padding:12px 13px;
  border-radius:12px;
  background:#eef8f4;
  border:1px solid #cdeadd;
}
.bank-note-icon{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:#dff3e9;
  font-size:18px;
}
.bank-plain-language-note strong{
  display:block;
  font-size:12.5px;
}
.bank-plain-language-note p{
  margin:3px 0 0;
  color:#527365;
  font-size:10.5px;
  line-height:1.5;
}

/* Providerformulier */
.bank-provider-simple-form{
  margin-top:15px;
  padding-top:15px;
}
.bank-provider-form-title{
  margin-bottom:11px;
}
.bank-provider-form-title strong,
.bank-provider-form-title small{
  display:block;
}
.bank-provider-form-title strong{
  font-size:14px;
}
.bank-provider-form-title small{
  margin-top:3px;
  color:var(--muted);
  font-size:10.5px;
}
.bank-provider-fields label{
  font-size:11.5px;
}
.bank-provider-fields input{
  font-size:12px;
  min-height:40px;
}
.bank-provider-fields label small{
  font-size:9.5px;
}
.bank-password-field .btn{
  min-height:40px;
  font-size:11px;
}
.bank-provider-actions .btn{
  min-height:40px;
  font-size:11px;
}
.bank-big-message{
  font-size:11px;
  line-height:1.5;
}

/* Stap 2 */
.bank-step-explanation{
  margin-bottom:12px;
  padding:12px 14px;
  border-radius:12px;
  background:#f7f9ff;
  border:1px solid #dbe4fa;
}
.bank-step-explanation strong{
  font-size:12.5px;
}
.bank-step-explanation ol{
  margin:7px 0 0 20px;
  padding:0;
}
.bank-step-explanation li{
  margin:4px 0;
  color:#536782;
  font-size:10.5px;
  line-height:1.45;
}
.bank-bank-picker label{
  font-size:11px;
}
.bank-bank-picker input,
.bank-bank-picker select{
  min-height:40px;
  font-size:11.5px;
}
.bank-bank-picker .btn{
  min-height:40px;
  font-size:11px;
}
.bank-what-happens-next{
  padding:11px 12px;
}
.bank-what-happens-next>span{
  width:32px;
  height:32px;
  flex-basis:32px;
}
.bank-what-happens-next strong{
  font-size:11px;
}
.bank-what-happens-next small{
  font-size:9.5px;
  line-height:1.45;
}

/* Gekoppelde banken ook beter leesbaar */
.bank-section-title h2{
  font-size:17px;
}
.bank-section-title p{
  font-size:10.5px;
  line-height:1.45;
}
.bank-empty-state strong{
  font-size:12px;
}
.bank-empty-state small{
  font-size:10px;
}
.bank-connection-brand strong{
  font-size:12px;
}
.bank-connection-brand small{
  font-size:9.5px;
}
.bank-connection-actions .btn{
  min-height:36px;
  font-size:10.5px;
}
.bank-sync-guide-item strong{
  font-size:10px;
}
.bank-sync-guide-item small{
  font-size:8.5px;
}
.bank-account-easy-main strong{
  font-size:11px;
}
.bank-account-easy-main small{
  font-size:9.5px;
}
.bank-import-note strong{
  font-size:10.5px;
}
.bank-import-note small{
  font-size:9px;
}
.bank-advanced-settings>summary{
  font-size:10.5px;
}

/* Donkere weergave */
.theme-dark .bank-dutch-intro,
.theme-dark .bank-step-explanation{
  background:#14233a;
  border-color:#2b4365;
}
.theme-dark .bank-dutch-intro p,
.theme-dark .bank-step-explanation li{
  color:#adc0d8;
}
.theme-dark .bank-plain-language-note{
  background:#153329;
  border-color:#28533f;
}
.theme-dark .bank-note-icon{
  background:#1d4435;
}
.theme-dark .bank-plain-language-note p{
  color:#b7d8c7;
}

@media(max-width:760px){
  .bank-provider-fields{
    grid-template-columns:1fr;
  }
  .bank-guide-row{
    grid-template-columns:34px minmax(0,1fr);
    padding:11px;
  }
  .bank-wizard-hero-copy h2{
    font-size:18px;
  }
  .bank-wizard-hero-copy p{
    font-size:11px;
  }
}


/* =========================================================
   v1.4.39 - algemene leesbaarheid voor de hele site
   Doel: duidelijker en groter zonder de compacte indeling kwijt te raken.
   ========================================================= */

/* Basis */
html{
  font-size:16px;
}
body{
  font-size:15px;
  line-height:1.5;
  -webkit-text-size-adjust:100%;
  text-rendering:optimizeLegibility;
}

/* Algemene tekst */
p,
li,
td,
th,
label,
input,
select,
textarea,
button,
.btn,
summary,
details,
option{
  line-height:1.45;
}

/* Kleine teksten waren op meerdere schermen te klein */
small,
.muted,
.sub,
.hint,
.help-text,
.form-help,
.caption,
.meta,
.card small,
.table small,
.sidebar small{
  font-size:12px !important;
  line-height:1.45 !important;
}

/* Koppen */
h1{
  font-size:28px !important;
  line-height:1.2 !important;
}
h2{
  font-size:22px !important;
  line-height:1.25 !important;
}
h3{
  font-size:18px !important;
  line-height:1.3 !important;
}
h4{
  font-size:16px !important;
  line-height:1.35 !important;
}

/* Paginatitel bovenaan */
.page-title,
.page-header h1,
.page-header h2,
.topbar h1,
.topbar h2{
  font-size:21px !important;
  line-height:1.25 !important;
}

/* Zijmenu */
.sidebar{
  font-size:13px;
}
.sidebar a,
.sidebar button,
.sidebar summary,
.sidebar .nav-item,
.sidebar .menu-item{
  font-size:13px !important;
  line-height:1.4 !important;
}
.sidebar .section-label,
.sidebar .nav-section-title,
.sidebar .menu-section-title{
  font-size:11px !important;
  letter-spacing:.04em;
}
.sidebar .ui-icon,
.sidebar svg{
  width:17px;
  height:17px;
}

/* Bovenbalk / account rechtsboven */
.topbar,
.header,
.app-header{
  font-size:13px;
}
.topbar strong,
.header strong,
.app-header strong{
  font-size:13px !important;
}
.topbar small,
.header small,
.app-header small{
  font-size:11px !important;
}

/* Formulieren */
label{
  font-size:13px !important;
  font-weight:700;
}
input,
select,
textarea{
  font-size:14px !important;
  min-height:40px;
  padding-top:9px;
  padding-bottom:9px;
}
textarea{
  min-height:86px;
}
input::placeholder,
textarea::placeholder{
  font-size:13px;
}
.check-row,
.radio-row{
  font-size:13px !important;
}
.check-row strong,
.radio-row strong{
  font-size:13px !important;
}
.check-row small,
.radio-row small{
  font-size:11.5px !important;
}

/* Knoppen */
.btn,
button{
  font-size:13px !important;
  min-height:38px;
  line-height:1.2 !important;
}
.btn.compact,
button.compact{
  font-size:12px !important;
  min-height:32px;
}

/* Kaarten */
.card{
  font-size:14px;
}
.card>h2,
.card .card-title{
  font-size:19px !important;
}
.card>h3{
  font-size:17px !important;
}
.card strong{
  line-height:1.35;
}

/* Bedragen en kerncijfers */
.amount,
.money,
.metric strong,
.stat strong,
.kpi strong,
.summary-card strong,
.dashboard-card strong{
  font-size:17px;
}
.hero strong,
.hero-balance,
.balance-large{
  font-size:28px !important;
}

/* Tabellen */
table{
  font-size:13px;
}
th{
  font-size:12px !important;
  font-weight:800;
}
td{
  font-size:13px !important;
}
td strong{
  font-size:13px;
}

/* Statuslabels/pills */
.pill,
.badge,
.status,
.tag,
.chip{
  font-size:11px !important;
  line-height:1.25 !important;
  padding-top:4px;
  padding-bottom:4px;
}

/* Uitgavenpotjes */
.expense-pot-card,
.pot-card{
  font-size:13px;
}
.expense-pot-card strong,
.pot-card strong{
  font-size:13px;
}
.expense-pot-money span{
  font-size:11px !important;
}
.expense-pot-money strong{
  font-size:14px !important;
}
.pot-opening-balance-note strong{
  font-size:12px !important;
}
.pot-opening-balance-note span{
  font-size:11px !important;
}

/* Rekeningen */
.account-pro-title strong{
  font-size:14px !important;
}
.account-pro-title small{
  font-size:11px !important;
}
.account-owner-pill{
  font-size:11px !important;
}
.account-pro-balance span{
  font-size:11px !important;
}
.account-pro-balance strong{
  font-size:22px !important;
}
.account-pro-balance small{
  font-size:11px !important;
}
.account-pro-stats span{
  font-size:10.5px !important;
}
.account-pro-stats strong{
  font-size:13px !important;
}
.account-pro-stats small{
  font-size:10.5px !important;
}
.account-pro-footer>small{
  font-size:10.5px !important;
}
.account-pro-actions .btn{
  font-size:12px !important;
  min-height:34px;
}

/* Creditcards */
.cc-detail-head h3{
  font-size:19px !important;
}
.cc-detail-head small{
  font-size:12px !important;
}
.cc-money-grid span,
.cc-settlement-status span{
  font-size:11px !important;
}
.cc-money-grid strong{
  font-size:16px !important;
}
.cc-settlement-status strong{
  font-size:13px !important;
}
.cc-accordion-copy strong{
  font-size:13px !important;
}
.cc-accordion-copy small{
  font-size:11px !important;
}
.cc-accordion-value{
  font-size:12px !important;
}
.cc-section-body,
.cc-section-body label,
.cc-section-body input,
.cc-section-body select,
.cc-section-body textarea{
  font-size:13px !important;
}

/* Bankwizard */
.bank-wizard-hero-copy h2{
  font-size:22px !important;
}
.bank-wizard-hero-copy p{
  font-size:13px !important;
}
.bank-step strong{
  font-size:12.5px !important;
}
.bank-step small{
  font-size:10.5px !important;
}
.bank-wizard-card-head h3{
  font-size:18px !important;
}
.bank-wizard-card-head p{
  font-size:12.5px !important;
}
.bank-guide-text strong{
  font-size:14px !important;
}
.bank-guide-text p{
  font-size:12px !important;
}
.bank-provider-fields label{
  font-size:13px !important;
}
.bank-provider-fields label small{
  font-size:11px !important;
}
.bank-section-title p{
  font-size:11.5px !important;
}

/* Dashboard */
.dashboard-card,
.dashboard-section,
.quick-card{
  font-size:13px;
}
.dashboard-card h3,
.dashboard-section h3{
  font-size:16px !important;
}
.dashboard-card small,
.dashboard-section small{
  font-size:11px !important;
}

/* Modals */
.account-modal-head h2,
.pot-book-heading h2,
.modal h2,
.dialog h2{
  font-size:20px !important;
}
.account-modal-head p,
.pot-book-heading p,
.modal p,
.dialog p{
  font-size:12px !important;
}

/* Leesbaarheid van links */
a{
  text-underline-offset:2px;
}

/* Desktop met veel ruimte: iets meer adem */
@media(min-width:1200px){
  body{
    font-size:15.5px;
  }
  .main-content,
  .page-content,
  main{
    line-height:1.5;
  }
}

/* Tablet */
@media(min-width:700px) and (max-width:1199px){
  body{
    font-size:15px;
  }
  .sidebar a,
  .sidebar button,
  .sidebar summary{
    font-size:13px !important;
  }
  input,
  select,
  textarea{
    font-size:14px !important;
  }
}

/* Mobiel: groot genoeg om te lezen zonder te hoeven zoomen */
@media(max-width:699px){
  body{
    font-size:15px;
  }
  h1{
    font-size:24px !important;
  }
  h2{
    font-size:20px !important;
  }
  h3{
    font-size:17px !important;
  }
  small,
  .muted,
  .sub,
  .hint,
  .help-text{
    font-size:11.5px !important;
  }
  input,
  select,
  textarea{
    font-size:16px !important; /* voorkomt automatisch inzoomen op mobiel */
    min-height:42px;
  }
  .btn,
  button{
    font-size:13px !important;
    min-height:40px;
  }
}
\n\n/* =========================================================\n   v1.4.40 - bank koppelen tijdelijk alleen voor beheerders\n   ========================================================= */\n.bank-admin-only-card{\n  display:grid;\n  grid-template-columns:58px minmax(0,1fr);\n  gap:15px;\n  align-items:flex-start;\n  max-width:900px;\n  margin:20px auto;\n  padding:22px;\n}\n.bank-admin-only-icon{\n  width:54px;height:54px;\n  display:grid;place-items:center;\n  border-radius:15px;\n  background:#fff3dc;color:#9b6818;\n  font-size:25px;\n}\n.bank-admin-only-card h2{margin:0 0 8px;font-size:22px!important}\n.bank-admin-only-card p{margin:0 0 9px;font-size:14px;line-height:1.55}\n@media(max-width:650px){.bank-admin-only-card{grid-template-columns:1fr}}\n

/* =========================================================
   v1.4.41 - mobiele bovenbalk en algemene mobiele leesbaarheid
   ========================================================= */

@media(max-width:760px){
  html{
    scroll-padding-top:calc(105px + env(safe-area-inset-top));
  }
  body{
    min-height:100dvh;
    font-size:16px!important;
    line-height:1.55!important;
    padding-bottom:calc(96px + env(safe-area-inset-bottom))!important;
  }

  /* Bovenkant: nooit meer onder statusbalk/notch verdwijnen */
  .topbar{
    position:sticky!important;
    top:0!important;
    z-index:100!important;
    min-height:92px!important;
    height:auto!important;
    padding-top:max(16px,calc(env(safe-area-inset-top) + 10px))!important;
    padding-right:13px!important;
    padding-bottom:12px!important;
    padding-left:13px!important;
    gap:10px!important;
    align-items:center!important;
    overflow:visible!important;
    background:rgba(248,250,254,.97)!important;
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    box-shadow:0 2px 12px rgba(25,41,68,.08)!important;
  }
  .menu-btn{
    width:48px!important;
    height:48px!important;
    min-height:48px!important;
    flex:0 0 48px!important;
    border-radius:14px!important;
  }
  .menu-btn .ui-icon{
    width:25px!important;
    height:25px!important;
  }
  .topbar-page-icon{
    width:48px!important;
    height:48px!important;
    flex:0 0 48px!important;
    border-radius:14px!important;
  }
  .topbar-page-icon .ui-icon{
    width:25px!important;
    height:25px!important;
  }
  .topbar-copy{
    min-width:0!important;
    flex:1 1 auto!important;
    overflow:visible!important;
    padding:2px 0!important;
  }
  .topbar-copy h1,
  .topbar h1{
    margin:0!important;
    padding:0!important;
    font-size:24px!important;
    line-height:1.22!important;
    font-weight:800!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
  .topbar-copy p,
  .topbar p{
    margin:4px 0 0!important;
    font-size:13px!important;
    line-height:1.35!important;
    white-space:normal!important;
  }
  .bookkeeping-active-pill{
    display:none!important;
  }

  /* Pagina-inhoud iets ruimer van de randen */
  .content{
    padding:16px 13px 28px!important;
  }
  .card{
    padding:17px!important;
    border-radius:16px!important;
  }

  /* Algemene mobiele tekstgrootte */
  p,
  li,
  td,
  label,
  details,
  summary{
    font-size:14px!important;
    line-height:1.5!important;
  }
  small,
  .muted,
  .sub,
  .hint,
  .help-text,
  .form-help,
  .caption,
  .meta,
  .card small,
  .table small{
    font-size:12.5px!important;
    line-height:1.45!important;
  }
  h1{font-size:25px!important}
  h2{font-size:21px!important}
  h3{font-size:18px!important}
  h4{font-size:16px!important}

  /* Knoppen en formulieren */
  .btn,
  button{
    min-height:44px!important;
    font-size:14px!important;
    line-height:1.25!important;
  }
  input,
  select,
  textarea{
    min-height:46px!important;
    font-size:16px!important;
    line-height:1.35!important;
  }
  label{
    font-size:14px!important;
  }

  /* Dashboard: het blauwe saldo-blok */
  .balance-hero{
    padding:22px 18px!important;
    border-radius:22px!important;
  }
  .eyebrow{
    font-size:14px!important;
    line-height:1.35!important;
  }
  .hero-icon{
    width:20px!important;
    height:20px!important;
  }
  .hero-balance{
    font-size:40px!important;
    line-height:1.15!important;
    margin:10px 0 7px!important;
  }
  .hero-note{
    font-size:12.5px!important;
    line-height:1.5!important;
  }
  .hero-action{
    min-height:48px!important;
    font-size:14px!important;
  }
  .balance-hero-stats{
    grid-template-columns:1fr 1fr!important;
    gap:12px 10px!important;
    margin-top:19px!important;
    padding-top:17px!important;
  }
  .balance-hero-stats span{
    font-size:12.5px!important;
    line-height:1.35!important;
  }
  .balance-hero-stats strong{
    font-size:17px!important;
    line-height:1.3!important;
  }
  .hero-pot-note{
    font-size:13px!important;
    line-height:1.55!important;
    padding-top:12px!important;
    margin-top:14px!important;
  }
  .hero-baseline-note{
    font-size:12px!important;
    line-height:1.5!important;
    padding-top:10px!important;
    margin-top:10px!important;
  }

  /* Vier dashboardtegels */
  .dashboard-metrics{
    gap:10px!important;
  }
  .dashboard-metrics .metric-pro{
    min-height:124px!important;
    padding:15px!important;
  }
  .metric-icon{
    width:40px!important;
    height:40px!important;
    margin-bottom:10px!important;
  }
  .metric-icon .ui-icon{
    width:21px!important;
    height:21px!important;
  }
  .dashboard-metrics .metric-pro small,
  .metric-pro small{
    font-size:12.5px!important;
    line-height:1.35!important;
  }
  .dashboard-metrics .metric-pro strong,
  .metric-pro strong{
    font-size:23px!important;
    line-height:1.25!important;
  }
  .dashboard-metrics .metric-pro .sub,
  .metric-pro .sub{
    font-size:12px!important;
    line-height:1.4!important;
  }

  /* Sectiekoppen, kaarten en rekeninginformatie */
  .section-title h2{
    font-size:20px!important;
    line-height:1.3!important;
  }
  .account-name,
  .account-pro-title strong{
    font-size:14px!important;
  }
  .account-balance,
  .account-pro-balance strong{
    font-size:25px!important;
  }
  .account-meta,
  .account-pro-title small,
  .account-pro-balance small,
  .account-pro-stats span,
  .account-pro-stats small{
    font-size:12px!important;
  }
  .account-pro-stats strong{
    font-size:14px!important;
  }

  /* Potjes */
  .expense-pot-money span{
    font-size:12px!important;
  }
  .expense-pot-money strong{
    font-size:15px!important;
  }
  .expense-pot-title,
  .expense-pot-card strong,
  .pot-card strong{
    font-size:14px!important;
  }

  /* Tabellen op mobiel */
  .table th,
  th{
    font-size:12.5px!important;
  }
  .table td,
  td{
    font-size:13.5px!important;
  }

  /* Onderste mobiele navigatie */
  .mobile-nav{
    z-index:110!important;
    left:8px!important;
    right:8px!important;
    bottom:7px!important;
    padding:7px 6px calc(7px + env(safe-area-inset-bottom))!important;
    border-radius:22px!important;
  }
  .mobile-nav a,
  .mobile-nav button{
    min-height:64px!important;
    font-size:12px!important;
    line-height:1.2!important;
    gap:5px!important;
    font-weight:800!important;
  }
  .mobile-nav .mnav-ico{
    width:25px!important;
    height:25px!important;
  }

  /* Zijmenu wanneer geopend */
  .sidebar nav a{
    min-height:50px!important;
    font-size:15px!important;
  }
  .sidebar .nav-group-summary{
    min-height:48px!important;
    font-size:13px!important;
  }
}

/* In geïnstalleerde iPhone/Android web-app extra veilige ruimte bovenaan. */
@media(max-width:760px) and (display-mode:standalone){
  .topbar{
    padding-top:calc(env(safe-area-inset-top) + 14px)!important;
  }
}


/* =========================================================
   v1.4.42 - saldo handmatig bijwerken vereenvoudigd
   ========================================================= */
.account-balance-dialog input[readonly]{
  background:#f1f4f9;
  color:#46566f;
  font-weight:800;
  cursor:default;
}
.account-balance-dialog input[name="adjusted_balance"]{
  font-weight:850;
  font-size:16px !important;
  border-color:#aebcff;
  background:#fbfcff;
}
.account-balance-dialog label{
  margin-bottom:2px;
}
@media(max-width:699px){
  .account-balance-dialog input[readonly],
  .account-balance-dialog input[name="adjusted_balance"]{
    font-size:17px !important;
    min-height:48px;
  }
}


/* =========================================================
   v1.4.43 - rekeningen als compacte dashboardkaarten
   ========================================================= */
.accounts-compact-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:11px 13px;
  margin-bottom:10px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--panel);
  box-shadow:var(--shadow);
}
.accounts-compact-topbar>div:first-child strong,
.accounts-compact-topbar>div:first-child small{display:block}
.accounts-compact-topbar>div:first-child strong{font-size:14px!important}
.accounts-compact-topbar>div:first-child small{margin-top:2px;font-size:11px!important;color:var(--muted)}
.accounts-compact-topbar-actions{display:flex;gap:7px;align-items:center}

.accounts-summary-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  margin-bottom:14px;
}
.accounts-summary-card{
  display:flex;
  gap:9px;
  align-items:center;
  min-width:0;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--panel);
  box-shadow:var(--shadow);
}
.accounts-summary-icon{
  width:34px;height:34px;flex:0 0 34px;
  display:grid;place-items:center;
  border-radius:10px;
  background:#eef3ff;color:#5269da;
}
.accounts-summary-icon .ui-icon{width:17px;height:17px}
.accounts-summary-card span,
.accounts-summary-card strong,
.accounts-summary-card small{display:block}
.accounts-summary-card span{font-size:10px!important;color:var(--muted)}
.accounts-summary-card strong{font-size:14px!important;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.accounts-summary-card small{font-size:10px!important;color:var(--muted);margin-top:2px}

.accounts-list-heading{margin:3px 0 8px}
.accounts-list-heading h2{margin:0;font-size:18px!important}
.accounts-list-heading p{margin:2px 0 0;color:var(--muted);font-size:11px!important}

.accounts-dashboard-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.account-dashboard-card{
  display:block;
  min-width:0;
  padding:12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--panel);
  box-shadow:var(--shadow);
  color:inherit;
  text-decoration:none;
  transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease;
}
.account-dashboard-card:hover{
  transform:translateY(-1px);
  border-color:#bcc9ef;
  box-shadow:0 12px 30px rgba(31,54,101,.10);
}
.account-dashboard-card.inactive{opacity:.62}
.account-dashboard-head{display:flex;align-items:center;gap:8px;min-width:0}
.account-dashboard-icon{
  width:34px;height:34px;flex:0 0 34px;
  display:grid;place-items:center;
  border-radius:10px;
  background:#eef3ff;color:#566add;
}
.account-dashboard-icon .ui-icon{width:17px;height:17px}
.account-dashboard-title{min-width:0;flex:1}
.account-dashboard-title strong,
.account-dashboard-title small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-dashboard-title strong{font-size:13px!important}
.account-dashboard-title small{font-size:10px!important;color:var(--muted);margin-top:1px}
.account-dashboard-arrow{font-size:24px;line-height:1;color:#7788a3}
.account-dashboard-balance{margin-top:10px}
.account-dashboard-balance span,
.account-dashboard-balance strong{display:block}
.account-dashboard-balance span{font-size:10px!important;color:var(--muted)}
.account-dashboard-balance strong{font-size:22px!important;margin-top:1px}
.account-dashboard-meta{display:flex;gap:5px;align-items:center;flex-wrap:wrap;margin-top:9px}
.account-dashboard-meta .account-owner-pill{max-width:190px}
.account-dashboard-iban{margin-top:7px;font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.account-dashboard-foot{
  display:flex;justify-content:space-between;gap:8px;
  margin-top:9px;padding-top:8px;border-top:1px solid var(--line);
  color:var(--muted);font-size:9.5px;
}
.account-dashboard-foot span:last-child{text-align:right}

.account-view-dialog{width:min(720px,calc(100vw - 28px))}
.account-view-hero{display:flex;align-items:center;gap:10px;padding-right:38px}
.account-view-icon{
  width:42px;height:42px;flex:0 0 42px;
  display:grid;place-items:center;border-radius:12px;
  background:#eef3ff;color:#566add;
}
.account-view-icon .ui-icon{width:20px;height:20px}
.account-view-title{min-width:0;flex:1}
.account-view-title h2{margin:0 0 2px;font-size:20px!important}
.account-view-title p{margin:0;color:var(--muted);font-size:11px!important}
.account-view-balance{
  margin-top:14px;padding:13px 14px;border-radius:12px;
  background:linear-gradient(135deg,#f7f9ff,#eef3ff);
}
.account-view-balance span,
.account-view-balance strong,
.account-view-balance small{display:block}
.account-view-balance span{font-size:11px!important;color:var(--muted)}
.account-view-balance strong{font-size:28px!important;margin-top:2px}
.account-view-balance small{font-size:11px!important;color:var(--muted);margin-top:2px}
.account-view-info-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:9px;
}
.account-view-info-grid>div{padding:9px 10px;border-radius:10px;background:var(--soft)}
.account-view-info-grid span,
.account-view-info-grid strong,
.account-view-info-grid small{display:block}
.account-view-info-grid span{font-size:10px!important;color:var(--muted)}
.account-view-info-grid strong{font-size:12.5px!important;margin-top:2px}
.account-view-info-grid small{font-size:10px!important;color:var(--muted);margin-top:1px}
.account-view-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px}
.account-view-baseline{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.account-view-section-title strong,
.account-view-section-title small{display:block}
.account-view-section-title strong{font-size:13px!important}
.account-view-section-title small{font-size:10px!important;color:var(--muted);margin-top:2px}
.account-view-baseline-form{
  display:grid;grid-template-columns:1fr 1fr auto;gap:7px;align-items:end;margin-top:9px;
}
.account-view-baseline-form label{font-size:11px!important}
.account-view-baseline-form .btn{min-height:40px;white-space:nowrap}
.account-view-danger-row{
  display:flex;justify-content:space-between;gap:7px;align-items:center;
  margin-top:13px;padding-top:12px;border-top:1px solid var(--line);
}
.account-view-danger-row form{margin:0}

.theme-dark .account-dashboard-icon,
.theme-dark .accounts-summary-icon,
.theme-dark .account-view-icon{background:#19283e}
.theme-dark .account-view-balance{background:linear-gradient(135deg,#14233a,#172943)}

@media(max-width:1050px){
  .accounts-dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .accounts-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:700px){
  .accounts-compact-topbar{align-items:flex-start;flex-direction:column}
  .accounts-compact-topbar-actions{width:100%}
  .accounts-compact-topbar-actions .btn{flex:1}
  .accounts-summary-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .accounts-summary-card:last-child{grid-column:1/-1}
  .accounts-dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .account-dashboard-card{padding:10px}
  .account-dashboard-icon{width:31px;height:31px;flex-basis:31px}
  .account-dashboard-title strong{font-size:12px!important}
  .account-dashboard-balance strong{font-size:19px!important}
  .account-dashboard-meta .account-owner-pill{max-width:100%}
  .account-dashboard-foot{display:block;font-size:9px}
  .account-dashboard-foot span{display:block}
  .account-dashboard-foot span:last-child{text-align:left;margin-top:2px}
  .account-view-dialog{width:calc(100vw - 16px)}
  .account-view-info-grid{grid-template-columns:1fr 1fr}
  .account-view-baseline-form{grid-template-columns:1fr}
  .account-view-actions{grid-template-columns:1fr 1fr}
}
@media(max-width:430px){
  .accounts-dashboard-grid{grid-template-columns:1fr}
  .accounts-summary-grid{grid-template-columns:1fr 1fr}
  .accounts-summary-card{padding:10px}
  .accounts-summary-card:last-child{grid-column:1/-1}
  .account-view-info-grid{grid-template-columns:1fr}
  .account-view-actions{grid-template-columns:1fr}
  .account-view-danger-row{align-items:stretch;flex-direction:column}
  .account-view-danger-row .btn{width:100%}
}

/* =========================================================
   v1.4.46 - compact salaris + steviger leesbaarheid
   ========================================================= */
:root{
  --muted:#5f6f85;
}
body{color:#142039;font-weight:500}
p,li,label,summary,td,th{color:#24324a}
.muted,.sub,.hint,.help-text,.form-help,.caption,.meta,.card small,.table small{color:#5f6f85!important;font-weight:600}
.card strong,summary strong,h1,h2,h3,h4{color:#142039;font-weight:800}

.salary-compact-intro{padding:14px 16px!important;margin-bottom:12px!important}
.salary-compact-intro h2{margin-bottom:2px!important}
.salary-compact-intro p{font-size:13px!important;font-weight:600;color:#64748b!important}
.salary-summary-cards{gap:9px!important;margin-bottom:10px!important}
.salary-summary-cards .metric{padding:12px!important;min-height:0!important}
.salary-summary-cards .metric-icon{width:36px!important;height:36px!important;flex-basis:36px!important}
.salary-summary-cards .metric small{font-size:12px!important;font-weight:700!important;color:#5a6b82!important}
.salary-summary-cards .metric strong{font-size:19px!important;color:#142039!important}
.salary-summary-cards .metric .sub{font-size:11.5px!important}
.salary-jump-card{text-decoration:none!important;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.salary-jump-card:hover{transform:translateY(-1px)}
.salary-jump-card:focus-visible{outline:3px solid rgba(46,112,230,.25);outline-offset:2px}

.salary-fixed-scroll{padding:0!important;overflow:hidden;scroll-margin-top:120px}
.salary-fixed-scroll>summary{list-style:none;display:grid;grid-template-columns:42px minmax(0,1fr) auto 20px;align-items:center;gap:10px;padding:13px 15px;cursor:pointer}
.salary-fixed-scroll>summary::-webkit-details-marker{display:none}
.salary-fixed-scroll-body{padding:0 15px 15px;border-top:1px solid var(--line)}
.salary-fixed-scroll .salary-fixed-head{padding-top:13px}
.salary-fixed-scroll[open] .salary-roll-chevron{transform:rotate(180deg)}
.salary-fixed-scroll .salary-fixed-list{max-height:460px;overflow:auto;padding-right:4px;overscroll-behavior:contain}
.salary-fixed-scroll .salary-fixed-list::-webkit-scrollbar{width:6px}
.salary-fixed-scroll .salary-fixed-list::-webkit-scrollbar-thumb{background:#c8d2e1;border-radius:10px}
.salary-fixed-row{padding:10px!important}
.salary-fixed-name strong{font-size:13px!important;color:#142039!important}
.salary-fixed-name small{font-size:11.5px!important}
.salary-fixed-actions .btn{font-size:12px!important}
.salary-roll-card{scroll-margin-top:120px}
.salary-roll-card>summary{padding:13px 15px!important}
.salary-roll-summary-copy strong{font-size:15px!important;color:#142039!important}
.salary-roll-summary-copy small{font-size:12px!important;font-weight:600!important;color:#617188!important}
.salary-roll-summary-value{font-size:13px!important;font-weight:800!important}

@media(max-width:700px){
  body{color:#101b31!important}
  p,li,label,summary{font-size:15px!important;font-weight:550;color:#26354d}
  small,.muted,.sub,.hint,.help-text,.form-help,.caption,.meta,.card small,.table small{font-size:13px!important;color:#5b6b81!important;font-weight:650!important}
  .salary-compact-intro{padding:13px!important}
  .salary-compact-intro p{font-size:13.5px!important;line-height:1.45!important}
  .salary-summary-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .salary-summary-cards .metric{padding:11px!important;border-radius:14px!important}
  .salary-summary-cards .metric-icon{width:32px!important;height:32px!important;flex-basis:32px!important}
  .salary-summary-cards .metric small{font-size:12.5px!important}
  .salary-summary-cards .metric strong{font-size:18px!important}
  .salary-summary-cards .metric .sub{font-size:11.5px!important;line-height:1.35!important}
  .salary-fixed-scroll>summary{grid-template-columns:38px minmax(0,1fr) auto 18px;padding:12px!important}
  .salary-fixed-scroll-body{padding:0 11px 12px}
  .salary-fixed-head p{font-size:12.5px!important}
  .salary-fixed-scroll .salary-fixed-list{max-height:52vh}
  .salary-fixed-row{padding:10px!important}
  .salary-fixed-name strong{font-size:14px!important}
  .salary-fixed-name small{font-size:12.5px!important}
  .salary-roll-card>summary{padding:12px!important;grid-template-columns:38px minmax(0,1fr) auto 18px!important}
  .salary-roll-summary-copy strong{font-size:16px!important}
  .salary-roll-summary-copy small{font-size:13px!important;line-height:1.4!important}
  .salary-roll-summary-value{font-size:13px!important}
}

/* =========================================================
   v1.4.47 - sitebrede rustige interface en leesbaarheid
   ========================================================= */
:root{
  --ink:#111c31;
  --muted:#52647c;
  --line:#d4deea;
}
body{color:var(--ink);font-weight:550}
.content{line-height:1.48}
h1,h2,h3,h4,h5,h6,.section-title h2{color:#111c31;font-weight:850;letter-spacing:-.015em}
p,li,td,th,label,summary{color:#223149}
.muted,.sub,.hint,.help-text,.form-help,.caption,.meta,.card small{color:#52647c!important;font-weight:650}
.card{padding:17px}
.card h2,.card h3{margin-top:0}
.metric small{font-size:13px;font-weight:700}
.metric strong{font-weight:850}
.btn{font-weight:750;border-color:#cdd8e6}
input,select,textarea{border-color:#c6d2e2;color:#111c31;font-weight:650}
input::placeholder,textarea::placeholder{color:#738198;opacity:1}
.table th{color:#44566e;font-weight:800}
.table td{color:#1e2d44;font-weight:550}
details.card>summary,details>summary{cursor:pointer}
details.card>summary{border-radius:14px}
details.card>summary:hover{background:rgba(47,111,237,.035)}

/* Een kaart die al een link is, voelt overal als één grote knop. */
a.card,.card[href],.metric[href]{cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
a.card:hover,.card[href]:hover,.metric[href]:hover{transform:translateY(-1px);border-color:#c5d3e6}
a.card:focus-visible,.card[href]:focus-visible,.metric[href]:focus-visible,details>summary:focus-visible{outline:3px solid rgba(47,111,237,.22);outline-offset:3px}

@media(max-width:760px){
  .content{padding:12px 11px 20px}
  .grid{gap:10px}
  .card{padding:13px;border-radius:16px}
  .topbar h1{font-size:22px!important;font-weight:850!important;color:#111c31!important}
  .topbar p{font-size:13px!important;font-weight:650!important;color:#52647c!important}
  h1{font-size:26px!important} h2{font-size:21px!important} h3{font-size:18px!important}
  p,li,label,summary,td{font-size:15px!important;color:#223149!important;font-weight:600}
  small,.muted,.sub,.hint,.help-text,.form-help,.caption,.meta,.card small{font-size:13.5px!important;line-height:1.4!important;color:#52647c!important;font-weight:650!important}
  .metric small{font-size:13px!important}
  .metric strong{font-size:21px!important;font-weight:850!important}
  .section-title{margin:15px 0 8px}
  .section-title h2{font-size:19px!important}
  .btn{font-size:15px!important;font-weight:800!important;min-height:46px}
  input,select,textarea{font-size:16px!important;font-weight:650!important;min-height:48px}
  .mobile-nav a,.mobile-nav button{font-size:11px!important;font-weight:800!important;color:#64748b}
  .mobile-nav .mnav-ico{width:23px;height:23px}
  .salary-summary-cards{gap:7px!important}
  .salary-summary-cards .metric{padding:10px!important}
  .salary-fixed-scroll .salary-fixed-list{max-height:48vh}
}


/* v1.4.50 - onderhoud, systeembeheer en verdere mobiele rust */
.maintenance-admin-banner{position:sticky;top:8px;z-index:40;display:flex;align-items:center;gap:12px;padding:11px 14px;margin-bottom:12px;border:1px solid #e8b44c;border-radius:14px;background:#fff4d6;color:#6f4a00;box-shadow:0 8px 24px rgba(111,74,0,.12)}
.maintenance-admin-banner span{flex:1;font-weight:650}.maintenance-admin-banner a{font-weight:850;color:#6f4a00}
.maintenance-admin-card.maintenance-on{border-color:#e4b44e;background:linear-gradient(135deg,#fffaf0,#fff)}
.maintenance-status{padding:6px 10px;border-radius:999px;font-size:12px;font-weight:900;background:#edf2f7;color:#52647c}.maintenance-status.on{background:#fff0c7;color:#855b00}.maintenance-status.off{background:#e8f7ee;color:#187445}
.maintenance-switch-row{display:flex!important;align-items:center;justify-content:space-between;gap:18px;padding:14px;border:1px solid var(--line);border-radius:14px;margin-bottom:14px}.maintenance-switch-row>span:first-child{display:grid;gap:4px}.maintenance-switch-row small{display:block}.switch{position:relative;display:inline-block;width:58px;height:32px;flex:0 0 58px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;inset:0;background:#cbd5e1;border-radius:999px;transition:.2s}.slider:before{content:"";position:absolute;width:24px;height:24px;left:4px;top:4px;background:white;border-radius:50%;box-shadow:0 2px 5px rgba(0,0,0,.18);transition:.2s}.switch input:checked+.slider{background:#e0a72f}.switch input:checked+.slider:before{transform:translateX(26px)}
.update-storage-card .section-title>strong{font-size:24px}.status-warn{color:#9a6700!important}.maintenance-card{text-align:center;max-width:520px}.maintenance-symbol{width:64px;height:64px;margin:0 auto 14px;border-radius:20px;display:grid;place-items:center;background:#fff0c7;color:#9a6700;font-size:34px;font-weight:900}.maintenance-lead{font-size:18px;font-weight:750}.maintenance-login-notice{text-align:left}
/* Rustiger pagina-opbouw: minder verticale leegte en duidelijkere klikdoelen. */
.content>.section-title:first-child{margin-top:2px}.actions{gap:8px}.card>.actions:last-child{margin-bottom:0}
@media(max-width:760px){.maintenance-admin-banner{top:6px;align-items:flex-start;flex-wrap:wrap;font-size:13px}.maintenance-admin-banner span{flex-basis:100%;order:3}.maintenance-switch-row{padding:12px}.system-admin-grid{gap:10px}.system-admin-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}.update-storage-card .section-title{align-items:flex-start}.update-storage-card .section-title>strong{font-size:20px}.card .actions{display:grid;grid-template-columns:1fr}.card .actions .btn{width:100%}}
/* v1.4.53 compact systeembeheer */
.system-admin-compact{gap:12px!important}.system-admin-compact .card{padding:16px!important}.system-admin-compact h2{margin:0 0 4px!important}.system-admin-compact p{margin:2px 0 8px!important}.system-admin-downloads{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important}.system-admin-downloads .admin-download-card{min-height:0!important}.system-admin-compact .maintenance-switch-row{padding:12px!important}.system-admin-compact textarea{min-height:72px!important}.system-admin-compact .system-status-list>div{padding:8px 0!important}@media(max-width:900px){.system-admin-downloads{grid-template-columns:1fr!important}.system-admin-compact .card{padding:14px!important}}

/* =========================================================
   v1.4.54 - één consistente interface voor alle pagina's
   ========================================================= */
:root{
  --ui-radius:14px;
  --ui-radius-small:10px;
  --ui-gap:12px;
  --ui-control-height:42px;
  --ui-content-width:1320px;
  --ui-card-shadow:0 5px 20px rgba(25,41,68,.065);
}

body{font-size:15px;line-height:1.48}
.main{background:var(--bg)}
.content{width:100%;max-width:var(--ui-content-width);padding:20px 22px 28px;line-height:1.48}
.grid{gap:var(--ui-gap)}
.grid.cards{gap:var(--ui-gap)}
.card,.table-wrap{border-radius:var(--ui-radius);border-color:var(--line);box-shadow:var(--ui-card-shadow)}
.card{padding:16px}
.card h2,.card h3{color:var(--ink)}
.card>h2:first-child{font-size:18px;line-height:1.25;margin:0 0 6px}
.card>h3:first-child{font-size:16px;line-height:1.25;margin:0 0 6px}
.card>p:first-of-type{margin-top:4px}
.card p:last-child{margin-bottom:0}
.section-title{margin:18px 0 9px;min-height:32px}
.section-title h2{font-size:18px;line-height:1.2;font-weight:850}
.section-title p{margin:3px 0 0;line-height:1.4}
.compact-section-title{margin:0 0 10px!important}

.metric{min-height:112px;display:flex;flex-direction:column;justify-content:center}
.metric strong{font-size:23px;font-weight:850;line-height:1.15}
.metric small{font-size:12.5px;font-weight:750}
.metric .sub{font-size:12px;line-height:1.35;margin-top:6px}
.metric-pro{min-height:112px}

.btn{min-height:var(--ui-control-height);padding:9px 13px;border-radius:var(--ui-radius-small);font-size:14px;font-weight:800;line-height:1.2;justify-content:center;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease,background .12s ease}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn svg{flex:0 0 auto}
.actions{gap:8px;margin-top:12px}

label{font-size:13px;font-weight:800;color:var(--ink)}
input,select,textarea{min-height:42px;padding:9px 11px;border-radius:var(--ui-radius-small);font-size:14px;font-weight:650;background:var(--panel)}
textarea{min-height:88px}
.form-grid{gap:12px}
.form-card{max-width:none}
.check-row{border-radius:var(--ui-radius-small)}

.table-wrap{overflow:auto}
.table{font-size:14px}
.table th,.table td{padding:10px 12px;font-size:13.5px;line-height:1.4}
.table th{font-size:12px;font-weight:850;letter-spacing:.01em}
.table tbody tr:hover td{background:rgba(47,111,237,.025)}

.alert{border-radius:var(--ui-radius-small);padding:11px 13px;margin-bottom:12px;font-weight:650}
.pill{font-size:11.5px;font-weight:800;padding:4px 8px}

/* Hoofdnavigatie overal even leesbaar. */
.topbar{min-height:74px;height:74px;padding:0 22px;gap:12px}
.topbar h1{font-size:20px;font-weight:850;line-height:1.2}
.topbar p{font-size:12px;font-weight:650}
.topbar-page-icon{flex:0 0 auto}
.user-chip{min-height:48px}
.sidebar{width:235px;padding:16px 12px}
.main{margin-left:235px;width:calc(100% - 235px)}
.sidebar-brand{padding:4px 7px 16px}
.nav-group-summary{font-weight:800}
.sidebar .nav-group-items a{font-weight:700}

/* Consistente klikbare kaarten. */
a.card,.quick-action,.dashboard-click-target,.account-card,.saving-goal-card,.expense-pot-card{transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
a.card:hover,.quick-action:hover,.dashboard-click-target:hover,.account-card:hover,.saving-goal-card:hover,.expense-pot-card:hover{transform:translateY(-1px)}

/* Snel-navigatie wordt automatisch uit de sectiekoppen opgebouwd. */
.page-jumpbar{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:9px 10px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 3px 14px rgba(25,41,68,.045);min-width:0}
.page-jumpbar-label{flex:0 0 auto;font-size:12px;font-weight:900;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.page-jumpbar-scroll{display:flex;gap:6px;overflow:auto;min-width:0;scrollbar-width:thin;padding:1px}
.page-jumpbar-scroll a{flex:0 0 auto;display:inline-flex;align-items:center;min-height:34px;padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:var(--bg);font-size:12.5px;font-weight:800;color:var(--ink);white-space:nowrap}
.page-jumpbar-scroll a:hover{border-color:var(--accent);color:var(--accent)}
.page-jump-target{scroll-margin-top:94px}

/* Eén details/accordion-stijl voor pagina's met uitklapbare onderdelen. */
details.card.uniform-details{padding:0;overflow:hidden}
details.card.uniform-details>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;cursor:pointer}
details.card.uniform-details>summary::-webkit-details-marker{display:none}
details.card.uniform-details>summary>span:first-child{display:grid;gap:2px}
details.card.uniform-details>summary small{font-size:12px;color:var(--muted)}
details.card.uniform-details .details-chevron{transition:transform .15s ease}
details.card.uniform-details[open] .details-chevron{transform:rotate(180deg)}
.uniform-details-body{padding:0 16px 16px;border-top:1px solid var(--line)}

/* Systeembeheer bewust compact houden. */
.system-admin-grid{display:grid;gap:12px}
.system-admin-hero{display:flex;align-items:center;gap:12px;min-height:76px}
.system-admin-hero p{margin:0;color:var(--muted);font-weight:650}
.system-admin-stats .metric{min-height:88px;padding:13px 15px}
.system-admin-stats .metric strong{font-size:20px}
.system-admin-downloads .admin-download-card{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;align-items:start;gap:8px 10px;min-height:142px}
.system-admin-downloads .admin-download-icon{grid-row:1/3}
.system-admin-downloads .admin-download-card h2{font-size:16px;margin:0 0 3px}
.system-admin-downloads .admin-download-card p{font-size:12.5px;margin:0;color:var(--muted);line-height:1.4}
.system-admin-downloads .admin-download-card form{grid-column:2;margin-top:auto}
.system-admin-downloads .admin-download-card .btn{min-height:38px;font-size:13px}
.system-maintenance-grid .card{min-height:0}
.compact-form-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px}
.compact-form-row .btn{margin-bottom:0;white-space:nowrap}
.update-storage-card .section-title>strong{font-size:20px}
.system-status-list>div{padding:7px 0!important}
.system-technical-card{margin-top:0!important}

/* Auth-, uitnodigings- en updaterpagina's dezelfde leesbaarheid. */
.auth-card{border-radius:18px;padding:24px;box-shadow:var(--ui-card-shadow)}
.auth-card h1{font-size:25px;line-height:1.2}
.auth-card label{font-size:13px}
.updater-page{font-size:14px}
.updater-page .card,.updater-page .updater-card{border-radius:var(--ui-radius)}

/* Uitleg- en invoerkaarten kunnen op mobiel compact worden geopend. */
.compact-card-toggle{display:none;border:0;background:transparent;color:var(--accent);font:inherit;font-weight:850;padding:3px 0 7px;align-items:center;gap:6px;cursor:pointer}
.compact-card-toggle>span:last-child{font-size:18px;transition:transform .15s ease}
.mobile-collapsible-card.compact-open>.compact-card-toggle>span:last-child{transform:rotate(180deg)}

/* Lange pagina's: minder losse witruimte, dezelfde afstand tussen hoofdblokken. */
body[data-page="salary"] .salary-roll-stack,
body[data-page="free"] .expense-pot-grid,
body[data-page="savings"] .savings-goal-grid{gap:12px!important}
body[data-page="imports"] .card,
body[data-page="storage"] .card,
body[data-page="bank-connect"] .card{margin-bottom:0}
body[data-page="subscriptions"] .section-title,
body[data-page="subscription-documents"] .section-title,
body[data-page="transactions"] .section-title{margin-top:14px}

@media(max-width:1050px){
  .sidebar{width:220px}
  .main{margin-left:220px;width:calc(100% - 220px)}
  .grid.cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .system-admin-downloads{grid-template-columns:1fr!important}
  .system-admin-downloads .admin-download-card{min-height:0}
}

@media(max-width:760px){
  :root{--ui-control-height:46px;--ui-gap:10px}
  body{font-size:15px;padding-bottom:calc(76px + env(safe-area-inset-bottom));color:var(--ink)}
  .sidebar{width:min(88vw,320px)}
  .main{margin-left:0;width:100%}
  .topbar{min-height:74px;height:auto;padding:calc(9px + env(safe-area-inset-top)) 12px 9px;gap:10px}
  .topbar h1{font-size:21px!important}
  .topbar p{font-size:12.5px!important}
  .topbar-page-icon{display:none}
  .user-chip{padding:6px 8px}
  .user-chip div{display:none}
  .content{padding:11px 10px 18px;max-width:none}
  .grid,.grid.cards,.grid.two,.grid.three{gap:10px}
  .card{padding:13px;border-radius:14px}
  .card>h2:first-child{font-size:18px!important}
  .section-title{margin:14px 0 8px}
  .section-title h2{font-size:18px!important}
  .metric,.metric-pro{min-height:98px;padding:12px!important}
  .metric strong{font-size:20px!important}
  .metric small{font-size:12.5px!important}
  .metric .sub{font-size:12px!important}
  .btn{min-height:46px;font-size:14px!important;border-radius:10px}
  input,select,textarea{min-height:48px;font-size:16px!important;border-radius:10px}
  label{font-size:13.5px!important}
  .actions{display:grid;grid-template-columns:1fr;gap:7px}
  .actions .btn{width:100%;min-width:0}

  .page-jumpbar{margin:0 0 10px;padding:7px 8px;gap:7px;border-radius:11px}
  .page-jumpbar-label{display:none}
  .page-jumpbar-scroll{gap:5px}
  .page-jumpbar-scroll a{min-height:34px;padding:6px 9px;font-size:12px}
  .page-jump-target{scroll-margin-top:88px}

  /* Tabellen worden op mobiel automatisch kaarten; geen horizontaal zoeken meer. */
  .table-wrap.mobile-table-cards{overflow:visible;border:0;background:transparent;box-shadow:none;border-radius:0}
  .mobile-table-cards .table{display:block;min-width:0;width:100%;background:transparent}
  .mobile-table-cards .table thead{display:none}
  .mobile-table-cards .table tbody{display:grid;gap:9px}
  .mobile-table-cards .table tbody tr{display:block;border:1px solid var(--line);border-radius:13px;background:var(--panel);box-shadow:var(--ui-card-shadow);overflow:hidden}
  .mobile-table-cards .table tbody td{display:grid;grid-template-columns:minmax(105px,38%) minmax(0,1fr);gap:10px;align-items:start;width:100%;padding:9px 11px!important;border-bottom:1px solid var(--line)!important;background:transparent!important;font-size:13.5px!important;overflow-wrap:anywhere}
  .mobile-table-cards .table tbody td:last-child{border-bottom:0!important}
  .mobile-table-cards .table tbody td::before{content:attr(data-label);font-size:11.5px;font-weight:850;color:var(--muted);text-transform:none;text-align:left}
  .mobile-table-cards .table tbody td.mobile-table-full{display:block}
  .mobile-table-cards .table tbody td.mobile-table-full::before,
  .mobile-table-cards .table tbody td[data-label=""]::before{display:none}
  .mobile-table-cards .table tbody td .btn{min-height:38px;font-size:12.5px!important;width:auto}
  .mobile-table-cards .table tbody td form{display:inline-flex!important;margin:3px 3px 3px 0}

  /* Nieuwe/toevoeg-formulieren en uitleg zijn op mobiel standaard dicht. */
  .compact-card-toggle{display:inline-flex}
  .mobile-collapsible-card:not(.compact-open)>:not(h2):not(.compact-card-toggle){display:none!important}
  .mobile-collapsible-card>h2{margin-bottom:1px!important}
  .mobile-collapsible-card.compact-open>.compact-card-toggle{margin-bottom:5px}

  .maintenance-switch-row{align-items:center;padding:10px!important}
  .maintenance-switch-row small{font-size:12px!important}
  .compact-form-row{grid-template-columns:1fr}
  .system-admin-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .system-admin-stats .metric{min-height:84px}
  .system-admin-downloads .admin-download-card{grid-template-columns:38px minmax(0,1fr);padding:12px!important}
  .system-admin-downloads .admin-download-card form{grid-column:1/-1}
  .system-maintenance-grid{grid-template-columns:1fr!important}
  .system-status-list>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:start}

  .auth-card{width:calc(100% - 20px);padding:21px 16px;border-radius:17px}
  .auth-card h1{font-size:25px!important}
}

/* De verschillende module-intro's en werkbalken gebruiken dezelfde basisvorm. */
.salary-compact-intro,
.pot-explainer,
.savings-info-banner,
.storage-compact-hero,
.bank-simple-explainer,
.bank-wizard-hero{
  border:1px solid var(--line)!important;
  border-radius:var(--ui-radius)!important;
  box-shadow:var(--ui-card-shadow)!important;
  padding:14px 15px!important;
  margin-bottom:12px!important;
}
.pot-toolbar,.fixed-list-toolbar,.cc-page-toolbar,.imports-bulk-toolbar,.wizard-toolbar{
  border-radius:var(--ui-radius)!important;
  gap:10px!important;
}

/* Formulieren en overzichtslijsten krijgen overal dezelfde rustige scheiding. */
.form-subsection,.bank-step,.target-group,.forecast-control-block{
  border-radius:var(--ui-radius-small)!important;
}
.kpi-line{padding:7px 0;font-size:13.5px}
.empty{padding:26px 18px;border-radius:var(--ui-radius)}

@media(max-width:760px){
  .salary-compact-intro,.pot-explainer,.savings-info-banner,.storage-compact-hero,.bank-simple-explainer,.bank-wizard-hero{padding:11px 12px!important;margin-bottom:9px!important}
  .pot-toolbar,.fixed-list-toolbar,.cc-page-toolbar,.imports-bulk-toolbar,.wizard-toolbar{padding:10px!important}
}

/* =========================================================
   v1.4.55 - vaste interactiestijl en veiliger updatecentrum
   ========================================================= */
button:disabled,.btn:disabled{opacity:.62;cursor:not-allowed;transform:none!important;box-shadow:none!important}
[data-href]{cursor:pointer}
[data-href]:focus-visible,.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid color-mix(in srgb,var(--accent) 38%,transparent);
  outline-offset:2px;
}
.updater-install-actions form[data-submitting="1"],
.js-update-install-form[data-submitting="1"]{opacity:.82}
.js-update-install-form [aria-busy="true"]{min-width:132px}

/* Dezelfde verticale cadans voor hoofdonderdelen op alle gewone pagina's. */
.content>.alert,.content>.page-jumpbar,.content>.grid,.content>.card,.content>.section-title{scroll-margin-top:94px}
.card>.actions:last-child,.card>form:last-child{margin-bottom:0}
.card .muted{line-height:1.45}
.table-wrap .table td .actions{margin-top:0}

@media(max-width:760px){
  [data-href]{-webkit-tap-highlight-color:transparent}
  .page-jumpbar{position:relative}
  .updater-install-actions{gap:8px}
  .updater-install-actions form,.updater-install-actions .btn{width:100%}
}

/* v1.4.56 - Boekhouding delen: maximaal 3 personen en account aanmaken via deel-link */
.share-limit-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 14px;padding:13px 15px;border:1px solid var(--line);border-radius:14px;background:var(--panel);box-shadow:var(--shadow)}
.share-limit-bar strong{display:block;font-size:15px;color:var(--text)}
.share-limit-bar small{display:block;margin-top:3px;font-size:12px;color:var(--muted);font-weight:700}
.share-limit-bar.is-full{border-color:rgba(220,150,30,.35);background:rgba(255,246,220,.5)}
.share-limit-note{margin-top:12px}
.share-action-card:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.share-pro-header p,.share-card-head small,.share-person-row summary small,.share-open-list small,.share-action-card small,.share-invite-row small{font-size:12px;line-height:1.45}
.share-person-row summary strong,.share-open-list strong{font-size:14px}
.share-action-card strong{font-size:15px}
.share-modal-dialog h2{font-size:22px;margin-right:32px}
.share-modal-dialog .muted{font-size:14px;line-height:1.55}
.share-modal-dialog label{font-weight:800;color:var(--text)}
.share-invite-auth{width:min(650px,calc(100% - 24px))}
.share-invite-owner{display:grid;gap:3px;margin:0 0 16px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:rgba(103,92,255,.06)}
.share-invite-owner strong{font-size:19px;color:var(--text)}
.share-invite-owner span{font-size:14px;color:var(--text)}
.share-invite-owner small{font-size:12px;color:var(--muted);font-weight:700}
.share-invite-choice{display:grid;grid-template-columns:1.15fr .85fr;gap:14px;margin-top:14px}
.share-invite-option{border:1px solid var(--line);border-radius:16px;padding:16px;background:var(--panel)}
.share-invite-option h2{font-size:18px;margin:0 0 6px}
.share-invite-option p{font-size:13px;line-height:1.5;margin:0 0 14px;color:var(--muted)}
.share-invite-option.existing-account{align-self:start}
.share-create-account-form{display:grid;gap:10px}
.share-create-account-form label{font-weight:800;color:var(--text)}
.share-create-account-form label small{display:block;margin-top:4px;font-size:11px;color:var(--muted);font-weight:700}
@media(max-width:720px){.share-limit-bar{align-items:flex-start}.share-invite-choice{grid-template-columns:1fr}.share-pro-header{align-items:flex-start;flex-direction:column}.share-pro-header>.btn{width:100%}}

/* v1.4.61 - persoonlijk dashboard */
.dashboard-personalize-row{display:flex;justify-content:flex-end;margin:0 0 14px}
.dashboard-customizer{width:100%}
.dashboard-customizer>summary{list-style:none;margin-left:auto;width:max-content;max-width:100%;display:flex;align-items:center;gap:8px;cursor:pointer;background:var(--card,#fff);border:1px solid var(--line,#dfe5ef);border-radius:12px;padding:9px 13px;font-weight:800;color:var(--text,#17243b);box-shadow:var(--shadow-soft,0 6px 18px rgba(15,35,70,.06));user-select:none}
.dashboard-customizer>summary::-webkit-details-marker{display:none}
.dashboard-customizer>summary .ui-icon{width:17px;height:17px;color:var(--accent,#5d5cf0)}
.dashboard-customizer>summary small{font-size:10px;color:var(--muted,#718096);background:var(--soft,#f1f5fb);padding:3px 7px;border-radius:999px}
.dashboard-customizer[open]>summary{border-color:color-mix(in srgb,var(--accent,#5d5cf0) 38%,var(--line,#dfe5ef))}
.dashboard-customizer-panel{margin-top:10px;background:var(--card,#fff);border:1px solid var(--line,#dfe5ef);border-radius:18px;padding:18px;box-shadow:var(--shadow-soft,0 8px 24px rgba(15,35,70,.07))}
.dashboard-customizer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px}
.dashboard-customizer-head strong{display:block;font-size:17px;color:var(--text,#17243b)}
.dashboard-customizer-head span{display:block;margin-top:4px;color:var(--muted,#718096);font-size:12px;line-height:1.5}
.dashboard-widget-choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.dashboard-widget-choice{position:relative;display:grid;grid-template-columns:38px minmax(0,1fr) 42px;align-items:center;gap:10px;min-height:76px;padding:11px 12px;border:1px solid var(--line,#dfe5ef);border-radius:14px;background:var(--card,#fff);cursor:pointer;transition:.16s ease}
.dashboard-widget-choice:hover{transform:translateY(-1px);box-shadow:var(--shadow-soft,0 6px 18px rgba(15,35,70,.06))}
.dashboard-widget-choice:has(input:checked){border-color:color-mix(in srgb,var(--accent,#5d5cf0) 42%,var(--line,#dfe5ef));background:color-mix(in srgb,var(--accent,#5d5cf0) 5%,var(--card,#fff))}
.dashboard-widget-choice input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.dashboard-widget-choice-icon{width:38px;height:38px;border-radius:11px;background:color-mix(in srgb,var(--accent,#5d5cf0) 10%,var(--card,#fff));color:var(--accent,#5d5cf0);display:grid;place-items:center}
.dashboard-widget-choice-icon .ui-icon{width:19px;height:19px}
.dashboard-widget-choice-copy{min-width:0}
.dashboard-widget-choice-copy strong{display:block;font-size:12px;color:var(--text,#17243b);margin-bottom:3px}
.dashboard-widget-choice-copy small{display:block;color:var(--muted,#718096);font-size:10px;line-height:1.35}
.dashboard-widget-switch{position:relative;width:38px;height:22px;border-radius:999px;background:color-mix(in srgb,var(--muted,#718096) 28%,transparent);transition:.16s ease}
.dashboard-widget-switch:after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;left:3px;top:3px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.2);transition:.16s ease}
.dashboard-widget-choice input:checked~.dashboard-widget-switch{background:var(--accent,#5d5cf0)}
.dashboard-widget-choice input:checked~.dashboard-widget-switch:after{transform:translateX(16px)}
.dashboard-widget-choice input:focus-visible~.dashboard-widget-switch{outline:3px solid color-mix(in srgb,var(--accent,#5d5cf0) 28%,transparent);outline-offset:3px}
.dashboard-customizer-actions{display:flex;justify-content:flex-end;margin-top:14px}
.dashboard-reset-form{display:flex;justify-content:flex-end;margin-top:8px}
.dashboard-reset-form .btn{font-size:11px}
.dashboard-empty-state{display:flex;align-items:center;gap:13px;margin-bottom:16px;padding:18px}
.dashboard-empty-state>.ui-icon{width:30px;height:30px;color:var(--accent,#5d5cf0)}
.dashboard-empty-state strong,.dashboard-empty-state span{display:block}
.dashboard-empty-state span{font-size:12px;color:var(--muted,#718096);margin-top:3px}
.dashboard-panels-adaptive,.dashboard-lower-adaptive{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))!important}

@media(max-width:950px){
  .dashboard-widget-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .dashboard-personalize-row{margin-bottom:10px}
  .dashboard-customizer>summary{width:100%;justify-content:center;min-height:46px;font-size:14px}
  .dashboard-customizer-panel{padding:14px;border-radius:16px}
  .dashboard-customizer-head strong{font-size:16px}
  .dashboard-customizer-head span{font-size:11px}
  .dashboard-widget-choice-grid{grid-template-columns:1fr;gap:8px}
  .dashboard-widget-choice{min-height:72px;grid-template-columns:40px minmax(0,1fr) 42px;padding:10px 11px}
  .dashboard-widget-choice-copy strong{font-size:13px}
  .dashboard-widget-choice-copy small{font-size:11px}
  .dashboard-customizer-actions,.dashboard-reset-form{justify-content:stretch}
  .dashboard-customizer-actions .btn,.dashboard-reset-form .btn{width:100%;justify-content:center;min-height:44px}
}