:root {
  /* Het donkere handelspalet (2.5): zwart als basis, groen en rood als betekenis,
     goud als accent, zilver voor het secundaire. Diepte komt van vlakken, niet van
     randen — vandaar de subtielere lijnkleur.

     Twee kleuren die op elkaar gingen lijken en dat niet mogen: goud (--accent,
     versiering en nadruk) en amber (--warn, een waarschuwing). Een waarschuwing die
     eruitziet als een sieraad wordt niet gelezen. --amber blijft bestaan als alias
     van --warn zodat oude regels blijven werken, maar decoratie hoort --accent te
     gebruiken. */
  --bg: #07090c;
  --surface: #0d1014;
  --surface-2: #12151b;
  --surface-3: #181c24;
  --line: #1e232c;
  --text: #e8ecf3;
  --muted: #8b95a7;
  --zilver: #9aa3b2;
  --accent: #d4a537;
  --accent-dim: rgba(212,165,55,.10);
  --green: #2ebd85;
  --red: #f6465d;
  --warn: #ff9f1a;
  --amber: var(--warn);
  --radius: 12px;
  --radius-sm: 9px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  /* 2.44 — de doorzichtige tinten als tokens: één plek, geen losse rgba's meer. */
  --accent-a10: rgba(212,165,55,.10);
  --accent-a35: rgba(212,165,55,.35);
  --green-a08: rgba(46,189,133,.08);
  --green-a10: rgba(46,189,133,.10);
  --green-a14: rgba(46,189,133,.14);
  --green-a16: rgba(46,189,133,.16);
  --green-a18: rgba(46,189,133,.18);
  --green-a35: rgba(46,189,133,.35);
  --green-a45: rgba(46,189,133,.45);
  --green-a50: rgba(46,189,133,.5);
  --red-a08: rgba(246,70,93,.08);
  --red-a10: rgba(246,70,93,.10);
  --red-a14: rgba(246,70,93,.14);
  --red-a16: rgba(246,70,93,.16);
  --red-a18: rgba(246,70,93,.18);
  --red-a35: rgba(246,70,93,.35);
  --red-a45: rgba(246,70,93,.45);
  --red-a50: rgba(246,70,93,.5);
  --zilver-a14: rgba(154,163,178,.14);
  --zilver-a50: rgba(154,163,178,.5);
  --zwart-a50: rgba(0,0,0,.5);
  /* Eén schaduw voor alles wat "boven de pagina zweeft" (menu's, dialogen) en één
     hele lichte voor kaarten. Twee waarden in plaats van twintig losse regels
     houdt de diepte consistent — daar zit het verschil tussen verzorgd en rommelig. */
  --shadow-1: 0 1px 2px rgba(0,0,0,.28);
  --shadow-2: 0 12px 34px rgba(0,0,0,.45);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Het `hidden`-attribuut moet altijd winnen. De browser regelt dat met een regel van
   de laagste soort, dus élke eigen `display`-regel — en dat zijn er veel — zet hem
   opzij. Zo bleef er een badge met een 0 in het menu staan en een knop zichtbaar die
   verborgen hoorde te zijn. Eén regel hier is beter dan er twintig keer aan denken. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif;
  padding-bottom: var(--safe-b);
  overscroll-behavior-y: none;
}

/* Kopjes kregen allemaal ongeveer evenveel gewicht, waardoor een pagina met vier
   secties leest als één lange lap. Een streepje in de accentkleur ervoor kost niets
   en laat je in één oogopslag zien waar een blok begint. */
h2 {
  font-size: 15.5px; margin: 26px 0 11px; letter-spacing: -.2px; font-weight: 650;
  display: flex; align-items: center; gap: 9px;
}
h2::before {
  content: ""; width: 3px; height: 15px; border-radius: 2px;
  background: var(--accent); opacity: .8; flex: 0 0 auto;
}
h3 { font-size: 14px; margin: 0 0 10px; display: flex; align-items: center; gap: 7px;
     font-weight: 650; letter-spacing: -.1px; }
hr { border: none; border-top: 1px solid var(--line); margin: 16px 0; }

.ic { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor;
      stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------- topbar */
.topbar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 9px 16px; background: rgba(18,23,31,.92);
  backdrop-filter: blur(12px); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 30;
}
.brand { display: flex; align-items: center; gap: 8px; font-size: 15px;
         letter-spacing: -.2px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); transition: .3s; }
.dot.live { background: var(--green); box-shadow: 0 0 8px var(--green); }
/* 2.26: het stipje pulseert zacht zolang er op de achtergrond wordt ververst. */
.dot.live.vers { animation: vers-puls 1.1s ease-in-out infinite; }
@keyframes vers-puls { 50% { box-shadow: 0 0 14px var(--green); } }
.badge {
  font-size: 10px; text-transform: uppercase; letter-spacing: .5px;
  padding: 2px 7px; border-radius: 20px; background: var(--surface-2);
  color: var(--muted); border: 1px solid var(--line);
}

/* De cijferstrip. Scheidingslijntjes in plaats van alleen witruimte: vijf getallen
   op een rij zonder scheiding lezen als één lang getal.

   Bewust `nowrap` met horizontaal scrollen in plaats van `wrap`: bij weinig ruimte
   viel elke stat op een eigen regel en groeide de topbalk uit tot een kolom van
   vijfhonderd pixels hoog. Liever een strip die je opzij schuift dan een balk die de
   halve pagina opeet. */
.topstats {
  display: flex; gap: 0; flex: 1 1 260px; min-width: 0; flex-wrap: nowrap;
  align-items: center; overflow-x: auto; scrollbar-width: none;
}
.topstats::-webkit-scrollbar { display: none; }
.stat {
  display: flex; flex-direction: column; min-width: 68px; flex: 0 0 auto;
  padding: 0 15px; border-left: 1px solid var(--line);
}
.stat:first-child { border-left: none; padding-left: 0; }
.stat label { font-size: 9px; text-transform: uppercase; letter-spacing: .7px;
              color: var(--muted); font-weight: 600; }
.stat span { font-variant-numeric: tabular-nums; font-weight: 650; font-size: 14.5px;
             letter-spacing: -.2px; }
.topactions { display: flex; align-items: center; gap: 7px; }

.icon-btn {
  background: transparent; border: 1px solid transparent; color: var(--muted);
  width: 34px; height: 34px; border-radius: var(--radius-sm); display: grid;
  place-items: center; cursor: pointer; transition: background .15s, color .15s;
}
.icon-btn:hover { color: var(--text); background: var(--surface-2); }
.icon-btn.unlocked { color: var(--green); background: rgba(46,189,133,.12); }

/* ---------------------------------------------------------- overloopmenu */
.menu-wrap { position: relative; }
.menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  min-width: 232px; padding: 6px; border-radius: var(--radius);
  background: var(--surface-2); border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
}
.menu[hidden] { display: none; }
.menu hr { margin: 5px 6px; border-top-color: var(--line); }
.menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: none; border: none; color: var(--text); cursor: pointer;
  padding: 9px 10px; border-radius: var(--radius-sm); font-size: 13.5px;
  font-family: inherit;
}
.menu-item:hover { background: var(--surface-3); }
.menu-item .ic { color: var(--muted); }
.menu-item span { display: flex; flex-direction: column; line-height: 1.35; }
.menu-item b { font-weight: 600; }
.menu-item em { font-style: normal; font-size: 11.5px; color: var(--muted); }
.menu-item.danger-text { color: var(--red); }
.menu-item.danger-text .ic { color: var(--red); }
.menu-item .av { width: 28px; height: 28px; flex-basis: 28px; border-radius: 50%;
                 font-size: 9.5px; }

.panic {
  background: var(--red); color: #fff; border: none; padding: 9px 13px;
  border-radius: var(--radius-sm); font-weight: 650; cursor: pointer; font-size: 13px;
  display: flex; align-items: center; gap: 7px; box-shadow: var(--shadow-1);
}
.panic:hover { filter: brightness(1.08); }
.panic:active { transform: scale(.97); }

.warnings { padding: 0 14px; }
.warnings .warn {
  background: rgba(255,159,26,.1); border: 1px solid rgba(255,159,26,.3);
  color: var(--amber); padding: 8px 12px; border-radius: 10px;
  margin-top: 10px; font-size: 13px;
}

/* ---------------------------------------------------------- zijmenu
   Was een rij tabbladen bovenaan. Elf knoppen op één regel dwongen je tot
   horizontaal scrollen en gaven geen enkele hint over samenhang: "Vault" en
   "Live" stonden even dicht bij elkaar als "Markt" en "Portfolio". In een kolom
   passen groepskopjes, en dan zie je in één oogopslag waar iets thuishoort. */

:root { --nav-w: 218px; --nav-w-collapsed: 62px; --topbar-h: 55px; }

.shell { display: flex; align-items: flex-start; gap: 0; }

.sidebar {
  flex: 0 0 var(--nav-w); width: var(--nav-w);
  position: sticky; top: var(--topbar-h); z-index: 20;
  height: calc(100vh - var(--topbar-h));
  overflow-y: auto; overflow-x: hidden;
  padding: 12px 10px 16px; border-right: 1px solid var(--line);
  background: var(--surface); scrollbar-width: thin;
  transition: flex-basis .18s ease, width .18s ease;
  display: flex; flex-direction: column; gap: 2px;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 3px; }

.navgroup { margin-bottom: 12px; }
.navgroup-label {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--muted); padding: 6px 10px 4px; opacity: .75; white-space: nowrap;
}

.tab {
  background: none; border: none; color: var(--muted);
  padding: 9px 10px; border-radius: 9px; cursor: pointer; font-size: 13.5px;
  white-space: nowrap; display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left; position: relative;
}
.tab:hover { color: var(--text); background: var(--surface-2); }
.tab.active { color: var(--text); background: var(--accent-dim); font-weight: 600; }
.tab.active::before {
  content: ""; position: absolute; left: 0; top: 7px; bottom: 7px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--accent);
}
.tab.active .ic { color: var(--accent); }
.tab .ic { flex: 0 0 auto; }

.nav-badge {
  margin-left: auto; background: var(--accent); color: #fff; font-size: 10px;
  font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px;
  display: grid; place-items: center; padding: 0 5px;
}
/* `display: grid` uit de regel hierboven wint van de `[hidden]`-regel van de browser.
   Zonder deze uitzondering bleef er een badge met een 0 erin staan — een bolletje dat
   je aandacht trekt naar iets wat er niet is. */
.nav-badge[hidden] { display: none; }

/* 2.44 — de inklapknop staat bovenin en blijft plakken bij het scrollen. Hij stond
   onderaan een menu van dertig regels; ingeklapt stond hij dan buiten beeld en was
   er geen zichtbare weg terug. */
.nav-collapse {
  position: sticky; top: -12px; z-index: 3; margin: -12px -10px 6px;
  background: var(--surface); border: none; border-bottom: 1px solid var(--line);
  color: var(--muted); padding: 10px 10px 8px; cursor: pointer; font-size: 12.5px;
  display: flex; align-items: center; gap: 10px; width: calc(100% + 20px); text-align: left;
}
.nav-collapse:hover { color: var(--text); background: var(--surface-2); }
.nav-collapse .ic { transform: rotate(180deg); transition: transform .18s ease; }

/* --- ingeklapt: alleen iconen, met de titel als tooltip */
body.nav-collapsed .sidebar { flex-basis: var(--nav-w-collapsed); width: var(--nav-w-collapsed); }
body.nav-collapsed .sidebar span,
body.nav-collapsed .navgroup-label { display: none; }
body.nav-collapsed .tab { justify-content: center; padding: 10px 0; }
body.nav-collapsed .nav-collapse { justify-content: center; padding: 10px 0 8px; }
body.nav-collapsed .nav-collapse .ic { transform: rotate(0deg); }
/* De greep op de rand: alleen ingeklapt, halverwege het scherm, altijd zichtbaar. */
.nav-greep { display: none; }
body.nav-collapsed .nav-greep {
  display: flex; align-items: center; justify-content: center;
  position: fixed; left: var(--nav-w-collapsed); top: 50%; transform: translateY(-50%);
  width: 18px; height: 56px; z-index: 21; cursor: pointer;
  background: var(--surface); color: var(--muted); border: 1px solid var(--line);
  border-left: none; border-radius: 0 9px 9px 0; padding: 0;
}
body.nav-collapsed .nav-greep:hover { color: var(--accent); border-color: var(--accent); }
.nav-greep[hidden] { display: none !important; }
body.nav-collapsed .nav-greep .ic { width: 14px; height: 14px; }
body.nav-collapsed .navgroup {
  margin-bottom: 8px; padding-top: 8px; border-top: 1px solid var(--line);
}
body.nav-collapsed .navgroup:first-child { border-top: none; padding-top: 0; }
body.nav-collapsed .nav-badge {
  position: absolute; top: 4px; right: 6px; margin: 0; min-width: 15px;
  height: 15px; font-size: 9px;
}

.burger { display: none; }
.nav-scrim { display: none; }

main { flex: 1; min-width: 0; padding: 0 18px 24px; }
.panel { display: none; animation: fade .18s ease; }
.panel.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; } }

/* ---------------------------------------------------------- cards */
/* `minmax(0, ...)` en `min-width: 0` zijn hier geen detail. Een grid-item heeft van
   zichzelf `min-width: auto`, en dat betekent "word nooit smaller dan je langste
   ononderbroken woord". Eén lange zin duwt de kolom dan breder dan de kaart en de
   tekst loopt over de buurman heen — precies wat er bij de standen-kaarten gebeurde. */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.cards > * { min-width: 0; }
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 15px 16px;
  box-shadow: var(--shadow-1);
  transition: border-color .15s;
}
.card:hover { border-color: var(--surface-3); }
.card.wide { grid-column: 1 / -1; }
.card .num { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums;
             letter-spacing: -.5px; }
.card .sub { color: var(--muted); font-size: 12px; margin-top: 2px; }
/* Vangnet: geen enkele tekst mag ooit buiten zijn kaart lopen, wat er ook in staat.
   Een symboolnaam of een URL zonder spaties is anders genoeg om de opmaak te slopen. */
.card, .card .sub, .card .hint, .card p { min-width: 0; overflow-wrap: anywhere; }
.pot-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.pot-head .name { text-transform: capitalize; font-weight: 650; }

.pos { color: var(--green); } .neg { color: var(--red); } .muted { color: var(--muted); }

.card.protected { position: relative; }
.card.protected.locked { opacity: .55; }
.card.protected.locked input, .card.protected.locked select,
.card.protected.locked button { pointer-events: none; }

.lock-banner {
  display: flex; align-items: center; gap: 12px; margin: 14px 0 4px;
  background: var(--accent-dim); border: 1px solid rgba(79,140,255,.35);
  border-radius: var(--radius); padding: 13px 14px;
}
.lock-banner > div { flex: 1; }
.lock-banner.hidden { display: none; }

/* ---------------------------------------------------------- goal */
.goal-card {
  background: linear-gradient(135deg, var(--surface), var(--surface-2));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; margin: 14px 0;
}
.goal-top { display: flex; justify-content: space-between; align-items: baseline;
            flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.goal-top .big { font-size: 20px; font-weight: 700; letter-spacing: -.5px; }
.bar { height: 9px; background: var(--surface-3); border-radius: 20px; overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 20px;
         background: linear-gradient(90deg, var(--accent), var(--green)); transition: width .5s; }

/* ---------------------------------------------------------- tabellen */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius);
              -webkit-overflow-scrolling: touch; background: var(--surface);
              box-shadow: var(--shadow-1); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
/* Koppen: klein kapitaal in zilver, geen vlak, een dunne onderlijn. Sticky binnen een
   scrollende wrap, zodat je bij een lange tabel weet waar je kijkt. */
th { text-align: left; padding: 12px; color: var(--zilver); font-weight: 600;
     font-size: 10px; text-transform: uppercase; letter-spacing: .7px;
     background: var(--surface); border-bottom: 1px solid var(--line);
     white-space: nowrap; position: sticky; top: 0; z-index: 2; }
td { padding: 12px; border-top: 1px solid var(--line); white-space: nowrap;
     font-variant-numeric: tabular-nums; }
tr:hover td { background: var(--surface-2); }
/* Getallen rechts, symbolen links. Dit is het verschil dat je niet kunt benoemen
   maar altijd ziet — geen enkele hoeveelheid goud repareert een kolom bedragen die
   links hangt. */
th.tr, td.tr { text-align: right; }
.empty { padding: 24px; text-align: center; color: var(--muted); font-size: 13px; }

/* ---------------------------------------------------------- knoppen */
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; align-items: center; }
button { font-family: inherit; }
button.primary, button.ok, button.no, button.ghost, button.mini {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
}
button.primary { background: var(--accent); color: #14100a; border: none; padding: 9px 14px;
  border-radius: var(--radius-sm); font-weight: 650; font-size: 13px;
  box-shadow: var(--shadow-1); transition: filter .15s; }
button.primary:hover { filter: brightness(1.1); }
button.primary:active { transform: scale(.98); }
button.ok { background: var(--green); color: #06210f; border: none; padding: 9px 14px;
  border-radius: var(--radius-sm); font-weight: 650; }
button.no, button.danger { background: transparent; color: var(--red);
  border: 1px solid rgba(246,70,93,.45); padding: 9px 14px;
  border-radius: var(--radius-sm); font-weight: 600; font-size: 13px;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
button.no:hover, button.danger:hover { background: rgba(246,70,93,.1);
  border-color: var(--red); }
button.ghost { background: var(--surface-2); color: var(--text); border: 1px solid var(--line);
  padding: 8px 13px; border-radius: var(--radius-sm); font-size: 12.5px; }
button.ghost:hover { border-color: var(--accent); }
button.mini { background: none; border: 1px solid var(--line); color: var(--muted);
  padding: 4px 9px; border-radius: 7px; font-size: 11px; }
button.mini:hover { color: var(--text); border-color: var(--accent); }
button.mini.danger:hover { color: var(--red); border-color: var(--red); }
button:disabled { opacity: .5; cursor: not-allowed; }

/* ---------------------------------------------------------- approvals */
.approval {
  background: var(--accent-dim); border: 1px solid rgba(79,140,255,.4);
  border-radius: var(--radius); padding: 14px; margin-top: 14px;
}
.approval .why { color: var(--muted); font-size: 13px; margin: 6px 0 10px; line-height: 1.65; }

/* ---------------------------------------------------------- chat */
.chan-bar { display: flex; gap: 7px; margin: 14px 0; flex-wrap: wrap; align-items: center; }
.chan { background: var(--surface-2); border: 1px solid var(--line); color: var(--muted);
  padding: 7px 12px; border-radius: 20px; cursor: pointer; font-size: 12.5px;
  display: inline-flex; align-items: center; gap: 6px; }
.chan.active { color: #fff; border-color: var(--accent); background: var(--accent-dim); }
.chan-bar select { width: auto; min-width: 150px; margin: 0; }

/* Het gesprek is een eigen kolom met een eigen hoogte, niet een blok dat met de
   pagina meegroeit. Zonder dat moest je na het lezen van een lang antwoord de hele
   pagina terugscrollen om bij het invoerveld te komen — en dat elke keer opnieuw. */
.chat-pane {
  display: flex; flex-direction: column; min-width: 0;
  height: calc(100dvh - var(--topbar-h) - 190px); min-height: 380px;
}
/* `dvh` bestaat niet in oudere browsers; die vallen terug op deze regel ervoor.
   Volgorde is hier het mechanisme: een onbekende eenheid maakt de hele declaratie
   ongeldig, dus blijft de vorige staan. */
@supports not (height: 100dvh) {
  .chat-pane { height: calc(100vh - var(--topbar-h) - 190px); }
}
.chat-log {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 14px;
  display: flex; flex-direction: column; gap: 12px; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;     /* scrollen in de chat trekt de pagina niet mee */
  scroll-padding-bottom: 12px;
}

/* Springen naar het nieuwste. Verschijnt alleen als je omhoog gescrold hebt én er
   iets binnenkwam — anders is het een knop die je vertelt dat je al bent waar je
   bent. */
.chat-wrap { position: relative; display: flex; flex-direction: column;
             flex: 1 1 auto; min-height: 0; }
.jump-new {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 12px;
  background: var(--accent); color: #fff; border: none; cursor: pointer;
  padding: 7px 14px; border-radius: 20px; font-size: 12.5px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px; box-shadow: var(--shadow-2);
  z-index: 4; animation: pop .18s ease;
}
.jump-new .ic { width: 14px; height: 14px; }
.msg { display: flex; gap: 10px; align-items: flex-start; animation: pop .2s ease; }
@keyframes pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; } }
.av { width: 30px; height: 30px; border-radius: 9px; flex: 0 0 30px;
      display: grid; place-items: center; font-size: 10.5px; font-weight: 750;
      color: #08131f; letter-spacing: .3px; }

/* Berichten stonden als platte tekst onder elkaar over de volle breedte. Bij zes
   agents die na elkaar antwoorden loopt dat in elkaar over, en regels van 140
   tekens lezen slecht. Een vlak eromheen en een leesbreedte lossen allebei op. */
/* Let op de directe-kindselector: in een bericht zit óók een `.reason .body` met de
   toelichting. Zonder `>` kreeg die dezelfde bubbel en flex-regels, en dan klapte de
   uitklapbare uitleg door de opmaak heen. */
.msg > .body {
  flex: 1; min-width: 0; max-width: 780px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 4px 12px 12px 12px; padding: 9px 13px 10px;
}
.msg .who { font-size: 11px; color: var(--muted); margin-bottom: 3px; font-weight: 600; }
.msg .txt { white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere;
            line-height: 1.6; }
.msg.me > .body { background: var(--accent-dim); border-color: rgba(79,140,255,.28); }
.msg.me .txt { color: var(--text); }
/* Systeemmeldingen zijn geen gesprekspartner: geen kleur, wel duidelijk apart. */
.msg.system > .body { background: none; border-style: dashed; }
.msg.system .txt { color: var(--muted); font-size: 13px; }

/* Aansluitend bericht van dezelfde spreker: avatar en naam weg, dichter erop. */
.msg.cont { margin-top: -6px; }
.msg.cont .av { visibility: hidden; height: 0; }
.msg.cont .who { display: none; }
.msg.cont > .body { border-radius: 12px; }

.typing-row { min-height: 20px; padding: 4px 2px; display: flex; gap: 10px; flex-wrap: wrap; }
.typing { display: inline-flex; align-items: center; gap: 7px; font-size: 12px;
          color: var(--muted); }
.typing .dots { display: inline-flex; gap: 3px; }
.typing .dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--muted);
                  animation: blink 1.3s infinite; }
.typing .dots i:nth-child(2) { animation-delay: .18s; }
.typing .dots i:nth-child(3) { animation-delay: .36s; }
@keyframes blink { 0%,60%,100% { opacity: .25; } 30% { opacity: 1; } }

.chat-form { display: flex; gap: 8px; }
.chat-form input { flex: 1; margin: 0; min-width: 0; }
.icon-send { background: var(--accent); color: #fff; border: none; width: 44px;
  border-radius: var(--radius-sm); display: grid; place-items: center; cursor: pointer;
  flex: 0 0 44px; }
.icon-send:hover { filter: brightness(1.1); }

/* ---------------------------------------------------------- twee kolommen
   Onder 1180px past een tweede kolom niet zonder dat beide te smal worden om te
   lezen; dan valt hij vanzelf weg. Boven die breedte lees je het teamoverleg mee
   terwijl je met één agent doorpraat. */
.chat-split { display: grid; grid-template-columns: 1fr; gap: 14px; }
.chat-pane.second { display: none; }
.pane-head { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.pane-head select { margin: 0; flex: 1; min-width: 0; }

@media (min-width: 1180px) {
  .chat-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .chat-pane.second { display: flex; }
  /* De eerste kolom heeft zijn kanaalkiezer in de balk erboven; om de hoogtes gelijk
     te houden krijgt hij hier dezelfde ruimte als de kop van de tweede. */
  .chat-pane:not(.second) .chat-log { margin-top: 42px; }
  body.chat-split-off .chat-split { grid-template-columns: 1fr; }
  body.chat-split-off .chat-pane.second { display: none; }
  body.chat-split-off .chat-pane:not(.second) .chat-log { margin-top: 0; }
}
/* De knop om hem terug te halen heeft alleen zin waar hij ook past. */
@media (max-width: 1179px) { #btn-split-on { display: none !important; } }

/* ---------------------------------------------------------- feed */
.row-between { display: flex; justify-content: space-between; align-items: center;
  gap: 10px; flex-wrap: wrap; }
.feed { display: flex; flex-direction: column; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  max-height: 62vh; overflow-y: auto; }
.fitem { background: var(--surface); padding: 9px 12px; display: flex; gap: 10px;
  align-items: baseline; font-size: 13px; }
.fitem time { color: var(--muted); font-size: 11px; flex: 0 0 58px; font-variant-numeric: tabular-nums; }
.fitem .who { flex: 0 0 130px; font-size: 11px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fitem .what { flex: 1; min-width: 0; }
.fitem.kind-error, .fitem.kind-watchdog, .fitem.kind-auth_failed { background: rgba(246,70,93,.08); }
.fitem.kind-order_filled, .fitem.kind-approval_needed { background: rgba(79,140,255,.07); }
.fitem.kind-position_closed, .fitem.kind-vault_ready { background: rgba(46,189,133,.06); }

/* ---------------------------------------------------------- actions */
.action-list { display: flex; flex-direction: column; gap: 8px; }
.action-item { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 14px; }
.action-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.action-head .title { font-weight: 600; flex: 1; min-width: 0; }
.pill { font-size: 10.5px; padding: 2px 8px; border-radius: 20px; text-transform: uppercase;
        letter-spacing: .4px; font-weight: 650; }
.pill.queued { background: var(--surface-3); color: var(--muted); }
.pill.running { background: rgba(79,140,255,.18); color: #9dc0ff; }
.pill.done { background: rgba(46,189,133,.15); color: var(--green); }
.pill.error { background: rgba(246,70,93,.15); color: var(--red); }
.action-body { margin-top: 8px; font-size: 13px; color: var(--muted); line-height: 1.65;
  white-space: pre-wrap; }
.agent-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px; margin: 10px 0; }
textarea { width: 100%; background: var(--surface-2); border: 1px solid var(--line);
  color: var(--text); padding: 10px; border-radius: 9px; font: inherit; font-size: 13px;
  resize: vertical; }
textarea:focus { outline: none; border-color: var(--accent); }

/* ---------------------------------------------------------- vault */
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px; }
.doc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.doc.pinned { border-color: rgba(255,159,26,.45); }
.doc-head { display: flex; align-items: flex-start; gap: 8px; }
.doc-head .t { font-weight: 650; flex: 1; line-height: 1.35; }
.doc .meta { font-size: 11px; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; }
.doc .sum { font-size: 13px; color: var(--muted); line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.doc .points { font-size: 12.5px; margin: 0; padding-left: 16px; color: var(--text); }
.doc .points li { margin-bottom: 3px; }
.search-box { position: relative; display: flex; align-items: center; gap: 8px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px;
  padding: 0 10px; color: var(--muted); }
.search-box input { border: none; background: none; margin: 0; padding: 8px 0; width: 220px; }
.search-box input:focus { outline: none; }

/* ---------------------------------------------------------- agents */
.agent-card { display: flex; flex-direction: column; gap: 8px; }
.agent-top { display: flex; align-items: center; gap: 10px; }
.agent-top .nm { font-weight: 700; font-size: 15px; }
.agent-top .rl { font-size: 11px; color: var(--muted); }
.agent-card textarea { font-size: 12.5px; }

/* ---------------------------------------------------------- forms */
label { display: block; margin-bottom: 10px; font-size: 12px; color: var(--muted); }
input, select {
  width: 100%; margin-top: 4px; background: var(--surface-2); border: 1px solid var(--line);
  color: var(--text); padding: 9px 10px; border-radius: 9px; font-size: 15px;
  font-family: inherit;
}
@media (min-width: 700px) { input, select { font-size: 13.5px; } }
input:focus, select:focus { outline: none; border-color: var(--accent); }
input[type=file] { padding: 8px; font-size: 12px; }
label.check { display: flex; align-items: center; gap: 9px; color: var(--text); font-size: 13px;
  padding: 6px 0; }
label.check input { width: auto; margin: 0; accent-color: var(--accent);
  width: 17px; height: 17px; }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 10px; margin-top: 12px; }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.hint { color: var(--muted); font-size: 12px; line-height: 1.6; }
.estimate { margin-top: 10px; padding: 10px; background: var(--surface-2);
  border-radius: 9px; font-size: 12px; color: var(--muted); line-height: 1.6; }
.save-bar { display: flex; align-items: center; gap: 12px; margin: 16px 0 24px;
  position: sticky; bottom: calc(56px + var(--safe-b)); background: var(--bg); padding: 10px 0;
  z-index: 15; }
.agent-row { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 8px;
  align-items: end; margin-bottom: 8px; }
.agent-row .nm { font-size: 12px; color: var(--text); text-transform: capitalize; }
.pot-row { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; }
.pot-row:first-child { border-top: none; padding-top: 0; margin-top: 0; }

.chart-wrap { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px; }

.report-item { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 13px; margin-bottom: 8px; }
.report-item .lbl { font-size: 11px; color: var(--muted); margin-bottom: 5px; }
.report-item .bd { font-size: 13px; white-space: pre-wrap; line-height: 1.65; }

footer { margin: 26px 14px 0; padding: 14px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--muted); font-size: 12px; line-height: 1.65; }

/* ---------------------------------------------------------- mode-chip */
.mode-chip {
  display: flex; align-items: center; gap: 6px; background: var(--accent-dim);
  border: 1px solid rgba(79,140,255,.4); color: var(--accent); padding: 7px 10px;
  border-radius: 9px; cursor: pointer; font-size: 12.5px; font-weight: 600;
  text-transform: capitalize;
}
.mode-chip:hover { background: rgba(79,140,255,.2); }
.mode-chip .chev { width: 13px; height: 13px; opacity: .7; }

.mode-card { cursor: pointer; transition: border-color .15s, transform .12s; }
.mode-card:hover { border-color: var(--accent); }
.mode-card:active { transform: scale(.985); }
.mode-card.active { border-color: var(--accent); background: var(--accent-dim); }
.mode-card .mt { display: flex; align-items: center; gap: 8px; font-weight: 700;
                 margin-bottom: 5px; }
.mode-card .facts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px;
                    font-size: 11px; color: var(--muted); }
.mode-card .facts b { color: var(--text); font-weight: 600; }

/* ---------------------------------------------------------- council lanes */
.council-panel:empty { display: none; }
.council-panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; margin-bottom: 10px;
}
.council-head { display: flex; align-items: center; gap: 8px; font-size: 12px;
                color: var(--muted); margin-bottom: 10px; }
.lanes { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.lane { display: flex; align-items: center; gap: 8px; background: var(--surface-2);
        border: 1px solid var(--line); border-radius: 9px; padding: 7px 9px; }
.lane .av { width: 24px; height: 24px; flex-basis: 24px; border-radius: 7px; font-size: 9px; }
.lane .info { min-width: 0; flex: 1; }
.lane .nm { font-size: 12px; font-weight: 600; overflow: hidden;
            text-overflow: ellipsis; white-space: nowrap; }
.lane .st { font-size: 10.5px; color: var(--muted); }
.lane.thinking { border-color: var(--accent); }
.lane.thinking .st { color: var(--accent); }
.lane.thinking .av { animation: pulse 1.4s infinite; }
.lane.done .st { color: var(--green); }
.lane.error .st, .lane.skipped .st { color: var(--amber); }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }

/* ---------------------------------------------------------- team */
.stage-group { margin-bottom: 18px; }
.stage-head { display: flex; align-items: center; gap: 9px; margin: 16px 0 8px; }
.stage-head .n { font-size: 13px; font-weight: 650; }
.stage-head .line { flex: 1; height: 1px; background: var(--line); }
.stage-head .cnt { font-size: 11px; color: var(--muted); }

.agent-tile {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 13px; display: flex; flex-direction: column; gap: 8px;
  border-left: 3px solid var(--line);
}
.agent-tile.off { opacity: .5; }
.agent-tile .top { display: flex; align-items: center; gap: 10px; }
.agent-tile .nm { font-weight: 700; font-size: 15px; line-height: 1.2; }
.agent-tile .rl { font-size: 11px; color: var(--muted); }
.agent-tile .meta { font-size: 11.5px; color: var(--muted); display: flex; gap: 8px;
                    flex-wrap: wrap; }
.agent-tile .last { font-size: 11.5px; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.agent-tile .acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.switch { position: relative; width: 38px; height: 21px; flex: 0 0 38px; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch span { position: absolute; inset: 0; background: var(--surface-3); border-radius: 20px;
               cursor: pointer; transition: .2s; }
.switch span::before { content: ""; position: absolute; width: 15px; height: 15px; left: 3px;
                       top: 3px; background: #fff; border-radius: 50%; transition: .2s; }
.switch input:checked + span { background: var(--green); }
.switch input:checked + span::before { transform: translateX(17px); }

.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
            gap: 8px; margin: 12px 0; }
.tpl { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px;
       padding: 11px; cursor: pointer; transition: .15s; }
.tpl:hover { border-color: var(--accent); }
.tpl.sel { border-color: var(--accent); background: var(--accent-dim); }
.tpl .th { display: flex; align-items: center; gap: 7px; font-weight: 650; font-size: 13px; }
.tpl .ts { font-size: 11px; color: var(--muted); margin-top: 4px; line-height: 1.5; }
.tpl .tg { font-size: 10px; color: var(--muted); margin-top: 6px; text-transform: uppercase;
           letter-spacing: .4px; }
.dot-role { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; }

/* ---------------------------------------------------------- subnav */
/* Elf pillen op één rij die allemaal even hard roepen. Ze zitten nu in één spoor
   met een zachte achtergrond, zodat de actieve pil er echt uitspringt in plaats van
   net iets blauwer te zijn dan de rest. */
.subnav { display: flex; gap: 4px; overflow-x: auto; padding: 5px;
          scrollbar-width: none; margin: 14px 0 12px;
          background: var(--surface); border: 1px solid var(--line);
          border-radius: 11px;
          /* Blijft staan bij het scrollen. Zonder dit moet je bij elke sectiewissel
             helemaal terug naar boven, en met honderdveertig instellingen is dat ver. */
          position: sticky; top: 8px; z-index: 5;
          backdrop-filter: blur(10px); }
.subnav::-webkit-scrollbar { display: none; }
/* Let op de `.subnav` ervoor. Deze regels stonden als kale `.sub {}` in het bestand
   en raakten daarmee ook `<div class="sub">` — de samenvatting onder elke kaarttitel.
   Die kreeg dus `white-space: nowrap` en werd één lange regel die dwars over de
   buurkaarten heen liep. Een klassenaam van drie letters is van niemand; altijd
   scopen aan het onderdeel waar hij bij hoort. */
.subnav .sub { background: none; border: none; color: var(--muted);
       padding: 7px 13px; border-radius: 7px; cursor: pointer; font-size: 12.5px;
       white-space: nowrap; font-family: inherit; transition: background .15s, color .15s; }
.subnav .sub:hover { color: var(--text); background: var(--surface-2); }
.subnav .sub.active { color: var(--text); background: var(--accent-dim);
              box-shadow: inset 0 0 0 1px rgba(79,140,255,.35); font-weight: 600; }

/* En een vangnet: kaarttekst wikkelt altijd, wat een latere regel ook beweert. */
.card .sub, .card .hint, .card p { white-space: normal; }

.tier-row, .price-row { display: grid; grid-template-columns: 100px 1fr 1.3fr; gap: 8px;
                        align-items: end; margin-bottom: 8px; }
.price-row { grid-template-columns: 1.6fr 1fr 1fr; }
.tier-row .nm, .price-row .nm { font-size: 12px; color: var(--text); }

/* ---------------------------------------------------------- modal */
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.65); z-index: 100;
  display: grid; place-items: center; padding: 20px; backdrop-filter: blur(3px); }
.modal { background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 20px; width: 100%; max-width: 420px; max-height: 85vh; overflow-y: auto; }
.modal h3 { margin-bottom: 12px; }

/* ---------------------------------------------------------- mobiel */
.hide-sm { display: initial; }

@media (max-width: 760px) {
  .hide-sm { display: none !important; }
  .topbar { gap: 10px; padding: 9px 12px; position: static; }
  /* Volle breedte op een eigen regel, en schuifbaar. De cijfers krijgen daar de
     ruimte die ze naast de knoppen niet hebben. */
  .topstats { order: 3; width: 100%; flex: 0 0 100%; padding-bottom: 2px; }
  .stat { padding: 0 12px; }
  .stat span { font-size: 13.5px; }
  .panic { padding: 9px 11px; }
  main { padding: 0 12px 20px; }
  .warnings { padding: 0 12px; }

  /* Zijmenu wordt een lade die over de inhoud schuift. Elf items onderaan het
     scherm proppen gaf knoppen van twee woorden breed; een lade heeft alle
     ruimte en houdt de groepskopjes overeind. */
  .burger { display: grid; }
  .shell { display: block; }

  .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; width: 264px; flex-basis: auto;
    height: 100%; z-index: 60; padding-top: 16px;
    transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: 0 0 40px rgba(0,0,0,.5);
  }
  body.nav-open .sidebar { transform: translateX(0); }
  body.nav-collapsed .sidebar { width: 264px; flex-basis: auto; }
  body.nav-collapsed .sidebar span,
  body.nav-collapsed .navgroup-label { display: revert; }
  body.nav-collapsed .tab { justify-content: flex-start; padding: 9px 10px; }
  body.nav-collapsed .navgroup { border-top: none; padding-top: 0; margin-bottom: 12px; }
  .nav-collapse { display: none; }
  body.nav-collapsed .nav-greep { display: none; }

  .nav-scrim {
    display: block; position: fixed; inset: 0; z-index: 50;
    background: rgba(0,0,0,.5); opacity: 0; pointer-events: none;
    transition: opacity .22s ease;
  }
  body.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }

  .tab { font-size: 14.5px; padding: 11px 12px; }
  .tab .ic { width: 18px; height: 18px; }

  /* Op een telefoon is de topbalk niet vastgezet en staat er meer boven de chat.
     `dvh` in plaats van `vh`: de adresbalk van mobiele browsers schuift weg tijdens
     het scrollen, en met `vh` springt de hele kolom dan mee. */
  .chat-pane { height: calc(100dvh - 210px); min-height: 300px; }
  .chan-bar { gap: 6px; }
  .chan-bar .search-box { order: 9; }
  .manual-top { align-items: flex-start; }
  .manual-top .btn-row { width: 100%; }
  .manual-top .btn-row button, .manual-top .btn-row .tg-btn { flex: 1 1 auto;
                                                              justify-content: center; }
  .m-sec p, .m-sec li { font-size: 14px; }
  .cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .settings-grid, .doc-grid { grid-template-columns: 1fr; }
  .agent-row { grid-template-columns: 1fr; }
  /* Hier stond `.chat-log { height: 58vh }`. Die vaste hoogte vocht met de kolom
     eromheen: het gesprek werd 58% van het scherm, en het invoerveld eronder viel
     buiten de kolom — waardoor je de hele pagina moest scrollen om te kunnen typen.
     De hoogte hoort van .chat-pane te komen; het logboek vult wat er over is. */
  .fitem .who { flex: 0 0 92px; }
  .search-box input { width: 100%; }
  .search-box { width: 100%; }
  th, td { padding: 9px 10px; }
}

/* ---------------------------------------------------------- v0.4 mensen */
.presence { display: flex; align-items: center; gap: -6px; }
.presence .pav {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: 9px; font-weight: 750; color: #08131f; border: 2px solid var(--surface);
  margin-left: -7px; position: relative; cursor: default;
}
.presence .pav:first-child { margin-left: 0; }
.presence .pav.typing::after {
  content: ""; position: absolute; right: -1px; bottom: -1px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--green); border: 2px solid var(--surface);
  animation: pulse 1.2s infinite;
}
.presence .more { font-size: 11px; color: var(--muted); margin-left: 8px; }

.account-chip {
  display: flex; align-items: center; gap: 7px; background: var(--surface-2);
  border: 1px solid var(--line); color: var(--text); padding: 4px 10px 4px 4px;
  border-radius: 20px; cursor: pointer; font-size: 12.5px;
}
.account-chip:hover { border-color: var(--accent); }
.account-chip .av { width: 24px; height: 24px; flex-basis: 24px; border-radius: 50%;
                    font-size: 9px; }

.role-badge {
  font-size: 10px; padding: 2px 7px; border-radius: 20px; font-weight: 650;
  text-transform: uppercase; letter-spacing: .4px; color: #08131f;
}

.user-row {
  display: flex; align-items: center; gap: 11px; padding: 11px 0;
  border-top: 1px solid var(--line);
}
.user-row:first-child { border-top: none; }
.user-row .av { width: 34px; height: 34px; flex-basis: 34px; border-radius: 50%;
                font-size: 11px; }
.user-row .who { flex: 1; min-width: 0; }
.user-row .who .n { font-weight: 650; display: flex; align-items: center; gap: 7px;
                    flex-wrap: wrap; }
.user-row .who .m { font-size: 11.5px; color: var(--muted); }
.user-row.inactive { opacity: .5; }
.user-row .online-dot { width: 8px; height: 8px; border-radius: 50%;
                        background: var(--green); flex: 0 0 8px; }

.roles-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
                gap: 8px; margin-top: 16px; }
.roles-legend .rl {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 11px; border-left: 3px solid var(--line);
}
.roles-legend .rl .h { font-weight: 650; font-size: 13px; margin-bottom: 4px; }
.roles-legend .rl .s { font-size: 11.5px; color: var(--muted); line-height: 1.55; }

.masked { color: var(--muted); font-style: italic; }
.pct-badge { font-variant-numeric: tabular-nums; }

.audit-row td { font-size: 12.5px; }
.audit-row.money td { background: rgba(79,140,255,.05); }
.audit-row.denied td { background: rgba(246,70,93,.07); }

.session-row { display: flex; justify-content: space-between; gap: 10px;
               padding: 8px 0; border-top: 1px solid var(--line); font-size: 12.5px; }
.session-row:first-child { border-top: none; }
.session-row .meta { color: var(--muted); font-size: 11px; }

body.role-medewerker [data-admin-only], body.role-viewer [data-admin-only],
body.role-medewerker .admin-only, body.role-viewer .admin-only { display: none !important; }
body.role-viewer .chat-form, body.role-viewer #btn-action { display: none !important; }

.user-typing { display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
               color: var(--accent); }

/* ---------------------------------------------------------- v0.5 markt */
.price-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
              gap: 10px; }
.price-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; position: relative; overflow: hidden;
}
.price-card .sym { font-size: 12px; color: var(--muted); font-weight: 600;
                   letter-spacing: .3px; }
.price-card .val { font-size: 23px; font-weight: 700; font-variant-numeric: tabular-nums;
                   letter-spacing: -.6px; margin: 3px 0; }
.price-card .chg { font-size: 12.5px; font-weight: 650; font-variant-numeric: tabular-nums; }
.price-card .rng { font-size: 11px; color: var(--muted); margin-top: 7px; }
.price-card .spark { display: block; width: 100%; height: 34px; margin-top: 8px; }
.price-card.stale { opacity: .55; }
.price-card .live-dot { position: absolute; top: 12px; right: 12px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--green); }
.price-card.stale .live-dot { background: var(--amber); animation: none; }
.price-card .bar-mini { height: 3px; background: var(--surface-3); border-radius: 2px;
  margin-top: 7px; position: relative; }
.price-card .bar-mini i { position: absolute; top: -2px; width: 3px; height: 7px;
  border-radius: 2px; background: var(--text); }

.source-row { display: flex; align-items: center; gap: 11px; padding: 11px 0;
              border-top: 1px solid var(--line); }
.source-row:first-child { border-top: none; }
.source-row .st { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px;
                  background: var(--muted); }
.source-row .st.ok { background: var(--green); }
.source-row .st.err { background: var(--red); }
.source-row .st.off { background: var(--surface-3); }
.source-row .st.stale { background: var(--amber); }
.source-row .info { flex: 1; min-width: 0; }
.source-row .info .n { font-weight: 620; display: flex; gap: 8px; align-items: center;
                       flex-wrap: wrap; }
.source-row .info .m { font-size: 11.5px; color: var(--muted); }
.kind-badge { font-size: 10px; padding: 2px 7px; border-radius: 20px;
              background: var(--surface-2); border: 1px solid var(--line);
              color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }

.provider-card { border-left: 3px solid var(--line); }
.provider-card.on { border-left-color: var(--green); }
.provider-card .ph { display: flex; align-items: center; justify-content: space-between;
                     gap: 8px; margin-bottom: 5px; }
.provider-card .ph b { font-size: 14px; }
.model-line { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px;
              color: var(--muted); padding: 3px 0; }
.model-line b { color: var(--text); font-weight: 600; }

/* ---------------------------------------------------------- v0.6 */
.boost-chip {
  display: flex; align-items: center; gap: 6px; background: var(--surface-2);
  border: 1px solid var(--line); color: var(--muted); padding: 7px 11px;
  border-radius: 9px; cursor: pointer; font-size: 12.5px; font-weight: 600;
}
.boost-chip:hover { border-color: var(--accent); color: var(--accent); }
.boost-chip.on { background: var(--accent-dim); border-color: var(--accent);
                 color: var(--accent); }
.boost-chip.on .ic { animation: pulse 1.2s infinite; }

.boost-bar {
  margin: 10px 14px 0; padding: 10px 13px; border-radius: 10px;
  background: rgba(255,159,26,.1); border: 1px solid rgba(255,159,26,.35);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px;
}
.boost-bar .grow { flex: 1; min-width: 140px; }
.boost-bar .bar { height: 5px; margin-top: 6px; }
.boost-bar .bar i { background: var(--accent); }
.boost-bar b { color: var(--accent); }

/* markdown in berichten */
.txt h1, .txt h2, .txt h3 { font-size: 14px; font-weight: 700; margin: 10px 0 5px; }
.txt p { margin: 0 0 8px; }
.txt p:last-child { margin-bottom: 0; }
.txt ul, .txt ol { margin: 6px 0 8px; padding-left: 20px; }
.txt li { margin-bottom: 3px; }
.txt code { background: var(--surface-3); padding: 1px 5px; border-radius: 4px;
            font-size: 12px; font-family: ui-monospace, monospace; }
.txt pre { background: var(--surface-3); padding: 10px; border-radius: 8px;
           overflow-x: auto; margin: 8px 0; }
.txt pre code { background: none; padding: 0; }
.txt a { color: var(--accent); }
.txt strong { font-weight: 650; color: var(--text); }
.txt em { font-style: italic; color: var(--muted); }
.txt blockquote { border-left: 2px solid var(--line); padding-left: 10px;
                  color: var(--muted); margin: 8px 0; }
.txt table { font-size: 12px; margin: 8px 0; }

.msg-meta { display: flex; gap: 10px; align-items: center; margin-top: 6px;
            font-size: 11px; color: var(--surface-3); flex-wrap: wrap; }
.msg-meta b { color: var(--muted); font-weight: 500; }

.reason { margin-top: 7px; }
.reason summary { cursor: pointer; font-size: 11.5px; color: var(--muted);
                  list-style: none; display: inline-flex; align-items: center; gap: 5px;
                  padding: 3px 8px; border-radius: 6px; background: var(--surface-2);
                  border: 1px solid var(--line); user-select: none; }
.reason summary::-webkit-details-marker { display: none; }
.reason summary:hover { color: var(--text); border-color: var(--accent); }
.reason[open] summary { margin-bottom: 6px; }
.reason .body { font-size: 12.5px; color: var(--muted); line-height: 1.65;
                border-left: 2px solid var(--line); padding: 2px 0 2px 10px; }
.reason ol { margin: 0; padding-left: 18px; }
.reason .kind { font-size: 10px; text-transform: uppercase; letter-spacing: .4px;
                color: var(--surface-3); margin-bottom: 4px; }

/* voorstel-kaart in de chat */
.proposal-card {
  margin-top: 8px; background: var(--accent-dim); border: 1px solid rgba(79,140,255,.35);
  border-radius: 10px; padding: 11px 12px;
}
.proposal-card .head { font-weight: 650; margin-bottom: 5px; }
.proposal-card .facts { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px;
                        color: var(--muted); }

/* command palette */
.palette-bg { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 150;
              backdrop-filter: blur(4px); padding-top: 12vh; }
.palette { max-width: 540px; margin: 0 auto; background: var(--surface);
           border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
           box-shadow: 0 24px 70px rgba(0,0,0,.6); }
.palette input { width: 100%; border: none; background: none; padding: 15px 16px;
                 font-size: 15px; margin: 0; border-radius: 0;
                 border-bottom: 1px solid var(--line); }
.palette input:focus { outline: none; }
.palette .results { max-height: 55vh; overflow-y: auto; }
.palette .row { display: flex; align-items: center; gap: 10px; padding: 10px 16px;
                cursor: pointer; font-size: 13.5px; }
.palette .row.sel { background: var(--accent-dim); }
.palette .row .k { margin-left: auto; font-size: 10.5px; color: var(--surface-3);
                   border: 1px solid var(--line); padding: 1px 6px; border-radius: 4px; }
.palette .row .d { color: var(--muted); font-size: 11.5px; }
.palette .foot { padding: 8px 16px; border-top: 1px solid var(--line); font-size: 11px;
                 color: var(--surface-3); display: flex; gap: 12px; }

/* skeletons */
.skel { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%,
        var(--surface-2) 75%); background-size: 200% 100%;
        animation: shimmer 1.4s infinite; border-radius: 6px; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skel-card { height: 96px; border-radius: var(--radius); }
.skel-line { height: 12px; margin-bottom: 8px; }

.empty-rich { padding: 32px 20px; text-align: center; color: var(--muted); }
.empty-rich .ic { width: 30px; height: 30px; opacity: .35; margin-bottom: 10px; }
.empty-rich .t { font-size: 14px; color: var(--text); font-weight: 600;
                 margin-bottom: 5px; }
.empty-rich .s { font-size: 12.5px; line-height: 1.6; max-width: 380px;
                 margin: 0 auto; }

/* ---------------------------------------------------------- papierrekening */
.paper-card { margin: 14px 0 4px; border-left: 3px solid var(--accent); }
.paper-card.live-mode { border-left-color: var(--amber); }
.paper-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 12px; margin: 12px 0 8px;
}
.pstat { display: flex; flex-direction: column; gap: 2px; }
.pstat label {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted);
}
.pstat span { font-variant-numeric: tabular-nums; font-weight: 650; font-size: 17px; }
.pstat span.pos { color: var(--green); }
.pstat span.neg { color: var(--red); }
.pstat span.muted { color: var(--muted); }
.paper-card .hint { margin: 4px 0 10px; }

/* ---------------------------------------------------------- sync-status */
.sync-status {
  display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px;
  border-radius: var(--radius); margin: 10px 0; font-size: 12.5px; line-height: 1.6;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--muted);
}
.sync-status:empty { display: none; }
.sync-status .ic { flex: 0 0 16px; margin-top: 2px; }
.sync-status.ok { background: var(--accent-dim); border-color: rgba(79,140,255,.3);
                  color: var(--text); }
.sync-status.ok .ic { color: var(--accent); }
.sync-status.bad { background: rgba(255,159,26,.1); border-color: rgba(255,159,26,.32);
                   color: var(--text); }
.sync-status.bad .ic { color: var(--amber); }

/* ---------------------------------------------------------- voorstel */
.proposal { border-left: 3px solid var(--accent); margin: 14px 0; }
.proposal .paper-stats { margin: 14px 0 10px; }
.proposal-body {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 13px 15px; margin: 6px 0 12px;
  line-height: 1.7; font-size: 13.5px;
}
.proposal-body p { margin: 0 0 8px; }
.proposal-body p:last-child { margin-bottom: 0; }
.proposal .btn-row button { flex: 1 1 auto; justify-content: center; min-height: 42px; }

/* ---------------------------------------------------------------- kalender
   Zeven kolommen, altijd. Vier op de telefoon zou een week onleesbaar maken en de
   vorm van je maand is precies wat je hier komt halen. De cellen krimpen mee; wat als
   eerste wegvalt is het aantal trades, daarna de dagnaam. Het bedrag blijft staan. */
.kal-kop { margin: 14px 0 10px; }
.kal-kop b { font-size: 17px; }

.kal-top {
  display: grid; gap: 10px; margin-bottom: 16px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.kal-kaart {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 13px 15px;
}
.kal-kaart label {
  display: block; font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 5px;
}
.kal-kaart .groot { font-size: 25px; font-weight: 650; line-height: 1.1; }
.kal-balk {
  height: 8px; border-radius: 99px; background: var(--surface-3);
  overflow: hidden; margin-top: 10px;
}
.kal-balk i { display: block; height: 100%; background: var(--green); border-radius: 99px; }
.kal-doelrij {
  display: flex; justify-content: space-between;
  font-size: 12px; color: var(--muted); margin-top: 7px;
}

.kal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.kal-dagnaam {
  text-align: center; font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em; padding-bottom: 3px;
}
.kal-cel {
  position: relative; overflow: hidden;
  border-radius: var(--radius-sm); padding: 8px 7px; min-height: 70px;
  display: flex; flex-direction: column; justify-content: space-between;
  border: 1px solid var(--line); background: var(--surface);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.kal-cel.leeg { background: transparent; border-color: transparent; }
.kal-cel.stil { opacity: .38; }

/* De intensiteit volgt de omvang van de dag, niet alleen het teken. Een dag van +€500
   naast een dag van +€5 in exact dezelfde tint maakt de kalender een tabel met kleurtjes;
   de vórm van je maand is juist wat je hier komt halen. De sterkte wordt in JS gezet als
   --kracht, tussen 0,18 en 1. */
.kal-cel.winst {
  background: rgba(46,189,133, calc(.06 + var(--kracht, .5) * .26));
  border-color: rgba(46,189,133, calc(.20 + var(--kracht, .5) * .45));
}
.kal-cel.verlies {
  background: rgba(246,70,93, calc(.06 + var(--kracht, .5) * .24));
  border-color: rgba(246,70,93, calc(.20 + var(--kracht, .5) * .45));
}
.kal-cel.winst::after, .kal-cel.verlies::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
}
.kal-cel.winst::after { background: var(--green); }
.kal-cel.verlies::after { background: var(--red); }

.kal-cel.klikbaar { cursor: pointer; }
.kal-cel.klikbaar:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-1);
  border-color: var(--accent);
}
.kal-cel.vandaag { outline: 2px solid var(--accent); outline-offset: -2px; }
.kal-cel.vandaag .kal-nr { color: var(--accent); font-weight: 700; }
.kal-nr { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.kal-bedrag {
  font-size: 13px; font-weight: 650; line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.kal-aantal { font-size: 10px; color: var(--muted); }

/* Een streepje per trade, zoals de stipjes op een agenda. Bij één oogopslag zie je of
   een goede dag uit één trade kwam of uit acht — en dat is een ander systeem. */
.kal-stipjes { display: flex; gap: 2px; margin-top: 3px; }
.kal-stipjes i {
  display: block; height: 2px; flex: 1 1 auto; max-width: 7px;
  border-radius: 99px; background: currentColor; opacity: .55;
}

/* De weekrand: zaterdag en zondag iets rustiger, zodat de werkweek eruit springt. */
.kal-grid > .kal-cel:nth-child(7n+6),
.kal-grid > .kal-cel:nth-child(7n) { filter: saturate(.85); }

.kal-maanden {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}

@media (max-width: 640px) {
  .kal-cel { min-height: 54px; padding: 6px 4px; }
  .kal-bedrag { font-size: 11px; }
  .kal-aantal { display: none; }
  .kal-kaart .groot { font-size: 21px; }
}

/* ------------------------------------------------------- grafiek in een trade
   De loader staat er tot de candles binnen zijn. Een leeg vak dat drie tellen niets
   doet, leest als stuk; een draaiend rondje leest als "hij komt eraan". */
.grafiek-vak { position: relative; min-height: 190px; }
.grafiek-loader {
  position: absolute; inset: 0; display: flex; gap: 10px;
  align-items: center; justify-content: center;
  color: var(--muted); font-size: 13px;
}
.spin {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--accent);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* De algemene reduced-motion-regel staat onderaan dit bestand en zet álles uit.
   Deze regel is vervangen door die — een halve uitzondering maakt de voorkeur
   betekenisloos. */

@media (max-width: 640px) { .grafiek-vak { min-height: 150px; } }

/* ------------------------------------------------------------------- groepschat
   De bubbels waren functioneel maar vlak: zes agents met dezelfde grijstint, en
   niets dat laat zien wie er aan het woord is zonder de naam te lezen. Dit gebruikt
   de kleur die elke agent toch al heeft. */
.msg > .body {
  border-left: 2px solid transparent;
  box-shadow: var(--shadow-1);
}
.msg > .body[style*="--agent"] { border-left-color: var(--agent, transparent); }
.msg .who { display: flex; align-items: center; gap: 6px; }
.msg .who .rol {
  font-weight: 500; color: var(--muted); opacity: .8;
  font-size: 10.5px; letter-spacing: .02em;
}
.msg .who time { margin-left: auto; font-weight: 400; opacity: .65; font-size: 10.5px; }

/* Jouw eigen berichten rechts uitgelijnd, zoals in elke chat die je kent. Dat is niet
   alleen gewoonte: het scheelt lezen wie wat zei. */
.msg.me { flex-direction: row-reverse; }
.msg.me > .body {
  border-radius: 12px 4px 12px 12px;
  border-left-color: transparent; border-right: 2px solid var(--accent);
}
.msg.me .who { flex-direction: row-reverse; }
.msg.me .who time { margin-left: 0; margin-right: auto; }
.msg.me .txt { text-align: left; }

/* Een bericht dat een blokkade of een waarschuwing is, valt op zonder te schreeuwen. */
.msg.blokkade > .body {
  border-left-color: var(--red);
  background: linear-gradient(90deg, rgba(246,70,93,.08), transparent 40%);
}
.msg.voorstel > .body {
  border-left-color: var(--green);
  background: linear-gradient(90deg, rgba(46,189,133,.08), transparent 40%);
}

/* Datumscheiding in de chat: zonder dit lees je 's ochtends een gesprek van gisteren
   alsof het net is gebeurd. */
.chat-dag {
  display: flex; align-items: center; gap: 10px;
  margin: 16px 2px 10px; color: var(--muted); font-size: 11px;
  text-transform: uppercase; letter-spacing: .06em;
}
.chat-dag::before, .chat-dag::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

@media (max-width: 640px) {
  .msg > .body { max-width: 100%; padding: 8px 11px 9px; }
  .msg .who time { display: none; }
}


/* ----------------------------------------------------------- instellingen mobiel
   Twaalf tabjes in een horizontaal schuifbalkje: je ziet niet waar je bent, niet wat
   er nog meer is, en je moet zijwaarts vegen op een scherm waar je verticaal veegt.
   Op de telefoon wordt het één knop die een lijst opent — mét de omschrijving erbij,
   want "Finetunen" zegt niets als je niet weet wat eronder valt. */
.settings-kiezer { display: none; }

.sheet {
  position: fixed; inset: 0; z-index: 60; display: grid; align-items: end;
  background: rgba(4,7,11,.62); backdrop-filter: blur(3px);
  animation: sheet-in .16s ease;
}
@keyframes sheet-in { from { opacity: 0; } to { opacity: 1; } }
.sheet-kaart {
  background: var(--surface); border-top: 1px solid var(--line);
  border-radius: 16px 16px 0 0; padding: 16px 16px calc(16px + var(--safe-b));
  max-height: 78vh; overflow-y: auto;
  animation: sheet-up .2s cubic-bezier(.2,.8,.3,1);
}
@keyframes sheet-up { from { transform: translateY(14px); } to { transform: none; } }
.sheet-lijst { display: grid; gap: 6px; margin-top: 12px; }
.sheet-lijst button {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 11px 13px; color: var(--text);
  font-family: inherit; font-size: 14px;
}
.sheet-lijst button.active {
  border-color: var(--accent); background: var(--accent-dim);
}
.sheet-lijst button i {
  display: block; font-style: normal; font-size: 12px;
  color: var(--muted); margin-top: 3px; line-height: 1.45;
}
.sheet-lijst button b.telt {
  float: right; font-size: 11px; color: var(--muted); font-weight: 500;
}

/* De werkbalk boven de instellingen: één rij, niet groter dan zijn inhoud.
   Zonder expliciete flex viel hij terug op blokgedrag en werd hij op een smal
   scherm een pagina vol zwevende elementen. */
.settings-toolbar { display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; margin: 10px 0 12px; }
.search-wrap { display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 12px; }
.search-wrap .ic { width: 16px; height: 16px; color: var(--muted); flex: 0 0 auto; }
.search-wrap input { flex: 1; min-width: 0; background: none; border: none;
  color: var(--text); font-family: inherit; font-size: 14px; outline: none; }
.settings-toolbar .search-wrap { flex: 1 1 240px; min-width: 0; }
.settings-toolbar .seg, .settings-toolbar .check { flex: 0 0 auto; margin: 0; }

/* Ademruimte onder de laatste kaart, precies zo groot als de opslaan-balk —
   anders valt die over de onderste instelling heen en kun je hem niet lezen. */
#tab-settings { padding-bottom: 96px; }
#tab-settings .save-bar { margin-bottom: 0; }

@media (max-width: 760px) {
  /* Alleen de instellingen-navigatie verdwijnt hier — die heeft de kiezer als
     vervanger. De balken van Leren, Scalpen en de Handleiding hebben niets
     anders en bleven maandenlang onzichtbaar op de telefoon. */
  #settings-nav { display: none; }
  #tab-settings { padding-bottom: 128px; }
  /* Elke instellingen-kaart mag krimpen; niets steekt uit, niets wordt afgekapt. */
  #tab-settings .card { min-width: 0; overflow-x: hidden; }
  #tab-settings input, #tab-settings select { max-width: 100%; }
  #tab-settings .agent-row { grid-template-columns: 1fr; }
  .settings-kiezer {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; margin: 12px 0; padding: 12px 14px; cursor: pointer;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 11px; color: var(--text); font-family: inherit; text-align: left;
    position: sticky; top: 8px; z-index: 5;
  }
  .settings-kiezer b { display: block; font-size: 15px; }
  .settings-kiezer i {
    display: block; font-style: normal; font-size: 11.5px;
    color: var(--muted); margin-top: 2px;
  }
  /* De zoekbalk en de niveauschakelaar onder elkaar in plaats van naast elkaar:
     naast elkaar wordt het zoekveld zo smal dat je je eigen woord niet meer ziet. */
  .settings-toolbar { flex-direction: column; align-items: stretch; gap: 8px; }
  .settings-toolbar .search-wrap { width: 100%; }
}


/* ------------------------------------------------------------------- potjes
   Hoeveel er in elk potje open staat. Stond nergens, dus ontdekte je het maximum
   pas op het moment dat een trade erop stukliep. */
.potjes {
  display: grid; gap: 8px; margin: 4px 0 14px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.potje {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 10px 12px;
}
.potje label {
  display: block; font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 3px;
}
.potje b { font-size: 20px; font-variant-numeric: tabular-nums; }
.potje b span { font-size: 13px; color: var(--muted); font-weight: 500; }
.potje-balk {
  height: 4px; border-radius: 99px; background: var(--surface-3);
  overflow: hidden; margin: 7px 0 5px;
}
.potje-balk i { display: block; height: 100%; background: var(--accent); }
.potje.vol { border-color: rgba(255,159,26,.45); }
.potje.vol .potje-balk i { background: var(--amber); }


/* ------------------------------------------------------------- gezondheid
   De staat van het systeem in vijf vakken. Alles wat eronder staat legt uit waarom;
   dit is de regel die je leest terwijl je koffie inschenkt. */
.gezondheid {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px 16px; margin-bottom: 18px;
}
.gezondheid.let-op { border-color: rgba(255,159,26,.45); }
.gz-kop {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.gz-kop b { font-size: 15px; }

.gz-rij {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.gz-vak {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 11px 12px 12px 14px;
}
.gz-vak::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--line);
}
.gz-vak label {
  display: block; font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 4px;
}
.gz-vak b { font-size: 16px; font-variant-numeric: tabular-nums; }
.gz-teken {
  position: absolute; right: 10px; top: 9px;
  font-size: 12px; font-weight: 700; opacity: .8;
}

.gz-goed::before { background: var(--green); }
.gz-goed .gz-teken { color: var(--green); }
.gz-slecht::before { background: var(--red); }
.gz-slecht .gz-teken { color: var(--red); }
.gz-slecht { background: rgba(246,70,93,.07); border-color: rgba(246,70,93,.32); }
.gz-stil::before { background: var(--surface-3); }
.gz-stil { opacity: .72; }
.gz-stil .gz-teken { color: var(--muted); }

.gz-waarom {
  margin: 10px 0 0; padding-left: 13px; border-left: 2px solid var(--red);
  color: var(--muted); font-size: 12.5px; line-height: 1.55;
}

@media (max-width: 640px) {
  .gz-rij { grid-template-columns: repeat(2, 1fr); }
  .gz-vak b { font-size: 15px; }
}

/* ------------------------------------------------------- kaarten op een rij
   Statistiek en Open trades stapelen kaarten. Zonder een kopstijl leest dat als een
   pagina zonder hiërarchie: alles even zwaar, dus niets valt op. */
.card.wide > b:first-child {
  display: block; font-size: 14.5px; margin-bottom: 3px;
}
.card.wide > b:first-child + .hint { margin-top: 0; margin-bottom: 12px; }

/* Tabellen in die kaarten: rustiger lijnen, en getallen die uitlijnen. */
.card.wide table { font-variant-numeric: tabular-nums; }
.card.wide table th {
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line);
  padding-bottom: 7px;
}
.card.wide table td { padding: 9px 10px 9px 0; vertical-align: top; }
.card.wide table tr + tr td { border-top: 1px solid rgba(255,255,255,.04); }
.card.wide table td .hint { display: block; margin-top: 2px; line-height: 1.45; }

/* Een pil is een status, geen knop. Iets kleiner en rustiger dan de rest. */
.pill { font-variant-numeric: tabular-nums; letter-spacing: .01em; }

/* Lege staat: zeg wat er nog moet gebeuren, niet dat er niets is. */
.leeg-uitleg {
  display: flex; gap: 10px; align-items: flex-start;
  color: var(--muted); font-size: 13px; line-height: 1.55;
  padding: 14px; border: 1px dashed var(--line); border-radius: var(--radius-sm);
}

/* ------------------------------------------------------- levende cijfers (2.4) */
/* Het kleur-tikje bij een cijfer dat verandert. Halve seconde en weer weg —
   genoeg om te zien dát het leeft, te kort om af te leiden. */
@keyframes tik-op   { 0% { color: var(--pos); } 100% { color: inherit; } }
@keyframes tik-neer { 0% { color: var(--neg); } 100% { color: inherit; } }
.tik-op   { animation: tik-op   0.5s ease-out; }
.tik-neer { animation: tik-neer 0.5s ease-out; }

/* Tabwissel en verschijnende kaarten: één korte fade met een klein schuifje.
   100-150 ms en CSS-only — een dashboard is geen film. */
@keyframes paneel-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
.panel.active { animation: paneel-in 0.12s ease-out; }
.card { transition: border-color 0.15s ease; }

/* Wie geen animaties wil, krijgt ze niet. Alles, niet een selectie — een halve
   uitzondering hier is precies hoe zo'n voorkeur betekenisloos wordt. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ------------------------------------------------- settings-zijbalk op desktop */
/* De sectiekiezer bestond alleen op mobiel; op een breed scherm stond een rij
   tabjes die bij twaalf secties niet meer te overzien is. */
@media (min-width: 1100px) {
  #tab-settings.panel.active { display: grid; grid-template-columns: 210px 1fr;
    gap: 0 18px; align-items: start; }
  /* Alles wat geen zijbalk is, staat rechts. De banners en het zoekveld lopen over de
     volle breedte, want die horen boven beide kolommen. */
  #tab-settings > *:not(#settings-nav) { grid-column: 2; }
  #tab-settings > #herstel-banner, #tab-settings > .lock-banner,
  #tab-settings > #settings-zoekvak { grid-column: 1 / -1; }
  #settings-nav.subnav { grid-column: 1; grid-row: span 30; }
  #settings-nav.subnav {
    flex-direction: column; align-items: stretch; position: sticky; top: 70px;
    align-self: start; border-right: 1px solid var(--line); padding-right: 10px;
  }
  #settings-nav .sub { text-align: left; }
}

#settings-zoekvak { margin: 0 0 10px; }
#settings-zoekvak input {
  width: 100%; max-width: 420px;
}
.zoek-treffers { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.zoek-treffer {
  text-align: left; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--panel); cursor: pointer;
  font: inherit; color: inherit;
}
.zoek-treffer:hover { border-color: var(--accent); }
.zoek-treffer .pad { color: var(--muted); font-size: 12px; }
.veld-gevonden { outline: 2px solid var(--accent); outline-offset: 3px;
                 border-radius: 4px; }

/* ------------------------------------------------- het handelsthema (2.5) */
/* Cijfers zijn het product. Eén monospace-stack met tabular-nums voor alles wat een
   koers, bedrag of percentage is — kolommen die dansen bij elke update lezen als
   ruis, en dit is precies waarom elk handelsplatform zijn cijfers zo zet. */
.mono, .num, .stat span, .open-pnl, td.mono, .pot-head + .num,
.price-card .prijs, .vermogen-blok, #top-equity, #top-today, #top-total, #top-budget {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
               "Liberation Mono", monospace;
  font-variant-numeric: tabular-nums;
}
.num { font-size: 15px; font-weight: 700; letter-spacing: -.2px; }

/* De topbalk-strip zoals een handelsplatform hem zet: het label klein kapitaal in
   zilver erboven, het getal eronder — je leest eerst het getal. */
.stat { display: flex; flex-direction: column; gap: 1px; }
.stat label { color: var(--zilver); }

/* Diepte uit vlakken: een verloop van 2-3% lichter bovenaan geeft het paneelgevoel
   zonder één afbeelding. De rand wordt stiller; het vlak doet het werk. */
.card {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--surface) 94%, white) 0%, var(--surface) 42px);
  border-color: var(--line);
}
@supports not (background: color-mix(in srgb, red, white)) {
  .card { background: var(--surface); }
}

/* De live-stip krijgt een ademende gloed zolang de verbinding staat. Twee seconden
   per cyclus — aanwezig zonder te vragen om aandacht. */
@keyframes leef { 0%, 100% { box-shadow: 0 0 4px var(--green); }
                  50% { box-shadow: 0 0 11px var(--green); } }
.dot.live { animation: leef 2s ease-in-out infinite; }

/* Dunne zilvergrijze scrollbars — het detail dat een site af maakt. */
* { scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: var(--zilver); }
*::-webkit-scrollbar-track { background: transparent; }

/* Actieve navigatie: goud, met het balkje links dat er al was. */
.tab.active { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ------------------------------------------------- muntjes bij gesloten winst */
/* Drie muntjes die uit de P&L-regel omhoog dwarrelen en vervagen. Alleen bij een
   trade die met winst SLUIT — nooit bij een openstaande plus, want een open winst is
   geen winst, en een dashboard dat je leert open posities als resultaat te lezen is
   een dashboard dat geld kost. Bij verlies: alleen het rode tikje dat er al is.
   Verlies aankleden is fout, maar verlies stil laten en winst vieren zónder maat is
   ook sturing — vandaar: klein, één keer, 700 ms, klaar. */
.munt {
  position: fixed; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f4d97b, var(--accent) 60%, #8a6a1d);
  border: 1px solid #8a6a1d; pointer-events: none; z-index: 90;
  animation: munt-op 0.7s ease-out forwards;
}
@keyframes munt-op {
  0%   { opacity: 0; transform: translateY(0) scale(.6); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-46px) scale(1) rotate(18deg); }
}

/* ------------------------------------------------- de laatste tien procent (2.6) */
/* Typografisch ritme: één schaal. De paginakop met zijn zilveren onderregel als één
   blok — kop en uitleg horen bij elkaar. */
.panel > h2:first-of-type { font-size: 20px; font-weight: 700; margin-top: 8px; }
.hint { font-size: 12.5px; }
.hero-value {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 27px; letter-spacing: -.6px;
}

/* De dagpil naast het vermogen: richting in kleur én in een teken. */
.dagpil {
  display: inline-flex; align-items: center; gap: 4px; vertical-align: middle;
  margin-left: 10px; padding: 3px 10px; border-radius: 20px;
  font-size: 12.5px; font-weight: 650; font-variant-numeric: tabular-nums;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.dagpil.pos { background: rgba(46,189,133,.14); color: var(--green); }
.dagpil.neg { background: rgba(246,70,93,.14); color: var(--red); }

/* Pillen en badges op één maat, overal. */
.pill, .badge {
  height: 18px; display: inline-flex; align-items: center;
  font-size: 10.5px; border-radius: 20px; line-height: 1;
}

/* Knoppen in een rij altijd even hoog; ghost bij hover een zilveren rand. */
.btn-row button { min-height: 34px; }
button.ghost:hover { border-color: var(--zilver); background: transparent; }

/* Toasts: onderaan, donker vlak, 1px rand in de betekeniskleur, schuiven 8px op. */
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); }
                      to   { opacity: 1; transform: translate(-50%, 0); } }
.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--green); border-radius: 10px;
  padding: 10px 16px; z-index: 200; font-size: 13px; max-width: 88vw;
  text-align: center; box-shadow: var(--shadow-2);
  display: flex; align-items: center; gap: 8px;
  animation: toast-in 0.15s ease-out;
}
.toast.bad { border-color: var(--red); }
.toast .ic { color: var(--green); }
.toast.bad .ic { color: var(--red); }

/* Modals: donkerder achterscherm, en de signatuur van het thema — één dunne goudlijn
   bovenlangs. Eén plek per dialoog, nergens anders herhaald. */
.modal-bg { background: rgba(0,0,0,.7); }
.modal { box-shadow: var(--shadow-2); border-top: 1px solid var(--accent);
         border-top-left-radius: 6px; border-top-right-radius: 6px; }

/* Lege staten: één patroon. Een groot grijs icoon, wat dit scherm gaat tonen, en wat
   er moet gebeuren voordat het er staat. Geen kale tekst meer. */
.leeg-staat {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 34px 20px; text-align: center; color: var(--muted);
}
.leeg-staat .ic { width: 34px; height: 34px; opacity: .45; stroke-width: 1.5; }
.leeg-staat b { color: var(--text); font-weight: 600; font-size: 13.5px; }
.leeg-staat span { font-size: 12.5px; max-width: 380px; line-height: 1.55; }

/* ------------------------------------------------- situatiekamer */
.situatie-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px; margin-bottom: 14px; }
.sit-kaart { border-top: 2px solid var(--line); }
.sit-kaart.kans { border-top-color: var(--green); }
.sit-kaart.weg { border-top-color: var(--red); }
.sit-kop { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sit-kop b { flex: 1; font-size: 15px; }
.sit-ic { width: 20px; height: 20px; color: var(--gold, var(--accent)); }
.sit-feiten { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 8px 0; }
.sit-feiten label { display: block; font-size: 11px; color: var(--muted); }
.sit-waarom { margin: 6px 0; }
.sit-raad { margin: 8px 0; padding: 8px 10px; border-left: 2px solid var(--gold, var(--accent));
  background: var(--bg-soft, rgba(255,255,255,.03)); border-radius: 0 6px 6px 0; }
.sit-kal { font-size: 12px; padding: 2px 0; }
.sit-msg { margin: 8px 0; } .sit-msg p { margin: 2px 0 0; white-space: pre-wrap; }

/* ------------------------------------------------- draaiboek */
.draaiboek-grid { display: grid; gap: 10px; }
.db-kaart summary { cursor: pointer; display: block; }
.db-kop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.db-cijfers { margin-top: 4px; font-size: 13px; color: var(--muted); }
.db-voorbeelden { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.db-voorbeelden > div > label { font-size: 11px; color: var(--muted); text-transform: uppercase; }
.db-trade { display: flex; gap: 8px; align-items: baseline; padding: 3px 0;
  border-bottom: 1px solid var(--line); font-size: 13px; cursor: pointer; }
.db-trade:last-child { border-bottom: 0; }
.db-trade .hint { flex: 1; text-align: right; }
@media (max-width: 700px) { .db-voorbeelden { grid-template-columns: 1fr; } }

/* ------------------------------------------------- wat-als-lab */
.watals-split { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 14px;
  align-items: start; }
@media (max-width: 860px) { .watals-split { grid-template-columns: 1fr; } }
.watals-groep { margin-bottom: 10px; }
.watals-groep > label { display: block; font-size: 11px; color: var(--muted);
  text-transform: uppercase; margin-bottom: 4px; }
.watals-slider { display: block; margin-top: 12px; font-size: 13px; }
.watals-slider input { width: 100%; margin-top: 4px; }
.watals-slider .hint { float: right; }
.watals-svg { width: 100%; height: 140px; display: block; }
.watals-voor { stroke: var(--muted); stroke-width: 1.4; opacity: .8; }
.watals-na { stroke: var(--green); stroke-width: 1.8; }
.watals-nul { stroke: var(--line); stroke-dasharray: 3 3; }
.watals-leg { display: inline-block; width: 14px; height: 3px; margin: 0 4px 2px 10px; }
.watals-leg.voor { background: var(--muted); }
.watals-leg.na { background: var(--green); }
.watals-vondst { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.watals-vondst:last-child { border-bottom: 0; }

/* ------------------------------------------------- agent-rapport + positieraad */
.agent-tile .rapport { font-size: 12px; margin: 4px 0; line-height: 1.5; }
.pr-stem { padding: 6px 0; border-bottom: 1px solid var(--line); }
.pr-stem:last-child { border-bottom: 0; }
.pr-stem p { margin: 2px 0 0; }


/* ------------------------------------------------- 2.15: verdieping */
.db-spark { display: inline-block; width: 90px; height: 26px; margin-left: 8px;
  vertical-align: middle; }
.db-spark .spark { width: 100%; height: 100%; }
.pr-bronnen { margin-top: 10px; }
.pr-bronnen summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.pr-bron { white-space: pre-wrap; font-size: 12px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px;
  margin: 6px 0 0; font-family: inherit; }


/* ------------------------------------------------- 2.16: afwerking */
/* Eén ritme: elke kaart reageert hetzelfde op aandacht. Subtiel — dit is een
   handelsterminal, geen speelgoed. */
.card { transition: border-color .18s ease, box-shadow .18s ease,
        transform .18s ease; }
.card:hover { border-color: var(--surface-3); }
button, .tab, .sub, .check, .pill { transition: background .15s ease,
        color .15s ease, border-color .15s ease, opacity .15s ease; }
button:not(:disabled):active { transform: translateY(1px); }

/* Zachte binnenkomst bij het wisselen van tab. De universele reduced-motion-
   regel bovenin zet dit vanzelf stil voor wie geen beweging wil. */
@keyframes paneel-in { from { opacity: 0; transform: translateY(4px); }
                       to { opacity: 1; transform: none; } }
.panel.active { animation: paneel-in .22s ease; }

/* Gevulde grafieken */
.watals-vul { fill: var(--green); opacity: .12; }

/* De lege staat: icoon, één zin, één knop. */
.empty.leeg { display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 32px 20px; }
.empty.leeg .leeg-ic { width: 28px; height: 28px; color: var(--muted);
  opacity: .7; }
.empty.leeg p { margin: 0; max-width: 420px; line-height: 1.55; }

/* Smalle schermen: 390 en 320 punten nagelopen. */
@media (max-width: 420px) {
  .paper-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card { padding: 12px; }
  .sit-feiten { grid-template-columns: 1fr 1fr; gap: 5px 10px; }
  .db-spark { width: 64px; }
}
@media (max-width: 340px) {
  .paper-stats { grid-template-columns: 1fr; }
  .sit-feiten { grid-template-columns: 1fr; }
  .btn-row button, .save-bar button { width: 100%; }
}

/* ------------------------------------------------- 2.17: de keuring */
.keur-rij { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 8px;
  padding: 12px 14px; }
.keur-rij p { margin: 2px 0 0; }
.keur-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px;
  flex: 0 0 auto; }
.keur-dot.groen { background: var(--green); }
.keur-dot.oranje { background: var(--amber, #e8a33d); }
.keur-dot.rood { background: var(--red); }
.keur-rij.rood { border-left: 2px solid var(--red); }
.keur-rij.oranje { border-left: 2px solid var(--amber, #e8a33d); }
.num.warn { color: var(--amber, #e8a33d); }
.hn-versie { margin: 6px 0; }
.hn-versie summary { cursor: pointer; padding: 6px 0; }


/* ------------------------------------------------- exchange-grade (2.28) */

/* Het grote grafiekpaneel: een overlay die de hele breedte pakt. */
.grafiek-paneel { position: fixed; inset: auto 0 0 0; top: 8vh; z-index: 1100;
  background: var(--bg, #0a0d12); border-top: 1px solid var(--goud, #d4a537);
  padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 12px);
  box-shadow: 0 -12px 40px rgba(0,0,0,.6); display: flex; flex-direction: column; }
.grafiek-kop { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.gp-tfs { display: flex; gap: 4px; }
.gp-tfs .mini.actief { border-color: var(--goud, #d4a537); color: var(--goud, #d4a537); }
.gp-chart { flex: 1; position: relative; min-height: 0; }
#gp-canvas { width: 100%; transition: opacity .18s ease; }
.gp-chart.laadt #gp-canvas { opacity: .35; }
.gp-overlay { z-index: 2; }

/* De ticker-tape: pure CSS-animatie, pauzeert op aanwijzen. */
.tape { overflow: hidden; white-space: nowrap; background: var(--bg2, #12151b);
  border-bottom: 1px solid var(--line, #1e222b); font-size: .85em; height: 30px; }
.tape-band { display: inline-block; padding-left: 100%;
  animation: tape-loop 45s linear infinite; }
.tape:hover .tape-band { animation-play-state: paused; }
@keyframes tape-loop { to { transform: translateX(-50%); } }
.tape-item { display: inline-flex; gap: 6px; align-items: center;
  padding: 0 18px; height: 30px; cursor: pointer; }
.tape-item .mono { font-variant-numeric: tabular-nums; }

/* Prijsflitsen op de marktkaarten: één korte oplichting per verandering. */
@keyframes flits-op   { 0% { background: rgba(53,208,127,.28); } 100% { background: transparent; } }
@keyframes flits-neer { 0% { background: rgba(255,92,92,.28); }  100% { background: transparent; } }
.price-card.flits-op   .val { animation: flits-op .8s ease-out; border-radius: 4px; }
.price-card.flits-neer .val { animation: flits-neer .8s ease-out; border-radius: 4px; }
.price-card { cursor: pointer; }

/* De positiebalk: één regel onderin, uitklapbaar. */
.positiebalk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  background: var(--bg2, #12151b); border-top: 1px solid var(--line, #1e222b); }
.pb-kop { width: 100%; display: flex; gap: 12px; align-items: center;
  background: none; border: 0; color: inherit; padding: 8px 16px;
  cursor: pointer; font: inherit; }
.pb-pijl { margin-left: auto; transition: transform .2s; }
.positiebalk:not(.dicht) .pb-pijl { transform: rotate(180deg); }
.positiebalk.dicht .pb-lijst { display: none; }
.pb-lijst { max-height: 40vh; overflow: auto; padding: 0 16px 10px; }
.pb-rij { display: flex; gap: 12px; align-items: center; padding: 6px 0;
  border-top: 1px solid var(--line, #1e222b); }
body.heeft-positiebalk main, body.heeft-positiebalk .panel { padding-bottom: 52px; }

/* De dichtheid: compact is het terminalgevoel — alleen weergave. */
@media (min-width: 900px) {
  body.compact { font-size: 13px; }
  body.compact .card { padding: 10px 12px; }
  body.compact td, body.compact th { padding: 4px 8px; }
  body.compact .panel { padding: 12px 14px; }
  body.compact .price-card { padding: 8px 10px; }
}

/* Smal scherm: tape en positiebalk verdwijnen — daar telt elke pixel. */
@media (max-width: 480px) {
  .tape { display: none; }
}
@media (max-width: 360px) {
  .positiebalk { display: none; }
}

/* ---- de grote proef en de uitsplitsing (2.30) ---- */
.gp-tabellen { display: flex; flex-wrap: wrap; gap: 14px; margin: 8px 0; }
.mini-tabel { border-collapse: collapse; font-size: 12px; min-width: 170px; }
.mini-tabel caption { text-align: left; color: var(--muted); font-size: 11px;
  text-transform: uppercase; letter-spacing: .06em; padding-bottom: 3px; }
.mini-tabel th { color: var(--muted); font-weight: 500; text-align: right;
  padding: 2px 7px; }
.mini-tabel td { padding: 2px 7px; border-top: 1px solid var(--line); }
.mini-tabel td.num { text-align: right; font-variant-numeric: tabular-nums; }
.mini-tabel tr.muted { color: var(--muted); }
#groteproef details { padding: 8px 10px; }
#groteproef summary::-webkit-details-marker { display: none; }
.r-curve { width: 100%; max-width: 560px; display: block; margin-top: 6px; }
.r-curve polyline { stroke: var(--accent); stroke-width: 1.6; }
.r-curve .nul { stroke: var(--line); stroke-dasharray: 3 3; }
.r-curve .dip { fill: var(--neg); }

/* ------------------------------------------------- de duimbalk (2.33)
   Alleen op smalle schermen. Op desktop bestaat hij simpelweg niet
   (display:none buiten de media-query), dus daar verandert er niets. */
.duimbalk { display: none; }
.meer-paneel { display: none; }

@media (max-width: 768px) {
  .duimbalk {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 950;
    display: flex; align-items: stretch;
    background: var(--surface, #12151b);
    border-top: 1px solid var(--line, #1e222b);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -8px 24px rgba(0,0,0,.35);
  }
  .db-knop {
    flex: 1 1 0; min-height: 52px; position: relative;
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 3px;
    background: none; border: 0; color: var(--muted); font: inherit;
    font-size: 10.5px; cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: transform .12s ease, color .15s ease;
  }
  .db-knop .ic { width: 21px; height: 21px; }
  .db-knop.actief { color: var(--accent, #d4a537); }
  .db-knop:active { transform: scale(.92); }
  @media (prefers-reduced-motion: reduce) {
    .db-knop, .db-knop:active { transition: none; transform: none; }
  }
  .db-knop .nav-badge { position: absolute; top: 5px; left: calc(50% + 6px); }

  /* Alles wat onderaan leeft schuift op. */
  main { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  .positiebalk { bottom: calc(52px + env(safe-area-inset-bottom, 0px)); }
  .toast { bottom: calc(126px + env(safe-area-inset-bottom, 0px)); }
  /* Eén systeem: de duimbalk vervangt de burger-lade op de telefoon. */
  .burger { display: none !important; }

  /* Het Meer-paneel: een blad dat van onderen opschuift. */
  .meer-paneel { display: block; position: fixed; inset: 0; z-index: 1050; }
  .meer-paneel[hidden] { display: none; }
  .meer-achter { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
  .meer-blad {
    position: absolute; left: 0; right: 0;
    bottom: calc(52px + env(safe-area-inset-bottom, 0px));
    background: var(--surface, #12151b);
    border-top: 1px solid var(--line, #1e222b);
    border-radius: 14px 14px 0 0; padding: 8px 14px 16px;
    max-height: 62vh; overflow-y: auto;
    animation: meer-op .18s ease-out;
  }
  @keyframes meer-op { from { transform: translateY(24px); opacity: .6; } }
  @media (prefers-reduced-motion: reduce) { .meer-blad { animation: none; } }
  .meer-greep { width: 36px; height: 4px; border-radius: 2px; margin: 4px auto 10px;
    background: var(--line, #1e222b); }
  .meer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .meer-item {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    min-height: 64px; justify-content: center; border: 0; background: none;
    color: var(--text, #e8e6e0); font: inherit; font-size: 10.5px;
    border-radius: 10px; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .meer-item:active { background: var(--surface-2, #1a1e26); }
  .meer-item .ic { width: 21px; height: 21px; color: var(--muted); }
  .meer-item span { text-align: center; line-height: 1.2; }
}

/* ---- de diagnosekamer (2.34) ---- */
.dokter-kaart { border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 10px; background: var(--surface); }
.dokter-kaart.rood { border-left: 3px solid var(--red); }
.dokter-kaart.oranje { border-left: 3px solid var(--amber, #e8a33d); }
.dokter-kaart.groen { border-left: 3px solid var(--green); }
.dokter-kaart .dk-kop { display: flex; gap: 8px; align-items: center;
  margin-bottom: 4px; }
.dokter-kaart p { margin: 4px 0; line-height: 1.5; }
.dk-fix { color: var(--accent, #d4a537); }
.dokter-grid { display: grid; grid-template-columns: repeat(auto-fit,
  minmax(160px, 1fr)); gap: 8px 14px; }
.dokter-agents .da-rij { display: flex; gap: 10px; align-items: baseline;
  padding: 4px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.dokter-agents .da-rij:last-child { border-bottom: 0; }
.tr-rij { display: flex; gap: 10px; align-items: center; padding: 3px 0; }
.tr-label { flex: 0 0 200px; font-size: 12.5px; }
.tr-balk { flex: 1; height: 10px; background: var(--surface-2);
  border-radius: 5px; overflow: hidden; }
.tr-balk i { display: block; height: 100%; background: var(--accent, #d4a537);
  border-radius: 5px; }
.tr-num { flex: 0 0 44px; text-align: right;
  font-variant-numeric: tabular-nums; }
.tr-af { flex: 0 0 44px; color: var(--red); text-align: right;
  font-variant-numeric: tabular-nums; font-size: 12px; }
@media (max-width: 640px) { .tr-label { flex-basis: 110px; } }

/* ---- de dokter wordt specialist (2.35) ---- */
.dokter-held { display: flex; gap: 14px; align-items: center;
  padding: 18px 20px; margin-bottom: 14px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line); }
.dokter-held.rood { border-color: var(--red); }
.dokter-held.oranje { border-color: var(--amber, #e8a33d); }
.dokter-held.groen { border-color: var(--green); }
.dh-dot { width: 16px; height: 16px; border-radius: 50%; flex: 0 0 auto; }
.dh-dot.groen { background: var(--green);
  animation: dh-puls 2.2s ease-in-out infinite; }
.dh-dot.oranje { background: var(--amber, #e8a33d);
  animation: dh-puls 1.4s ease-in-out infinite; }
.dh-dot.rood { background: var(--red);
  animation: dh-puls .8s ease-in-out infinite; }
@keyframes dh-puls { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .dh-dot { animation: none; } }
.dh-tekst { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dh-tekst b { font-size: 16.5px; }
.dh-tekst span { color: var(--muted); font-size: 13px; line-height: 1.45; }
.dh-tijd { margin-left: auto; flex: 0 0 auto; }
@media (max-width: 640px) { .dh-tijd { display: none; } }

.dokter-kaart .ghost.mini { margin-top: 6px; }

.pols-grid { display: grid; grid-template-columns: repeat(auto-fill,
  minmax(170px, 1fr)); gap: 8px; }
.pols-item { display: flex; gap: 8px; align-items: center; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 8px; }
.pols-item.oranje { border-color: var(--amber, #e8a33d); }
.pols-item.rood { border-color: var(--red); }

.week-grid { display: flex; gap: 10px; align-items: flex-end; }
.week-dag { display: flex; flex-direction: column; align-items: center;
  gap: 3px; flex: 1; }
.week-staaf { position: relative; width: 100%; max-width: 46px; height: 84px;
  background: var(--surface-2); border-radius: 6px; overflow: hidden; }
.week-staaf i { position: absolute; bottom: 0; left: 0; right: 0;
  display: block; }
.week-staaf .wk-kand { background: var(--surface-3, #232834); }
.week-staaf .wk-ord { background: var(--accent, #d4a537); opacity: .9; }
.week-dag b { font-variant-numeric: tabular-nums; font-size: 13px; }

.dokter-agents.kaartjes { display: grid; grid-template-columns: repeat(
  auto-fill, minmax(210px, 1fr)); gap: 8px; }
.da-kaart { display: flex; gap: 10px; align-items: center; padding: 10px;
  border: 1px solid var(--line); border-radius: 10px; }
.da-kaart.ok { border-left: 3px solid var(--green); }
.da-kaart.mist { border-left: 3px solid var(--red); }
.da-avatar { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; font-weight: 600;
  background: var(--surface-2); color: var(--accent, #d4a537); }
.da-info { display: flex; flex-direction: column; gap: 1px; min-width: 0;
  font-size: 12.5px; }
.da-info .mono { overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }

/* ---- de dokter kijkt altijd mee (2.36) ---- */
.dd-knop { display: grid; place-items: center; }
.dd-i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.dd-i.groen { background: var(--green); animation: dh-puls 2.6s infinite; }
.dd-i.oranje { background: var(--amber, #e8a33d);
  animation: dh-puls 1.4s infinite; }
.dd-i.rood { background: var(--red); animation: dh-puls .8s infinite; }
.pc-waarom { font-size: 11px; margin-top: 3px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.klikbaar { cursor: pointer; text-decoration: underline dotted; }
.klikbaar:hover { color: var(--accent, #d4a537); }

/* ---- kanaal-ongelezen (2.37) ---- */
.chan { position: relative; }
.chan-badge { position: absolute; top: -6px; right: -6px; min-width: 16px;
  height: 16px; border-radius: 8px; background: var(--accent, #d4a537);
  color: #14161c; font-size: 10px; font-weight: 700; display: grid;
  place-items: center; padding: 0 4px; }

/* ------------------------------------------------- 2.38 de etalage */
/* Open posities als winst/verlies-blokjes: 3–4 naast elkaar op een ruim scherm,
   1–2 op de telefoon. De kleur zit in de rand en een zachte gloed — het blokje
   zelf vertelt in één oogopslag of dit geld verdient of kost. */
.pos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px; }
.pos-grid > * { min-width: 0; }
.pos-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 15px;
  transition: border-color .15s, box-shadow .15s;
}
.pos-card.win { border-color: var(--green-a45);
  box-shadow: 0 0 16px var(--green-a10), inset 0 1px 0 var(--green-a08); }
.pos-card.verlies { border-color: var(--red-a45);
  box-shadow: 0 0 16px var(--red-a10), inset 0 1px 0 var(--red-a08); }
.pos-card .top { display: flex; align-items: center; justify-content: space-between; }
.pos-card .sym { font-weight: 700; font-size: 14.5px; letter-spacing: .2px; }
.pos-card .side { font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  padding: 2px 8px; border-radius: 20px; }
.pos-card .side.long, .hist-card .side.long
  { background: var(--green-a14); color: var(--green); }
.pos-card .side.short, .hist-card .side.short
  { background: var(--red-a14); color: var(--red); }
.pos-card .pnl-rij { display: flex; align-items: baseline; gap: 8px; margin: 8px 0 2px; }
.pos-card .pnl { font-size: 24px; font-weight: 750; letter-spacing: -.5px;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.pos-card .pnl-pct { font-size: 13px; font-weight: 650;
  font-variant-numeric: tabular-nums; }
.pos-feiten { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px;
  margin: 8px 0 10px; }
.pos-feiten span { display: flex; flex-direction: column; min-width: 0; }
.pos-feiten i { font-style: normal; font-size: 10px; letter-spacing: .6px;
  text-transform: uppercase; color: var(--muted); }
.pos-feiten b { font-size: 12.5px; font-weight: 600;
  font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.pos-card .btn-row { margin-top: 10px; }
.pos-card .btn-row button { flex: 1; }

/* Gesloten trades: hetzelfde idee, compacter. De sluitreden in het kort;
   hang met de muis boven het blokje voor het hele verhaal. */
.hist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px; }
.hist-grid > .empty-rich { grid-column: 1 / -1; }
.hist-card { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 11px 12px; min-width: 0; }
.hist-card.win { border-color: var(--green-a35); }
.hist-card.verlies { border-color: var(--red-a35); }
.hist-card .top { display: flex; align-items: center; justify-content: space-between; }
.hist-card .sym { font-weight: 700; font-size: 13px; }
.hist-card .side { font-size: 10px; font-weight: 700; text-transform: uppercase;
  padding: 1px 7px; border-radius: 20px; }
.hist-card .uitkomst { font-size: 18px; font-weight: 750; margin-top: 4px;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.hist-card .sub { color: var(--muted); font-size: 11px; margin-top: 2px; }
.hist-card .reden { color: var(--muted); font-size: 11px; margin-top: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* De hero: het vermogen groot, het lijntje van de laatste dertig dagen eronder,
   en de vorm-regel als één zin — hoeveel je hebt en hoe je erbij staat. */
.hero-value.groot { font-size: 34px; }
.hero-spark { margin-top: 8px; max-width: 260px; }
.hero-spark svg { width: 100%; height: 44px; display: block; }
.hero-vorm { font-size: 12.5px; color: var(--muted); margin-top: 6px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.hero-vorm.pos { color: var(--green); }
.hero-vorm.neg { color: var(--red); }

/* Potjes-blokjes kleuren mee met hun eigen rendement sinds start. */
.pot-blok.win { border-color: var(--green-a35); }
.pot-blok.verlies { border-color: var(--red-a35); }

/* Op de telefoon: één of twee blokjes naast elkaar, hero iets kleiner. */
@media (max-width: 768px) {
  .pos-grid { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 9px; }
  .hist-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
  .pos-card .pnl { font-size: 20px; }
  .hero-value.groot { font-size: 28px; }
}

/* 2.39 — oude modelgeneratie: waarschuwing, geen storing. */
.sync-status.warn { background: var(--accent-a10); border-color: var(--accent-a35);
                    color: var(--text); }
.sync-status.warn .ic { color: var(--accent); }

/* ------------------------------------------------- 2.41 het tekenbord */
/* De werkbalk onder de grafiek: twee gereedschappen, drie richtingen, wissen —
   en één brede knop om het team te laten kijken. Op de telefoon staat hij
   onderaan het paneel, boven de duimbalk, met knoppen die een duim aankunnen. */
.gp-teken { display: flex; flex-direction: column; gap: 8px; padding: 10px 0 0;
  border-top: 1px solid var(--line); margin-top: 8px; }
.gp-teken-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gp-teken-sep { width: 1px; height: 18px; background: var(--line); margin: 0 4px; }
.gp-teken .tk-tool, .gp-teken .tk-richt { min-height: 32px; }
.gp-teken .tk-stop { border-color: var(--red-a50); color: var(--red); }
.gp-teken .tk-doel { border-color: var(--green-a50); color: var(--green); }
.gp-teken .tk-stop.actief { background: var(--red-a16); box-shadow: 0 0 0 1px var(--red) inset; }
.gp-teken .tk-doel.actief { background: var(--green-a16); box-shadow: 0 0 0 1px var(--green) inset; }
.gp-teken .tk-richt.actief { border-color: var(--accent); color: var(--accent); }
#gp-teken-aan.actief { border-color: var(--accent); color: var(--accent); }
#gp-teken-team { align-self: flex-start; min-height: 36px; }
.gp-team { display: flex; flex-direction: column; gap: 4px; }
.gp-team .mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px; }
.gp-team .btn-row { margin-top: 4px; }
.hint.warn { color: var(--warn); }

@media (max-width: 768px) {
  .grafiek-paneel { padding-bottom: calc(var(--safe-b) + 68px); }
  .gp-teken { position: sticky; bottom: 0; background: var(--bg); padding-bottom: 6px; }
  .gp-teken .tk-tool, .gp-teken .tk-richt, #gp-teken-wis { min-height: 44px; min-width: 44px;
    font-size: 13px; }
  #gp-teken-team { align-self: stretch; width: 100%; min-height: 48px; font-size: 15px; }
  .gp-team .btn-row button { min-height: 44px; flex: 1; }
}

/* ------------------------------------------------- 2.42 de handelsterminal */
/* De kop van het grafiekpaneel: symboolwissel met zoekveld, tijdframes 1m–1d,
   indicatoren-menu, volledig scherm. Eén rij, geen wrap tot het echt moet. */
.grafiek-kop { position: relative; flex-wrap: wrap; row-gap: 6px; }
.gp-symbool-knop { background: transparent; border: 1px solid transparent; color: var(--text);
  padding: 4px 8px; border-radius: var(--radius-sm); cursor: pointer; font: inherit;
  display: inline-flex; align-items: center; gap: 4px; }
.gp-symbool-knop:hover { border-color: var(--line); background: var(--surface-2); }
.gp-symbool-knop b { font-size: 15px; letter-spacing: .3px; }
.gp-zoek { position: absolute; top: 40px; left: 0; z-index: 5; width: min(320px, 90vw);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-2, 0 12px 40px var(--zwart-a50)); padding: 8px; }
.gp-zoek input { width: 100%; box-sizing: border-box; background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text);
  padding: 8px 10px; font: inherit; }
.gp-zoek-lijst { max-height: 260px; overflow: auto; margin-top: 6px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.gp-zoek-item { text-align: left; background: transparent; border: 1px solid transparent;
  color: var(--text); padding: 7px 9px; border-radius: var(--radius-sm); cursor: pointer;
  font: inherit; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; }
.gp-zoek-item:hover { background: var(--surface-2); border-color: var(--line); }
.gp-zoek-item.actief { color: var(--accent); border-color: var(--accent); }
.gp-ind-wrap { position: relative; }
.gp-ind-menu { position: absolute; right: 0; top: 34px; z-index: 5; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px;
  display: flex; flex-direction: column; gap: 6px; min-width: 150px;
  box-shadow: var(--shadow-2, 0 12px 40px var(--zwart-a50)); }
.gp-ind-menu label { display: flex; align-items: center; gap: 8px; font-size: 12.5px;
  cursor: pointer; }
.gp-landscape { display: none; }

/* Volledig scherm: via de Fullscreen API, of via deze klasse als terugval. */
.grafiek-paneel.vol, .grafiek-paneel:fullscreen { top: 0; inset: 0; border-top: 0;
  padding-top: max(12px, env(safe-area-inset-top, 0px)); }
.grafiek-paneel:fullscreen { background: var(--bg); }

/* De position tool: instap-gereedschap, stapjes en exacte waarde. */
.gp-teken .tk-instap { border-color: var(--zilver-a50); color: var(--zilver); }
.gp-teken .tk-instap.actief { background: var(--zilver-a14); box-shadow: 0 0 0 1px var(--zilver) inset; }
.gp-teken .tk-stap { min-width: 56px; font-variant-numeric: tabular-nums; }
.gp-exact { display: inline-flex; gap: 4px; align-items: center; }
.gp-exact input { width: 110px; background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius-sm); color: var(--text); padding: 6px 8px; font: inherit;
  font-size: 12.5px; }

/* Het orderticket: exchange-stijl, niets bewerkbaar. */
.ticket { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2);
  padding: 12px 14px; margin: 10px 0; }
.ticket.long { border-left: 3px solid var(--green); }
.ticket.short { border-left: 3px solid var(--red); }
.ticket-kop { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ticket-kant { display: inline-flex; border: 1px solid var(--line); border-radius: 20px;
  overflow: hidden; }
.ticket-kant span { padding: 3px 10px; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.ticket-kant span.aan:first-child { background: var(--green-a18); color: var(--green); }
.ticket-kant span.aan:last-child { background: var(--red-a18); color: var(--red); }
.ticket-rijen { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 6px 16px; }
.ticket-rijen > div { display: flex; justify-content: space-between; gap: 10px;
  border-bottom: 1px dashed var(--line); padding: 5px 0; min-width: 0; }
.ticket-rijen i { font-style: normal; color: var(--muted); font-size: 12px; white-space: nowrap; }
.ticket-rijen b { font-weight: 650; font-variant-numeric: tabular-nums; text-align: right; }
.ticket-voet { margin: 8px 0 0; }

@media (max-width: 768px) {
  .gp-landscape { display: block; margin: 0 0 4px; }
  @media (orientation: landscape) { .gp-landscape { display: none; } }
  .gp-zoek-lijst { grid-template-columns: 1fr; }
  .gp-teken .tk-stap, .gp-teken .tk-instap, .gp-exact button { min-height: 44px; }
  .gp-exact input { min-height: 44px; width: 120px; }
  #gp-vorige, #gp-volgende, #gp-vol, #gp-ind { min-width: 40px; min-height: 40px; }
  .ticket-rijen { grid-template-columns: 1fr; }
}

/* ------------------------------------------------- 2.43 de laatste tien procent */
/* Trade-blokjes: mini-koerslijn rechtsboven, looptijd, het ⤴-teken van een
   opgeschoven stop, en het hele blokje klikbaar naar de grafiek. */
.pos-card .top { gap: 8px; }
.pos-spark { margin-left: auto; width: 72px; height: 26px; display: inline-flex; }
.mini-spark { width: 100%; height: 100%; display: block; }
.pos-stopmove { color: var(--green); font-weight: 700; font-size: 13px; cursor: help; }
.pos-duur { margin-left: auto; font-variant-numeric: tabular-nums; }
.pos-card.klikbaar { cursor: pointer; }
.pos-card.klikbaar:hover { border-color: var(--accent); }
.hist-r { font-size: 12px; font-weight: 650; color: var(--muted); margin-left: 4px; }
.chip.actief { border-color: var(--red); color: var(--red); }

/* De promotiebalk op een potje: hoeveel van de benodigde trades er al zijn. */
.promo-balk { position: relative; height: 4px; background: var(--surface-3);
  border-radius: 2px; margin-top: 10px; cursor: help; }
.promo-balk i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--zilver);
  border-radius: 2px; transition: width .4s ease; }
.promo-balk.haalbaar i { background: var(--accent); }
.promo-balk.vrij i { background: var(--green); }
.promo-balk span { position: absolute; right: 0; top: 6px; font-size: 10.5px; color: var(--muted);
  font-variant-numeric: tabular-nums; }
.pot-blok { padding-bottom: 26px; }

/* Dokter: hoe lang staat dit al, en de groene streep van een opgeloste kaart. */
.dk-sinds { margin-left: auto; font-size: 11px; white-space: nowrap; }
.dokter-kaart .dk-kop { display: flex; align-items: center; gap: 8px; }
.dokter-kaart.opgelost { border-color: var(--green); position: relative; overflow: hidden;
  animation: opgelost-weg 2.6s ease forwards; }
.dokter-kaart.opgelost b { text-decoration: line-through; text-decoration-color: var(--green);
  color: var(--muted); }
.dokter-kaart.opgelost::after { content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 2px; background: var(--green); transform-origin: left;
  animation: streep 1.1s ease forwards; }
@keyframes streep { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes opgelost-weg { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }

/* De filterchip boven de zittingen (hold-code uit de dokter). */
.beraad-filter { display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  border: 1px solid var(--accent); border-radius: var(--radius); margin-bottom: 10px;
  font-size: 12.5px; }
.beraad-filter button { margin-left: auto; }

/* Skeleton in de blokjes-grids: dezelfde kaartmaat, geen lege flits. */
.pos-grid .skel, .hist-grid .skel { min-height: 120px; }
.hist-grid .skel { min-height: 88px; }

/* ------------------------------------------------- 2.45 de inrichting */
.cmd-rij { display: flex; align-items: center; gap: 8px; margin: 6px 0 8px; flex-wrap: wrap; }
.cmd-rij code { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 6px 9px; font-size: 12px; user-select: all; overflow-wrap: anywhere; flex: 1; }


/* ============================================================ 2.46 dubbel slot
   De tweefactor-wizard: vier stappen, één kaart, geen sluitknop als het
   verplicht is. Alleen tokens; geen hex, geen rgba. */
.wiz-bg { backdrop-filter: blur(6px); }
.modal.wiz { max-width: 560px; }
.wiz-stappen { display: flex; gap: 8px; margin-bottom: 12px; }
.wiz-stap { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; background: var(--surface-2); color: var(--muted);
  border: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.wiz-stap.nu { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.wiz-stap.klaar { background: var(--green-a14); color: var(--green); border-color: var(--green-a35); }
.wiz-apps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wiz-app { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 10px; cursor: pointer; background: var(--surface-2); transition: border-color .15s, background .15s; }
.wiz-app input { display: none; }
.wiz-app.aan { border-color: var(--accent); background: var(--accent-a10); }
.wiz-app b { font-size: 13px; }
.wiz-app .hint { font-size: 12px; line-height: 1.35; }
.wiz-links { display: flex; gap: 10px; font-size: 12px; }
.wiz-links a { color: var(--accent); }
.wiz-qr { display: grid; place-items: center; padding: 12px; background: var(--text);
  border-radius: 12px; margin: 8px 0; }
.wiz-qr canvas { image-rendering: pixelated; border-radius: 6px; }
.wiz-hand summary { cursor: pointer; color: var(--muted); font-size: 12px; }
.wiz-sleutel { font-size: 15px; letter-spacing: .12em; word-break: break-all; padding: 10px 12px;
  background: var(--surface-2); border-radius: 8px; margin: 8px 0; user-select: all; }
.wiz-codeveld { font-size: 22px; letter-spacing: .3em; text-align: center; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.wiz-herstel { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 14px; padding: 12px 14px;
  background: var(--surface-2); border-radius: 10px; font-size: 15px; letter-spacing: .06em; user-select: all; }
.wiz-herstel span { padding: 4px 0; border-bottom: 1px dashed var(--line); }
@media (max-width: 768px) {
  .wiz-apps { grid-template-columns: 1fr; }
  .wiz-herstel { grid-template-columns: 1fr; }
  .modal.wiz { max-height: 92vh; overflow: auto; }
}


/* ============================================================ 2.47 de voordeur
   Markt: de charts bovenaan. Het grafiekpaneel wordt op de Markt-tab ingebed
   (position: static) in plaats van als lade onderaan; de instellingen zitten in
   één inklapbare balk. Tokens only. */
.markt-chart-huis { margin: 0 0 12px; min-height: 120px; }
.markt-chart-huis:empty { display: grid; place-items: center; color: var(--muted); font-size: 13px;
  border: 1px dashed var(--line); border-radius: var(--radius); }
.markt-chart-huis:empty::before { content: "Grafiek laden…"; }
.grafiek-paneel.ingebed { position: static; inset: auto; top: auto; z-index: auto; border-top: 0;
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-1);
  padding: 10px 12px 12px; }
.grafiek-paneel.ingebed #gp-sluit { display: none; }
.grafiek-paneel.ingebed.vol, .grafiek-paneel.ingebed:fullscreen { position: fixed; inset: 0; z-index: 1100;
  border-radius: 0; border: 0; }
.markt-instellingen { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  margin: 0 0 14px; padding: 0 14px; }
.markt-instellingen > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px;
  padding: 11px 0; font-weight: 600; color: var(--text); }
.markt-instellingen > summary::-webkit-details-marker { display: none; }
.markt-instellingen > summary::after { content: "▾"; margin-left: auto; color: var(--muted);
  transition: transform .15s ease; }
.markt-instellingen[open] > summary::after { transform: rotate(180deg); }
.markt-instellingen[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.markt-instellingen .hint { font-weight: 400; }
@media (max-width: 768px) {
  .grafiek-paneel.ingebed { padding: 8px 8px 10px; padding-bottom: 10px; }
  .grafiek-paneel.ingebed .gp-chart { min-height: 55vh; }
  .markt-instellingen { padding: 0 10px; }
}
/* Support-knoppen in de app-schil (2.47): links die eruitzien als ghost-knoppen. */
#help-support a.ghost { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px;
  border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-2);
  color: var(--text); text-decoration: none; font-size: 13px; }
#help-support a.ghost:hover { border-color: var(--accent); }

/* 2.57 — De kantoorpoort: compacte snelle toegang op de portfolio-pagina.
   Rustig donker paneel met goud/teal-accent. Geen zware animatie of canvas. */
.kantoorpoort { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  margin: 0 0 14px; padding: 12px 14px; border-radius: var(--radius);
  background: linear-gradient(90deg, var(--surface-2), var(--surface-3));
  border: 1px solid var(--line); box-shadow: inset 0 0 0 1px var(--accent-a10);
  color: var(--text); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.kantoorpoort:hover { border-color: var(--accent-a35); box-shadow: inset 0 0 0 1px var(--accent-a35); }
.kantoorpoort:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kantoorpoort-icoon { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 9px; background: var(--surface); border: 1px solid var(--green-a35); color: var(--green);
  image-rendering: pixelated; }
.kantoorpoort-icoon .ic { width: 22px; height: 22px; }
.kantoorpoort-tekst { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.kantoorpoort-tekst b { font-size: 14px; }
.kantoorpoort-tekst small { color: var(--muted); font-size: 12px; }
.kantoorpoort-pijl { flex: 0 0 auto; color: var(--accent); font-size: 16px; transition: transform .15s ease; }
.kantoorpoort:hover .kantoorpoort-pijl { transform: translateX(3px); }
@media (max-width: 560px) { .kantoorpoort { padding: 14px; } .kantoorpoort-tekst b { font-size: 15px; } }
@media (prefers-reduced-motion: reduce) { .kantoorpoort, .kantoorpoort-pijl { transition: none; }
  .kantoorpoort:hover .kantoorpoort-pijl { transform: none; } }