/* Shared Saldo design system. Layout and data hooks remain owned by the app. */
:root { --saldo-green:#19483e; --saldo-ink:#20332e; --saldo-muted:#63746e; --saldo-paper:#f1f3ee; --saldo-line:#dce3dc; --saldo-gold:#d9a514; }
.saldo-icon { display:inline-block; width:18px; height:18px; flex:none; vertical-align:middle; }
[data-saldo-icon] { display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; flex:none; }
button>svg[stroke="currentColor"] { stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
body { color:var(--saldo-ink); font-weight:500; }
/* Keep the existing typefaces, but give ordinary text and hierarchy more body. */
body .font-normal { font-weight:500; }
body .font-medium { font-weight:600; }
body .font-semibold { font-weight:600; }
body .font-bold { font-weight:700; }
body .font-extrabold { font-weight:800; }
body button,body select { font-weight:600; }
body input,body textarea { font-weight:500; }
body.feedback-dashboard { background:var(--saldo-paper); }
.app-main { background:var(--saldo-paper)!important; min-width:0; }
.saldo-wordmark { font-family:Inter,Arial,sans-serif; font-weight:900; font-size:48px; letter-spacing:-4px; line-height:1.1; color:var(--saldo-green); text-decoration:none; }
.saldo-wordmark span { color:var(--saldo-gold); }
.saldo-brand { display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.saldo-brand small { color:var(--saldo-muted); font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
.saldo-nav-icon { width:18px; height:18px; flex:none; stroke-width:1.6; }
.app-section-header { background:var(--saldo-paper)!important; border-color:var(--saldo-line)!important; }
.card { border-color:var(--saldo-line)!important; border-radius:16px!important; box-shadow:0 2px 3px #213f2d03!important; }
.btn-primary,.btn-success { background:var(--saldo-green)!important; color:#fff!important; border-radius:9px; }
.btn-primary:hover,.btn-success:hover { background:#10382f!important; }
.btn-outline { background:#fff; border-color:var(--saldo-line); color:var(--saldo-green); }
.field { border-color:var(--saldo-line); border-radius:8px; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:3px solid #b99024; outline-offset:3px; }
input[type=checkbox],input[type=radio] { accent-color:var(--saldo-green); }
.saldo-eyebrow { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:10px; text-transform:uppercase; letter-spacing:.14em; font-weight:600; }
.saldo-intro { display:flex; align-items:center; justify-content:space-between; gap:24px; margin:4px 0 28px; }
.saldo-intro .saldo-eyebrow { color:var(--saldo-muted); margin-bottom:10px; }
.saldo-intro h1 { font-size:clamp(28px,3vw,40px); letter-spacing:-1.7px; font-weight:600; line-height:1.15; }
.saldo-intro h1 span { color:var(--saldo-gold); }
.saldo-intro p:last-child { font-size:13px; color:var(--saldo-muted); margin-top:10px; line-height:1.6; }
.saldo-import { min-height:42px; padding:10px 16px; font-size:12px; white-space:nowrap; }
.saldo-import span { font-size:20px; margin-right:4px; }
.saldo-hero-grid { display:grid; grid-template-columns:minmax(0,1.75fr) minmax(260px,1fr); gap:20px; align-items:start; }
.saldo-wealth { padding:28px 30px 20px; background:white; border:1px solid var(--saldo-line); border-radius:18px; min-width:0; }
.saldo-card-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.saldo-card-heading h2 { color:var(--saldo-muted); }
.saldo-tag { color:var(--saldo-muted); font-size:10px; }
.saldo-total { margin:22px 0 26px; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:clamp(27px,3.7vw,52px); font-weight:600; letter-spacing:-2px; line-height:1.2; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.saldo-negative { color:#ab4233; }
.saldo-allocation { display:flex; gap:3px; height:10px; border-radius:4px; overflow:hidden; background:#e9ede7; }
.saldo-allocation span { height:100%; min-width:2px; }
.saldo-legend { display:grid; grid-template-columns:1fr 1fr; gap:12px 24px; margin-top:17px; }
.saldo-legend>div { display:flex; flex-wrap:wrap; justify-content:space-between; gap:5px 10px; font-size:11px; }
.saldo-legend dt { display:flex; align-items:center; gap:7px; color:var(--saldo-muted); }
.saldo-legend i { display:inline-block; width:7px; height:7px; border-radius:2px; }
.saldo-legend dd { font-family:ui-monospace,Consolas,monospace; font-weight:600; font-variant-numeric:tabular-nums; }
.saldo-wealth-foot { margin-top:24px; padding-top:16px; border-top:1px solid var(--saldo-line); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.saldo-wealth-foot p { color:var(--saldo-muted); font-size:10px; line-height:1.7; }
.saldo-wealth-foot button { font-size:11px; color:var(--saldo-green); white-space:nowrap; padding:8px 0 8px 8px; }
.saldo-year { background:var(--saldo-green); border-radius:18px; padding:28px 26px 20px; color:#fff; display:flex; flex-direction:column; }
.saldo-year .saldo-eyebrow { color:#c0d4c8; }
.saldo-year-label { font-family:ui-monospace,Consolas,monospace; font-size:11px; font-weight:600; color:#f2d68c; }
.saldo-year-amount { font-family:ui-monospace,Consolas,monospace; font-size:clamp(26px,2.5vw,35px); font-weight:600; letter-spacing:-1.5px; margin-top:22px; font-variant-numeric:tabular-nums; }
.saldo-year-caption { font-size:11px; color:#c0d4c8; margin-top:4px; }
.saldo-year-details { margin:20px 0; font-size:12px; }
.saldo-year-details>div { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 0; }
.saldo-year-details dt { color:#d3e0d7; }.saldo-year-details dt span,.saldo-year-details dt .saldo-icon { color:#e6bd49; margin-right:6px; }
.saldo-year-details dd { font-family:ui-monospace,Consolas,monospace; font-weight:600; font-variant-numeric:tabular-nums; }
.saldo-year>button { display:flex; justify-content:space-between; align-items:center; border-top:1px solid #ffffff26; padding-top:14px; margin-top:auto; font-size:11px; color:#f2d68c; }
.saldo-section-title { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin:30px 0 16px; }
.saldo-section-title h2 { font-size:17px; font-weight:600; letter-spacing:-.5px; }
.saldo-section-title>span { font-family:ui-monospace,Consolas,monospace; font-size:10px; font-weight:600; color:var(--saldo-muted); }
#dash-content { padding:28px 32px 40px; }
#settings-sidebar,#rules-sidebar { background:#f8f9f5!important; border-color:var(--saldo-line)!important; }
.import-workspace { --iw-ink:var(--saldo-ink); --iw-muted:var(--saldo-muted); --iw-blue:var(--saldo-green); }
.iw-icon { background:#e8eee7; color:var(--saldo-green); }.iw-choice-action,.iw-text-button { color:var(--saldo-green); }
.iw-choice:hover { border-color:#88a898; background:#fcfdfa; }.iw-primary:hover { background:#10382f; }
.iw-drop,.iw-bank-help { background:#f4f6f0; }.iw-drop.iw-drag { background:#e8eee7; border-color:var(--saldo-green); }
body.feedback-auth { background:var(--saldo-paper); color:var(--saldo-ink); }
.feedback-auth main { border-color:var(--saldo-line); box-shadow:0 20px 60px #19483e0c; }
.feedback-auth .saldo-wordmark { display:block; margin-bottom:32px; font-size:62px; }
.feedback-auth h1 { letter-spacing:-1px; }.feedback-auth button { background:var(--saldo-green); }.feedback-auth a { color:var(--saldo-green); }
.feedback-auth p { color:var(--saldo-muted); }
body.feedback-inbox { background:var(--saldo-paper); color:var(--saldo-ink); }.feedback-inbox .saldo-wordmark { display:block; margin-bottom:24px; }
body #feedback-launcher,body #feedback-dialog #feedback-send { background:var(--saldo-green); border-color:var(--saldo-green); }
body #feedback-dialog .feedback-types [aria-checked="true"] { background:#e8eee7; border-color:var(--saldo-green); color:var(--saldo-green); }
body.feedback-inbox a { color:var(--saldo-green); }body.feedback-inbox .feedback-filters [aria-current] { background:var(--saldo-green); color:white; }
@media(min-width:1024px) {
  .app-header { position:fixed; inset:0 auto 0 0; box-sizing:border-box; width:208px; min-width:208px; max-width:208px; flex:none; overflow-x:hidden; overflow-y:auto; scrollbar-width:thin; height:100dvh; padding:32px 14px 20px; flex-direction:column; align-items:stretch; gap:36px; border-bottom:0; border-right:0; box-shadow:inset -1px 0 0 var(--saldo-line); background:#fafbf7!important; }
  .saldo-brand { padding:0 12px; }.desktop-nav { flex-direction:column; align-items:stretch; gap:6px; }
  .desktop-nav>button { width:100%!important; min-height:40px; padding:10px 13px!important; display:flex; align-items:center; justify-content:flex-start!important; gap:11px; font-size:12px; text-align:left; white-space:nowrap; flex:none; }
  .desktop-nav>div { width:auto; height:1px; margin:10px 12px; background:var(--saldo-line); flex:none; }
  .desktop-nav .nav-btn.bg-blue-50 { background:var(--saldo-green)!important; color:white!important; }
  .app-header>div:last-child { margin:auto 0 0; flex-wrap:wrap; padding:0 12px; gap:8px; }
  #account-switch { width:100%; margin-bottom:6px; background:white; }
  .app-main { margin-left:208px; }
  .app-section-header { padding:18px 32px; min-height:73px; flex-wrap:wrap; }
  #dash-subtitle { display:none; }
  #dash-month-pills { flex:1; }
  #tab-dashboard .app-section-header>span:first-child { font-size:13px; }
}
@media(max-width:1023px) {
  .saldo-wordmark { font-size:32px; letter-spacing:-2.5px; }.saldo-brand small,.saldo-nav-icon,.saldo-settings-label { display:none; }
  .app-header { padding:0 16px; gap:16px; }.desktop-nav { gap:0; }.desktop-nav>button { padding-left:9px; padding-right:9px; font-size:12px; }
  .desktop-nav { min-width:0; overflow-x:auto; flex:1; }.desktop-nav>button { flex-shrink:0; }
  #dash-content { padding:22px; }.saldo-hero-grid { grid-template-columns:minmax(0,1.5fr) minmax(240px,1fr); }
  .saldo-wealth { padding:24px; }.saldo-year { padding:24px; }
}
@media(max-width:767px) {
  .app-header .saldo-wordmark { display:block!important; font-size:32px; }.saldo-brand { display:block; }
  #dash-content { padding:20px 16px 32px; }.saldo-intro { display:block; margin:4px 0 22px; }.saldo-intro h1 { font-size:31px; }
  .saldo-import { margin-top:18px; }.saldo-intro p:last-child { font-size:12px; }
  .saldo-hero-grid { grid-template-columns:1fr; gap:14px; }.saldo-wealth,.saldo-year { padding:23px 20px; border-radius:16px; }
  .saldo-total { font-size:36px; letter-spacing:-1.7px; }.saldo-legend { gap:14px; }.saldo-legend>div { flex-direction:column; }
  .saldo-year-amount { font-size:30px; }.saldo-year-details { margin:16px 0; }
  .saldo-section-title>span { font-size:9px; }.saldo-section-title { margin-top:26px; }
  .mobile-nav-btn.is-active { color:var(--saldo-green)!important; background:#e8eee7!important; }.mobile-more-action svg { color:var(--saldo-green)!important; }
  #dash-month-pills { flex:none; }.saldo-wealth-foot p { font-size:9px; }
  #tab-dashboard .app-section-header { display:flex; padding:8px 16px; gap:8px; }
  #tab-dashboard .app-section-header>span,#tab-dashboard .app-section-header>.w-px { display:none; }
  #tab-dashboard .app-section-header>.ml-auto { display:flex; flex-direction:row; flex-wrap:nowrap; width:100%; margin:0; gap:10px; justify-content:space-between; }
  #tab-dashboard .app-section-header button[title="Budget instellingen"],#tab-dashboard .app-section-header>.ml-auto>.w-px { display:none; }
  #tab-dashboard .app-section-header #dash-year-sel { width:100px; }
  #tab-dashboard .app-section-header #dash-month-pills { width:100%; margin:0; padding:0 0 4px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; } }

/* Period navigation: one clear selection, independent of financial results. */
.saldo-dashboard-toolbar { padding:18px 32px 0; background:#fff; border-bottom:1px solid var(--saldo-line); }
.saldo-toolbar-top,.saldo-period-heading,.saldo-toolbar-actions { display:flex; align-items:center; gap:12px; }
.saldo-toolbar-top { justify-content:space-between; margin-bottom:14px; }
.saldo-period-heading { color:var(--saldo-ink); font-size:14px; font-weight:600; }
.saldo-period-heading select { width:94px; min-height:36px; }
.saldo-toolbar-actions>button { min-height:36px; font-size:11px; white-space:nowrap; }
#dash-month-pills { display:grid; grid-template-columns:1.6fr repeat(12,minmax(0,1fr)); width:100%; gap:2px; overflow:visible; }
#dash-month-pills button { position:relative; padding:11px 2px 14px; min-width:0; border:0; border-radius:0; background:transparent; color:var(--saldo-muted); font-size:12px; white-space:nowrap; }
#dash-month-pills button:hover { color:var(--saldo-green); background:#f5f6f2; }
#dash-month-pills button[aria-pressed="true"] { color:var(--saldo-ink); font-weight:600; }
#dash-month-pills button[aria-pressed="true"]::after { content:''; position:absolute; bottom:-1px; left:8px; right:8px; height:3px; background:var(--saldo-gold); }
.saldo-period-mobile { display:none; }

#dash-content { container-type:inline-size; container-name:saldo-dashboard; }
@media(min-width:1024px) {
  body.feedback-dashboard .app-header { flex-wrap:nowrap; height:100dvh; padding:26px 14px 18px; gap:26px; overflow-x:hidden; overflow-y:auto; }
  body.feedback-dashboard .desktop-nav { flex-wrap:nowrap; flex-shrink:0; }
  .saldo-brand,.app-header>div:last-child { flex-shrink:0; }
}
@media(max-width:767px) {
  .saldo-dashboard-toolbar { padding:12px 16px; }
  .saldo-toolbar-top { margin:0; gap:8px; }
  .saldo-period-heading>span,.saldo-toolbar-actions>button[title="Budget instellingen"] { display:none; }
  .saldo-toolbar-actions { gap:4px; margin-left:auto; }
  #dash-month-pills { display:none; }
  .saldo-period-mobile { display:flex; align-items:center; gap:10px; margin-top:10px; }
  .saldo-period-mobile label { font-size:12px; color:var(--saldo-muted); }
  .saldo-period-mobile select { flex:1; min-width:0; }
  #dash-month-summary { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
}

/* Forms must remain usable inside nested settings panes, not just at a
   particular viewport width. Auto-fit responds to their actual available space. */
.saldo-form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr)); gap:16px; }
.saldo-form-grid label { min-width:0; font-size:12px; color:var(--saldo-muted); }
.saldo-form-grid .field { display:block; margin-top:6px; min-width:0; width:100%; min-height:40px; }
.settings-section { min-width:0; }
.settings-section .field { min-width:0; }
#settings-section-logs>div:first-child { flex-wrap:wrap; gap:12px; }
#settings-section-logs>div:first-child>div { flex-wrap:wrap; min-width:0; }
#settings-section-logs #log-level-filter { width:140px; }
.saldo-invest-chart { position:relative; flex:1; min-height:0; width:100%; }
.saldo-invest-chart canvas { position:absolute; inset:0; width:100%!important; height:100%!important; }
#inv-charts>div { display:flex; flex-direction:column; gap:8px; min-width:0; }
#inv-charts.hidden { display:none; }
#inv-summary>div { min-width:0; overflow-wrap:anywhere; }
#inv-add-modal>div,#inv-edit-modal>div,#inv-import-modal>div { max-height:90dvh; }
@media(max-width:1279px) {
  #settings-section-rules { flex-direction:column; }
  #rules-sidebar { width:100%; flex:none; max-height:none; border-right:0; border-bottom:1px solid var(--saldo-line); }
  #rules-sidebar>div:first-child { display:flex; padding:10px 16px; }
  #rules-sidebar>div:last-child { display:flex; flex-direction:row; gap:6px; overflow-x:auto; padding:8px 12px; max-height:62px; }
  #rules-sidebar>div:last-child>button { flex:none; width:auto; max-width:220px; }
  #rules-content { flex-direction:column; }
  #rules-content>.w-80 { width:100%; border-left:0; border-top:1px solid var(--saldo-line); }
  #rules-content:not(.hidden) { display:block; overflow:auto!important; }
  #rules-content>.flex-1 { height:auto; min-height:180px; overflow:visible; }
  #rules-content #kw-list { flex:none; max-height:280px; min-height:130px; }
  #rules-content>.w-80 { overflow:visible; }
}
@media(max-width:767px) {
  #settings-section-vermogen .card>.flex.gap-2 { flex-direction:column; }
  #settings-section-vermogen .card>.flex.gap-2 .field { width:100%; }
  #settings-section-logs>div:first-child { padding:12px 16px; }
  #settings-section-logs>div:first-child>div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; }
  #settings-section-logs #log-level-filter { width:100%; }
  #tab-investeren>.flex-1 { overflow-y:auto; display:block; }
  #inv-charts { grid-template-columns:1fr; }
  #budget-modal>div>div:last-child { flex-wrap:wrap; gap:8px; }
  #budget-modal>div>div:last-child>div { flex-wrap:wrap; gap:8px; }
  #budget-modal #bgt-wizard-next,#budget-modal #bgt-wizard-save { min-width:0; }
  #debt-modal>.absolute,#payment-modal>.absolute,#modal-bank-sync>.absolute { width:100%!important; height:100%!important; max-height:none!important; border-radius:0!important; }
}
#tab-settings:has(#settings-section-dump:not(.hidden)) #settings-sidebar { display:none; }
#enable-banking-status-inline { overflow-wrap:anywhere; }
.import-workspace,.import-workspace section,.iw-bank-shell { min-width:0; }
.saldo-budget-amount-row { grid-template-columns:1.4fr .8fr .8fr; }
@media(max-width:560px) {
  .saldo-budget-amount-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .saldo-budget-amount-row>div:first-child { grid-column:1 / -1; }
  .saldo-budget-amount-row>div:first-child p { white-space:normal; }
}
@media(max-width:400px) {
  .saldo-budget-amount-row { grid-template-columns:minmax(0,1fr); }
  .saldo-budget-amount-row>div:last-child { display:flex; justify-content:space-between; align-items:center; }
  .saldo-budget-total { flex-direction:column; align-items:stretch; }
  .saldo-budget-total>div:last-child { text-align:left; }
}
/* The fixed dashboard uses content-sized cards and a single Saldo visual language. */
#saldo-dashboard { display:block; }
.saldo-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:24px; }
.saldo-stat { background:#fff; border:1px solid var(--saldo-line); border-radius:16px; padding:20px; min-width:0; container-type:inline-size; }
.saldo-stat-heading { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.saldo-stat-heading h3 { font:600 10px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; text-transform:uppercase; letter-spacing:.14em; color:#53675e; }
.saldo-stat-heading>span { width:30px; height:30px; flex:none; display:grid; place-items:center; border-radius:9px; background:#eff3ee; color:var(--saldo-green); font-size:20px; }
.saldo-stat .saldo-stat-value { font:600 clamp(18px,10cqi,28px)/1.3 ui-monospace,SFMono-Regular,Consolas,monospace; font-variant-numeric:tabular-nums lining-nums; letter-spacing:-.6px; margin:14px 0 8px; overflow-wrap:anywhere; color:var(--saldo-ink); }
.saldo-stat-income .saldo-stat-value { color:var(--saldo-green); }
.saldo-stat .saldo-stat-value.saldo-in { color:#286451; }
.saldo-stat .saldo-stat-value.saldo-out { color:#af5141; }
/* The year card is dark green: light tints so plus/minus stays readable there (2026-10-16). */
.saldo-year .saldo-year-amount.saldo-in { color:#a8dcc0; }
.saldo-year .saldo-year-amount.saldo-out { color:#f4ab9c; }
.saldo-wealth-note { margin-top:14px; padding:10px 12px; border-radius:10px; background:#faf1dc; color:#6f5410; font-size:12px; line-height:1.55; }
.saldo-stat-expense .saldo-stat-heading>span { background:#faf1dc; color:#9b7415; }
.saldo-stat-note { font-size:12px; font-weight:600; line-height:1.5; color:var(--saldo-muted); }
.saldo-analysis-grid,.saldo-detail-grid,.saldo-saving-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(0,1fr); gap:20px; margin-bottom:20px; align-items:stretch; }
.saldo-saving-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.saldo-panel { min-width:0; border:1px solid var(--saldo-line); border-radius:18px; padding:24px; background:#fff; }
.saldo-panel-header { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:24px; }
.saldo-panel-header h2 { font-size:17px; font-weight:600; letter-spacing:-.45px; line-height:1.4; color:var(--saldo-green); }
.saldo-panel-header p { font-size:12px; color:var(--saldo-muted); margin-top:5px; }
.saldo-panel-tag { font:600 11px ui-monospace,Consolas,monospace; padding:5px 9px; background:#f5f2e7; border-radius:5px; color:#8f7734; }
.saldo-text-link { flex:none; font-size:11px; font-weight:600; color:var(--saldo-green); padding:5px 0; }
.saldo-text-link:hover { text-decoration:underline; text-underline-offset:4px; }
.saldo-chart-key { display:flex; gap:18px; margin:0 0 18px; color:var(--saldo-muted); font-size:11px; }
.saldo-chart-key span { display:flex; align-items:center; gap:7px; }
.saldo-chart-key i { width:8px; height:8px; border-radius:2px; background:var(--saldo-green); }
.saldo-chart-key span:last-child i { background:var(--saldo-gold); }
.saldo-cashflow-chart { position:relative; height:260px; width:100%; min-width:0; }
.saldo-insights { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; border-top:1px solid var(--saldo-line); margin-top:22px; padding-top:20px; }
.saldo-insights>div { min-width:0; }
.saldo-insights dt { font-size:10px; color:var(--saldo-muted); margin-bottom:7px; }
.saldo-insights dd { font:600 18px/1.3 ui-monospace,Consolas,monospace; letter-spacing:-.6px; overflow-wrap:anywhere; }
.saldo-insights p { margin-top:4px; font-size:10px; color:var(--saldo-muted); }
.saldo-category-total { display:flex; flex-direction:column; gap:4px; padding-bottom:22px; }
.saldo-category-total strong { font:600 28px/1.3 ui-monospace,Consolas,monospace; letter-spacing:-1px; overflow-wrap:anywhere; }
.saldo-category-total>span { font-size:11px; color:var(--saldo-muted); }
.saldo-category-list { display:grid; gap:18px; }
.saldo-category-heading,.saldo-saving-heading,.saldo-saving-meta { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.saldo-category-heading { font-size:12px; }
.saldo-category-heading span { overflow-wrap:anywhere; min-width:0; }
.saldo-category-heading strong { font:600 12px ui-monospace,Consolas,monospace; flex:none; }
.saldo-category-track,.saldo-meter { height:6px; background:#eff2ec; border-radius:2px; overflow:hidden; margin:9px 0 4px; }
.saldo-category-track>span,.saldo-meter>span { display:block; height:100%; background:var(--saldo-green); border-radius:2px; }
.saldo-category-list small { font-size:10px; color:var(--saldo-muted); }
.saldo-table-scroll { overflow-x:auto; max-width:100%; }
.saldo-month-table { width:100%; border-collapse:collapse; font-size:12px; }
.saldo-month-table th,.saldo-month-table td { padding:12px 8px; text-align:right; border-bottom:1px solid #edf0e9; white-space:nowrap; }
.saldo-month-table th:first-child { text-align:left; padding-left:0; }
.saldo-month-table th:last-child,.saldo-month-table td:last-child { padding-right:0; }
.saldo-month-table thead th { font-size:10px; color:var(--saldo-muted); font-weight:600; }
.saldo-month-table td { font-family:ui-monospace,Consolas,monospace; font-weight:600; }
.saldo-month-table tbody th { font-weight:600; }
.saldo-month-table button { padding:3px 0; }
.saldo-month-table button span { color:var(--saldo-muted); margin-left:7px; }
.saldo-month-table tbody tr:hover { background:#f7f8f4; }
.saldo-in { color:#286451; }
.saldo-out { color:#af5141; }
.saldo-activity { padding:0; margin:0; list-style:none; }
.saldo-activity li { display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:10px; padding:17px 0; border-bottom:1px solid #edf0e9; align-items:start; }
.saldo-activity li:first-child { padding-top:0; }
.saldo-activity-icon { display:grid; place-items:center; width:28px; height:28px; border-radius:8px; background:#f2f4ee; font-size:17px; }
.saldo-activity li>div { min-width:0; }
.saldo-activity p { font-size:12px; line-height:1.5; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.saldo-activity small { font:600 9px ui-monospace,Consolas,monospace; display:block; color:var(--saldo-muted); margin:4px 0; }
.saldo-activity strong { font:600 11px/1.6 ui-monospace,Consolas,monospace; white-space:nowrap; }
.saldo-category-tag { display:inline-block; max-width:100%; border-radius:4px; background:#f8eed0; color:#756330; font:600 9px/1.5 ui-monospace,Consolas,monospace; padding:2px 5px; overflow-wrap:anywhere; }
.saldo-savings-list { display:grid; gap:22px; }
.saldo-saving-heading h3 { font-size:13px; overflow-wrap:anywhere; }
.saldo-saving-heading strong { font:600 15px ui-monospace,Consolas,monospace; white-space:nowrap; }
.saldo-saving-meta { margin-top:7px; font-size:10px; color:var(--saldo-muted); }
.saldo-empty { padding:24px 0; color:var(--saldo-muted); }
.saldo-empty>span { font-size:27px; color:var(--saldo-gold); }
.saldo-empty p { font-size:14px; color:var(--saldo-green); margin:6px 0; }
.saldo-empty small { font-size:12px; line-height:1.7; }
@container saldo-dashboard (max-width:1000px) {
  .saldo-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .saldo-analysis-grid,.saldo-detail-grid { grid-template-columns:minmax(0,1fr); }
  .saldo-insights { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@container saldo-dashboard (max-width:600px) {
  .saldo-saving-grid { grid-template-columns:minmax(0,1fr); }
  .saldo-panel { padding:18px; }
  .saldo-insights { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .saldo-cashflow-chart { height:230px; }
  .saldo-stat { padding:16px; }
}
@container saldo-dashboard (max-width:360px) {
  .saldo-stats { grid-template-columns:minmax(0,1fr); gap:10px; }
  .saldo-stat .saldo-stat-value { font-size:25px; }
  .saldo-panel-header { flex-wrap:wrap; gap:8px; }
  .saldo-activity li { grid-template-columns:24px minmax(0,1fr); }
  .saldo-activity strong { grid-column:2; }
  .saldo-saving-heading { flex-wrap:wrap; gap:5px; }
}
#dash-month-content>.card { border-radius:18px; border-color:var(--saldo-line); box-shadow:none; }
#dash-month-content>.card>div:first-child>p,#dash-month-content>.card>p:first-child { font-size:16px; font-weight:600; text-transform:none; letter-spacing:-.4px; color:var(--saldo-green); }
@container saldo-dashboard (max-width:1000px) {
  #dash-month-summary { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  #dash-month-content { grid-template-columns:minmax(0,1fr)!important; }
}
@container saldo-dashboard (max-width:360px) {
  #dash-month-summary { grid-template-columns:minmax(0,1fr)!important; }
}
/* Category and status labels share one compact, quiet visual vocabulary. */
body .saldo-category-chip { display:inline-flex; align-items:center; gap:6px; max-width:100%; padding:4px 7px!important; border-radius:5px!important; border:1px solid color-mix(in srgb,var(--category-ink) 18%,transparent); background:var(--category-paper)!important; color:#354a41!important; font:600 10px/1.4 ui-monospace,Consolas,monospace!important; letter-spacing:0; white-space:normal; overflow-wrap:break-word; word-break:normal; hyphens:none; min-width:3.5em; }
.saldo-category-chip::before { content:''; width:5px; height:5px; flex:none; background:var(--category-ink); border-radius:1px; }
body .saldo-category-dot { display:inline-block; width:9px; height:9px; border-radius:2px; flex:none; background:var(--category-ink); }
body .saldo-status { display:inline-flex; align-items:center; font:600 10px/1.5 ui-monospace,Consolas,monospace; padding:4px 7px; border-radius:5px; white-space:normal; }
.saldo-status-open { background:#eaf0eb; color:#19483e; }.saldo-status-partial { background:#f8edcb; color:#82651c; }.saldo-status-done { background:#e5efe9; color:#35634e; }
/* Legacy informational tags, distinct from circular icon and colour controls. */
#tab-settings span.rounded-full:not([style]),#modal-dump-edit span.rounded-full:not([style]),#budget-modal span.rounded-full:not([style]) { border-radius:5px; }
.saldo-page-intro { margin:2px 0 26px; }
.saldo-page-intro>.saldo-eyebrow { color:var(--saldo-muted); margin-bottom:10px; }
.saldo-page-intro h1 { font-size:clamp(27px,3vw,38px); line-height:1.2; font-weight:600; letter-spacing:-1.5px; }
.saldo-page-intro h1 span { color:var(--saldo-gold); }
.saldo-page-intro>p:last-child { font-size:13px; line-height:1.7; color:var(--saldo-muted); margin-top:10px; }
#budget-tab-body,#schulden-content { padding:28px 32px 40px; container-type:inline-size; container-name:saldo-page; }
.saldo-budget-hero { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:22px; margin-bottom:26px; }
.saldo-budget-balance { background:var(--saldo-green); color:#fff; padding:28px; border-radius:18px; min-width:0; }
.saldo-budget-period { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; color:#c5d8ce; }
.saldo-budget-period>div { display:flex; align-items:center; gap:12px; }
.saldo-budget-period h2 { font:600 12px ui-monospace,Consolas,monospace; }
.saldo-budget-period button { width:30px; height:30px; border:1px solid #ffffff30; border-radius:6px; font-size:20px; }
.saldo-budget-label { margin-top:28px; font-size:12px; color:#c5d8ce; }
.saldo-budget-amount { font:600 clamp(30px,4vw,48px)/1.3 ui-monospace,Consolas,monospace; letter-spacing:-2px; margin:8px 0; overflow-wrap:anywhere; }
.saldo-budget-amount.is-negative { color:#f3c1ae; }
.saldo-budget-caption { font-size:11px; line-height:1.7; color:#c5d8ce; }
.saldo-budget-meter { display:flex; gap:2px; height:9px; background:#ffffff20; margin:25px 0 20px; border-radius:3px; overflow:hidden; }
.saldo-budget-meter>span:first-child { background:var(--saldo-gold); }.saldo-budget-meter>span:last-child { background:#adc7bb; }
.saldo-budget-breakdown { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.saldo-budget-breakdown dt { font-size:10px; color:#c5d8ce; margin-bottom:6px; }
.saldo-budget-breakdown dd { font:600 16px/1.5 ui-monospace,Consolas,monospace; overflow-wrap:anywhere; }
.saldo-budget-manage { display:flex; width:100%; justify-content:space-between; border-top:1px solid #ffffff25; padding-top:18px; margin-top:24px; color:#f2d68c; font-size:12px; }
.saldo-budget-pace { background:#e8ede5; border:1px solid #dce3d9; border-radius:18px; padding:28px; }
.saldo-budget-pace>.saldo-eyebrow { color:var(--saldo-muted); margin-bottom:22px; }
.saldo-budget-pace h3 { font-size:24px; letter-spacing:-.8px; font-weight:600; margin:12px 0 8px; }
.saldo-budget-pace>p:not(.saldo-eyebrow) { font-size:12px; line-height:1.8; color:var(--saldo-muted); }
.saldo-budget-pace dl { margin:20px 0; }.saldo-budget-pace dl>div { display:flex; justify-content:space-between; gap:15px; padding:9px 0; border-bottom:1px solid #d3ddcf; }
.saldo-budget-pace dt { font-size:12px; }.saldo-budget-pace dd { font:600 15px ui-monospace,Consolas,monospace; }
.saldo-budget-pace summary { font-size:11px; color:var(--saldo-green); cursor:pointer; }.saldo-budget-pace details p { margin-top:10px; font-size:11px; line-height:1.8; color:var(--saldo-muted); }
.saldo-budget-section { border:1px solid var(--saldo-line); border-radius:18px; background:#fff; overflow:hidden; margin-bottom:22px; }
.saldo-budget-section>header { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding:24px; border-bottom:1px solid var(--saldo-line); }
.saldo-budget-section .saldo-eyebrow { color:var(--saldo-muted); margin-bottom:7px; }
.saldo-budget-section h3 { font-size:19px; font-weight:600; letter-spacing:-.5px; color:var(--saldo-green); }
.saldo-budget-section header p:not(.saldo-eyebrow) { font-size:12px; color:var(--saldo-muted); margin-top:6px; }
.saldo-budget-section-body { padding:22px 24px; }.saldo-budget-section-body>h3 { margin-bottom:20px; }
.saldo-budget-section table td { font-size:12px; }.saldo-budget-section .tabular-nums { font-family:ui-monospace,Consolas,monospace; font-weight:600; }
.saldo-view-tabs { display:flex; gap:4px; flex-wrap:wrap; border-bottom:1px solid var(--saldo-line); padding:12px 18px 0; }
.saldo-view-tabs>button { padding:12px 10px; font-size:12px; color:var(--saldo-muted); border-bottom:3px solid transparent; }
.saldo-view-tabs>button[aria-pressed=true] { color:var(--saldo-green); border-color:var(--saldo-gold); font-weight:600; }
.saldo-view-tabs>.saldo-text-link { margin-left:auto; }
#schulden-kpi-bar { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid var(--saldo-line); border-radius:18px; overflow:hidden; background:white; margin-bottom:30px; }
#schulden-kpi-bar>div { padding:23px; min-width:0; }
#schulden-kpi-bar>div:first-child { background:var(--saldo-green); }
#schulden-kpi-bar>div:first-child>div:first-child { color:#c5d8ce; }#schulden-kpi-bar>div:first-child>div:last-child { color:white!important; }
#schulden-kpi-bar>div>div:first-child { font:600 10px ui-monospace,Consolas,monospace; letter-spacing:.06em; text-transform:uppercase; color:var(--saldo-muted); }
#schulden-kpi-bar>div>div:last-child { font:600 26px/1.4 ui-monospace,Consolas,monospace; letter-spacing:-1px; margin-top:12px; overflow-wrap:anywhere; color:var(--saldo-green); }
#schulden-receive-section>h3,#schulden-pay-section>h3,#schulden-settled-section>h3 { font-size:19px; font-weight:600; text-transform:none; letter-spacing:-.4px; color:var(--saldo-green); margin:24px 0 16px; }
#schulden-receive-list,#schulden-pay-list,#schulden-settled-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr)); gap:20px; align-items:start; }
.saldo-debt-card { background:white; border:1px solid var(--saldo-line); border-radius:18px; padding:23px; min-width:0; }
.saldo-debt-card>header { display:flex; align-items:center; gap:12px; }
.saldo-debt-avatar { width:36px; height:36px; display:grid; place-items:center; flex:none; background:#e9eee7; color:var(--saldo-green); border-radius:9px; font-size:17px; font-weight:600; }
.saldo-debt-card>header>div:nth-child(2) { flex:1; min-width:0; }
.saldo-debt-card h3 { font-size:15px; font-weight:600; overflow-wrap:anywhere; }.saldo-debt-card header p { font-size:11px; color:var(--saldo-muted); margin-top:3px; overflow-wrap:anywhere; }
.saldo-debt-card>header>.saldo-status { flex:none; }
.saldo-debt-open { margin:26px 0 18px; }.saldo-debt-open>span { display:block; color:var(--saldo-muted); }.saldo-debt-open strong { display:block; font:600 32px/1.3 ui-monospace,Consolas,monospace; letter-spacing:-1px; margin-top:7px; overflow-wrap:anywhere; }
.saldo-debt-meter { height:6px; background:#edf0e9; border-radius:2px; overflow:hidden; }.saldo-debt-meter span { display:block; height:100%; background:var(--saldo-gold); }.is-settled .saldo-debt-meter span { background:var(--saldo-green); }
.saldo-debt-totals { display:flex; justify-content:space-between; gap:16px; margin:13px 0 20px; }.saldo-debt-totals>div:last-child { text-align:right; }.saldo-debt-totals dt { font-size:10px; color:var(--saldo-muted); }.saldo-debt-totals dd { font:600 13px ui-monospace,Consolas,monospace; margin-top:5px; }
.saldo-debt-due { margin-bottom:12px; }.saldo-debt-details { border-top:1px solid var(--saldo-line); padding-top:14px; }.saldo-debt-details summary { display:flex; justify-content:space-between; cursor:pointer; font-size:11px; color:var(--saldo-muted); }.saldo-debt-details[open] summary { color:var(--saldo-green); margin-bottom:12px; }
.saldo-debt-card footer { display:flex; gap:8px; margin-top:20px; align-items:center; flex-wrap:wrap; }.saldo-debt-card footer button { font-size:11px; min-height:34px; }.saldo-debt-delete { margin-left:auto; color:var(--saldo-muted); padding:4px 8px; }.saldo-debt-delete:hover { color:#ae5143; }
#budget-modal .rounded-full,#debt-modal .rounded-full,#payment-modal .rounded-full { border-radius:5px; }
#budget-modal h2,#debt-modal h2,#payment-modal h2 { font-size:22px; letter-spacing:-.6px; color:var(--saldo-green); }
@container saldo-page (max-width:850px) {
 .saldo-budget-hero { grid-template-columns:minmax(0,1fr); }
 #schulden-kpi-bar { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@container saldo-page (max-width:400px) {
 .saldo-budget-balance,.saldo-budget-pace,.saldo-debt-card { padding:20px; }
 .saldo-budget-breakdown { grid-template-columns:1fr; gap:12px; }.saldo-budget-breakdown>div { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
 .saldo-budget-section>header,.saldo-budget-section-body { padding:18px; }
 #schulden-kpi-bar>div { padding:18px 12px; }#schulden-kpi-bar>div>div:last-child { font-size:20px; }
 .saldo-debt-card>header { flex-wrap:wrap; }.saldo-debt-card>header>.saldo-status { margin-left:48px; }
 .saldo-view-tabs { padding-left:8px; padding-right:8px; }.saldo-view-tabs>button { padding:10px 7px; }.saldo-view-tabs>.saldo-text-link { margin-left:0; }
}
@media(max-width:767px) { #budget-tab-body,#schulden-content { padding:22px 16px 32px; } }
#schulden-kpi-bar #sk-netto.text-rose-600 { color:#a24737; }
/* Carry the same editorial typography into the utility pages and dialogs. */
.settings-section h2,#rules-content>div h2 { color:var(--saldo-green); letter-spacing:-.5px; }
.settings-section .card>h3 { color:var(--saldo-green); font-weight:600; letter-spacing:-.3px; }
#settings-section-vermogen .card,#settings-section-spaarpotjes .card,#settings-section-spaardoelen .card { box-shadow:none!important; }
#tab-investeren #inv-summary>div { border-radius:16px; border-color:var(--saldo-line); }
#tab-investeren #inv-summary .text-2xl { font-family:ui-monospace,Consolas,monospace; font-weight:600; letter-spacing:-1px; }
#rules-sidebar>div:last-child>button { border-radius:6px; }
#rules-content .rounded-full:not(input):not(button) { border-radius:5px; }
@container saldo-page (max-width:700px) {
 .saldo-budget-table { min-width:0!important; width:100%; }
 .saldo-budget-table thead { display:none; }
 .saldo-budget-table tbody { display:grid; gap:14px; padding:16px; }
 .saldo-budget-table tr { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border:1px solid var(--saldo-line); border-radius:12px; padding:14px; gap:12px; }
 .saldo-budget-table td { display:block; min-width:0; padding:0; text-align:left; }
 .saldo-budget-table td::before { content:attr(data-label); display:block; font:600 9px ui-monospace,Consolas,monospace; color:var(--saldo-muted); margin-bottom:5px; }
 .saldo-budget-table td:first-child,.saldo-budget-table td:nth-child(5),.saldo-budget-table td:last-child { grid-column:1 / -1; }
 .saldo-budget-table td:first-child::before,.saldo-budget-table td:last-child::before { display:none; }
 .saldo-budget-table td:last-child { display:flex; flex-wrap:wrap; gap:12px; border-top:1px solid var(--saldo-line); padding-top:12px; }
 .saldo-budget-table td:last-child button { margin:0; }
}
.saldo-invest-intro { padding:24px 32px 0; margin-bottom:12px; flex-shrink:0; }.saldo-invest-intro h1 { font-size:30px; }
#inv-summary { background:var(--saldo-paper); border:0; padding:12px 32px 20px; gap:16px; }
#inv-summary>div { padding:20px; }
#inv-summary>div:first-child { background:var(--saldo-green); color:white; }
#inv-summary>div:first-child>p { color:#fff; }#inv-summary>div:first-child>p:first-child { color:#c5d8ce; }
#inv-summary>div>p:first-child { font:600 10px ui-monospace,Consolas,monospace; text-transform:uppercase; letter-spacing:.06em; margin-bottom:10px; }
#inv-summary>div>p:not(:first-child) { font-family:ui-monospace,Consolas,monospace; font-weight:600; font-size:20px; }
.saldo-invest-empty { margin:28px auto; max-width:580px; padding:32px; border:1px solid var(--saldo-line); background:#e8ede5; border-radius:18px; }
.saldo-invest-empty h2 { font-size:25px; letter-spacing:-.8px; margin:12px 0; color:var(--saldo-green); }.saldo-invest-empty>p:not(.saldo-eyebrow) { color:var(--saldo-muted); font-size:13px; line-height:1.7; margin-bottom:20px; }
@media(max-width:767px) { .saldo-invest-intro { padding:20px 16px 0; }.saldo-invest-intro h1 { font-size:27px; }#inv-summary { padding:12px 16px; }#inv-summary>div { padding:15px; }.saldo-invest-empty { padding:22px; margin:16px 0; } }
@media(max-width:767px) { #tab-investeren #inv-summary>div { height:auto!important; min-height:110px; } }
@media(min-width:361px) and (max-width:767px) { #tab-investeren #inv-summary { grid-template-columns:repeat(2,minmax(0,1fr)); } }
/* Mobile navigation: the same forest, paper and gold as the Saldo overview. */
.saldo-menu-dot { color:var(--saldo-gold); }
@media(max-width:767px) {
 body.feedback-dashboard .app-header { height:72px; padding:0 18px; gap:14px; background:var(--saldo-paper)!important; border-bottom:1px solid var(--saldo-line); }
 .app-header .saldo-wordmark { font-size:36px; letter-spacing:-2.8px; }
 #mobile-page-title { font:600 10px ui-monospace,Consolas,monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--saldo-muted); text-align:right; }
 .app-header>div:last-child { display:none; }
 .saldo-mobile-account { width:44px; height:44px; flex:none; border:1px solid #d6dfd4; border-radius:12px; align-items:center; justify-content:center; color:var(--saldo-green); background:#e8ede5; }
 .saldo-mobile-account svg { width:20px; height:20px; }
 body.feedback-dashboard .app-main { padding-right:0; padding-bottom:calc(90px + env(safe-area-inset-bottom)); }
 /* Feedback stays reachable on phones: a compact edge tab just above the bottom nav, clear of its buttons. */
 body.feedback-dashboard #feedback-launcher, body.feedback-dashboard #feedback-launcher:hover { top:auto; bottom:calc(88px + env(safe-area-inset-bottom)); transform:none; width:36px; padding:12px 8px; border-radius:11px 0 0 11px; font-size:10px; }
 body.feedback-dashboard #feedback-launcher > span { gap:6px; }
 body.feedback-dashboard #feedback-launcher .feedback-icon { width:16px; height:16px; margin-bottom:2px; }
 #mobile-bottom-nav { left:10px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom)); height:66px; padding:6px; border:1px solid #ffffff18; border-radius:20px; background:var(--saldo-green); box-shadow:0 8px 24px #173b3026; gap:2px; }
 #mobile-bottom-nav .mobile-nav-btn { flex:1 1 0; min-height:52px; gap:5px; border-radius:13px; font-size:9px; font-weight:600; color:#d0dfd5; position:relative; }
 #mobile-bottom-nav .mobile-nav-btn svg { width:21px; height:21px; }
 #mobile-bottom-nav .mobile-nav-btn.is-active { color:#f4d77e!important; background:#ffffff10!important; }
 #mobile-bottom-nav .mobile-nav-btn.is-active::after { content:''; position:absolute; bottom:0; width:15px; height:2px; border-radius:1px; background:var(--saldo-gold); }
 #mobile-bottom-nav .mobile-nav-btn:focus-visible { outline-color:#f4d77e; outline-offset:0; }
 .mobile-more-backdrop { background:#102d2666; }
 .mobile-more-panel { max-height:85dvh; overflow-y:auto; padding:12px 20px calc(24px + env(safe-area-inset-bottom)); background:var(--saldo-paper); border-radius:24px 24px 0 0; }
 .mobile-more-handle { background:#b2c2b6; width:32px; height:3px; margin-bottom:20px; }
 .mobile-more-panel h2 { font-size:25px; letter-spacing:-1px; color:var(--saldo-green); }
 .mobile-more-panel>.flex>button { width:44px; height:44px; }
 .mobile-more-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
 .mobile-more-action { min-height:62px; padding:12px; flex-direction:row; justify-content:flex-start; gap:10px; border:1px solid var(--saldo-line); border-radius:12px; background:#fafbf7; color:var(--saldo-green); font-size:11px; font-weight:600; text-align:left; }
 .mobile-more-action svg { width:20px; height:20px; }
 .mobile-more-action:active { background:#e8ede5; }
}

/* De privacy-knop (oogje) staat in de zijbalk, niet los boven de pagina (feedback Jelter, 2026-10-23). */

/* Bankfout-melding en achtergrond-sync-indicator (feedback Jelter, 2026-10-15) */
.saldo-bank-alert { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; margin: 12px 20px 0; padding: 10px 14px; border: 1px solid #ecd9a0; border-radius: 12px; background: #fbf6e6; color: #5b4a12; font-size: 13px; line-height: 1.4; }
.saldo-bank-alert[hidden], .saldo-bank-sync-indicator[hidden] { display: none; }
.saldo-bank-alert-icon { flex: 0 0 auto; display: inline-flex; color: #a8780b; }
.saldo-bank-alert-icon svg { width: 18px; height: 18px; }
.saldo-bank-alert-text { flex: 1 1 auto; min-width: 0; margin: 0; }
.saldo-bank-alert-btn { flex: 0 0 auto; min-height: 34px; padding: 0 12px; font-size: 12px; white-space: nowrap; }
.saldo-bank-sync-indicator { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; margin: 8px 20px 0; font-size: 12px; color: var(--saldo-muted); }
.saldo-bank-sync-indicator svg { width: 14px; height: 14px; animation: saldo-bank-spin 1s linear infinite; }
@keyframes saldo-bank-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .saldo-bank-sync-indicator svg { animation: none; } }
@media (max-width: 767px) {
  .saldo-bank-alert { flex-wrap: wrap; margin: 10px 12px 0; }
  .saldo-bank-alert-text { flex-basis: calc(100% - 40px); }
  .saldo-bank-alert-btn { width: 100%; min-height: 44px; }
  .saldo-bank-sync-indicator { margin: 8px 16px 0; }
}

.saldo-firstrun { max-width:640px; margin:48px auto; text-align:center; background:#fff; border:1px solid var(--saldo-line); border-radius:20px; padding:44px 32px; }
.saldo-firstrun h1 { font-size:28px; letter-spacing:-.8px; color:var(--saldo-green); margin:6px 0 12px; }
.saldo-firstrun p { color:var(--saldo-muted); line-height:1.7; }
.saldo-firstrun-icon { display:inline-flex; width:56px; height:56px; border-radius:50%; align-items:center; justify-content:center; background:#e7f0ea; color:var(--saldo-green); margin-bottom:14px; }
.saldo-firstrun-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:26px; }
.saldo-firstrun-actions button { min-height:44px; padding:0 20px; }
.saldo-firstrun-actions button[disabled] { opacity:.5; cursor:not-allowed; }
.saldo-firstrun small { display:block; margin-top:14px; color:var(--saldo-muted); }
/* Wat is er nieuw: changelog en "Nieuw"-kaarten, aanpak Command Center (2026-10-20) */
.changelog-entry h2 { margin:0 0 12px; font-size:17px; color:var(--saldo-green); letter-spacing:-.2px; }
.changelog-entry ul { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.changelog-entry li { display:flex; gap:10px; align-items:flex-start; line-height:1.5; }
.changelog-kind { min-width:84px; text-align:center; font-size:12px!important; font-weight:600; }
.changelog-kind[data-kind="new"] { background:#e7efe9!important; color:var(--saldo-green)!important; }
.changelog-kind[data-kind="better"] { background:#fbf1d4!important; color:#7a5a06!important; }
.changelog-kind[data-kind="fix"] { background:#eef1f4!important; color:#475569!important; }
@media(max-width:520px) { .changelog-entry li { flex-direction:column; gap:4px; } .changelog-kind { min-width:0; } }
.saldo-announce { position:fixed; z-index:53; box-sizing:border-box; padding:16px; border:1px solid var(--saldo-line); border-radius:14px; background:#fff; color:var(--saldo-ink); box-shadow:0 18px 40px #173b3029; font:500 14px/1.5 Inter,system-ui,sans-serif; }
.saldo-announce.is-floating { right:56px; bottom:24px; width:min(384px, calc(100vw - 72px)); }
@media(max-width:767px) { .saldo-announce.is-floating { right:56px; bottom:calc(96px + env(safe-area-inset-bottom)); width:calc(100vw - 72px); } }
.saldo-announce-arrow { position:absolute; width:12px; height:12px; transform:rotate(45deg); background:#fff; border:0 solid var(--saldo-line); }
.saldo-announce-eyebrow { margin:0; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--saldo-gold); }
.saldo-announce h2 { margin:4px 26px 0 0; font-size:16px; font-weight:700; color:var(--saldo-green); letter-spacing:-.2px; }
.saldo-announce ul { margin:10px 0 0; padding-left:18px; color:var(--saldo-muted); display:grid; gap:5px; }
.saldo-announce-close { position:absolute; top:8px; right:8px; width:32px; height:32px; display:flex; align-items:center; justify-content:center; border:0; border-radius:8px; background:transparent; color:var(--saldo-muted); cursor:pointer; font-size:18px; line-height:1; }
.saldo-announce-close:hover { background:#eef2ee; color:var(--saldo-green); }
.saldo-announce-actions { margin-top:14px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.saldo-announce-skip { margin-right:auto; border:0; background:none; padding:4px 0; color:var(--saldo-muted); font-size:12px; cursor:pointer; }
.saldo-announce-skip:hover { color:var(--saldo-green); text-decoration:underline; }
.saldo-announce-btn { margin-left:auto; min-height:36px; padding:7px 14px; border:1px solid var(--saldo-line); border-radius:9px; background:#fff; color:var(--saldo-green); font-weight:600; font-size:13px; cursor:pointer; text-decoration:none; }
.saldo-announce-btn + .saldo-announce-btn { margin-left:0; }
.saldo-announce-btn.is-primary { background:var(--saldo-green); border-color:var(--saldo-green); color:#fff; }
.saldo-announce-target { outline:2px solid var(--saldo-gold)!important; outline-offset:3px; border-radius:10px; }

/* Bedragen verbergen (feedback Jelter, 2026-10-22) */
.saldo-amt { cursor: pointer; }
.saldo-hide-amounts .saldo-amt { user-select: none; }
.saldo-hide-amounts canvas { filter: blur(8px); }
/* Feedback Jelter, 2026-10-26 en 2026-10-27 ("weer geblurred"): instellingen zoals minuten, dagen, dag van de maand of aantal personen zijn geen bedragen. Zet data-not-money op zo een invoerveld, dan blurt het niet. */
.saldo-hide-amounts input[type="number"]:not([data-not-money]) { filter: blur(6px); }
.saldo-privacy-btn[aria-pressed="true"] { background:#e8ede5; color:var(--saldo-green); }
.saldo-privacy-mobile { width:44px; height:44px; flex:none; border:1px solid #d6dfd4; border-radius:12px; align-items:center; justify-content:center; color:var(--saldo-green); background:#fff; font-size:18px; }

.saldo-privacy-mobile svg { width:20px; height:20px; }

.saldo-gap { margin-top:16px; border-top:1px solid var(--saldo-line); padding-top:12px; font-size:12px; line-height:1.55; }
.saldo-gap summary { cursor:pointer; color:var(--saldo-green); font-size:12px; font-weight:600; }
.saldo-gap-intro, .saldo-gap-note { color:var(--saldo-muted); margin:10px 0; }
.saldo-gap-steps { list-style:none; margin:0; padding:0; }
.saldo-gap-steps li { display:flex; justify-content:space-between; gap:16px; padding:8px 0; border-bottom:1px solid var(--saldo-line); }
.saldo-gap-steps strong { display:block; font-weight:600; }
.saldo-gap-steps span { color:var(--saldo-muted); font-size:11px; }
.saldo-gap-steps b, .saldo-gap-result b { white-space:nowrap; font-variant-numeric:tabular-nums; }
.saldo-gap-result { display:flex; justify-content:space-between; gap:16px; margin:10px 0 0; font-weight:600; }
.saldo-gap-steps li.saldo-gap-start { display:flex; justify-content:space-between; gap:16px; padding:8px 0; border-bottom:1px solid var(--saldo-line); }
.saldo-gap-steps li { display:block; padding:0; border-bottom:0; }
.saldo-gap-start strong { display:block; font-weight:600; }
.saldo-gap-start span { color:var(--saldo-muted); font-size:11px; }
.saldo-gap-step { border-bottom:1px solid var(--saldo-line); }
.saldo-gap-step>summary { list-style:none; display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:8px 0; cursor:pointer; color:inherit; font-weight:400; }
.saldo-gap-step>summary::-webkit-details-marker { display:none; }
.saldo-gap-step>summary strong { display:block; font-weight:600; }
.saldo-gap-step>summary strong::after { content:" \203A"; color:var(--saldo-green); }
.saldo-gap-step[open]>summary strong::after { content:" \2304"; }
.saldo-gap-items { list-style:none; margin:0 0 8px; padding:0; }
.saldo-gap-items li { border:0; padding:0; }
.saldo-gap-items button { width:100%; display:flex; justify-content:space-between; gap:12px; text-align:left; padding:6px 8px; border-radius:8px; font-size:11px; color:inherit; }
.saldo-gap-items button:hover { background:#eef2ea; }
.saldo-gap-items button b { white-space:nowrap; font-variant-numeric:tabular-nums; }
.saldo-gap-empty { color:var(--saldo-muted); font-size:11px; margin:4px 8px 8px; }
.saldo-gap-go { display:inline-flex; align-items:center; gap:6px; margin:0 8px 10px; font-size:11px; color:var(--saldo-green); font-weight:600; }

/* Uitgeklapte boekingen onder "Waarom wijkt dit af": een nette rij per boeking (feedback Jelter, 2026-10-23: "klapt heel lelijk uit") */
.saldo-gap-items button { align-items:baseline; }
.saldo-gap-items .saldo-gap-date { flex:0 0 74px; font-size:11px; color:var(--saldo-muted); white-space:nowrap; }
.saldo-gap-items .saldo-gap-desc { flex:1 1 auto; min-width:0; font-size:12px; color:inherit; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.saldo-gap-items button b { flex:0 0 auto; }
@media(max-width:760px) { .saldo-hero-grid { align-items:stretch; } }

/* Financiele copilot (zijpaneel) */
.copilot-panel { position:fixed; z-index:60; top:0; right:0; bottom:0; width:min(420px,100vw); display:flex; flex-direction:column; background:#fff; border-left:1px solid var(--saldo-line); box-shadow:-12px 0 32px rgba(33,63,45,.10); }
.copilot-panel[hidden] { display:none; }
.copilot-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:16px 18px 14px; background:#fff; color:var(--saldo-ink); border-bottom:1px solid var(--saldo-line); }
.copilot-eyebrow { display:block; color:var(--saldo-muted); margin-bottom:6px; }
.copilot-head strong { display:block; font-size:18px; letter-spacing:-.3px; color:var(--saldo-green); }
.copilot-sub { font-size:12px; color:var(--saldo-muted); }
.copilot-close { width:34px; height:34px; padding:0; flex:none; border-radius:9px; min-height:0 !important; }
.copilot-log { flex:1; overflow-y:auto; padding:16px 18px; display:flex; flex-direction:column; gap:10px; background:var(--saldo-paper); }
.copilot-msg { max-width:88%; padding:9px 12px; border-radius:12px; font-size:14px; line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere; }
.copilot-user { align-self:flex-end; background:var(--saldo-green); color:#fff; border-bottom-right-radius:4px; }
.copilot-assistant { align-self:flex-start; background:#fff; border:1px solid var(--saldo-line); border-bottom-left-radius:4px; }
.copilot-wait { color:var(--saldo-muted); font-style:italic; }
.copilot-error { background:#faeeea; border-color:#e7bfb3; color:#853c2e; }
.copilot-label { font-size:11px; font-weight:700; letter-spacing:.02em; color:var(--saldo-muted); margin-bottom:4px; }
.copilot-facts, .copilot-advice { margin-top:10px; padding-top:8px; border-top:1px solid var(--saldo-line); }
.copilot-fact { display:flex; justify-content:space-between; gap:12px; padding:2px 0; font-size:13px; }
.copilot-fact strong { white-space:nowrap; }
.copilot-advice { background:#f6f3e7; margin-left:-12px; margin-right:-12px; padding:8px 12px; border-top-color:var(--saldo-gold); }
.copilot-advice:last-child { margin-bottom:-9px; border-radius:0 0 12px 12px; }
.copilot-sources { margin-top:8px; font-size:11px; color:var(--saldo-muted); }
.saldo-hide-amounts .copilot-assistant:not(.copilot-wait):not(.copilot-error) { filter:blur(6px); }
.copilot-chips { display:flex; flex-direction:column; gap:8px; }
.copilot-panel .copilot-chip { justify-content:flex-start; text-align:left; padding:9px 12px; border-radius:12px; font-size:13px; font-weight:600; }
.copilot-intro { margin:0 0 14px; font-size:18px; font-weight:700; letter-spacing:-.3px; color:var(--saldo-green); }
.copilot-chip:hover { border-color:var(--saldo-green); }
.copilot-hint { display:flex; align-items:flex-start; gap:8px; margin:0; padding:8px 8px 8px 14px; font-size:11px; color:var(--saldo-muted); border-top:1px solid var(--saldo-line); }
.copilot-hint[hidden] { display:none; }
.copilot-hint p { flex:1 1 auto; margin:0; }
.copilot-hint-close { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border:0; border-radius:8px; background:transparent; color:var(--saldo-muted); cursor:pointer; }
.copilot-hint-close:hover { background:#eef2ea; color:var(--saldo-green); }
.copilot-hint-close svg { width:14px; height:14px; }
.copilot-details { margin-top:10px; white-space:normal; }
.copilot-details>summary { padding:6px 0; }
.copilot-details>summary span { display:block; color:var(--saldo-muted); font-size:11px; font-weight:400; }
.copilot-lines { max-height:260px; overflow-y:auto; }
.copilot-lines .copilot-line { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:6px 8px; font-size:11px; }
.copilot-lines .copilot-line b { flex:0 0 auto; white-space:nowrap; font-variant-numeric:tabular-nums; }
.copilot-form { display:flex; gap:8px; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); border-top:1px solid var(--saldo-line); }
.copilot-input { flex:1; width:auto; resize:none; padding:8px 10px; font-size:14px; }
.copilot-send { padding:0 16px; align-self:stretch; }
.copilot-open #feedback-launcher { z-index:61; }
.copilot-fab { position:fixed; z-index:44; right:20px; bottom:20px; display:flex; align-items:center; gap:8px; height:48px; padding:0 18px 0 14px; border:0; border-radius:24px; background:var(--saldo-green); color:#fff; font-size:14px; font-weight:600; box-shadow:0 8px 24px rgba(25,72,62,.28); cursor:pointer; }
.copilot-fab:hover { background:#256052; }
.copilot-open .copilot-fab { display:none; }
/* Feedback 2026-10-30 (c0ff43e0): op een breed scherm een gewoon chatvenster rechtsonder, geen strook over de hele hoogte. */
@media (min-width:768px) {
  .copilot-panel { top:auto; right:48px; bottom:20px; width:420px; height:min(680px,calc(100vh - 40px)); border:1px solid var(--saldo-line); border-radius:16px; overflow:hidden; box-shadow:0 16px 40px rgba(33,63,45,.16); }
}
@media (max-width:767px) {
  .copilot-panel { width:100vw; }
  .copilot-form { padding-right:46px; }
  .copilot-hint { padding-right:46px; }
  .copilot-fab { right:48px; bottom:calc(88px + env(safe-area-inset-bottom)); width:48px; padding:0; justify-content:center; }
  .copilot-fab span { display:none; }
}
/* Maandpagina: extra inzicht (feedback 2026-10-30, f82ceaad) */
.saldo-month-insights { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.saldo-month-insights .saldo-insight-wide { grid-column:span 2; }
.saldo-insight-note { margin:0 0 10px; font-size:13px; line-height:1.5; color:var(--saldo-muted); }
.saldo-insight-foot { margin:12px 0 0; font-size:12px; }
.saldo-insight-chart { position:relative; height:220px; }
.saldo-insight-row { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:9px 0; border-top:1px solid var(--saldo-line); font-size:13px; }
.saldo-insight-row:first-of-type { border-top:0; padding-top:0; }
.saldo-insight-row>span { min-width:0; overflow-wrap:anywhere; color:var(--saldo-ink); }
.saldo-insight-row small { display:block; margin-top:2px; font-size:11px; font-weight:600; color:var(--saldo-muted); }
.saldo-insight-row strong { flex:none; font:600 13px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--saldo-ink); }
.saldo-insight-row strong.saldo-out { color:#af5141; }
.saldo-insight-row strong.saldo-in { color:#286451; }
.saldo-insight-empty { margin:0; padding:8px 0; font-size:13px; color:var(--saldo-muted); }
.saldo-split { height:10px; margin:2px 0 12px; border-radius:999px; background:#eaeee9; overflow:hidden; }
.saldo-split span { display:block; height:100%; background:var(--saldo-green); }
@media (max-width:1100px) {
  .saldo-month-insights { grid-template-columns:1fr; }
  .saldo-month-insights .saldo-insight-wide { grid-column:auto; }
}

/* Statuslabels bij transacties (Terugvraag, Terugbetaling, Terugkerend, Betaalverzoek): allemaal dezelfde vorm,
   met rand en lichte vulling in de eigen kleur (feedback Jelter, 2026-11-01, 80415b3b). */
.saldo-pill { display:inline-block; margin:2px 4px 0 0; padding:1px 7px; border:1px solid; border-radius:5px; font-size:9px; font-weight:600; line-height:1.5; white-space:nowrap; }
.saldo-pill-lg { margin:0; padding:2px 8px; font-size:10px; }
.saldo-pill-violet { background:#f5f3ff; border-color:#ddd6fe; color:#6d28d9; }
.saldo-pill-indigo { background:#eef2ff; border-color:#c7d2fe; color:#4f46e5; }
.saldo-pill-emerald { background:#ecfdf5; border-color:#a7f3d0; color:#047857; }
.saldo-pill-sky { background:#f0f9ff; border-color:#bae6fd; color:#0369a1; }
.saldo-pill-amber { background:#fffbeb; border-color:#fde68a; color:#b45309; }
.saldo-pill-blue { background:#eff6ff; border-color:#bfdbfe; color:#2563eb; }
.saldo-pill-slate { background:#f1f5f9; border-color:#e2e8f0; color:#64748b; }
.changelog-version { display:inline-block; margin-left:8px; padding:2px 8px; border-radius:5px; background:#e7efe9; color:var(--saldo-green); font-size:12px; font-weight:600; letter-spacing:0; vertical-align:middle; }
/* Rentevraag: het kruisje sluit de melding voor deze maand, volgende maand komt hij terug (feedback Jelter, 2026-11-02, cbc97a0a). */
.saldo-bank-alert-close { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: #7a5a06; cursor: pointer; }
.saldo-bank-alert-close:hover { background: rgba(122, 90, 6, .1); }
.saldo-bank-alert-close svg { width: 16px; height: 16px; }
@media (max-width: 767px) {
  #dash-rente-alert { position: relative; padding-right: 44px; }
  #dash-rente-alert .saldo-bank-alert-close { position: absolute; top: 8px; right: 8px; }
}

/* Telefoon, bovenkant (feedback Jelter, 2026-11-02, 95b3b09f): logo, jaar, periode en knoppen liepen niet netjes op een lijn.
   Alles begint op dezelfde marge (16px); jaar en periode zijn even breed en eindigen waar de verversknop begint. */
@media (max-width: 767px) {
  body.feedback-dashboard .app-header { padding-left: 16px; padding-right: 16px; }
  .saldo-toolbar-top { align-items: center; }
  .saldo-period-heading { flex: 1 1 auto; min-width: 0; }
  .saldo-period-heading select { width: 100%; min-height: 44px; }
  .saldo-toolbar-actions>button { min-width: 44px; min-height: 44px; justify-content: center; }
  .saldo-period-mobile { margin-top: 8px; padding-right: 52px; }
  .saldo-period-mobile label { flex: 0 0 auto; font-size: 12px; }
  .saldo-period-mobile select { min-height: 44px; }
}

/* Terugknop boven de pagina (feedback Jelter, 2026-11-06): de pagina eronder krijgt de rest van de hoogte */
.app-main.has-nav-back { display:flex; flex-direction:column; }
.app-main.has-nav-back > .tab.active { flex:1 1 0; min-height:0; height:auto; }
.saldo-nav-back { flex:none; }

/* Alle betalingen: zoeken, filter en aantal op de paginakleur, acties achter Meer acties (feedback Jelter, 2026-11-11). */
#settings-section-dump .app-section-header.dump-toolbar { background:transparent!important; border:0!important; min-height:0; padding:18px 12px 10px; }
.dump-more { position:relative; }
.dump-more-menu { position:absolute; right:0; top:calc(100% + 6px); z-index:30; width:340px; max-width:calc(100vw - 32px); padding:6px; background:#fff; border:1px solid var(--saldo-line); border-radius:12px; box-shadow:0 10px 28px #20332e1f; }
.dump-more-menu[hidden] { display:none; }
.dump-more-menu button { display:flex; flex-direction:column; align-items:flex-start; gap:2px; width:100%; padding:9px 12px; border-radius:8px; text-align:left; background:transparent; color:var(--saldo-ink); }
.dump-more-menu button:hover,.dump-more-menu button:focus-visible { background:#f1f3ee; outline-offset:-2px; }
.dump-more-menu button { font-size:12px; font-weight:700; }
/* De uitleg komt uit data-hint: loadDump() zet de tekst van zijn knoppen tijdelijk op Bezig, dus de uitleg mag niet in een kindelement staan. */
.dump-more-menu button::after { content:attr(data-hint); font-size:11px; font-weight:500; line-height:1.4; color:var(--saldo-muted); }
.dump-more-menu button.is-danger { color:#a24737; }
.dump-more-menu button.is-danger:hover,.dump-more-menu button.is-danger:focus-visible { background:#faeeea; }
@media(max-width:767px) { #settings-section-dump .app-section-header.dump-toolbar { padding:12px 16px 6px; } }
/* Maandvergelijking: de tabs van de budgetpagina (saldo-view-tabs) in een maandkaart, zonder de paginamarges. */
.saldo-month-insights .saldo-view-tabs { padding:0; margin-bottom:6px; }
.saldo-month-insights .saldo-view-tabs>button { padding:8px 10px; }