:root {
  --bg: #f3f4f7; --kaart: #ffffff; --tekst: #161b26; --zacht: #667085; --lijn: #e6e8ee; --blauw: #2954d6; --blauw-zacht: #e8eefc;
  --plus: #11804a; --min: #c4320a; --oranje: #b54708; --oranje-zacht: #fff4e5; --rood-zacht: #fdecea;
  --kaars-op: #16a05d; --kaars-neer: #e5484d; --instap: #2954d6; --be: #8e6bd8; --stop: #e5484d; --uit: #16a05d; --trail: #f79009; --raster: #eef0f4;
  --nav: 64px; color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1017; --kaart: #171b24; --tekst: #e8ebf2; --zacht: #8f98aa; --lijn: #262c38; --blauw: #6f8ff5; --blauw-zacht: #1d2640;
    --plus: #3ccf7a; --min: #ff6b5b; --oranje: #fdb022; --oranje-zacht: #2b2110; --rood-zacht: #2c1515;
    --kaars-op: #2ebd72; --kaars-neer: #f0565b; --instap: #6f8ff5; --be: #b39af0; --stop: #f0565b; --uit: #2ebd72; --trail: #fdb022; --raster: #1f2430;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--tekst); font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding-bottom: calc(var(--nav) + env(safe-area-inset-bottom)); }
a { color: var(--blauw); }
header { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px; padding: 10px 16px;
  padding-top: calc(10px + env(safe-area-inset-top)); background: var(--kaart); border-bottom: 1px solid var(--lijn); }
.titel { font-weight: 700; font-size: 17px; }
.papier { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--oranje); background: var(--oranje-zacht);
  border-radius: 99px; padding: 2px 8px; }
.live { margin-left: auto; font-size: 12px; color: var(--zacht); display: flex; align-items: center; gap: 6px; }
.live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--zacht); }
.live.aan::before { background: var(--plus); } .live.uit::before { background: var(--oranje); }
main { max-width: 760px; margin: 0 auto; padding: 12px 12px 20px; }
nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 5; display: flex; background: var(--kaart); border-top: 1px solid var(--lijn);
  padding-bottom: env(safe-area-inset-bottom); }
nav a { flex: 1; text-align: center; padding: 0 2px; height: var(--nav); display: flex; align-items: center; justify-content: center;
  color: var(--zacht); text-decoration: none; font-size: 13px; font-weight: 600; border-top: 3px solid transparent; }
nav a.actief { color: var(--blauw); border-top-color: var(--blauw); }
.kaart { background: var(--kaart); border-radius: 14px; padding: 14px; margin-bottom: 12px; border: 1px solid var(--lijn); }
h1 { font-size: 20px; margin: 0 0 12px; } h2 { font-size: 16px; margin: 0 0 10px; } h3 { font-size: 15px; margin: 0; }
.klein { color: var(--zacht); font-size: 13px; }
.groot { font-size: 30px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.raster { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cijfer { background: var(--bg); border-radius: 10px; padding: 10px; }
.cijfer b { display: block; font-size: 18px; font-variant-numeric: tabular-nums; margin-top: 2px; }
.plus { color: var(--plus); } .min { color: var(--min); }
.melding { background: var(--blauw-zacht); border-color: transparent; }
.let { background: var(--oranje-zacht); border-color: transparent; }
.fout { color: var(--min); }
button, .knop { appearance: none; border: 0; border-radius: 10px; min-height: 44px; padding: 10px 14px; font: inherit; font-weight: 600;
  background: var(--blauw); color: #fff; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
button.rood, .knop.rood { background: var(--min); } button.grijs, .knop.grijs { background: var(--lijn); color: var(--tekst); }
button:disabled { opacity: .5; }
.knoppen { display: flex; flex-wrap: wrap; gap: 8px; } .knoppen > * { flex: 1 1 140px; }
input, select { font: inherit; font-size: 16px; color: var(--tekst); background: var(--bg); border: 1px solid var(--lijn); border-radius: 10px;
  min-height: 44px; padding: 8px 12px; width: 100%; }
label { display: block; font-size: 13px; color: var(--zacht); margin: 0 0 4px; }
.formrij { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.chip { flex: 0 0 auto; border: 1px solid var(--lijn); background: var(--kaart); color: var(--tekst); border-radius: 99px; min-height: 34px;
  padding: 4px 12px; font-size: 13px; font-weight: 600; }
.chip.aan { background: var(--blauw); border-color: var(--blauw); color: #fff; }
.pos-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.pos-kop .pct { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.grafiek { position: relative; width: 100%; margin: 8px 0 6px; touch-action: pan-y; }
.grafiek canvas { display: block; width: 100%; }
.legenda { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--zacht); }
.legenda i { display: inline-block; width: 14px; height: 0; border-top: 2px solid; vertical-align: middle; margin-right: 4px; }
.legenda i.stip { border-top-style: dashed; }
.details { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: 13px; margin: 10px 0; }
.details span:nth-child(odd) { color: var(--zacht); } .details span:nth-child(even) { text-align: right; font-variant-numeric: tabular-nums; }
.lijst { list-style: none; margin: 0; padding: 0; }
.lijst li { padding: 10px 0; border-bottom: 1px solid var(--lijn); }
.lijst li:last-child { border-bottom: 0; }
.rij { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.rij .r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.label { display: inline-block; font-size: 11px; font-weight: 600; border-radius: 6px; padding: 1px 6px; margin: 2px 4px 0 0; background: var(--bg); color: var(--zacht); }
.label.goed { color: var(--plus); } .label.slecht { color: var(--min); } .label.let { color: var(--oranje); background: var(--oranje-zacht); }
.balk { height: 6px; border-radius: 3px; background: var(--bg); overflow: hidden; margin-top: 6px; }
.balk > div { height: 100%; background: var(--blauw); border-radius: 3px; }
details.trade summary { list-style: none; cursor: pointer; }
details.trade summary::-webkit-details-marker { display: none; }
.niveau-fout { border-left: 3px solid var(--min); padding-left: 8px !important; }
.niveau-waarschuwing { border-left: 3px solid var(--oranje); padding-left: 8px !important; }
.niveau-handel { border-left: 3px solid var(--blauw); padding-left: 8px !important; }
#toast { position: fixed; left: 12px; right: 12px; bottom: calc(var(--nav) + 12px + env(safe-area-inset-bottom)); z-index: 6; max-width: 736px;
  margin: 0 auto; background: var(--tekst); color: var(--kaart); border-radius: 12px; padding: 12px 14px; font-size: 14px; }
.waardegrafiek svg { width: 100%; height: auto; display: block; }
.login main { padding-top: 12vh; max-width: 420px; }
.login form { display: grid; gap: 10px; }
@media (min-width: 600px) { .raster.vier { grid-template-columns: repeat(4, 1fr); } }
.mt { margin-top: 10px; }
.legenda i.instap { border-color: var(--instap); } .legenda i.be { border-color: var(--be); } .legenda i.stop { border-color: var(--stop); }
.legenda i.uit { border-color: var(--uit); } .legenda i.trail { border-color: var(--trail); }
[data-act="verkoop"] { width: 100%; }
.waardegrafiek .basis { fill: none; stroke: var(--zacht); stroke-dasharray: 5 5; }
.waardegrafiek .waarde { fill: none; stroke-width: 2.5; stroke-linejoin: round; }
.waardegrafiek .waarde.op { stroke: var(--plus); } .waardegrafiek .waarde.neer { stroke: var(--min); }
.legenda i.nu { border-color: var(--tekst); }
.schakel { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--lijn); }
.schakel .chips { flex: 0 0 auto; overflow: visible; }
.schakel .chip { min-height: 40px; padding: 6px 14px; }