:root {
  color-scheme: light;
  --plane:#f5f6f4; --surface:#ffffff; --surface-2:#fafbf9;
  --ink:#14201d; --ink-2:#4c5652; --muted:#8a938e;
  --line:#e4e6e1; --hair:rgba(20,32,29,0.10);
  --accent:#1a5c50; --accent-2:#14483f; --accent-soft:#e7f0ed;
  --pos:#0f7a3d; --neg:#c0392b;
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100; --s5:#d1618c; --s6:#6a4fc0; --s7:#8a6d3b; --s8:#14a3c7; --s9:#8c9a2b; --s10:#5f6f7f; --s11:#9c4a3c; --s12:#a39b8b;
  --liq1:#4fd1b8; --liq2:#22b3a0; --liq3:#0f8f82; --liq4:#146b5e; --liq5:#7d8681;
  --shadow:0 1px 2px rgba(20,32,29,0.05),0 8px 24px rgba(20,32,29,0.06);
  --shadow-lg:0 8px 20px rgba(20,32,29,0.10),0 24px 60px rgba(20,32,29,0.16);
  --font-sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --plane:#0c110f; --surface:#151b19; --surface-2:#1b221f;
    --ink:#eef2ef; --ink-2:#b0bab5; --muted:#7e8783;
    --line:#29302d; --hair:rgba(255,255,255,0.10);
    --accent:#3fa58f; --accent-2:#52b7a1; --accent-soft:#14322c;
    --pos:#34c46e; --neg:#e8695c;
    --s1:#3987e5; --s2:#e07047; --s3:#22bd86; --s4:#d7ac3e; --s5:#dd7ba0; --s6:#9085e9; --s7:#b58f5c; --s8:#3bbfe0; --s9:#aebb4d; --s10:#8fa0b0; --s11:#c9776a; --s12:#c4bcad; --liq1:#6ee6cc; --liq2:#3ecdb8; --liq3:#22a99a; --liq4:#2b8c7c; --liq5:#9aa39d;
    --shadow:0 1px 2px rgba(0,0,0,0.4),0 10px 28px rgba(0,0,0,0.45);
    --shadow-lg:0 12px 30px rgba(0,0,0,0.5),0 30px 70px rgba(0,0,0,0.6);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --plane:#0c110f; --surface:#151b19; --surface-2:#1b221f;
  --ink:#eef2ef; --ink-2:#b0bab5; --muted:#7e8783;
  --line:#29302d; --hair:rgba(255,255,255,0.10);
  --accent:#3fa58f; --accent-2:#52b7a1; --accent-soft:#14322c;
  --pos:#34c46e; --neg:#e8695c;
  --s1:#3987e5; --s2:#e07047; --s3:#22bd86; --s4:#d7ac3e; --s5:#dd7ba0; --s6:#9085e9; --s7:#b58f5c; --s8:#3bbfe0; --s9:#aebb4d; --s10:#8fa0b0; --s11:#c9776a; --s12:#c4bcad; --liq1:#6ee6cc; --liq2:#3ecdb8; --liq3:#22a99a; --liq4:#2b8c7c; --liq5:#9aa39d;
  --shadow:0 1px 2px rgba(0,0,0,0.4),0 10px 28px rgba(0,0,0,0.45);
  --shadow-lg:0 12px 30px rgba(0,0,0,0.5),0 30px 70px rgba(0,0,0,0.6);
}

* { box-sizing: border-box; }
html, body { margin: 0; font-family: var(--font-sans); }
.env-banner { position: sticky; top: 0; z-index: 21; height: 28px; display: flex; align-items: center; justify-content: center; font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.6px; padding: 0 10px; }
.env-banner.env-test { background: #f59e0b; color: #1a1300; }
.env-banner.env-production { background: var(--accent-2); color: #fff; }
html { scroll-behavior: smooth; }
.app { font-family: var(--font-sans); background: var(--plane); color: var(--ink); min-height: 100vh; -webkit-font-smoothing: antialiased; padding-bottom: 60px; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* Topbar + nav (gedeeld) */
.topbar { border-bottom: 1px solid var(--hair); background: var(--surface); position: sticky; top: 28px; z-index: 20; }
.topbar-in { max-width: 1120px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 16px; }
.mark { width: 42px; height: 42px; display: grid; place-items: center; flex: none; }
.mark img { width: 100%; height: 100%; object-fit: contain; }
.brand h1 { font-weight: 600; font-size: 18px; margin: 0; }
.brand p { margin: 1px 0 0; font-size: 12px; color: var(--muted); }
.spacer { flex: 1; }
.nav { display: flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--hair); border-radius: 10px; padding: 3px; }
.nav a { text-decoration: none; font-size: 13px; font-weight: 600; color: var(--ink-2); padding: 6px 14px; border-radius: 7px; white-space: nowrap; }
.nav a:hover { color: var(--ink); }
.nav a.on { background: var(--accent); color: #fff; }
.badge-concept { font-size: 11px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); padding: 5px 10px; border-radius: 999px; font-weight: 600; white-space: nowrap; }
.user-info { display: flex; align-items: center; gap: 10px; margin-left: 16px; }
.user-email { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.user-logout { font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--hair); border-radius: 8px; padding: 6px 12px; cursor: pointer; white-space: nowrap; }
.user-logout:hover { background: var(--surface); border-color: var(--accent); color: var(--accent); }

.card { background: var(--surface); border: 1px solid var(--hair); border-radius: 16px; box-shadow: var(--shadow); }

/* ---------- OVERZICHT ---------- */
.hero { margin-top: 26px; display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; scroll-margin-top: 112px; }
.hero-total { padding: 26px 28px; display: flex; flex-direction: column; }
.eyebrow { font-size: 11.5px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.bignum { font-size: 46px; font-weight: 650; letter-spacing: -1px; margin: 8px 0 2px; font-variant-numeric: tabular-nums; line-height: 1.02; }
.delta { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; }
.delta.pos { color: var(--pos); } .delta.neg { color: var(--neg); }
.delta span.sub { color: var(--muted); font-weight: 500; }
.hero-spark { margin-top: auto; padding-top: 16px; }
.hero-alloc { padding: 22px 24px; }
.card-title { font-size: 14px; font-weight: 650; margin: 0 0 2px; }
.card-sub { font-size: 12px; color: var(--muted); margin: 0 0 12px; }
.alloc-grid { display: flex; flex-wrap: wrap; gap: 16px 18px; align-items: center; justify-content: center; }
.alloc-grid > :first-child { flex: none; }
/* De legenda staat naast de donut als er minstens 210 px voor is, anders eronder (smalle kaart of telefoon). */
.legend { display: flex; flex-direction: column; gap: 8px; flex: 1 1 210px; min-width: 210px; }
.legrow { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; font-size: 13px; }
.legrow > span:nth-child(2) { overflow-wrap: anywhere; }
.dot { width: 11px; height: 11px; border-radius: 3px; }
.legrow .lv { font-variant-numeric: tabular-nums; color: var(--ink-2); font-weight: 600; white-space: nowrap; }
.legrow .lp { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 12px; min-width: 38px; text-align: right; white-space: nowrap; }

.sec { margin-top: 30px; scroll-margin-top: 112px; }
.sec-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.sec-head h2 { font-weight: 600; font-size: 20px; margin: 0; }
.sec-head p { margin: 0; font-size: 13px; color: var(--muted); }

.proj { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start; }
.chart-card { padding: 18px 18px 8px; }
.chart-top { display: flex; align-items: center; justify-content: space-between; padding: 0 6px 6px; flex-wrap: wrap; gap: 8px; }
.horizon { display: inline-flex; background: var(--surface-2); border: 1px solid var(--hair); border-radius: 10px; padding: 3px; gap: 2px; }
.horizon button { font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-2); border: none; background: transparent; padding: 6px 12px; border-radius: 8px; cursor: pointer; }
.horizon button.on { background: var(--accent); color: #fff; }
.legend-inline { display: flex; gap: 16px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.legend-inline i { font-style: normal; display: inline-flex; align-items: center; gap: 6px; }
.swatch-line { width: 18px; height: 0; border-top: 2px solid var(--accent); }
.swatch-dash { width: 18px; height: 0; border-top: 2px dashed var(--muted); }

.controls-card { padding: 20px 20px 22px; }
.ctl { margin-bottom: 15px; } .ctl:last-child { margin-bottom: 0; }
.ctl-lab { display: flex; justify-content: space-between; align-items: center; font-size: 13px; margin-bottom: 7px; }
.ctl-lab .nm { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.ctl-lab .val { font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 700; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 999px; background: var(--line); outline: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); cursor: pointer; border: 2px solid var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,0.25); }
input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); cursor: pointer; border: 2px solid var(--surface); }
.proj-result { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--hair); }
.proj-result .eyebrow { margin-bottom: 6px; display: block; }
.proj-num { font-size: 30px; font-weight: 650; letter-spacing: -0.6px; font-variant-numeric: tabular-nums; }
.proj-mult { font-size: 13px; color: var(--muted); margin-top: 2px; }
.proj-mult b { color: var(--pos); font-weight: 700; }
.note { font-size: 11.5px; color: var(--muted); margin-top: 14px; line-height: 1.5; }
.yr-link { color: var(--accent); font-weight: 600; text-decoration: none; }
.yr-link:hover { text-decoration: underline; }

.cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.cat { padding: 15px 15px 14px; }
.cat-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.cat-head .dot { width: 9px; height: 9px; }
.cat-head .nm { font-size: 12px; font-weight: 650; }
.cat-val { font-size: 19px; font-weight: 650; letter-spacing: -0.4px; font-variant-numeric: tabular-nums; }
.cat-meta { font-size: 11.5px; color: var(--muted); margin-top: 3px; }

.tbl-card { padding: 6px 4px 8px; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 640px; }
th { text-align: left; font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 12px 16px; border-bottom: 1px solid var(--hair); }
th.r, td.r { text-align: right; font-variant-numeric: tabular-nums; }
td { padding: 13px 16px; border-bottom: 1px solid var(--line); }
tr:last-child td { border-bottom: none; }
.asset-nm { font-weight: 600; }
.asset-cat { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-2); }
.src { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 6px; }
.src.auto, .src.koers { color: var(--accent); background: var(--accent-soft); }
.src.hand { color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--hair); }
.liq-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ink-2); }
.liq-badge .dot { width: 8px; height: 8px; }
.stale { color: var(--muted); }
.stale.stale-warn { color: var(--neg); font-weight: 600; }

.hint { font-size: 12px; color: var(--muted); }
.mut-list { margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.mut-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; padding: 6px 0; border-bottom: 1px solid var(--hair); }
.mut-row:last-child { border-bottom: none; }
.mut-date { color: var(--muted); min-width: 78px; }
.mut-amt { font-weight: 650; font-variant-numeric: tabular-nums; min-width: 90px; }
.mut-amt.pos { color: var(--pos); }
.mut-amt.neg { color: var(--neg); }
.mut-note { color: var(--ink-2); flex: 1; }
.mut-edit { margin-left: auto; background: none; border: none; color: var(--muted); font-size: 14px; line-height: 1; cursor: pointer; padding: 2px 6px; }
.mut-edit:hover { color: var(--accent); }
.mut-del { background: none; border: none; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; padding: 2px 6px; }
.mut-del:hover { color: var(--neg); }

.tip { position: fixed; pointer-events: none; z-index: 40; background: var(--surface); color: var(--ink); border: 1px solid var(--hair); box-shadow: var(--shadow); border-radius: 9px; padding: 9px 11px; font-size: 12.5px; opacity: 0; transition: opacity .08s; min-width: 140px; }
.tip .tt { color: var(--muted); font-size: 11px; margin-bottom: 4px; }
.tip .tv { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 15px; }
.tip .tk { font-size: 11px; margin-top: 3px; color: var(--muted); }

.foot { margin-top: 34px; font-size: 12px; color: var(--muted); line-height: 1.6; }

/* ---------- ZIJMENU (gedeeld: Overzicht + Beheer) ---------- */
.side-layout { display: grid; grid-template-columns: 200px 1fr; gap: 28px; align-items: start; margin-top: 26px; }
.side-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 112px; }
.side-nav-item { text-align: left; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--ink-2); background: transparent; border: none; border-left: 3px solid transparent; padding: 10px 14px; border-radius: 0 8px 8px 0; cursor: pointer; text-decoration: none; display: block; }
.side-nav-item:hover { background: var(--surface-2); color: var(--ink); }
.side-nav-item.on { background: var(--accent-soft); border-left-color: var(--accent); color: var(--accent); }
.side-content .head:first-child, .side-content .hero:first-child { margin-top: 0; }
.side-content .sec:first-child { margin-top: 0; }
@media (max-width: 720px) {
  .side-layout { grid-template-columns: 1fr; }
  .side-nav { position: static; flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 4px; }
  .side-nav-item { border-left: none; border-bottom: 3px solid transparent; border-radius: 8px 8px 0 0; white-space: nowrap; }
  .side-nav-item.on { border-bottom-color: var(--accent); }
}
.head { margin-top: 26px; display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.head h2 { font-weight: 600; font-size: 24px; margin: 0; }
.head p { margin: 4px 0 0; font-size: 13px; color: var(--muted); max-width: 560px; }
.btn { font-family: inherit; font-size: 13.5px; font-weight: 650; border-radius: 10px; padding: 10px 16px; cursor: pointer; border: 1px solid transparent; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-2); }
.btn-ghost { background: var(--surface); color: var(--ink-2); border-color: var(--hair); }
.btn-ghost:hover { background: var(--surface-2); }

.summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 20px; }
.stat { background: var(--surface); border: 1px solid var(--hair); border-radius: 14px; padding: 16px 18px; box-shadow: var(--shadow); }
.stat .lab { font-size: 11.5px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.stat .num { font-size: 24px; font-weight: 650; margin-top: 5px; letter-spacing: -0.4px; font-variant-numeric: tabular-nums; }
.stat .sub { font-size: 12px; color: var(--muted); margin-top: 2px; }

.grouphdr { display: flex; align-items: center; gap: 9px; margin: 26px 0 10px; }
.grouphdr .dot { width: 10px; height: 10px; border-radius: 3px; }
.grouphdr h3 { font-size: 13px; font-weight: 700; margin: 0; }
.grouphdr .gt { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; margin-left: auto; }

.list { background: var(--surface); border: 1px solid var(--hair); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; }
.row { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); cursor: pointer; }
.row:last-child { border-bottom: none; }
.row:hover { background: var(--surface-2); }
.row .nm { font-weight: 600; font-size: 14px; }
.row .meta { font-size: 12px; color: var(--muted); margin-top: 2px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row .val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; font-size: 15px; }
.row .val small { display: block; font-weight: 500; font-size: 11px; color: var(--muted); margin-top: 2px; }
.row .chev { color: var(--muted); font-size: 12px; transition: transform .15s; width: 16px; text-align: center; }
.row.open .chev { transform: rotate(90deg); }

.hist { padding: 0 18px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.hist-in { padding: 14px 0 16px; display: block; }
.hist h4 { margin: 0 0 8px; font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.hist ul { margin: 0; padding: 0; list-style: none; font-size: 12.5px; }
.hist li { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dashed var(--hair); }
.hist li:last-child { border-bottom: none; }
.hist li b { font-variant-numeric: tabular-nums; font-weight: 600; }
.hist li span { color: var(--muted); }
.hist .empty { font-size: 12.5px; color: var(--muted); padding: 6px 0; }
.row-actions { display: flex; gap: 8px; margin-top: 10px; }
.mini { font-family: inherit; font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 8px; cursor: pointer; border: 1px solid var(--hair); background: var(--surface); color: var(--ink-2); }
.mini:hover { background: var(--surface); border-color: var(--accent); color: var(--accent); }
.mini.del:hover { border-color: var(--neg); color: var(--neg); }

.overlay { position: fixed; inset: 0; background: rgba(20,32,29,0.45); display: none; align-items: flex-start; justify-content: center; padding: 48px 20px; z-index: 50; overflow-y: auto; }
.overlay.show { display: flex; }
.modal { background: var(--surface); border-radius: 18px; box-shadow: var(--shadow-lg); width: 100%; max-width: 520px; border: 1px solid var(--hair); }
.modal-h { padding: 20px 24px 0; }
.modal-h h3 { font-weight: 600; font-size: 20px; margin: 0; }
.modal-h p { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); }
.modal-b { padding: 18px 24px 4px; }
.field { margin-bottom: 15px; }
.field label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; color: var(--ink-2); }
.field input, .field select, .field textarea { width: 100%; font-family: inherit; font-size: 14px; color: var(--ink); background: var(--surface-2); border: 1px solid var(--hair); border-radius: 9px; padding: 10px 12px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.field .hint { font-size: 11.5px; color: var(--muted); margin-top: 5px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: var(--surface-2); border: 1px solid var(--hair); border-radius: 11px; padding: 4px; }
.seg button { font-family: inherit; font-size: 13px; font-weight: 650; border: none; background: transparent; color: var(--ink-2); padding: 9px 8px; border-radius: 8px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.seg button small { font-weight: 500; font-size: 10.5px; color: var(--muted); }
.seg button.on { background: var(--surface); box-shadow: var(--shadow); color: var(--accent); }
.seg button.on small { color: var(--accent); }
.koersbox { background: var(--accent-soft); border: 1px solid var(--hair); border-radius: 11px; padding: 13px 15px; margin-top: 4px; }
.koersbox .kline { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; }
.koersbox .kline + .kline { margin-top: 6px; }
.koersbox .knm { color: var(--ink-2); }
.koersbox .kv { font-variant-numeric: tabular-nums; font-weight: 600; }
.koersbox .ktot { border-top: 1px solid var(--hair); margin-top: 9px; padding-top: 9px; }
.koersbox .ktot .kv { font-size: 18px; font-weight: 700; color: var(--accent); }
.koersbox .kbadge { font-size: 11px; color: var(--accent); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.koersbox.err { background: color-mix(in srgb, var(--neg) 10%, var(--surface)); }
.koersbox.err .kmsg { font-size: 12.5px; color: var(--neg); }
.modal-f { padding: 12px 24px 22px; display: flex; gap: 10px; justify-content: flex-end; border-top: 1px solid var(--hair); margin-top: 8px; }

.note2 { font-size: 12px; color: var(--muted); margin-top: 22px; line-height: 1.6; background: var(--surface); border: 1px solid var(--hair); border-left: 3px solid var(--accent); border-radius: 10px; padding: 13px 16px; }
.note2 b { color: var(--ink-2); }

.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--ink); color: var(--surface); font-size: 13px; font-weight: 600; padding: 11px 18px; border-radius: 10px; box-shadow: var(--shadow-lg); opacity: 0; transition: opacity .18s, transform .18s; z-index: 60; pointer-events: none; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 940px) {
  .hero, .proj { grid-template-columns: 1fr; }
  .cats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .summary { grid-template-columns: 1fr; }
  .hist-in { grid-template-columns: 1fr; }
  .two { grid-template-columns: 1fr; }
  .cats { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Vaste lasten (accordion), entiteiten, rendement/expiratie, kwartaalstanden ---------- */
.accordion { padding: 18px 22px; }
.accordion-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.accordion-head .card-sub { margin: 0; }
.accordion-total { font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; }
.accordion-body { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.accordion-body[hidden] { display: none; }
.ent-badge { display: inline-block; font-size: 11px; font-weight: 600; color: #fff; padding: 2px 8px; border-radius: 999px; margin-left: 6px; vertical-align: middle; }
.yield-badge { font-size: 11px; font-weight: 600; color: var(--accent); background: var(--accent-soft); padding: 2px 7px; border-radius: 6px; }
.yield-badge.exp { color: #8a5a00; background: #fdf1d6; }
.attn-badge { font-size: 11px; font-weight: 700; color: #7a4a00; background: #fde7b0; border: 1px solid #f1c56a; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.qtr-box { margin: 10px 0; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--hair); border-radius: 10px; }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .yield-badge.exp { color: #f2c46b; background: #3a2c0d; }
  :root:where(:not([data-theme="light"])) .attn-badge { color: #f2c46b; background: #3a2c0d; border-color: #6b4d12; }
}
:root[data-theme="dark"] .yield-badge.exp { color: #f2c46b; background: #3a2c0d; }
:root[data-theme="dark"] .attn-badge { color: #f2c46b; background: #3a2c0d; border-color: #6b4d12; }
.attn-card { display: flex; align-items: center; gap: 14px; padding: 12px 18px; margin-top: 12px; font-size: 13.5px; color: var(--ink-2); }
.attn-card b { color: var(--ink); }
.attn-card .attn-badge { flex: none; }

/* ---------- Groepsstructuur (React Flow organogram) ---------- */
.gs-canvas { height: 520px; margin-top: 20px; overflow: hidden; padding: 0; }
.gs-canvas .react-flow { --xy-background-color: var(--surface); --xy-edge-label-color: var(--ink-2); --xy-edge-label-background-color: var(--surface-2); }
.gs-node { width: 230px; min-height: 92px; padding: 10px 14px; background: var(--surface); color: var(--ink); border: 1px solid var(--hair); border-left: 5px solid var(--s1); border-radius: 12px; box-shadow: var(--shadow); font-family: var(--font-sans); cursor: pointer; }
.gs-node.selected { outline: 2px solid var(--accent); outline-offset: 1px; }
.gs-node-type { display: inline-block; font-size: 10.5px; font-weight: 700; color: #fff; padding: 2px 8px; border-radius: 999px; letter-spacing: 0.3px; }
.gs-node-name { font-weight: 600; font-size: 15px; margin-top: 6px; line-height: 1.2; }
.gs-node-meta { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.gs-detail { margin-top: 16px; padding: 20px 22px; }
.gs-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.gs-detail h3 { font-size: 20px; margin: 0; font-weight: 600; }
.gs-detail-stats { display: flex; gap: 22px; }
.gs-detail-stats .lab { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted); font-weight: 600; }
.gs-detail-stats b { font-size: 16px; font-variant-numeric: tabular-nums; }
.gs-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 800px) { .gs-cols { grid-template-columns: 1fr; } }
.gs-line { font-size: 13.5px; color: var(--ink-2); margin: 6px 0; }
.gs-link { color: var(--accent); font-weight: 600; text-decoration: none; }
.gs-form { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.gs-assets { box-shadow: none; }
.gs-asset { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.gs-asset:last-child { border-bottom: none; }
.gs-asset-nm { flex: 1; } .gs-asset-nm small { display: block; color: var(--muted); font-size: 11.5px; }
.gs-asset-val { font-variant-numeric: tabular-nums; font-weight: 600; }
.gs-node .react-flow__handle { opacity: 0; pointer-events: none; }
.accordion-head > div:first-child { flex: 1 1 280px; }
.accordion-head > .spacer { display: none; }

/* ---------- SCENARIO SIMULATOR ---------- */
.scn-switch { display: flex; align-items: center; }
.scn-select { font-family: inherit; font-size: 13px; font-weight: 600; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--hair); border-radius: 9px; padding: 7px 10px; max-width: 200px; cursor: pointer; }
.scn-select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
body.scn-active .scn-select { border-color: var(--s6); color: var(--s6); }
.scn-badge { display: inline-block; margin-top: 3px; max-width: 400px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: top; font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: #fff; background: var(--s6); padding: 2px 9px; border-radius: 999px; }
body.scn-active .topbar { box-shadow: inset 0 -3px 0 var(--s6); }
/* De badge maakt de topbalk ~20px hoger: plakkend zijmenu en sprongankers schuiven mee. */
body.scn-active .side-nav { top: 134px; }
body.scn-active .hero, body.scn-active .sec { scroll-margin-top: 134px; }
/* Smalle schermen: de topbalk (merk, selector, nav, gebruiker) mag over twee regels. */
@media (max-width: 960px) {
  .topbar-in { flex-wrap: wrap; row-gap: 10px; }
  .scn-select { max-width: 150px; }
}
.scn-opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--hair); border-radius: 10px; margin-bottom: 8px; cursor: pointer; background: var(--surface-2); }
.scn-opt input { margin-top: 3px; }
.scn-opt b { display: block; font-size: 13.5px; }
.scn-opt small { color: var(--muted); font-size: 12px; }
.scn-opt.on { border-color: var(--accent); background: var(--accent-soft); }
.scn-opt.off { opacity: 0.5; cursor: not-allowed; }
.scn-compare { padding: 20px 22px; margin-top: 20px; }
.scn-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 4px 0 14px; }
.scn-chk { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; cursor: pointer; }
.scn-sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.scn-chart { width: 100%; overflow-x: auto; }
.scn-cmp-tbl { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 14px; }
.scn-cmp-tbl th { text-align: right; font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted); font-weight: 600; padding: 6px 8px; }
.scn-cmp-tbl th:first-child, .scn-cmp-tbl td:first-child { text-align: left; }
.scn-cmp-tbl td { text-align: right; padding: 8px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }

/* Live-bescherming: extra bevestiging vóór elke wijziging van de Live Stand */
.live-guard { z-index: 300; align-items: center; padding-top: 20px; padding-bottom: 20px; }
.live-guard .modal { max-width: 460px; border-top: 5px solid var(--neg); }
.live-guard .modal-h h3 { color: var(--neg); }
.live-guard .lg-what { margin: 0 0 8px; font-size: 15px; font-weight: 600; color: var(--ink); }
.live-guard .lg-warn { margin: 0 0 8px; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.live-guard .lg-tip { margin: 0 0 12px; font-size: 12.5px; color: var(--muted); }
.live-guard .lg-ok { background: var(--neg); color: #fff; }
.live-guard .lg-ok:hover { filter: brightness(0.92); }

/* Contextregel onder paginatitels: Live Stand of actief scenario */
.scn-ctx { display: inline-flex; align-items: center; gap: 7px; margin: 6px 0 2px; padding: 3px 11px 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 650; max-width: 100%; }
.scn-ctx-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scn-ctx-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.scn-ctx-live { background: color-mix(in srgb, var(--pos) 12%, var(--surface)); color: var(--pos); }
.scn-ctx-live .scn-ctx-dot { background: var(--pos); }
.scn-ctx-scn { background: var(--s6); color: #fff; }
.scn-ctx-scn .scn-ctx-dot { background: #fff; }
.side-content > .scn-ctx { margin: 0 0 14px; }

/* Beheer > Versie-info */
.ver-card { padding: 16px 20px; margin-bottom: 12px; }
.ver-card.ver-current { border-color: var(--accent); }
.ver-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ver-num { font-weight: 700; font-size: 15px; color: var(--accent); font-variant-numeric: tabular-nums; }
.ver-title { font-weight: 600; font-size: 15px; }
.ver-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #fff; background: var(--accent); padding: 2px 8px; border-radius: 999px; }
.ver-date { margin-left: auto; font-size: 12.5px; color: var(--muted); }
.ver-items { margin: 8px 0 0; padding-left: 20px; font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }
.ver-group { margin: 12px 0 0; font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; }
.ver-group + .ver-items { margin-top: 4px; }
.ver-group.ver-func { color: var(--accent); }
.ver-group.ver-bug { color: #b45309; }
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) .ver-group.ver-bug { color: #f2a64b; } }
:root[data-theme="dark"] .ver-group.ver-bug { color: #f2a64b; }

/* Tweestapsverificatie: QR-code, handmatige sleutel en back-upcodes */
.qr-box { display: flex; justify-content: center; padding: 12px; background: #fff; border-radius: 12px; border: 1px solid var(--hair); width: fit-content; }
.qr-box img { display: block; width: 200px; height: 200px; }
.secret-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; letter-spacing: 1px; word-break: break-all; background: var(--surface-2); border-radius: 8px; padding: 8px 10px; margin: 4px 0 14px; user-select: all; }
.backup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
.backup-grid code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; background: var(--surface-2); border-radius: 8px; padding: 6px 10px; text-align: center; }
.backup-saved { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Topbalk: Beveiliging als compact slotje; e-mail wordt korter op middelgrote schermen */
.user-sec { display: inline-flex; align-items: center; justify-content: center; padding: 6px 9px; text-decoration: none; }
.user-sec svg { display: block; }
@media (max-width: 1240px) {
  .user-info { margin-left: 4px; gap: 8px; }
  .user-email { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 1100px) {
  .user-email { display: none; } /* e-mailadres staat dan in de tooltip van het slotje */
}

/* Beheer > Categorieën */
.cat-row { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--hair); }
.cat-row:last-child { border-bottom: 0; }
.cat-row.archived { opacity: 0.62; }
.cat-dot { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.cat-nm { font-weight: 600; font-size: 14.5px; }
.cat-meta { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.cat-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.cat-badge { display: inline-block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #fff; background: var(--muted); padding: 1px 8px; border-radius: 999px; margin-left: 8px; vertical-align: middle; }
.koers-info { font-size: 12.5px; color: var(--muted); margin: 6px 0 0; line-height: 1.5; }
.koers-msg { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--hair); font-size: 13px; line-height: 1.55; }
.koers-msg ul { margin: 6px 0 0; padding-left: 18px; }
.koers-msg .bad { color: var(--neg); }

/* Cashflow & liquide buffer (Overzicht) */
.cf-toggles { display: flex; gap: 6px 18px; flex-wrap: wrap; margin: 4px 0 12px; font-size: 12.5px; color: var(--ink-2); }
.cf-toggles label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.cf-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 0 0 14px; }
.cf-kpi { background: var(--surface-2); border: 1px solid var(--hair); border-radius: 12px; padding: 10px 12px; }
.cf-kpi .k { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; }
.cf-kpi .v { font-size: 17px; font-weight: 650; margin-top: 3px; font-variant-numeric: tabular-nums; }
.cf-kpi .s { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.cf-kpi.warn .v { color: var(--neg); }
.cf-badge { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; color: #fff; background: var(--accent); white-space: nowrap; }
.cf-badge.herbeleg { background: var(--s1); }
.cf-badge.aanwenden { background: var(--s6); }
.cf-badge.keuze { background: var(--s4); color: #1b1b1b; }
.cf-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; font-size: 12px; color: var(--ink-2); }
.cf-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cf-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; flex: none; }
.cf-legend i.ln { height: 0; width: 18px; border-top: 2.5px solid var(--accent); border-radius: 0; }
.cf-agenda td { vertical-align: top; }
.cf-agenda .when { white-space: nowrap; font-weight: 600; }
.cf-acct { margin-top: 14px; border: 1px solid var(--hair); border-left: 4px solid var(--neg); border-radius: 12px; padding: 12px 14px; background: var(--surface-2); }
.cf-acct h4 { margin: 0 0 4px; font-size: 14px; font-weight: 650; color: var(--neg); }
.cf-acct .sub { font-size: 12px; color: var(--muted); margin: 0 0 8px; }
.cf-acct table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cf-acct th { text-align: left; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; padding: 4px 8px 4px 0; }
.cf-acct td { padding: 6px 8px 6px 0; border-top: 1px solid var(--hair); vertical-align: top; }
.cf-acct .r { text-align: right; padding-right: 0; font-variant-numeric: tabular-nums; }
.cf-acct-ok { margin-top: 10px; font-size: 12px; color: var(--muted); }

/* Schuldformulier: soortkeuze en infobox */
.debt-types { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 6px; }
.type-card { font-family: inherit; text-align: left; cursor: pointer; border: 1.5px solid var(--hair); background: var(--surface); color: var(--ink); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.type-card b { font-size: 14px; }
.type-card span { font-size: 12px; color: var(--muted); }
.type-card:hover { border-color: var(--accent); }
.type-card.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent) inset; }
.type-other { font-family: inherit; background: none; border: 0; padding: 0; margin: 2px 0 10px; font-size: 12px; color: var(--accent); font-weight: 600; cursor: pointer; text-decoration: underline; }
.type-other.on { color: var(--ink); text-decoration: none; cursor: default; }
.info-box { border: 1px solid var(--hair); border-left: 4px solid var(--accent); background: var(--surface-2); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); margin: 8px 0 12px; }
.sched-preview { font-size: 12.5px; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--hair); border-radius: 10px; padding: 8px 12px; margin: 4px 0 12px; line-height: 1.55; }
.auto-badge { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; padding: 1px 8px; border-radius: 999px; color: #fff; background: var(--s6); margin-right: 6px; }
@media (max-width: 560px) { .debt-types { grid-template-columns: 1fr; } }

/* ---------- Mobiel (telefoon) ----------
   Regels voor smalle schermen. Kolommen mogen smaller worden dan hun inhoud (min-width: 0),
   anders rekt een lange rij (menu, tabel) de hele pagina op en moet je op de telefoon zoomen.
   Nieuwe schermen: controleer ze op 375 px breed (zie docs/mobiele-controle.md). */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Alleen afbeeldingen begrenzen; een SVG zonder eigen breedte (zoals de lijnen van het organogram) zou anders 0 px breed worden en niet meer getekend. */
img { max-width: 100%; }
.wrap, .side-layout > *, .side-content, .hero > *, .proj > *, .alloc-grid > *, .two > *, .card, .sec, .chart-card, .controls-card { min-width: 0; }
.tbl-card table { min-width: 520px; }
.chart-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 720px) {
  .env-banner { position: static; }
  .topbar { position: static; }
  .wrap { padding: 0 14px; }
  .topbar-in { padding: 10px 14px; gap: 8px 10px; flex-wrap: wrap; }
  .topbar-in > .spacer { display: none; }
  .mark { width: 34px; height: 34px; }
  .brand { min-width: 0; flex: 1 1 auto; }
  .brand h1 { font-size: 16px; }
  .user-info { order: 2; margin-left: auto; gap: 6px; }
  .scn-switch { order: 3; flex: 1 1 150px; min-width: 0; }
  .scn-select { max-width: none; width: 100%; }
  .nav { order: 4; flex: 1 1 auto; justify-content: space-between; }
  .nav a { flex: 1; text-align: center; padding: 8px 10px; }
  .side-layout { margin-top: 14px; gap: 12px; }
  .side-nav { position: static; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .side-nav::-webkit-scrollbar { display: none; }
  .side-nav-item { flex: none; padding: 10px 12px; }
  .hero, .sec { scroll-margin-top: 12px; margin-top: 18px; }
  .hero-total { padding: 18px 18px; }
  .hero-alloc { padding: 16px 16px; }
  .bignum { font-size: 34px; }
  .alloc-grid { gap: 14px; }
  .alloc-grid .legend { flex-basis: 100%; }
  .legrow { grid-template-columns: 12px 1fr auto auto; gap: 7px; font-size: 12.5px; }
  .chart-card, .controls-card { padding-left: 14px; padding-right: 14px; }
  .proj-num { font-size: 26px; }
  .sec-head { flex-wrap: wrap; gap: 2px 10px; }
  .sec-head h2 { font-size: 20px; }
  .head h2 { font-size: 20px; }
  .head .btn { width: 100%; }
  .btn { padding: 11px 14px; min-height: 42px; }
  .mini { min-height: 36px; padding: 7px 12px; }
  .horizon button { padding: 8px 12px; }
  .row { grid-template-columns: 1fr auto; gap: 8px 10px; padding: 12px 14px; }
  .row .val { text-align: right; }
  .row .chev { display: none; }
  .row-actions { flex-wrap: wrap; gap: 8px; }
  .grouphdr { flex-wrap: wrap; }
  .accordion { padding: 14px; }
  .accordion-head { gap: 8px; }
  .card.cat, .cat { padding: 12px; }
  .cat-val { font-size: 17px; }
  .overlay { padding: 12px 10px; }
  .modal { border-radius: 14px; max-width: none; }
  .modal-h { padding: 16px 16px 0; }
  .modal-b { padding: 14px 16px 4px; }
  .modal-f { padding: 12px 16px 16px; flex-wrap: wrap; }
  .modal-f .btn { flex: 1 1 auto; }
  /* 16px voorkomt dat iOS inzoomt bij het typen */
  .field input, .field select, .field textarea, select, input[type=text], input[type=number], input[type=date], input[type=password], input[type=email] { font-size: 16px; }
  .toast { left: 12px; right: 12px; transform: translateY(20px); text-align: center; bottom: 14px; }
  .toast.show { transform: translateY(0); }
  .cf-kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
  .cf-kpi { padding: 8px 10px; }
  .cf-kpi .v { font-size: 15px; }
  .cf-toggles { gap: 8px 14px; }
  .cf-toggles label:last-child { margin-left: 0 !important; width: 100%; }
  .cf-acct { padding: 10px 12px; }
  .cf-acct table { display: block; overflow-x: auto; min-width: 0; }
  .cf-acct th, .cf-acct td { white-space: nowrap; }
  .tip { max-width: 85vw; }
  .legend-inline { gap: 6px 12px; }
  .scn-compare { padding: 14px; }
}
@media (max-width: 420px) {
  .cats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .cf-kpis { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  /* Opslaan blijft bereikbaar in een lang formulier */
  .modal-f { position: sticky; bottom: 0; background: var(--surface); border-radius: 0 0 14px 14px; }
}

/* Brede tabellen: de eerste kolom (jaar, naam) blijft in beeld bij zijwaarts scrollen en een schaduwrand
   toont dat er meer te zien is. Geldt voor tabellen in .tbl-card, de rekeningtekort-tabel en de scenariotabel. */
.tbl-card table th:first-child, .tbl-card table td:first-child,
.cf-acct table th:first-child, .cf-acct table td:first-child,
.scn-cmp-tbl th:first-child, .scn-cmp-tbl td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--line); }
.cf-acct table th:first-child, .cf-acct table td:first-child { background: var(--surface-2); }
.tbl-card {
  background:
    linear-gradient(to right, var(--surface) 30%, transparent) 0 0 / 36px 100% no-repeat local,
    linear-gradient(to left, var(--surface) 30%, transparent) 100% 0 / 36px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.30), transparent) 0 0 / 16px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.30), transparent) 100% 0 / 16px 100% no-repeat scroll,
    var(--surface);
}
.scn-compare { overflow-x: auto; }
.scn-cmp-tbl { min-width: 440px; }

/* Jaartabel (wat-als-projectie): getallen breken niet af; kolomkoppen mogen over twee regels (geen "EUR" los van het bedrag); is de tabel
   breder dan de kaart, dan scrolt hij zijwaarts in plaats van samen te knijpen. Compactere celafstand. */
.tbl-card table.proj-tbl { width: auto; min-width: 100%; }
.proj-tbl th, .proj-tbl td { padding-left: 12px; padding-right: 12px; white-space: nowrap; }
.proj-tbl th { padding-top: 11px; padding-bottom: 11px; white-space: normal; line-height: 1.25; vertical-align: bottom; }
.proj-tbl th:first-child { white-space: nowrap; }
.proj-tbl td { padding-top: 11px; padding-bottom: 11px; }
.proj-tbl td .sub { display: block; font-size: 11px; font-weight: 500; color: var(--muted); margin-top: 1px; }

/* DGA-salaris: uitsplitsing bruto, loonheffing en netto in het formulier (Beheer > Inkomsten). Drie rijen onder elkaar,
   label links en bedragen rechts; op een telefoon breekt het label af in plaats van de pagina te verbreden. */
.dga-calc { border: 1px solid var(--hair); background: var(--surface-2); border-radius: 12px; padding: 4px 14px; margin: 2px 0 14px; }
.dga-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line); }
.dga-row:last-child { border-bottom: 0; }
.dga-row span { font-size: 13px; color: var(--ink-2); }
.dga-row span em { font-style: normal; color: var(--muted); }
.dga-row b { font-size: 15px; font-variant-numeric: tabular-nums; text-align: right; }
.dga-row small { grid-column: 2; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.dga-row.neg b { color: var(--neg); }
.dga-row.net b { color: var(--pos); font-size: 16px; }

/* Fiscale tarieven (Beheer > Fiscale tarieven): bronvermelding onder elke set en de schijven-editor in het formulier.
   De bronlink mag afbreken zodat een lange URL op een telefoon de pagina niet verbreedt. */
.tax-src { margin-top: 12px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--hair); border-radius: 10px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.tax-src a { color: var(--accent); font-weight: 600; overflow-wrap: anywhere; word-break: break-word; }
.hint a { color: var(--accent); overflow-wrap: anywhere; word-break: break-word; }
.tax-oms { margin-top: 3px; color: var(--muted); }
.tax-chk { margin-top: 3px; color: var(--muted); }
.tax-chk.warn { color: var(--neg); font-weight: 600; }
.tax-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 96px) 40px; gap: 8px; margin-bottom: 8px; align-items: center; }
.tax-head { margin-bottom: 4px; }
.tax-head span { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.tax-row input { width: 100%; font-family: inherit; font-size: 14px; color: var(--ink); background: var(--surface-2); border: 1px solid var(--hair); border-radius: 9px; padding: 10px 12px; min-width: 0; }
.tax-row input:disabled { color: var(--muted); }
.tax-row .t-del { padding: 8px 0; font-size: 16px; line-height: 1; }
@media (max-width: 760px) { .tax-row input, input[type=url] { font-size: 16px; } }

/* ===== AI Partner (/ai-partner): privacy-banner, Health Check, gesprekken en chat. Mobiel: alles onder elkaar, geen
   zijwaarts scrollen; de gesprekkenlijst klapt in; grafieken schalen mee. ===== */
.ai-wrap { padding-top: 18px; }
.ai-privacy { display: flex; gap: 14px; align-items: center; justify-content: space-between; background: var(--accent-soft); border: 1px solid var(--hair); border-left: 4px solid var(--accent); border-radius: 12px; padding: 12px 16px; font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.ai-priv-text { min-width: 0; }
.ai-priv-btn { font-family: inherit; font-size: 13px; font-weight: 650; color: var(--accent); background: var(--surface); border: 1px solid var(--accent); border-radius: 9px; padding: 8px 14px; cursor: pointer; white-space: nowrap; }
.ai-priv-btn:hover { background: var(--accent); color: #fff; }

.ai-health { margin-top: 18px; }
.ai-health-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.ai-health-head h3 { margin: 0; font-size: 16px; }
.ai-health-sub { font-size: 12.5px; color: var(--pos); font-weight: 600; }
.ai-health-sub.risk { color: var(--neg); }
.ai-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.ai-card { background: var(--surface); border: 1px solid var(--hair); border-left: 4px solid var(--muted); border-radius: 12px; padding: 12px 14px; box-shadow: var(--shadow); display: flex; flex-direction: column; min-width: 0; }
.ai-card.risk { border-left-color: var(--neg); }
.ai-card.warn { border-left-color: var(--s4); }
.ai-card.ok { border-left-color: var(--pos); }
.ai-card.info { border-left-color: var(--s1); }
.ai-card-h { display: flex; gap: 8px; align-items: baseline; }
.ai-card-h b { font-size: 14px; }
.ai-card-ico { font-size: 13px; color: var(--muted); flex: none; }
.ai-card.risk .ai-card-ico { color: var(--neg); }
.ai-card.ok .ai-card-ico { color: var(--pos); }
.ai-card p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-2); flex: 1; overflow-wrap: anywhere; }
.ai-card-act { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.mini.ai-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.mini.ai-primary:hover { background: var(--accent-2); color: #fff; }
a.mini { text-decoration: none; display: inline-block; }

.ai-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; margin-top: 22px; align-items: start; }
.ai-side { background: var(--surface); border: 1px solid var(--hair); border-radius: 14px; box-shadow: var(--shadow); padding: 12px; min-width: 0; }
.ai-side-toggle { display: none; }
.ai-new { width: 100%; }
.ai-sessions { margin-top: 10px; max-height: 460px; overflow-y: auto; }
.ai-grp { font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--muted); font-weight: 600; margin: 12px 4px 4px; }
.ai-sess { display: flex; align-items: center; border-radius: 8px; }
.ai-sess:hover { background: var(--surface-2); }
.ai-sess.on { background: var(--accent-soft); }
.ai-sess-t { flex: 1; min-width: 0; text-align: left; font-family: inherit; font-size: 13px; color: var(--ink); background: none; border: 0; padding: 8px 8px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-sess.on .ai-sess-t { font-weight: 650; }
.ai-sess.busy .ai-sess-t::before { content: "\23F3  "; }
.ai-sess-x { font-family: inherit; font-size: 17px; line-height: 1; color: var(--muted); background: none; border: 0; padding: 6px 9px; cursor: pointer; border-radius: 6px; }
.ai-sess-x:hover { color: var(--neg); }

.ai-chat { background: var(--surface); border: 1px solid var(--hair); border-radius: 14px; box-shadow: var(--shadow); padding: 14px; min-width: 0; display: flex; flex-direction: column; }
.ai-notice { background: var(--surface-2); border: 1px solid var(--hair); border-left: 4px solid var(--s4); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); margin-bottom: 10px; }
.ai-notice code { background: var(--accent-soft); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
.ai-keybar { display: flex; gap: 10px; align-items: center; justify-content: space-between; background: var(--surface-2); border: 1px solid var(--hair); border-radius: 10px; padding: 8px 12px; font-size: 12.5px; color: var(--ink-2); margin-bottom: 10px; }
.ai-keybar.warn { border-left: 4px solid var(--s4); }
.ai-keybar-t { min-width: 0; line-height: 1.5; }
.ai-keybar .mini { flex: none; }
.ai-keybar-tok { color: var(--muted); }
.ai-keybar-tok b { color: var(--ink-2); }
.ai-keycur { background: var(--accent-soft); border-radius: 10px; padding: 9px 12px; font-size: 12.5px; margin-bottom: 12px; line-height: 1.5; }
.ai-key-f .spacer { flex: 1; }
.ai-key-f { flex-wrap: wrap; }
.ai-log { height: min(62vh, 620px); min-height: 320px; overflow-y: auto; padding: 4px 2px 8px; display: flex; flex-direction: column; gap: 12px; scroll-behavior: smooth; }
.ai-msg { display: flex; min-width: 0; }
.ai-msg.user { justify-content: flex-end; }
.ai-bub { max-width: min(760px, 92%); min-width: 0; border-radius: 14px; padding: 10px 14px; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.ai-msg.user .ai-bub { background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.ai-msg.assistant .ai-bub { background: var(--surface-2); border: 1px solid var(--hair); border-bottom-left-radius: 4px; width: 100%; max-width: 100%; }
.ai-msg.error .ai-bub { border-color: var(--neg); }
.ai-bub p { margin: 0 0 8px; }
.ai-bub p:last-child { margin-bottom: 0; }
.ai-bub h4 { margin: 10px 0 4px; font-size: 14px; }
.ai-bub ul, .ai-bub ol { margin: 4px 0 8px; padding-left: 20px; }
.ai-bub li { margin-bottom: 3px; }
.ai-typing i { display: inline-block; width: 6px; height: 6px; margin-right: 3px; border-radius: 50%; background: var(--muted); animation: aiDot 1.1s infinite ease-in-out; }
.ai-typing i:nth-child(2) { animation-delay: .15s; }
.ai-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes aiDot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

.ai-welcome { margin: auto; text-align: center; max-width: 560px; padding: 10px; }
.ai-welcome h3 { margin: 0 0 6px; font-size: 18px; }
.ai-welcome p { margin: 0 0 14px; font-size: 13px; color: var(--muted); }
.ai-chips { display: flex; flex-direction: column; gap: 8px; }
.ai-chip { font-family: inherit; font-size: 13px; text-align: left; color: var(--ink); background: var(--surface); border: 1px solid var(--hair); border-radius: 10px; padding: 10px 12px; cursor: pointer; }
.ai-chip:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); }
.ai-chip:disabled { opacity: .5; cursor: not-allowed; }

.ai-usage { margin-top: 10px; padding-top: 6px; border-top: 1px dashed var(--line); font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ai-usage-total { font-size: 11.5px; color: var(--muted); margin-top: 8px; min-height: 0; }
.ai-usage-total:empty { display: none; }
.ai-modelrow { display: flex; gap: 8px 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; font-size: 12px; color: var(--muted); }
.ai-modelrow label { font-weight: 600; color: var(--ink-2); }
.ai-modelrow select { font-family: inherit; font-size: 13px; color: var(--ink); background: var(--surface-2); border: 1px solid var(--hair); border-radius: 8px; padding: 5px 8px; }
.ai-modelinfo { flex: 1 1 220px; min-width: 0; line-height: 1.45; }
.ai-usage-total b { color: var(--ink-2); }
.ai-input { display: flex; gap: 10px; align-items: flex-end; margin-top: 10px; border-top: 1px solid var(--line); padding-top: 12px; }
.ai-input textarea { flex: 1; min-width: 0; font-family: inherit; font-size: 14px; color: var(--ink); background: var(--surface-2); border: 1px solid var(--hair); border-radius: 12px; padding: 10px 12px; resize: none; max-height: 150px; line-height: 1.5; }
.ai-input textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.ai-input .btn { flex: none; }
.ai-input .btn:disabled { opacity: .55; cursor: not-allowed; }
.ai-foot { margin: 8px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.5; }

.ai-chartbox { margin-top: 10px; background: var(--surface); border: 1px solid var(--hair); border-radius: 12px; padding: 10px 12px 8px; min-width: 0; }
.ai-chart-t { font-size: 13px; font-weight: 650; margin-bottom: 6px; }
.ai-chart-plot { height: 260px; min-width: 0; }
.ai-chart-n { font-size: 11.5px; color: var(--muted); margin-top: 6px; }
.aic-donut { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; height: 100%; }
.aic-donut-plot { position: relative; width: 210px; height: 210px; flex: none; margin: 0 auto; }
.aic-donut-mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.aic-donut-mid small { font-size: 10.5px; letter-spacing: .5px; color: var(--muted); }
.aic-donut-mid b { font-size: 17px; }
.aic-legend { list-style: none; margin: 0; padding: 0; flex: 1 1 220px; min-width: 0; font-size: 12.5px; }
.aic-legend li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto 48px; gap: 8px; align-items: center; padding: 3px 0; }
.aic-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.aic-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aic-val { font-variant-numeric: tabular-nums; white-space: nowrap; }
.aic-pct { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.aic-plot { width: 100%; height: 100%; }
.ai-donut-wrap .ai-chart-plot, .ai-chartbox .ai-chart-plot:has(.aic-donut) { height: auto; min-height: 210px; }

.ai-scn { margin-top: 10px; background: var(--surface); border: 1px solid var(--hair); border-left: 4px solid var(--accent); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.ai-scn-h { display: flex; gap: 8px; align-items: baseline; font-size: 14px; }
.ai-scn-l { margin: 6px 0 8px; padding-left: 20px; font-size: 12.5px; color: var(--ink-2); }
.ai-scn-kpi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 6px 0; }
.ai-scn-kpi div { background: var(--surface-2); border: 1px solid var(--hair); border-radius: 10px; padding: 8px 10px; min-width: 0; }
.ai-scn-kpi small { display: block; font-size: 11px; color: var(--muted); }
.ai-scn-kpi b { font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ai-scn-kpi b.neg { color: var(--neg); }
.ai-scn-kpi b.pos { color: var(--pos); }

.ai-pil { border-top: 1px solid var(--line); padding: 10px 0; }
.ai-pil:first-child { border-top: 0; padding-top: 0; }
.ai-pil h4 { margin: 0 0 4px; font-size: 14px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.ai-pil p { margin: 4px 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }
.ai-pil ul { list-style: none; margin: 4px 0 0; padding: 0; font-size: 12.5px; }
.ai-pil li { margin: 4px 0; }
.ai-b { font-size: 11.5px; font-weight: 650; border-radius: 999px; padding: 2px 9px; display: inline-block; }
.ai-b.ok { color: var(--pos); background: var(--accent-soft); }
.ai-why { margin: 6px 0 0 2px; font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }
.ai-why b { color: var(--ink); font-weight: 650; }
.ai-pil a { color: var(--accent); }
.ai-b.warn { color: #8a5a00; background: #fff3d6; }
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) .ai-b.warn { color: #ffd37a; background: #3a2f10; } }
:root[data-theme="dark"] .ai-b.warn { color: #ffd37a; background: #3a2f10; }

@media (max-width: 760px) {
  .ai-privacy { flex-direction: column; align-items: stretch; gap: 10px; }
  .ai-priv-btn { width: 100%; }
  .ai-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ai-side { padding: 0; }
  .ai-side-toggle { display: flex; width: 100%; justify-content: space-between; align-items: center; font-family: inherit; font-size: 14px; font-weight: 650; color: var(--ink); background: none; border: 0; padding: 13px 14px; cursor: pointer; }
  .ai-side-toggle i { font-style: normal; transition: transform .15s; }
  .ai-side.open .ai-side-toggle i { transform: rotate(180deg); }
  .ai-side-body { display: none; padding: 0 12px 12px; }
  .ai-side.open .ai-side-body { display: block; }
  .ai-sessions { max-height: 260px; }
  .ai-chat { padding: 10px; }
  .ai-log { height: 62dvh; min-height: 300px; }
  .ai-bub { max-width: 94%; padding: 9px 12px; }
  .ai-input textarea { font-size: 16px; }
  .ai-chart-plot { height: 230px; }
  .ai-modelrow select { font-size: 16px; padding: 8px 10px; }
  .ai-keybar { flex-direction: column; align-items: stretch; }
  .ai-keybar .mini { align-self: flex-start; }
  .ai-key-f .spacer { display: none; }
  .ai-key-f .btn { flex: 1 1 40%; }
  .ai-scn-kpi { grid-template-columns: 1fr; }
  .ai-cards { grid-template-columns: minmax(0, 1fr); }
  .aic-donut-plot { width: 190px; height: 190px; }
}

/* Aanwijzing boven een zijwaarts scrollbare tabel (zie initScrollHints in app.js) */
.scroll-hint { display: none; position: sticky; left: 0; width: 100%; padding: 8px 14px 6px; font-size: 12.5px; font-weight: 650; color: var(--accent); }
.tbl-card.can-scroll:not(.hint-done) > .scroll-hint { display: block; }
.scroll-hint span { display: inline-block; }
.scroll-arrow { animation: hint-nudge 1.3s ease-in-out infinite; }
@keyframes hint-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { .scroll-arrow { animation: none; } }

/* Onboarding wizard (/onboarding), dashboard-banner, Vragen & wensen (/beheer/vragen, /admin/verzoeken). Mobiele regels onderaan dit blok. */
.ob-wrap [hidden], .ob-banner[hidden], .ob-banner [hidden], .ob-msg[hidden], .fr-msg[hidden], .ob-nav[hidden] { display: none !important; }
.btn-sm { padding: 6px 12px; font-size: 12.5px; border-radius: 8px; }
.ob-wrap { max-width: 860px; }
.ob-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-top: 26px; flex-wrap: wrap; }
.ob-top-text { flex: 1 1 360px; min-width: 0; }
.ob-top h2 { font-weight: 600; font-size: 24px; margin: 0; }
.ob-top p { margin: 4px 0 0; font-size: 13px; color: var(--muted); max-width: 560px; line-height: 1.5; }
.ob-skip { white-space: normal; text-align: center; }

.ob-steps { list-style: none; display: flex; gap: 4px; margin: 22px 0 0; padding: 0; }
.ob-s { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; text-align: center; }
.ob-s::before { content: ""; position: absolute; top: 14px; left: -50%; width: 100%; height: 2px; background: var(--line); z-index: 0; }
.ob-s:first-child::before { display: none; }
.ob-s.done::before, .ob-s.cur::before { background: var(--accent); }
.ob-dot { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 700; background: var(--surface); color: var(--muted); border: 2px solid var(--line); }
.ob-s.done .ob-dot { background: var(--accent); border-color: var(--accent); color: #fff; }
.ob-s.cur .ob-dot { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.ob-lab { font-size: 11.5px; color: var(--muted); line-height: 1.25; overflow-wrap: anywhere; }
.ob-s.cur .ob-lab { color: var(--ink); font-weight: 650; }

.ob-card { padding: 22px 24px; margin-top: 16px; }
.ob-step-head h3 { margin: 4px 0 0; font-size: 19px; font-weight: 650; }
.ob-step-head p { margin: 6px 0 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.55; max-width: 640px; }
.ob-step-no { font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--accent); }
.ob-msg { margin: 14px 0 0; padding: 10px 14px; border-radius: 10px; font-size: 13px; line-height: 1.5; background: var(--accent-soft); border: 1px solid var(--hair); color: var(--ink); }
.ob-msg.err { background: rgba(192, 57, 43, 0.10); border-color: rgba(192, 57, 43, 0.35); }
.ob-msg.warn { background: rgba(237, 161, 0, 0.14); border-color: rgba(237, 161, 0, 0.45); }
.ob-list { margin-top: 14px; }
.ob-group { margin-top: 16px; border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; }
.ob-group-h { padding: 9px 14px; font-size: 12.5px; font-weight: 650; background: var(--surface-2); display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ob-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-top: 1px solid var(--line); font-size: 14px; }
.ob-group .ob-item:first-of-type { border-top: 0; }
.ob-list .ob-item { border: 1px solid var(--hair); border-radius: 10px; margin-top: 8px; }
.ob-item-main { min-width: 0; overflow-wrap: anywhere; }
.ob-item-side { display: flex; align-items: center; gap: 10px; flex: none; text-align: right; }
.ob-item-side small { display: block; font-size: 11px; color: var(--muted); }
.ob-amt { font-variant-numeric: tabular-nums; font-weight: 650; }
.ob-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.ob-tag { display: inline-block; font-size: 11px; font-weight: 650; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--hair); border-radius: 999px; padding: 1px 8px; margin: 0 2px; }
.ob-new { font-size: 11px; font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 1px 8px; }
.ob-empty { margin: 14px 0 0; padding: 14px; font-size: 13.5px; color: var(--muted); border: 1px dashed var(--hair); border-radius: 12px; text-align: center; line-height: 1.5; }
.ob-form { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.ob-form h4 { margin: 0 0 12px; font-size: 14.5px; font-weight: 650; }
.ob-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.ob-chip { font-family: inherit; font-size: 13px; font-weight: 600; color: var(--ink-2); background: var(--surface); border: 1px solid var(--hair); border-radius: 999px; padding: 7px 14px; cursor: pointer; }
.ob-chip:hover { background: var(--surface-2); }
.ob-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.ob-more { margin: 0 0 14px; font-size: 13px; }
.ob-more summary { cursor: pointer; color: var(--accent); font-weight: 600; margin-bottom: 10px; }
.ob-nav { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.ob-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.ob-sum div { border: 1px solid var(--hair); border-radius: 12px; padding: 12px 14px; background: var(--surface-2); }
.ob-sum b { display: block; font-size: 22px; font-weight: 650; }
.ob-sum span { font-size: 12px; color: var(--muted); }
.ob-total { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 14px 0 6px; }
.ob-total div { border-radius: 12px; padding: 12px 14px; background: var(--accent-soft); }
.ob-total span { display: block; font-size: 12px; color: var(--ink-2); }
.ob-total b { font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; }
.ob-notice-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

.ob-banner { margin-top: 18px; background: var(--accent-soft); border: 1px solid var(--hair); border-left: 4px solid var(--accent); border-radius: 12px; padding: 12px 16px; }
.ob-banner-full { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
.ob-banner-text { font-size: 14px; font-weight: 600; color: var(--ink); flex: 1 1 260px; min-width: 0; }
.ob-banner-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.ob-banner-btns .btn { text-decoration: none; }
.ob-banner.min { background: transparent; border: 0; padding: 0; }
.ob-banner-pill { font-family: inherit; font-size: 12.5px; font-weight: 650; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--hair); border-radius: 999px; padding: 6px 14px; cursor: pointer; text-align: left; }
.ob-tile { border-left: 4px solid var(--accent); }

.admin-tabs { display: flex; gap: 4px; margin-top: 22px; background: var(--surface-2); border: 1px solid var(--hair); border-radius: 10px; padding: 3px; width: fit-content; max-width: 100%; }
.admin-tabs a { text-decoration: none; font-size: 13px; font-weight: 600; color: var(--ink-2); padding: 6px 16px; border-radius: 7px; white-space: nowrap; }
.admin-tabs a.on { background: var(--accent); color: #fff; }

.fr-form { padding: 20px 22px; margin-top: 20px; max-width: 720px; }
.fr-form textarea, .fr-edit textarea { resize: vertical; min-height: 90px; }
.fr-msg { margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; font-size: 13px; line-height: 1.5; background: var(--accent-soft); border: 1px solid var(--hair); }
.fr-msg.err { background: rgba(192, 57, 43, 0.10); border-color: rgba(192, 57, 43, 0.35); }
.fr-list-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 28px; }
.fr-list-head h3 { margin: 0; font-size: 17px; font-weight: 650; }
.fr-list { margin-top: 12px; display: grid; gap: 12px; max-width: 720px; }
.fr-item { padding: 16px 18px; }
.fr-item-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fr-item-top h4 { margin: 0; font-size: 15px; font-weight: 650; overflow-wrap: anywhere; min-width: 0; }
.fr-badge { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 3px 10px; color: var(--ink); background: var(--surface-2); border: 1px solid var(--hair); white-space: nowrap; }
.fr-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.fr-badge.s-in_behandeling { background: color-mix(in srgb, var(--s4) 22%, transparent); }
.fr-badge.s-in_behandeling::before { background: var(--s4); }
.fr-badge.s-gepland { background: color-mix(in srgb, var(--s1) 20%, transparent); }
.fr-badge.s-gepland::before { background: var(--s1); }
.fr-badge.s-afgerond { background: color-mix(in srgb, var(--pos) 20%, transparent); }
.fr-badge.s-afgerond::before { background: var(--pos); }
.fr-badge.s-afgewezen { background: color-mix(in srgb, var(--neg) 16%, transparent); }
.fr-badge.s-afgewezen::before { background: var(--neg); }
.fr-meta { margin-top: 6px; font-size: 12px; color: var(--muted); }
.fr-text { margin: 10px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.fr-version { margin-top: 10px; font-size: 13px; color: var(--s1); font-weight: 600; }
.fr-version b { color: inherit; }
.fr-reply { margin-top: 12px; padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 10px 10px 0; }
.fr-reply-h { font-size: 11.5px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--accent); }
.fr-reply p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.fr-filters { margin-top: 18px; max-width: 720px; }
.fr-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.fr-edit { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.fr-actions { align-items: center; flex-wrap: wrap; }

@media (max-width: 760px) {
  .ob-wrap { padding: 0 16px; }
  .ob-top h2 { font-size: 21px; }
  .ob-skip { width: 100%; }
  .ob-lab { display: none; }
  .ob-s.cur .ob-lab { display: block; position: absolute; top: 34px; left: 50%; transform: translateX(-50%); white-space: nowrap; }
  .ob-steps { margin-bottom: 26px; }
  .ob-card { padding: 16px 14px; }
  .ob-card .field input, .ob-card .field select, .ob-card .field textarea, .fr-form input, .fr-form select, .fr-form textarea, .fr-filters input, .fr-filters select, .fr-edit input, .fr-edit select, .fr-edit textarea { font-size: 16px; }
  .ob-item { flex-wrap: wrap; }
  .ob-item-side { width: 100%; justify-content: space-between; text-align: left; }
  .ob-sum, .ob-total { grid-template-columns: 1fr 1fr; }
  .ob-total div:last-child { grid-column: 1 / -1; }
  .ob-nav .btn { flex: 1 1 auto; }
  .ob-nav .spacer { display: none; }
  .ob-notice-btns .btn { flex: 1 1 100%; }
  .ob-banner-btns { width: 100%; }
  .ob-banner-btns .btn { flex: 1 1 auto; text-align: center; }
  .fr-form { padding: 16px 14px; }
  .fr-item { padding: 14px 14px; }
  .fr-item-top { flex-wrap: wrap; }
  .fr-actions .btn { flex: 1 1 40%; }
}

/* Versienummer in de omgevingsbanner: link naar Beheer > Versie-info, zonder onderstreping, met een lichte markering bij hoveren en een breed aantikbaar vlak */
.env-banner .env-ver { color: inherit; text-decoration: none; display: inline-flex; align-items: center; height: 100%; padding: 0 12px; margin-left: -6px; border-radius: 6px; cursor: pointer; }
.env-banner .env-ver:hover { background: rgba(255, 255, 255, 0.22); }
.env-banner.env-test .env-ver:hover { background: rgba(0, 0, 0, 0.12); }
.env-banner .env-ver:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }


/* Dividendsuggestie & Fiscale Planning (Overzicht) */
.fx-ask { padding: 18px 20px; background: var(--accent-soft, var(--surface-2)); border: 1px solid var(--accent); }
.fx-ask-t { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: var(--ink); }
.fx-ask-s { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.fx-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.fx-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fx-tag { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 650; background: var(--surface-2); border: 1px solid var(--hair); color: var(--ink-2); }
.fx-tag.neg { color: var(--neg); border-color: var(--neg); }
.fx-foot { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.fx-aud { margin-top: 10px; background: var(--surface); border: 1px solid var(--hair); border-radius: 12px; padding: 0; }
.fx-aud > summary { cursor: pointer; padding: 13px 16px; font-weight: 650; font-size: 14px; color: var(--accent); list-style-position: inside; }
.fx-aud-in { padding: 0 16px 16px; }
.fx-h { margin: 14px 0 6px; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.fx-sub { margin: 8px 0 4px; font-size: 12.5px; color: var(--muted); }
.fx-tbl { width: 100%; min-width: 0; border-collapse: collapse; font-size: 13px; }
.fx-tbl td { padding: 7px 4px; border-bottom: 1px solid var(--hair); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.fx-tbl td.r { text-align: right; white-space: nowrap; padding-left: 12px; }
.fx-calc { display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.fx-src { margin: 12px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
.fx-src a { color: var(--accent); font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .fx-btns .btn, .fx-simall { width: 100%; }
  .fx-tbl { font-size: 12.5px; }
  .fx-ask { padding: 16px; }
}

/* Vermogensoverdracht & Schenkingen (/schenkingen en de wizard) */
.gf-sec { padding: 18px 20px; margin-top: 16px; }
.gf-sec-h h3 { margin: 0 0 4px; font-size: 16px; font-weight: 650; }
.gf-sec-h p { margin: 0 0 12px; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.gf-top { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-top: 14px; }
.gf-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.gf-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 650; background: var(--surface-2); border: 1px solid var(--hair); color: var(--ink-2); white-space: nowrap; }
.gf-badge.ok { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.gf-badge.warn { background: rgba(237, 161, 0, 0.14); border-color: rgba(237, 161, 0, 0.5); color: var(--ink); }
.gf-badge.bad { border-color: var(--neg); color: var(--neg); }
.gf-alerts { margin: 0; padding-left: 18px; }
.gf-alerts li { margin: 7px 0; font-size: 13.5px; line-height: 1.5; }
.gf-alerts li.bad { color: var(--neg); }
.gf-alerts li.warn { color: var(--ink); }
.gf-tbl table { width: 100%; }
.gf-narrow { min-width: 0 !important; }
.gf-calc { min-width: 0 !important; }
.gf-calc td, .gf-narrow td { white-space: normal; vertical-align: top; }
.gf-calc td.r, .gf-narrow td.r { white-space: nowrap; }
.gf-nr { width: 28px; color: var(--muted); }
.gf-ctl { font-size: 11.5px; font-weight: 650; white-space: nowrap; }
.gf-ctl.ok { color: var(--accent); }
.gf-ctl.bad { color: var(--neg); }
.gf-tr-tbl select, .gf-tr-tbl input[type=date] { font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--hair); border-radius: 8px; background: var(--surface-2); color: var(--ink); }
.gf-tot td { border-top: 2px solid var(--line); }
.gf-frict td { background: var(--surface-2); }
.gf-check { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.4; cursor: pointer; }
.gf-check input { margin-top: 3px; flex: none; }
.field .gf-check { display: flex; align-items: center; gap: 10px; min-height: 42px; margin: 0; font-size: 14px; font-weight: 600; }
.field .gf-check input[type=checkbox] { width: 20px; height: 20px; padding: 0; margin: 0; flex: none; }
.gf-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.gf-card { text-align: left; border: 1px solid var(--hair); border-radius: 12px; padding: 14px 16px; background: var(--surface); cursor: pointer; display: flex; flex-direction: column; gap: 6px; font: inherit; color: var(--ink); }
.gf-card.on { border-color: var(--accent); background: var(--accent-soft); }
.gf-card b { font-size: 15px; }
.gf-card span { font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.gf-card span b { font-size: inherit; }
.gf-kid, .gf-tr { border: 1px solid var(--hair); border-radius: 12px; padding: 12px 14px; margin-top: 10px; }
.gf-kid-h, .gf-tr-j { font-size: 12.5px; font-weight: 700; color: var(--accent); margin-bottom: 8px; }
.gf-ref { margin-top: 16px; border: 1px solid var(--hair); border-radius: 12px; padding: 0 14px; }
.gf-ref > summary { cursor: pointer; padding: 12px 0; font-weight: 650; font-size: 14px; color: var(--accent); }
.gf-steps { display: flex; flex-direction: column; gap: 10px; }
.gf-step { border: 1px solid var(--hair); border-radius: 12px; padding: 12px 14px; background: var(--surface); }
.gf-step.st-afgerond { opacity: 0.85; border-color: var(--accent); }
.gf-step.st-in_uitvoering { border-color: rgba(237, 161, 0, 0.6); }
.gf-step-h { display: flex; gap: 10px; align-items: flex-start; }
.gf-step-nr { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 700; background: var(--accent-soft); color: var(--accent); }
.gf-step-t { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 14px; }
.gf-step-t .sub { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; font-weight: 400; }
.gf-step-f { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 10px; }
.gf-step-f .field { margin: 0; }
.gf-step-f .gf-wide { grid-column: 1 / -1; }
.gf-step-f textarea, .gf-step-f input, .gf-step-f select { width: 100%; font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid var(--hair); border-radius: 9px; background: var(--surface-2); color: var(--ink); box-sizing: border-box; }
.gf-doc { display: inline-block; margin-top: 4px; font-size: 12.5px; font-weight: 650; color: var(--accent); }
.gf-doclist { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.gf-docrow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0 8px; padding: 6px 8px 6px 10px; border: 1px solid var(--hair); border-radius: 9px; background: var(--surface-2); }
.gf-docrow .gf-doc { grid-column: 1; margin: 0; overflow-wrap: anywhere; line-height: 1.3; }
.gf-docrow .gf-docmeta { grid-column: 1; font-size: 12px; color: var(--muted); }
.gf-docrow .mini { grid-row: 1 / span 2; min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.gf-docrow .mini { grid-column: 2; }
.gf-docrow .mini.del { grid-column: 3; }
.gf-upload { position: relative; cursor: pointer; overflow: hidden; min-height: 44px; display: inline-flex; align-items: center; }
.gf-upload input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0; padding: 0; border: 0; }
.gf-upload.is-busy { opacity: .6; cursor: progress; }
.gf-uphint { display: block; margin: 6px 0 0; font-size: 12.5px; line-height: 1.4; }
.gf-payer select { width: 100%; max-width: 100%; min-width: 0; font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid var(--hair); border-radius: 9px; background: var(--surface-2); color: var(--ink); box-sizing: border-box; }
.gf-payer td { vertical-align: top; min-width: 0; }
.gf-payer td:nth-child(2) { width: 100%; }
.gf-payer td:first-child { white-space: nowrap; }
.gf-add { display: flex; gap: 10px; margin-top: 12px; }
.gf-add input { flex: 1; min-width: 0; font: inherit; font-size: 14px; padding: 9px 11px; border: 1px solid var(--hair); border-radius: 9px; background: var(--surface-2); color: var(--ink); }
@media (max-width: 560px) {
  .gf-choice { grid-template-columns: 1fr; }
  .gf-btns .btn { width: 100%; }
  .gf-step-f { grid-template-columns: 1fr; }
  .gf-add { flex-direction: column; }
  .gf-sec { padding: 16px; }
}

/* Groepsstructuur: laag juridisch eigendom versus economisch belang */
.gs-views { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 12px; }
.gs-view { font: inherit; font-size: 13px; font-weight: 650; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--hair); background: var(--surface); color: var(--ink-2); cursor: pointer; }
.gs-view.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.gs-layer { padding: 18px 20px; }
.gs-lrow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 10px; align-items: stretch; margin-bottom: 12px; }
.gs-larrow { align-self: center; font-size: 22px; color: var(--muted); }
.gs-lcard { border: 1px solid var(--hair); border-radius: 12px; padding: 12px 14px; background: var(--surface-2); min-width: 0; }
.gs-lcard.jur { border-color: var(--accent); background: var(--accent-soft); }
.gs-lcard.zeg { margin-bottom: 16px; }
.gs-lt { font-size: 11.5px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.gs-li { font-size: 14px; padding: 3px 0; overflow-wrap: anywhere; }
.gs-li.muted, .gs-li .muted { color: var(--muted); font-size: 12.5px; }
.gs-plan { border: 1px dashed var(--hair); border-radius: 12px; padding: 12px 14px; margin-top: 6px; }
@media (max-width: 760px) { .gs-lrow { grid-template-columns: 1fr; } .gs-larrow { transform: rotate(90deg); justify-self: center; } .gs-view { flex: 1 1 100%; text-align: center; } }

.gf-fit { overflow-x: visible; }
.gf-fit > .scroll-hint { display: none !important; }
.gf-fit th, .gf-fit td { padding-left: 8px !important; padding-right: 8px !important; }
.gf-fit th:first-child, .gf-fit td:first-child { position: static !important; box-shadow: none !important; background: transparent !important; }
.gf-fit td:first-child { overflow-wrap: anywhere; }

/* Schenkingen: invoer van de schenking per kind in de tranchetabel en het blok met het maximum */
.gf-amt { width: 128px; font: inherit; font-size: 13px; text-align: right; padding: 6px 8px; border: 1px solid var(--hair); border-radius: 8px; background: var(--surface-2); color: var(--ink); }
.gf-max { margin: 14px 0 0; padding: 14px 16px; border: 1px solid var(--accent); border-radius: 12px; background: var(--accent-soft); }
.gf-max-h { font-size: 13.5px; font-weight: 700; margin-bottom: 8px; }
.gf-max .tbl-card { background: transparent; padding: 0; }

/* Waardehistorie: klikbare kaarten op Overzicht en de keuze van de doorrekening */
a.cat-link, .hero-total.cat-link { color: inherit; text-decoration: none; display: block; cursor: pointer; transition: border-color .12s; }
a.cat-link:hover, .hero-total.cat-link:hover { border-color: var(--accent); }
.hero-total.cat-link { display: flex; }
.cat-go { margin-top: 8px; font-size: 11.5px; font-weight: 600; color: var(--accent); }
#hChartCard[hidden], #tblCard[hidden], #tblToggle[hidden] { display: none; }
.hz-wrap { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hz-custom { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--ink-2); }
.hz-custom input { width: 64px; font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--hair); border-radius: 8px; background: var(--surface-2); color: var(--ink); }
@media (max-width: 760px) { .hz-custom input { font-size: 16px; } #hHorizon button { padding: 7px 10px; } }
.tbl-card.tbl-narrow table { min-width: 0; }
.swatch-own { width: 18px; height: 0; border-top: 2px solid var(--ink-2); }
.legend-inline .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; opacity: .7; }

/* Herwaarderingsbewaking: statusbadge bij een bezitting en de waarschuwingskaart op Overzicht */
.reval-badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; }
.reval-badge.reval-ok { color: #1d6b3a; background: #e3f4ea; border-color: #b9e0c8; }
.reval-badge.reval-warning { color: #7a4a00; background: #fde7b0; border-color: #f1c56a; }
.reval-badge.reval-critical { color: #8f1d1d; background: #fbdcdc; border-color: #eeaaaa; }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .reval-badge.reval-ok { color: #8fd6a8; background: #14301f; border-color: #25502f; }
  :root:where(:not([data-theme="light"])) .reval-badge.reval-warning { color: #f2c46b; background: #3a2c0d; border-color: #6b4d12; }
  :root:where(:not([data-theme="light"])) .reval-badge.reval-critical { color: #f3a3a3; background: #3b1616; border-color: #6e2a2a; }
}
:root[data-theme="dark"] .reval-badge.reval-ok { color: #8fd6a8; background: #14301f; border-color: #25502f; }
:root[data-theme="dark"] .reval-badge.reval-warning { color: #f2c46b; background: #3a2c0d; border-color: #6b4d12; }
:root[data-theme="dark"] .reval-badge.reval-critical { color: #f3a3a3; background: #3b1616; border-color: #6e2a2a; }
.reval-card { display: block; padding: 14px 18px; margin-top: 12px; font-size: 13.5px; color: var(--ink-2); border-left: 4px solid #e0a020; }
.reval-card.critical { border-left-color: #c0392b; }
.reval-card .reval-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; color: var(--ink); }
.reval-card ul { list-style: none; margin: 0; padding: 0; }
.reval-card li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; padding: 6px 0; border-top: 1px solid var(--hair); }
.reval-card li:first-child { border-top: 0; }
.reval-card li .nm { font-weight: 600; color: var(--ink); flex: 1 1 180px; min-width: 0; overflow-wrap: anywhere; }
.reval-card li .sub { color: var(--muted); font-size: 12px; flex: 0 1 auto; max-width: 100%; }
.reval-card a { color: var(--accent); font-weight: 600; text-decoration: none; }
.rpt-actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 560px) { .rpt-actions .btn { width: 100%; justify-content: center; text-align: center; box-sizing: border-box; } }
.rcp-list { margin: 6px 0 0; }
.rcp-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--hair); }
.rcp-mail { min-width: 0; overflow-wrap: anywhere; font-size: 14px; }
.rcp-add { display: flex; gap: 8px; margin-top: 10px; }
.rcp-add input { flex: 1 1 auto; min-width: 0; }
@media (max-width: 560px) { .rcp-add { flex-direction: column; } .rcp-add .btn { width: 100%; justify-content: center; box-sizing: border-box; } .rcp-add input { font-size: 16px; } }
.arch-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 8px 0; border-bottom: 1px solid var(--hair); }
.arch-m { font-weight: 600; flex: 1 1 140px; text-transform: capitalize; }
.arch-s { color: var(--muted); font-size: 12px; flex: 1 1 150px; }