/* Martha 3D 1.4.0 — Speelgoeddoos (21-10-2026, klus "Martha 3D bouwen door Ramón"; bouwlijst Camila stap 1-8 en 12).
   Kleuren letterlijk uit web/m3d-stijl/16-speelgoed-cute-licht.html en 17-...-donker.html. Laatste stylesheet: wint van de rest.
   html[data-vorm="plat"] (bron.js): geen lagen en geen bewegende wereld, de chat vult het scherm, de knoppen zweven erboven. */
@font-face { font-family: 'SgRond'; src: url(rond.woff2) format('woff2'); font-display: swap; }
:root {
  --bg1: #DDE6FF; --bg2: #F3E9FF; --kaart: #FFFFFF; --ink: #262A4D;
  --blauw: #5B6CFF; --blauwd: #4453E0; --blauwdd: #3341B8; --roze: #FF6B8A; --rozed: #E94B6E; --rozedd: #B8314F;
  --munt: #36D1A8; --muntd: #22B58E; --geel: #FFC83D; --geeld: #F2A900; --lila: #B48CFF; --lilad: #9566F0;
  --schaduw: #B7BFE6; --leeg: #CDD3F0;
  --sg-letter: "Nunito", "Baloo 2", "Varela Round", 'SgRond', system-ui, sans-serif;
  --sg-kop: 112px; --sg-onder: 150px; --sg-knop: 64px;
}
html[data-vorm="plat"], html[data-vorm="plat"] body { background: linear-gradient(170deg, var(--bg1), var(--bg2)) fixed; color: var(--ink); font-family: var(--sg-letter); }
html[data-vorm="plat"] body { margin: 0; overflow: hidden; }

/* ---- stap 2: lagen en bewegende wereld uit ---- */
html[data-vorm="plat"] .layer.bg, html[data-vorm="plat"] .layer.particles, html[data-vorm="plat"] .layer.frame { display: none !important; }
html[data-vorm="plat"] .stage, html[data-vorm="plat"] .device, html[data-vorm="plat"] .scene, html[data-vorm="plat"] .rig, html[data-vorm="plat"] .ui {
  position: fixed !important; inset: 0 !important; width: auto !important; height: auto !important; max-width: none !important; max-height: none !important;
  transform: none !important; perspective: none !important; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; }
html[data-vorm="plat"] .layer { transform: none !important; filter: none !important; }
html[data-vorm="plat"] .chat {
  position: fixed !important; inset: 0 !important; display: flex; flex-direction: column; box-sizing: border-box; margin: 0;
  padding: 0 12px !important; background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
html[data-vorm="plat"] .chat-head, html[data-vorm="plat"] .chat .search { display: none !important; }   /* rustig: geen kopje en geen zoekbalk boven de chat */
html[data-vorm="plat"] .search { margin: 0 4px 8px; border-radius: 28px; background: var(--kaart); color: var(--ink); border: 0; box-shadow: var(--ax-diep); }
html[data-vorm="plat"] .search input { color: var(--ink); font-family: var(--sg-letter); font-size: 18px; }
html[data-vorm="plat"] .log { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; font-family: var(--sg-letter); font-size: 22px; line-height: 1.4; color: var(--ink);
  padding: calc(var(--sg-kop) + max(env(safe-area-inset-top, 0px), var(--app-top, 0px))) 4px calc(var(--sg-onder) + env(safe-area-inset-bottom, 0px)); background: none; border: 0; }
html[data-vorm="plat"] .log .txt, html[data-vorm="plat"] .log p { font-size: 22px; font-family: var(--sg-letter); }
html[data-vorm="plat"] .msg .body { background: var(--kaart); color: var(--ink); border-radius: 28px; box-shadow: var(--ax-diep); border: 0; padding: 12px 16px; }
html[data-vorm="plat"] .msg.alex .body { background: var(--blauw); color: #fff; box-shadow: 0 6px 0 var(--blauwdd); }
html[data-vorm="plat"] .msg .meta { color: inherit; opacity: .7; font-size: 14px; }
html[data-vorm="plat"] .compose { position: fixed; left: 12px; right: 12px; bottom: calc(var(--sg-onder) - 8px + env(safe-area-inset-bottom, 0px)); z-index: 72;
  background: var(--kaart); border-radius: 28px; box-shadow: var(--ax-diep); padding: 6px 8px; }
html[data-vorm="plat"] .compose input { font-size: 20px; color: var(--ink); background: none; font-family: var(--sg-letter); }

/* ---- stap 3: de kop zonder balk, met een zacht waasje ---- */
html[data-vorm="plat"] #kopStrook { position: fixed !important; top: 0; left: 0; right: 0; z-index: 70; display: flex !important; align-items: flex-start; gap: 8px;
  padding: calc(10px + max(env(safe-area-inset-top, 0px), var(--app-top, 0px))) 10px 0; height: auto; background: none !important; border: 0 !important; box-shadow: none !important; box-sizing: border-box; }
html[data-vorm="plat"] #kopStrook::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 140px; z-index: -1; pointer-events: none;
  background: linear-gradient(var(--bg1) 55%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
html[data-vorm="plat"] #kopWensKnop, html[data-vorm="plat"] #kopBlok { display: none !important; }
.sg-menu, .sg-knopje { font-family: var(--sg-letter); }
.sg-menu { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: 0; padding: 0; color: var(--ink); cursor: pointer; }
.sg-menu-ic { width: var(--sg-knop); height: var(--sg-knop); border-radius: 50%; background: var(--lila); box-shadow: 0 6px 0 var(--lilad); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.sg-menu-ic i { display: block; width: 26px; height: 4px; border-radius: 2px; background: #fff; }
.sg-woord { font-size: 14px; font-weight: 800; line-height: 1.1; white-space: nowrap; }
.sg-seg { flex: 1 1 auto; min-width: 0; display: flex; margin-top: 6px; background: var(--kaart); border-radius: 30px; padding: 5px; box-shadow: var(--ax-diep); gap: 2px; }
.sg-deel { flex: 1 1 0; min-width: 0; position: relative; border: 0; border-radius: 26px; background: none; color: var(--ink); font-family: var(--sg-letter);
  font-size: 18px; font-weight: 800; padding: 12px 4px; min-height: 48px; cursor: pointer; white-space: nowrap; overflow: visible; }
.sg-deel[aria-selected="true"] { background: var(--roze); color: #fff; box-shadow: 0 4px 0 var(--rozedd); }
.sg-deel-t { display: inline-block; }
.sg-rechts { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
html[data-vorm="plat"] #kopWie { height: 48px; padding: 0; background: none; border: 0; }
html[data-vorm="plat"] #kopWie:empty { display: none; }
html[data-vorm="plat"] .kop-gz { position: relative; width: 48px; height: 48px; margin-left: -14px; border-radius: 50%; background: var(--kaart); box-shadow: var(--ax-diep); overflow: visible; }
html[data-vorm="plat"] .kop-gz:first-child { margin-left: 0; }
html[data-vorm="plat"] .kop-gz .gz { width: 38px; height: 38px; margin: 5px; border-radius: 50%; }
.sg-ring { position: absolute; inset: 0; width: 48px; height: 48px; transform: rotate(-90deg); pointer-events: none; }
.sg-ring circle { fill: none; stroke-width: 4; stroke-linecap: round; }
.sg-ring .bak { stroke: var(--leeg); }
html[data-vorm="plat"] .kop-gz.meer { display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 16px; color: var(--ink); background: var(--geel); }
@keyframes sg-tel { 50% { transform: scale(1.18); } }
@media (max-width: 419px) { .sg-deel { font-size: 16px; padding: 12px 2px; } }
@media (max-width: 379px) {
  .sg-woord { display: none; }
  :root { --sg-knop: 52px; --sg-kop: 96px; }
  .sg-deel { font-size: 15px; padding: 10px 2px; }
  html[data-vorm="plat"] .kop-gz { width: 40px; height: 40px; margin-left: -18px; }
  html[data-vorm="plat"] .kop-gz .gz { width: 32px; height: 32px; margin: 4px; }
  .sg-ring { width: 40px; height: 40px; }
  html[data-vorm="plat"] #kopStrook { gap: 5px; padding-left: 6px; padding-right: 6px; }
}
/* afscherming (zoals de oude onderbalk): in de app zonder rol (niet ingelogd) alleen Privé, nooit Werk en Bedrijf */
html[data-schil="app"]:not([data-rol="eigenaar"]):not([data-rol="gebruiker"]) .sg-deel:not([data-wereld="prive"]) { display: none !important; }
/* uitklapmenu, kaartjes onder de kop */
.sg-menu-lijst, .sg-kaartje { position: fixed; z-index: 90; left: 10px; top: calc(var(--sg-kop) + max(env(safe-area-inset-top, 0px), var(--app-top, 0px))); background: var(--kaart); color: var(--ink);
  border-radius: 28px; box-shadow: var(--ax-diep), 0 10px 30px rgba(0,0,0,.18); padding: 10px; font-family: var(--sg-letter); }
.sg-menu-lijst[hidden], .sg-kaartje[hidden] { display: none; }
.sg-menu-lijst button { display: flex; width: 100%; align-items: center; gap: 12px; border: 0; background: none; color: var(--ink); font: 800 20px var(--sg-letter); padding: 12px 14px; border-radius: 20px; min-height: 56px; text-align: left; }
.sg-menu-lijst button:active { background: var(--bg1); }
.sg-kaartje { left: 10px; right: 10px; padding: 16px 18px; font-size: 18px; }
.sg-kaartje b { font-size: 20px; }
.sg-kaartje p { margin: 6px 0; }
.sg-kaartje ul { margin: 6px 0 10px; padding-left: 22px; }
.sg-kaartje .sg-hint { opacity: .7; font-size: 15px; }
.sg-balk { height: 12px; border-radius: 6px; background: var(--leeg); overflow: hidden; margin: 8px 0; }
.sg-balk i { display: block; height: 100%; border-radius: 6px; background: var(--munt); }
.sg-ok { border: 0; border-radius: 24px; background: var(--blauw); color: #fff; font: 800 18px var(--sg-letter); padding: 10px 22px; box-shadow: 0 5px 0 var(--blauwdd); }

/* ---- stap 5: onderin vier zwevende knoppen met een woordje, zonder balk ---- */
html[data-vorm="plat"] .bottomnav { display: none !important; }
html[data-vorm="plat"] .actions { position: fixed !important; left: 0; right: 0; bottom: calc(26px + env(safe-area-inset-bottom, 0px)); z-index: 70; display: flex !important;
  justify-content: center; align-items: flex-end; gap: 18px; background: none !important; border: 0 !important; box-shadow: none !important; padding: 0; pointer-events: none; }
html[data-vorm="plat"] .actions::before { content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: var(--sg-onder); z-index: -1; pointer-events: none;
  background: linear-gradient(transparent, var(--bg2) 50%); }
html[data-vorm="plat"] .actions .ab { pointer-events: auto; position: relative; width: var(--sg-knop); height: var(--sg-knop); min-width: 0; border-radius: 50%; border: 0;
  color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 0; transform: none; }
html[data-vorm="plat"] .actions .ab .ic { width: 30px; height: 30px; stroke: #fff; color: #fff; }
html[data-vorm="plat"] .actions .ab::after { content: attr(data-woord); position: absolute; top: 100%; margin-top: 8px; left: 50%; transform: translateX(-50%);
  font: 800 14px var(--sg-letter); color: var(--ink); white-space: nowrap; }
html[data-vorm="plat"] .actions #btnErbij { background: var(--blauw) !important; box-shadow: 0 6px 0 var(--blauwdd) !important; }
html[data-vorm="plat"] .actions #btnKbd { background: var(--munt) !important; box-shadow: 0 6px 0 var(--muntd) !important; }
html[data-vorm="plat"] .actions #btnMic { background: var(--roze) !important; box-shadow: 0 6px 0 var(--rozedd) !important; width: 88px; height: 88px; }
html[data-vorm="plat"] .actions #btnMic .ic { width: 40px; height: 40px; }
html[data-vorm="plat"] .actions #btnSnd { background: var(--geel) !important; box-shadow: 0 6px 0 var(--geeld) !important; }
html[data-vorm="plat"] .actions .ab:active { transform: translateY(4px); box-shadow: var(--ax-diep-klein) !important; }
html[data-vorm="plat"] .micwrap { position: fixed !important; left: 0; right: 0; bottom: calc(150px + env(safe-area-inset-bottom, 0px)); z-index: 71; display: flex; justify-content: center; pointer-events: none; background: none; }
html[data-vorm="plat"] .micwrap:not(:has(#micBar.is-warn)) { display: none !important; }
html[data-vorm="plat"] #micBar { pointer-events: auto; border-radius: 20px; padding: 4px 12px; min-height: 0; font: 800 13px var(--sg-letter); background: var(--kaart); color: var(--rozed); border: 0; box-shadow: var(--ax-diep); }
html[data-vorm="plat"] #micBar .ic { width: 16px; height: 16px; }

/* ---- stap 7: Moppie onderaan in de chat zolang Martha bezig is ---- */
.m3g-moppie [data-ding-laag], .m3g-moppie [data-extra-laag] { display: none; }
.m3g-moppie[data-ding="lampje"] [data-ding-laag="lampje"], .m3g-moppie[data-ding="loep"] [data-ding-laag="loep"], .m3g-moppie[data-ding="laptop"] [data-ding-laag="laptop"],
.m3g-moppie[data-ding="hamer"] [data-ding-laag="hamer"], .m3g-moppie[data-ding="zwaai"] [data-ding-laag="zwaai"] { display: inline; }
.m3g-moppie[data-extra~="1"] [data-extra-laag="1"], .m3g-moppie[data-extra~="2"] [data-extra-laag="2"], .m3g-moppie[data-extra~="3"] [data-extra-laag="3"],
.m3g-moppie[data-extra~="4"] [data-extra-laag="4"] { display: inline; }
.sg-bezig { display: flex; align-items: center; gap: 14px; background: var(--kaart); color: var(--ink); border-radius: 28px; padding: 10px 16px 10px 10px; box-shadow: var(--ax-diep); }
.sg-bezig-moppie { flex: 0 0 96px; width: 96px; height: 96px; }
.sg-bezig-moppie svg { width: 96px; height: 96px; display: block; }
.sg-bezig .m3g-pip-lijf { transform-origin: 50% 90%; animation: sg-wiebel 1.6s ease-in-out infinite; }
@keyframes sg-wiebel { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg) translateY(-2px); } }
.sg-bezig-t { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sg-bezig-t b { font: 900 22px var(--sg-letter); }
.sg-bolletjes { display: flex; gap: 6px; }
.sg-bolletjes i { width: 10px; height: 10px; border-radius: 50%; background: var(--blauw); animation: sg-bol 1.2s infinite ease-in-out; }
.sg-bolletjes i:nth-child(2) { animation-delay: .2s; background: var(--roze); }
.sg-bolletjes i:nth-child(3) { animation-delay: .4s; background: var(--munt); }
@keyframes sg-bol { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-6px); opacity: 1; } }
.sg-bezig-klussen { align-self: flex-start; border: 0; border-radius: 16px; background: var(--roze); color: #fff; font: 800 15px var(--sg-letter); padding: 5px 12px; box-shadow: 0 3px 0 var(--rozedd); }
.sg-bezig-klussen[hidden] { display: none; }
html[data-vorm="plat"] .msg.typing .av-col { display: none; }
html[data-vorm="plat"] .msg.typing .body { background: none; box-shadow: none; padding: 0; }
@media (prefers-reduced-motion: reduce) {
  .sg-bezig .m3g-pip-lijf, .sg-bolletjes i { animation: none !important; }
}

/* ---- stap 8: Privé, Werk en Bedrijf als volle pagina met terugknop en grote tegels ---- */
html[data-vorm="plat"] .sheet { position: fixed !important; inset: 0 !important; z-index: 60 !important; width: auto !important; height: auto !important; max-height: none !important; max-width: none !important;
  margin: 0 !important; border-radius: 0 !important; transform: none !important; display: none; flex-direction: column; box-sizing: border-box;
  padding: calc(var(--sg-kop) + max(env(safe-area-inset-top, 0px), var(--app-top, 0px))) 14px 20px !important; background: linear-gradient(170deg, var(--bg1), var(--bg2)) !important; color: var(--ink); border: 0 !important; box-shadow: none !important; opacity: 1 !important; }
html[data-vorm="plat"] .sheet.open { display: flex !important; }
html[data-vorm="plat"] .sheet-head { display: flex; align-items: center; gap: 14px; padding: 4px 0 12px; border: 0; background: none; }
html[data-vorm="plat"] .sheet-head h2 { font: 900 30px var(--sg-letter); color: var(--ink); letter-spacing: 0; text-transform: none; margin: 0; }
html[data-vorm="plat"] #sheetClose { display: none; }
.sg-terug { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%; border: 0; background: var(--kaart); color: var(--ink); box-shadow: var(--ax-diep); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.sg-terug svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
html[data-vorm="plat"] .sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; font-family: var(--sg-letter); font-size: 20px; color: var(--ink); }
html[data-vorm="plat"] .sheet-body .pl-tegels { display: grid !important; grid-template-columns: 1fr 1fr; gap: 14px; }
html[data-vorm="plat"] .sheet-body .pl-tegel { background: var(--kaart); color: var(--ink); border-radius: 28px; box-shadow: var(--ax-diep); border: 0; padding: 16px; min-height: 120px; }
html[data-vorm="plat"] .sheet-body .nt-tegel { border-radius: 28px; min-height: 120px; }   /* de game-rand en het lint in wereldkleur blijven */
html[data-vorm="plat"] .sheet-body .pl-tegel .pl-ic, html[data-vorm="plat"] .sheet-body .nt-tegel .pl-ic { width: 56px; height: 56px; }
html[data-vorm="plat"] .sheet-body .pl-tegel .pl-t, html[data-vorm="plat"] .sheet-body .nt-tegel b { font-size: 22px; }
/* het Puntenboekje (stap 12), ook een volle pagina */
.sg-pagina { position: fixed; inset: 0; z-index: 65; display: flex; flex-direction: column; box-sizing: border-box; overflow-y: auto;
  padding: calc(var(--sg-kop) + max(env(safe-area-inset-top, 0px), var(--app-top, 0px))) 14px 30px; background: linear-gradient(170deg, var(--bg1), var(--bg2)); color: var(--ink); font-family: var(--sg-letter); }
.sg-pagina[hidden] { display: none; }
.sg-pagina-kop { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.sg-pagina-kop h2 { font: 900 30px var(--sg-letter); margin: 0; }
.sg-vak { background: var(--kaart); border-radius: 28px; box-shadow: var(--ax-diep); padding: 14px 18px; margin: 0 0 14px; font-size: 19px; }
.sg-vak h3 { margin: 0 0 6px; font: 900 21px var(--sg-letter); }
.sg-groot { font: 900 44px var(--sg-letter); color: var(--geeld); }
.sg-vak ul { margin: 0; padding: 0; list-style: none; }
.sg-vak li { padding: 5px 0; }
.sg-vak li small { opacity: .7; }
.sg-rijtje { display: flex; gap: 14px; flex-wrap: wrap; }
.sg-wring { display: flex; flex-direction: column; align-items: center; font-size: 15px; }
.sg-wring svg { width: 64px; height: 64px; transform: rotate(-90deg); }
.sg-wring circle { fill: none; stroke-width: 7; stroke-linecap: round; }
.sg-keuze { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.sg-keuze button { border: 0; border-radius: 22px; padding: 10px 16px; font: 800 17px var(--sg-letter); background: var(--bg1); color: var(--ink); min-height: 48px; }
.sg-keuze button[aria-pressed="true"] { background: var(--roze); color: #fff; box-shadow: 0 4px 0 var(--rozedd); }

/* ===== 1.4.1 (21-10-2026, klus "Martha 3D verbeterronde"; eigenaar: "het lijkt niet op wat je had getekend, de geel-zwart-witte
   stijl", "veel lag", "iconen gaan mee bij typen", "scherm vol maar weinig info") ===== */
/* geel-zwart-wit weg: de oude kleuren van styles.css (casual game-stijl 18-10) en game.css (1.3.3) wijzen nu naar de Speelgoeddoos.
   Er werd geen oude stijlkeuze onthouden (m3d.thema kent alleen licht/donker/systeem); wat speelgoed.css niet overschreef, bleef
   in de oude kleuren staan. */
html[data-vorm="plat"] {
  --bg: var(--bg1); --paper: var(--kaart); --paper-2: var(--bg1); --text: var(--ink); --text-dim: #6B6F99;
  --yellow: var(--blauw); --yellow-hi: var(--lila); --yellow-lo: var(--blauwdd); --cyan: var(--blauw); --green: var(--munt); --red: var(--roze);
  --rand: 0 0 0 0 transparent; --rond: var(--sg-letter);
  --m3g-geel: var(--geel); --m3g-geel-lo: var(--geeld); --m3g-inkt: var(--schaduw); --m3g-wit: var(--kaart); --m3g-kaart: var(--kaart);
  --m3g-nacht: var(--bg1); --m3g-nacht-hi: var(--bg2); --m3g-dim: #6B6F99; --m3g-goed: var(--munt); --m3g-fout: var(--roze);
  --m3g-prive: var(--roze); --m3g-werk: var(--blauw); --m3g-bedrijf: var(--lila); --m3g-font: var(--sg-letter);
}
/* lag: niets bewegends meer op de achtergrond; geen blur over het hele scherm, geen vaste achtergrond die bij elk scrolstapje
   opnieuw getekend wordt en geen will-change (elke laag een eigen tekenvlak); de kwartslag van de iconen staat uit (motion.js) */
html[data-vorm="plat"], html[data-vorm="plat"] body { background-attachment: scroll; }
html[data-vorm="plat"] #kopStrook::before { -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(var(--bg1) 70%, transparent); }
html[data-vorm="plat"] .rig, html[data-vorm="plat"] .layer, html[data-vorm="plat"] .bg, html[data-vorm="plat"] .particles { will-change: auto !important; }
html[data-vorm="plat"] .bg, html[data-vorm="plat"] .particles, html[data-vorm="plat"] .frame, html[data-vorm="plat"] .edge-light, html[data-vorm="plat"] .gloss { animation: none !important; }
/* compacter: kleinere kop en knoppen, de chat krijgt de ruimte (was kop 112, onder 150, knop 64, praatknop 88) */
:root { --sg-kop: 84px; --sg-onder: 112px; --sg-knop: 52px; }
.sg-menu-ic { gap: 4px; } .sg-menu-ic i { width: 22px; height: 3px; }
.sg-woord { font-size: 12px; }
.sg-seg { margin-top: 2px; padding: 4px; }
.sg-deel { font-size: 17px; padding: 8px 4px; min-height: 40px; }
html[data-vorm="plat"] #kopStrook { padding-top: calc(6px + max(env(safe-area-inset-top, 0px), var(--app-top, 0px))); }
html[data-vorm="plat"] #kopStrook::before { height: 96px; }
html[data-vorm="plat"] #kopWie { height: 40px; }
html[data-vorm="plat"] .kop-gz { width: 40px; height: 40px; margin-left: -12px; }
html[data-vorm="plat"] .kop-gz .gz { width: 32px; height: 32px; margin: 4px; }
.sg-ring { width: 40px; height: 40px; }
html[data-vorm="plat"] .actions { bottom: calc(22px + env(safe-area-inset-bottom, 0px)); gap: 16px; }
html[data-vorm="plat"] .actions .ab .ic { width: 26px; height: 26px; }
html[data-vorm="plat"] .actions .ab::after { font-size: 12px; margin-top: 5px; }
html[data-vorm="plat"] .actions #btnMic { width: 66px; height: 66px; }
html[data-vorm="plat"] .actions #btnMic .ic { width: 32px; height: 32px; }
@media (max-width: 379px) { :root { --sg-knop: 46px; --sg-kop: 78px; } }
/* toetsenbord: de pagina krimpt niet meer mee (main.dart); alleen het typveld en het einde van de chat schuiven boven het toetsenbord */
html[data-vorm="plat"][data-tb] .compose { bottom: calc(var(--tb, 0px) + 8px); }
html[data-vorm="plat"][data-tb] .log { padding-bottom: calc(var(--tb, 0px) + 80px); }
/* 07-11-2026 (klus "Ailex iPhone typvak"): alleen iOS WebKit (data-ios, gezet in interactions.js). iOS opent het toetsenbord niet
   betrouwbaar voor een veld dat in dezelfde tik van display:none komt of in een 3D-context (preserve-3d/will-change: transform) zit.
   Daarom: het typveld blijft in de layout (onzichtbaar en niet aantikbaar als het dicht is) en de voorouders van .compose zijn plat.
   Android (Chrome, Brave, de apk) krijgt data-ios nooit en blijft dus precies zoals het was. */
html[data-ios][data-vorm="plat"] .compose[hidden] { display: flex; visibility: hidden; pointer-events: none; }
html[data-ios][data-vorm="plat"] .rig, html[data-ios][data-vorm="plat"] .ui, html[data-ios][data-vorm="plat"] .layer.chat,
html[data-ios][data-vorm="plat"] .compose { transform-style: flat !important; will-change: auto !important; transform: none !important; }
/* de 3D-dikte van de oude knoppen (zwarte plaatjes .ex achter elke knop), de glans en de schaduwlaag van lighting.js: weg */
html[data-vorm="plat"] .ex, html[data-vorm="plat"] .edge-light, html[data-vorm="plat"] .gloss, html[data-vorm="plat"] .sh { display: none !important; will-change: auto !important; }
/* 1.4.2: microfoon gepauzeerd = geen geel meer (Celeste 21-10); de pauze zie je aan het doorgestreepte icoon en het labeltje */
html[data-vorm="plat"] .b3d.is-warn, html[data-vorm="plat"] .micbar.is-warn { --face: var(--kaart); --face-hi: var(--kaart); }
/* ===== 1.4.2 (21-10-2026, klus "Martha 3D herstel na test"; gebruikerstest Celeste 1.4.1) ===== */
/* knoppen onderin zoals 27-optie1: de witte .face-laag met 3px donkere rand (styles.css .face, lighting.js) kwam over de gekleurde
   knop heen te liggen; in de platte vorm weg, de kleur zit op de knop zelf, het icoon is wit. Een zacht glansvlekje zoals op het blad. */
html[data-vorm="plat"] .actions .face, html[data-vorm="plat"] .micwrap .face { display: none !important; }
html[data-vorm="plat"] .actions .ab::before { content: ''; position: absolute; left: 22%; top: 12%; width: 30%; height: 16%; border-radius: 50%;
  background: rgba(255, 255, 255, .45); transform: rotate(-20deg); pointer-events: none; }
html[data-vorm="plat"] .actions #btnMic.is-warn .ic { opacity: .9; }
/* de kop snijdt de bovenste chatregel niet meer half af: de chat vult nog steeds het hele scherm, maar wat onder de kop zou staan
   wordt weggeknipt (clip-path, geen eigen laag, geen blur); de onderste 12px van het waasje (::before 96px, kop 84px) laat een
   regel daaronder zacht verschijnen in plaats van dat hij half door de kop schemert */
html[data-vorm="plat"] .log { clip-path: inset(calc(var(--sg-kop) + max(env(safe-area-inset-top, 0px), var(--app-top, 0px))) 0 0 0); }
/* gezichtjes zoals 27-personeel-bezig: getekend gezichtje op een lichte plekkleur, ring eromheen, naam eronder; geen zwart rondje */
html[data-vorm="plat"] .kop-gz { border: 0; margin-left: 4px; background: var(--kaart); box-shadow: var(--ax-diep); overflow: visible; }
html[data-vorm="plat"] .kop-gz:first-child { margin-left: 0; }
html[data-vorm="plat"] .kop-gz .gz-naam { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); max-width: 48px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; padding: 0 5px; border-radius: 8px; background: var(--kaart); color: var(--ink);
  font: 800 10px/14px var(--sg-letter); box-shadow: var(--ax-diep-klein); pointer-events: none; }
html[data-vorm="plat"] .sg-rechts { gap: 10px; }
/* de oude 3px zwarte randen op de Privé-planning (planning.css) en de knopjes in het klussenlijstje (lampjes.css): zacht zoals de rest */
html[data-vorm="plat"] .pl-paneel, html[data-vorm="plat"] .pl-ballon, html[data-vorm="plat"] .pl-rij, html[data-vorm="plat"] .kl-knop {
  border-color: transparent !important; box-shadow: var(--ax-diep) !important; }

/* ===== 1.4.3 (21-10-2026, klus "Martha 3D herstel ronde 3"; hertest Celeste 1.4.2, organisatie/testen/m3d-gebruikerstest/verslag-hertest-1.4.2.md) ===== */
/* 1 de rondjes naast de berichten: rond en zacht zoals 27-optie1, geen 3px donkere rand en geen hoekje meer (styles.css .av);
   jij = witte letter op blauw, Martha = haar zeshoekje op zacht crème */
html[data-vorm="plat"] { --av-martha: #FFF1C9; --av-martha-ic: #8A5530; }
html[data-vorm="plat"] .msg .av { width: 34px; height: 34px; border: 0; border-radius: 50%; font: 900 17px var(--sg-letter); }
html[data-vorm="plat"] .msg.alex .av { background: var(--blauw); color: #fff; box-shadow: 0 3px 0 var(--blauwdd); }
html[data-vorm="plat"] .msg.martha .av { background: var(--av-martha); color: var(--av-martha-ic); box-shadow: var(--ax-diep); }
/* 2 de gekozen wereld in de schuifknop heeft een eigen kleur (kop-speelgoed.js zet er altijd precies één op aria-selected) */
.sg-deel[data-wereld="werk"][aria-selected="true"] { background: var(--blauw); box-shadow: 0 4px 0 var(--blauwdd); }
.sg-deel[data-wereld="bedrijf"][aria-selected="true"] { background: var(--lilad); box-shadow: 0 4px 0 var(--blauwdd); }
/* 3 donker icoon op de lichte knoppen Typen (munt) en Geluid (geel), zoals de gele knop op 27-optie1 (WCAG 2.2 1.4.11: 3:1) */
html[data-vorm="plat"] .actions #btnKbd .ic, html[data-vorm="plat"] .actions #btnSnd .ic { stroke: #262A4D; color: #262A4D; }
/* de roze praatknop: wit icoon haalde maar 2,72:1 (licht) en 2,21:1 (donker); een wat dieper roze (#E94B6E, --rozed van licht) geeft 3,7:1
   en blijft het roze van het blad */
html[data-vorm="plat"] .actions #btnMic { background: #E94B6E !important; box-shadow: 0 6px 0 #B8314F !important; }
/* 24-10-2026 (eigenaar: "als ik de microfoon aanzet moet hij groen zijn"): zolang de microfoon aan staat (setMic in interactions.js
   zet dan .is-ok) is de praatknop groen, het groen van .b3d.is-ok; wit icoon 3,3:1 (WCAG 1.4.11: 3:1). Pauze/uit = roze zoals hierboven */
html[data-vorm="plat"] .actions #btnMic.is-ok { background: #4FDDB6 !important; color: #262A4D !important; box-shadow: 0 6px 0 #36D1A8 !important; }
/* 24-10-2026 (Lucía): "Luister even niet" (stem.js zet data-gedempt) = niet groen, weer roze */
html[data-vorm="plat"][data-gedempt] .actions #btnMic.is-ok { background: #E94B6E !important; box-shadow: 0 6px 0 #B8314F !important; }
/* 4 witte tekst in je eigen blauwe bubbel (styles.css .alex .txt / .alex .meta maakten hem donker) */
html[data-vorm="plat"] .msg.alex .txt, html[data-vorm="plat"] .msg.alex .meta { color: #fff; }
/* 5 geen lege band onder de kop: de melding "Voorbeeldgegevens / geen verbinding" (echt.js #bronMelding) stond in de chat-kolom
   onder de kop verstopt en duwde de chat 32-50px omlaag; nu een klein zwevend kaartje net onder de kop, in de Speelgoeddoos-kleuren */
html[data-vorm="plat"] .bron-melding { position: fixed; z-index: 69; left: 50%; transform: translateX(-50%); top: calc(var(--sg-kop) + max(env(safe-area-inset-top, 0px), var(--app-top, 0px)));
  max-width: calc(100% - 40px); margin: 0; padding: 4px 12px; border: 0; border-radius: 16px; background: var(--kaart); color: var(--ink);
  font: 800 13px/1.3 var(--sg-letter); box-shadow: var(--ax-diep); pointer-events: none; }
/* 6 namen onder de gezichtjes 12px; de gezichtjes 6px uit elkaar en een naam nooit breder dan gezicht plus tussenruimte, zodat
   namen elkaar niet raken */
html[data-vorm="plat"] .kop-gz { margin-left: 6px; }
html[data-vorm="plat"] .kop-gz .gz-naam { font: 800 12px/14px var(--sg-letter); max-width: 46px; padding: 0 3px; box-sizing: border-box; bottom: -9px; }

/* ===== 1.4.4 (21-10-2026, klus "Martha 3D herstel ronde 4"; hertest Celeste 1.4.3, organisatie/testen/m3d-gebruikerstest/verslag-hertest-1.4.3.md) ===== */
/* 1 de volle pagina's Privé, Werk en Bedrijf zoals blad 22 (web/m3d-stijl/22-speelgoed-prive-pagina.html): geen band bovenaan (de kop
   ligt onder de pagina, dus de ruimte voor de kop hoeft niet vrij), een gekleurde terugknop in de wereldkleur (kop-speelgoed.js zet
   #sheet[data-wereld]): Privé roze, Werk blauw, Bedrijf lila zoals de schuifknop; geen "3D"-tekstschaduw en geen rand onder de titel */
/* 1.4.9 (22-10-2026, Perla: datum "Di 20" te flets): wit op #E94B6E haalde maar 3,69:1; #CF3A60 geeft 4,74:1 (WCAG 1.4.3, kleine tekst 4,5:1) */
html[data-vorm="plat"] .sheet { --wk: #CF3A60; --wkd: #A82848; padding-top: calc(12px + max(env(safe-area-inset-top, 0px), var(--app-top, 0px))) !important; }
html[data-vorm="plat"] .sheet[data-wereld="werk"] { --wk: #4453E0; --wkd: #3341B8; }
html[data-vorm="plat"] .sheet[data-wereld="bedrijf"] { --wk: #7A50D6; --wkd: #5E36B0; }
html[data-vorm="plat"] .sheet:not([data-wereld]) { --wk: #4453E0; --wkd: #3341B8; }
.sg-pagina { padding-top: calc(12px + max(env(safe-area-inset-top, 0px), var(--app-top, 0px))); }
html[data-vorm="plat"] .sheet-head { padding: 0 0 12px; gap: 12px; border: 0 !important; }
html[data-vorm="plat"] #sheetTitle { text-transform: none; display: inline-flex; align-items: center; gap: 8px; text-shadow: none; border: 0; background: none; padding: 0; font-size: 28px; line-height: 1.1; }
html[data-vorm="plat"] .sheet[data-wereld] #sheetTitle::before { content: ''; flex: none; width: 26px; height: 26px; background: var(--wk);
  -webkit-mask: var(--wk-ic) center / contain no-repeat; mask: var(--wk-ic) center / contain no-repeat; }
.sheet[data-wereld="prive"] { --wk-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-8 9 8M5 9v12h14V9M10 21v-6h4v6'/%3E%3C/svg%3E"); }
.sheet[data-wereld="werk"] { --wk-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7.5' width='18' height='12.5' rx='2.5'/%3E%3Cpath d='M9 7.5V5.5A1.5 1.5 0 0 1 10.5 4h3A1.5 1.5 0 0 1 15 5.5v2M3 13h18'/%3E%3C/svg%3E"); }
.sheet[data-wereld="bedrijf"] { --wk-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l2-5h14l2 5M3 9h18v3a3 3 0 0 1-6 0 3 3 0 0 1-6 0 3 3 0 0 1-6 0zM5 14v6h14v-6M10 20v-4h4v4'/%3E%3C/svg%3E"); }
.sg-terug { position: relative; width: 50px; height: 50px; background: var(--wk, #4453E0); color: #fff; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .1), 0 5px 0 var(--wkd, #3341B8); }
.sg-terug::before { content: ''; position: absolute; left: 22%; top: 12%; width: 32%; height: 15%; border-radius: 8px; background: rgba(255, 255, 255, .55); transform: rotate(-20deg); pointer-events: none; }
.sg-terug svg { width: 24px; height: 24px; stroke-width: 2.8; }
/* Martha's zinnetje: haar zeshoekje op zacht crème (zoals het rondje in de chat) i.p.v. de paarse bol, de ballon crème zoals het blad */
html[data-vorm="plat"] .sheet .pl-bol { width: 38px; height: 38px; border: 0 !important; box-shadow: var(--ax-diep);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A5530' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l8 5v10l-8 5-8-5V7zM12 7l4 2.5v5L12 17l-4-2.5v-5zM12 2v5M12 17v5'/%3E%3C/svg%3E") center / 22px no-repeat, var(--av-martha); }
html[data-vorm="plat"] .sheet .pl-martha .pl-ballon { background: var(--av-martha) !important; color: var(--ink); border-radius: 20px; border-bottom-left-radius: 6px; font-size: 15px; line-height: 1.35; font-weight: 800; padding: 8px 12px; }
html[data-vorm="plat"] .sheet .pl-privekop .pl-martha { align-items: flex-end; margin-top: 0; }
html[data-vorm="plat"] .sheet .pl-privekop { margin: 0 0 14px; }
/* de tegels: gekleurde speelgoedtegels met nopjes en een wit pilletje met icoon en gezichtje (blad 22); de oneven laatste over de
   hele breedte (Logboek). Vaste kleuren in licht en donker; tekstkleur per tegel zo dat de status >= 4,5:1 haalt. */
html[data-vorm="plat"] .sheet-body .pl-tegels { gap: 18px 12px; margin: 2px 0 14px; }
/* 31-10-2026 (klus "Ailex opmaak tegels en bol", eigenaar 22:22 "wordt niet goed weer gegeven"): met 1fr 1fr is een kolom minstens zo
   breed als het langste woord (Boodschappen, Administratie; b staat op nowrap), dus liep de rechterkolom op 360-412 px over de rand.
   minmax(0, 1fr) + min-width 0 = twee echt gelijke kolommen binnen de 14px-rand van .sheet; het pilletje krimpt mee (zoals dossier.css). */
html[data-vorm="plat"] .sheet-body .pl-tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; box-sizing: border-box; }
html[data-vorm="plat"] .sheet-body .pl-tegels > * { min-width: 0; max-width: 100%; box-sizing: border-box; }
html[data-vorm="plat"] .sheet-body .pl-tegels .pl-tegel b { padding: 2px 8px; font-size: clamp(15px, 4.4vw, 18px) !important; }   /* hogere voorrang dan de regel verderop */
/* 1.8.7 (24-10-2026, eigenaar 07:30 "de map iconen is roze dan moet de taken plaatje ook roze zijn"): de zes tegelkleuren op één plek
   (--tg-<kleur>-*). De tegels hieronder en de kaarten onder de Privé-tegels (kaartjes.css, "tegelkleur") lezen allebei deze waarden. */
:root {
  --tg-roze-a: #FF8AA3; --tg-roze-b: #FF6B8A; --tg-roze-d: #B8314F; --tg-roze-ic: #E94B6E; --tg-roze-st: #262A4D;
  --tg-blauw-a: #5262F0; --tg-blauw-b: #4453E0; --tg-blauw-d: #3341B8; --tg-blauw-ic: #4453E0; --tg-blauw-st: #FFFFFF;
  --tg-mint-a: #4FDDB6; --tg-mint-b: #36D1A8; --tg-mint-d: #168565; --tg-mint-ic: #168565; --tg-mint-st: #262A4D;
  --tg-geel-a: #FFD25E; --tg-geel-b: #FFC83D; --tg-geel-d: #C48700; --tg-geel-ic: #B07800; --tg-geel-st: #262A4D;
  --tg-lila-a: #8058E6; --tg-lila-b: #7A50D6; --tg-lila-d: #5E36B0; --tg-lila-ic: #7A50D6; --tg-lila-st: #FFFFFF;
  --tg-oranje-a: #FFB06B; --tg-oranje-b: #FF9F43; --tg-oranje-d: #C26A12; --tg-oranje-ic: #C26A12; --tg-oranje-st: #262A4D;
}
html[data-vorm="plat"] .sheet-body .pl-tegel { --tg-a: var(--tg-roze-a); --tg-b: var(--tg-roze-b); --tg-d: var(--tg-roze-d); --tg-ic: var(--tg-roze-ic); --tg-st: var(--tg-roze-st);
  position: relative; overflow: visible; min-height: 0; padding: 14px 6px 10px; gap: 5px; align-items: center; justify-content: center; text-align: center;
  border: 0 !important; border-radius: 24px; color: #262A4D; background: linear-gradient(180deg, var(--tg-a), var(--tg-b));
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .35), 0 6px 0 var(--tg-d); }
html[data-vorm="plat"] .sheet-body .pl-tegel:nth-child(6n+2) { --tg-a: var(--tg-blauw-a); --tg-b: var(--tg-blauw-b); --tg-d: var(--tg-blauw-d); --tg-ic: var(--tg-blauw-ic); --tg-st: var(--tg-blauw-st); }
html[data-vorm="plat"] .sheet-body .pl-tegel:nth-child(6n+3) { --tg-a: var(--tg-mint-a); --tg-b: var(--tg-mint-b); --tg-d: var(--tg-mint-d); --tg-ic: var(--tg-mint-ic); --tg-st: var(--tg-mint-st); }
html[data-vorm="plat"] .sheet-body .pl-tegel:nth-child(6n+4) { --tg-a: var(--tg-geel-a); --tg-b: var(--tg-geel-b); --tg-d: var(--tg-geel-d); --tg-ic: var(--tg-geel-ic); --tg-st: var(--tg-geel-st); }
html[data-vorm="plat"] .sheet-body .pl-tegel:nth-child(6n+5) { --tg-a: var(--tg-lila-a); --tg-b: var(--tg-lila-b); --tg-d: var(--tg-lila-d); --tg-ic: var(--tg-lila-ic); --tg-st: var(--tg-lila-st); }
html[data-vorm="plat"] .sheet-body .pl-tegel:nth-child(6n+6) { --tg-a: var(--tg-oranje-a); --tg-b: var(--tg-oranje-b); --tg-d: var(--tg-oranje-d); --tg-ic: var(--tg-oranje-ic); --tg-st: var(--tg-oranje-st); }
html[data-vorm="plat"] .sheet-body .pl-tegel::before { content: ''; position: absolute; top: -6px; left: 18%; right: 18%; height: 11px; pointer-events: none;
  background: radial-gradient(closest-side, var(--tg-a) 92%, transparent 100%) left / 22px 11px no-repeat, radial-gradient(closest-side, var(--tg-a) 92%, transparent 100%) right / 22px 11px no-repeat; }
html[data-vorm="plat"] .sheet-body .pl-tegel:active { background: linear-gradient(180deg, var(--tg-b), var(--tg-b)); transform: translateY(3px); box-shadow: 0 3px 0 var(--tg-d); }
html[data-vorm="plat"] .sheet-body .pl-tegel .ic { box-sizing: content-box; width: 24px; height: 24px; padding: 6px 40px 6px 12px; margin: 0; border: 0 !important; border-radius: 18px;
  color: var(--tg-ic); stroke: var(--tg-ic); stroke-width: 2.8;
  background: rgba(255, 255, 255, .93) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 14'%3E%3Cellipse cx='7' cy='6' rx='2' ry='2.5' fill='%23231B45'/%3E%3Cellipse cx='19' cy='6' rx='2' ry='2.5' fill='%23231B45'/%3E%3Ccircle cx='6.4' cy='5' r='.8' fill='%23fff'/%3E%3Ccircle cx='18.4' cy='5' r='.8' fill='%23fff'/%3E%3Cellipse cx='3' cy='9' rx='2.4' ry='1.4' fill='%23FF6B8A' opacity='.55'/%3E%3Cellipse cx='23' cy='9' rx='2.4' ry='1.4' fill='%23FF6B8A' opacity='.55'/%3E%3Cpath d='M11 9.5q2 2.2 4 0' stroke='%23231B45' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") right 9px center / 26px 14px no-repeat; }
html[data-vorm="plat"] .sheet-body .pl-tegel b { display: inline-block; max-width: 100%; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: #fff; color: #262A4D; border-radius: 999px; padding: 2px 12px; font-size: 18px !important; font-weight: 900; line-height: 1.25; }
html[data-vorm="plat"] .sheet-body .pl-tegel small { color: var(--tg-st); font-size: 14px; font-weight: 900; opacity: 1; }
html[data-vorm="plat"] .sheet-body .pl-tegel:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 6px 14px; padding: 14px 10px 12px; }
html[data-vorm="plat"] .sheet-body .pl-tegel:last-child:nth-child(odd) b { order: 2; }
html[data-vorm="plat"] .sheet-body .pl-tegel:last-child:nth-child(odd) small { order: 3; flex-basis: auto; }
/* geen donkere randen meer op de pagina's: tabbladen, knopjes, linten, rondjes, labeltjes, regels (planning.css, oude stijl 3px
   var(--ink): in licht donker, in donker wit). Wat een rand nodig heeft om te zien wat het is (invulveld, vinkje, voortgang,
   tijdlijn) krijgt de zachte schaduwkleur. */
html[data-vorm="plat"] .sheet :is(.pl-tab, .pl-k, .pl-lint, .pl-ava, .pl-tag, .pl-st, .pl-ic, .pl-ok, .pl-blok, .pl-wie span, .pl-let, .pl-sam span, .pl-bar,
  .pl-bewerk, .pl-tel, .pl-groot, .m3d-account, .pl-paneel, .pl-ballon, .pl-rij, .pl-pr) { border-color: transparent !important; }
html[data-vorm="plat"] .sheet :is(.pl-inv, .pl-vink, .pl-voortgang) { border-color: var(--ax-rand-sterk) !important; }
html[data-vorm="plat"] .sheet .pl-tijdlijn { border-left-color: var(--schaduw) !important; }
html[data-vorm="plat"] .sheet .pl-bar.dubbel { border-color: var(--roze) !important; }
html[data-vorm="plat"] .sheet .pl-ava.nieuw { border-color: var(--ax-rand-sterk) !important; }
html[data-vorm="plat"] .sheet :is(.pl-tab, .pl-k) { background: var(--kaart); color: var(--ink); box-shadow: var(--ax-diep); border-radius: 16px; }
html[data-vorm="plat"] .sheet :is(.pl-tab, .pl-k).aan { background: var(--wk); color: var(--wk-t, #fff); box-shadow: 0 3px 0 var(--wkd); }
html[data-vorm="plat"] .sheet :is(.pl-ic, .pl-ava) { box-shadow: var(--ax-diep-klein); }
html[data-vorm="plat"] .sheet .pl-lint { box-shadow: var(--ax-diep); }
/* 2 Privé gekozen in de schuifknop: witte tekst op roze haalde 2,72:1 (licht) en 2,21:1 (donker); nu donkere tekst op roze (>= 4,5:1,
   WCAG 2.2 1.4.3). Werk en Bedrijf: wit op een dieper blauw/lila, ook in donker (daar waren ze lichter) */
.sg-deel[data-wereld="prive"][aria-selected="true"] { background: #FF6B8A; color: #262A4D; box-shadow: 0 4px 0 #B8314F; }
.sg-deel[data-wereld="werk"][aria-selected="true"] { background: #4453E0; color: #fff; box-shadow: 0 4px 0 #3341B8; }
.sg-deel[data-wereld="bedrijf"][aria-selected="true"] { background: #7A50D6; color: #fff; box-shadow: 0 4px 0 #5E36B0; }
/* 3 de verbindingsmelding: één regel, en de chat begint eronder (padding en het wegknippen van de chat schuiven mee), dus hij
   bedekt geen bericht; zonder melding blijft alles zoals in 1.4.3 */
html[data-vorm="plat"] .bron-melding { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 32px); box-sizing: border-box;
  height: 24px; line-height: 16px; padding: 4px 12px; top: calc(var(--sg-kop) + 2px + max(env(safe-area-inset-top, 0px), var(--app-top, 0px))); }
html[data-vorm="plat"]:has(#bronMelding:not([hidden])) { --sg-melding: 30px; }
/* 31-10-2026 (klus "Ailex web alleen Privé in Brave"): account niet geladen = melding met de knop Opnieuw proberen (tikvlak 48 px) */
html[data-vorm="plat"] .bron-melding[data-opnieuw] { height: auto; white-space: normal; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  left: 16px; right: 16px; transform: none; max-width: none; padding: 8px 8px 8px 16px; line-height: 20px; font-size: 15px; text-align: left; }
html[data-vorm="plat"]:has(#bronMelding[data-opnieuw]:not([hidden])) { --sg-melding: 76px; }
html[data-vorm="plat"] .bron-melding[data-opnieuw][hidden] { display: none; }
.bron-opnieuw { flex: none; min-height: 48px; min-width: 48px; padding: 0 16px; border: 0; border-radius: 24px; background: #3b4fd8; color: #fff; font: 800 15px var(--sg-letter, inherit); }
.bron-opnieuw:disabled { opacity: .6; }
html[data-vorm="plat"] .log { padding-top: calc(var(--sg-kop) + var(--sg-melding, 0px) + max(env(safe-area-inset-top, 0px), var(--app-top, 0px)));
  clip-path: inset(calc(var(--sg-kop) + var(--sg-melding, 0px) + max(env(safe-area-inset-top, 0px), var(--app-top, 0px))) 0 0 0); }
/* 4 Martha's eigen naam onder haar gezichtje paste niet ("Mart…"): iets meer ruimte tussen de gezichtjes en geen afkapping voor haar */
html[data-vorm="plat"] .kop-gz[data-kop-wie="Ailex"] .gz-naam { max-width: 54px; letter-spacing: -.3px; padding: 0 2px; }
/* ook het klussenlijstje (lampjes.css): titel, snelknopje en het wensen-labeltje zonder donkere rand of 3D-schaduw */
html[data-vorm="plat"] :is(#klTitel, .kl-snel, #klWensen) { border-color: transparent !important; text-shadow: none; }
html[data-vorm="plat"] .kl-snel { box-shadow: var(--ax-diep); }
/* ===== 1.4.5 (21-10-2026, klus "Martha 3D herstel ronde 5"; hertest Celeste 1.4.4, organisatie/testen/m3d-gebruikerstest/verslag-hertest-1.4.4.md) ===== */
/* 1 de paginatitel zoals blad 22: wereld-icoon en "Privé"/"Werk"/"Bedrijf" direct links naast de terugknop (styles.css .sheet-head
   zette justify-content: space-between, met de verborgen sluitknop stond de titel dus rechts), zonder de oude 3D-streep
   (box-shadow inset 0 -3px en 0 3px van styles.css .sheet-head h2); de tekst zelf staat nu in gewone letters (planning.js, index.html) */
html[data-vorm="plat"] .sheet-head { justify-content: flex-start; }
html[data-vorm="plat"] #sheetTitle { box-shadow: none !important; border-radius: 0; text-transform: none; }
/* 2 witte statustekst op de blauwe en lila tegel: de bovenste kleur van het verloop haalde 4,17:1 en 3,11:1; nu >= 4,5:1 over het
   hele verloop (blauw #5262F0 4,81:1, lila #8058E6 4,71:1; de onderste kleur was al 5,9:1 en 5,32:1) */
/* (nu al in --tg-blauw-a) */
/* (nu al in --tg-lila-a) */
/* 3 lucht tussen de tegels en het eerste kopje eronder ("Notities", "Jij", "Jouw zaak"): het lint steekt 15px boven zijn kaart uit
   (planning.css margin -37px) en stond daardoor 2px onder de tegels; nu ~18px */
html[data-vorm="plat"] .sheet-body .pl-tegels { margin-bottom: 30px; }
/* ===== 1.4.6 (21-10-2026, klus "Martha 3D herstel ronde 6"; hertest Celeste 1.4.5, organisatie/testen/m3d-gebruikerstest/verslag-hertest-1.4.5.md) ===== */
/* 1 labeltjes (werk/thuis, bezorgen/ophalen, bezig/klaar/wacht, procentjes, tellertjes): de vlakjes zijn vaste pastelkleuren (planning.css
   --w/--h, #FFF3C4, #FFD9DB, #fff), maar de tekst nam de inktkleur over, in donker bijna wit (1,0-1,1:1). Nu vaste donkere tekst op het
   vlakje, zoals Material 3 "on-container" per vlak; in licht was de inkt al #262A4D, daar verandert niets. .vb heeft eigen kleuren. */
html[data-vorm="plat"] .sheet :is(.pl-tag:not(.vb), .pl-st, .pl-tel) { color: #262A4D; }
/* 3 kopjes in de blauwe lintjes en de letterblokjes in de regels: donkere tekst op --blauw haalde 3,31:1 (licht), lichte 2,7:1 (donker);
   nu witte tekst op het diepere blauw van de Werk-knop (#4453E0, 5,9:1), in licht en donker gelijk */
html[data-vorm="plat"] .sheet :is(.pl-lint, .pl-rij .pl-ic) { background: #4453E0; color: #FFFFFF; }
/* 4 zelfde oorzaak elders op de pagina's (gevonden met Celestes proef celeste_pagina4.py, donker 1,0-2,7:1): agendablokjes en
   meldingen (.pl-blok, .pl-let: vaste pastelvlakken), witte rondjes met een letter (.pl-ava) en het vinkje op munt. Donkere tekst op
   het lichte vlak; de blauwe rondjes (.groot, .ai) zoals de lintjes wit op #4453E0. De subregel in een agendablokje haalde ook in licht
   maar 4,3:1 (--text-dim op pastel); nu #4B5080 (>= 6:1). */
html[data-vorm="plat"] .sheet :is(.pl-blok, .pl-let, .pl-ava, .pl-vink) { color: #262A4D; }
html[data-vorm="plat"] .sheet .pl-blok small { color: #4B5080; }
html[data-vorm="plat"] .sheet .pl-ava:is(.groot, .ai) { background: #4453E0; color: #FFFFFF; }
html[data-vorm="plat"] .sheet .pl-ava.nieuw { color: var(--ink); }

/* 1.4.8 (22-10-2026, eigenaar: "als je kantelt alleen de iconen worden gedraaid zoals bij Martha"): de app blijft staand (main.dart,
   AndroidManifest portrait); de iconen van de platte vorm draaien een kwartslag mee, 250 ms zoals styles.css 1.2.0. Alleen de
   tekening in de knop draait, de knop zelf en de indeling blijven staan. */
html[data-vorm="plat"] :is(.sg-menu-ic, .sg-terug svg, .sg-deel-t, .actions .b3d > svg) { transition: rotate .25s cubic-bezier(.215, .61, .355, 1); }
html[data-vorm="plat"][data-kwart="1"] :is(.sg-menu-ic, .sg-terug svg, .actions .b3d > svg) { rotate: 90deg; }
html[data-vorm="plat"][data-kwart="-1"] :is(.sg-menu-ic, .sg-terug svg, .actions .b3d > svg) { rotate: -90deg; }

/* ===== 1.5.0 Ailex (22-10-2026, klus "Ailex 1.5.0"; eigenaar 12:58: "ik zie geen moppie of hij komt onder het toetsenbord, alles is zo
   groot dus het is niet efficient"). Kleuren blijven (contrast al nagemeten in 1.4.x); alleen maten kleiner, tikvlakken minstens 44 px. ===== */
:root { --sg-kop: 80px; --sg-onder: 104px; --sg-knop: 48px; --sg-moppie: 52px; }
@media (max-width: 379px) { :root { --sg-knop: 46px; --sg-kop: 76px; --sg-moppie: 46px; } }
html[data-vorm="plat"] .log { font-size: 17px; line-height: 1.35; }
html[data-vorm="plat"] .log .txt, html[data-vorm="plat"] .log p { font-size: 17px; }
html[data-vorm="plat"] .msg .body { border-radius: 20px; padding: 8px 12px; box-shadow: var(--ax-diep); }
html[data-vorm="plat"] .msg.alex .body { background: #4453E0; box-shadow: 0 4px 0 var(--blauwdd); }   /* wit op #5B6CFF was 4,17:1, bij 17 px te weinig; #4453E0 = 5,9:1 (licht en donker) */
html[data-vorm="plat"] .msg.alex .meta { opacity: .9; }
html[data-vorm="plat"] .msg .meta { font-size: 12px; }
html[data-vorm="plat"] .compose { border-radius: 22px; padding: 2px 6px; box-shadow: var(--ax-diep); }
html[data-vorm="plat"] .compose input { font-size: 17px; min-height: 44px; }
html[data-vorm="plat"] #kopStrook { padding-top: calc(6px + max(env(safe-area-inset-top, 0px), var(--app-top, 0px))); gap: 6px; }
html[data-vorm="plat"] #kopStrook::before { height: 100px; }
.sg-menu-ic { box-shadow: 0 4px 0 var(--lilad); }
.sg-menu-ic i { width: 20px; height: 3px; }
.sg-woord { font-size: 12px; }
.sg-seg { margin-top: 2px; padding: 3px; border-radius: 24px; box-shadow: var(--ax-diep); }
.sg-deel { font-size: 15px; padding: 6px 2px; min-height: 44px; border-radius: 22px; }
html[data-vorm="plat"] #kopWie { height: 44px; }
html[data-vorm="plat"] .kop-gz { width: 44px; height: 44px; }
html[data-vorm="plat"] .kop-gz .gz { width: 34px; height: 34px; }
.sg-ring { width: 44px; height: 44px; }
.sg-menu-lijst button { font-size: 17px; padding: 8px 12px; min-height: 44px; }
.sg-kaartje { padding: 12px 14px; font-size: 16px; }
.sg-kaartje b { font-size: 17px; }
html[data-vorm="plat"] .actions { bottom: calc(22px + env(safe-area-inset-bottom, 0px)); gap: 14px; }
html[data-vorm="plat"] .actions .ab { box-shadow: var(--ax-diep); }
html[data-vorm="plat"] .actions .ab .ic { width: 24px; height: 24px; }
html[data-vorm="plat"] .actions .ab::after { font-size: 12px; margin-top: 4px; }
html[data-vorm="plat"] .actions #btnMic { width: 62px; height: 62px; }
html[data-vorm="plat"] .actions #btnMic .ic { width: 30px; height: 30px; }
html[data-vorm="plat"] .micwrap { bottom: calc(108px + env(safe-area-inset-bottom, 0px)); }

/* ===== 1.5.1 Ailex (22-10-2026, klus "Ailex 1.5.1"; eigenaar 16:03 bij een schermafdruk: "de iconen kleiner dat alles ruimer is en de
   letter normaal natuurlijk niet extra groot"). Knoppen 48 -> 44 px (tikvlak blijft 44), microfoon 62 -> 54, Menu 48 -> 44,
   gezichtjes 44 -> 40 en chat-rondjes 34 -> 28; chattekst 17 -> 16 px, afzender 12 -> 10 px, dunnere bubbels, meer lucht. ===== */
:root { --sg-kop: 74px; --sg-onder: 92px; --sg-knop: 44px; --sg-moppie: 46px; }
@media (max-width: 379px) { :root { --sg-knop: 44px; --sg-kop: 72px; --sg-moppie: 44px; } }
html[data-vorm="plat"] .log { font-size: 16px; line-height: 1.4; }
html[data-vorm="plat"] .log .txt, html[data-vorm="plat"] .log p { font-size: 16px; font-weight: 500; }
html[data-vorm="plat"] .log .msg { margin-bottom: 12px; gap: 8px; }
html[data-vorm="plat"] .msg .body { border-radius: 16px; padding: 7px 11px; box-shadow: var(--ax-diep-klein); }
html[data-vorm="plat"] .msg.alex .body { box-shadow: 0 2px 0 var(--blauwdd); }
html[data-vorm="plat"] .msg .meta { font-size: 10px; letter-spacing: .06em; margin-bottom: 1px; }
html[data-vorm="plat"] .msg .av { width: 28px; height: 28px; font-size: 14px; box-shadow: var(--ax-diep-klein); }
html[data-vorm="plat"] .msg .av .ic { width: 18px; height: 18px; }
html[data-vorm="plat"] .msg time { font-size: 11px; }
html[data-vorm="plat"] .compose input { font-size: 16px; }
.sg-menu-ic { box-shadow: 0 3px 0 var(--lilad); }
.sg-menu-ic i { width: 18px; }
.sg-woord { font-size: 11px; }
.sg-deel { font-size: 14px; }
html[data-vorm="plat"] .kop-gz { width: 40px; height: 40px; }
html[data-vorm="plat"] .kop-gz .gz { width: 30px; height: 30px; }
.sg-ring { width: 40px; height: 40px; }
.sg-menu-lijst button { font-size: 16px; }
.sg-kaartje { font-size: 15px; } .sg-kaartje b { font-size: 16px; }
html[data-vorm="plat"] .actions { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); gap: 20px; }
html[data-vorm="plat"] .actions .ab { box-shadow: var(--ax-diep); }
html[data-vorm="plat"] .actions .ab .ic { width: 21px; height: 21px; }
html[data-vorm="plat"] .actions .ab::after { font-size: 11px; margin-top: 3px; }
html[data-vorm="plat"] .actions #btnMic { width: 54px; height: 54px; }
html[data-vorm="plat"] .actions #btnMic .ic { width: 26px; height: 26px; }
html[data-vorm="plat"] .micwrap { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }

/* ===== 1.5.2 Ailex (22-10-2026, klus "Ailex 1.5.2"; eigenaar 16:51 bij zijn afbeelding: "ik zie nu de beer links, ik wil hem zoals op de
   afbeelding"). Geen Moppie-dok meer linksonder (kop-speelgoed.js maakt hem niet meer). Het denk-kaartje zoals de afbeelding: Moppie
   groot links met het lampje boven zijn hoofd, rechts "Ailex denkt na", de bolletjes en het roze pilletje met het getal in een rondje.
   Letters volgen de rustige maat van 1.5.1 (titel 18 px, pilletje 15 px). ===== */
.sg-bezig { gap: 12px; border-radius: 24px; padding: 8px 18px 10px 8px; box-shadow: var(--ax-diep); max-width: 100%; }
.sg-bezig-moppie { position: relative; flex: 0 0 78px; width: 78px; height: 104px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.sg-bezig-moppie .m3g-moppie { width: 78px; height: 78px; display: block; }   /* svg (oud) of canvas (Lichtpotlood, 1.8.34) */
.sg-bezig .m3g-moppie [data-ding-laag="lampje"] { display: none !important; }   /* het lampje staat los boven zijn hoofd */
.sg-bezig-moppie svg.sg-bezig-lamp { width: 28px; height: 30px; display: block; margin-bottom: -2px; transform-origin: 50% 80%; animation: sg-lamp 1.6s ease-in-out infinite; }
.sg-bezig:not([data-ding="lampje"]) .sg-bezig-lamp { visibility: hidden; }
@keyframes sg-lamp { 0%, 100% { transform: scale(1); filter: none; } 50% { transform: scale(1.08); filter: drop-shadow(0 0 6px #FFD75E); } }
.sg-bezig-t { gap: 6px; }
.sg-bezig-t b { font: 900 18px var(--sg-letter); line-height: 1.2; }
.sg-bolletjes i { width: 9px; height: 9px; }
.sg-bezig-klussen { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 3px 14px 3px 3px; border-radius: 18px; font: 800 15px var(--sg-letter); }
.sg-pil-n { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: #B3123F; display: grid; place-items: center; font: 900 15px var(--sg-letter); }
@media (prefers-reduced-motion: reduce) { .sg-bezig-lamp { animation: none; } }
/* 1.5.2 tikvlakken (test/tikvlak_proef.py): het puntenpilletje was 44x22 px; een onzichtbare rand maakt het tikvlak 44 px hoog zonder
   dat de kop verschuift. Het Menu (9 knoppen bij de eigenaar) liep liggend (800x360) onder het scherm uit; nu scrolt het zelf. */
.sg-menu-lijst { max-height: calc(100dvh - 76px - max(env(safe-area-inset-top, 0px), var(--app-top, 0px))); overflow-y: auto; overscroll-behavior: contain; }

/* 1.8.7: in Privé hangt de kleur aan de soort, niet aan de plek: Taken roze, Agenda blauw, Boodschappen mint, Notities geel
   (zelfde koppeling als de kaarten eronder, kaartjes.css "tegelkleur") */
html[data-vorm="plat"] .sheet-body .pl-tegels[data-w-tegels="prive"] .pl-tegel[data-w-tegel="taak"] { --tg-a: var(--tg-roze-a); --tg-b: var(--tg-roze-b); --tg-d: var(--tg-roze-d); --tg-ic: var(--tg-roze-ic); --tg-st: var(--tg-roze-st); }
html[data-vorm="plat"] .sheet-body .pl-tegels[data-w-tegels="prive"] .pl-tegel[data-w-tegel="afspraak"] { --tg-a: var(--tg-blauw-a); --tg-b: var(--tg-blauw-b); --tg-d: var(--tg-blauw-d); --tg-ic: var(--tg-blauw-ic); --tg-st: var(--tg-blauw-st); }
html[data-vorm="plat"] .sheet-body .pl-tegels[data-w-tegels="prive"] .pl-tegel[data-w-tegel="boodschap"] { --tg-a: var(--tg-mint-a); --tg-b: var(--tg-mint-b); --tg-d: var(--tg-mint-d); --tg-ic: var(--tg-mint-ic); --tg-st: var(--tg-mint-st); }
html[data-vorm="plat"] .sheet-body .pl-tegels[data-w-tegels="prive"] .pl-tegel[data-w-tegel="notitie"] { --tg-a: var(--tg-geel-a); --tg-b: var(--tg-geel-b); --tg-d: var(--tg-geel-d); --tg-ic: var(--tg-geel-ic); --tg-st: var(--tg-geel-st); }

/* ===== 1.8.15 Ailex (24-10-2026, klus "Ailex bovenbalk hoger en knoppen zonder tekst"; eigenaar 18:21: "boven zie ik nog ruimte over,
   die iconen mogen hoger helemaal, en de iconen beneden hoeven geen letters"). Bovenkant: sinds 1.8.14 staat de webview al onder de
   statusbalk (main.dart inhoudRand), dus viewport-fit=cover is uit index.html: env(safe-area-inset-*) is dan 0 en de kop telt de
   statusbalk niet meer dubbel (die lege strook). Onderin: alleen het icoon, het woordje (data-woord) blijft als aria-label/attribuut;
   knoppen even groot (44 / praatknop 54), ze zakken 8 px (de plek van het woordje) en de chat krijgt die ruimte. ===== */
:root { --sg-onder: 82px; }
html[data-vorm="plat"] .actions .ab::after { content: none; display: none; }
html[data-vorm="plat"] .actions { bottom: 10px; }
html[data-vorm="plat"] .micwrap { bottom: 86px; }

/* ===== 30-10-2026 (klus "Ailex menubalk en Privé groen", Gustavo; eigenaar: "boven moet gewoon privé, werk, bedrijf staan, dat is het
   hoofdmenu, dat moet altijd blijven waar je maar ook bent" en "ik zie privé rood gevinkt, is verwarrend") ===== */
/* 1 de balk blijft bovenin op elk scherm: kop-speelgoed.js hangt #kopStrook onder <body> (z-index 70 boven #sheet 60 en .sg-pagina 65);
   elke volle pagina (Privé, Werk, Bedrijf, Dossier, Boekhouding, Planner, Instellingen, Profiel) en Jouw gegevens begint eronder */
html[data-vorm="plat"] .sheet { padding-top: calc(var(--sg-kop) + max(env(safe-area-inset-top, 0px), var(--app-top, 0px))) !important; }
html[data-vorm="plat"] .ailex-gegevens { top: calc(var(--sg-kop) + max(env(safe-area-inset-top, 0px), var(--app-top, 0px))); }
/* 2 Privé is groen: rood leest als een fout. 01-11-2026 (klus "Ailex lichtgroen en ballonnetje"; eigenaar: "die donkergroen is echt lelijk ...
   lichtgroen net als de projectenmap"): het lichtgroen van de Projecten-tegel #4FDDB6 met inkt #262A4D (8,4:1, WCAG 2.2 1.4.3 AA) */
.sg-deel[data-wereld="prive"][aria-selected="true"] { background: #4FDDB6; color: #262A4D; box-shadow: 0 4px 0 #36D1A8; }
html[data-vorm="plat"] .sheet[data-wereld="prive"] { --wk: #4FDDB6; --wkd: #36D1A8; --wk-t: #262A4D; }
html[data-vorm="plat"] { --m3g-prive: #4FDDB6; }

/* ===== 31-10-2026 (klus "Ailex gespreksknop in de balk", Gustavo; eigenaar v842: "Gesprek als vierde knop in de balk") =====
   balk = Gesprek | Privé | Werk | Bedrijf. Gesprek is een smal knopje met een tekstballon (48 px breed, even hoog als de ruimtes), fel
   (#262A4D, wit icoon) zolang de chat zichtbaar is. De ruimte waar het gesprek in zit krijgt in de chat alleen een dunne rand en een lichte
   tint in zijn eigen kleur (data-zacht: 12 % van die kleur op wit, ondoorzichtig), tekst #262A4D; fel (aria-selected) alleen als dat dashboard open staat */
.sg-gk { flex: 0 0 48px; align-self: stretch; min-height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0;
  border-radius: 22px; background: none; color: var(--ink); cursor: pointer; }
.sg-gk svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; }
.sg-gk[aria-selected="true"] { background: #262A4D; color: #fff; box-shadow: 0 4px 0 #11132B; }
.sg-gk[aria-selected="true"] svg { fill: #fff; stroke: #fff; }
.sg-deel[data-zacht="true"] { background: #E6FAF3; color: var(--ink); box-shadow: inset 0 0 0 2px #4FDDB6; }
.sg-deel[data-wereld="werk"][data-zacht="true"] { background: #E9EAFB; box-shadow: inset 0 0 0 2px #4453E0; }
.sg-deel[data-wereld="bedrijf"][data-zacht="true"] { background: #EFEAFA; box-shadow: inset 0 0 0 2px #7A50D6; }

/* 31-10-2026 (klus "Ailex web instellingen opmaak"; eigenaar over de geïnstalleerde webapp: "de ui is niet goed ... rare ding hier"):
   1 de kop van een paneel kreeg uit kleur.css een halfdoorzichtig vlak en een los paars streepje; wat onder de kop wegschuift
   werd er hard afgesneden ("Werkgeluiden" half onder INSTELLINGEN). Kop zonder vlak en streepje, en de inhoud vervaagt zacht
   naar de bovenrand van het scrollvlak (mask-image: Chrome/WebView Android 120+, -webkit- voor oudere).
   2 de schakelaar Geluidjes (wereld.js) had witte letters (.m3g uit game.css) op een witte kaart: donkere letters. */
html[data-vorm="plat"] #sheet .sheet-head { background: none; }
html[data-vorm="plat"] #sheet .sheet-head::after { content: none; }
html[data-vorm="plat"] #sheet .sheet-body { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18px); mask-image: linear-gradient(180deg, transparent 0, #000 18px); padding-top: 6px; }
.m3g-schakel { color: var(--ink, #262A4D); }

/* Kantoorteam aan het werk en het logboek (01-11-2026, klus "Ailex personeel in de chat en logboek", Gustavo; schets Martha 08:33):
   donker strookje onder het denk-kaartje met een gekleurd bolletje, een groene bezig-regel en "tik voor het logboek"; het logboek als
   paneel van onderen. Kleuren met witte letters minstens 4,5:1 (WCAG AA), tikvlakken minstens 48 px, past op 360 px. */
.axk-strook { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 100%; box-sizing: border-box; min-height: 52px; margin-top: 8px;
  padding: 8px 12px; border: 0; border-radius: 14px; background: #1e2430; color: #fff; font: inherit; text-align: left; cursor: pointer; }
.axk-strook:focus-visible, .axk-dicht:focus-visible { outline: 3px solid #7ee2a8; outline-offset: 2px; }
.axk-bol { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 15px; color: #fff; background: #475569; }
.axk-bol[data-axk-slug="secretaresse"] { background: #9a3412; }
.axk-bol[data-axk-slug="dossierbeheerder"] { background: #1d4ed8; }
.axk-bol[data-axk-slug="projectcoordinator"] { background: #6d28d9; }
.axk-bol[data-axk-slug="administrateur"] { background: #4FDDB6; color: #262A4D; }
.axk-bol[data-axk-slug="vakhulp"] { background: #a16207; }
.axk-bol[data-axk-slug="manager"] { background: #0f766e; }
.axk-bol[data-axk-slug="projectleider"] { background: #4338ca; }
.axk-bol[data-axk-slug="werkvoorbereider"] { background: #b45309; }
.axk-bol[data-axk-slug="uitvoerder"] { background: #be123c; }
/* de zeven erbij in de centrale personeelsbank (01-11-2026); donker genoeg voor witte letters (contrast >= 4.5) */
.axk-bol[data-axk-slug="verkoopondersteuner"] { background: #9d174d; }
.axk-bol[data-axk-slug="inkoper"] { background: #3f6212; }
.axk-bol[data-axk-slug="kwaliteitsmedewerker"] { background: #155e75; }
.axk-bol[data-axk-slug="praktijkadministratie"] { background: #0e7490; }
.axk-bol[data-axk-slug="transportadministrateur"] { background: #78350f; }
.axk-bol[data-axk-slug="communicatiemedewerker"] { background: #7e22ce; }
.axk-bol[data-axk-slug="persoonlijk-assistent"] { background: #a21caf; }
.axk-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; overflow-wrap: anywhere; }
.axk-t b { font-size: 15px; }
.axk-naam { opacity: .85; font-weight: 400; }
.axk-bezig { color: #7ee2a8; font-size: 13px; }
.axk-tik { flex: 0 0 auto; font-size: 12px; color: #cbd5e1; white-space: nowrap; }
.axk-log { position: fixed; inset: 0; z-index: 9000; background: rgba(15, 18, 30, .55); display: flex; align-items: flex-end; justify-content: center; }
.axk-paneel { width: 100%; max-width: 560px; max-height: 82vh; max-height: 82dvh; overflow-y: auto; box-sizing: border-box; padding: 14px 16px 18px;
  border-radius: 20px 20px 0 0; background: #fff; color: #1e2430; padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
.axk-kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.axk-kop h2 { margin: 0; font-size: 18px; }
.axk-dicht { min-width: 48px; min-height: 48px; border: 0; border-radius: 50%; background: #eef0f5; color: #1e2430; font-size: 18px; cursor: pointer; }
.axk-uitleg { margin: 2px 0 10px; font-size: 13px; color: #4b5563; }
.axk-lijst { list-style: none; margin: 0; padding: 0; }
.axk-rij { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid #e5e7eb; min-height: 48px; }
.axk-rij .axk-t small { color: #374151; font-size: 13px; }
.axk-rechts { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 12px; color: #4b5563; }
.axk-wereld { padding: 2px 8px; border-radius: 999px; color: #fff; font-weight: 700; background: #4FDDB6; color: #262A4D; }
.axk-wereld[data-axk-wereld="werk"] { background: #1d4f91; color: #fff; }
.axk-wereld[data-axk-wereld="bedrijf"] { background: #6a2c91; color: #fff; }
.axk-leeg { margin: 12px 0; color: #374151; }
.axk-slot { margin: 12px 0 0; font-size: 12px; color: #4b5563; text-align: center; }

/* ===== 01-11-2026 (klus "Ailex lichtgroen en ballonnetje", Gustavo; eigenaar 09:25-09:29) =====
   1 geen terugknop met de wereldnaam bovenaan Privé, Werk en Bedrijf ("ik kan gewoon overal tikken"): de balk Gesprek | Privé | Werk |
     Bedrijf blijft bovenin en de Android-terugknop werkt nog (kop-speelgoed.js). Dossier, Boekhouding, Planner en Instellingen houden
     hun kop met terugknop. :has() = Chrome/WebView Android 105+ (MDN), dossier.css gebruikt het al.
   2 de uitleg bovenaan een wereld als game-ballonnetje (wereld.js MarthaWereld.ballon): dikke lichtgroene rand, schaduw als een tegel,
     staartje naar de tegels, kruisje rechtsboven en "Nooit meer tonen". Inkt #262A4D op #EFFBF6 13,2:1 en op #4FDDB6 8,4:1 (AA 4,5:1);
     kruisje en knop minstens 48 px. Alleen uiterlijk: geen punten, levels of XP. */
html[data-vorm="plat"] #sheet:has(#sheetBody > .pl:is([data-pl-scherm="prive"], [data-pl-scherm="werk"], [data-pl-scherm="bedrijf"])) .sheet-head,
html[data-vorm="plat"] #sheet:has(#sheetBody > .pl[data-pl-ruimte="werk"] > .pl-tabs) .sheet-head { display: none; }
.m3g-bal { position: relative; margin: 6px 2px 18px; padding: 14px 58px 12px 16px; border: 3px solid #4FDDB6; border-radius: 22px; background: #EFFBF6;
  color: #262A4D; text-align: left; box-shadow: 0 5px 0 #36D1A8, 0 12px 20px -12px rgba(38, 42, 77, .35); animation: m3g-bal-in .35s cubic-bezier(.34, 1.56, .64, 1) both; }
.m3g-bal::after { content: ''; position: absolute; left: 28px; bottom: -14px; width: 20px; height: 20px; background: #EFFBF6; border: solid #4FDDB6;
  border-width: 0 3px 3px 0; border-radius: 0 0 6px 0; transform: rotate(45deg); }
.m3g-bal-tekst p { margin: 0 0 8px; font-size: 15px; line-height: 1.4; color: #262A4D; }
.m3g-bal-kop { display: block; margin: 0 0 4px; font: 900 18px/1.2 var(--sg-letter, inherit); color: #262A4D; }
.m3g-bal-x { position: absolute; top: 4px; right: 4px; width: 48px; height: 48px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: none; color: #262A4D; cursor: pointer; }
.m3g-bal-x svg { width: 26px; height: 26px; padding: 4px; border-radius: 50%; background: #fff; box-shadow: 0 2px 0 #36D1A8; fill: none; stroke: currentColor;
  stroke-width: 3; stroke-linecap: round; }
.m3g-bal-nooit, .m3g-bal-zeg { min-height: 48px; padding: 0 18px; border: 0; border-radius: 16px; background: #4FDDB6; color: #262A4D; cursor: pointer;
  font: 800 15px var(--sg-letter, inherit); box-shadow: 0 4px 0 #36D1A8; }
.m3g-bal-zeg { display: block; margin: 0 0 10px; background: #fff; box-shadow: inset 0 0 0 2px #4FDDB6, 0 4px 0 #36D1A8; }
.m3g-bal-nooit:active, .m3g-bal-zeg:active { transform: translateY(3px); box-shadow: 0 1px 0 #36D1A8; }
:is(.m3g-bal-x, .m3g-bal-nooit, .m3g-bal-zeg):focus-visible { outline: 3px solid #262A4D; outline-offset: 2px; }
@keyframes m3g-bal-in { from { opacity: 0; transform: scale(.92) translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .m3g-bal { animation: none; } }

/* 01-11-2026 (klus "Ailex denkpoppetje inbouwen", Gustavo): het denk-kaartje met het denkpoppetje (denkpop.js). Geen vierkant meer: het
   transparante canvas staat over de volle breedte van de kaart, tussen "Ailex denkt na" + de standregel en de knoppen (Stop, klussen). */
.msg.typing .sg-bezig.sg-film { width: 100%; box-sizing: border-box; flex-flow: row wrap; align-items: center; gap: 4px 10px; padding: 12px 14px 12px; }
.sg-film > .sg-bezig-t { display: contents; }
.sg-film .sg-bezig-t > b, .sg-film .ax-kijkt, .sg-film .axp-film { flex: 1 0 100%; min-width: 0; }
.sg-film .sg-bolletjes { display: none; }   /* het poppetje laat al zien dat Ailex bezig is */
.sg-film .axp-film { display: block; width: 100%; height: auto; aspect-ratio: 400 / 170; margin: 2px 0; }
.sg-film .ailex-stop, .sg-film .sg-bezig-klussen { flex: 0 0 auto; }

/* 02-11-2026 (klus "Ailex web puntjes", schermcontrole Gustavo): op 360 px stond "Bedrijf" tegen de rechterrand van de balk;
   iets meer lucht rechts en een tikje kleinere letter op smalle telefoons. */
@media (max-width: 419px) { .sg-seg { padding-right: 9px; } .sg-deel { font-size: 13px; padding-left: 1px; padding-right: 1px; } }

/* 02-11-2026 (klus "Ailex kleine punten testpoppen", Fenna/Joris op 1280 breed): tegels en tekstregels liepen over de hele breedte.
   Op een breed scherm staan de chat en de pagina's van Privé/Werk/Bedrijf nu in een kolom in het midden; de telefoon (< 900 px) blijft gelijk. */
@media (min-width: 900px) {
  html[data-vorm="plat"] #log, html[data-vorm="plat"] .pl { max-width: 860px; margin-left: auto; margin-right: auto; box-sizing: border-box; }
}

/* 05-11-2026 (klus "Ailex appfouten ronde 2", tikdoelen_alle_proef): op 360 breed waren Privé/Werk/Bedrijf maar 30 px breed
   (Gesprek 48 + 3 x 44 paste niet naast de drie gezichtjes van 136 px). Tot 411 px: gezichtjes 36 px en 2 px uit elkaar (116 px, gemeten),
   naam onder het gezicht hooguit gezicht plus tussenruimte (38 px, regel van hierboven), Gesprek 44 px, minder lucht in de balk;
   zo krijgt elke wereldknop zijn 44 px. Rechts houdt de balk 7 px (de regel van 02-11 hierboven: Bedrijf niet tegen de rand), daarvoor
   2 px minder tussen de blokken: op 360 eindigt de tekst Bedrijf op 231 en de balk op 236. */
@media (max-width: 411px) {
  html[data-vorm="plat"] #kopStrook { gap: 2px; }
  html[data-vorm="plat"] .kop-gz { width: 36px; height: 36px; margin-left: 2px; }
  html[data-vorm="plat"] .kop-gz:first-child { margin-left: 0; }
  html[data-vorm="plat"] .kop-gz .gz { width: 28px; height: 28px; }
  html[data-vorm="plat"] .kop-gz .gz-naam, html[data-vorm="plat"] .kop-gz[data-kop-wie="Ailex"] .gz-naam { max-width: 38px; }
  .sg-ring { width: 36px; height: 36px; }
  .sg-seg { padding: 3px 7px 3px 3px; gap: 0; }
  .sg-gk { flex-basis: 44px; }
  .sg-deel { min-width: 44px; }
}