/* CryptoBot-app in de huisstijl van voetbal.wissel (wissel.club, bron/out/ONTWERP_EN_OPZET_v2.md):
   rustig grijs, witte of donkere kaarten, zwevende glazen knoppen, één instelbare accentkleur.
   Groen en rood alleen voor kopen, verkopen, winst en verlies. Geen inline stijlen: de CSP blokkeert die.

   Inhoud
     1.  Kleuren (tokens): licht, donker, accentkleur
     2.  Basis en tekst
     3.  Layout
     4.  Bovenbalk: glazen knoppen
     5.  Onderbalk: zwevende glazen pil
     6.  Kaarten, rijen en labels
     7.  Keuzes en knoppen
     8.  Formulieren
     9.  Tips en 'komt later'
     10. Grafieken
     11. Pagina van rechts (detail van een trade, logboek)
     12. Venster van onderen (hulp, regel)
     13. Scherm Nu: open trade, gebeurtenissen, dashboard
     14. Logboek
     15. Testen: archief, regels, simulatie, mandje
     16. Instellingen
     17. Liggend (telefoon gedraaid)
     18. Beweging en plaatshouders
     19. Themawissel, glanslijn en minder beweging
     20. Laptop (≥ 1100 px): kolommen, navigatie bovenin, vensters in het midden, muis; Analyse op één scherm

   Let op: bij gelijke specificiteit wint de regel die later staat. Voorbeelden die daarom na elkaar moeten blijven:
   .rowlink na .rows > *, .chip-s na .chip, .lg-card na .card, .rsheet na .bsheet, .sk-* na .skel. */

/* ==================== 1. Kleuren (tokens) ==================== */

:root {
  --bg: #f5f5f2; --surface: #ffffff; --surface2: #fafaf8; --sheet: #ffffff;
  --fg: #1a1c1b; --muted: #666b67; --line: #e4e6e2;
  --accent: #1a1c1b; --accent-fg: #ffffff;
  --brand: #f2c230; --brand-fg: #1a1c1b;
  --chip: rgba(0,0,0,.05);
  --glass: rgba(255,255,255,.58);
  --glass-sh: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(0,0,0,.07), 0 8px 18px -4px rgba(0,0,0,.16);
  --tabs-sh: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(0,0,0,.07), 0 10px 30px rgba(0,0,0,.13), 0 1px 3px rgba(0,0,0,.06);
  --card-sh: 0 1px 2px rgba(0,0,0,.04), 0 6px 18px rgba(0,0,0,.04);
  --warn-bg: #fff4cc; --warn-fg: #6b4e00;
  --mid: #b45309; --mid-bg: rgba(234,88,12,.11); /* oranje: twijfelachtig (oordeel na Controleer) */
  --in: #2e7d32; --out: #c62828;
  --in-bg: rgba(46,125,50,.12); --out-bg: rgba(198,40,40,.10);
  --grid: rgba(0,0,0,.07);
  --tip: color-mix(in srgb, var(--brand) 13%, var(--surface)); --seg-on: #ffffff;
  --k-ok: #1565c0; --k-xx: #c62828; --k-iv: #c2410c; --k-coin: #7b3fc4; --k-cmp: #7a7a00; --k-num: #3b7a00;
  /* munten in Analyse → Mandje (gecontroleerd op kleurenblindheid, dataviz-validator; euro neutraal grijs) */
  --mk-btc: #eda100; --mk-eth: #2a78d6; --mk-sol: #1baf7a; --mk-xrp: #eb6834; --mk-ada: #9b6bd8; --mk-eur: #d9dbd7; --mk-rules: #0f8a94;
  /* munten buiten de vaste vijf (2026.11.84, scherm Munten): vaste reeks op volgorde van de keuze */
  --mk-x0: #c2185b; --mk-x1: #5d7a1f; --mk-x2: #0277bd; --mk-x3: #8d6e63; --mk-x4: #6a1b9a; --mk-x5: #00897b; --mk-x6: #ad8b00; --mk-x7: #d84315; --mk-x8: #455a64; --mk-x9: #7cb342;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #141615; --surface: #1e2120; --surface2: #232725; --sheet: #1e2120;
  --fg: #edefee; --muted: #9da39f; --line: #2c312e;
  --accent: #edefee; --accent-fg: #141615;
  --chip: rgba(255,255,255,.09);
  --glass: rgba(44,48,46,.58);
  --glass-sh: inset 0 1px 0 rgba(255,255,255,.10), inset 0 0 0 1px rgba(255,255,255,.06), 0 8px 18px -4px rgba(0,0,0,.5);
  --tabs-sh: inset 0 1px 0 rgba(255,255,255,.10), inset 0 0 0 1px rgba(255,255,255,.06), 0 8px 24px rgba(0,0,0,.45);
  --card-sh: none;
  --warn-bg: rgba(255,212,59,.13); --warn-fg: #ffd43b;
  --mid: #fb923c; --mid-bg: rgba(251,146,60,.13);
  --in: #6cc070; --out: #f07171;
  --in-bg: rgba(108,192,112,.14); --out-bg: rgba(240,113,113,.14);
  --grid: rgba(255,255,255,.08);
  --tip: color-mix(in srgb, var(--brand) 8%, var(--surface2)); --seg-on: #3a3f3c;
  --k-ok: #379bff; --k-xx: #ff4848; --k-iv: #ff9f71; --k-coin: #c58aff; --k-cmp: #c4c45a; --k-num: #a6f70f;
  --mk-btc: #c98500; --mk-eth: #3987e5; --mk-sol: #199e70; --mk-xrp: #d95926; --mk-ada: #9b6bd8; --mk-eur: #3a3f3c; --mk-rules: #3fc3cb;
  --mk-x0: #f06292; --mk-x1: #9ccc65; --mk-x2: #4fc3f7; --mk-x3: #bcaaa4; --mk-x4: #ba68c8; --mk-x5: #4db6ac; --mk-x6: #e6c34a; --mk-x7: #ff8a65; --mk-x8: #90a4ae; --mk-x9: #aed581;
  color-scheme: dark;
} }
:root[data-theme="dark"] {
  --bg: #141615; --surface: #1e2120; --surface2: #232725; --sheet: #1e2120;
  --fg: #edefee; --muted: #9da39f; --line: #2c312e;
  --accent: #edefee; --accent-fg: #141615;
  --chip: rgba(255,255,255,.09);
  --glass: rgba(44,48,46,.58);
  --glass-sh: inset 0 1px 0 rgba(255,255,255,.10), inset 0 0 0 1px rgba(255,255,255,.06), 0 8px 18px -4px rgba(0,0,0,.5);
  --tabs-sh: inset 0 1px 0 rgba(255,255,255,.10), inset 0 0 0 1px rgba(255,255,255,.06), 0 8px 24px rgba(0,0,0,.45);
  --card-sh: none;
  --warn-bg: rgba(255,212,59,.13); --warn-fg: #ffd43b;
  --mid: #fb923c; --mid-bg: rgba(251,146,60,.13);
  --in: #6cc070; --out: #f07171;
  --in-bg: rgba(108,192,112,.14); --out-bg: rgba(240,113,113,.14);
  --grid: rgba(255,255,255,.08);
  --tip: color-mix(in srgb, var(--brand) 8%, var(--surface2)); --seg-on: #3a3f3c;
  --k-ok: #379bff; --k-xx: #ff4848; --k-iv: #ff9f71; --k-coin: #c58aff; --k-cmp: #c4c45a; --k-num: #a6f70f;
  --mk-btc: #c98500; --mk-eth: #3987e5; --mk-sol: #199e70; --mk-xrp: #d95926; --mk-ada: #9b6bd8; --mk-eur: #3a3f3c; --mk-rules: #3fc3cb;
  --mk-x0: #f06292; --mk-x1: #9ccc65; --mk-x2: #4fc3f7; --mk-x3: #bcaaa4; --mk-x4: #ba68c8; --mk-x5: #4db6ac; --mk-x6: #e6c34a; --mk-x7: #ff8a65; --mk-x8: #90a4ae; --mk-x9: #aed581;
  color-scheme: dark;
}
/* accentkleur, instelbaar (standaard geel) */
:root[data-accent="orange"] { --brand: #f26b21; --brand-fg: #ffffff; }
:root[data-accent="blue"] { --brand: #2f6ea3; --brand-fg: #ffffff; }
:root[data-accent="green"] { --brand: #2e7d32; --brand-fg: #ffffff; }
:root[data-accent="yellow"] { --brand: #f2c230; --brand-fg: #1a1c1b; }

/* ==================== 2. Basis en tekst ==================== */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; } /* anders wint display: flex van een laag en vangt hij onzichtbaar alle tikken */
/* Niet zoomen en de bovenbalk niet omlaag kunnen trekken (zoals voetbal.wissel). */
html, body { margin: 0; background: var(--bg); overflow-x: clip; overscroll-behavior-y: none; touch-action: manipulation; }
/* iOS maakt tekst in brede vlakken anders zelf groter (tekstvergroting). Dan stond het logboek op Nu scheef:
   meldingen groter dan tijd en procesnummer. Lettergroottes bepalen we zelf. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  color: var(--fg); font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
/* effen strook achter de statusbalk, zodat iOS de juiste kleur leest */
body::before {
  content: ""; position: fixed; left: 0; right: 0; top: 0; height: env(safe-area-inset-top, 0px); background: var(--bg); z-index: 59;
}
body.locked { overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
/* Opties van een keuzelijst: eigen achtergrond en tekst uit de kleuren van het thema. Anders tekent Windows (donker thema)
   de uitklaplijst wit met de lichte tekstkleur erop: onleesbaar. Uitgeschakeld: gedempt maar leesbaar. */
select option, select optgroup { background-color: var(--surface); color: var(--fg); }
select option:disabled { color: var(--muted); }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
h1, h2, h3, p { margin: 0; }
svg { flex: none; }

/* tekst */
.title { font-size: 22px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; text-wrap: balance; margin: -6px 0 2px; }
.h2 { font-size: 17px; font-weight: 700; }
.sub { color: var(--muted); font-size: 15px; }
.small { font-size: 13px; color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }
.up { color: var(--in); }
.down { color: var(--out); }
.err { color: var(--out); font-size: 15px; }
.loading { color: var(--muted); font-size: 15px; }

/* ==================== 3. Layout ==================== */

.shell {
  max-width: 560px; margin: 0 auto;
  padding: 4px max(16px, env(safe-area-inset-right, 0px)) calc(50px + max(10px, env(safe-area-inset-bottom, 0px) - 13px) + 28px) max(16px, env(safe-area-inset-left, 0px));
}
.view { display: grid; gap: 24px; padding-top: 6px; }
.sec { display: grid; gap: 10px; min-width: 0; }

/* ==================== 4. Bovenbalk: glazen knoppen ==================== */

.topbar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 9; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  max-width: 560px; margin: 0 auto; padding: 10px max(16px, env(safe-area-inset-right, 0px)) 14px max(16px, env(safe-area-inset-left, 0px));
  background: linear-gradient(var(--bg) 45%, transparent);
}
.glass {
  position: relative; background: var(--glass); -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  box-shadow: var(--glass-sh); border-radius: 22px;
}
/* toestand van de bot, linksboven */
.state { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px 0 6px; min-width: 0; }
.logo { width: 32px; height: 32px; }
.logo-dot { fill: var(--brand); }
.logo-line { fill: none; stroke: var(--brand); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.state-txt { display: grid; line-height: 1.15; min-width: 0; }
.state-txt b { font-size: 15px; font-weight: 700; }
.state-txt span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.state.ok .dot { background: var(--in); }
.state.warn .dot { background: #e0a800; }
.state.stop .dot { background: var(--out); }
/* knoppen rechtsboven */
.group { display: flex; padding: 0; height: 44px; }
.gbtn { width: 44px; height: 44px; border: 0; border-radius: 22px; background: none; display: grid; place-items: center; color: var(--fg); padding: 0; }
.gbtn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gbtn svg .fillc { fill: currentColor; stroke: none; }
.gbtn.on { background: var(--chip); }

/* ==================== 5. Onderbalk: zwevende glazen pil, alleen iconen ==================== */

nav.tabs {
  position: fixed; z-index: 9; left: 14px; right: 14px; bottom: max(10px, calc(env(safe-area-inset-bottom, 0px) - 13px));
  max-width: 532px; margin: 0 auto; height: 50px; border-radius: 25px; padding: 0 10px;
  display: flex; justify-content: space-between; align-items: center;
  background: var(--glass); -webkit-backdrop-filter: blur(24px) saturate(190%); backdrop-filter: blur(24px) saturate(190%); box-shadow: var(--tabs-sh);
}
nav.tabs button {
  flex: 0 0 auto; width: 58px; min-height: 50px; padding: 0; border: 0; background: none; font-size: 0; color: var(--muted);
  display: flex; align-items: center; justify-content: center; transition: color .15s;
}
nav.tabs .ic {
  position: relative; width: 50px; height: 38px; border-radius: 19px; display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
nav.tabs svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
nav.tabs button.on { color: var(--fg); }
nav.tabs button.on .ic { background: var(--chip); }
nav.tabs button.on svg { stroke-width: 2.4; }
nav.tabs button.pop .ic { animation: tabPop .4s cubic-bezier(.34, 1.56, .64, 1); }
/* 2026.11.85: vijf tabs (Munten erbij); op een smalle telefoon (320 px) krimpen ze mee, het tikvlak blijft ≥ 44 px */
nav.tabs button { flex: 0 1 58px; min-width: 44px; }
nav.tabs .ic { max-width: 100%; }
@keyframes tabPop { 0% { transform: scale(.7); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }

/* ==================== 6. Kaarten, rijen en labels ==================== */

.card { background: var(--surface); border-radius: 22px; padding: 16px; box-shadow: var(--card-sh); min-width: 0; }
.card.tight { padding: 12px 10px 10px; }
/* rijen met een lijntje ertussen: links het label, rechts de waarde */
.rows { display: grid; }
.rows > * {
  display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 15px; min-width: 0;
}
.rows > *:first-child { border-top: 0; padding-top: 0; }
.rows > *:last-child { padding-bottom: 0; }
.rows > * > span:last-child { text-align: right; min-width: 0; overflow-wrap: anywhere; }
.sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.link { border: 0; background: none; padding: 6px 0; font-size: 14px; font-weight: 600; color: var(--fg); }
/* labels: aan/uit, handelt/proef, status van een taak */
.tag {
  display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--chip); color: var(--fg);
  vertical-align: 1px;
}
.tag.buy { background: var(--in-bg); color: var(--in); }
.tag.sell { background: var(--out-bg); color: var(--out); }
.tag.wait { background: var(--warn-bg); color: var(--warn-fg); }
/* rij als knop (naar een pagina of een scenario); moet na .rows > * staan */
.rowlink {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; background: none; border: 0; padding: 0;
  text-align: left; font-size: 15px; color: var(--fg);
}
.rowlink .chev { font-size: 22px; color: var(--muted); }
/* uitklaprij (eerdere taken, alle trades) */
.rows > .rowlink.fold { padding: 11px 0; border-top: 1px solid var(--line); color: var(--muted); }
.rows > .rowlink.fold:first-child { border-top: 0; padding-top: 0; }
.rows > .rowlink.fold:last-child { padding-bottom: 0; }
.rowlink.fold .chev { display: inline-block; transition: transform .2s; }
.rowlink.fold.open .chev { transform: rotate(90deg); }

/* ==================== 7. Keuzes en knoppen ==================== */

/* pil in een rij: geselecteerd = zwart op licht (niet de accentkleur) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 40px; padding: 0 16px; border-radius: 20px; border: 0; background: var(--chip); color: var(--fg); font-size: 15px; font-weight: 600;
}
.chip[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.chip-s { min-height: 32px; padding: 0 12px; font-size: 13px; }
/* leegmaken of weggooien: tweede tik */
.chip.danger { background: var(--out); color: #fff; white-space: nowrap; }
/* gesegmenteerde tabjes */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 3px; background: var(--chip); border-radius: 14px; }
.seg button {
  min-height: 40px; padding: 4px; border: 0; border-radius: 11px; background: transparent; color: var(--muted); font-size: 14px; font-weight: 600;
}
.seg button[aria-pressed="true"] { background: var(--seg-on); color: var(--fg); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
/* grote knoppen */
.btn { min-height: 48px; padding: 0 20px; border-radius: 24px; border: 0; font-weight: 700; font-size: 16px; width: 100%; }
.btn.main { background: var(--brand); color: var(--brand-fg); }
.btn.soft { background: var(--chip); color: var(--fg); }
.btn:disabled { opacity: .5; }

/* ==================== 8. Formulieren ==================== */

.form { display: grid; gap: 12px; }
.field { display: grid; gap: 6px; font-size: 13px; color: var(--muted); min-width: 0; }
.field select, .field input {
  font-size: 16px; color: var(--fg); background: var(--chip); border: 0; border-radius: 12px; height: 44px; padding: 0 12px; width: 100%; min-width: 0;
  -webkit-appearance: none; appearance: none;
}
.field textarea.rule-text {
  font: 16px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--fg); background: var(--chip); border: 0; border-radius: 12px;
  padding: 10px 12px; width: 100%; min-width: 0; resize: vertical; white-space: pre; overflow-x: auto;
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ==================== 9. Tips en 'komt later' ==================== */

.tipsbar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 22px;
  background: var(--surface); box-shadow: var(--card-sh); font-size: 14px; font-weight: 600;
}
.tipsbar button {
  min-height: 36px; padding: 0 14px; border-radius: 18px; border: 0; background: var(--brand); color: var(--brand-fg); font-weight: 700; font-size: 14px;
}
.tipx { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border-radius: 16px; background: var(--tip); font-size: 14px; line-height: 1.4; }
.tipx svg { width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* komt later */
.later { display: grid; gap: 8px; }
.pill {
  justify-self: start; display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  background: var(--brand); color: var(--brand-fg);
}

/* ==================== 10. Grafieken ==================== */

.chart { display: block; width: 100%; height: auto; touch-action: pan-y; }
.chart .g-line { stroke: var(--grid); }
.chart .g-mid { stroke: var(--line); }
.chart .g-txt { fill: var(--muted); font-size: 10.5px; font-family: Inter, sans-serif; font-variant-numeric: tabular-nums; }
.chart .c-up { fill: var(--in); }
.chart .c-down { fill: var(--out); }
.chart .w-up { stroke: var(--in); }
.chart .w-down { stroke: var(--out); }
.chart .l-buy { stroke: var(--muted); fill: var(--muted); }
.chart .l-stop { stroke: var(--out); fill: var(--out); }
.chart .l-lbl { stroke: none; font-size: 10.5px; font-weight: 700; font-family: Inter, sans-serif; }
.chart .rsi { fill: none; stroke: var(--brand); stroke-width: 1.8; }
.chart .bb-area { fill: var(--brand); fill-opacity: .1; stroke: var(--brand); stroke-opacity: .45; stroke-width: 1; }
.chart .bb-mid { fill: none; stroke: var(--brand); stroke-opacity: .6; stroke-width: 1; stroke-dasharray: 3 3; }
.chart .cross { stroke: var(--fg); stroke-opacity: .5; }
/* onder en boven de grafiek (Analyse) */
.chart-foot { display: flex; justify-content: flex-end; padding: 6px 4px 0; }
.seg[aria-label="Indicator"] button { font-size: 13px; padding: 4px 2px; }
.readout { font-size: 13px; color: var(--muted); min-height: 19px; font-variant-numeric: tabular-nums; padding: 0 4px 6px; }

/* ==================== 11. Pagina van rechts (detail van een trade, logboek) ==================== */

.page {
  position: fixed; inset: 0; z-index: 20; height: 100dvh; background: var(--bg); overflow-y: auto; overscroll-behavior: contain;
  animation: pageIn .28s cubic-bezier(.2,.8,.2,1);
}
.page.leaving { animation: pageOut .22s cubic-bezier(.4,0,1,1) forwards; }
.page-in {
  max-width: 560px; margin: 0 auto; display: grid; gap: 18px;
  padding: 0 max(16px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 28px) max(16px, env(safe-area-inset-left, 0px));
}
.page-in .set-h { margin-bottom: -8px; }
@keyframes pageIn { from { transform: translateX(100%); } to { transform: none; } }
@keyframes pageOut { from { transform: none; } to { transform: translateX(100%); } }

/* ==================== 12. Venster van onderen (hulp, regel) ==================== */

.sheet-wrap {
  position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center; background: rgba(0,0,0,.28);
  animation: dimIn .2s ease;
}
.sheet-wrap.leaving { animation: dimOut .23s ease forwards; }
.bsheet {
  width: calc(100% - 16px); max-width: 560px; max-height: 86vh; overflow-y: auto; margin: 0 8px 8px;
  padding: 14px 16px calc(18px + env(safe-area-inset-bottom, 0px)); border-radius: 34px; background: var(--sheet);
  box-shadow: 0 10px 40px rgba(0,0,0,.28); display: grid; gap: 14px; animation: sheetUp .38s cubic-bezier(.2,.9,.3,1.06);
}
.sheet-wrap.leaving .bsheet { animation: sheetDown .23s cubic-bezier(.4,0,.8,.6) forwards; }
.bsheet-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-left: 4px; }
.bsheet-h h2 { font-size: 20px; font-weight: 800; }
.xbtn { width: 44px; height: 44px; border: 0; border-radius: 22px; background: var(--chip); color: var(--fg); display: grid; place-items: center; padding: 0; }
/* ?-menu */
.menu { display: grid; background: var(--surface2); border-radius: 22px; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.menu button {
  display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 16px; border: 0; border-top: 1px solid var(--line); background: none;
  text-align: left; font-size: 16px; font-weight: 500; color: var(--fg);
}
.menu button:first-child { border-top: 0; }
.menu svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--muted); }
/* helptekst */
.help { display: grid; gap: 10px; font-size: 15px; }
.help h3 { font-size: 17px; font-weight: 700; margin-top: 4px; }
.help p { color: var(--fg); }
@keyframes sheetUp { from { transform: translateY(105%); } to { transform: none; } }
@keyframes sheetDown { from { transform: none; } to { transform: translateY(105%); } }
@keyframes dimIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes dimOut { from { opacity: 1; } to { opacity: 0; } }

/* ==================== 13. Scherm Nu: open trade, gebeurtenissen, dashboard ==================== */

/* open trade */
.trade { display: grid; gap: 12px; width: 100%; text-align: left; border: 0; color: inherit; font: inherit; }
.trade-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; min-width: 0; }
.coin { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.coin small { font-size: 13px; font-weight: 500; color: var(--muted); margin-left: 6px; letter-spacing: 0; }
.pct { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: -.01em; }
.range { display: block; width: 100%; height: 22px; }
.range .r-track { fill: var(--chip); }
.range .r-band { fill: var(--brand); fill-opacity: .5; }
.range .r-stop { fill: var(--out); }
.range .r-buy { fill: var(--muted); }
.range .r-now { fill: var(--fg); stroke: var(--surface); stroke-width: 3; }
.range-labels { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--muted); }
.more { display: inline-flex; align-items: center; gap: 2px; font-size: 14px; font-weight: 600; color: var(--fg); }

/* gebeurtenissen (trades in een lijst; ook de trades van een simulatie) */
.ev {
  display: grid; grid-template-columns: 54px minmax(0,1fr); gap: 10px; padding: 11px 0; border: 0; border-top: 1px solid var(--line); font-size: 15px;
  width: 100%; background: none; text-align: left; color: inherit;
}
.ev:first-child { border-top: 0; padding-top: 0; }
.ev:last-child { padding-bottom: 0; }
.ev time { font-size: 13px; color: var(--muted); padding-top: 2px; font-variant-numeric: tabular-nums; }
.ev small { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; white-space: pre-wrap; }
.ev3 { grid-template-columns: 54px minmax(0,1fr) auto; align-items: start; }
.ev3 .ev-main { min-width: 0; }
.ev3 .ev-main > span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev3 .ev-right { text-align: right; white-space: nowrap; }
.ev3 .ev-right small .up { color: var(--in); }
.ev3 .ev-right small .down { color: var(--out); }

/* dashboard (ook voor de uitkomst van een simulatie) */
.dash-hero .dash-big { font-size: 34px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 12px; }
.dash-pills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dash-pill { display: grid; gap: 2px; padding: 10px; border-radius: 14px; background: var(--chip); }
.dash-pill b { font-size: 17px; }
.dash-tbl { margin-top: 10px; }
.dash-v { display: grid; justify-items: end; }
.dash-years { margin-top: 10px; display: grid; gap: 8px; }
.dy { display: grid; grid-template-columns: 44px 1fr 72px; align-items: center; gap: 10px; }
.dy b { text-align: right; font-size: 14px; }
.dy-bar { height: 8px; border-radius: 4px; background: var(--chip); overflow: hidden; }
.dy-bar i { display: block; height: 100%; border-radius: 4px; background: var(--in); }
.dy-bar i.down { background: var(--out); }
/* breedte van de jaarbalk in stappen van 5% (geen inline stijl: de CSP blokkeert die) */
.dy-bar i.w0 { width: 0%; }
.dy-bar i.w5 { width: 5%; }
.dy-bar i.w10 { width: 10%; }
.dy-bar i.w15 { width: 15%; }
.dy-bar i.w20 { width: 20%; }
.dy-bar i.w25 { width: 25%; }
.dy-bar i.w30 { width: 30%; }
.dy-bar i.w35 { width: 35%; }
.dy-bar i.w40 { width: 40%; }
.dy-bar i.w45 { width: 45%; }
.dy-bar i.w50 { width: 50%; }
.dy-bar i.w55 { width: 55%; }
.dy-bar i.w60 { width: 60%; }
.dy-bar i.w65 { width: 65%; }
.dy-bar i.w70 { width: 70%; }
.dy-bar i.w75 { width: 75%; }
.dy-bar i.w80 { width: 80%; }
.dy-bar i.w85 { width: 85%; }
.dy-bar i.w90 { width: 90%; }
.dy-bar i.w95 { width: 95%; }
.dy-bar i.w100 { width: 100%; }

/* ==================== 14. Logboek ==================== */
/* Kolommen en kleuren zoals de oude Webviewer en Notepad++. */

.log-bar { display: grid; gap: 12px; }
.lg-list { display: grid; }
.lg {
  padding: 8px 0; border-top: 1px solid var(--line); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.45;
  min-width: 0;
}
.card > .lg:first-child { border-top: 0; padding-top: 0; }
.lg:last-child { padding-bottom: 0; }
.lg-when { font-size: 11.5px; color: var(--muted); }
.lg-msg { white-space: pre-wrap; overflow-wrap: anywhere; }
/* logbestanden zoals de Webviewer: vaste kolommen, niet afbreken, opzij schuiven */
.lg-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lg-size { grid-auto-columns: 48px; }
.lg-card { padding: 12px 0; }
.lgw { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; padding: 0 16px; touch-action: pan-x pan-y; }
.card:not(.lg-card) > .lgw { margin: 0 -16px; }
/* één tabel: de stukken van een melding (tussen de tabs van de bot) staan in kolommen die over alle regels gelijk zijn */
.lgt { border-collapse: collapse; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; line-height: 1.55; white-space: pre; }
.lgt td { padding: 0 1.4ch 0 0; vertical-align: top; }
.lgt td:last-child { padding-right: 0; }
.lgt td.n { text-align: right; }
.lgt .lgr-t, .lgt .lgr-p { color: var(--muted); }
.lgt .lgr-p { opacity: .75; }
.lgt .lgr-d td { padding-top: 8px; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line); }
.lgt tr:first-child.lgr-d td { padding-top: 0; }
.lgw.wrap .lgt { white-space: pre-wrap; width: 100%; }
.lgw.wrap .lgt td { overflow-wrap: anywhere; }
/* kleuren van woorden, getallen en tekens (tokens --k-* in sectie 1) */
.k-ok { color: var(--k-ok); font-weight: 700; }
.k-xx { color: var(--k-xx); font-weight: 700; }
.k-iv { color: var(--k-iv); }
.k-coin { color: var(--k-coin); }
.k-cmp { color: var(--k-cmp); }
.k-num { color: var(--k-num); }

/* ==================== 15. Testen: archief, regels, simulatie, mandje ==================== */

/* archief: taken, rondes en voortgangsbalk */
.job { align-items: center; }
.job > .chip { align-self: center; flex: none; white-space: nowrap; }
.job > span:first-child { flex: 1; }
.rows > .run > span { flex: 1; text-align: left; }
.bar { display: block; height: 6px; margin-top: 6px; border-radius: 3px; background: var(--chip); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--brand); border-radius: 3px; transition: width .4s; }
/* breedte van de voortgang in stappen van 5% (geen inline stijl: de CSP blokkeert die) */
.bar i.w0 { width: 0%; }
.bar i.w5 { width: 5%; }
.bar i.w10 { width: 10%; }
.bar i.w15 { width: 15%; }
.bar i.w20 { width: 20%; }
.bar i.w25 { width: 25%; }
.bar i.w30 { width: 30%; }
.bar i.w35 { width: 35%; }
.bar i.w40 { width: 40%; }
.bar i.w45 { width: 45%; }
.bar i.w50 { width: 50%; }
.bar i.w55 { width: 55%; }
.bar i.w60 { width: 60%; }
.bar i.w65 { width: 65%; }
.bar i.w70 { width: 70%; }
.bar i.w75 { width: 75%; }
.bar i.w80 { width: 80%; }
.bar i.w85 { width: 85%; }
.bar i.w90 { width: 90%; }
.bar i.w95 { width: 95%; }
.bar i.w100 { width: 100%; }

.rule-btns { margin-top: 12px; }
.sc-list .rowlink.on .chev { color: var(--brand); }
.sc-list > .rowlink { border-top: 1px solid var(--line); padding: 11px 0; }
.sc-list > .rowlink:first-child { border-top: 0; padding-top: 0; }
.sc-list > .rowlink:last-child { padding-bottom: 0; }

.sc-go { align-self: end; }
/* regels: kop per soort, groepen en regels (een knop bij een proef) */
.re-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.rg-btn { width: 100%; background: none; border: 0; border-top: 1px solid var(--line); color: var(--fg); text-align: left; align-items: center; }
.rg-btn .rg-r { flex: 1; }
.rg-btn .chev { color: var(--muted); font-size: 20px; }
.rule-grp .rg-h { margin: 0 0 8px; }
.rg-row { display: flex; gap: 12px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 15px; }
.rg-row:nth-child(2) { border-top: 0; }
.rg-iv { flex: none; width: 64px; color: var(--muted); }
.rg-r { min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.rg-of { text-align: center; margin: 8px 0; }
/* regels: oude invoer per regel (rijen met keuzelijsten) */
.re-sec { display: grid; gap: 8px; }
.re-row {
  display: grid; grid-template-columns: 1fr 1fr 40px; grid-template-areas: "iv g del" "ind ind ind" "op val val"; gap: 6px; padding: 10px;
  border-radius: 14px; background: var(--chip);
}
.re-row > select, .re-row > input {
  font-size: 16px; color: var(--fg); background: var(--surface); border: 0; border-radius: 10px; height: 40px; padding: 0 10px; width: 100%; min-width: 0;
  -webkit-appearance: none; appearance: none;
}
.re-row > :nth-child(1) { grid-area: iv; }
.re-row > :nth-child(2) { grid-area: g; }
.re-row > .re-del { grid-area: del; }
.re-row > .re-ind { grid-area: ind; }
.re-row > :nth-child(5) { grid-area: op; }
.re-row > :nth-child(6) { grid-area: val; }
.re-del { height: 40px; border: 0; border-radius: 10px; background: none; color: var(--muted); font-size: 22px; }
/* regels: paneel van één regel (venster van onderen; moet na .bsheet staan) */
.rsheet { max-height: 88vh; overflow-y: auto; -webkit-overflow-scrolling: touch; gap: 0; }
.rsheet .bsheet-h { margin-bottom: 8px; }
.rsheet .chips { gap: 6px; }
.rs-sum { margin: 0 0 6px; font-size: 15px; }
.rs-l { margin: 12px 0 6px; }
.rs-fam { margin-bottom: 6px; }
.rs-fam .chip[aria-pressed="true"] { background: var(--brand); color: var(--brand-fg); }
.rs-num { display: grid; grid-template-columns: 48px 1fr 48px; gap: 8px; margin-top: 8px; }
.rs-num input { font-size: 18px; text-align: center; color: var(--fg); background: var(--chip); border: 0; border-radius: 14px; height: 48px; min-width: 0; }
.rs-num .chip { font-size: 22px; padding: 0; }
.rs-btns { margin-top: 16px; }

/* ---- Regelvenster als één zin (2026.11.62): zin bovenaan, dan tijdvak → indicator → vergelijking → waarde ---- */
.rs-sent { margin: 0 0 12px; padding: 12px 14px; border-radius: 16px; background: var(--chip); font-size: 16px; line-height: 1.45; }
.rs-sent b { font-weight: 700; }
.rs-sent.off { color: var(--muted); }
.rs-q { color: var(--muted); }
.rs-form { display: grid; gap: 14px; }
.rs-f { display: grid; gap: 6px; min-width: 0; }
.rs-f > .rs-l { margin: 0; font-size: 13px; font-weight: 600; color: var(--muted); }
.rs-iv button { font-size: 13px; line-height: 1.15; }
.rs-iv button small { display: block; font-size: 11px; font-weight: 500; color: var(--muted); }
.rs-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; min-width: 0; }
.rs-two .field select { height: 48px; font-size: 15px; }
.rs-two .rs-num { margin-top: 0; }
.rs-tech { color: var(--muted); font-weight: 500; overflow-wrap: anywhere; }
.rs-info { display: grid; gap: 4px; margin-top: 2px; padding: 10px 12px; border-radius: 12px; background: var(--surface2); box-shadow: inset 0 0 0 1px var(--line); line-height: 1.45; }
.rs-info p { margin: 0; }
.rs-info b { color: var(--fg); font-weight: 600; }
.rs-two .rs-num { grid-template-columns: 44px minmax(60px, 1fr) 44px auto; align-items: center; }
.rs-unit { font-size: 13px; color: var(--muted); white-space: nowrap; padding-left: 2px; }
.rs-yn { max-width: 260px; }
.rs-small { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--muted); }
.rs-g { display: inline-flex; align-items: center; gap: 8px; }
.rs-g select { height: 36px; min-width: 64px; border: 0; border-radius: 10px; background: var(--chip); color: var(--fg); font-size: 15px; padding: 0 8px; }
.rs-on { display: inline-flex; align-items: center; gap: 10px; }
.rsheet .rs-btns { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.rsheet .rs-btns .btn { width: auto; min-width: 140px; }
.rs-del { color: var(--out); font-weight: 600; }
.rs-del.sure { background: var(--out); color: #fff; border-radius: 16px; padding: 6px 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- aan/uit-schakelaar (klein, altijd zichtbaar); het tikvlak is groter dan de schakelaar ---- */
.sw {
  position: relative; flex: none; width: 30px; height: 18px; padding: 0; border: 0; border-radius: 9px; cursor: pointer;
  background: color-mix(in srgb, var(--muted) 45%, transparent); transition: background-color .15s;
}
.sw::before { content: ''; position: absolute; inset: -12px -8px; }
.sw::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .15s;
}
.sw[aria-checked="true"] { background: var(--in); }
.sw[aria-checked="true"]::after { transform: translateX(12px); }

/* ---- regels per groep (Analyse en Testen → Regels): rustig, weinig kaders ---- */
.rgx { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.rgx-type { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; }
.rgx-th { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rgx-th .small { flex: 1; }
.rgx-none { margin: 0; }
.rgx-grp { display: grid; grid-template-columns: minmax(0, 1fr); padding: 4px 12px 6px; border-radius: 14px; background: var(--surface2); box-shadow: inset 0 0 0 1px var(--line); min-width: 0; }
.rgx-gh { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 36px; font-size: 13px; cursor: default; }
.rgx-gh b { font-weight: 700; white-space: nowrap; }
.rgx-gh .small { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rgx-gdel { border: 0; background: none; color: var(--out); font-size: 12.5px; font-weight: 600; padding: 4px 6px; border-radius: 8px; white-space: nowrap; }
.rgx-gdel.sure, .rgx-del.sure { background: var(--out); color: #fff; }
.rgx-grp.off .rgx-gh b { color: var(--muted); }
.rgx-of { text-align: center; margin: -2px 0; }
.rgx-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-height: 40px; padding: 2px 0; border-top: 1px solid var(--line); min-width: 0; }
.rgx-iv { flex: none; width: 30px; font-size: 12px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.rgx-txt { flex: 1 1 0; min-width: 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rgx-txt b { font-weight: 600; color: var(--muted); margin-left: 2px; }
.rgx-v, .rgx-in, .rgx-bool { flex: none; width: 60px; height: 30px; font-size: 14px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; color: var(--fg); }
.rgx-v { line-height: 30px; padding: 0 6px; }
.rgx-in, .rgx-bool { border: 0; border-radius: 9px; background: transparent; padding: 0 6px; }
.rgx-bool { cursor: pointer; }
.rgx-in:focus, .rgx-row.open .rgx-in, .rgx-row.open .rgx-bool { background: var(--chip); outline: none; }
.rgx-tools { display: none; align-items: center; gap: 2px; }
.rgx-row.open .rgx-tools { display: inline-flex; }
.rgx-ic {
  flex: none; min-width: 28px; height: 28px; border: 0; border-radius: 8px; background: none; color: var(--muted); padding: 0 4px;
  font-size: 17px; font-weight: 600; display: inline-grid; place-items: center; white-space: nowrap;
}
.rgx-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rgx-ic.wp-show[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.rgx-del.sure { font-size: 12px; padding: 0 8px; }
.rgx-offt { flex: none; }
.rgx-amt { flex: 1 1 100%; padding-left: 36px; }
.rgx-add { justify-self: start; border: 0; background: none; color: var(--muted); font-size: 13px; font-weight: 600; padding: 6px 0 2px; }
.rgx-add:hover { color: var(--fg); }
.rgx-gh .rgx-t { display: none; }
.rgx-grp.open .rgx-gh .rgx-t { display: inline-block; }
/* uitgezet: grijs en licht doorgestreept */
.rgx-row.off .rgx-iv, .rgx-row.off .rgx-txt, .rgx-row.off .rgx-v, .rgx-row.off .rgx-in, .rgx-row.off .rgx-bool {
  color: var(--muted); opacity: .7; text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 55%, transparent);
}

/* telefoon: na een tik komt de bediening op een eigen regel, met grotere knoppen */
@media (max-width: 1099px) {
  .rgx-row.open .rgx-tools { flex: 1 1 100%; justify-content: flex-end; gap: 6px; order: 5; padding-bottom: 4px; }
  .rgx-row.open .rgx-ic { min-width: 40px; height: 40px; background: var(--chip); color: var(--fg); border-radius: 12px; }
  .rgx-row.open .rgx-ic.rgx-del.sure { background: var(--out); color: #fff; }
  .rgx-in, .rgx-bool, .rgx-v { height: 36px; }
  .rgx-txt { white-space: normal; line-height: 1.25; padding: 4px 0; } /* telefoon: lange namen op twee regels in plaats van afgekapt */
  .rgx-gdel { padding: 8px 10px; }
}
/* muis: bediening bij aanwijzen */
@media (hover: hover) and (pointer: fine) {
  .rgx-row:hover .rgx-tools, .rgx-row:focus-within .rgx-tools { display: inline-flex; }
  .rgx-row:hover .rgx-in, .rgx-row:hover .rgx-bool { background: var(--chip); }
  .rgx-grp:hover .rgx-gh .rgx-t { display: inline-block; }
  .rgx-ic:hover { background: var(--chip); color: var(--fg); }
  .rgx-gdel:not(.sure):hover { background: color-mix(in srgb, var(--out) 12%, transparent); }
}

/* ---- Analyse: kaart per jaar en "slechtste dip" als knop ---- */
.wp-diplink { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; }
.wp-diplink:hover { color: var(--out); }
.wp-yrbtn { min-height: 0; height: 20px; line-height: 20px; padding: 0 9px; font-size: 12px; vertical-align: 0; margin-left: 4px; }
@media (min-width: 1100px) and (max-width: 1399px) { .wp-py { display: none; } }
@media (min-width: 1100px) and (max-width: 1699px) { .wp-py2 { display: none; } }
.wp-years { display: grid; gap: 2px; padding: 12px 14px; }
.wp-years.wp-off { display: none; }
.wp-years .rb-dh { margin-bottom: 4px; }
.wy-head, .wy-row { display: grid; grid-template-columns: 44px minmax(50px, 1fr) 76px 76px 50px 50px; gap: 8px; align-items: center; }
.wy-head { padding: 0 6px; }
.wy-head > :nth-child(n+3), .wy-row > :nth-child(n+3) { text-align: right; }
.wy-row { min-height: 40px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--fg); padding: 4px 6px; font-size: 14px; border-radius: 8px; width: 100%; }
.wy-row.on { background: var(--chip); }
.wy-y { font-weight: 700; text-align: left; }
.wy-bars { display: grid; gap: 3px; }
.wy-bars .dy-bar { height: 6px; }
.wy-hold i { background: color-mix(in srgb, var(--muted) 60%, transparent); }
.wy-b { display: grid; line-height: 1.15; }
.wy-b b { font-weight: 700; }
.wy-was { font-size: 11px; color: var(--muted); font-weight: 500; }
.wy-h, .wy-d { color: var(--muted); }
.wy-note { margin: 6px 0 0; }
@media (hover: hover) and (pointer: fine) { .wy-row:hover { background: color-mix(in srgb, var(--fg) 5%, transparent); } }
@media (max-width: 520px) {
  .wy-head, .wy-row { grid-template-columns: 40px minmax(30px, 1fr) 64px 58px 40px 44px; gap: 5px; font-size: 13px; }
}

.btn.danger { background: var(--out); color: #fff; }

.rb-dh { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.rb-dh .link { padding: 0; }

.rb-sw-k-ok { background: var(--k-ok); }
.rb-sw-k-coin { background: var(--k-coin); }

/* Voorstel van het onderzoek (Regels) en logboek van proeven (Simulatie) */
.prop > .rowlink { width: 100%; padding: 0 0 10px; }
.prop .prop-body { margin: 2px 0 10px; }
.prop .prop-body > * { font-size: 14px; }
.prop-list {
  margin: 6px 0 10px;
  padding-left: 18px;
  font-size: 14px;
  color: var(--muted);
}
.prop-list li { margin: 2px 0; }
.prop .btn { width: 100%; }
.warn-t { color: var(--warn-fg); }

.wp-note { display: none; }
.wp-top { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; }
.wp-top .field { flex: 1 1 130px; }
.wp-top .wp-f-sc { flex: 2 1 220px; }
.wp-top .wp-f-m { flex: 0 1 130px; }
.wp-top .wp-f-d { flex: 0 1 150px; }
.wp-top .wp-f-c { flex: 1 1 170px; }
.wp-checks { display: flex; gap: 14px; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; }
.wp-chk { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.wp-chk input { width: 18px; height: 18px; margin: 0; accent-color: var(--fg); }
.wp-btns { display: flex; gap: 8px; flex: 1 1 220px; }
.wp-btns .btn { min-height: 44px; flex: 1 1 auto; }
.wp-cloud p { line-height: 1.45; }
.wp-grid { display: grid; gap: 16px; min-width: 0; }
.wp-left { display: grid; gap: 10px; min-width: 0; align-content: start; }
.wp-host { min-width: 0; }
.wp-panel { display: grid; gap: 8px; min-width: 0; }
.wp-out { min-height: 44px; display: grid; gap: 2px; padding: 0 4px; }
.wp-res { font-size: 15px; line-height: 1.4; }
.wp-diff { font-size: 14px; }
.wp-busy { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.wp-zoom { max-width: 460px; }
.wp-zoom button { font-size: 13px; padding: 4px 2px; min-height: 34px; white-space: nowrap; }
.wp-chart { position: relative; height: 420px; background: var(--surface); border-radius: 22px; box-shadow: var(--card-sh); overflow: hidden; }
.wp-ov { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.wp-cv { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; -webkit-user-select: none; user-select: none; }
.wp-cv.hit { cursor: pointer; }
.wp-cv.drag { cursor: grabbing; }
.wp-pbar { display: grid; gap: 8px; }
.wp-pchip span { margin-left: 4px; opacity: .6; }
.wp-ml { margin-top: 4px; }
.wp-ivs { padding: 8px; border-radius: 14px; background: var(--chip); }
.wp-ivs .chip { background: var(--surface); }
.wp-ivs .chip:disabled { opacity: .45; }
.wp-rules { display: grid; gap: 12px; align-content: start; min-width: 0; }
.wp-rh { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.wp-rn { min-width: 0; overflow-wrap: anywhere; }
.wp-cp { display: flex; gap: 6px; flex: none; }
.wp-rn > .wp-cp { float: right; margin: -4px 0 -8px 10px; } /* knoppen rechts; de naam loopt er netjes omheen (2026.11.123) */
.wp-box { display: grid; gap: 8px; padding: 10px; border-radius: 14px; background: var(--chip); }
.wp-box .link { justify-self: start; padding: 0; }
.wp-box .btn { min-height: 40px; font-size: 15px; }
.wp-ta {
  font: 13px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--fg); background: var(--surface); border: 0; border-radius: 10px;
  padding: 8px 10px; width: 100%; min-width: 0; resize: vertical; white-space: pre; overflow: auto;
}
.wp-tabs { grid-auto-columns: minmax(0, 1fr); }
.wp-tabs button { font-size: 12.5px; padding: 4px 2px; line-height: 1.15; min-height: 44px; }
.wp-tabs button small { display: block; font-size: 11px; font-weight: 500; color: var(--muted); }
.wp-how { line-height: 1.4; }
.wp-h3 { font-size: 15px; font-weight: 700; }
.wp-type { display: grid; gap: 6px; }
.wp-type .re-h { margin-bottom: 0; }
.wp-grp { display: grid; gap: 2px; padding: 8px 10px; border-radius: 14px; background: var(--surface2); border: 1px solid var(--line); }
.wp-of { text-align: center; margin: -2px 0; }
.wp-rule { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 40px; border-top: 1px solid var(--line); padding: 4px 0; }
.wp-grp > .small + .wp-rule { border-top: 0; }
.wp-rt { flex: 1 1 110px; font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
.wp-rt b { font-weight: 700; margin-left: 2px; }
.wp-val { display: inline-flex; align-items: center; gap: 4px; }
.wp-val .chip { width: 30px; padding: 0; font-size: 16px; }
.wp-val input {
  width: 72px; height: 32px; border: 0; border-radius: 10px; background: var(--chip); color: var(--fg); padding: 0 8px; font-size: 14px;
  text-align: right; font-variant-numeric: tabular-nums;
}
.wp-bool { min-width: 46px; }
.wp-ico {
  width: 32px; height: 32px; border: 0; border-radius: 10px; background: none; color: var(--muted); font-size: 20px; display: grid; place-items: center; padding: 0;
}
.wp-ico:hover { background: var(--chip); color: var(--fg); }
.wp-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wp-amt { flex: 1 1 100%; }
.wp-set .field { font-size: 13px; }
.wp-detail .rb-dh { margin-bottom: 4px; }
/* alleen op een laptop (sectie 20): + Indicator, (i) en de koers van nu in het label */
.wp-f-i, .wp-info, .wp-howbtn, .wp-cnote { display: none; }
/* aan/uit-knop "Toon in grafiek" bij een regel: aan = gevuld */
.wp-ico.wp-show[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
/* ja/nee-schakelaar bij een regel (Analyse) en in het regelvenster (Testen → Regels) */
.wp-yn { display: inline-grid; grid-auto-columns: 44px; padding: 2px; border-radius: 11px; }
.wp-yn button { min-height: 28px; padding: 0 4px; font-size: 13px; border-radius: 9px; }
.rs-yn { max-width: 220px; }
.nu-trades { display: contents; }
.wp-now { font-weight: 600; color: var(--fg); }
/* ---- Analyse 2026.11.64: instellen/controleren, jaarstrook, voorstellen, naam van een proef ---- */
.wp-out { order: 1; } .wp-vd { order: 2; } .wp-bar { order: 3; } .wp-chart { order: 4; } .wp-ys, .wp-sb { order: 5; } /* balk instellen/controleren onder de grafiek (2026.11.113, wens Gert) */
.wp-detail, .wp-years, .wp-x, .mk-pc { order: 6; } .mk-lt { order: 3; }
/* oordeel na Controleer (2026.11.66): groen houdt stand, oranje twijfelachtig, rood valt tegen */
.wp-vd { display: flex; align-items: flex-start; gap: 10px; padding: 8px 12px; border-radius: 14px; font-size: 13px; line-height: 1.4; color: var(--fg); }
.wp-vd.wp-off { display: none; }
.wp-vd.vd-goed { background: var(--in-bg); --vd: var(--in); }
.wp-vd.vd-twijfel { background: var(--mid-bg); --vd: var(--mid); }
.wp-vd.vd-slecht { background: var(--out-bg); --vd: var(--out); }
.vd-ic { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--vd); margin-top: 1px; }
.vd-ic svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.vd-b { min-width: 0; display: grid; gap: 1px; }
.vd-b p { margin: 0; }
.vd-t { font-size: 14px; }
.vd-t b { color: var(--vd); }
.vd-l { color: var(--fg); }
.vd-few { color: var(--muted); }
.vd-w { display: flex; align-items: flex-start; gap: 5px; color: var(--muted); }
.vd-w svg { flex: none; width: 15px; height: 15px; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* balk instellen/controleren (2026.11.66): één rij, alles 30 px hoog en verticaal gecentreerd */
.wp-sb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 5px 6px 5px 10px; border-radius: 14px; background: var(--chip); font-size: 13px; }
.wp-sb .ws, .wp-cnt .cs { display: none; }
.wp-sb .chip-s, .wp-sb .tag { height: 30px; min-height: 30px; display: inline-flex; align-items: center; white-space: nowrap; }
.wp-sb .chip-s { padding: 0 10px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.wp-sb .chip-s[aria-pressed="true"] { box-shadow: none; }
.wp-sbon { display: inline-flex; align-items: center; gap: 8px; height: 30px; font-size: 13px; font-weight: 600; color: var(--fg); cursor: pointer; white-space: nowrap; flex: none; }
.wp-sbon .sw { display: block; }
.wp-sbon input:checked + .sw { background: var(--in); }
.wp-sbon input:checked + .sw::after { transform: translateX(12px); }
.wp-sbon input:focus-visible + .sw { outline: 2px solid var(--fg); outline-offset: 2px; }
.wp-sbd { position: relative; gap: 6px; font-weight: 600; cursor: pointer; flex: none; }
.wp-sbd input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; font-size: 16px; color-scheme: light dark; }
.wp-sbd:focus-within { outline: 2px solid var(--fg); outline-offset: 1px; }
.wp-sb.off .wp-sbd, .wp-sb.off .wp-xi { opacity: .45; }
.wp-sbs { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.wp-chkbtn { height: 30px; min-height: 30px !important; padding: 0 14px; font-size: 13px; border-radius: 15px; width: auto; flex: none; }
.wp-cnt { white-space: nowrap; }
.wp-cnt b { color: var(--fg); }
.wp-sb .tag { padding: 0 10px; border-radius: 15px; }
.wp-sbr { display: inline-flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.wp-xi { width: 30px; padding: 0 !important; justify-content: center; flex: none; font-weight: 800; font-family: Georgia, serif; font-style: italic; }
.wp-xi[aria-pressed="true"], .wp-sbr .chip[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.wp-sbr .chip:disabled { opacity: .45; }
/* Meer ▾ (2026.11.74, besluit Gert): past de balk niet (of telefoon), dan staan Voorstellen, Zoek nieuwe regels en
   Kopieer voor Claude in een klein uitklapmenu; zelfde stijl als de knop Trades. Anders liggen ze los (display: contents). */
.wp-sbr { position: relative; }
.wp-sbmb { display: none !important; gap: 4px; font-weight: 600; }
.wp-sbmb svg { flex: none; width: 15px; height: 15px; margin-right: -3px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.wp-sbmb[aria-expanded="true"] svg { transform: rotate(180deg); }
.wp-sbmp { display: contents; }
.wp-sb.more .wp-sbmb { display: inline-flex !important; }
.wp-sb.more .wp-sbmp {
  display: none; position: absolute; z-index: 30; top: calc(100% + 6px); right: 0; width: 220px; padding: 6px 12px; border-radius: 16px;
  background: var(--sheet); color: var(--fg); box-shadow: 0 0 0 1px var(--line), 0 12px 32px rgba(0,0,0,.16);
}
.wp-sb.more .wp-sbmp.open { display: block; }
.wp-sb.more .wp-sbmp .chip-s {
  display: flex; width: 100%; height: auto; min-height: 40px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  color: var(--fg); font: inherit; font-size: 14px; font-weight: 500; text-align: left; justify-content: flex-start; white-space: nowrap; cursor: pointer;
}
.wp-sb.more .wp-sbmp .chip-s + .chip-s { border-top: 1px solid var(--line); }
.wp-sb.more .wp-sbmp .chip-s[aria-pressed="true"] { background: none; color: var(--fg); font-weight: 600; }
.wp-sb.more .wp-sbmp .chip-s[aria-pressed="true"]::after { content: "✓"; margin-left: auto; color: var(--muted); }
.wp-sb.more .wp-sbmp .chip-s:disabled { color: var(--muted); opacity: .6; cursor: default; }
.wp-sb.mopen { position: relative; z-index: 8; } /* menu boven de grafiek en de kaart over de grafiek */
.wp-ctl { color: var(--fg); }
.wp-lock { color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.wp-lock svg, .wys-lk { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -2px; }
/* jaarstrook: per jaar jaartal + % (groen/rood), tik = inzoomen; controlejaren met slotje zolang de controle dicht is */
.wp-ys { position: relative; /* .sr (slotje) blijft binnen de strook */ display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: thin; padding: 2px 2px 4px; }
.wp-ys.wp-off { display: none; }
.wys-l { flex: none; margin-right: 2px; }
.wys-y { flex: none; display: inline-flex; align-items: baseline; gap: 5px; border: 0; border-radius: 9px; background: var(--chip); color: var(--fg); padding: 3px 9px; font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.wys-y b { font-weight: 700; }
.wys-y .num.up, .wys-y .up { color: var(--in); }
.wys-y .down { color: var(--out); }
.wys-y.on { box-shadow: inset 0 0 0 1.5px var(--fg); }
.wys-y.ctl { box-shadow: inset 0 0 0 1px var(--line); background: transparent; }
.wys-y.lock { cursor: default; color: var(--muted); background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.wys-i { flex: none; width: 28px; min-height: 26px; padding: 0; margin-left: 2px; font-weight: 800; font-family: Georgia, serif; font-style: italic; }
.wys-i[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
/* kaart: uitleg instellen/controleren of de voorstellen */
.wp-x { display: grid; gap: 8px; padding: 12px 14px; }
.wp-x.wp-off { display: none; }
.wp-x .rb-dh { margin-bottom: 0; }
.wp-x p { line-height: 1.45; }
.wp-sgc { display: grid; gap: 4px; padding: 8px 10px; border-radius: 12px; background: var(--chip); }
.wp-sgt { font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.wp-sgtake { justify-self: start; width: auto; min-height: 32px !important; padding: 0 14px; font-size: 13px; }
.wp-sgbar { height: 6px; border-radius: 3px; background: var(--chip); overflow: hidden; }
.wp-sgbar i { display: block; height: 100%; background: var(--fg); transition: width .2s; }
.wp-x .wp-busy { position: static; transform: none; box-shadow: none; padding: 0; background: none; }
/* naam van een proef */
.wp-ren { display: flex; gap: 6px; align-items: center; min-width: 0; }
.wp-ren select, .wp-ren input { flex: 1 1 auto; min-width: 0; }
.wp-pen { flex: none; width: 34px; padding: 0; display: grid; place-items: center; }
.wp-pen:disabled { opacity: .4; }
.wp-pen-i { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.wp-f-m > span { white-space: nowrap; }
@media (max-width: 1099px) {
  .wp-note { display: flex; }
}

/* ==================== 16. Instellingen: gewoon scherm dat eruitziet als een pagina ==================== */

@media (max-width: 1099px) { body.in-set .topbar, body.in-set nav.tabs { display: none; } } /* laptop: balk en tabbladen blijven (2026.11.126) */
/* kop met terugknop (ook op de pagina van rechts) */
.set-h {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 9; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 calc(-1 * max(16px, env(safe-area-inset-left, 0px)));
  padding: 10px max(16px, env(safe-area-inset-right, 0px)) 14px max(16px, env(safe-area-inset-left, 0px));
  background: linear-gradient(var(--bg) 45%, transparent);
}
.set-h h1 { font-size: 20px; font-weight: 800; }
.back { width: 44px; height: 44px; border: 0; border-radius: 22px; display: grid; place-items: center; color: var(--fg); padding: 0; }
.back svg, .xbtn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.spacer { width: 44px; }
section.setview.anim { animation: pageIn .28s cubic-bezier(.2,.8,.2,1); }
section.setview.leaving {
  position: fixed; left: 0; right: 0; z-index: 30; background: var(--bg); animation: pageOut .22s cubic-bezier(.4,0,1,1) forwards;
}
/* uitklapblokken */
details.blk { background: var(--surface); border-radius: 22px; box-shadow: var(--card-sh); }
details.blk > summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 56px; padding: 0 16px;
  font-size: 17px; font-weight: 700; cursor: pointer;
}
details.blk > summary::-webkit-details-marker { display: none; }
details.blk > summary span { font-size: 14px; font-weight: 500; color: var(--muted); }
details.blk > summary span::after { content: " ›"; display: inline-block; margin-left: 4px; transition: transform .2s; }
details.blk[open] > summary span::after { transform: rotate(90deg); }
/* verwijzing naar een tab (2026.11.85: Munten), zelfde vorm als een dicht blok */
.blk-link {
  width: 100%; border: 0; background: var(--surface); color: var(--fg); border-radius: 22px; box-shadow: var(--card-sh);
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 56px; padding: 0 16px;
  font: inherit; font-size: 17px; font-weight: 700; text-align: left; cursor: pointer;
}
.blk-link span { font-size: 14px; font-weight: 500; color: var(--muted); }
.blk-link span::after { content: " ›"; display: inline-block; margin-left: 4px; }
.blk-in { display: grid; gap: 12px; padding: 0 16px 16px; }
/* Instellingen → Bitvavo-verbinding (2026.11.82): uitleg links, label rechts (blijft op één regel) */
.bv-rows > * { align-items: flex-start; }
.bv-rows > * > span:first-child { min-width: 0; }
.bv-rows .tag { flex: none; white-space: nowrap; margin-top: 2px; }
.bv-rows .small { display: inline-block; margin-top: 2px; }
.bv-h3 { margin: 6px 0 -4px; }
/* Orderproef (2026.11.83): waarschuwing, bevestiging, stappen en logboek */
.bvp-warn { line-height: 1.4; }
.bvp-sure { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.35; }
.bvp-sure input { width: 22px; height: 22px; flex: none; margin: 0; accent-color: var(--out); }
.bvp-run { display: grid; gap: 10px; }
.bvp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.bvp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bvp-steps li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.35; color: var(--muted); }
.bvp-steps li i { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; background: var(--chip); }
.bvp-steps li.done { color: var(--fg); }
.bvp-steps li.done i { background: var(--in); color: var(--surface); }
.bvp-steps li.cur { color: var(--fg); font-weight: 600; }
.bvp-steps li.cur i { background: var(--warn-bg); color: var(--warn-fg); }
.bvp-steps li.skip i { background: var(--surface2); }
.bvp-log summary { cursor: pointer; }
.bvp-log ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.bvp-log li.err { font-size: 13px; }
/* thema: tegels met een klein voorbeeld */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tile {
  display: grid; gap: 8px; padding: 8px 8px 10px; border-radius: 18px; border: 0; background: var(--surface2); box-shadow: inset 0 0 0 1px var(--line);
  font-size: 14px; font-weight: 600; text-align: center;
}
.tile[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--brand); background: color-mix(in srgb, var(--brand) 10%, var(--surface)); }
.mini { height: 70px; border-radius: 12px; padding: 8px; display: grid; gap: 5px; align-content: start; overflow: hidden; }
.mini i { display: block; height: 14px; border-radius: 5px; }
.mini i:first-child { width: 55%; height: 8px; border-radius: 4px; }
.mini.light { background: #f5f5f2; }
.mini.light i { background: #fff; }
.mini.light i:first-child { background: #1a1c1b; }
.mini.dark { background: #141615; }
.mini.dark i { background: #1e2120; }
.mini.dark i:first-child { background: #edefee; }
.mini.auto { background: linear-gradient(135deg, #f5f5f2 50%, #141615 50%); }
.mini.auto i { background: rgba(127,127,127,.35); }
.mini.auto i:first-child { background: #7f7f7f; }
/* accentkleur: rondjes */
.swatches { display: flex; gap: 14px; flex-wrap: wrap; }
.swatch { display: grid; justify-items: center; gap: 6px; border: 0; background: none; padding: 0; font-size: 13px; color: var(--muted); }
.swatch i { width: 44px; height: 44px; border-radius: 22px; display: block; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.swatch[aria-pressed="true"] { color: var(--fg); font-weight: 600; }
.swatch[aria-pressed="true"] i { box-shadow: 0 0 0 2.5px var(--bg), 0 0 0 4.5px var(--fg); }
.sw-orange { background: #f26b21; }
.sw-blue { background: #2f6ea3; }
.sw-green { background: #2e7d32; }
.sw-yellow { background: #f2c230; }
/* aan/uit-schakelaar */
.switch { position: relative; width: 51px; height: 31px; border-radius: 16px; border: 0; padding: 0; background: var(--chip); flex: none; transition: background .2s; }
.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,.2); transition: transform .2s;
}
.switch[aria-checked="true"] { background: var(--in); }
.switch[aria-checked="true"]::after { transform: translateX(20px); }
.version { text-align: center; font-size: 13px; color: var(--muted); padding: 8px 0 4px; }

/* ==================== 17. Liggend (telefoon gedraaid) ==================== */

@media (orientation: landscape) and (max-height: 520px) {
  /* breder, maar niet eindeloos: kaarten blijven leesbaar */
  .shell, .topbar { max-width: 760px; }
  nav.tabs { max-width: 420px; }
  /* een grafiek nooit hoger dan het scherm */
  .chart { max-height: 64vh; }
  .card .chart { margin: 0 auto; }
  /* logboek: de hele breedte, alles boven in één rij, zo veel mogelijk regels in beeld */
  .page-in.log-wide { max-width: none; gap: 10px; }
  .page-in.log-wide .set-h { padding-top: 6px; padding-bottom: 8px; margin-bottom: -4px; }
  .page-in.log-wide .set-h h1 { font-size: 17px; }
  .page-in.log-wide .log-bar { display: flex; align-items: center; gap: 12px; }
  .page-in.log-wide .log-bar > .seg { flex: 1 1 auto; max-width: 460px; }
  .page-in.log-wide .lg-tools { flex: 0 0 auto; gap: 10px; }
  .page-in.log-wide .log-info { display: none; }
  .page-in.log-wide .lg-card { padding: 10px 0; }
}

/* ==================== 18. Beweging en plaatshouders ==================== */
/* Huisstijl §5: alleen bij iets nieuws, nooit bij verversen. */

/* scherm komt in beeld: blokken schuiven zacht omhoog, kort na elkaar */
.view.enter > * { animation: fadeUp .34s cubic-bezier(.2,.8,.2,1) both; }
.view.enter > *:nth-child(2) { animation-delay: .04s; }
.view.enter > *:nth-child(3) { animation-delay: .08s; }
.view.enter > *:nth-child(4) { animation-delay: .12s; }
.view.enter > *:nth-child(5) { animation-delay: .16s; }
.view.enter > *:nth-child(n+6) { animation-delay: .2s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* grafieken tekenen zich van links naar rechts; markeringen van de bot komen daarna */
.chart.draw, .range.draw { animation: wipe .5s cubic-bezier(.3,.7,.2,1) both; }
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.chart.draw .mk { animation: markIn .3s .35s cubic-bezier(.34,1.56,.64,1) both; transform-box: fill-box; transform-origin: center; }
@keyframes markIn { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
/* oude grafiek gedimd tot de nieuwe binnen is */
.card .chart { transition: opacity .25s; }
.card.stale .chart { opacity: .35; }
/* tikken: kaarten en knoppen geven mee */
.trade, .ev, .chip, .seg button, .btn, .tile, .link, .gbtn, .back, .xbtn, .menu button, .swatch i {
  transition: transform .15s ease, background-color .2s, color .2s, box-shadow .2s;
}
.trade:active, .chip:active, .btn:active, .tile:active { transform: scale(.98); }
.ev:active, .menu button:active { background-color: var(--chip); }
.gbtn:active, .back:active, .xbtn:active, .seg button:active, .swatch:active i { transform: scale(.92); }

/* plaatshouders zolang de gegevens onderweg zijn */
.skel { position: relative; overflow: hidden; background: var(--chip); border-radius: 22px; }
.skel::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 55%, transparent), transparent);
  animation: shimmer 1.3s ease-in-out infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }
.sk-title { height: 36px; width: 62%; border-radius: 12px; }
.sk-h2 { height: 20px; width: 36%; border-radius: 8px; }
.sk-card { height: 168px; }
.sk-list { height: 220px; }
.sk-chips { height: 40px; }
.sk-seg { height: 46px; border-radius: 14px; }
.sk-chart { height: 260px; }
.sk-chart2 { height: 210px; }
.sk-ind { height: 120px; }
.skel-lines { display: grid; gap: 10px; }
.sk-row { height: 12px; border-radius: 6px; }
.sk-row:nth-child(odd) { width: 86%; }

/* ==================== 19. Themawissel, glanslijn en minder beweging ==================== */

/* themawissel: korte sluier in de nieuwe kleur */
.veil { position: fixed; inset: 0; z-index: 70; background: var(--bg); pointer-events: none; animation: veilOut .35s ease forwards; }
@keyframes veilOut { from { opacity: 1; } to { opacity: 0; } }

/* glanslijn over de glazen knoppen (bij openen en terugkomen) */
.glass-shine .topbar .glass::after, .glass-shine nav.tabs::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.55) 50%, transparent 62%) no-repeat;
  background-size: 300% 100%; background-position: 120% 0;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: glassShine 1.1s cubic-bezier(.4,0,.2,1) forwards;
}
.glass-shine nav.tabs::after { animation-delay: .12s; }
@keyframes glassShine { from { background-position: 120% 0; opacity: 1; } 85% { opacity: 1; } to { background-position: -20% 0; opacity: 0; } }

/* minder beweging (instelling van de telefoon): geen animaties en overgangen */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .glass-shine .topbar .glass::after, .glass-shine nav.tabs::after { display: none; }
}

/* Uitleg bij de uitkomsten (i) en per soort simulatie */
.out-info { margin: 8px 2px 0; }
.out-info summary { cursor: pointer; color: var(--muted); font-size: 14px; list-style: none; }
.out-info summary::-webkit-details-marker { display: none; }
.out-info p { margin: 6px 0 0; line-height: 1.45; }

/* Uitkomst-rij: label en bedrag naast elkaar, de toelichting eronder over de hele breedte */
.rows > .out-row { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; row-gap: 2px; align-items: baseline; }
.rows > .out-row > .out-sub { grid-column: 1 / -1; text-align: left; }
/* Instellingen met uitleg en "In het kort" */
.set-help { display: block; margin: -2px 0 6px; line-height: 1.4; }
.sc-summary { margin-top: 12px; }

/* ==================== 20. Laptop (≥ 1100 px) ==================== */
/*
  Telefoon en tablet staand blijven zoals ze zijn. De blokken .lt, .lt-col en .lt-sub (functie Lt in app.js) doen daar
  niets (display: contents): hun inhoud staat dan gewoon onder elkaar in het scherm. Op een laptop worden het kolommen.
  Navigatie: de onderbalk staat op een laptop als pil midden in de bovenbalk, met namen (rustiger dan een balk onderin
  of een zijbalk: alles wat je bedient staat bovenaan op één lijn, en de inhoud houdt de hele breedte).
*/
.lt, .lt-col { display: contents; }
.lt-only { display: none; }
/* binnenkomen: ook de blokken in een kolom schuiven zacht in (de kolom zelf heeft geen vlak) */
.view.enter > .lt > .lt-col > * { animation: fadeUp .34s .06s cubic-bezier(.2,.8,.2,1) both; }
@keyframes sheetPop { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes sheetFade { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(10px) scale(.98); } }

@media (min-width: 1100px) {
  /* breder, met meer lucht aan de zijkant */
  .shell, .topbar { max-width: 1400px; }
  .shell { padding: 4px 32px 40px; }
  .topbar { padding-left: 32px; padding-right: 32px; }
  .set-h { margin-left: -32px; margin-right: -32px; padding-left: 32px; padding-right: 32px; }
  /* Instellingen op de laptop (2026.11.126, melding Gert "heel smal"): volle breedte, blokken in twee kolommen;
     het koersarchief (zelf al twee kolommen) over de hele breedte */
  /* 2026.11.128 (melding Gert "uitlijning niet goed"): raster van twee; dichte blokken naast elkaar (even hoog),
     een open blok, de uitleg bovenaan en de versie over de hele breedte */
  .setview > .view { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 16px; align-items: start; }
  .setview > .view > * { margin: 0; min-width: 0; }
  .setview > .view > :not(details):not(.blk-link), .setview > .view > details[open] { grid-column: 1 / -1; }
  .setview .set-h { position: static; background: none; }
  .setview .set-h .back { display: none; } /* terug en hulp staan al in de balk */
  .setview .set-h { justify-content: flex-start; }
  .setview .set-h h1 { font-size: 24px; }

  /* navigatie: pil midden in de bovenbalk, icoon met naam */
  nav.tabs {
    top: 10px; bottom: auto; left: 50%; right: auto; transform: translateX(-50%); z-index: 10;
    width: auto; max-width: none; height: 44px; margin: 0; padding: 0 4px; gap: 2px; border-radius: 22px;
  }
  nav.tabs button {
    flex: 0 0 auto; min-width: 0;
    width: auto; min-height: 36px; height: 36px; padding: 0 14px 0 6px; gap: 2px; border-radius: 18px;
    font-size: 14px; font-weight: 600; transition: color .15s, background-color .2s;
  }
  nav.tabs .ic { width: 28px; height: 28px; border-radius: 14px; }
  nav.tabs svg { width: 20px; height: 20px; }
  nav.tabs button.on { background: var(--chip); }
  nav.tabs button.on .ic { background: none; }

  /* kolommen */
  .lt { display: grid; gap: 24px; align-items: start; min-width: 0; }
  .lt-col { display: grid; gap: 24px; align-content: start; min-width: 0; }

  .lt-only { display: block; }
  .lt-hide { display: none; }
  .dash-years.lt-only { display: grid; }
  /* Nu: dashboard | open trades en saldo's, met wat de bot deed, beurzen en logboek daaronder; vanaf 1400 px drie kolommen */
  .lt-nu { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto 1fr; }
  .lt-nu > :nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
  .lt-nu > :nth-child(2) { grid-column: 2; grid-row: 1; }
  .lt-nu > :nth-child(3) { grid-column: 2; grid-row: 2; }
  /* formulier links, uitkomst rechts (Archief, Simulatie, Mandje, Route) */
  .lt-side { grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); }

  /* pagina van rechts: trade iets breder, het logboek over de hele breedte met alles boven in één rij */
  .page-in { max-width: 760px; padding-left: 32px; padding-right: 32px; }
  .page-in.log-wide { max-width: 1400px; gap: 12px; }
  .page-in.log-wide .log-bar { display: flex; align-items: center; gap: 12px; }
  .page-in.log-wide .log-bar > .seg { flex: 0 1 460px; }

  /* vensters van onderen: op een laptop een venster in het midden */
  .sheet-wrap { align-items: center; padding: 24px; }
  .bsheet {
    width: 100%; max-width: 560px; max-height: calc(100vh - 48px); margin: 0; border-radius: 28px; padding: 16px 20px 20px;
    animation: sheetPop .24s cubic-bezier(.2,.9,.3,1);
  }
  .rsheet { max-width: 620px; }
  .sheet-wrap.leaving .bsheet { animation: sheetFade .2s ease forwards; }

  /* ---- Analyse: alles op één scherm, zonder dat de pagina schuift ---- */
  /* hoogte = venster min de bovenbalk (10 + 44 + 14 px); de grafiek vult wat overblijft */
  body.wp-wide .shell, body.wp-wide .topbar { max-width: 1760px; padding-left: 20px; padding-right: 20px; }
  body.wp-wide .shell {
    height: calc(100vh - 68px); height: calc(100dvh - 68px); padding-top: 0; padding-bottom: 14px; display: flex; flex-direction: column;
  }
  body.wp-wide .shell > .view { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding-top: 0; }
  body.wp-wide .view > * { flex: none; }
  body.wp-wide .view > .wp-grid { flex: 1 1 auto; min-height: 0; }
  body.wp-wide .wp-head { display: none; }
  /* bovenaan één compacte rij */
  .wp-top { padding: 8px 12px; gap: 6px 10px; border-radius: 18px; flex-wrap: wrap; }
  .wp-top .field { gap: 2px; font-size: 12px; }
  .wp-top .field > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wp-top .field select, .wp-top .field input { height: 34px; font-size: 14px; border-radius: 10px; padding: 0 10px; }
  .wp-top .wp-f-m { flex: 0 1 160px; }
  .wp-top .wp-f-sc { flex: 3 1 240px; min-width: 200px; } /* 2026.11.126: scenarionaam past (melding Gert "heel smal") */
  .wp-top .wp-f-d { flex: 0 1 128px; }
  .wp-top .wp-f-c { flex: 1 1 130px; }
  .wp-top .wp-f-i { display: grid; flex: 1 1 120px; }
  .wp-checks { flex-direction: column; align-items: flex-start; gap: 0; min-height: 0; font-size: 13px; line-height: 1.3; }
  .wp-chk input { width: 15px; height: 15px; }
  .wp-btns { flex: 0 1 190px; gap: 6px; }
  .wp-btns .btn { min-height: 34px; font-size: 14px; padding: 0 12px; }
  .wp-cloud, .wp-top + .card { padding: 10px 14px; }
  /* grafiek links op volle hoogte, regels rechts met een eigen schuifbalk */
  .wp-grid { grid-template-columns: minmax(0, 1fr) 420px; grid-template-rows: minmax(0, 1fr); align-items: stretch; gap: 14px; }
  .wp-left { display: flex; flex-direction: column; min-height: 0; }
  .wp-left > .wp-host { flex: 1 1 auto; min-height: 0; }
  .wp-left > .wp-pbar { display: none; }
  .wp-panel { position: relative; height: 100%; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr) auto auto auto; gap: 6px 12px; }
  /* uitkomst en "was → nu": vaste hoogte, zodat de grafiek niet verspringt; de herkomst staat dan niet ernaast */
  /* 2026.11.113 (wens Gert): de grafiek begint bovenaan, gelijk met het regelblok; uitkomst en balk eronder */
  .wp-out { grid-column: 1 / -1; grid-row: 3; height: 58px; overflow: hidden; display: flex; flex-wrap: wrap; align-items: baseline; align-content: flex-start; gap: 0 14px; padding: 0 4px; line-height: 1.35; }
  .wp-res { font-size: 14px; }
  /* instellen/controleren: elk op één regel (periode staat in de tip van het woord) */
  .wp-out .wp-rg, .wp-out .wp-wr { display: none; }
  .wp-out .wp-res b[title] { text-decoration: underline dotted; text-underline-offset: 3px; }
  .wp-out > .small { display: none; }
  .wp-diff { font-size: 13px; }
  /* rekenen: een klein label boven in de grafiek */
  .wp-busy {
    position: absolute; z-index: 3; top: 44px; left: 50%; transform: translateX(-50%); padding: 4px 12px; border-radius: 999px;
    background: var(--surface); box-shadow: 0 0 0 1px var(--line), 0 6px 18px rgba(0,0,0,.12); white-space: nowrap;
  }
  /* 2026.11.113 (wens Gert): de balk instellen/controleren onder de grafiek en de jaarstrook */
  .wp-sb { grid-column: 1 / -1; grid-row: 4; flex-wrap: nowrap; padding: 4px 5px 4px 10px; min-width: 0; }
  .wp-sbs { flex-wrap: nowrap; white-space: nowrap; flex: none; }
  .wp-sbr { flex-wrap: nowrap; flex: none; }
  /* past het niet, dan stap voor stap korter (SB_Fit zet f1…f4), zodat er nooit iets afgekapt wordt */
  /* f1 en "Meer ▾" (.more, 2026.11.74) komen niet samen voor (SB_FIT) */
  .wp-sb.f1 .wp-sbr .wl, .wp-sb.f2 .wp-cnt .cl, .wp-sb.f3 .wp-sbon .wl, .wp-sb.f4 .wp-sbd .sbc { display: none; }
  .wp-sb.f1 .wp-sbr .ws, .wp-sb.f3 .wp-sbon .ws { display: inline; }
  .wp-sb.f2 .wp-cnt .cs { display: inline; }
  /* jaarstrook links en de zoomknoppen rechts onder de grafiek (2026.11.64), zodat de uitkomst bovenaan de hele breedte heeft */
  .wp-ys { grid-column: 1; grid-row: 2; min-width: 0; align-self: center; }
  .wp-bar { grid-column: 2; grid-row: 2; display: flex; align-items: center; gap: 8px; align-self: center; }
  .wp-zoom { width: 290px; }
  .wp-zoom button { min-height: 30px; padding: 4px 0; }
  .wp-info { display: block; width: 32px; padding: 0; font-weight: 800; font-family: Georgia, serif; font-style: italic; }
  .wp-info[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
  .wp-chart { grid-column: 1 / -1; grid-row: 1; height: auto; min-height: 0; }
  /* met een oordeel na Controleer een rij erbij tussen de balk en de grafiek (de grafiek wordt iets lager) */
  .wp-vd { grid-column: 1 / -1; grid-row: 4; padding: 5px 12px; }
  .wp-panel:has(> .wp-vd:not(.wp-off)) { grid-template-rows: minmax(0, 1fr) auto auto auto auto; }
  .wp-panel:has(> .wp-vd:not(.wp-off)) > .wp-sb { grid-row: 5; }
  /* uitleg instellen/controleren en voorstellen: zwevend rechtsboven over de grafiek, zoals de kaart per jaar */
  .wp-x {
    position: absolute; z-index: 2; right: 14px; top: 40px; width: min(520px, calc(100% - 28px)); max-height: calc(100% - 200px); overflow: auto;
    box-shadow: 0 0 0 1px var(--line), 0 12px 32px rgba(0,0,0,.18); scrollbar-width: thin;
  }
  /* gekozen trade of uitleg: zwevend kaartje linksboven in de grafiek */
  .wp-detail {
    position: absolute; z-index: 2; left: 14px; top: 104px; width: min(400px, 70%); padding: 12px 14px;
    box-shadow: 0 0 0 1px var(--line), 0 12px 32px rgba(0,0,0,.18);
  }
  .wp-detail.wp-off { display: none; }
  /* kaart per jaar: zwevend rechtsboven over de grafiek, schuift zelf als er veel jaren zijn */
  .wp-years {
    position: absolute; z-index: 2; right: 14px; top: 104px; width: min(470px, calc(100% - 28px)); max-height: calc(100% - 150px); overflow: auto;
    box-shadow: 0 0 0 1px var(--line), 0 12px 32px rgba(0,0,0,.18); scrollbar-width: thin;
  }
  .wp-dx { justify-self: start; padding: 6px 0 0; }
  .wp-rules { position: static; height: 100%; max-height: none; overflow: auto; overscroll-behavior: contain; }
  /* rustige, dunne schuifbalk in een kaart die zelf schuift */
  .wp-rules, body.nu-fit .nu-scroll { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted) 45%, transparent) transparent; }

  /* zonder koerspakketten: korte regel boven in de grafiek in plaats van een blok erboven */
  body.wp-wide .wp-cloud { display: none; }
  .wp-cnote.on {
    display: block; position: absolute; z-index: 2; top: 24px; left: 50%; transform: translateX(-50%); width: max-content; max-width: min(720px, calc(100% - 120px));
    margin: 0; padding: 5px 12px; border-radius: 12px; background: var(--warn-bg); color: var(--fg); line-height: 1.4; text-align: center;
  }
  .wp-cnote b { font-weight: 700; }

  /* regelpaneel compact: uitleg achter (i), Proef maken als gewone knop in de kop, lagere rijen */
  .wp-rules { grid-template-columns: minmax(0, 1fr) auto; gap: 6px; padding: 10px 14px 12px; }
  /* kop: knoppen rechts naast de naam; de regel eronder (bewaard, alleen een proef …) krijgt de hele breedte */
  .wp-rh { display: block; position: relative; }
  .mk-set .wp-rh .wp-cp { position: absolute; top: -2px; right: 0; }
  .mk-set .wp-rn::before { content: ''; float: right; width: 118px; height: 22px; } /* ruimte voor Standaard, alleen op de eerste regel */
  .wp-undo { width: 30px; padding: 0; font-size: 16px; }
  .wp-undo:disabled { opacity: .35; }
  .wp-rn .small { line-height: 1.35; }
  .wp-rules > * { grid-column: 1 / -1; }
  .wp-rules > .wp-rh, .wp-stick > .wp-rh { grid-column: 1; grid-row: 1; }
  .wp-rules > .wp-proef, .wp-stick > .wp-proef { grid-column: 2; grid-row: 1; align-self: start; width: auto; min-height: 32px; padding: 0 14px; font-size: 13px; border-radius: 16px; }
  .wp-howbtn { display: block; width: 32px; padding: 0; font-weight: 800; font-family: Georgia, serif; font-style: italic; }
  .wp-howbtn[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
  .wp-rules .wp-how { display: none; margin: 0; }
  .wp-rules.how .wp-how { display: block; }
  .wp-tabs { padding: 2px; border-radius: 12px; }
  .wp-tabs button { min-height: 34px; padding: 2px; font-size: 12px; line-height: 1.1; border-radius: 10px; }
  .wp-tabs button small { font-size: 10px; }
  .wp-type { gap: 4px; }
  .wp-type .chip-s, .wp-cp .chip-s { min-height: 28px; }
  .wp-h3 { font-size: 14px; }
  .wp-grp { gap: 0; padding: 3px 10px; border-radius: 12px; }
  .wp-grp > .small { font-size: 11.5px; line-height: 1.3; padding: 2px 0; }
  .wp-of { margin: -4px 0; font-size: 11.5px; }
  .wp-rule { min-height: 32px; padding: 1px 0; gap: 4px; }
  .wp-rt { font-size: 13.5px; }
  .wp-ico { width: 28px; height: 28px; }
  .wp-val .chip { width: 26px; min-height: 26px; }
  .wp-val input { width: 64px; height: 28px; }
  .wp-yn button { min-height: 24px; }
  .wp-set { gap: 8px; }

  /* ---- Nu op één scherm (body.nu-fit): drie kolommen, lange lijsten schuiven binnen hun kaart ---- */
  body.nu-fit .shell {
    height: calc(100vh - 68px); height: calc(100dvh - 68px); padding-top: 0; padding-bottom: 20px; display: flex; flex-direction: column;
  }
  body.nu-fit .shell > .view { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 16px; padding-top: 4px; }
  body.nu-fit .view > * { flex: none; }
  body.nu-fit .view > .lt-nu {
    flex: 1 1 auto; min-height: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); align-items: stretch;
  }
  body.nu-fit .lt-nu > .lt-col { grid-column: auto; grid-row: auto; display: flex; flex-direction: column; gap: 16px; min-height: 0; }
  /* 2026.11.126 (melding Gert "nog steeds niet strak"): alleen de muntkaarten schuiven, zonder balk tussen de kolommen;
     een zachte vervaging onderaan laat zien dat er meer is. Kop blijft staan; saldo eronder blijft in beeld. */
  body.nu-fit .lt-col > .nu-fill.nu-coins {
    flex: 0 1 auto; min-height: 160px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
    margin: 0 -8px; padding: 0 8px 28px;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
  }
  body.nu-fit .nu-coins::-webkit-scrollbar { display: none; }
  body.nu-fit .nu-coins > .h2 { position: sticky; top: 0; z-index: 2; background: var(--bg); margin: 0; }
  body.nu-fit .lt-nu .rows > * { padding-top: 9px; padding-bottom: 9px; }
  body.nu-fit .lt-nu .rows > *:first-child { padding-top: 0; }
  body.nu-fit .lt-nu .rows > *:last-child { padding-bottom: 0; }
  body.nu-fit .lt-nu .card { padding: 14px 16px; }
  body.nu-fit .dash-hero .dash-big { margin-bottom: 10px; }
  body.nu-fit .lt-col > *, body.nu-fit .lt-col > .lt-only > * { flex: none; }
  body.nu-fit .lt-col > .nu-fill, body.nu-fit .lt-col > .dash-sec { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
  body.nu-fit .nu-fill > *, body.nu-fit .dash-sec > * { flex: none; min-height: 0; }
  body.nu-fit .dash-sec > .dash-tbl { margin-top: 0; }
  body.nu-fit .nu-fill > .nu-scroll, body.nu-fit .dash-sec > .nu-scroll { flex: 0 1 auto; min-height: 72px; overflow-y: auto; overscroll-behavior: contain; }
  /* open trades blijven heel in beeld; is er weinig plaats, dan geven eerst de saldo's ruimte (tot hun minimum) */
  body.nu-fit .nu-trades { display: grid; gap: 10px; align-content: start; }
  body.nu-fit .lt-col > .nu-fill:has(> .nu-trades) { flex-shrink: .01; }
  body.nu-fit .lt-col > .nu-grow, body.nu-fit .nu-grow > .nu-scroll { flex: 1 1 auto; }
}
@media (min-width: 1400px) {
  .lt-nu { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto; }
  .lt-nu > :nth-child(n) { grid-column: auto; grid-row: auto; }
}

/* muis (laptop): laten zien wat aanklikbaar is. Op de iPhone (geen hover) gebeurt hier niets. */
@media (hover: hover) and (pointer: fine) {
  .chip:not([aria-pressed="true"]):not(.danger):not(:disabled):hover,
  .btn.soft:not(:disabled):hover, .xbtn:hover { background: color-mix(in srgb, var(--fg) 12%, transparent); }
  .chip[aria-pressed="true"]:hover, .btn.main:not(:disabled):hover, .btn.danger:hover, .tipsbar button:hover { filter: brightness(1.08); }
  .seg button[aria-pressed="false"]:hover { color: var(--fg); background: color-mix(in srgb, var(--seg-on) 55%, transparent); }
  nav.tabs button:not(.on):hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 6%, transparent); }
  .gbtn:hover, .back:hover, .menu button:hover { background: var(--chip); }
  button.rowlink:hover .chev { color: var(--fg); }
  .rows > button.rowlink:hover, .sc-list > button.rowlink:hover, button.ev:hover, .rg-btn:hover {
    background-color: color-mix(in srgb, var(--fg) 4%, transparent);
  }
  .card.trade:hover { box-shadow: 0 0 0 1px var(--line), 0 10px 26px rgba(0,0,0,.08); }
  .tile:not([aria-pressed="true"]):hover { box-shadow: inset 0 0 0 1px var(--muted); }
  .swatch:hover i { transform: scale(1.06); }
  details.blk > summary:hover span { color: var(--fg); }
  .link:hover { text-decoration: underline; text-underline-offset: 3px; }
  .field select:hover, .field input:hover, .re-row > select:hover { box-shadow: inset 0 0 0 1px var(--line); }
}
/* Trades tonen: één knop met uitklapvenster (2026.11.66; was: losse vinkjes Winst/Verlies en soort verkoop) */
.wp-f-tf { position: relative; }
.wp-top:has(.wp-tfpop:not(.wp-off)) { position: relative; z-index: 8; } /* venster boven de grafiek en de regels */
.wp-tfb {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 44px; padding: 0 10px 0 12px;
  border: 0; border-radius: 12px; background: var(--chip); color: var(--fg); font: inherit; font-size: 16px; text-align: left; cursor: pointer; white-space: nowrap;
}
.wp-tfb span { overflow: hidden; text-overflow: ellipsis; }
.wp-tfb.on span { font-weight: 600; }
.wp-tfb svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.wp-tfb[aria-expanded="true"] svg { transform: rotate(180deg); }
.wp-tfpop {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0; padding: 6px 12px 8px; border-radius: 16px;
  background: var(--sheet); color: var(--fg); box-shadow: 0 0 0 1px var(--line), 0 12px 32px rgba(0,0,0,.16);
}
.wp-tfpop.wp-off { display: none; }
.wp-tfh { margin: 8px 0 2px; font-size: 12px; font-weight: 600; color: var(--muted); }
.wp-tfr {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; width: 100%; min-height: 36px; padding: 0;
  border: 0; background: none; color: var(--fg); font: inherit; font-size: 14px; font-weight: 500; text-align: left; cursor: pointer;
}
.wp-tfr + .wp-tfr { border-top: 1px solid var(--line); }
.wp-tfr .num { min-width: 3ch; text-align: right; }
.wp-tfr .sw { display: block; }
.wp-tfr[aria-checked="true"] .sw { background: var(--in); }
.wp-tfr[aria-checked="true"] .sw::after { transform: translateX(12px); }
.wp-tfr[aria-checked="false"] .wp-tfn { color: var(--muted); }
.wp-tfall { display: block; margin-top: 6px; padding: 4px 0; font-size: 13px; }
.wp-tfall:disabled { color: var(--muted); opacity: .6; cursor: default; }
@media (min-width: 1100px) {
  .wp-top .wp-f-tf { flex: 0 1 132px; }
  .wp-tfpop { left: auto; right: 0; width: 248px; } /* rechts uitgelijnd met de knop: blijft binnen het scherm */
  .wp-top .wp-tfb { height: 34px; font-size: 14px; border-radius: 10px; padding: 0 8px 0 10px; }
}

/* ==================== Analyse → Mandje (2026.11.65): zelfde opbouw als Per munt (.wp-*), eigen stukjes ==================== */
.mk-mode { flex: 0 0 auto; width: 100%; max-width: 360px; }
.mk-mode button { min-height: 36px; font-size: 14px; }
.mk-what { flex: 1 1 260px; align-self: center; line-height: 1.4; }
.mk-btns { flex: 0 1 200px; }
.mk-host { min-width: 0; }
.mk-set { display: grid; gap: 10px; align-content: start; }
.mk-set .wp-h3 { margin-top: 4px; }
.mk-f { gap: 4px; }
.mk-f > span:first-child { color: var(--fg); font-weight: 600; font-size: 13.5px; }
.mk-f > span:first-child .small { font-weight: 500; }
.mkc-bad { color: var(--out); }
.mkc-ok { color: var(--muted); }
.mk-val { display: flex; gap: 6px; align-items: center; }
.mk-val input { flex: 1 1 auto; min-width: 0; width: auto; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); padding: 0 10px; font: inherit; font-size: 15px; font-variant-numeric: tabular-nums; }
.mk-val .chip { width: 36px; min-height: 36px; padding: 0; font-size: 18px; flex: none; }
.mk-mix { display: grid; gap: 6px; }
.mk-mixl { display: flex; justify-content: space-between; }
.mk-mixl b { color: var(--fg); }
.mk-mixc { margin: 0; color: var(--muted); line-height: 1.4; } /* 2026.11.77: munten per deel */
.mk-mixc b { color: var(--fg); font-weight: 600; }
.mk-mixw { margin: 0; }
.mk-mixt[title] { cursor: help; }
.wp-res.mk-tight .mk-pre { display: none; } /* smalle laptop: "€ 1.000 →" valt weg als de mix anders niet past */
.mk-mix input[type="range"] { width: 100%; accent-color: var(--fg); margin: 0; height: 28px; }
.mk-coinsims > div { padding-top: 4px; padding-bottom: 4px; }
.mk-coinsims i { color: var(--muted); }
.mk-coins { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.mk-coin { font-size: 14px; font-weight: 600; }
.mk-coin input:disabled { opacity: .6; }
.mk-sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }
.mk-c-btc { background: var(--mk-btc); } .mk-c-eth { background: var(--mk-eth); } .mk-c-sol { background: var(--mk-sol); }
.mk-c-xrp { background: var(--mk-xrp); } .mk-c-ada { background: var(--mk-ada); }
.mk-c-x0 { background: var(--mk-x0); } .mk-c-x1 { background: var(--mk-x1); } .mk-c-x2 { background: var(--mk-x2); } .mk-c-x3 { background: var(--mk-x3); }
.mk-c-x4 { background: var(--mk-x4); } .mk-c-x5 { background: var(--mk-x5); } .mk-c-x6 { background: var(--mk-x6); } .mk-c-x7 { background: var(--mk-x7); }
.mk-c-x8 { background: var(--mk-x8); } .mk-c-x9 { background: var(--mk-x9); }
.mk-cnl { margin-left: auto; font-size: 13px; padding: 0; color: var(--muted); text-decoration: underline; }
.mk-panel .wp-chart { height: 440px; }
@media (min-width: 1100px) {
  .wp-left > .mk-host { flex: 1 1 auto; min-height: 0; }
  .mk-mode { width: 220px; }
  .mk-mode button { min-height: 30px; font-size: 13px; }
  .mk-top { align-items: center; }
  .mk-top .mk-what { font-size: 12.5px; }
  .mk-top .mk-btns { flex: 0 0 auto; }
  .mk-panel .wp-chart { height: auto; }
  .mk-set { gap: 6px; padding: 10px 14px 12px; grid-template-columns: minmax(0, 1fr); }
  .mk-set > * { grid-column: 1 / -1; }
  .mk-set .wp-h3 { margin-top: 6px; }
  .mk-f > span:first-child { font-size: 13px; }
  .mk-val input { height: 30px; font-size: 14px; }
  .mk-val .chip { width: 30px; min-height: 30px; font-size: 16px; }
  .mk-set .set-help { font-size: 11.5px; line-height: 1.35; }
  .wp-top .mk-mode + .field { margin-left: 4px; }
}
@media (min-width: 1100px) { .mk-set .wp-rn::before { width: 172px; } }
@media (max-width: 1099px) { .mk-panel { grid-template-columns: minmax(0, 1fr); } .mk-panel > * { min-width: 0; } }
@media (min-width: 1100px) and (max-width: 1399px) { .mk-long { display: none; } }
.mk-btns .btn { white-space: nowrap; }
@media (max-width: 1099px) {
  .mk-btns { flex: 1 1 100%; }
  .mk-set .wp-rh { flex-wrap: wrap; }
  .mk-set .wp-rn { flex: 1 1 200px; }
}
/* Per munt op de laptop: de keuze Per munt | Mandje achteraan (naast Simuleren), zodat munt en scenario hun breedte houden */
@media (min-width: 1100px) {
  .wp-top:not(.mk-top) > .mk-mode { width: 86px; grid-auto-flow: row; grid-auto-rows: 1fr; padding: 2px; border-radius: 10px; align-self: stretch; }
  .wp-top:not(.mk-top) > .mk-mode button { min-height: 0; padding: 1px 4px; font-size: 12px; border-radius: 8px; }
  .wp-top:not(.mk-top) .wp-f-i { flex-basis: 104px; }
}
@media (min-width: 1100px) { .wp-top:not(.mk-top) .wp-f-m { flex-basis: 132px; } }

/* ---- 2026.11.67 ---- */
/* Focusrand (melding Gert: "twee losse halve boogjes"): de kop van een veld in de bovenste rij van Analyse knipt af
   (overflow: hidden voor lange labels); de rij met Scenario + potlood/kopie niet. Knoppen in krappe rijen krijgen de
   rand binnen de knop (volgt de afronding), zodat niets hem afknipt. Na een muisklik geen rand (alleen toetsenbord). */
:focus:not(:focus-visible) { outline: none; }
.wp-top .field > span.wp-ren { overflow: visible; }
.wp-top .chip:focus-visible, .wp-top button:focus-visible, .wp-sb .chip:focus-visible, .wp-sb button:focus-visible,
.wp-cp .chip:focus-visible, .wp-sgc button:focus-visible, .wp-tfpop button:focus-visible, .wp-sbmp button:focus-visible, .wp-ys button:focus-visible,
.wp-dlg button:focus-visible, .mk-panel button:focus-visible { outline-offset: -2px; }
/* Voorkeuren in de cloud (Instellingen) */
.pc-note { display: grid; gap: 4px; padding: 4px 6px 14px; }
.pc-note .mkc { font-size: 13px; }
/* Venster Naam + Omschrijving van een proef (WP_DlgHtml) */
.wp-dlgbg { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .35); display: flex; align-items: center; justify-content: center; padding: 16px; }
.wp-dlg { width: min(440px, 100%); display: grid; gap: 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, .3); }
.wp-dlg .field input, .wp-dlg .field textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--fg); padding: 8px 10px; font-size: 15px; }
.wp-dlg .field textarea { resize: vertical; min-height: 72px; }
.wp-dlg .field-row { display: flex; gap: 8px; justify-content: flex-end; }
.wp-dlg .field-row .btn { width: auto; flex: 0 1 auto; padding: 0 16px; }
/* Omschrijving onder de naam in het regelpaneel: grijs, hooguit twee regels */
.wp-scnote { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--muted); white-space: pre-line; margin-top: 2px; }
.wp-scnote.open { display: block; -webkit-line-clamp: unset; }
.wp-scnmore, .wp-scnadd { font-size: 12px; padding: 0; min-height: 0; }
/* Sluit controle (in plaats van het chipje "controle open") */
.wp-sbclose { gap: 4px; }
.wp-sbclose .wys-lk { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
/* Oordeel: grijs bij te weinig trades/wissels (2026.11.67) */
.wp-vd.vd-weinig, .wp-vd.vd-kort { background: var(--chip); --vd: var(--muted); }

/* Kop van het regelpaneel (naam, knoppen, Ongedaan/Opnieuw, tabbladen) blijft bovenaan staan; alleen de inhoud schuift
   (wens Gert 2026.11.67). Laptop: binnen het paneel dat zelf schuift; telefoon: onder de bovenbalk (--tb-h). */
.wp-stick { position: sticky; top: var(--tb-h, 0px); z-index: 4; background: var(--surface); display: grid; gap: 8px; margin: -4px -6px 0; padding: 4px 6px 8px; border-bottom: 1px solid var(--line); }
@media (min-width: 1100px) {
  .wp-stick { top: -10px; margin: -10px -14px 0; padding: 10px 14px 8px; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
  .wp-stick > * { grid-column: 1 / -1; }
}
@media (max-width: 1099px) {
  .wp-stick .wp-proef { min-height: 38px; font-size: 15px; }
  .wp-stick .wp-tabs button { min-height: 36px; }
  .wp-stick .wp-tabs button small { display: none; }
}
.wp-ur { display: flex; gap: 6px; flex-wrap: wrap; }
.wp-urb { min-height: 30px; padding: 0 12px; font-size: 13px; font-weight: 600; background: var(--chip); color: var(--fg); }
.wp-urb span[aria-hidden] { font-size: 16px; line-height: 1; }
.wp-urb:disabled { opacity: .45; cursor: default; }
@media (max-width: 400px) { .wp-urb .wl { display: none; } .wp-urb { padding: 0 10px; } }
.wp-ronly { color: var(--muted); }
/* Instellingen: anders dan het scenario waar de proef van komt */
.set-mod { color: var(--brand); font-size: 12px; font-weight: 600; white-space: nowrap; }
.set-reset { font-size: 12px; padding: 0; min-height: 0; text-decoration: underline; }
/* Melding onderaan na een wijziging (Snack_Show) */
.snack {
  position: fixed; z-index: 50; left: 50%; bottom: calc(max(10px, env(safe-area-inset-bottom, 0px)) + 78px); transform: translate(-50%, 20px);
  max-width: min(560px, calc(100% - 32px)); display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px;
  background: var(--fg); color: var(--bg); font-size: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.snack.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.snack-t { min-width: 0; overflow-wrap: anywhere; }
.snack-b { flex: none; border: 0; background: none; color: inherit; font-weight: 700; text-decoration: underline; padding: 4px 0; }
@media (prefers-reduced-motion: reduce) { .snack { transition: none; } }

/* ==================== Schaduwrun (2026.11.68) ==================== */
/* Scherm Bot (View_Schaduw, SH_* in app.js; sinds 2026.11.132 alleen de 10-secondenbot): schakelaar, pot en per munt. */
.sh-swr { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sh-sw > p { margin-top: 10px; }
.sh-warn { color: var(--warn-fg); background: var(--warn-bg); border-radius: 12px; padding: 8px 10px; }
.sh-coin > * + *, .lt-sh .card > p + p, .lt-sh .card > .rows + p, .lt-sh .card > svg + p { margin-top: 8px; }
.sh-log .tag, .sh-coin .tag { vertical-align: 1px; }
.sh-why { display: block; overflow-wrap: anywhere; }
.sh-log > div > span:last-child { white-space: nowrap; }
.sh-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.sh-ch { line-height: 1.45; }
/* Waarde, resultaat en trades van beide bots naast elkaar */
.sh-tbl { display: grid; grid-template-columns: auto 1fr 1fr; gap: 4px 12px; align-items: baseline; }
.sh-tbl > span:nth-child(3n+2), .sh-tbl > span:nth-child(3n+3) { text-align: right; }
.sh-pos { line-height: 1.5; }
/* 2026.11.71: schakelaar per munt; munten die uit staan compact onderaan */
.sh-coin > .sh-swr { align-items: flex-start; }
.sh-coin > .sh-swr > .sh-ch { min-width: 0; }
.sh-offh { font-size: 15px; font-weight: 600; color: var(--muted); margin: 18px 0 8px; }
.sh-off .sh-ch > b, .sh-off .sh-swr b { color: var(--muted); }
.sh-chip-off { opacity: .6; }
.wp-pchk { display: flex; align-items: center; gap: 8px; font-size: 15px; cursor: pointer; }
.wp-pchk input { width: 20px; height: 20px; margin: 0; accent-color: var(--in); }
.wp-pchk + p.small { margin-top: -6px; }
.card > .sh-swr + p, .card > .sh-swr + .chips { margin-top: 10px; }
/* Promotie-poort bij een proef (Testen → Regels) */
.sc-gate { margin: 2px 0 6px; padding: 8px 10px; border-radius: 12px; background: var(--warn-bg); color: var(--warn-fg); }
.sc-gate.ok { background: var(--in-bg); color: var(--in); }

@media (min-width: 1100px) {
  /* links schakelaar, mix, controle en mandje; rechts de munten in twee kolommen */
  .lt-sh { grid-template-columns: minmax(340px, 420px) minmax(0, 1fr); }
  /* Munten (2026.11.85): links Gekozen, rechts de lijst */
  .lt-cn { grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); }
  .cn-tab .lt-cn > .lt-col:first-child { position: sticky; top: 72px; }
  .sh-grid { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
  .sh-coin .rows { max-height: 360px; overflow: auto; }
}

/* 2026.11.70: promoveren vanuit de oordeelbalk (Analyse → Per munt), terugzetten in de kop van het regelpaneel */
.vd-pr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 4px !important; color: var(--fg); }
.vd-pr.ok b { color: var(--vd); }
.vd-btn { width: auto; min-height: 30px; padding: 0 14px; font-size: 13px; border-radius: 15px; }
.vd-pr .small { color: var(--muted); }
.vd-link, .wp-shlink .link { padding: 0; font-size: inherit; }
.wp-revert { width: auto; justify-self: start; min-height: 30px; padding: 0 14px; font-size: 13px; border-radius: 15px; }
.wp-shlink { margin: 0; }

/* 2026.11.70 (melding Gert): de keuze Per munt | Mandje is in beide standen hetzelfde veld, vooraan in de bovenste
   rij, horizontaal en even hoog als de andere velden. Vervangt de losse opmaak van 11.65–11.69 (verticaal blokje bij
   Per munt, brede balk bij Mandje). */
.wp-top .wp-f-mode { flex: 1 1 100%; }
.wp-top .wp-f-mode .mk-mode, .wp-top:not(.mk-top) > .wp-f-mode .mk-mode { width: 100%; max-width: 360px; grid-auto-flow: column; grid-auto-rows: auto; padding: 3px; border-radius: 12px; align-self: auto; }
.wp-top .wp-f-mode .mk-mode button { min-height: 32px; padding: 2px 8px; font-size: 14px; border-radius: 9px; white-space: nowrap; }
.mk-top { align-items: flex-end; }
.mk-top .mk-what { align-self: flex-end; padding-bottom: 7px; }
.mk-top .mk-btns { align-self: flex-end; }
@media (min-width: 1100px) {
  .wp-top .wp-f-mode { flex: 0 0 156px; }
  .wp-top .wp-f-mode .mk-mode { max-width: none; height: 34px; padding: 2px; border-radius: 10px; }
  .wp-top .wp-f-mode .mk-mode button { min-height: 0; height: 30px; padding: 0 6px; font-size: 12.5px; border-radius: 8px; }
  .wp-top .wp-f-mode + .field { margin-left: 0; }
  .mk-top .mk-what { padding-bottom: 9px; }
}

/* 2026.11.70 (melding Gert): instellingen alleen-lezen (schaduw/eerder) leesbaar in een smal paneel: naam mag
   afbreken, de waarde nooit; uitleg over de hele breedte eronder; groepskop als eigen blok. */
.wp-setg { display: grid; gap: 6px; min-width: 0; }
.wp-rules > .wp-setg { grid-column: 1 / -1; }
.wp-setg .wp-h3 { margin: 6px 0 0; }
.rows > .set-ro, .set-ro { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; align-items: baseline; }
.set-ro .set-ro-l { min-width: 0; overflow-wrap: break-word; }
.rows > .set-ro > span.set-ro-v, .set-ro .set-ro-v { white-space: nowrap; min-width: max-content; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: normal; }
.set-ro > .set-help { grid-column: 1 / -1; text-align: left !important; }
.set-ro.wide { grid-template-columns: minmax(0, 1fr); }
.rows > .set-ro.wide > span.set-ro-v, .set-ro.wide .set-ro-v { white-space: normal; min-width: 0; text-align: left; }

/* 2026.11.70: Analyse → Mandje, deel "per munt": per munt het scenario (keuzelijst) en de uitkomst */
.mk-csc { display: grid; gap: 6px; margin-top: 6px; }
.mk-cscr { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; }
.mk-csco { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; } /* 2026.11.78: schakelaar meenemen */
.mk-cscr.off .mk-cscn, .mk-cscr.off select { opacity: .55; }
.mk-cscn { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; }
.mk-cscr select { min-width: 0; width: 100%; height: 32px; font-size: 13px; border-radius: 9px; padding: 0 8px; }
.mk-cscr .chip { justify-self: start; }
.mk-cscres { grid-column: 2 / 4; color: var(--muted); line-height: 1.3; }
.mk-cscr.none .mk-cscn { opacity: .6; }
.mk-job { margin: 4px 0 0; color: var(--fg); }
/* 2026.11.78: twee blokken in het paneel: "Munten met regels per munt" (schakelaars) en "Munten in het mandje" (vinkjes) */
.mk-part { display: grid; gap: 6px; min-width: 0; padding-top: 10px; border-top: 1px solid var(--line); }
.mk-part .set-help { margin: 0; }
.mk-set .mk-part .mk-parth { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mk-parth .tag { font-size: 12px; }

/* 2026.11.70: venster Scenario's in Analyse (vervangt Testen → Regels) */
.wp-scdlg { width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); overflow-y: auto; display: grid; gap: 10px; }
.wp-scdh { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wp-scdh .h2 { margin: 0; }
.wp-scdh .chip { width: 34px; height: 34px; min-height: 34px; padding: 0; display: grid; place-items: center; border-radius: 50%; flex: none; } /* kruisje rond en in het midden (2026.11.127) */
.wp-scdh .chip svg { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.wp-scdlg .prop { margin: 0; }
.wp-scsel { display: grid; gap: 8px; padding-top: 6px; border-top: 1px solid var(--line); }
.wp-scsel .h3 { margin: 0; }
.wp-scl { width: auto; padding: 0 10px; gap: 4px; display: inline-flex; align-items: center; white-space: nowrap; flex: none; }
/* 1100–1399 breed: de bovenste rij van Per munt op één regel houden (keuze Analyse is breder dan het oude blokje) */
@media (min-width: 1100px) and (max-width: 1399px) {
  .wp-top .wp-f-mode { flex-basis: 120px; }
  .wp-top .wp-f-mode .mk-mode button { font-size: 12px; padding: 0 4px; }
  .wp-top:not(.mk-top) .wp-f-m { flex-basis: 108px; }
  .wp-top .wp-pen, .wp-top .wp-scl { width: 28px; }
  .wp-top .wp-ren { gap: 3px; }
  .wp-top .wp-f-sc { flex-basis: 120px; }
  .wp-top .wp-f-d { flex-basis: 112px; }
  .wp-top:not(.mk-top) .wp-f-i { flex: 0 1 84px; }
  .wp-top .wp-f-d { flex-grow: 0; }
  .wp-top .wp-f-tf { flex-basis: 92px; }
  .wp-top .wp-btns { flex-basis: 180px; }
  .wp-top .wp-btns .btn { padding: 0 10px; }
  .wp-top { gap: 6px; }
}
.wp-scl .wp-pen-i { flex: none; }
@media (min-width: 1100px) { .wp-scl .wl { display: none; } .wp-scl { width: 34px; padding: 0; display: grid; place-items: center; } }

/* ==================== Analyse op de telefoon (2026.11.76, wens Gert) ====================
   "Kun je de Analyse op een telefoon optimaliseren? Op de laptop moet het wel blijven zoals nu." Alles hieronder geldt
   alleen onder 1100 px; elementen met .ph bestaan alleen daar. Opbouw: één rij bovenaan (Per munt | Mandje, munt,
   scenario, Instellingen), korte uitkomst, zoomknoppen, de grafiek ±55% van het scherm, jaarstrook, de balk
   instellen/controleren, en tabbladen Regels · Stop/Sell · Per jaar · Trades (Mandje: Instellingen · Per jaar).
   Periode, indicator en trades staan in een venster van onderen (.wp-setp.open). */
@media (min-width: 1100px) { .ph { display: none !important; } }
.wp-sbsave[hidden] { display: none !important; }
.wp-dn, .wp-sl { flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wp-setp { display: contents; }
@media (max-width: 1099px) {
  body.wp-wide .view { gap: 10px; padding-top: 0; }
  body.wp-wide .wp-head, body.wp-wide .wp-note { display: none; }

  /* ---- kop: één rij ---- */
  .wp-top { flex-wrap: nowrap; align-items: center; gap: 6px; padding: 6px; border-radius: 18px; }
  .wp-top .field { flex: none; gap: 0; }
  .wp-top .wp-f-mode > span, .wp-top .wp-f-m > span:first-child, .wp-top .wp-f-sc { display: none; }
  .wp-top .wp-f-mode { flex: none; }
  .wp-top .wp-f-mode .mk-mode, .wp-top:not(.mk-top) > .wp-f-mode .mk-mode { width: auto; max-width: none; grid-auto-columns: auto; padding: 2px; border-radius: 12px; }
  .wp-top .wp-f-mode .mk-mode button { min-height: 40px; padding: 0 10px; font-size: 13.5px; border-radius: 10px; }
  /* "Per munt" heet hier kort "Munt" (de knop houdt zijn tekst voor de schermlezer) */
  .wp-top .wp-f-mode .mk-mode [data-anamode="munt"] { font-size: 0; }
  .wp-top .wp-f-mode .mk-mode [data-anamode="munt"]::after { content: 'Munt'; font-size: 13.5px; }
  /* munt: de keuzelijst ligt onzichtbaar over een chip met alleen het symbool */
  .wp-top .wp-f-m { position: relative; flex: none; }
  .wp-top .wp-f-m select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; padding: 0; }
  .wp-msym, .wp-msc, .wp-msetb {
    display: inline-flex; align-items: center; gap: 4px; height: 40px; border: 0; border-radius: 12px; background: var(--chip); color: var(--fg);
    font: inherit; font-size: 14px; font-weight: 600; white-space: nowrap;
  }
  .wp-msym { padding: 0 8px 0 10px; }
  .wp-f-m:focus-within .wp-msym { outline: 2px solid var(--fg); outline-offset: -2px; }
  .wp-msc { flex: 1 1 auto; min-width: 0; padding: 0 8px 0 10px; text-align: left; cursor: pointer; }
  .wp-mscn { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  /* status als stip in de kleur van het label (de naam heeft de ruimte nodig); de tekst blijft voor de schermlezer */
  .wp-msc .tag { flex: none; width: 9px; height: 9px; min-height: 0; padding: 0; border-radius: 50%; font-size: 0; overflow: hidden; background: currentColor; }
  .wp-mscn { flex: 0 1 auto; }
  .wp-msc .wp-dn { margin-left: auto; }
  .wp-dn { width: 14px; height: 14px; color: var(--muted); }
  .wp-msetb { flex: none; justify-content: center; width: 52px; padding: 0; gap: 1px; cursor: pointer; position: relative; }
  .wp-msetb .wp-sl { width: 20px; height: 20px; }
  .wp-msetb .wp-dn { width: 12px; height: 12px; }
  .wp-msetb[aria-expanded="true"] { background: var(--fg); color: var(--bg); }
  .wp-msetb.mark::after { content: ''; position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }

  /* ---- venster Instellingen van onderen ---- */
  .wp-setp { display: none; }
  .wp-setp.open {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 10px; align-content: start;
    position: fixed; z-index: 58; left: 0; right: 0; bottom: var(--kb, 0px); max-width: 560px; margin: 0 auto;
    max-height: calc(100dvh - var(--kb, 0px) - env(safe-area-inset-top, 0px) - 24px); overflow-y: auto; overscroll-behavior: contain;
    padding: 14px max(16px, env(safe-area-inset-right, 0px)) calc(18px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    border-radius: 28px 28px 0 0; background: var(--sheet); box-shadow: 0 -10px 40px rgba(0,0,0,.28); animation: sheetUp .32s cubic-bezier(.2,.9,.3,1.06);
  }
  .wp-setp.open > * { grid-column: 1 / -1; }
  .wp-setp.open > .wp-f-d { grid-column: auto; }
  .wp-setp .wp-f-d > span, .wp-setp .wp-f-i > span, .wp-setp .wp-f-tf > span { display: block; }
  .wp-setp .wp-f-i { display: grid; }
  .wp-setp .field { gap: 6px; }
  .wp-seth { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-left: 4px; }
  .wp-seth .h2 { margin: 0; font-size: 20px; font-weight: 800; }
  .wp-setsc { display: flex; flex-wrap: wrap; gap: 8px; }
  .wp-setsc .btn { width: auto; flex: 1 1 auto; min-height: 44px; padding: 0 14px; font-size: 15px; }
  .wp-setsc .btn:disabled { opacity: .45; }
  .wp-setp .wp-btns { display: none; }
  .wp-setp .wp-btns.need { display: flex; }
  .wp-setp .wp-btns [data-act="wpSave"] { display: none; } /* Bewaren staat in Meer */
  .wp-setp .wp-tfpop { position: static; margin-top: 6px; box-shadow: inset 0 0 0 1px var(--line); }
  /* het inkomen van het scherm (animatie met transform) zou het venster aan de kaart vastmaken in plaats van aan het scherm */
  .view > .wp-top.setopen { animation: none !important; transform: none; position: relative; z-index: 58 !important; } /* boven de onderbalk, ook met Trades open */
  .wp-setbg { position: fixed; inset: 0; z-index: 57; background: rgba(0,0,0,.28); animation: dimIn .2s ease; }
  .wp-cgo { margin-top: 10px; }

  /* ---- uitkomst kort, de rest achter Details ---- */
  .wp-out { min-height: 0; gap: 4px; }
  .wp-out:not(.open) > :not(.wp-sum):not(.wp-busy):not(.err) { display: none; }
  .wp-sum { display: flex; align-items: center; gap: 8px; }
  .wp-sumt { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 13.5px; line-height: 1.35; }
  .wp-sl1 { display: block; }
  .wp-slp { font-weight: 600; color: var(--muted); }
  .wp-sumt .num.up { color: var(--in); } .wp-sumt .num.down { color: var(--out); }
  .wp-sumb { flex: none; min-height: 40px; padding: 0 12px; }
  .wp-sumb[aria-expanded="true"] { background: var(--fg); color: var(--bg); }
  .wp-out.open > .wp-sum { padding-bottom: 4px; border-bottom: 1px solid var(--line); }

  /* ---- volgorde in het paneel: uitkomst, zoom, grafiek, jaarstrook, gekozen trade, balk, oordeel, tabbladen ---- */
  .wp-panel { gap: 8px; }
  .wp-panel > .wp-out { order: 1; } .wp-panel > .wp-bar { order: 2; } .wp-panel > .wp-chart { order: 3; } .wp-panel > .wp-ys { order: 4; }
  .wp-panel > .wp-detail { order: 5; } .wp-panel > .wp-sb { order: 6; } .wp-panel > .wp-vd { order: 7; } .wp-panel > .wp-x { order: 8; }
  .wp-panel > .wp-ptabs { order: 9; } .wp-panel > .wp-years, .wp-panel > .wp-tl { order: 10; }

  /* zoom compact met (i) */
  .wp-bar { display: flex; align-items: center; gap: 6px; }
  .wp-zoom { flex: 1 1 auto; max-width: none; padding: 2px; border-radius: 12px; }
  .wp-zoom button { min-height: 40px; padding: 0 2px; font-size: 13px; border-radius: 10px; }
  .wp-info { display: block; flex: none; width: 40px; min-height: 40px; padding: 0; font-weight: 800; font-family: Georgia, serif; font-style: italic; }
  .wp-info[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
  .wp-detail { padding: 12px 14px; }
  .wp-detail.wp-off { display: none; }
  .wp-chart { scroll-margin-top: calc(var(--tb-h, 70px) + 6px); }
  .mk-panel .wp-chart { height: max(280px, 55svh); }

  /* jaarstrook: één regel, horizontaal te schuiven */
  .wp-ys { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -2px; }
  .wp-ys::-webkit-scrollbar { display: none; }
  .wys-y { min-height: 40px; align-items: center; padding: 0 11px; font-size: 13px; border-radius: 11px; }
  .wys-i { width: 40px; min-height: 40px; }

  /* ---- balk instellen/controleren: compact, hooguit twee regels ---- */
  .wp-sb { gap: 6px; padding: 6px; font-size: 13px; }
  .wp-sb .chip-s, .wp-sb .tag, .wp-chkbtn { height: 40px; min-height: 40px !important; }
  .wp-sb .chip-s { padding: 0 12px; }
  .wp-sbon { height: 40px; padding-left: 6px; }
  .wp-sbon .wl, .wp-sbd .sbc, .wp-cnt .cl { display: none; }
  .wp-sbon .ws, .wp-cnt .cs { display: inline; }
  .wp-chkbtn { border-radius: 20px; padding: 0 16px; font-size: 14px; }
  .wp-xi { width: 40px; }
  .wp-sb.more .wp-sbmp .chip-s { height: auto; min-height: 44px !important; }
  .wp-sbsave { font-weight: 600; }

  /* oordeel compact: de cijferregel klapt open met een tik op het kaartje */
  .wp-vd { padding: 8px 10px; font-size: 13px; gap: 8px; cursor: pointer; }
  .wp-vd:not([data-open]) .vd-l { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }

  /* ---- tabbladen onder de grafiek ---- */
  .wp-ptabs { scroll-margin-top: calc(var(--tb-h, 70px) + 6px); margin-top: 6px; }
  .wp-ptabs button { min-height: 40px; font-size: 13.5px; padding: 0 2px; }
  .wp-tl { display: grid; gap: 0; padding: 8px 12px; }
  .wp-tl.wp-off { display: none; }
  .wp-tlh { margin: 2px 0 6px; }
  .wp-tlr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "d p" "x p"; align-items: center; column-gap: 12px;
    width: 100%; min-height: 48px; padding: 6px 8px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; color: var(--fg);
    font: inherit; font-size: 14px; text-align: left; cursor: pointer;
  }
  .wp-tlr.on { background: var(--chip); border-radius: 10px; }
  .wp-tld { grid-area: d; font-weight: 600; }
  .wp-tlx { grid-area: x; }
  .wp-tlp { grid-area: p; font-weight: 700; }
  .wp-tlp.up { color: var(--in); } .wp-tlp.down { color: var(--out); }
  /* het blok onder de tabbladen: regelpaneel (Regels, Stop/Sell) of Per jaar / Trades in het paneel */
  .wp-left > .wp-pbar { display: none; } /* indicatoren: Instellingen → Indicator */
  .wp-stick .wp-tabs { display: none; } /* de tabbladen staan nu onder de grafiek */
  /* uitleg bij de regels achter (i), zoals op de laptop */
  .wp-howbtn { display: block; width: 40px; min-height: 40px; padding: 0; font-weight: 800; font-family: Georgia, serif; font-style: italic; }
  .wp-howbtn[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
  .wp-rules:not(.how) .wp-how { display: none; }
  .wp-cp .chip-s { min-height: 40px; }
  .wy-head { font-size: 11px; }
  body[data-wpt="years"] .wp-grid > .wp-rules:not(.mk-set), body[data-wpt="trades"] .wp-grid > .wp-rules:not(.mk-set) { display: none; }
  body[data-mkt="years"] .wp-grid > .mk-set { display: none; }
  body[data-mkt="coins"] .wp-grid > .mk-set { display: none; }
  body:not([data-mkt="coins"]) .mk-pc { display: none; }
  .wp-grid { gap: 10px; }
  .wp-years { padding: 10px 12px; }

  /* Mandje: kop op één rij, uitleg klein eronder */
  .mk-top { flex-wrap: wrap; }
  .mk-top .mk-what { order: 3; flex: 1 1 100%; padding: 0 4px 2px; font-size: 12px; line-height: 1.35; }
  .mk-top .mk-btns { flex: 1 1 auto; justify-content: flex-end; }
  .mk-top .mk-btns .btn { flex: 0 1 auto; width: auto; min-height: 40px; padding: 0 14px; font-size: 14px; }

  /* vensters van onderen op volle breedte, boven het toetsenbord */
  .sheet-wrap { bottom: var(--kb, 0px); }
  .rsheet { width: 100%; max-width: 560px; margin: 0; border-radius: 28px 28px 0 0; max-height: calc(100dvh - var(--kb, 0px) - env(safe-area-inset-top, 0px) - 16px); }
  .wp-dlgbg { padding-bottom: calc(16px + var(--kb, 0px)); }
  /* invoer in het regelpaneel: bij focus niet achter de zwevende onderbalk */
  html { scroll-padding-bottom: 110px; }
}

/* ---- Mandje: vergelijking regels per munt ↔ mandje + mix-kiezer (2026.11.79) ---- */
.mk-cmp { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 10px; }
.mk-cmp.wp-off { display: none; }
.mk-cmp.min { grid-template-columns: minmax(0, 1fr); }
.mk-cmin { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; padding: 6px 12px; }
.mk-cmi { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.mk-cmi.me { font-weight: 600; }
.mk-cmi .num.up { color: var(--in); } .mk-cmi .num.down { color: var(--out); }
.mk-cmt { margin-left: auto; padding: 0; font-size: 12px; }
.mk-ctab + .mk-cmt { margin-left: 6px; }
.mk-cmpc, .mk-pk { background: var(--surface); border-radius: 16px; box-shadow: var(--card-sh); padding: 8px 12px 8px; min-width: 0; }
.mk-ch { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; font-size: 13px; }
.mk-ch .small { color: var(--muted); font-size: 11.5px; }
.mk-ctab { margin-left: auto; padding: 2px; border-radius: 9px; }
.mk-ctab button { min-height: 24px; padding: 0 10px; font-size: 12px; border-radius: 7px; }
.mk-crow { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(50px, 1fr) auto; align-items: center; gap: 8px; padding: 2px 6px; margin: 0 -6px; border-radius: 8px; font-size: 12.5px; line-height: 1.25; }
.mk-crow.me { background: color-mix(in srgb, var(--brand, #f26b21) 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand, #f26b21) 45%, transparent); }
.mk-cn { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mk-csw { width: 16px; height: 8px; flex: none; }
.mk-cnt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-cnt b { font-weight: 600; }
.mk-cns { display: none; }
.mk-csub { color: var(--muted); font-size: 11px; }
.mk-cbars { display: block; width: 100%; height: 12px; }
.mk-cv2 { white-space: nowrap; text-align: right; font-size: 12.5px; }
.mk-cv2 .num.up { color: var(--in); } .mk-cv2 .num.down { color: var(--out); }
.mk-cdip { color: var(--out); }
.mk-pksvg { display: block; width: 100%; height: auto; }
.mk-pkt { font-size: 9.5px; fill: var(--muted); }
.mk-pkhit { cursor: pointer; }
.mk-pkhit:hover { fill: color-mix(in srgb, var(--fg) 7%, transparent); }
.mk-pkf { margin: 2px 0 0; font-size: 11.5px; line-height: 1.3; }
.mk-pkb b { color: var(--in); }
.mk-pkn { color: var(--muted); }
.mk-pkw { margin: 8px 0; }
.wy-off { opacity: .5; }
@media (min-width: 1100px) {
  /* laptop (2026.11.113, wens Gert: grafiek bovenaan): grafiek, jaarstrook/zoom, lijnen aan/uit, uitkomst, vergelijking,
     balk instellen/controleren, per munt */
  .mk-panel { grid-template-rows: minmax(0, 1fr) auto auto auto auto auto auto; }
  .mk-panel > .wp-chart { grid-row: 1; }
  .mk-panel > .wp-ys, .mk-panel > .wp-bar { grid-row: 2; }
  .mk-panel > .mk-lt { grid-column: 1 / -1; grid-row: 3; }
  .mk-panel > .wp-out { grid-row: 4; }
  .mk-panel > .mk-cmp { grid-column: 1 / -1; grid-row: 5; }
  .mk-panel > .wp-sb { grid-row: 6; }
  .mk-panel > .mk-pc { grid-column: 1 / -1; grid-row: 7; max-height: 240px; overflow: auto; margin-top: 0; }
  .mk-panel:has(> .wp-vd:not(.wp-off)) { grid-template-rows: minmax(0, 1fr) auto auto auto auto auto auto auto; }
  .mk-panel:has(> .wp-vd:not(.wp-off)) > .wp-vd { grid-row: 6; }
  .mk-panel:has(> .wp-vd:not(.wp-off)) > .wp-sb { grid-row: 7; }
  .mk-panel:has(> .wp-vd:not(.wp-off)) > .mk-pc { grid-row: 8; }
  .mk-pksvg { max-height: 92px; }
}
@media (max-width: 1099px) {
  .mk-cmp { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .wp-panel > .mk-cmp { order: 1; }
  .mk-crow { grid-template-columns: minmax(0, 1fr) 54px auto; gap: 6px; font-size: 12.5px; }
  .mk-cnl { display: none; } .mk-cns { display: inline; }
  .mk-crow { grid-template-columns: minmax(0, 1fr) 44px auto; }
  .mk-cv2 { font-size: 12px; }
  .mk-cmpc, .mk-pk { padding: 8px 10px; }
}
@media (min-width: 1100px) and (max-width: 1399px) {
  .mk-csub, .mk-cnl { display: none; } .mk-cns { display: inline; }
  .mk-crow { grid-template-columns: minmax(0, 1fr) minmax(40px, 0.8fr) auto; }
  .mk-pkn { display: none; }
}

/* ==================== Munten kiezen (Instellingen → Munten, 2026.11.84) ==================== */
.set-coins .card { margin-bottom: 12px; }
.cn-ch { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
/* 2026.11.167 (melding Gert: de tellers leken bij BTC te horen, de uitleg bij ADA): lijn onder de kop en boven de uitleg */
.cn-ch .h2 { margin: 0 auto 0 0; }
.cn-chl > div { align-items: center; }
.cn-chl > div > :last-child { flex: none; white-space: nowrap; }
/* tab Munten (2026.11.85): tip, Gekozen en de lijst onder elkaar met wat ruimte */
.set-coins.cn-tab { display: grid; gap: 12px; min-width: 0; }
.set-coins.cn-tab .card { margin-bottom: 0; }
.cn-chl .mk-sw { vertical-align: 0; }
/* max. inzet per munt (2026.11.91): "max [25] %" voor de knop Uit */
.cn-end { display: inline-flex; align-items: center; gap: 8px; }
.cn-pct { display: inline-flex; align-items: center; gap: 4px; }
.cn-pct input { width: 58px; height: 34px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--fg);
  padding: 0 6px; font: inherit; font-size: 16px; text-align: right; font-variant-numeric: tabular-nums; }
.cn-pct input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cn-alw2 { width: 48px; text-align: center; }
.cn-pct input::-webkit-outer-spin-button, .cn-pct input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cn-pct input { -moz-appearance: textfield; appearance: textfield; }
/* Gekozen (2026.11.123): vaste kolommen naam | max % | Uit, alles op één hoogte */
.cn-chl > .cn-ci { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; }
/* 2026.11.165: schuifjes Analyse en Bot per gekozen munt, op een eigen regel */
.cn-chl > .cn-ci > .cn-csw { grid-column: 1 / -1; display: grid; grid-template-columns: 172px auto minmax(0, 1fr); align-items: center; gap: 8px 14px; padding-left: 16px; }
/* Vaste kolommen (melding Gert 9 nov: Bot stond bij BTC verder dan bij de rest door "altijd"): label, schuifje, "altijd" in een eigen vak */
.cn-csw .cn-swl { display: grid; grid-template-columns: max-content 46px max-content; justify-content: start; align-items: center; justify-items: start; gap: 8px; font-size: 13px; width: auto; white-space: nowrap; }
.cn-csw .cn-swl > span:first-child { justify-self: start; }
.cn-csw .cn-swl .cn-alw { font-size: 11px; }
.cn-csw .cn-off { width: auto; padding: 0 12px; justify-self: end; }
.cn-cn { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; min-width: 0; }
.cn-cn .mk-sw { align-self: center; }
.cn-chl > .cn-ci > .cn-prog { grid-column: 1 / -1; text-align: left; padding-left: 16px; font-weight: 500; }
.cn-off { width: 48px; min-height: 34px; padding: 0; justify-content: center; }
.cn-ci .cn-pct input { width: 52px; text-align: center; padding: 0 4px; }
.cn-pcth { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
/* gedeelde pot in de schaduw (2026.11.91) */
.sh-potr > div > span:first-child, .sh-potm > div > span:first-child { min-width: 0; }
.sh-potr > div > :last-child, .sh-potm > div > :last-child { flex: none; text-align: right; }
.sh-potm { margin-top: 6px; border-top: 1px solid var(--line); }
.mk-geld .seg { margin: 4px 0; }
.cn-prog { color: var(--fg); font-weight: 600; }
.cn-cf { display: flex; gap: 8px; margin-top: 6px; }
.cn-cf .btn { width: auto; flex: 1; min-height: 40px; }
.cn-top { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 4px; }
.cn-top .seg { flex: none; }
.cn-q { flex: 1 1 180px; margin: 0; }
.cn-q input { width: 100%; min-height: 40px; }
.cn-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; padding: 10px 0; border-top: 1px solid var(--line); align-items: center; }
.cn-row.on { background: linear-gradient(90deg, var(--in-bg), transparent 70%); margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: 12px; border-top-color: transparent; }
.cn-row.on + .cn-row.on { margin-top: 6px; } /* gekozen munten: lucht tussen de groene blokken (2026.11.123) */
.cn-row.on + .cn-row:not(.on) { margin-top: 6px; }
.cn-sws .cn-swl { width: 92px; }
.cn-sws .cn-swl:last-child { width: 56px; }
.cn-row.blocked .cn-sym, .cn-row.blocked .cn-score { color: var(--muted); }
.cn-h { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cn-rank { color: var(--muted); font-size: 12px; min-width: 2.2em; }
.cn-sym { font-size: 16px; }
.cn-bar { width: 90px; height: 6px; flex: none; }
.cn-bar0 { fill: var(--chip); }
.cn-bar1 { fill: var(--muted); }
.cn-bar1.mid { fill: var(--brand); }
.cn-bar1.hi { fill: var(--in); }
.cn-score { font-weight: 700; font-size: 14px; }
.cn-row p { margin: 2px 0 0; }
.cn-why0 { color: var(--fg); }
.cn-nums { color: var(--muted); }
.cn-why { color: var(--muted); font-style: italic; }
.cn-sws { display: flex; gap: 14px; align-items: flex-start; } /* bovenaan gelijk, ook met "altijd" onder een schakelaar */
.cn-swl { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); font-weight: 600; }
.cn-swl.dis { opacity: .5; }
.cn-swl.fix .sw { opacity: .75; cursor: default; }
.cn-alw { font-size: 10px; font-weight: 600; color: var(--muted); line-height: 1; }
.cn-more { margin-top: 10px; }
@media (max-width: 599px) {
  .cn-row { grid-template-columns: minmax(0, 1fr); }
  .cn-sws { justify-content: flex-start; flex-wrap: wrap; gap: 10px 22px; } /* BTC met "altijd": Schaduw op een tweede regel */
  .cn-swl { flex-direction: row; gap: 8px; font-size: 12px; }
  .cn-bar { width: 64px; }
  .cn-sws .cn-swl, .cn-sws .cn-swl:last-child { width: auto; white-space: nowrap; }
}

/* 2026.11.92: bandbreedte naast de uitkomst, en Vergelijk met Delphi (Analyse → Meer) */
.wp-band { color: var(--muted); white-space: nowrap; }
.dl-rows { display: grid; gap: 2px; margin: 4px 0 6px; }
.dl-rows > div { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; }
.dl-rows .num { text-align: right; min-width: 56px; }

/* 2026.11.93: tabblad Tekst (regels als tekst, zoals de oude analyse-tool) */
.wp-txiv { grid-auto-columns: minmax(0, 1fr); margin: 10px 0 6px; }
.wp-txiv button { font-size: 12.5px; padding: 4px 2px; line-height: 1.15; }
.wp-txiv button small { display: block; font-size: 11px; font-weight: 500; color: var(--muted); }
.wp-txl { display: block; margin-top: 8px; }
.wp-txl .wp-txt { display: block; font-weight: 600; margin-bottom: 4px; }
.wp-tx { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
.wp-txhelp code { font-size: 12px; }

/* 2026.11.95: Ingrijpen – papieren live */
.lv-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0 0 8px; }
.lv-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.lv-seg { grid-auto-columns: minmax(64px, auto); flex: none; }
.lv-o { padding: 8px 0; border-top: 1px solid var(--line); }
.lv-o p { margin: 2px 0 0; }
.lv-req { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; overflow-wrap: anywhere; }
.lv-log { margin-top: 12px; }
.lv-h .lv-stop { flex: none; width: auto; min-height: 36px; padding: 6px 14px; font-size: 14px; }

/* 2026.11.96 (melding Gert): op de telefoon over de grafiek omhoog/omlaag vegen = de pagina scrollen. Horizontaal
   schuiven en knijpen (zoomen) blijven bij de grafiek (pointer-events); de laptop blijft touch-action: none. */
@media (hover: none) and (pointer: coarse) {
  .wp-cv { touch-action: pan-y; }
}

/* Meldingen (2026.11.99) */
.nt-log { max-height: 260px; overflow-y: auto; }
.nt-log p { margin: 6px 0; }
.nt-res { color: var(--muted, inherit); opacity: .8; }

/* Scherm Nu: Oud | Nu (2026.11.100) */
.dash-mode { margin: 0 0 10px; }
.dash-mode button small { display: block; font-size: 11px; font-weight: 500; opacity: .7; }

/* Scenariovenster met knoppen per scenario (2026.11.102) */
.sc-cards { display: grid; gap: 10px; }
.sc-card { display: grid; gap: 6px; padding: 12px; border-radius: 16px; background: var(--chip); }
.sc-card.on { box-shadow: inset 0 0 0 2px var(--brand); }
.sc-card p { margin: 0; }
.sc-ch { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sc-open { color: var(--brand); }
.sc-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-acts .sc-b { padding: 8px 12px; min-height: 0; font-size: 14px; flex: 0 0 auto; width: auto; }
.sc-props summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.sc-props[open] summary { margin-bottom: 6px; }

/* Echte bot (2026.11.103) */
.lv-stops { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.lv-sell { color: var(--neg, #c0392b); }
.lv-echt { color: var(--brand); }

/* Scherm Nu, nieuwe bot (2026.11.104) */
.nu-pos { display: grid; gap: 8px; margin-bottom: 10px; }
.nu-ph { display: flex; justify-content: space-between; align-items: baseline; font-size: 18px; }

/* Scenariovenster: uitklappen per regel (2026.11.105) */
.sc-card { padding: 4px 12px; }
.sc-card.fold { padding-bottom: 12px; }
.sc-card .sc-ch { all: unset; box-sizing: border-box; display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 0; cursor: pointer; }
.sc-card .sc-ch > span:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sc-card .sc-ch .chev { color: var(--muted); font-size: 18px; }
.sc-card .sc-summary { margin-top: 6px; }

/* Analyse achter de knop Simuleren (2026.11.107) */
.wp-dirty { color: var(--brand); }

/* Knop Simuleren met wijzigingen: een bolletje in plaats van extra tekst (2026.11.108) */
[data-act="wpGo"][data-dirty] { position: relative; }
[data-act="wpGo"][data-dirty]::after { content: ''; position: absolute; top: 6px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.15); }

/* Mix (2026.11.113): lijnen aan/uit en de tabel per munt */
.mk-lt { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.mk-ltb { display: inline-flex; align-items: center; gap: 5px; }
.mk-ltb[aria-pressed="false"] { opacity: .55; }
.mk-ltb[aria-pressed="true"] { font-weight: 600; }
.mk-ltb .mk-csw { width: 14px; height: 6px; }
.mk-pc { padding: 10px 12px; margin-top: 8px; }
.mk-pc.wp-off { display: none; }
.mk-pct { overflow-x: auto; }
.mk-pctb { width: 100%; border-collapse: collapse; font-size: 13px; }
.mk-pctb th, .mk-pctb td { padding: 6px 8px; text-align: right; border-top: 1px solid var(--line); white-space: nowrap; vertical-align: top; }
.mk-pctb th:first-child { text-align: left; }
.mk-pctb thead th { font-weight: 600; font-size: 11.5px; color: var(--muted); border-top: 0; }
.mk-hidb { display: grid; gap: 6px; margin: 14px 0 4px; }

/* Telefoon: Simuleren los onder de keuzes (2026.11.115) */
.wp-mgo { display: block; width: 100%; min-height: 44px; margin: 0 0 8px; }

/* Wat de bot nu doet (2026.11.121) */
.nu-st .nu-ph .tag { margin-left: 6px; vertical-align: middle; }
.nu-bar { display: block; width: 120px; height: 6px; margin-top: 4px; margin-left: auto; }
.nu-bar-bg { fill: var(--line); } .nu-bar-fg { fill: var(--in); }
.nu-miss > span:last-child { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.nu-miss .chip-s { font-size: 12px; min-height: 24px; padding: 0 8px; }

/* Regels onder elkaar op Nu (2026.11.122): stip (groen klopt, rood niet, grijs nog niet bekend), naam, waarde, verwacht */
.nu-rules { display: grid; margin-top: 6px; border-top: 1px solid var(--line); }
.nu-rule { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; align-items: center; gap: 4px 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.nu-rule:last-child { border-bottom: 0; }
.nu-rule i { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.nu-rule.ok i { background: var(--in); } .nu-rule.no i { background: var(--out); }
.nu-rule.no .nu-rv { color: var(--out); } .nu-rule.ok .nu-rv { color: var(--in); }
.nu-rn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nu-rv { font-weight: 600; text-align: right; }
.nu-rc { color: var(--muted); min-width: 64px; text-align: right; }
/* Saldo: één regel netjes in het midden in plaats van bovenin een opgerekte kaart */
body.nu-fit .nu-fill > .nu-saldo { min-height: 0; }
.lv-o:first-child { border-top: 0; padding-top: 0; }
/* Nu op de laptop (2026.11.122): de kopjes van de drie kolommen op één lijn */
body.nu-fit .lt-nu > .lt-col > .sec:first-child > .h2:first-child { margin-top: 0; }

/* Vensters (2026.11.122): achtergrond schuift niet mee; in het venster Scenario's blijft de kop (met het kruisje) staan
   en valt de schuifbalk binnen de ronde hoeken */
html.scroll-lock, html.scroll-lock body { overflow: hidden; overscroll-behavior: none; }
.wp-dlgbg, .sheet-wrap { overscroll-behavior: contain; }
.wp-dlg { overscroll-behavior: contain; }
.wp-scdlg { clip-path: inset(0 round 22px); scrollbar-width: thin; scrollbar-gutter: stable; }
.wp-scdh { position: sticky; top: -16px; z-index: 3; margin: -16px -16px 0; padding: 16px 16px 10px; background: var(--surface); }

/* Ingrijpen in Nu (2026.11.123) */
.nu-seg { margin-top: 10px; }
.nu-stops { display: flex; gap: 8px; margin-top: 4px; }
.nu-stops .btn { flex: 1; }
/* nummer van een trade in de lijst Trades, hetzelfde als het nummertje in de grafiek (2026.11.124) */
.wp-tln { display: inline-block; min-width: 22px; margin-right: 6px; padding: 0 5px; border-radius: 8px; background: var(--chip); color: var(--muted); font-size: 10px; font-weight: 700; text-align: center; line-height: 16px; }
/* scenariolijst: weggooien meteen naast de naam (2026.11.124) */
.sc-chw { display: flex; align-items: center; gap: 8px; }
.sc-chw > .sc-ch { flex: 1; min-width: 0; }
.sc-del { flex: none; width: 34px; min-height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.sc-del svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sc-del:hover:not(:disabled) { color: var(--out); }
.sc-wis { flex: none; min-height: 34px; padding: 0 14px; font-weight: 700; background: var(--brand); color: #fff; }
.sc-wis:hover:not(:disabled) { filter: brightness(1.06); }
/* Nu (2026.11.129): links resultaat, rechts de actieve munten naast elkaar en de niet-actieve als regels */
.nu2 { display: grid; gap: 16px; align-items: start; }
.nu2-side, .nu2-main { display: grid; gap: 16px; min-width: 0; align-content: start; }
.nu2 .sec { margin: 0; }
.nu-cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); align-items: start; }
.nu-last { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line); line-height: 1.45; }
.nu-last .tag { margin-right: 4px; }
.nu-rest { display: grid; padding-top: 6px; padding-bottom: 6px; }
.nu-rr { display: grid; grid-template-columns: 70px minmax(0, 1fr) minmax(220px, 300px); align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.nu-rr:first-child { border-top: 0; }
.nu-rr .nu-seg { margin: 0; }
.nu-rr .nu-seg button { min-height: 32px; font-size: 13px; }
@media (max-width: 599px) { .nu-cards { grid-template-columns: minmax(0, 1fr); } .nu-rr { grid-template-columns: 56px minmax(0, 1fr); } .nu-rr .nu-seg { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .nu2 { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); gap: 24px; } }
/* telefoon: eerst resultaat, dan de munten, dan noodknoppen en logboek */
@media (max-width: 1099px) { .nu2-side { display: contents; } .nu2-main { order: 1; } .nu2 .nu-late { order: 2; } }
.sh-tbl.sh-tbl1 { grid-template-columns: auto 1fr; } /* 2026.11.130: alleen de bot (10 s) */
.sh-tbl.sh-tbl1 > span:nth-child(n) { text-align: left; }
.sh-tbl.sh-tbl1 > span:nth-child(2n) { text-align: right; }
.sh-pot > .rowlink.fold { padding: 0; }
.sh-pot > .rowlink.fold.open { margin-bottom: 10px; }
/* koopregels op Nu in- en uitklappen (2026.11.134) */
/* 2026.11.136 (melding Gert: verticaal niet goed uitgelijnd): zelfde maat en uitlijning als de andere regels (label bovenaan) */
.rows > .nu-rtog { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; border: 0; border-top: 1px solid var(--line); background: none; color: inherit; font: inherit; font-size: 15px; line-height: inherit; text-align: left; cursor: pointer; padding: 11px 0; margin: 0; }
.rows > .nu-rtog > span:last-child { text-align: right; }
.rows > .nu-rtog:first-child { border-top: 0; padding-top: 0; }
.rows > .nu-rtog:last-child { padding-bottom: 0; }
body.nu-fit .lt-nu .rows > .nu-rtog { padding-top: 9px; padding-bottom: 9px; }
body.nu-fit .lt-nu .rows > .nu-rtog:last-child { padding-bottom: 0; }
.nu-krow { align-items: center; }
.nu-krow .nu-sbtn { margin: 0 10px 0 auto; flex: 0 0 auto; padding: 0; border: 0; background: none; cursor: pointer; line-height: 0; border-radius: 6px; }
.nu-krow .nu-sbtn:active { opacity: .6; }
.nu-spark .nu-sl { fill: none; stroke-width: 1.5; stroke-linejoin: round; }
.nu-spark .nu-sb { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 3; opacity: .7; }
.nu-spark.up .nu-sl { stroke: var(--in); } .nu-spark.up .nu-sf { fill: color-mix(in srgb, var(--in) 18%, transparent); }
.nu-spark.down .nu-sl { stroke: var(--out); } .nu-spark.down .nu-sf { fill: color-mix(in srgb, var(--out) 18%, transparent); }
.nu-day { font-size: 13px; font-weight: 600; margin-left: 6px; white-space: nowrap; }
.nu-day.up { color: var(--in); }
.nu-day.down { color: var(--out); }
.nu-rtog .chev { display: inline-block; color: var(--muted); margin-left: 4px; transition: transform .18s ease; }
.nu-rtog.open .chev { transform: rotate(90deg); }
.nu-rtog:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
/* ==================== Koers (2026.11.139) ==================== */
/* Zelfde grafiek als Analyse, zonder regels en uitkomst van een simulatie */
body.kr-mode .wp-out, body.kr-mode .mk-cmp, body.kr-mode .wp-ys, body.kr-mode .wp-sb, body.kr-mode .wp-detail, body.kr-mode .wp-years,
body.kr-mode .wp-x, body.kr-mode .wp-ptabs, body.kr-mode .wp-tl, body.kr-mode .wp-zoom { display: none !important; }
.kr-grid { grid-template-columns: minmax(0, 1fr) !important; }
body.kr-mode .wp-cnote, body.kr-mode .wp-bar { display: none !important; }
/* Kop zoals een beursapp (2026.11.141, wens Gert): munt en indicator, de koers groot met de % over de periode,
   daaronder open/hoog/laag/slot van de laatste (of aangetikte) kaars; periode en kaars/lijn onder de grafiek */
.kr-top { display: grid; gap: 6px; padding: 10px 12px; }
.kr-row1 { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kr-top .wp-f-m { display: block !important; position: static; flex: 0 0 auto !important; margin: 0; }
.kr-top .wp-f-m > span, .kr-add > span { display: none !important; }
.kr-top .wp-f-m select { position: static; opacity: 1; width: auto; min-width: 112px; height: 36px; padding: 0 10px; border-radius: 10px; font-weight: 600; }
/* Compact (2026.11.145, wens Gert): koers en % rechts naast de munt; daaronder één regel open/hoog/laag/slot */
.kr-price { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.kr-price b { font-size: 24px; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; white-space: nowrap; }
.kr-pct { font-size: 12.5px; font-weight: 600; padding: 3px 7px; border-radius: 7px; background: var(--chip); color: var(--muted); min-height: 22px; white-space: nowrap; }
.kr-pct:empty { visibility: hidden; }
.kr-row1 { position: relative; }
.kr-at { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; display: none; align-items: center; justify-content: center;
  min-width: 112px; height: 36px; padding: 0 10px; border-radius: 10px; background: var(--chip); color: var(--fg); font-size: 14px; font-weight: 700; white-space: nowrap; pointer-events: none; }
.kr-at.on { display: flex; }
.kr-row1.scrub .wp-f-m { visibility: hidden; }
.kr-pct.up { color: var(--in); background: color-mix(in srgb, var(--in) 16%, transparent); }
.kr-pct.down { color: var(--out); background: color-mix(in srgb, var(--out) 16%, transparent); }
.kr-ohlc { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 6px; color: var(--muted); font-size: clamp(11px, 3.1vw, 13px); min-height: 18px; white-space: nowrap; overflow: hidden; }
.kr-ohlc span { color: var(--fg); }
.kr-ohlc i { font-style: normal; color: var(--muted); margin-right: 3px; }
.kr-bar { display: flex; align-items: center; gap: 6px; margin: 8px 0 10px; }
.kr-bar .seg { display: flex; flex: 1 1 auto; min-width: 0; }
.kr-bar .seg button { flex: 1; min-height: 36px; white-space: nowrap; padding: 0 2px; font-size: 13.5px; }
.kr-kind { flex: 0 0 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); display: grid; place-items: center; cursor: pointer; }
.kr-kind svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kr-add { display: block !important; position: static !important; flex: 0 0 42px !important; margin: 0; }
.kr-add select { position: static !important; opacity: 1 !important; width: 42px !important; height: 42px !important; padding: 0 !important; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); font-size: 22px; font-weight: 500; text-align: center; text-align-last: center; -webkit-appearance: none; appearance: none; background-image: none; }
.kr-range { margin: 0 0 10px; padding: 14px 16px; }
.kr-rh { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.kr-rh .small { color: var(--muted); }
.kr-rl { display: flex; justify-content: space-between; gap: 8px; }
.kr-rl.small { color: var(--muted); margin-bottom: 6px; }
.kr-rl.num { margin-top: 6px; font-size: 14px; color: var(--muted); }
.kr-rbar { position: relative; height: 10px; border-radius: 6px; background: color-mix(in srgb, var(--muted) 45%, transparent); }
.kr-rbar i { position: absolute; top: -4px; width: 6px; height: 18px; margin-left: -3px; border-radius: 4px; background: var(--fg); box-shadow: 0 0 0 3px var(--surface); }
.kr-sbar { display: flex; align-items: center; gap: 4px; height: 12px; }
.kr-sbar i { display: block; height: 10px; border-radius: 6px; min-width: 4px; flex: 1 1 0; } /* groei via data-css (2026.11.155) */
.kr-sbar i.b { background: color-mix(in srgb, var(--in) 45%, transparent); }
.kr-sbar i.s { background: color-mix(in srgb, var(--out) 45%, transparent); }
.kr-sbar i.m { flex: 0 0 6px; height: 18px; border-radius: 4px; }
.kr-sbar i.m.up { background: var(--in); } .kr-sbar i.m.down { background: var(--out); }
.kr-stxt { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.kr-stxt .up { color: var(--in); font-weight: 600; } .kr-stxt .down { color: var(--out); font-weight: 600; }
.kr-mgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.kr-mgrid > div { display: grid; gap: 2px; }
.kr-mgrid .small { color: var(--muted); }
.kr-mgrid b { font-size: 16px; font-weight: 600; }
.kr-why { margin: 10px 0 0; color: var(--muted); } /* waarom de marktgegevens ontbreken (2026.11.157) */
.kr-leg { margin: 6px 2px 0; }
@media (max-width: 1099px) { body.kr-mode .wp-head { display: none; } .kr-leg { font-size: 11.5px; } }
/* Laptop (2026.11.155, melding Gert "op de laptop ziet dit er niet uit"): Analyse past op één scherm (body.wp-wide, vaste
   hoogte); Koers heeft onder de grafiek nog kaarten, die drukten de grafiek plat. Koers schuift daarom gewoon, met een
   vaste hoogte voor de grafiek; open/hoog/laag/slot links naast elkaar in plaats van over de hele breedte verspreid. */
@media (min-width: 1100px) {
  body.kr-mode.wp-wide .shell { height: auto; padding-bottom: 24px; }
  body.kr-mode.wp-wide .shell > .view { flex: none; }
  body.kr-mode.wp-wide .view > .wp-grid { flex: none; }
  body.kr-mode .wp-panel { height: auto; }
  body.kr-mode .wp-chart { height: clamp(440px, calc(100vh - 300px), 760px); height: clamp(440px, calc(100dvh - 300px), 760px); }
  body.kr-mode .kr-ohlc { justify-content: flex-start; gap: 28px; font-size: 13.5px; }
  body.kr-mode .kr-ohlc i { margin-right: 5px; }
}