/* BBYW OS · statuspanelen in BBYW Design (kaart 11 §04, fase 3, 08-10) — hoort bij os-panelen.js.
   Apparaten (.bs-paneel), Live apps (.lv-pop), Credits (.credits-pop), AI-model (.model-pop) en het profielmenu (.pm-menu):
   dik glas zonder rand, gewone letters (geen mono, geen hoofdletterlabels), lijsten als groep met een scheidslijn die bij
   de tekst begint, status alleen in de gedeelde kleuren. Elke regel geldt ook voor de terugkrimpende kopie (.mp-s-<soort>),
   daarom staat bij elk paneel het paar :is(.soort, .mp-s-soort). Werking en klassen van de eigen code blijven gelijk. */

/* ════ gemeenschappelijk: het materiaal ════ */
html[data-thema] :is(.bs-paneel, .lv-pop, .credits-pop, .model-pop, .pm-menu, .mp-spook) {
  position: fixed; z-index: 9000;
  font-family: var(--md-letter); font-size: var(--md-t-tekst); line-height: var(--md-t-tekst-rh); letter-spacing: var(--md-t-tekst-ls);
  color: var(--md-label); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: left;
  background: var(--md-glas-dik);
  -webkit-backdrop-filter: blur(var(--md-blur-dik, 40px)) saturate(190%) !important;
  backdrop-filter: blur(var(--md-blur-dik, 40px)) saturate(190%) !important;
  border: 0; border-radius: 14px;
  box-shadow: var(--md-schaduw-l), var(--md-lichtrand), 0 0 0 1px var(--md-rand);
  animation: none; will-change: transform, opacity; overflow: auto; overscroll-behavior: contain;
}
html[data-thema] .mp-spook { pointer-events: none; }
@media (prefers-reduced-transparency: reduce) {
  html[data-thema] :is(.bs-paneel, .lv-pop, .credits-pop, .model-pop, .pm-menu, .mp-spook) {
    background: var(--md-vlak); -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
}

/* kop van een paneel: titel + één regel uitleg (13/600 + 12) */
html[data-thema] :is(.lv-pop, .mp-s-lv-pop) .mp-kop,
html[data-thema] :is(.bs-paneel, .mp-s-bs-paneel) .bs-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 2px 2px 0; }
html[data-thema] :is(.lv-pop, .mp-s-lv-pop) .mp-titel,
html[data-thema] :is(.bs-paneel, .mp-s-bs-paneel) .bs-titel,
html[data-thema] :is(.credits-pop, .mp-s-credits-pop) .cp-head,
html[data-thema] :is(.model-pop, .mp-s-model-pop) .mp-head {
  font-size: var(--md-t-tekst); font-weight: 600; letter-spacing: -.006em; text-transform: none; color: var(--md-label); margin: 0;
}
html[data-thema] :is(.lv-pop, .mp-s-lv-pop) .mp-sub,
html[data-thema] :is(.bs-paneel, .mp-s-bs-paneel) .bs-sub {
  font-size: var(--md-t-sub); line-height: var(--md-t-sub-rh); color: var(--md-label-2); margin-top: 1px;
}

/* een groep op glas is massief (C4) */
html[data-thema] :is(.lv-pop, .mp-s-lv-pop) .lv-groep,
html[data-thema] :is(.bs-paneel, .mp-s-bs-paneel) .bs-lijst,
html[data-thema] :is(.credits-pop, .mp-s-credits-pop) .cp-rows {
  display: flex; flex-direction: column; gap: 0; margin-top: 10px; padding: 0;
  background: var(--md-vlak-op-glas); border: 0; border-radius: var(--md-r-groep, 12px); overflow: hidden;
  box-shadow: 0 0 0 1px var(--md-rand);
}

/* ════ Live apps ════ */
html[data-thema] :is(.lv-pop, .mp-s-lv-pop) { width: 320px; max-height: 70vh; padding: 12px; }
html[data-thema] :is(.lv-pop, .mp-s-lv-pop) a.lv-row {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border-radius: 0;
  color: var(--md-label); text-decoration: none; transition: background .14s;
}
html[data-thema] :is(.lv-pop, .mp-s-lv-pop) a.lv-row + a.lv-row::before { content: ""; position: absolute; top: 0; right: 0; left: 50px; height: .5px; background: var(--md-sep); }
html[data-thema] :is(.lv-pop, .mp-s-lv-pop) a.lv-row:hover { background: var(--md-fill-2); }
html[data-thema] :is(.lv-pop, .mp-s-lv-pop) a.lv-row:active { background: var(--md-fill); }
html[data-thema] :is(.lv-pop, .mp-s-lv-pop) a.lv-row:focus-visible { outline: 2px solid var(--md-tint); outline-offset: -2px; }
html[data-thema] :is(.lv-pop, .mp-s-lv-pop) .lv-ico { width: 28px; height: 28px; flex: none; display: block; }
html[data-thema] :is(.lv-pop, .mp-s-lv-pop) .lv-ico .dock-ico { border-radius: 22.5%; box-shadow: 0 .5px 1px rgba(0,0,0,.12); }
html[data-thema] :is(.lv-pop, .mp-s-lv-pop) .lv-ico .dock-ico svg { width: 60%; height: 60%; stroke-width: 2; }
html[data-thema] :is(.lv-pop, .mp-s-lv-pop) .lv-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
html[data-thema] :is(.lv-pop, .mp-s-lv-pop) .lv-naam { font-size: var(--md-t-tekst); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-thema] :is(.lv-pop, .mp-s-lv-pop) .lv-url { font-family: var(--md-letter); font-size: var(--md-t-sub); color: var(--md-label-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-thema] :is(.lv-pop, .mp-s-lv-pop) .lv-bekijk { flex: none; font-size: var(--md-t-sub); color: var(--md-label-2); transition: color .14s; }
html[data-thema] :is(.lv-pop, .mp-s-lv-pop) a.lv-row:hover .lv-bekijk { color: var(--md-tint); }
html[data-thema] :is(.lv-pop, .mp-s-lv-pop) .lv-leeg { padding: 8px 2px 2px; font-size: var(--md-t-sub); line-height: 1.4; color: var(--md-label-2); text-align: left; }

/* ════ Apparaten (BBYW Bridge) ════ */
html[data-thema] :is(.bs-paneel, .mp-s-bs-paneel) { width: 360px; max-height: 70vh; padding: 12px; }
html[data-thema] :is(.bs-paneel, .mp-s-bs-paneel) .bs-som { margin-top: 1px; font-size: var(--md-t-sub); color: var(--md-label-2); white-space: nowrap; }
html[data-thema] :is(.bs-paneel, .mp-s-bs-paneel) .bs-som b { font-family: var(--md-letter); font-size: var(--md-t-sub); font-weight: 600; color: var(--md-label); font-variant-numeric: tabular-nums; }
html[data-thema] :is(.bs-paneel, .mp-s-bs-paneel) .bs-advies { margin: 10px 0 0; padding: 9px 12px; border-radius: 10px; background: var(--md-tint-zacht); color: var(--md-label); font-size: var(--md-t-sub); line-height: 1.45; }
html[data-thema] :is(.bs-paneel, .mp-s-bs-paneel) .bs-advies b { color: var(--md-tint); font-weight: 600; }
html[data-thema] :is(.bs-paneel, .mp-s-bs-paneel) .bs-advies.nee { background: var(--md-fill-2); color: var(--md-label-2); }
html[data-thema] :is(.bs-paneel, .mp-s-bs-paneel) .bs-advies.nee b { color: var(--md-label); }
html[data-thema] :is(.bs-paneel, .mp-s-bs-paneel) .bs-app { position: relative; padding: 11px 12px; border: 0; border-radius: 0; }
html[data-thema] :is(.bs-paneel, .mp-s-bs-paneel) .bs-app + .bs-app { border: 0; border-radius: 0; }
html[data-thema] :is(.bs-paneel, .mp-s-bs-paneel) .bs-app + .bs-app::before { content: ""; position: absolute; top: 0; right: 0; left: 44px; height: .5px; background: var(--md-sep); }
html[data-thema] :is(.bs-paneel, .mp-s-bs-paneel) .bs-rij { gap: 10px; align-items: flex-start; }
html[data-thema] :is(.bs-paneel, .mp-s-bs-paneel) .bs-naam { font-size: var(--md-t-tekst); font-weight: 600; color: var(--md-label); }
html[data-thema] :is(.bs-paneel, .mp-s-bs-paneel) .bs-meta { font-size: var(--md-t-sub); color: var(--md-label-2); }
html[data-thema] :is(.bs-paneel, .mp-s-bs-paneel) .bs-app:is(.s-offline, .s-slaapt) .bs-naam { color: var(--md-label-2); }
/* de computer als icoon voorop (kaart: per computer één rij); de brug-lijn zegt niets wat de pil niet al zegt */
html[data-thema] :is(.bs-paneel, .mp-s-bs-paneel) .bs-brug { margin-top: 1px; }
html[data-thema] :is(.bs-paneel, .mp-s-bs-paneel) .bs-brug :is(.bs-lijn, .bs-m) { display: none; }
html[data-thema] :is(.bs-paneel, .mp-s-bs-paneel) .bs-brug .bs-pc { width: 22px; height: 22px; background: none; color: var(--md-label-2); border-radius: 0; }
html[data-thema] :is(.bs-paneel, .mp-s-bs-paneel) .bs-brug .bs-pc svg { width: 21px; height: 21px; stroke-width: 1.6; }
html[data-thema] :is(.bs-paneel, .mp-s-bs-paneel) .bs-brug.uit .bs-pc { color: var(--md-label-3); }
/* status als pil in de statuskleur, altijd met een woord */
html[data-thema] :is(.bs-paneel, .mp-s-bs-paneel) .bs-pil { font-size: var(--md-t-voet); font-weight: 600; letter-spacing: .006em; padding: 3px 8px; border: 0; border-radius: 999px; }
html[data-thema] :is(.bs-paneel, .mp-s-bs-paneel) .bs-pil.s-verbonden { background: var(--md-groen-zacht); color: var(--md-groen-tekst); }
html[data-thema] :is(.bs-paneel, .mp-s-bs-paneel) .bs-pil.s-bezig { background: var(--md-tint-zacht); color: var(--md-tint); }
html[data-thema] :is(.bs-paneel, .mp-s-bs-paneel) .bs-pil.s-wacht { background: var(--md-oranje-zacht); color: var(--md-oranje-tekst); }
html[data-thema] :is(.bs-paneel, .mp-s-bs-paneel) .bs-pil:is(.s-gepauzeerd, .s-slaapt, .s-offline) { background: var(--md-fill); color: var(--md-label-2); border: 0; }
/* wat er nu loopt: onder de naam, dunne teal voortgang */
html[data-thema] :is(.bs-paneel, .mp-s-bs-paneel) .bs-nu { margin: 8px 0 0 32px; }
html[data-thema] :is(.bs-paneel, .mp-s-bs-paneel) .bs-nu-t { font-size: var(--md-t-sub); }
html[data-thema] :is(.bs-paneel, .mp-s-bs-paneel) .bs-nu-naam { color: var(--md-label); font-weight: 500; }
html[data-thema] :is(.bs-paneel, .mp-s-bs-paneel) .bs-nu-app { color: var(--md-label-2); }
html[data-thema] :is(.bs-paneel, .mp-s-bs-paneel) .bs-nu-pct { font-family: var(--md-letter); font-size: var(--md-t-sub); color: var(--md-label-2); }
html[data-thema] :is(.bs-paneel, .mp-s-bs-paneel) .bs-balk { height: 4px; margin-top: 6px; border-radius: 2px; background: var(--md-fill); }
html[data-thema] :is(.bs-paneel, .mp-s-bs-paneel) .bs-balk i { background: var(--md-tint); }
html[data-thema] :is(.bs-paneel, .mp-s-bs-paneel) .bs-noot { margin: 6px 0 0 32px; font-size: var(--md-t-sub); color: var(--md-oranje-tekst); }
html[data-thema] :is(.bs-paneel, .mp-s-bs-paneel) .bs-noot.rustig { color: var(--md-label-2); }
html[data-thema] :is(.bs-paneel, .mp-s-bs-paneel) .bs-vol { margin: 10px 0 0; padding: 9px 12px; border-radius: 10px; background: var(--md-rood-zacht); color: var(--md-rood-tekst); font-size: var(--md-t-sub); font-weight: 500; }
html[data-thema] :is(.bs-paneel, .mp-s-bs-paneel) .bs-vol i { background: var(--md-rood); }
html[data-thema] :is(.bs-paneel, .mp-s-bs-paneel) .bs-voet { padding: 12px 0 0; margin: 0; border: 0; }
html[data-thema] :is(.bs-paneel, .mp-s-bs-paneel) .bs-knop {
  height: 28px; padding: 0 12px; border-radius: 999px; background: var(--md-tint); color: var(--md-op-tint);
  font-family: var(--md-letter); font-size: var(--md-t-tekst); font-weight: 600; transition: transform var(--md-duur-druk) ease-out, filter .14s;
}
html[data-thema] :is(.bs-paneel, .mp-s-bs-paneel) .bs-knop:hover { background: var(--md-tint); filter: brightness(1.08); }
html[data-thema] :is(.bs-paneel, .mp-s-bs-paneel) .bs-knop:active { transform: scale(var(--md-druk-schaal)); }
html[data-thema] :is(.bs-paneel, .mp-s-bs-paneel) .bs-knop:focus-visible { outline: 2px solid var(--md-tint); outline-offset: 2px; }

/* ════ Credits ════ */
html[data-thema] :is(.credits-pop, .mp-s-credits-pop) { width: 300px; max-height: 80vh; padding: 12px; }
html[data-thema] :is(.credits-pop, .mp-s-credits-pop) .cp-head { margin: 2px 2px 8px; }
html[data-thema] :is(.credits-pop, .mp-s-credits-pop) .cp-muted { color: var(--md-label-2); font-size: var(--md-t-sub); line-height: 1.4; padding: 0 2px 2px; }
html[data-thema] :is(.credits-pop, .mp-s-credits-pop) .cp-bal { display: flex; flex-direction: column; gap: 2px; margin: 0 2px; }
html[data-thema] :is(.credits-pop, .mp-s-credits-pop) .cp-bal-num {
  font-family: var(--md-letter); font-size: var(--md-t-titel1); line-height: var(--md-t-titel1-rh); letter-spacing: var(--md-t-titel1-ls);
  font-weight: 700; color: var(--md-label); font-variant-numeric: tabular-nums;
}
html[data-thema] :is(.credits-pop, .mp-s-credits-pop) .cp-bal-eur { font-size: var(--md-t-sub); color: var(--md-label-2); }
html[data-thema] :is(.credits-pop, .mp-s-credits-pop) .cp-bal.cp-low .cp-bal-num { color: var(--md-oranje-tekst); }
html[data-thema] :is(.credits-pop, .mp-s-credits-pop) .cp-bal.cp-zero .cp-bal-num { color: var(--md-rood-tekst); }
html[data-thema] :is(.credits-pop, .mp-s-credits-pop) .cp-bal.cp-unlimited :is(.cp-bal-num, .cp-bal-eur) { color: inherit; }
html[data-thema] :is(.credits-pop, .mp-s-credits-pop) .cp-bal.cp-unlimited .cp-bal-eur { color: var(--md-label-2); }
html[data-thema] :is(.credits-pop, .mp-s-credits-pop) .cp-row { position: relative; display: flex; justify-content: space-between; align-items: center; min-height: 38px; padding: 8px 12px; font-size: var(--md-t-tekst); color: var(--md-label); }
html[data-thema] :is(.credits-pop, .mp-s-credits-pop) .cp-row + .cp-row::before { content: ""; position: absolute; top: 0; right: 0; left: 12px; height: .5px; background: var(--md-sep); }
html[data-thema] :is(.credits-pop, .mp-s-credits-pop) .cp-row .mono { font-family: var(--md-letter); color: var(--md-label-2); font-variant-numeric: tabular-nums; }
html[data-thema] :is(.credits-pop, .mp-s-credits-pop) .cp-warn { margin-top: 10px; padding: 9px 12px; border-radius: 10px; font-size: var(--md-t-sub); line-height: 1.4; background: var(--md-rood-zacht); color: var(--md-rood-tekst); }
html[data-thema] :is(.credits-pop, .mp-s-credits-pop) .cp-warn-amber { background: var(--md-oranje-zacht); color: var(--md-oranje-tekst); }
html[data-thema] :is(.credits-pop, .mp-s-credits-pop) .cp-sub { margin: 14px 2px 6px; font-size: var(--md-t-sub); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--md-label-2); }
html[data-thema] :is(.credits-pop, .mp-s-credits-pop) .cp-packs { display: flex; gap: 6px; }
html[data-thema] :is(.credits-pop, .mp-s-credits-pop) .cp-pack {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px; cursor: pointer;
  background: var(--md-vlak-op-glas); border: 0; border-radius: 10px; box-shadow: var(--md-schaduw-s), 0 0 0 1px var(--md-rand);
  font-family: var(--md-letter); transition: transform var(--md-duur-druk) ease-out, box-shadow .14s;
}
html[data-thema] :is(.credits-pop, .mp-s-credits-pop) .cp-pack:hover { border: 0; box-shadow: var(--md-schaduw-s), 0 0 0 1.5px var(--md-tint); }
html[data-thema] :is(.credits-pop, .mp-s-credits-pop) .cp-pack:active { transform: scale(var(--md-druk-schaal)); }
html[data-thema] :is(.credits-pop, .mp-s-credits-pop) .cp-pack:focus-visible { outline: 2px solid var(--md-tint); outline-offset: 2px; }
html[data-thema] :is(.credits-pop, .mp-s-credits-pop) .cp-pack.cp-pack-sel { background: var(--md-tint-zacht); box-shadow: 0 0 0 1.5px var(--md-tint); }
html[data-thema] :is(.credits-pop, .mp-s-credits-pop) .cp-pack-cr { font-family: var(--md-letter); font-size: var(--md-t-tekst); font-weight: 600; color: var(--md-label); font-variant-numeric: tabular-nums; }
html[data-thema] :is(.credits-pop, .mp-s-credits-pop) .cp-pack-eur { font-size: var(--md-t-voet); color: var(--md-label-2); }
html[data-thema] :is(.credits-pop, .mp-s-credits-pop) .cp-ar { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; background: var(--md-vlak-op-glas); border: 0; border-radius: var(--md-r-groep, 12px); box-shadow: 0 0 0 1px var(--md-rand); }
html[data-thema] :is(.credits-pop, .mp-s-credits-pop) .cp-ar-line { font-size: var(--md-t-sub); line-height: 1.45; color: var(--md-label); }
html[data-thema] :is(.credits-pop, .mp-s-credits-pop) .cp-ar-line b { color: var(--md-label); font-weight: 600; }
html[data-thema] :is(.credits-pop, .mp-s-credits-pop) .cp-ar-dot { background: var(--md-groen); box-shadow: none; }
html[data-thema] :is(.credits-pop, .mp-s-credits-pop) .cp-ar-card { font-size: var(--md-t-sub); color: var(--md-label-2); letter-spacing: 0; }
html[data-thema] :is(.credits-pop, .mp-s-credits-pop) .cp-ar-err { font-size: var(--md-t-sub); color: var(--md-rood-tekst); }
html[data-thema] :is(.credits-pop, .mp-s-credits-pop) :is(.cp-ar-actions button, .cp-ar-on-btn) {
  height: 28px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--md-fill); color: var(--md-label);
  font-family: var(--md-letter); font-size: var(--md-t-tekst); font-weight: 500; transition: transform var(--md-duur-druk) ease-out;
}
html[data-thema] :is(.credits-pop, .mp-s-credits-pop) .cp-ar-on-btn { width: 100%; background: var(--md-tint); color: var(--md-op-tint); font-weight: 600; }
html[data-thema] :is(.credits-pop, .mp-s-credits-pop) :is(.cp-ar-actions button, .cp-ar-on-btn):active { transform: scale(var(--md-druk-schaal)); }
html[data-thema] :is(.credits-pop, .mp-s-credits-pop) :is(.cp-ar-on-btn:hover, .cp-ar-change:hover) { border: 0; filter: brightness(1.04); }
html[data-thema] :is(.credits-pop, .mp-s-credits-pop) .cp-ar-off:hover { border: 0; color: var(--md-rood-tekst); }
html[data-thema] :is(.credits-pop, .mp-s-credits-pop) .cp-note { margin: 10px 2px 0; font-size: var(--md-t-voet); line-height: 1.4; color: var(--md-label-2); }

/* ════ AI-model: keuzelijst in een groep, vinkje rechts ════ */
html[data-thema] :is(.model-pop, .mp-s-model-pop) { width: 300px; max-height: 80vh; padding: 12px; }
html[data-thema] :is(.model-pop, .mp-s-model-pop) .mp-head { margin: 2px 2px 10px; }
html[data-thema] :is(.model-pop, .mp-s-model-pop) .mp-muted { font-size: var(--md-t-sub); color: var(--md-label-2); padding: 0 2px 2px; }
html[data-thema] :is(.model-pop, .mp-s-model-pop) .mp-opt {
  position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; margin: 0; padding: 8px 12px;
  background: var(--md-vlak-op-glas); border: 0; border-radius: 0; color: var(--md-label); text-align: left; cursor: pointer;
  font-family: var(--md-letter); transition: background .14s;
}
html[data-thema] :is(.model-pop, .mp-s-model-pop) .mp-head + .mp-opt { border-radius: 12px 12px 0 0; }
html[data-thema] :is(.model-pop, .mp-s-model-pop) .mp-opt:last-of-type { border-radius: 0 0 12px 12px; }
html[data-thema] :is(.model-pop, .mp-s-model-pop) .mp-head + .mp-opt:last-of-type { border-radius: 12px; }
html[data-thema] :is(.model-pop, .mp-s-model-pop) .mp-opt + .mp-opt::before { content: ""; position: absolute; top: 0; right: 0; left: 12px; height: .5px; background: var(--md-sep); }
html[data-thema] :is(.model-pop, .mp-s-model-pop) .mp-opt:hover { background: color-mix(in srgb, var(--md-vlak-op-glas) 92%, var(--md-label)); border: 0; }
html[data-thema] :is(.model-pop, .mp-s-model-pop) .mp-opt.mp-on { background: var(--md-vlak-op-glas); border: 0; }
html[data-thema] :is(.model-pop, .mp-s-model-pop) .mp-opt.mp-on:hover { background: color-mix(in srgb, var(--md-vlak-op-glas) 92%, var(--md-label)); }
html[data-thema] :is(.model-pop, .mp-s-model-pop) .mp-opt:focus-visible { outline: 2px solid var(--md-tint); outline-offset: -2px; }
html[data-thema] :is(.model-pop, .mp-s-model-pop) .mp-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
html[data-thema] :is(.model-pop, .mp-s-model-pop) .mp-label { font-size: var(--md-t-tekst); font-weight: 500; color: var(--md-label); }
html[data-thema] :is(.model-pop, .mp-s-model-pop) .mp-desc { font-size: var(--md-t-sub); color: var(--md-label-2); }
html[data-thema] :is(.model-pop, .mp-s-model-pop) .mp-radio { order: 2; flex: none; width: 16px; height: 16px; margin: 0; border: 0; border-radius: 0; background: none; position: relative; }
html[data-thema] :is(.model-pop, .mp-s-model-pop) .mp-radio::after { content: none; }
html[data-thema] :is(.model-pop, .mp-s-model-pop) .mp-opt.mp-on .mp-radio::after {
  content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid var(--md-tint); border-width: 0 2px 2px 0;
  border-radius: 0 0 1px 0; background: none; transform: rotate(42deg);
}
html[data-thema] :is(.model-pop, .mp-s-model-pop) .mp-opt.mp-on .mp-label { font-weight: 600; }
html[data-thema] :is(.model-pop, .mp-s-model-pop) .mp-note { margin: 10px 2px 0; font-size: var(--md-t-voet); color: var(--md-label-2); }
html[data-thema] :is(.model-pop, .mp-s-model-pop) .mp-err { margin-top: 10px; padding: 9px 12px; border-radius: 10px; font-size: var(--md-t-sub); background: var(--md-rood-zacht); color: var(--md-rood-tekst); }

/* ════ Profielmenu: dik glas, macOS-menu; Taal en Thema als gewone regels met een segment ════ */
html[data-thema] :is(.pm-menu, .mp-s-pm-menu) { width: 280px; max-height: 80vh; padding: 6px; font-size: var(--md-t-tekst); }
html[data-thema] :is(.pm-menu, .mp-s-pm-menu) .pm-kop { display: flex; align-items: center; gap: 10px; padding: 8px 8px 10px; }
html[data-thema] :is(.pm-menu, .mp-s-pm-menu) .pm-av {
  width: 38px; height: 38px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 15px; font-weight: 600; background: linear-gradient(180deg, #14a0a6, #00646b);
}
html[data-thema] :is(.pm-menu, .mp-s-pm-menu) .pm-naam { font-size: 14px; font-weight: 600; letter-spacing: -.006em; color: var(--md-label); }
html[data-thema] :is(.pm-menu, .mp-s-pm-menu) .pm-sub { font-size: var(--md-t-sub); color: var(--md-label-2); }
html[data-thema] :is(.pm-menu, .mp-s-pm-menu) .pm-scheid { height: .5px; margin: 4px 8px; background: var(--md-sep); }
html[data-thema] :is(.pm-menu, .mp-s-pm-menu) .pm-reg { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 34px; padding: 3px 8px; color: var(--md-label); }
html[data-thema] :is(.pm-menu, .mp-s-pm-menu) .pm-seg { display: inline-flex; gap: 0; padding: 2px; border-radius: 9px; background: var(--md-fill); }
html[data-thema] :is(.pm-menu, .mp-s-pm-menu) .pm-seg button {
  flex: none; height: 24px; padding: 0 10px; border: 0; border-radius: 7px; background: none; color: var(--md-label);
  font-family: var(--md-letter); font-size: var(--md-t-sub); font-weight: 500; cursor: pointer; transition: background .14s, box-shadow .14s;
}
html[data-thema] :is(.pm-menu, .mp-s-pm-menu) .pm-seg button:hover { border: 0; color: var(--md-label); background: var(--md-fill-2); }
html[data-thema] :is(.pm-menu, .mp-s-pm-menu) .pm-seg button.on { background: var(--md-seg-aan); color: var(--md-label); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.04); }
html[data-thema] :is(.pm-menu, .mp-s-pm-menu) .pm-seg button:focus-visible { outline: 2px solid var(--md-tint); outline-offset: 1px; }
html[data-thema] :is(.pm-menu, .mp-s-pm-menu) .pm-item {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 32px; padding: 0 8px; border: 0; border-radius: 7px; background: none;
  color: var(--md-label); font-family: var(--md-letter); font-size: var(--md-t-tekst); font-weight: 500; text-align: left; cursor: pointer; transition: none;
}
html[data-thema] :is(.pm-menu, .mp-s-pm-menu) .pm-item svg { width: 17px; height: 17px; color: var(--md-label-2); stroke-width: 1.7; }
html[data-thema] :is(.pm-menu, .mp-s-pm-menu) .pm-item:is(:hover, :focus-visible) { background: var(--md-tint); color: var(--md-op-tint); outline: none; }
html[data-thema] :is(.pm-menu, .mp-s-pm-menu) .pm-item:is(:hover, :focus-visible) svg { color: var(--md-op-tint); }
html[data-thema] :is(.pm-menu, .mp-s-pm-menu) .pm-item.pm-gevaar, html[data-thema] :is(.pm-menu, .mp-s-pm-menu) .pm-item.pm-gevaar svg { color: var(--md-rood-tekst); }
html[data-thema] :is(.pm-menu, .mp-s-pm-menu) .pm-item.pm-gevaar:is(:hover, :focus-visible) { background: var(--md-rood); color: #fff; }
html[data-thema] :is(.pm-menu, .mp-s-pm-menu) .pm-item.pm-gevaar:is(:hover, :focus-visible) svg { color: #fff; }
html[data-thema] :is(.pm-menu, .mp-s-pm-menu) .pm-tekst { flex: 1; }
html[data-thema] :is(.pm-menu, .mp-s-pm-menu) .pm-stip { width: 7px; height: 7px; border-radius: 50%; margin-left: auto; background: var(--md-oranje); box-shadow: none; }

/* ════ telefoon: elk paneel is een vel van onderen (E4), met greep; de dimlaag eronder ════ */
.mp-dim { position: fixed; inset: 0; cursor: pointer; z-index: calc(var(--md-z-vel, 2147481000) - 1); background: var(--md-dimlaag, rgba(0,0,0,.28)); opacity: 0; }
@media (max-width: 759px) {
  html[data-thema] :is(.bs-paneel, .lv-pop, .credits-pop, .model-pop, .pm-menu, .mp-spook).mp-vel {
    left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; width: auto !important; max-width: none !important;
    max-height: calc(100% - max(env(safe-area-inset-top), 12px) - 10px) !important;
    z-index: var(--md-z-vel, 2147481000);
    border-radius: var(--md-r-vel, 22px) var(--md-r-vel, 22px) 0 0;
    padding: 24px 16px calc(16px + env(safe-area-inset-bottom));
    transform-origin: 50% 100%;
    box-shadow: 0 -10px 40px rgba(0,0,0,.18), var(--md-lichtrand);
  }
  html[data-thema] .mp-vel::before {
    content: ""; position: absolute; top: 8px; left: 50%; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: var(--md-label-3);
  }
  html[data-thema] :is(.pm-menu, .mp-s-pm-menu).mp-vel { padding-left: 10px; padding-right: 10px; }
  /* raakvlakken 44 (E3), tekst 15 */
  html[data-thema] .mp-vel :is(a.lv-row, .mp-opt, .cp-row) { min-height: 48px; }
  html[data-thema] .mp-vel .pm-item { height: 44px; font-size: var(--md-t-tekst); }
  html[data-thema] .mp-vel .pm-reg { min-height: 44px; }
  html[data-thema] .mp-vel .pm-seg button { height: 32px; padding: 0 14px; }
  html[data-thema] .mp-vel :is(.mp-titel, .bs-titel, .cp-head, .mp-head) { font-size: var(--md-t-titel3); line-height: var(--md-t-titel3-rh); letter-spacing: var(--md-t-titel3-ls); }
  html[data-thema] .mp-vel :is(.bs-knop, .cp-ar-on-btn, .cp-ar-actions button) { height: 44px; padding: 0 18px; }
  html[data-thema] .mp-vel .bs-voet { justify-content: stretch; }
  html[data-thema] .mp-vel .bs-knop { width: 100%; justify-content: center; }
  html[data-thema] .mp-vel .cp-pack { padding: 12px 4px; }
}
html[data-thema] :is(.pm-menu, .mp-s-pm-menu) .pm-reg .pm-label { padding: 0; font-size: var(--md-t-tekst); font-weight: 400; letter-spacing: var(--md-t-tekst-ls); text-transform: none; color: var(--md-label); }

/* Credits: kop met icoon (kaart 11 §04) — het icoon in de credits-kleur van de app-iconen, de rest op de gedeelde tokens */
html[data-thema] :is(.credits-pop, .mp-s-credits-pop) .cp-kop { display: flex; align-items: center; gap: 10px; margin: 2px 2px 12px; }
html[data-thema] :is(.credits-pop, .mp-s-credits-pop) .cp-kop .cp-head { margin: 0; }
html[data-thema] :is(.credits-pop, .mp-s-credits-pop) .cp-kop-sub { font-size: var(--md-t-sub); line-height: var(--md-t-sub-rh); color: var(--md-label-2); }
html[data-thema] :is(.credits-pop, .mp-s-credits-pop) .cp-ico {
  width: 32px; height: 32px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 22.5%;
  background: linear-gradient(180deg, #d9952f, #b8761a); color: #fff; box-shadow: 0 .5px 1px rgba(0,0,0,.14);
}
html[data-thema] :is(.credits-pop, .mp-s-credits-pop) .cp-ico svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Profiel op de telefoon: live, apparaten en credits bovenaan als groep (kaart 11 §04 "Profiel op de telefoon") */
html[data-thema] :is(.pm-menu, .mp-s-pm-menu) .pm-stgroep {
  margin: 2px 4px 8px; border-radius: var(--md-r-groep, 12px); overflow: hidden; background: var(--md-vlak-op-glas); box-shadow: 0 0 0 1px var(--md-rand);
}
html[data-thema] :is(.pm-menu, .mp-s-pm-menu) .pm-st {
  position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; background: none;
  color: var(--md-label); font-family: var(--md-letter); font-size: var(--md-t-tekst); text-align: left; cursor: pointer;
}
html[data-thema] :is(.pm-menu, .mp-s-pm-menu) .pm-st + .pm-st::before { content: ""; position: absolute; top: 0; right: 0; left: 40px; height: .5px; background: var(--md-sep); }
html[data-thema] :is(.pm-menu, .mp-s-pm-menu) .pm-st:active { background: var(--md-fill); }
html[data-thema] :is(.pm-menu, .mp-s-pm-menu) .pm-st:focus-visible { outline: 2px solid var(--md-tint); outline-offset: -2px; }
html[data-thema] :is(.pm-menu, .mp-s-pm-menu) .pm-st > svg:first-child { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; color: var(--md-label-2); }
html[data-thema] :is(.pm-menu, .mp-s-pm-menu) .pm-st .pm-tekst { flex: 1; min-width: 0; }
html[data-thema] :is(.pm-menu, .mp-s-pm-menu) .pm-st-w { color: var(--md-label-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
html[data-thema] :is(.pm-menu, .mp-s-pm-menu) .pm-st[data-stand="let"] .pm-st-w { color: var(--md-oranje-tekst); font-weight: 600; }
html[data-thema] :is(.pm-menu, .mp-s-pm-menu) .pm-st[data-stand="fout"] .pm-st-w { color: var(--md-rood-tekst); font-weight: 600; }
html[data-thema] :is(.pm-menu, .mp-s-pm-menu) .pm-st[data-stand="loopt"] .pm-st-w { color: var(--md-tint); }
html[data-thema] :is(.pm-menu, .mp-s-pm-menu) .pm-chev { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--md-label-3); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Credits onbeperkt: één woord, één teken, in een groep (kaart 11 §04) — de uitleg staat er al onder */
html[data-thema] :is(.credits-pop, .mp-s-credits-pop) .cp-bal.cp-unlimited {
  flex-direction: row-reverse; justify-content: space-between; align-items: center; margin: 0; min-height: 44px; padding: 8px 12px;
  background: var(--md-vlak-op-glas); border-radius: var(--md-r-groep, 12px); box-shadow: 0 0 0 1px var(--md-rand);
}
html[data-thema] :is(.credits-pop, .mp-s-credits-pop) .cp-bal.cp-unlimited .cp-bal-num { font-size: 22px; line-height: 1; font-weight: 600; letter-spacing: 0; }
html[data-thema] :is(.credits-pop, .mp-s-credits-pop) .cp-bal.cp-unlimited .cp-bal-eur { font-size: var(--md-t-tekst); color: var(--md-label); }
@media (max-width: 759px) {
  html[data-thema] .mp-vel .pm-seg button { height: 44px; padding: 0 16px; }
  html[data-thema] .mp-vel .pm-seg { border-radius: 12px; }
  html[data-thema] .mp-vel .pm-seg button { border-radius: 10px; }
  html[data-thema] .mp-vel .pm-reg { min-height: 52px; }
}