@import url("https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,300;6..72,400;6..72,500&family=IBM+Plex+Sans:wght@400;500;600&display=swap");

/* shell.css — gedeelde schil: design-tokens, layout, menu, thema.
   Pagina's gebruiken ALLEEN deze variabelen — nooit eigen hexcodes. (BOUWMETHODE §5) */

:root, html[data-theme="light"]{
  /* Licht is de nieuwe basis (herontwerp 07-09-2026): warme off-white grond,
     witte kaarten, één navy accent. --faint is de vloer voor bijschrifttekst en
     wordt gemeten tegen het STRENGSTE vlak waar hij op staat — dat is --bg, niet
     de witte kaart: #676B73 haalt 5,35:1 op wit en 4,73:1 op --bg. Een eerdere
     poging (#767A82) haalde wit nog wel maar --bg niet (3,81:1) en is gesneuveld. */
  --bg:#F2F1ED; --bg2:#FAF9F6; --panel:#FFFFFF; --panel2:#FFFFFF;
  --line:#E4E2DC; --txt:#17191C; --muted:#5F646C; --faint:#676B73;
  --accent:#24385C; --accent2:#2E4A78; --glow:rgba(36,56,92,.10);
  --ok:#3F7A5A; --warn:#9A7420; --warn-text:#7A5B15; --bad:#A8443E; --bad-text:#96382F;
  --k-kern:#3F7A5A; --k-ent:#9A7420; /* categorale emmer-kleuren — zie palet-noot onder */
  --chip:rgba(36,56,92,.05);
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --radius:11px; --radius-sm:8px;
  /* bron-badges: 3 evenwaardige, onderling goed te onderscheiden hues.
     --mb-tdclmbr is bewust GEEN navy: navy = link/hover/"nu"/actief. */
  --mb-qeet:#3F7A5A; --mb-tdclmbr:#2E6E8E; --mb-prive:#9A7420;
  /* typografie: Newsreader draagt titels en cijfers, Plex Sans de leestekst */
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
html[data-theme="dark"]{
  --bg:#14161A; --bg2:#191C21; --panel:#1B1E23; --panel2:#1F2329;
  --line:#2C3037; --txt:#EDEBE6; --muted:#A3A7AE; --faint:#8A8F97;
  --accent:#93AFD6; --accent2:#B4C8E6; --glow:rgba(147,175,214,.16);
  --ok:#77BE97; --warn:#D8B463; --warn-text:#D8B463; --bad:#E08A83; --bad-text:#E08A83;
  --k-kern:#4E9B72; --k-ent:#A88A3C;
  --chip:rgba(255,255,255,.045);
  --mb-qeet:#77BE97; --mb-tdclmbr:#7FB6D1; --mb-prive:#D8B463;
}
/* --faint is opnieuw gemeten na de omzetting naar licht-eerst: licht 4,6:1 op --panel
   en 4,4:1 op --bg; donker 5,4:1 op --panel. --warn/--bad blijven voor vlakken en randen,
   --warn-text/--bad-text zijn de tekstveilige varianten op hun eigen getinte meldingsvlak
   (licht --warn-text 4,8:1, --bad-text 5,1:1). In donker halen --warn/--bad als tekst zelf
   al ruim de norm, dus daar zijn ze gelijkgezet. */

/* Palet gevalideerd 07-09-2026 met tools/paletcheck.py (licht én donker):
   contrast tegen het vlak en onderlinge scheiding voor normaal zicht, deuteranopie
   en protanopie. Slechtste scheiding tussen de drie emmers is 27 bij een grens van 18.
   De noot hieronder verwijst naar validate_palette.js — dat script bestaat hier niet
   en heeft hier nooit bestaan; alleen de uitkomst was ooit geplakt. paletcheck.py is
   de vervanger die wél in de repo staat en herhaalbaar is.

/* Palet-noot (dataviz-skill, validate_palette.js): de verdelingsbalken op /finance/beleggingen
   gebruiken 4 emmer-kleuren — kern=--k-kern, satelliet=--accent, entertainment=--k-ent,
   afbouwen=--faint. Gevalideerd met "node validate_palette.js '<4 hex>,#7c5cff,<hex>,<faint>'
   --mode <dark|light> --surface <panel>": CVD-scheiding, normal-vision-floor en contrast-vs-
   surface halen in beide modi ruim de norm. --k-kern/--k-ent zijn op --ok/--warn geënt maar in
   dark verdiept (was L 0,79/0,82, buiten de OKLCH-band 0,48–0,67; nu #289862/#ac851a, binnen
   band) — licht zat al binnen de band, daar zijn --k-kern/--k-ent gelijk aan --ok/--warn.
   Eén bewuste afwijking, niet gefixt: --faint (afbouwen) zit onder de chroma-vloer (leest als
   grijs) — dat is hier opzettelijk: afbouwen is geen echte doelcategorie (doel 0%, wordt naar
   nul afgebouwd) en "grijs/dof" is precies het signaal. Elke balk heeft sowieso een zichtbaar
   label (naam + doel%/nu% + drift-pil) als secundaire encodering. */

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--txt);-webkit-font-smoothing:antialiased;
  min-height:100vh;min-height:100dvh;
}
a{color:var(--accent2)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* ---- layout: menu links, content rechts ---- */
body{display:flex}
.stage{
  flex:1;min-width:0;padding:var(--s5) var(--s6) 80px;
  padding-left:calc(var(--s6) + env(safe-area-inset-left));
  padding-right:calc(var(--s6) + env(safe-area-inset-right));
  max-width:1160px;
}
.page-head{margin-bottom:var(--s5)}
.page-head h1{font-family:var(--serif);font-size:31px;font-weight:400;letter-spacing:-.012em;line-height:1.1}
.page-head .page-sub{color:var(--muted);font-size:13px;margin-top:5px}

/* ---- menu (sidebar) ---- */
.hq-menu{
  width:230px;flex-shrink:0;min-height:100vh;min-height:100dvh;
  background:var(--bg2);
  border-right:1px solid var(--line);
  padding:var(--s4) var(--s3);
  padding-top:calc(var(--s4) + env(safe-area-inset-top));
  display:flex;flex-direction:column;gap:2px;
  transition:width .18s ease;
}
.hq-brand{display:flex;align-items:center;gap:10px;padding:6px 8px 18px;font-weight:600;font-size:14px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.hq-brand .dot{width:28px;height:28px;border-radius:7px;background:var(--accent);flex-shrink:0;
  display:grid;place-items:center}
.hq-brand .dot::before{content:"";width:17px;height:16px;
  background:var(--bg);-webkit-mask:url("/assets/img/td-logo.png") center/contain no-repeat;
  mask:url("/assets/img/td-logo.png") center/contain no-repeat}
.hq-brand small{font-weight:500;color:var(--faint);font-size:9.5px;letter-spacing:1.6px;text-transform:uppercase}
.hq-item{
  display:flex;align-items:center;gap:11px;min-height:44px;padding:0 var(--s3);
  border-radius:var(--radius-sm);color:var(--muted);text-decoration:none;
  font-size:13.5px;font-weight:500;border:1px solid transparent;white-space:nowrap;
}
.hq-item:hover{background:var(--panel);color:var(--txt)}
.hq-item[aria-current="page"]{
  background:color-mix(in srgb,var(--accent) 9%,transparent);
  color:var(--accent);border-color:transparent;
  box-shadow:inset 2px 0 0 var(--accent);
}
.hq-item[aria-current="page"] .ic{color:var(--accent)}
.hq-item .ic{width:18px;height:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:inherit}
.hq-item .ic svg{display:block}
.hq-theme .ic,.hq-toggle .ic,.hq-uitloggen .ic{width:18px;height:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
/* ---- groepskoppen in de zijbalk (Vandaag / Leven / Zaak) ---- */
.hq-sectie{display:flex;flex-direction:column;gap:2px;margin-top:var(--s5)}
.hq-sectie:first-of-type{margin-top:var(--s3)}
.hq-groephead{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);padding:0 var(--s3) 6px}
body[data-menu="closed"] .hq-groephead{visibility:hidden;height:10px;padding-bottom:2px}

.hq-foot{margin-top:auto;display:flex;flex-direction:column;gap:4px}
.hq-toggle,.hq-theme,.hq-uitloggen{
  display:flex;align-items:center;gap:11px;min-height:44px;padding:0 var(--s3);
  border:1px solid transparent;border-radius:var(--radius-sm);background:none;
  color:var(--faint);font:inherit;font-size:13px;cursor:pointer;white-space:nowrap;width:100%;text-align:left;
}
/* Uitloggen is een link en geen knop (zie shell.js), dus de a-specifieke
   standaardopmaak moet er nog af om hem naast de twee knoppen te laten passen. */
.hq-uitloggen{text-decoration:none;box-sizing:border-box}
.hq-toggle:hover,.hq-theme:hover,.hq-uitloggen:hover{background:var(--panel);color:var(--txt)}

/* ingeklapt (desktop) */
body[data-menu="closed"] .hq-menu{width:64px}
body[data-menu="closed"] .hq-menu .lbl,
body[data-menu="closed"] .hq-brand small,
body[data-menu="closed"] .hq-brand .nm{display:none}

/* ---- mobiel: hamburger + overlay ---- */
.hq-burger{
  display:none;position:fixed;z-index:60;
  top:calc(10px + env(safe-area-inset-top));left:calc(10px + env(safe-area-inset-left));
  width:44px;height:44px;border-radius:12px;border:1px solid var(--line);
  background:var(--panel);color:var(--txt);font-size:18px;cursor:pointer;
}
.hq-scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:49}
@media(max-width:767px){
  .hq-burger{display:block}
  .hq-menu{
    position:fixed;z-index:50;left:0;top:0;bottom:0;width:250px;
    transform:translateX(-100%);transition:transform .2s ease;
  }
  body[data-menu="open-mobile"] .hq-menu{transform:translateX(0)}
  body[data-menu="open-mobile"] .hq-scrim{display:block}
  .stage{padding:70px var(--s4) 60px}
}

/* ---- 2-laags menu: children + subnav ---- */
.hq-children{display:none;flex-direction:column;gap:2px;margin:2px 0 4px}
.hq-group.open .hq-children{display:flex}
.hq-item.hq-sub{min-height:44px;font-size:13px;padding-left:calc(var(--s3) + 26px)}
body[data-menu="closed"] .hq-children{display:none}
.hq-subnav{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:var(--s5)}
.hq-subnav a{
  display:inline-flex;align-items:center;min-height:38px;padding:0 14px;
  border:1px solid var(--line);border-radius:20px;background:var(--panel);
  color:var(--muted);text-decoration:none;font-size:13px;font-weight:550;
}
.hq-subnav a:hover{color:var(--txt);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.hq-subnav a[aria-current="page"]{
  background:var(--accent);color:var(--bg);border-color:var(--accent);font-weight:600;
}

/* ---- hqRing (Bevel-stijl ringen, charts.js) ---- */
.hq-ring{position:relative;text-align:center;margin:0 auto}
.hq-ring svg{display:block}
.hq-ring-v{position:absolute;top:0;left:0;right:0;height:100%;display:grid;place-items:center;
  font-family:var(--serif);font-size:24px;font-weight:400;font-variant-numeric:tabular-nums;pointer-events:none}
.hq-ring-l{margin-top:6px;font-size:12px;color:var(--muted);font-weight:600}
.hq-rings{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:var(--s5) var(--s3)}
.hq-pills{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:var(--s4)}
.hq-pill{display:inline-flex;align-items:center;gap:9px;background:var(--panel);border:1px solid var(--line);
  border-radius:22px;padding:9px 16px;font-size:13.5px;font-weight:600}
.hq-pill .dot{width:10px;height:10px;border-radius:50%}
.hq-pill small{color:var(--muted);font-weight:500}

/* ---- hqDist (verdelingsbalkjes, charts.js) ---- */
.hq-dist{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:12.5px}
.hq-dist .l{width:110px;color:var(--muted);flex-shrink:0}
.hq-dist .bar{flex:1;height:8px;border-radius:5px;background:var(--bg2);overflow:hidden}
.hq-dist .bar i{display:block;height:100%;border-radius:5px}
.hq-dist .v{width:38px;text-align:right;color:var(--txt);font-weight:600;font-variant-numeric:tabular-nums}

/* ---- bron-badge (welke mailbox/agenda) — gedeeld tussen dagoverzicht + weekoverzicht ---- */
.mb{font-size:10px;font-weight:600;letter-spacing:.02em;padding:1px 6px;border-radius:5px;flex-shrink:0;
  border:1px solid var(--line);color:var(--muted);background:var(--chip);white-space:nowrap}
.mb-q{color:var(--mb-qeet);border-color:color-mix(in srgb,var(--mb-qeet) 34%,transparent);background:color-mix(in srgb,var(--mb-qeet) 12%,transparent)}
.mb-t{color:var(--mb-tdclmbr);border-color:color-mix(in srgb,var(--mb-tdclmbr) 34%,transparent);background:color-mix(in srgb,var(--mb-tdclmbr) 12%,transparent)}
.mb-p{color:var(--mb-prive);border-color:color-mix(in srgb,var(--mb-prive) 34%,transparent);background:color-mix(in srgb,var(--mb-prive) 12%,transparent)}

/* ---- "toon nog N" uitklapper (tegen endless scroll) — gedeeld ---- */
.morebtn{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;
  margin-top:11px;padding:8px 10px;border-radius:11px;
  border:1px dashed var(--line);background:transparent;color:var(--muted);
  font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:.12s}
.morebtn:hover{color:var(--txt);border-color:color-mix(in srgb,var(--accent) 40%,var(--line));background:var(--panel)}

/* ---- data-helper meldingen ---- */
.hq-nodata{background:var(--panel);border:1px dashed var(--line);border-radius:var(--radius);
  padding:var(--s5);text-align:center;color:var(--muted);font-size:14px;line-height:1.6;
  display:flex;flex-direction:column;align-items:center;gap:8px}
.hq-nodata b{color:var(--txt);font-weight:500}
.hq-nodata span{color:var(--faint);font-size:12.5px}
.hq-stale{background:color-mix(in srgb,var(--warn) 12%,transparent);border:1px solid color-mix(in srgb,var(--warn) 40%,var(--line));
  color:var(--warn-text);border-radius:var(--radius-sm);padding:9px 13px;font-size:12.5px;margin-bottom:var(--s4);
  display:flex;align-items:center;gap:8px}

/* ---- gedeelde bouwstenen (kaarten/panelen) ---- */
.hq-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--s4)}
.hq-card{
  display:block;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);padding:var(--s4);
  color:var(--txt);text-decoration:none;transition:.16s;
}
.hq-card:hover{border-color:color-mix(in srgb,var(--accent) 34%,var(--line));box-shadow:0 6px 18px -10px var(--glow)}
.hq-card .em{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:21px;margin-bottom:var(--s3);background:var(--chip);border:1px solid var(--line)}
.hq-card h3{font-size:15px;font-weight:650;margin-bottom:2px}
.hq-card p{color:var(--muted);font-size:12.5px;line-height:1.45}
.hq-card .soon{display:inline-block;margin-top:var(--s3);font-size:10.5px;color:var(--faint);background:var(--chip);border:1px solid var(--line);padding:3px 9px;border-radius:20px}
.hq-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s5)}
.hq-sechead{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--faint);margin:var(--s5) 2px var(--s3)}
.hq-menu .hq-sechead:last-of-type:not(:has(+ .hq-item)){display:none}

/* ---- hq-kpis / hq-table: gedeelde KPI-strip + tabel-look voor finance-pagina's.
   Was 3× (bijna) letterlijk gedupliceerd in overzicht/uitgaven/holding — nu één plek
   (BOUWMETHODE §2 grondregel 2, opruimpunt uit BLUEPRINT-F §2.7). Bewust eigen classnamen
   (hq-kpis/hq-kpi/hq-table i.p.v. bare .kpi/table) zodat niets buiten finance meeverandert. ---- */
.hq-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--s3);margin-bottom:var(--s4)}
.hq-kpi{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px}
.hq-kpi .v{font-family:var(--serif);font-size:25px;font-weight:400;font-variant-numeric:tabular-nums;line-height:1.1}
.hq-kpi .k{color:var(--faint);font-size:11px;margin-top:2px}
.hq-kpi .v.neg{color:var(--bad-text)} .hq-kpi .v.pos{color:var(--ok)}
.hq-grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
@media(max-width:900px){.hq-grid2{grid-template-columns:1fr}}
.hq-table{width:100%;border-collapse:collapse;font-size:13px}
.hq-table th,.hq-table td{padding:8px;border-bottom:1px solid var(--line);text-align:right;font-variant-numeric:tabular-nums}
.hq-table th:first-child,.hq-table td:first-child{text-align:left}
.hq-table th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint)}
.hq-table td{color:var(--muted)} .hq-table td:first-child{color:var(--txt)}
.hq-table tr:last-child td{border:0}
.hq-table td .sub{font-size:10.5px;color:var(--faint);margin-top:2px;font-weight:500}

/* ---- hq-fresh: kleine versheid-stempel op de ÉCHTE brondatum (peildatum/bron_ververst),
   los van de generieke >36u-check in hqData (die kijkt alleen naar generated_at = de
   dagelijkse export-run, niet naar hoe oud de onderliggende bron zelf is). ---- */
.hq-fresh{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;
  padding:2px 9px;border-radius:99px;white-space:nowrap}
.hq-fresh i{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.hq-fresh.ok{color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,transparent)}
.hq-fresh.warn{color:var(--warn-text);background:color-mix(in srgb,var(--warn) 14%,transparent)}
.hq-fresh.bad{color:var(--bad-text);background:color-mix(in srgb,var(--bad) 14%,transparent)}

/* ---- hq-badge: kleine gelabelde pil, generiek (modifiers i.p.v. een nieuwe classnaam per
   toepassing — basic heeft al >10 badge/tag/chip-varianten; dit is de plek om verder op te
   bouwen bij de opruiming, niet nóg één toevoegen). Gebruik: <span class="hq-badge hq-badge--info">…</span> ---- */
.hq-badge{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:650;
  letter-spacing:.02em;padding:2px 9px;border-radius:99px;white-space:nowrap;
  background:var(--chip);border:1px solid var(--line);color:var(--muted)}
.hq-badge--info{color:var(--accent2);border-color:color-mix(in srgb,var(--accent) 35%,var(--line));
  background:color-mix(in srgb,var(--accent) 12%,transparent)}
.hq-badge--ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 35%,var(--line));
  background:color-mix(in srgb,var(--ok) 12%,transparent)}
.hq-badge--warn{color:var(--warn-text);border-color:color-mix(in srgb,var(--warn) 40%,var(--line));
  background:color-mix(in srgb,var(--warn) 14%,transparent)}
.hq-badge--bad{color:var(--bad-text);border-color:color-mix(in srgb,var(--bad) 40%,var(--line));
  background:color-mix(in srgb,var(--bad) 14%,transparent)}

/* ---- hq-alert: melding-blok voor "dit vraagt een besluit" / "dit ontbreekt" — generieke
   opvolger van het .hq-stale-patroon, voor gebruik binnen een kaart (niet alleen bovenaan). ---- */
.hq-alert{display:flex;gap:10px;align-items:flex-start;padding:11px 14px;border-radius:var(--radius-sm);
  font-size:12.5px;line-height:1.5;border:1px solid var(--line);background:var(--bg2)}
.hq-alert + .hq-alert{margin-top:var(--s3)}
.hq-alert .ic{flex:0 0 auto;line-height:1.4}
.hq-alert b{display:block;color:var(--txt);margin-bottom:1px}
.hq-alert span.d{color:var(--muted)}
.hq-alert--warn{background:color-mix(in srgb,var(--warn) 10%,var(--bg2));border-color:color-mix(in srgb,var(--warn) 35%,var(--line))}
.hq-alert--warn b{color:var(--warn-text)}
.hq-alert--bad{background:color-mix(in srgb,var(--bad) 10%,var(--bg2));border-color:color-mix(in srgb,var(--bad) 35%,var(--line))}
.hq-alert--bad b{color:var(--bad-text)}

/* ---- hq-progress: simpele horizontale voortgangsbalk + optioneel streepje op een doelwaarde
   (FIRE-balk, spaarquote, …) — generiek, geen kopie per pagina. ---- */
.hq-progress{height:8px;background:var(--bg2);border-radius:99px;overflow:hidden;position:relative}
.hq-progress i{display:block;height:100%;border-radius:99px;background:var(--accent)}
.hq-progress u{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--txt);opacity:.5}
.hq-progress-meta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-size:12px;color:var(--muted);margin-top:7px}
.hq-progress-meta b{color:var(--txt);font-weight:700}

/* ══════════════════════════════════════════════════════════════════
   Beleggingen (finance) — gedeeld over /finance/beleggingen · journal · maanddag.
   Eén plek, geen kopie per pagina (BOUWMETHODE §2). Alleen tokens.
   ══════════════════════════════════════════════════════════════════ */
.bel-card{background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:var(--s4) var(--s5)}
.bel-card + .bel-card{margin-top:var(--s4)}
.bel-sech{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--faint);font-weight:700;
  margin:0 0 var(--s3);display:flex;align-items:center;gap:9px}
.bel-sech .cnt{color:var(--accent2);background:color-mix(in srgb,var(--accent) 16%,transparent);
  border-radius:99px;padding:1px 9px;font-size:11px;letter-spacing:0}

/* ── doelblok (altijd bovenaan) ── */
.bel-doel{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 10%,var(--panel2)),var(--panel));
  border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:var(--radius);
  padding:var(--s4) var(--s5);margin-bottom:var(--s4)}
.bel-doel .lbl{font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--faint);font-weight:700}
.bel-doel .rule{font-size:15.5px;font-weight:650;line-height:1.45;margin-top:6px;letter-spacing:-.01em}
.bel-badge-voorlopig{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:11.5px;font-weight:650;
  color:var(--warn-text);background:color-mix(in srgb,var(--warn) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--warn) 45%,transparent);border-radius:99px;padding:4px 11px}
.bel-badge-def{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:11.5px;font-weight:600;
  color:var(--muted)}

/* ── hero-cijfer (portefeuillewaarde, groot) ── */
.bel-hero-figure{display:flex;align-items:flex-end;gap:24px;flex-wrap:wrap}
.bel-hero-sub{font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--faint);font-weight:700;margin-bottom:7px}
.bel-hero-num{font-family:var(--serif);font-size:42px;font-weight:400;letter-spacing:-.015em;line-height:1;font-variant-numeric:tabular-nums}
.bel-hero-delta{font-size:13.5px;font-weight:650;margin-top:9px;font-variant-numeric:tabular-nums}
.bel-hero-delta .up{color:var(--ok)} .bel-hero-delta .dn{color:var(--warn-text)}
.bel-hero-side{display:flex;gap:22px;margin-left:auto;flex-wrap:wrap}
.bel-hero-side div{min-width:84px}
.bel-hero-side .l{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);font-weight:700;margin-bottom:3px}
.bel-hero-side .v{font-size:15.5px;font-weight:700;font-variant-numeric:tabular-nums}
.bel-hero-side .v.warn{color:var(--warn-text)}
@media(max-width:600px){.bel-hero-num{font-size:28px}.bel-hero-side{margin-left:0;gap:16px}}

/* ── maandactie: concreet order-advies (beleggingen-overzicht, altijd zichtbaar — geen "loket
   gesloten"-vulkaart. .bel-loket blijft op de maanddag-pagina zelf, voor het echte ritueel). ── */
.bel-actiehead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:var(--s3)}
.bel-actiehead .dagen{margin-left:auto;font-size:11.5px;color:var(--faint)}
.bel-actioncard{display:flex;align-items:center;gap:14px;background:var(--bg2);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:14px 16px}
.bel-actioncard.leeg{border-style:dashed}
.bel-actioncard .wat{flex:1;min-width:0}
.bel-actioncard .wat b{font-size:16px;display:block;margin-bottom:2px}
.bel-actioncard .wat span{font-size:12px;color:var(--muted);line-height:1.5}
.bel-actioncard .bed{font-size:22px;font-weight:800;letter-spacing:-.02em;white-space:nowrap;
  font-variant-numeric:tabular-nums;flex:0 0 auto}

/* ── hero (FIRE-pad) ── */
.bel-hero{padding:var(--s5)}
.bel-hero-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.bel-hero-line{font-size:19px;font-weight:700;letter-spacing:-.01em;line-height:1.3}
.bel-hero-line .up{color:var(--ok)} .bel-hero-line .dn{color:var(--warn-text)}
.bel-chip{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;font-size:12.5px;color:var(--muted);
  background:var(--bg2);border:1px solid var(--line);border-radius:99px;padding:6px 12px;font-weight:600}
.bel-chartwrap{margin-top:var(--s4);width:100%}
.bel-meta{display:flex;gap:22px;flex-wrap:wrap;margin-top:var(--s3);font-size:12.5px;color:var(--muted)}
.bel-meta b{color:var(--txt);font-weight:700}

/* ── KPI's (max 3) ── */
.bel-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-top:var(--s4)}
.bel-kpi{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 15px}
.bel-kpi .k{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);font-weight:650}
.bel-kpi .v{font-size:24px;font-weight:800;letter-spacing:-.02em;margin-top:6px;font-variant-numeric:tabular-nums}
.bel-kpi .v.ok{color:var(--ok)} .bel-kpi .v.warn{color:var(--warn-text)}
.bel-kpi .s{font-size:11.5px;color:var(--muted);margin-top:3px}

/* ── allocatie / drift ── */
.bel-drow{display:grid;grid-template-columns:1fr auto;gap:5px 12px;align-items:center;
  padding:11px 0;border-top:1px solid var(--line)}
.bel-drow:first-child{border-top:none;padding-top:2px}
.bel-drow .dn{font-size:13.5px;font-weight:600}
.bel-drow .dm{font-size:12px;color:var(--muted);margin-top:1px}
.bel-dchip{font-size:12px;font-weight:700;padding:3px 10px;border-radius:99px;white-space:nowrap;text-align:center}
.bel-dchip.under{color:var(--accent2);background:color-mix(in srgb,var(--accent) 16%,transparent)}
.bel-dchip.over{color:var(--bad-text);background:color-mix(in srgb,var(--bad) 16%,transparent)}
.bel-dchip.ok{color:var(--ok);background:color-mix(in srgb,var(--ok) 16%,transparent)}
.bel-dbar{grid-column:1/-1;height:6px;border-radius:99px;background:var(--bg2);position:relative;overflow:hidden;margin-top:4px}
.bel-dbar .fill{position:absolute;top:0;bottom:0;left:0;border-radius:99px}
.bel-dbar .tgt{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--txt);opacity:.55}

.bel-marginrow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:var(--s4);
  padding:13px 15px;border:1px solid color-mix(in srgb,var(--warn) 35%,var(--line));
  background:color-mix(in srgb,var(--warn) 12%,transparent);border-radius:var(--radius-sm)}
.bel-marginrow .mt{font-size:13.5px;font-weight:700;color:var(--warn-text)}
.bel-marginrow .mm{font-size:12px;color:var(--muted);margin-top:1px}
.bel-marginrow .mv{font-size:18px;font-weight:800;color:var(--warn-text);white-space:nowrap;font-variant-numeric:tabular-nums}

/* ── maandactie: gesloten loket ── */
.bel-loket{border:1px dashed var(--line);border-radius:var(--radius);padding:var(--s5);text-align:center;
  background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--txt) 2%,transparent) 0 10px,transparent 10px 20px)}
.bel-loket .ico{width:42px;height:42px;border-radius:12px;background:var(--chip);border:1px solid var(--line);
  display:inline-flex;align-items:center;justify-content:center;font-size:20px}
.bel-loket .t{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--faint);font-weight:700;margin-top:11px}
.bel-loket .cnt{font-size:24px;font-weight:800;margin-top:6px;letter-spacing:-.02em}
.bel-loket .sub{font-size:13px;color:var(--muted);margin-top:6px}
.bel-loket .prev{font-size:12.5px;color:var(--faint);margin-top:12px;font-style:italic}
.bel-loket.open{border-style:solid;border-color:color-mix(in srgb,var(--ok) 45%,var(--line));
  background:color-mix(in srgb,var(--ok) 8%,transparent)}
.bel-loket.open .ico{color:var(--ok)}
.bel-loket.open .t{color:var(--ok)}

/* ── posities (gedempt qua opzet; resultaat/rendement rechts, kleur volgt winst/verlies) ── */
.bel-prow{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;
  padding:11px 0;border-top:1px solid var(--line)}
.bel-prow:first-child{border-top:none}
.bel-prow .pn{font-size:13.5px;font-weight:600;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bel-prow .pl{font-size:11px;color:var(--faint);margin-top:2px;display:flex;align-items:center;gap:7px}
.bel-prow .pv{font-size:13.5px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}
.bel-prow .pr{font-size:12px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums;margin-top:1px}
.bel-prow .pr.ok{color:var(--ok)}
.bel-prow .pr.warn{color:var(--warn-text)}
.bel-prow .pr.faint{color:var(--faint);font-weight:600;cursor:help}
.bel-prow .pw{font-size:11.5px;color:var(--faint);text-align:right;font-variant-numeric:tabular-nums}
.bel-prownote{font-size:11px;color:var(--faint);margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}

/* ── label-badges (kern / satelliet / entertainment) ── */
.bel-tag{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;
  border-radius:99px;white-space:nowrap}
.bel-tag.kern{color:var(--ok);background:color-mix(in srgb,var(--ok) 16%,transparent)}
.bel-tag.satelliet{color:var(--accent2);background:color-mix(in srgb,var(--accent) 16%,transparent)}
.bel-tag.entertainment{color:var(--muted);background:var(--chip)}

/* ── journal: scorebord + kaarten + terugblik ── */
.bel-score{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.bel-score .num{font-size:20px;font-weight:800;letter-spacing:-.02em}
.bel-score .num b{color:var(--txt)}
.bel-score .ssub{font-size:12.5px;color:var(--muted);margin-top:2px}
.bel-score .sbar{flex:0 0 140px;height:8px;border-radius:99px;background:var(--bg2);overflow:hidden}
.bel-score .sbar i{display:block;height:100%;background:var(--accent);border-radius:99px}

.bel-advies{display:flex;gap:13px;align-items:flex-start;background:var(--bg2);
  border:1px dashed color-mix(in srgb,var(--accent) 40%,var(--line));border-radius:var(--radius);padding:var(--s4) var(--s5)}
.bel-advies .ico{flex:0 0 auto;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:19px;
  background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line))}
.bel-advies .t{font-size:14px;font-weight:700}
.bel-advies .d{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.5}

.bel-jcard{border:1px solid var(--line);border-radius:var(--radius);padding:var(--s4) var(--s5);background:linear-gradient(180deg,var(--panel2),var(--panel))}
.bel-jcard + .bel-jcard{margin-top:var(--s3)}
.bel-jhead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.bel-jhead .jt{font-size:15px;font-weight:700}
.bel-jd{font-size:12px;color:var(--faint);font-weight:600;margin-top:2px}
.bel-vbadge{font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:3px 10px;
  border-radius:99px;white-space:nowrap}
.bel-vbadge.kopen{color:var(--ok);background:color-mix(in srgb,var(--ok) 16%,transparent)}
.bel-vbadge.niet_kopen{color:var(--muted);background:var(--chip)}
.bel-vbadge.watchlist{color:var(--accent2);background:color-mix(in srgb,var(--accent) 16%,transparent)}
.bel-jfield{font-size:12.5px;margin-top:9px}
.bel-jfield .k{color:var(--faint);font-weight:650}
.bel-jconcl{font-size:13.5px;color:var(--txt);margin-top:6px;line-height:1.5}
.bel-terugblik{margin-top:12px;padding:10px 13px;border-radius:var(--radius-sm);font-size:12.5px;
  display:flex;gap:9px;align-items:flex-start;line-height:1.45;color:var(--muted)}
.bel-terugblik b{color:var(--txt)}
.bel-terugblik .mk{flex:0 0 auto;font-weight:800}
.bel-terugblik.goed{background:color-mix(in srgb,var(--ok) 12%,transparent);border:1px solid color-mix(in srgb,var(--ok) 30%,var(--line))}
.bel-terugblik.goed .mk{color:var(--ok)}
.bel-terugblik.fout{background:color-mix(in srgb,var(--bad) 12%,transparent);border:1px solid color-mix(in srgb,var(--bad) 30%,var(--line))}
.bel-terugblik.fout .mk{color:var(--bad)}
.bel-terugblik.neutraal{background:var(--bg2);border:1px solid var(--line)}
.bel-terugblik.pending{background:var(--bg2);border:1px solid var(--line);color:var(--faint)}
.bel-terugblik.pending .mk{color:var(--faint)}

/* ── maanddag: ritueel · 3 getallen · order-zin · streak ── */
.bel-ritual{text-align:center;margin-bottom:var(--s5)}
.bel-ritual .rt{font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:var(--accent2);font-weight:700}
.bel-ritual .rd{font-size:13px;color:var(--muted);margin-top:4px}
.bel-three{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-bottom:var(--s4)}
.bel-big{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:18px 14px;text-align:center}
.bel-big .bl{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);font-weight:650;line-height:1.3}
.bel-big .bv{font-size:26px;font-weight:800;letter-spacing:-.02em;margin-top:9px;font-variant-numeric:tabular-nums}
.bel-big .bv.ok{color:var(--ok)} .bel-big .bv.warn{color:var(--warn-text)}
.bel-big .bs{font-size:11.5px;color:var(--muted);margin-top:3px}
.bel-order{text-align:center;padding:26px 22px;border-radius:var(--radius);
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 9%,var(--panel2)),color-mix(in srgb,var(--ok) 5%,var(--panel)));
  border:1px solid color-mix(in srgb,var(--accent) 25%,var(--line))}
.bel-order .oq{font-size:23px;font-weight:800;letter-spacing:-.02em;line-height:1.3}
.bel-order .oq b{color:var(--ok)}
.bel-order .osub{font-size:13px;color:var(--muted);margin-top:8px}
.bel-order .ohint{font-size:12px;color:var(--faint);margin-top:14px}
.bel-streak{margin-top:var(--s4);display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:700;
  color:var(--warn-text);background:color-mix(in srgb,var(--warn) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--warn) 35%,var(--line));border-radius:99px;padding:8px 16px}
.bel-foot{font-size:11.5px;color:var(--faint);text-align:center;margin-top:var(--s4);line-height:1.5}

@media(max-width:600px){
  .bel-kpis{grid-template-columns:1fr 1fr}
  .bel-kpis .bel-kpi:first-child{grid-column:1/-1}
  .bel-three{grid-template-columns:1fr}
  .bel-three .bel-big{display:flex;align-items:center;justify-content:space-between;text-align:left;padding:14px 16px}
  .bel-three .bel-big .bv{margin-top:0}
  .bel-hero-line{font-size:17px}
  .bel-order .oq{font-size:20px}
}