/* teach - alle opmaak
   Ontwerptaal "teachus.today": minimalistisch, vlakke kleuren uit het uil-logo,
   ronde typografie (Quicksand), dunne lijnen, uniforme control-hoogtes. */
  @font-face{
    font-family:"Quicksand";
    src:url("../fonts/quicksand.woff2") format("woff2");
    font-weight:300 700; font-display:swap;
  }
  :root{
    /* logo-palet (vlakke kleuren, geen neon) */
    --navy:#1d3461; --blue:#2f6fe4; --blue-d:#2456b8; --teal:#18c5c0;
    --cyan:#3ac2e8; --pink:#e83e8c; --purple:#8b5cf6; --orange:#f28c38;
    --red:#e0554d; --green:#3fae6a; --yellow:#f7c948;
    --wood:#f6e7c9; --wood-d:#e8d2a4;
    /* semantisch (licht thema) */
    --bg:#f4f7fb; --surface:#ffffff; --surface-2:#eef2f8; --surface-3:#e3e9f4;
    --panel:var(--surface);
    --ink:#1d3461; --muted:#71809b; --line:#e2e8f2;
    --accent:var(--teal); --accent-ink:#0d6e6b; --accent-soft:#e2f8f7;
    --red-soft:#fbe3e1;
    /* glas-laag (bord/widgets) */
    --glass:rgba(255,255,255,.55); --glass-strong:rgba(255,255,255,.92);
    --glass-line:rgba(255,255,255,.6);
    /* maten: alle "vakken" even hoog */
    --control-h:40px; --radius-s:8px; --radius:12px; --radius-l:18px;
    --shadow-1:0 1px 3px rgba(29,52,97,.08); --shadow-2:0 12px 32px rgba(29,52,97,.16);
    --shadow:var(--shadow-2);
    --tbar:58px;
    /* minimale tikzones voor touch (WCAG/iOS-richtlijn) */
    --tap:44px; --tap-sm:36px;
  }
  /* donker thema: zelfde tokens, andere waarden (schakelbaar in Instellingen) */
  body.dark{
    --bg:#0f1626; --surface:#18213a; --surface-2:#202b49; --surface-3:#2a3757;
    --ink:#e8edf7; --muted:#8fa0bf; --line:#2c3a5e;
    --accent-ink:#7fe6e2; --accent-soft:#153a44; --red-soft:#4a2330;
    --glass:rgba(24,33,58,.6); --glass-strong:rgba(24,33,58,.92);
    --glass-line:rgba(255,255,255,.08);
    --shadow-1:0 1px 3px rgba(0,0,0,.35); --shadow-2:0 12px 32px rgba(0,0,0,.5);
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  *::-webkit-scrollbar{width:8px; height:8px;}
  *::-webkit-scrollbar-thumb{background:#c3cfde; border-radius:4px;}
  body.dark ::-webkit-scrollbar-thumb{background:#3a4a70;}
  *::-webkit-scrollbar-track{background:transparent;}
  /* 100% is de terugval voor oudere browsers; dvh volgt op telefoons de
     daadwerkelijk zichtbare hoogte wanneer de browserbalk in- of uitschuift.
     Doordat body een containing block is, gebruiken ook de absoluut
     gepositioneerde bord-, leerling- en ouderweergaven deze zichtbare hoogte. */
  html,body{
    height:100%; height:100dvh; height:var(--app-height,100dvh);
    margin:0; overflow:hidden;
  }
  body{
    position:relative;
    font-family:"Quicksand","Segoe UI Rounded","Arial Rounded MT Bold",ui-rounded,"Segoe UI",Verdana,sans-serif;
    background:var(--bg); color:var(--ink); user-select:none;
  }
  input,textarea{user-select:text;}
  /* weergave-instelling "minder beweging" */
  body.no-motion *,body.no-motion *::before,body.no-motion *::after{
    transition-duration:0s !important; animation-duration:0s !important;
  }
  /* ---------- Menubalk ---------- */
  #toolbar{
    position:fixed; top:0; left:0; right:0; height:var(--tbar); z-index:5000;
    background:var(--surface); border-bottom:1px solid var(--line);
    display:flex; align-items:center; gap:8px; padding:0 14px;
    overflow-x:auto; overflow-y:hidden; scrollbar-width:none;
  }
  #toolbar::-webkit-scrollbar{display:none;}
  #zoomPct{min-width:56px; padding:0 8px; font-size:13px; text-align:center;}
  #zoomPct.on{background:var(--accent-soft); color:var(--accent-ink);}
  #btnZoomIn:disabled,#btnZoomOut:disabled{opacity:.35; cursor:default;}
  /* logo: uil (SVG) + woordmerk "teachus.today" in merk-kleuren */
  .logo{display:flex; align-items:center; gap:9px; line-height:1; flex:none;}
  .logo-owl{width:34px; height:30px; display:block;}
  .logo-word{font-size:21px; font-weight:700; letter-spacing:.2px; white-space:nowrap;}
  .logo-word .lw-teach{color:var(--ink);}
  .logo-word .lw-us{color:var(--teal);}
  .logo-word .lw-dot{color:var(--orange);}
  .logo-word .lw-today{
    background:linear-gradient(90deg,var(--blue),var(--purple),var(--pink),var(--orange));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  #verTag{font-size:10.5px; font-weight:700; color:var(--muted);}
  #verTag.beta{color:#fff; background:var(--orange); padding:1px 7px; border-radius:var(--radius-s);}
  #toolbar .spacer{flex:1;}
  .tbtn{
    border:none; border-radius:var(--radius); min-height:var(--control-h);
    padding:0 14px; font:inherit; font-weight:700;
    background:var(--accent); color:#fff; cursor:pointer; font-size:14.5px;
  }
  .tbtn:hover{filter:brightness(.94);}
  .tbtn.ghost{background:var(--surface); color:var(--ink); border:1px solid var(--line);}
  .tbtn.ghost:hover{background:var(--surface-3); filter:none;}
  /* bewapende bevestigingsstap (reservekopie herstellen e.d.) */
  .tbtn.danger{background:var(--red, #d33); color:#fff; border-color:transparent;}
  /* in de menubalk zelf zijn ghost-knoppen transparant (rustiger beeld) */
  #toolbar .tbtn.ghost{background:transparent; border:none;}
  #toolbar .tbtn.ghost:hover{background:var(--surface-2);}
  .tbtn:disabled{opacity:.55; cursor:default;}
  #btnSave{min-width:150px; text-align:center;}
  #btnSave.ok{background:var(--green); color:#fff;}
  /* mislukte (auto)save: blijft rood staan tot een save wél lukt */
  #toolbar #btnSave.err{background:var(--red); color:#fff;}
  #btnUser.on{background:var(--accent-soft); color:var(--accent-ink);}
  #langToggle{display:flex; background:var(--surface-2); border-radius:999px; padding:3px; gap:2px;}
  #langToggle button{
    border:none; border-radius:999px; padding:6px 13px; font:inherit; font-weight:700;
    cursor:pointer; background:transparent; color:var(--muted); font-size:13.5px;
  }
  #langToggle button.active{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-1);}
  /* ---------- Board ---------- */
  #board{position:absolute; inset:var(--tbar) 0 0 0; overflow:hidden;}
  #board.bg-dots{
    background-image:radial-gradient(circle,#c9d6e5 1.4px,transparent 1.4px);
    background-size:26px 26px;
  }
  /* board background line options */
  #board.bg-blank{background-image:none;}
  #board.bg-lines{background-image:repeating-linear-gradient(#0000 0 39px, #b9cbe3 39px 40px);}
  #board.bg-write{background-image:repeating-linear-gradient(
    #0000 0 19px,#cddcf0 19px 20px,#0000 20px 39px,#8aa8cf 39px 40.5px,#0000 40.5px 59px,#cddcf0 59px 60px,#0000 60px 79px);}
  #board.bg-grid-s{background-image:
    repeating-linear-gradient(#0000 0 24px,#cddcf0 24px 25px),
    repeating-linear-gradient(90deg,#0000 0 24px,#cddcf0 24px 25px);}
  #board.bg-grid-b{background-image:
    repeating-linear-gradient(#0000 0 49px,#b9cbe3 49px 50px),
    repeating-linear-gradient(90deg,#0000 0 49px,#b9cbe3 49px 50px);}
  /* drawing layer on the board: sits ABOVE widgets like a transparency sheet,
     so you can annotate over everything; clicks pass through when pen is off */
  #boardInk{position:absolute; inset:0; pointer-events:none; z-index:4000;}
  /* live-laag van de markeerstift: dekkend getekend, doorschijnend getoond;
     bij het loslaten wordt de haal in één keer op de inktlaag gezet */
  #boardMark{position:absolute; inset:0; pointer-events:none; z-index:4000; opacity:.32;}
  body.pen #boardInk{pointer-events:auto; cursor:crosshair; touch-action:none;}
  body.pen.pen-text #boardInk{cursor:text;}
  body.pen.pen-hand #boardInk{pointer-events:none;} /* hand tool: interact with everything */
  /* ---------- Leerling-omgeving ---------- */
  /* geen whiteboard/tekengereedschap voor leerlingen - alleen wat de leerkracht
     heeft toegewezen, als vaste (niet-sleepbare) kaarten in speelmodus */
  #pupilView{display:none;}
  body.pupil-mode #board,body.pupil-mode #fab,body.pupil-mode #fabBoardsBtn,
  body.pupil-mode #boardStrip,body.pupil-mode #fabmenu,
  body.pupil-mode #hud,body.pupil-mode #btnFolders,body.pupil-mode #btnSave,
  body.pupil-mode #btnCast{display:none !important;}
  body.pupil-mode #pupilView{
    display:flex; flex-wrap:wrap; gap:18px; align-content:flex-start;
    position:absolute; inset:var(--tbar) 0 0 0; overflow:auto; padding:18px; box-sizing:border-box;
  }
  #pupilView .pupil-card{
    position:static; max-width:100%; box-shadow:0 6px 20px rgba(30,50,90,.12);
  }
  .pupil-card .widget-body{width:100%; height:100%;}
  /* kijken-modus: alle interactie geblokkeerd (generiek, werkt voor elk
     widgettype zonder eigen readonly-ondersteuning) + zichtbaar meekijk-label */
  .pupil-card.watch{position:relative;}
  .pupil-card.watch .widget-body{pointer-events:none; user-select:none;}
  .pupil-watch-badge{
    position:absolute; top:8px; right:10px; z-index:2; pointer-events:none;
    font-size:12.5px; font-weight:700; color:var(--muted);
    background:var(--panel, rgba(255,255,255,.85)); border-radius:999px; padding:3px 10px;
    box-shadow:0 2px 8px rgba(30,50,90,.15);
  }
  .pupil-empty{margin:auto; color:var(--muted); font-size:16px; font-weight:600;}
  .pupil-path{flex:1 0 100%;display:grid;grid-template-columns:1fr auto;gap:5px 16px;max-width:860px;margin:0 auto;padding:14px 18px;box-sizing:border-box;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:0 5px 18px rgba(30,50,90,.08)}
  .pupil-path-title{font-size:18px;font-weight:900;color:var(--ink)}
  .pupil-path-progress{font-size:13px;font-weight:800;color:var(--muted)}
  .pupil-path-dots{grid-column:1/-1;display:flex;align-items:center;gap:7px;overflow:auto}
  .pupil-path-dots span{width:28px;height:28px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--surface-2);border:2px solid var(--line);color:var(--muted);font-weight:900;font-size:12px}
  .pupil-path-dots span.complete{background:var(--green);border-color:var(--green);color:#fff}
  .pupil-path-dots span.current{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-soft)}
  .pupil-path-current{grid-column:1/-1;padding:7px 10px;border-radius:10px;background:var(--accent-soft);color:var(--accent-ink);font-size:12px;font-weight:850}
  .pupil-path-actions{flex:1 0 100%;display:flex;justify-content:center;padding:4px 0 24px}
  .pupil-path-actions button{min-height:44px;padding:0 22px}
  .pupil-path-finish{position:relative;overflow:hidden;min-height:280px;flex:1 0 100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;text-align:center;border-radius:20px;background:linear-gradient(145deg,var(--accent-soft),var(--surface))}
  .pupil-path-finish strong{font-size:clamp(24px,5vw,38px);color:var(--accent-ink)}
  .pupil-path-unlocked{font-weight:900;color:var(--green)}
  /* ---------- Ouderportaal ---------- */
  /* ouders zien geen whiteboard: alleen het portaal met hun kinderen */
  #parentView{display:none;}
  body.parent-mode #board,body.parent-mode #fab,body.parent-mode #fabBoardsBtn,
  body.parent-mode #boardStrip,body.parent-mode #fabmenu,
  body.parent-mode #hud,body.parent-mode #btnFolders,body.parent-mode #btnSave,
  body.parent-mode #btnCast{display:none !important;}
  body.parent-mode #parentView{
    display:block; position:absolute; inset:var(--tbar) 0 0 0;
    overflow:auto; padding:24px 18px; box-sizing:border-box;
  }
  .parent-inner{
    max-width:720px; margin:0 auto; display:flex; flex-direction:column; gap:10px;
  }
  .parent-title{margin:0 0 4px; font-size:22px;}
  .parent-inner .am-row{flex-wrap:wrap;}
  .parent-inner .am-row-tools{flex-basis:100%; display:flex; flex-direction:column; gap:8px;}
  .parent-inner .am-row-tools:empty{display:none;}
  /* floating add-button (FAB) */
  #fab{
    position:fixed; right:24px; bottom:24px; z-index:5600; width:60px; height:60px;
    border-radius:50%; border:none; background:var(--blue); color:#fff; font-size:28px;
    cursor:pointer; box-shadow:0 8px 24px rgba(59,125,216,.45); opacity:.8;
    transition:all .2s; line-height:1;
  }
  #fab:hover{opacity:1; transform:scale(1.1);}
  #fab.open{transform:rotate(45deg); opacity:1;}
  body.board-empty #fab{opacity:1; animation:fabpulse 2s infinite;}
  @keyframes fabpulse{
    0%,100%{box-shadow:0 8px 24px rgba(59,125,216,.45);}
    50%{box-shadow:0 8px 38px rgba(59,125,216,.9); transform:scale(1.07);}
  }
  #fabmenu{
    position:fixed; right:24px; bottom:96px; z-index:5600; display:none;
    flex-direction:column; gap:10px; align-items:flex-end;
  }
  /* board quick-switch: hover strip with live previews */
  #fabBoardsBtn{
    position:fixed; right:96px; bottom:31px; z-index:5590; width:46px; height:46px;
    border-radius:50%; border:none; background:var(--purple); color:#fff; font-size:19px;
    cursor:pointer; box-shadow:0 6px 18px rgba(155,89,182,.45); opacity:.85;
    transition:all .2s; line-height:1;
  }
  #fabBoardsBtn:hover{opacity:1; transform:scale(1.1);}
  #boardStrip{
    position:fixed; right:16px; bottom:92px; z-index:5590; display:none; gap:10px;
    padding:10px; border-radius:16px; background:rgba(255,255,255,.93);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    box-shadow:0 10px 28px rgba(30,50,90,.3); border:1px solid rgba(255,255,255,.7);
    max-width:calc(100vw - 40px); overflow-x:auto; overflow-y:hidden;
  }
  #boardStrip.open{display:flex;}
  .bs-card{
    width:168px; flex:none; background:var(--surface); border-radius:12px;
    border:2.5px solid var(--line); cursor:pointer; overflow:hidden;
  }
  .bs-card:hover{border-color:var(--blue);}
  .bs-card.active{border-color:var(--accent);}
  .bs-card canvas{display:block; width:168px; height:105px; background:var(--surface);}
  .bs-name{
    font-size:12px; font-weight:800; padding:5px 8px; display:flex;
    justify-content:space-between; align-items:center; gap:6px;
  }
  .bs-name span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .bs-x{
    border:none; background:var(--red-soft); color:var(--red); border-radius:7px;
    min-width:26px; height:24px; font-size:11px; font-weight:900; cursor:pointer; flex:none;
  }
  .bs-x:hover{background:var(--red); color:#fff;}
  .bs-x.arm{background:var(--red); color:#fff; animation:pop .3s;}
  .bs-new{
    display:flex; align-items:center; justify-content:center; font-size:30px;
    color:#fff; background:var(--green); border-color:var(--green);
    width:90px; min-height:130px; font-weight:900;
  }
  /* mappenverkenner (Windows-stijl, vervangt het oude mappenpaneel) */
  .modal.explorer{width:min(860px,94vw);}
  .ex-bar{display:flex; gap:10px; align-items:center; margin:10px 0 4px; flex-wrap:wrap;}
  .ex-crumbs{display:flex; gap:4px; align-items:center; flex:1; min-width:0; flex-wrap:wrap;}
  .ex-crumb{
    border:none; background:var(--surface-2); border-radius:8px; padding:6px 10px;
    cursor:pointer; font:inherit; font-weight:700; font-size:13.5px;
  }
  .ex-crumb:hover{background:var(--surface-3);}
  .ex-sep{color:var(--muted); font-weight:800;}
  .ex-tools{display:flex; gap:8px; flex-wrap:wrap;}
  .ex-msg{min-height:18px; color:var(--red); font-size:13px; font-weight:700;}
  .ex-msg.ok{color:var(--green, #2c8c4b);}
  .ex-hint{font-size:11px; color:var(--muted); font-weight:600;}
  .ex-grid{
    display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
    gap:12px; margin-top:8px;
  }
  .ex-tile{
    border:1.5px solid var(--line); border-radius:14px; padding:10px; background:var(--surface);
    display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer;
    user-select:none; touch-action:none; min-height:110px; justify-content:center;
  }
  .ex-tile:hover{border-color:var(--blue);}
  .ex-tile.sel{border-color:var(--blue); background:var(--accent-soft);}
  .ex-tile.active-item{border-color:var(--accent); border-width:2.5px;}
  .ex-tile .ex-ico{font-size:36px; line-height:1;}
  .ex-tile canvas{max-width:100%; border-radius:8px; border:1px solid var(--line);}
  .ex-name{font-weight:700; font-size:13.5px; text-align:center; word-break:break-word;}
  .ex-count{font-size:12px; color:var(--muted); font-weight:700;}
  .ex-tile input{
    border:2px solid var(--blue); border-radius:8px; font:inherit; font-size:13.5px;
    width:100%; outline:none; padding:4px 6px; text-align:center;
  }
  .ex-ghost{position:fixed; z-index:7000; opacity:.75; pointer-events:none; width:150px; left:-999px;}
  .ex-drop{outline:3px solid var(--blue); outline-offset:2px;}
  #fabmenu.open{display:flex;}
  .fab-item{
    display:flex; align-items:center; gap:10px; border:none;
    background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
    border-radius:14px; padding:11px 16px; font:inherit; font-weight:800; font-size:14px;
    color:var(--ink); cursor:pointer; box-shadow:0 6px 18px rgba(30,50,90,.22);
  }
  .fab-item:hover{background:var(--surface); transform:translateX(-4px);}
  .fab-item.on{background:var(--accent-soft); color:var(--accent-ink);}
  .fab-item .fi{font-size:18px;}
  /* pen palette (section inside #hud, always visible) */
  #penbar{display:flex; gap:6px; align-items:center; flex-wrap:wrap;}
  .pen-close{background:var(--surface-2) !important; color:var(--ink) !important;}
  .pen-close.on{background:var(--accent-soft) !important; color:var(--accent-ink) !important;}
  body:not(.pen) .pen-tools button.on{background:transparent; box-shadow:none;}
  .pen-grip{cursor:grab; font-size:15px; color:var(--muted); padding:0 2px; touch-action:none;}
  .pen-grip:active{cursor:grabbing;}
  #penbar .wp-group{padding:2px;}
  #penbar .wp-group button{width:28px; height:28px; font-size:14px;}
  #penbar .wp-color i{width:15px; height:15px;}
  #penbar .wp-bg i{width:17px; height:17px;}
  #penbar .wp-clear{width:28px; height:28px; font-size:13px;}
  /* images on the board */
  .bimg{
    position:absolute; z-index:0; border-radius:10px; touch-action:none; cursor:grab;
    box-shadow:0 6px 18px rgba(30,50,90,.25);
  }
  .bimg:active{cursor:grabbing;}
  .bimg img{width:100%; display:block; border-radius:10px; pointer-events:none;}
  .bimg .dtool-x,.bimg .bimg-rs{opacity:0; transition:opacity .15s;}
  .bimg:hover .dtool-x,.bimg:hover .bimg-rs{opacity:1;}
  .bimg-rs{
    position:absolute; right:-9px; bottom:-9px; width:20px; height:20px; border-radius:50%;
    background:var(--blue); border:2.5px solid #fff; cursor:nwse-resize;
    box-shadow:0 2px 6px rgba(0,0,0,.3);
  }
  body.pen .bimg{pointer-events:none;}
  /* frameless (bare) widget for mindmap directly on the board */
  .widget.bare{
    background:transparent !important; border:none; box-shadow:none !important;
    backdrop-filter:none; -webkit-backdrop-filter:none; resize:none; border-radius:0;
    pointer-events:none; /* let clicks pass through to widgets/board below */
  }
  .widget.bare .widget-head,.widget.bare .mm-top,.widget.bare .mm-node,
  .widget.bare .mm-pop{pointer-events:auto;}
  .widget.bare .widget-head{
    position:absolute; top:8px; right:8px; left:auto; width:auto; z-index:6;
    background:rgba(255,255,255,.78); border:none; border-radius:12px; padding:5px 8px; gap:6px;
    box-shadow:0 4px 12px rgba(30,50,90,.15);
  }
  .widget.bare .widget-head .wtitle{display:none;}
  .widget.bare .widget-body,.widget.bare .mm-stage{background:transparent;}
  /* mindmap node settings popover */
  .mm-cog{
    position:absolute; right:-11px; bottom:-11px; width:22px; height:22px; border-radius:50%;
    border:none; background:var(--blue); color:#fff; font-size:11px; cursor:pointer;
    line-height:1; display:none; padding:0;
  }
  .mm-node:hover .mm-cog{display:block;}
  .mm-pop{
    position:absolute; z-index:20; background:var(--surface); border-radius:12px; padding:9px 10px;
    box-shadow:0 10px 26px rgba(30,50,90,.3); display:flex; flex-direction:column; gap:7px;
  }
  .mm-pop .mp-row{display:flex; gap:5px; align-items:center;}
  .mm-pop .mp-lbl{font-size:11px; font-weight:800; color:var(--muted); width:16px; text-align:center;}
  .mm-pop button{border:none; cursor:pointer; padding:0; background:transparent;}
  .mm-pop .mp-sw{width:19px; height:19px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1.5px var(--line);}
  .mm-pop .mp-sw.on{box-shadow:0 0 0 2.5px var(--ink);}
  .mm-pop .mp-fs{font-weight:900; color:var(--ink); width:24px; height:24px; border-radius:7px; background:var(--surface-2);}
  .mm-pop .mp-fs.on{background:var(--accent-soft);}
  .mm-pop .mp-ls{width:34px; height:24px; border-radius:7px; background:var(--surface-2); position:relative;}
  .mm-pop .mp-ls.on{background:var(--accent-soft);}
  .mm-pop .mp-ls i{display:block; border-top:2.5px solid var(--ink); width:24px; margin:0 auto;}
  .mm-pop .mp-ls[data-ls=dash] i{border-top-style:dashed;}
  .mm-pop .mp-ls[data-ls=dot] i{border-top-style:dotted;}
  .mm-pop .mp-x{margin-left:auto; font-weight:900; color:var(--red); font-size:12px;}
  /* physical tools: ruler, set square, magnifier */
  /* boven de inktlaag (4000): net als een echte lat ligt het gereedschap óp
     het bord - ook in penmodus te verplaatsen en in te stellen; tekenen
     begint ernaast en kleeft aan de tekenrand */
  .dtool{position:absolute; z-index:4200; touch-action:none; user-select:none; cursor:grab; left:120px; top:120px;}
  .dtool:active{cursor:grabbing;}
  .dtool .dtool-x{
    position:absolute; top:-10px; right:-10px; width:24px; height:24px; border-radius:50%;
    border:none; background:var(--red-soft); color:var(--red); font-weight:900; cursor:pointer;
    font-size:12px; line-height:1; box-shadow:0 2px 6px rgba(0,0,0,.2); z-index:2;
  }
  .dtool .dtool-rot{
    position:absolute; bottom:-10px; right:-10px; width:26px; height:26px; border-radius:50%;
    border:none; background:var(--blue); color:#fff; cursor:grab; font-size:13px;
    line-height:1; box-shadow:0 2px 6px rgba(0,0,0,.25); z-index:2;
  }
  .dtool-ruler{width:600px; height:76px;}
  .dtool-geo{width:340px; height:184px;}
  /* alleen de driehoek zelf is aan te raken - de lege hoeken van de
     rechthoekige box laten aanrakingen door naar het bord, anders kon er
     niet vlak naast de schuine randen getekend worden */
  .dtool-geo{pointer-events:none;}
  .dtool-geo svg polygon,.dtool-geo .dtool-opts,.dtool-geo .dtool-x,.dtool-geo .dtool-rot{pointer-events:auto;}
  .dtool-opts{position:absolute; top:-12px; left:8px; display:flex; gap:5px;}
  .dtool-opts button{
    width:24px; height:24px; border-radius:50%; border:none; background:var(--surface);
    color:var(--ink); font-size:12px; font-weight:900; cursor:pointer; line-height:1;
    box-shadow:0 2px 6px rgba(0,0,0,.25);
  }
  .dtool-opts button:hover{background:var(--accent-soft);}
  /* lengteknop toont de maat ("10 cm") en is dus breder dan een rond knopje */
  .dtool-opts .do-wide{width:auto; min-width:48px; padding:0 9px; border-radius:12px;}
  /* slot-knop kleurt mee zodra het gereedschap vaststaat */
  .dtool-opts .do-lock.on{background:var(--accent-soft);}
  /* ---------- CMS: banner, welkomstwoord en Inhoud-sectie ---------- */
  .cms-banner{
    position:fixed; top:var(--tbar); left:0; right:0; z-index:5800;
    display:flex; gap:10px; align-items:center; justify-content:center;
    padding:9px 44px 9px 14px; font-weight:700; font-size:14px; text-align:center;
    background:var(--accent-soft); color:var(--accent-ink);
    box-shadow:0 3px 10px rgba(30,50,90,.12);
  }
  .cms-banner.warn{background:var(--orange); color:#fff;}
  .cms-banner-x{
    position:absolute; right:8px; top:50%; transform:translateY(-50%);
    width:28px; height:28px; border:none; border-radius:8px; cursor:pointer;
    background:rgba(255,255,255,.35); color:inherit; font-weight:900; line-height:1;
  }
  #cmsWelcome{
    margin:2px 0 12px; padding:10px 12px; border-radius:12px;
    background:var(--accent-soft); color:var(--accent-ink);
    font-size:13.5px; font-weight:600; line-height:1.45; white-space:pre-line;
  }
  .cms-block{display:flex; flex-direction:column; gap:8px; align-items:flex-start;}
  .cms-field{display:flex; flex-direction:column; gap:3px; width:100%;}
  .cms-ta{width:100%; min-height:64px; resize:vertical; font:inherit; padding:8px 10px;}
  .cms-row{display:flex; gap:12px; align-items:center; flex-wrap:wrap;}
  .cms-check{display:flex; align-items:center; gap:6px; font-weight:700; cursor:pointer;}
  /* live hoek-uitlezing tijdens het draaien van liniaal/geodriehoek */
  .dtool-deg{
    display:none; position:absolute; left:50%; top:50%; margin:-16px 0 0 -24px;
    width:48px; height:32px; line-height:32px; text-align:center; pointer-events:none;
    background:rgba(30,50,90,.85); color:#fff; font-size:14px; font-weight:800;
    border-radius:9px; z-index:3;
  }
  .dtool-deg.snapped{background:var(--green);}
  .dtool-lens{z-index:4500;} /* the glass sits above the ink sheet */
  .dtool-lens canvas{
    border:5px solid #5a6c85; box-shadow:0 8px 22px rgba(0,0,0,.3);
    background:var(--surface); display:block;
  }
  /* =========== Mindmap widget =========== */
  .mm{flex:1; min-height:0; display:flex; flex-direction:column; position:relative;}
  .mm-top{
    position:absolute; top:8px; left:8px; z-index:7; display:flex; gap:8px; align-items:center;
    padding:6px 8px; background:rgba(255,255,255,.85); backdrop-filter:blur(8px);
    border-radius:12px; box-shadow:0 4px 12px rgba(30,50,90,.15); cursor:default;
  }
  .mm-grip{cursor:grab; color:var(--muted); font-size:14px; padding:0 2px; touch-action:none; user-select:none;}
  .mm-grip:active{cursor:grabbing;}
  .mm-hint{font-size:12px; font-weight:700; color:var(--muted); max-width:180px;}
  .mm-stage{flex:1; min-height:0; position:relative; overflow:hidden; background:var(--surface);}
  .mm-stage svg{position:absolute; inset:0; width:100%; height:100%; pointer-events:none;}
  .mm-node{
    position:absolute; transform:translate(-50%,-50%); background:var(--surface);
    border:2.5px solid var(--blue); padding:8px 16px; font-weight:800; font-size:15px;
    cursor:grab; touch-action:none; min-width:64px; text-align:center;
    box-shadow:0 3px 10px rgba(30,50,90,.15); border-radius:50px;
  }
  .mm-node:active{cursor:grabbing;}
  .mm-node span{outline:none; cursor:text; display:inline-block; min-width:34px; user-select:text;}
  .mm-node span:empty::before{content:"…"; color:#c2cddc;}
  .mm-node.root{background:var(--yellow); border-color:#d9a400; font-size:17px; z-index:2;}
  .mm.tree .mm-node{border-radius:10px;}
  .mm.web .mm-node{border-radius:16px; border-style:dashed;}
  .mm-node .mm-add,.mm-node .mm-del{
    position:absolute; width:22px; height:22px; border-radius:50%; border:none;
    font-size:13px; font-weight:900; cursor:pointer; line-height:1; display:none; padding:0;
  }
  .mm-node:hover .mm-add,.mm-node:hover .mm-del{display:block;}
  .mm-add{right:-11px; top:50%; transform:translateY(-50%); background:var(--green); color:#fff;}
  .mm-del{left:-9px; top:-9px; background:var(--red-soft); color:var(--red);}
  /* ---------- Widget windows ---------- */
  .widget{
    position:absolute; background:rgba(255,255,255,.55); border-radius:var(--radius);
    backdrop-filter:blur(14px) saturate(1.15); -webkit-backdrop-filter:blur(14px) saturate(1.15);
    box-shadow:0 4px 14px rgba(30,50,90,.08); border:1px solid rgba(255,255,255,.6);
    display:flex; flex-direction:column;
    min-width:280px; min-height:200px; resize:none; overflow:hidden;
    transition:background .2s, box-shadow .2s, border-color .2s;
  }
  .widget:hover,.widget:focus-within{
    background:rgba(255,255,255,.92);
    box-shadow:0 12px 30px rgba(30,50,90,.2);
    border-color:rgba(255,255,255,.9);
  }
  .widget .wmin,.widget .wclose{opacity:.4; transition:opacity .15s;}
  .widget:hover .wmin,.widget:hover .wclose,
  .widget:focus-within .wmin,.widget:focus-within .wclose{opacity:1;}
  /* eigen, groter aanraakbare resize-greep i.p.v. de piepkleine native
     browser-grip (die met resize:none hierboven is uitgeschakeld) */
  .widget-rs{
    position:absolute; right:4px; bottom:4px; width:34px; height:34px;
    border-radius:50%; background:var(--blue); border:3px solid #fff;
    cursor:nwse-resize; box-shadow:0 2px 6px rgba(0,0,0,.3); touch-action:none;
    opacity:0; transition:opacity .15s; z-index:2;
  }
  .widget:hover .widget-rs,.widget:focus-within .widget-rs{opacity:.6;}
  .widget-rs:hover,.widget-rs:active{opacity:1 !important;}
  .widget.bare .widget-rs,.widget[data-max="1"] .widget-rs{display:none;}
  /* unified floating bar: pen palette + dock, draggable, combined when both active */
  #hud{
    position:fixed; left:50%; bottom:16px; transform:translateX(-50%); z-index:5500;
    display:none; gap:8px; align-items:center; flex-wrap:wrap; max-width:94vw;
    padding:5px 8px; border-radius:14px;
    background:rgba(255,255,255,.72); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    box-shadow:0 6px 18px rgba(30,50,90,.18); border:1px solid rgba(255,255,255,.7);
  }
  #hud{display:flex;}
  .hud-div{display:none; width:1.5px; height:26px; background:#c3cfde; border-radius:2px; flex:none;}
  #hud.has-dock .hud-div{display:block;}
  #dock{display:none; gap:8px; align-items:center; flex-wrap:wrap;}
  #hud.has-dock #dock{display:flex;}
  /* collapse + orientation */
  .hud-btn{
    border:none; background:var(--surface-2); border-radius:8px; width:26px; height:26px;
    cursor:pointer; font-size:13px; line-height:1; padding:0; flex:none; font-weight:900; color:var(--ink);
  }
  .hud-btn:hover{background:var(--surface-3);}
  #hud.min #penbar,#hud.min #dock,#hud.min .hud-div{display:none !important;}
  #hud.vert{
    flex-direction:column; align-items:center; flex-wrap:nowrap;
    max-height:calc(100vh - var(--tbar) - 26px); overflow-y:auto; overflow-x:hidden;
    max-width:none; width:92px;
  }
  #hud.vert #penbar{flex-direction:column; flex-wrap:nowrap; align-items:center;}
  #hud.vert #penbar .wp-group{display:grid; grid-template-columns:repeat(2,30px); justify-items:center; align-items:center;}
  #hud.vert .hud-div{width:26px; height:1.5px;}
  #hud.vert #dock{flex-direction:column; flex-wrap:nowrap;}
  .dock-item{
    border:none; display:flex; align-items:center; gap:7px; background:var(--surface);
    border-radius:10px; padding:6px 12px; font:inherit; font-weight:700; font-size:13px;
    color:var(--ink); cursor:pointer; box-shadow:0 2px 6px rgba(30,50,90,.12);
  }
  .dock-item:hover{background:var(--surface-2); transform:translateY(-2px);}
  .dock-item .di{font-size:16px; line-height:1;}
  /* sluitknop op de dock-pil: geminimaliseerde widgets zijn direct te sluiten */
  .dock-item .dock-close{
    display:flex; align-items:center; justify-content:center;
    width:20px; height:20px; margin:-2px -6px -2px 0; border-radius:7px;
    font-size:11px; color:var(--muted); line-height:1;
  }
  .dock-item .dock-close:hover{background:var(--red-soft); color:var(--red);}
  @media (pointer:coarse){
    .dock-item .dock-close{width:28px; height:28px;}
  }
  .widget-head{
    display:flex; align-items:center; gap:10px; padding:10px 14px;
    background:rgba(255,255,255,.4); border-bottom:1px solid rgba(150,170,200,.28);
    cursor:grab; flex:none;
  }
  .widget-head:active{cursor:grabbing;}
  .widget-head .wicon{font-size:20px;}
  .widget-head .wtitle{font-weight:800; font-size:15px; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .wclose{
    border:none; background:var(--red-soft); color:var(--red); width:28px; height:28px;
    border-radius:9px; font-weight:900; cursor:pointer; font-size:14px; line-height:1; flex:none;
  }
  .wclose:hover{background:var(--red); color:#fff;}
  .wmin{
    border:none; background:var(--surface-2); color:var(--ink); width:28px; height:28px;
    border-radius:9px; font-weight:900; cursor:pointer; font-size:15px; line-height:1; flex:none;
  }
  .wmin:hover{background:var(--surface-3);}
  .wz{font-size:10.5px; width:auto; min-width:30px; padding:0 5px;}
  .wz.on{background:var(--accent-soft); color:var(--accent-ink);}
  .widget-body{flex:1; overflow:hidden; position:relative; display:flex; flex-direction:column; min-height:0; container-type:inline-size; container-name:widget;}
  /* ---------- Modals ---------- */
  .modalwrap{
    position:fixed; inset:0; z-index:6000; background:rgba(15,22,38,.4);
    display:none; align-items:center; justify-content:center;
  }
  .modalwrap.open{display:flex;}
  .modal{
    background:var(--surface); border-radius:var(--radius-l); padding:24px 26px;
    width:min(680px,92vw); max-height:88vh; overflow:auto;
    box-shadow:var(--shadow-2); border:1px solid var(--line);
  }
  .modal h2{margin:0 0 14px; font-size:20px; font-weight:700;}
  /* galerij: gelijke tegel-hoogtes (grid-rijen strekken mee, vaste inhoud-zones) */
  .gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); grid-auto-rows:1fr; gap:12px;}
  .gcard{
    border:1px solid var(--line); border-radius:var(--radius); padding:16px 14px;
    text-align:center; cursor:pointer; transition:border-color .15s, box-shadow .15s;
    background:var(--surface); display:flex; flex-direction:column;
    align-items:center; justify-content:flex-start; min-height:132px;
  }
  .gcard:hover{border-color:var(--accent); box-shadow:var(--shadow-1);}
  .gcard .gi{font-size:36px; line-height:1;}
  .gcard .gn{font-weight:700; margin-top:9px; font-size:15px;}
  .gcard .gd{font-size:12.5px; color:var(--muted); margin-top:4px; line-height:1.35;}
  /* login + instellingen modals */
  #loginModal{width:min(400px,92vw);}
  .login-logo{display:flex; align-items:center; justify-content:center; gap:10px; margin:2px 0 18px;}
  .login-logo .logo-owl{width:46px; height:40px;}
  .login-logo .logo-word{font-size:24px;}
  /* instellingen is breder dan het inlogscherm: het beheerpaneel (tabblad) heeft
     de ruimte nodig van wat vroeger een eigen, brede modal was (#adminModal) */
  #settingsModal{width:min(760px,94vw); max-height:86vh; overflow:auto;}
  .st-section[data-section="account"]{max-width:420px;}
  .st-section[data-section="account"] .am-h3:first-of-type{margin-top:0;}
  #loginModal input,#settingsModal input{
    width:100%; border:1px solid var(--line); border-radius:var(--radius);
    height:var(--control-h); padding:0 12px;
    font:inherit; font-size:15px; outline:none; margin-bottom:10px;
    background:var(--surface); color:var(--ink);
  }
  #loginModal input:focus,#settingsModal input:focus{border-color:var(--accent);}
  .lrow{display:flex; gap:8px;}
  .lrow .tbtn{flex:1;}
  .lrow input{flex:1; min-width:0; margin-bottom:0;}
  .lrow .pwtoggle{flex:0 0 auto; white-space:nowrap; padding-left:10px; padding-right:10px;}
  .formMsg{min-height:20px; font-size:13.5px; font-weight:700; color:var(--red); margin:6px 0;}
  .formMsg.ok{color:var(--green);}
  .guestnote{font-size:13px; color:var(--muted); margin-top:12px; line-height:1.45;}
  /* instellingen: neutrale kaarten per sectie (.am-reset, hergebruikt van het
     beheerpaneel) i.p.v. het speelse bord-uiterlijk - dit scherm is voor volwassenen */
  #settingsModal .am-reset .lrow{margin:0;}
  #settingsModal .am-reset .guestnote{margin-top:2px;}
  .st-footer{
    display:flex; justify-content:space-between; align-items:center; gap:8px;
    margin-top:12px; padding-top:12px; border-top:1.5px solid var(--line);
    font-size:11px; color:var(--muted); flex:none;
  }
  #settingsModal .am-name{font-size:16px;}
  /* ---------- Instellingen-schil: nav links, inhoud rechts, zoeken boven ----- */
  .st-modal{
    width:min(980px,96vw); height:min(700px,92vh); max-height:92vh;
    display:flex; flex-direction:column; overflow:hidden; padding:18px 22px;
  }
  .st-head{display:flex; align-items:center; gap:14px; flex:none; padding-bottom:12px;}
  .st-head h2{margin:0; font-size:19px;}
  #stSearch{
    flex:1; max-width:360px; margin-left:auto; min-width:120px;
    height:var(--control-h); padding:0 12px; font-size:14px;
    border:1.5px solid var(--line); border-radius:10px;
    background:var(--surface-2); color:var(--ink); outline:none;
  }
  #stSearch:focus{border-color:var(--accent);}
  .st-body{display:flex; flex:1; min-height:0; border-top:1.5px solid var(--line);}
  #stNav{
    width:200px; flex:none; overflow-y:auto; padding:12px 12px 12px 0;
    border-right:1.5px solid var(--line);
    display:flex; flex-direction:column; gap:2px; align-content:flex-start;
  }
  .st-nav-group{
    font-size:10.5px; font-weight:800; color:var(--muted);
    text-transform:uppercase; letter-spacing:.5px; margin:12px 6px 4px;
  }
  .st-nav-group:first-child{margin-top:0;}
  .st-nav-btn{
    display:flex; gap:9px; align-items:center; border:none; background:transparent;
    padding:8px 10px; border-radius:9px; cursor:pointer; text-align:left;
    font-size:14px; font-weight:650; color:var(--ink);
  }
  .st-nav-btn:hover{background:var(--surface-3);}
  .st-nav-btn.active{background:var(--accent-soft); color:var(--accent-ink);}
  .st-nav-ico{flex:none; width:20px; text-align:center;}
  #stContent{flex:1; min-width:0; overflow-y:auto; padding:14px 4px 14px 18px;}
  #stSecHead{margin-bottom:12px;}
  #stSecHead:empty{display:none;}
  .st-sec-title{font-size:17px; font-weight:800;}
  .st-sec-sub{font-size:12.5px; color:var(--muted); margin-top:2px;}
  /* curriculumwiki: volwassen, informatief en bruikbaar op tablet/telefoon */

  .wiki-goal-focus{outline:3px solid var(--accent);outline-offset:3px;animation:wikiFocus 1.4s ease-out}
  @keyframes wikiFocus{from{background:var(--accent-soft)}to{background:var(--surface)}}
  .winfo[hidden]{display:none}
  .widget-curriculum-modal{width:min(620px,94vw);max-height:min(760px,88vh);overflow:auto}
  .widget-curriculum-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
  .widget-curriculum-head h2{flex:1;margin:0;font-size:20px}
  .widget-curriculum-goals{display:flex;flex-direction:column;gap:8px;margin:14px 0}
  .widget-curriculum-goal{display:flex;flex-direction:column;gap:4px;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);color:var(--ink);text-decoration:none}
  .widget-curriculum-goal:hover,.widget-curriculum-goal:focus-visible{border-color:var(--accent);outline:2px solid var(--accent-soft)}
  .widget-curriculum-goal span{font-size:13px;line-height:1.4}.widget-curriculum-goal small{color:var(--accent-ink);font-weight:750}
  .widget-curriculum-empty,.widget-curriculum-careful{padding:10px 12px;border-radius:10px;background:var(--surface-2);font-size:13px;line-height:1.45}
  .widget-curriculum-careful{color:var(--muted)}.widget-curriculum-all{display:inline-flex;text-decoration:none}

  #curriculumWiki{display:flex;flex-direction:column;gap:14px;padding-bottom:10px;}
  .wiki-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:18px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(135deg,var(--surface),var(--surface-2));}
  .wiki-hero-text{max-width:680px}.wiki-kicker{margin-bottom:5px;color:var(--accent);font-size:11px;font-weight:750;letter-spacing:.6px;text-transform:uppercase}
  .wiki-hero h2{margin:0 0 7px;font-size:23px}.wiki-hero p{margin:0;color:var(--muted);line-height:1.5}
  .wiki-facts{display:grid;grid-template-columns:auto auto;align-items:baseline;gap:2px 7px;flex:none;padding:10px 12px;border-left:3px solid var(--accent)}
  .wiki-facts strong{font-size:24px}.wiki-facts span{color:var(--muted);font-size:11px}
  .wiki-status{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:11px 13px;border:1px solid color-mix(in srgb,var(--orange) 45%,var(--line));border-radius:9px;background:color-mix(in srgb,var(--orange) 8%,var(--surface));font-size:12.5px;line-height:1.45}
  .wiki-status strong{white-space:nowrap}.wiki-status span{color:var(--muted)}
  .wiki-link{width:max-content;max-width:100%;color:var(--accent);font-size:12px;font-weight:700;text-decoration:none}.wiki-link:hover,.wiki-link:focus-visible{text-decoration:underline}
  .wiki-tule{border:1px solid var(--line);border-radius:9px;background:var(--surface)}.wiki-tule summary{cursor:pointer;padding:10px 12px;font-weight:700}.wiki-tule p{margin:0;padding:0 12px 12px;color:var(--muted);font-size:12.5px;line-height:1.55}
  .wiki-profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:0 12px 12px}
  .wiki-profile-column{display:flex;flex-direction:column;gap:6px}.wiki-profile-column h3{margin:0 0 3px}
  .wiki-profile-row{display:grid;grid-template-columns:74px 1fr;gap:3px 8px;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2)}
  .wiki-profile-row small{grid-column:1/-1;color:var(--muted);line-height:1.4}
  .wiki-source-links{display:flex;flex-wrap:wrap;gap:8px;padding:0 12px 12px}
  .wiki-language-note{margin:0;padding:8px 11px;border-radius:7px;background:var(--surface-2);color:var(--muted);font-size:12px}
  .wiki-search{display:flex;flex-direction:column;gap:5px}.wiki-search label{font-size:12px;font-weight:700}
  #settingsModal .wiki-search input{margin:0;background:var(--surface)}
  .wiki-filters{display:flex;gap:6px;overflow-x:auto;padding-bottom:3px;scrollbar-width:thin}
  .wiki-filters button{flex:none;border:1px solid var(--line);border-radius:999px;padding:7px 10px;background:var(--surface);color:var(--ink);font:inherit;font-size:12px;cursor:pointer}
  .wiki-filters button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink);font-weight:700}
  .wiki-results{display:flex;flex-direction:column;gap:22px}.wiki-area{display:flex;flex-direction:column;gap:9px;scroll-margin-top:10px}
  .wiki-area-head{display:flex;align-items:center;gap:9px;border-bottom:1px solid var(--line);padding-bottom:7px}.wiki-area-head h3{display:flex;align-items:center;gap:7px;margin:0;font-size:18px}.wiki-area-icon{font-size:20px}
  .wiki-range{margin-left:auto;color:var(--muted);font-size:11px;font-weight:650}.wiki-area-intro{max-width:780px;margin:0;color:var(--muted);font-size:12.5px;line-height:1.5}
  .wiki-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .wiki-goal{display:flex;flex-direction:column;gap:8px;min-width:0;padding:12px;border:1px solid var(--line);border-radius:9px;background:var(--surface)}
  .wiki-goal-head{display:flex;align-items:center;gap:7px}.wiki-goal-id{flex:none;padding:3px 7px;border-radius:5px;background:var(--accent-soft);color:var(--accent-ink);font-size:11px;font-weight:750}.wiki-domain{overflow:hidden;color:var(--muted);font-size:11px;text-overflow:ellipsis;white-space:nowrap}
  .wiki-summary{margin:0;font-size:13px;line-height:1.45}.wiki-goal h4{margin:1px 0 -3px;color:var(--muted);font-size:10.5px;text-transform:uppercase;letter-spacing:.4px}
  .wiki-parts{display:flex;flex-direction:column;gap:3px;margin:0;padding-left:19px;font-size:12px;line-height:1.35}.wiki-parts strong{color:var(--accent-ink)}
  .wiki-coverage-row{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:auto;padding-top:3px}.wiki-coverage{padding:3px 7px;border-radius:5px;font-size:10.5px;font-weight:750}
  .wiki-coverage-partial{background:color-mix(in srgb,var(--green) 14%,var(--surface));color:color-mix(in srgb,var(--green) 70%,var(--ink))}
  .wiki-coverage-support{background:color-mix(in srgb,var(--blue) 12%,var(--surface));color:color-mix(in srgb,var(--blue) 70%,var(--ink))}
  .wiki-coverage-open{background:var(--surface-2);color:var(--muted)}
  .wiki-widgets{display:flex;align-items:center;flex-wrap:wrap;gap:4px}.wiki-widgets-label{color:var(--muted);font-size:10.5px}.wiki-widget{padding:2px 6px;border:1px solid var(--line);border-radius:999px;font-size:10.5px}
  .wiki-empty{padding:30px;border:1px dashed var(--line);border-radius:9px;color:var(--muted);text-align:center}
  .wiki-disclaimer{padding:11px 13px;border-left:3px solid var(--accent);background:var(--surface-2);font-size:12px;line-height:1.5}.wiki-disclaimer strong{font-weight:750}
  /* zoekresultaten: gegroepeerd per sectie, klik = navigeren */
  #stSearchResults{display:flex; flex-direction:column; gap:2px;}
  .st-result{
    display:flex; gap:9px; align-items:center; border:none; background:transparent;
    padding:8px 10px; border-radius:9px; cursor:pointer; text-align:left;
    font-size:14px; color:var(--ink); width:100%;
  }
  .st-result:hover{background:var(--surface-3);}
  .st-result-lbl{font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .st-result-sub{margin-left:auto; flex:none; font-size:12px; color:var(--muted);}
  /* smal scherm: nav wordt een horizontale strook boven de inhoud */
  @media (max-width:720px){
    .st-modal{padding:14px;}
    .st-body{flex-direction:column;}
    #stNav{
      width:auto; flex-direction:row; overflow-x:auto; overflow-y:hidden;
      border-right:none; border-bottom:1.5px solid var(--line);
      padding:8px 0; gap:4px;
    }
    .st-nav-group{display:none;}
    .st-nav-btn{flex:none; padding:7px 10px;}
    #stContent{padding:12px 2px;}
    #stSearch{max-width:none;}
    .wiki-hero{flex-direction:column}.wiki-facts{grid-template-columns:auto auto;border-left:0;border-top:3px solid var(--accent)}
    .wiki-status{grid-template-columns:1fr}.wiki-status strong{white-space:normal}
    .wiki-grid{grid-template-columns:1fr}
    .wiki-profile-grid{grid-template-columns:1fr}
  }
  /* =========================================================
     Letter game widget
  ==========================================================*/
  .lg{display:flex; flex-direction:column; flex:1; min-height:0; padding:12px 14px; gap:10px;}
  .lg-top{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
  .lg-levels{display:flex; background:var(--surface-2); border-radius:999px; padding:3px; gap:2px;}
  .lg-levels button{
    border:none; border-radius:999px; background:transparent; padding:6px 12px;
    font:inherit; font-weight:700; font-size:13.5px; color:var(--muted); cursor:pointer;
  }
  .lg-levels button.active{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-1);}
  .lg-cards{display:flex; gap:5px; flex-wrap:wrap;}
  .lg-cards button{
    border:1px solid var(--line); background:var(--surface); width:34px; height:34px; border-radius:10px;
    font:inherit; font-weight:800; color:var(--muted); cursor:pointer; font-size:14px;
  }
  .lg-cards button.active{border-color:var(--accent); background:var(--accent-soft); color:var(--accent-ink);}
  .lg-cards .lg-theme{
    width:auto; padding:0 11px; max-width:120px; overflow:hidden;
    text-overflow:ellipsis; white-space:nowrap;
  }
  .lg-num{
    border:1px solid var(--line); border-radius:10px; height:34px; font:inherit;
    font-weight:800; font-size:13px; color:var(--muted); background:var(--surface);
    padding:0 4px; outline:none; cursor:pointer;
  }
  .lg-snd,.lg-mode{
    border:1px solid var(--line); border-radius:10px; width:34px; height:34px;
    background:var(--surface); cursor:pointer; font-size:15px; line-height:1; padding:0; flex:none;
  }
  .lg-snd.off{opacity:.55;}
  /* small digit blocks/slots for the maths widgets */
  .blok.sm{--dot:7px; width:46px; height:74px; border-radius:10px; padding-top:4px;}
  .blok.sm .bl{font-size:24px; height:30px; color:var(--purple);}
  .blok.sm .blok-dots{margin-bottom:7px;}
  .slot.sm{--dot:7px; width:46px; height:74px; padding-top:4px;}
  .slot.sm .ghost{font-size:22px; height:26px;}
  .slot.sm .slot-dots{margin-bottom:6px;}
  .mt-slots{display:flex; gap:8px; justify-content:center;}
  .mt-tray{gap:8px; padding:10px 8px; min-height:96px;}
  .mt.blocks .mt-a,.mt.blocks .mt-pad{display:none;}
  .mt:not(.blocks) .mt-slots,.mt:not(.blocks) .mt-tray{display:none;}
  /* on-screen letter keyboard (letters widget, type mode) */
  .lg-kbd{gap:6px; padding:10px;}
  .lg-kbd button{
    width:40px; height:46px; border-radius:10px; border:2px solid var(--wood-d);
    background:linear-gradient(#fdf3dd,var(--wood)); font:inherit; font-weight:900;
    font-size:20px; cursor:pointer; padding:0;
  }
  .lg-kbd button.v{color:var(--red);}
  .lg-kbd button.c{color:var(--blue);}
  .lg.typemode .lg-tray.blocks-tray{display:none;}
  .lg:not(.typemode) .lg-kbd{display:none;}
  .lg-ed-themerow{display:flex; gap:8px; align-items:center;}
  .ed-theme-sel{
    flex:1; min-width:0; border:1px solid var(--line); border-radius:10px; padding:9px 10px;
    font:inherit; font-weight:700; font-size:15px; outline:none; background:var(--surface); cursor:pointer;
  }
  .ed-theme-name, .ed-theme-folder{
    border:2px solid var(--blue); border-radius:10px; padding:9px 10px;
    font:inherit; font-size:15px; outline:none; width:180px;
  }
  .ed-theme-del{
    border:none; background:var(--red-soft); color:var(--red); border-radius:10px;
    width:40px; height:40px; cursor:pointer; font-size:15px; flex:none;
  }
  .ed-theme-del:hover{background:var(--red); color:#fff;}
  .ed-theme-mv{
    border:none; background:var(--surface-2, #eef); color:var(--ink); border-radius:10px;
    width:40px; height:40px; cursor:pointer; font-size:15px; flex:none;
  }
  .lg-progress{margin-left:auto; font-size:13.5px; font-weight:700; color:var(--muted); display:flex; align-items:center; gap:8px; white-space:nowrap;}
  .lg-stars{color:#d9a400; font-size:14px; min-width:34px; text-align:right;}
  .lg-instr{
    background:var(--surface-2); border:1.5px dashed #bcd4f2;
    border-radius:12px; padding:6px 14px; font-size:14.5px; font-weight:700; color:#37588a;
    text-align:center; min-height:42px; display:flex; align-items:center; justify-content:center;
    flex:none;
  }
  .lg-card{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:16px; background:var(--surface); border:1px solid var(--line);
    border-radius:18px; padding:12px; min-height:0; position:relative; overflow:hidden;
  }
  .lg-pic{font-size:64px; line-height:1; filter:drop-shadow(0 4px 6px rgba(0,0,0,.12));}
  .lg-pic img{width:80px; height:80px; object-fit:contain; border-radius:12px; vertical-align:middle;}
  .lg-slots{display:flex; gap:10px;}
  .slot{
    --dot:9px;
    width:64px; height:98px; border-radius:12px; position:relative;
    background:#e9eef5; border:2.5px dashed #b9c7d9;
    display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
    padding-top:6px; transition:all .12s;
  }
  .slot.droptarget{border-color:var(--green); background:#e3f6ea; transform:scale(1.06);}
  .slot .ghost{font-size:30px; font-weight:800; color:#c2cddc; height:40px; display:flex; align-items:center;}
  .slot.filled{border-style:solid; border-color:transparent; background:transparent; padding:0; justify-content:center;}
  .slot.filled .ghost,.slot.filled .slot-dots{display:none;}
  .slot.shake{animation:shake .35s;}
  @keyframes shake{
    0%,100%{transform:translateX(0);} 20%{transform:translateX(-7px);}
    40%{transform:translateX(7px);} 60%{transform:translateX(-5px);} 80%{transform:translateX(5px);}
  }
  .blok{
    --dot:9px;
    width:64px; height:98px; border-radius:12px; cursor:grab; touch-action:none;
    display:flex; flex-direction:column; align-items:center; padding-top:6px;
    background:linear-gradient(#fdf3dd,var(--wood)); border:2.5px solid var(--wood-d);
    box-shadow:0 4px 0 var(--wood-d), 0 7px 14px rgba(60,40,0,.16);
    position:relative; flex:none;
  }
  .blok:active{cursor:grabbing;}
  .blok .bl{font-size:34px; font-weight:900; height:44px; display:flex; align-items:center;}
  .blok.vowel .bl{color:var(--red);}
  .blok.cons .bl{color:var(--blue);}
  .blok .blok-dots{margin-top:auto; margin-bottom:8px;}
  /* Vangnet: het stippenraster houdt altijd zijn maat, het label geeft mee als
     een blokformaat krap is. Zonder min-height:0 kan een kolom-flexitem niet
     onder zijn inhoud krimpen en werd het raster het blok uit geduwd. */
  .blok .bl,.slot .ghost{min-height:0;}
  .blok .blok-dots,.slot .slot-dots{flex:none;}
  .blok.in-slot{cursor:pointer; animation:pop .3s;}
  .blok.dragging{opacity:.25;}
  @keyframes pop{0%{transform:scale(.6);} 60%{transform:scale(1.12);} 100%{transform:scale(1);}}
  .slot .slot-dots{margin-top:auto; margin-bottom:8px;}
  /* Stippenraster (braillepatroon, zie dotGrid() in data.js). De maat komt uit
     één variabele --dot die elk bloktype naast zijn eigen hoogte zet; zo kan een
     nieuw blokformaat niet meer per ongeluk het raster van een ander formaat
     erven (dat gebeurde bij de geldblokken en in de smalle-widget-query, waar de
     stippen onder het blok uit staken). place-self houdt de kleinere "off"-stip
     gecentreerd in zijn cel - anders staat die links-boven en oogt het patroon
     scheef. Vuistregel: --dot nooit onder 6px (leesbaarheid); past het niet,
     dan geeft de labelhoogte of de blokhoogte mee, niet de stip. */
  .dots{display:grid; grid-template-columns:repeat(2,var(--dot)); grid-template-rows:repeat(3,var(--dot)); gap:calc(var(--dot)/3);}
  .dots i{width:var(--dot); height:var(--dot); border-radius:50%; background:transparent; place-self:center;}
  .blok .dots i.on{background:#b98a3c; box-shadow:inset 0 -1.5px 2px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.5);}
  .blok .dots i.off{background:rgba(0,0,0,.05);}
  .slot .dots i.on{background:#aebcce; box-shadow:inset 0 2px 3px rgba(30,50,80,.4);}
  .slot .dots i.off{background:transparent; border:1px dotted #ccd7e4; width:calc(var(--dot) - 2px); height:calc(var(--dot) - 2px);}
  .lg-tray{
    display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
    background:var(--surface-2); border-radius:16px; padding:14px 12px; min-height:130px; flex:none;
  }
  .lg-bottom{display:flex; align-items:center; justify-content:center; gap:12px; min-height:46px; flex:none;}
  .lg-next{
    border:none; border-radius:12px; padding:10px 22px; font:inherit; font-weight:800;
    background:var(--green); color:#fff; cursor:pointer; font-size:15.5px; display:none;
  }
  .lg-next.show{display:inline-block; animation:pop .3s;}
  .lg-done{
    position:absolute; inset:0; border-radius:18px; display:none; align-items:center;
    justify-content:center; flex-direction:column; gap:6px;
    background:rgba(255,255,255,.88); backdrop-filter:blur(2px); z-index:5;
  }
  .lg-done.show{display:flex;}
  .lg-done .dg{font-size:52px;}
  .lg-done .dt{font-size:24px; font-weight:900; color:var(--green);}
  .confetti{position:absolute; width:10px; height:10px; border-radius:3px; top:-12px; z-index:6; pointer-events:none; animation:fall linear forwards;}
  @keyframes fall{to{transform:translateY(110vh) rotate(720deg);}}
  #dragClone{
    position:fixed; z-index:9000; pointer-events:none; transform:translate(-50%,-60%) scale(1.08);
    filter:drop-shadow(0 12px 16px rgba(0,0,0,.28));
  }
  /* ---------- custom words editor ---------- */
  .lg-editor{
    position:absolute; inset:0; z-index:20; background:var(--surface); display:none;
    flex-direction:column; gap:10px; padding:14px 16px; overflow:auto;
  }
  .lg-editor.open{display:flex;}
  .lg-ed-head{display:flex; align-items:center; justify-content:space-between;}
  .lg-ed-head b{font-size:17px;}
  .lg-ed-form{
    display:flex; gap:10px; align-items:center; flex-wrap:wrap;
    background:var(--surface-2); border-radius:14px; padding:12px;
  }
  .lg-ed-form input[type=text]{
    border:1px solid var(--line); border-radius:10px; padding:9px 10px; font:inherit;
    font-size:16px; outline:none;
  }
  .lg-ed-form input.ed-word{width:170px; text-transform:lowercase;}
  .ed-preview{width:52px; height:52px; display:flex; align-items:center; justify-content:center;
    font-size:34px; background:var(--surface); border-radius:10px; border:2px dashed var(--line); overflow:hidden; flex:none;}
  .ed-preview img{width:100%; height:100%; object-fit:contain;}
  .ed-add{border:none; border-radius:10px; padding:11px 20px; font:inherit; font-weight:800;
    background:var(--green); color:#fff; cursor:pointer; font-size:14.5px;}
  .ed-msg{width:100%; color:var(--red); font-weight:700; font-size:13.5px; min-height:16px;}
  /* modern tabsysteem: underline-tabs die overlopen in hun paneel.
     De tabbalk deelt de ondergrond met de inhoud; alleen een hairline scheidt ze
     en de accentlijn van de actieve tab valt daaroverheen. */
  .ed-tabs{
    display:flex; gap:2px; border-bottom:1px solid var(--line); margin-bottom:14px;
    overflow-x:auto; scrollbar-width:thin;
  }
  .ed-tabs button{
    border:none; border-radius:0; padding:10px 15px 11px; font:inherit; font-weight:700;
    font-size:14px; background:transparent; color:var(--muted); cursor:pointer;
    position:relative; margin-bottom:-1px; flex:none;
  }
  .ed-tabs button:hover{color:var(--ink);}
  .ed-tabs button.active{color:var(--ink);}
  .ed-tabs button.active::after{
    content:""; position:absolute; left:10px; right:10px; bottom:0;
    height:2.5px; border-radius:2px; background:var(--accent);
  }
  .ed-pane{padding:2px 0 0; min-height:120px;}
  /* uniforme segmented control (kleine keuzegroepen: taal, niveau, timer, chips) */
  .ed-cats{display:flex; gap:5px; flex-wrap:wrap; margin-bottom:10px;}
  .ed-cats button{
    border:none; background:var(--surface-2); border-radius:999px; padding:6px 12px; font:inherit;
    font-weight:700; font-size:12.5px; color:var(--muted); cursor:pointer;
  }
  .ed-cats button.active{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-1); outline:1.5px solid var(--accent);}
  .ed-grid{display:flex; gap:4px; flex-wrap:wrap; max-height:170px; overflow:auto;}
  .ed-grid button{
    border:none; background:transparent; border-radius:9px; font-size:26px;
    width:42px; height:42px; cursor:pointer; padding:0; line-height:1;
  }
  .ed-grid button:hover{background:#dbe8f8;}
  .ed-grid button.sel{background:var(--accent-soft); outline:1.5px solid var(--accent);}
  .ed-pictorow{display:flex; gap:8px; margin-bottom:10px;}
  .ed-pictorow input{flex:1; border:1px solid var(--line); border-radius:10px; padding:9px 10px; font:inherit; font-size:15px; outline:none;}
  .ed-pictorow .tbtn{flex:none;}
  .ed-pgrid{display:flex; gap:8px; flex-wrap:wrap; max-height:180px; overflow:auto;}
  .ed-pgrid button{
    border:1px solid var(--line); background:var(--surface); border-radius:12px; width:74px; height:74px;
    cursor:pointer; padding:5px;
  }
  .ed-pgrid button:hover{border-color:var(--blue);}
  .ed-pgrid button.sel{border-color:var(--accent); background:var(--accent-soft);}
  .ed-pgrid img{width:100%; height:100%; object-fit:contain;}
  .ed-credit{font-size:11.5px; color:var(--muted); margin-top:8px; line-height:1.4;}
  .ed-credit a{color:var(--blue);}
  .ed-status{font-size:13.5px; font-weight:700; color:var(--muted); padding:6px 0;}
  .ed-upload{background:var(--surface-2); border-radius:10px; padding:11px 16px; font-weight:700;
    font-size:14px; cursor:pointer; display:inline-block;}
  .ed-upload input{display:none;}
  .ed-uphint{font-size:12.5px; color:var(--muted); margin-top:10px; line-height:1.45;}
  .ed-p-library{min-height:120px;padding:18px;border:1px dashed var(--accent);border-radius:14px;background:linear-gradient(135deg,var(--surface-2),var(--accent-soft));text-align:center;}
  .ed-open-library{min-height:46px;font-weight:850;}
  .ed-library-hint{max-width:520px;margin:10px auto 0;color:var(--muted);font-size:13px;line-height:1.5;}
  .lg-ed-list{display:flex; flex-direction:column; gap:6px;}
  .lg-ed-list .empty{color:var(--muted); font-weight:700; text-align:center; padding:18px 0;}
  .ed-row{display:flex; align-items:center; gap:12px; background:var(--surface-2); border-radius:12px; padding:7px 12px;}
  .ed-row .ep{width:40px; height:40px; font-size:28px; display:flex; align-items:center; justify-content:center;}
  .ed-row .ep img{width:100%; height:100%; object-fit:contain; border-radius:8px;}
  .ed-row .ew{font-weight:800; font-size:17px; letter-spacing:2px; flex:1;}
  .ed-row .edel{border:none; background:var(--red-soft); color:var(--red); border-radius:8px;
    width:30px; height:30px; cursor:pointer; font-weight:900;}
  .ed-row .edel:hover{background:var(--red); color:#fff;}
  .ed-row.base{opacity:.65;}
  /* =========== Notes widget =========== */
  .notes{flex:1; width:100%; min-height:0; border:none; resize:none; font:inherit; font-size:16px;
    padding:16px; outline:none; background:transparent; color:#26354a; line-height:1.55;}
  .notes.large{font-size:22px;}
  /* =========== Writing pad widget =========== */
  .wp{flex:1; min-height:0; display:flex; flex-direction:column;}
  .wp-bar{
    display:flex; gap:10px; padding:8px 10px; flex-wrap:wrap; align-items:center;
    flex:none; background:var(--surface-2); border-bottom:1px solid var(--line);
  }
  .wp-group{display:flex; gap:4px; align-items:center; background:var(--surface-2); border-radius:10px; padding:3px;}
  .wp-group button{
    border:none; background:transparent; border-radius:8px; width:32px; height:32px;
    cursor:pointer; font-size:16px; line-height:1; padding:0;
    display:flex; align-items:center; justify-content:center;
  }
  .wp-group button.on{background:var(--surface); box-shadow:0 1px 4px rgba(30,50,90,.2);}
  .wp-color{border-radius:50% !important; position:relative;}
  .wp-color i{width:18px; height:18px; border-radius:50%; display:block;}
  .wp-color.on{outline:2.5px solid var(--ink); outline-offset:-3px;}
  .wp-size i{border-radius:50%; background:var(--ink); display:block;}
  .wp-bg{font-size:0 !important;}
  .wp-bg i{
    width:20px; height:20px; display:block; border-radius:4px; border:1.5px solid #9db6d8;
    background-color:#fff; background-size:100% 25%;
  }
  .wp-bg[data-bg=blank] i{background-image:none;}
  .wp-bg[data-bg=dots] i{background-image:radial-gradient(circle,#9db6d8 1px,transparent 1px); background-size:5px 5px;}
  .wp-bg[data-bg=lines] i{background-image:repeating-linear-gradient(#0000 0 4px, #9db6d8 4px 5px);}
  .wp-bg[data-bg=write] i{background-image:repeating-linear-gradient(#0000 0 2px, #c3d5ec 2px 3px, #0000 3px 5px, #6d92c4 5px 6px);}
  .wp-bg[data-bg=grid-s] i{background-image:repeating-linear-gradient(#0000 0 4px, #9db6d8 4px 5px),repeating-linear-gradient(90deg,#0000 0 4px, #9db6d8 4px 5px);}
  .wp-bg[data-bg=grid-b] i{background-image:repeating-linear-gradient(#0000 0 8px, #9db6d8 8px 9px),repeating-linear-gradient(90deg,#0000 0 8px, #9db6d8 8px 9px);}
  .wp-clear{border:none; background:var(--red-soft); color:var(--red); border-radius:10px;
    width:34px; height:34px; cursor:pointer; font-size:15px; margin-left:auto;}
  .wp-clear:hover{background:var(--red); color:#fff;}
  .wp-stage{flex:1; min-height:0; position:relative; background:var(--surface);}
  .wp-stage canvas{position:absolute; inset:0; touch-action:none; cursor:crosshair;}
  .wp-stage.t-text canvas{cursor:text;}
  .wp-text-input{
    position:absolute; z-index:5; background:rgba(255,255,255,.85);
    border:1.5px dashed var(--blue); border-radius:6px; padding:2px 6px;
    font-family:inherit; font-weight:700; outline:none; min-width:130px;
  }
  /* paper backgrounds (CSS, so the eraser only removes ink) */
  .wp-stage.bg-lines{background-image:repeating-linear-gradient(#0000 0 31px, #aec5e4 31px 32px);}
  .wp-stage.bg-write{background-image:repeating-linear-gradient(
    #0000 0 15px, #c3d5ec 15px 16px, #0000 16px 31px, #6d92c4 31px 32.5px, #0000 32.5px 47px, #c3d5ec 47px 48px, #0000 48px 63px);}
  .wp-stage.bg-grid-s{background-image:
    repeating-linear-gradient(#0000 0 19px, #c9d9ee 19px 20px),
    repeating-linear-gradient(90deg,#0000 0 19px, #c9d9ee 19px 20px);}
  .wp-stage.bg-grid-b{background-image:
    repeating-linear-gradient(#0000 0 39px, #aec5e4 39px 40px),
    repeating-linear-gradient(90deg,#0000 0 39px, #aec5e4 39px 40px);}
  /* =========== Media widget =========== */
  .media{flex:1; min-height:0; display:flex; flex-direction:column;}
  .media-bar{
    display:flex; gap:8px; padding:8px 10px; flex:none;
    background:var(--surface-2); border-bottom:1px solid var(--line);
  }
  .media-bar input{
    flex:1; min-width:0; border:1px solid var(--line); border-radius:10px;
    padding:8px 10px; font:inherit; font-size:14px; outline:none;
  }
  .media-bar input:focus{border-color:var(--blue);}
  .media-stage{
    flex:1; min-height:0; background:#141a24; display:flex;
    align-items:center; justify-content:center; overflow:hidden;
  }
  .media-stage iframe{width:100%; height:100%; border:none;}
  .media-stage img,.media-stage video{max-width:100%; max-height:100%;}
  .media-msg{color:#93a4bd; font-weight:700; font-size:14px; text-align:center; padding:20px; line-height:1.5;}
  .media-yt{position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center;}
  .media-yt img{max-width:100%; max-height:100%;}
  .media-play{
    position:absolute; border:none; width:76px; height:54px; border-radius:14px;
    background:rgba(224,60,50,.95); color:#fff; font-size:24px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 6px 18px rgba(0,0,0,.4);
  }
  .media-play:hover{transform:scale(1.08);}
  /* =========== Math widgets =========== */
  .mt{flex:1; min-height:0; display:flex; flex-direction:column; gap:10px; padding:12px 14px;}
  .mt-top{display:flex; gap:8px; align-items:center; flex:none;}
  .mt-score{margin-left:auto; font-size:13.5px; font-weight:700; color:var(--muted); white-space:nowrap;}
  .mt-card{
    flex:1; min-height:0; display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:12px; background:var(--surface);
    border:1px solid var(--line); border-radius:18px; position:relative; padding:10px; overflow:hidden;
  }
  .mt-q{font-size:40px; font-weight:900; letter-spacing:1px; text-align:center;}
  .mt-a{
    min-width:110px; height:56px; border-radius:14px; border:2.5px dashed #b9c7d9;
    background:var(--surface-2); font-size:32px; font-weight:900; display:flex; align-items:center;
    justify-content:center; color:var(--blue); padding:0 16px;
  }
  .mt-a.ok{border-style:solid; border-color:var(--green); background:#e3f6ea; color:var(--green);}
  .mt-a.shake{animation:shake .35s;}
  .mt-fb{min-height:24px; font-size:16px; font-weight:800; color:var(--green); text-align:center;}
  .mt-fb.ans{color:var(--red);}
  .mt-pad{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; flex:none;}
  .mt-pad button{
    border:none; border-radius:12px; background:var(--surface-2); font:inherit; font-weight:900;
    font-size:22px; padding:12px 0; cursor:pointer; color:var(--ink);
  }
  .mt-pad button:hover{background:var(--surface-3);}
  .mt-pad .ok{background:var(--green); color:#fff;}
  .mt-done{
    position:absolute; inset:0; border-radius:18px; display:none; flex-direction:column;
    align-items:center; justify-content:center; gap:8px; background:rgba(255,255,255,.9);
    backdrop-filter:blur(2px); z-index:5;
  }
  .mt-done.show{display:flex;}
  .mt-done .dg{font-size:46px;}
  .mt-done .dt{font-size:22px; font-weight:900; color:var(--green);}
  .mt-done .ds{font-size:16px; font-weight:800; color:var(--muted);}
  .mt-again{
    border:none; border-radius:12px; padding:10px 22px; background:var(--green);
    color:#fff; font:inherit; font-weight:800; font-size:15px; cursor:pointer; margin-top:6px;
  }
  /* =========== high-contrast accessibility mode =========== */
  /* wint óók van body.dark: hoog contrast is altijd zwart-op-wit */
  body.hc,body.dark.hc{
    --bg:#fff; --ink:#000; --muted:#2b2b2b; --blue:#0047ab; --red:#c40000;
    --green:#006b2d; --yellow:#ffd400; --wood:#ffe9b0; --wood-d:#8a6a00;
    --surface:#fff; --surface-2:#f2f2f2; --surface-3:#e2e2e2; --line:#000;
    --accent:#0047ab; --accent-ink:#00306f; --accent-soft:#d6e4ff;
    --red-soft:#ffd9d6;
    --glass:#fff; --glass-strong:#fff; --glass-line:#000;
  }
  body.hc #board.bg-dots{background-image:radial-gradient(circle,#7d8ea3 1.7px,transparent 1.7px);}
  body.hc .widget{background:var(--surface); border:2.5px solid #000; box-shadow:0 4px 14px rgba(0,0,0,.35); backdrop-filter:none;}
  body.hc .widget:hover,.body.hc .widget:focus-within{background:var(--surface);}
  body.hc .widget .wmin,body.hc .widget .wclose{opacity:1;}
  body.hc .widget-rs{opacity:1; border:3px solid #000;}
  body.hc .widget-head{background:#f2f2f2; border-bottom:2px solid #000;}
  body.hc .slot{border-color:#000; background:var(--surface);}
  body.hc .slot .ghost{color:#666;}
  body.hc .slot .dots i.on{background:#333;}
  body.hc .blok .dots i.on{background:#6a4a00;}
  body.hc .lg-instr{background:var(--surface); border-color:#000; color:#000;}
  body.hc #hud,body.hc .dock-item,body.hc .fab-item,body.hc #penbar .wp-group{border:2px solid #000; background:var(--surface);}
  body.hc #fab{background:#0047ab;}
  body.hc :focus-visible{outline:3px solid #0047ab; outline-offset:2px;}
  body.hc .mm-node{box-shadow:0 3px 10px rgba(0,0,0,.4); border-width:3px;}
  /* high contrast inside every widget */
  body.hc .lg-levels,body.hc .tseg{background:var(--surface); border:2px solid #000; border-radius:12px;}
  body.hc .lg-levels button,body.hc .tseg button{color:#000;}
  body.hc .lg-levels button.active{background:#006b2d; color:#fff;}
  body.hc .lg-cards button,body.hc .lg-num,body.hc .fl-sel,body.hc .lg-snd,body.hc .lg-mode{
    border-color:#000; color:#000; background:var(--surface);
  }
  body.hc .lg-cards button.active{background:#ffd400; border-color:#000; color:#000;}
  body.hc .lg-tray{background:var(--surface); border:2px dashed #000;}
  body.hc .lg-card,body.hc .mt-card{background:var(--surface); border-color:#000;}
  body.hc .lg-progress,body.hc .mt-score,body.hc .mm-hint,body.hc .dc-sum{color:#000;}
  body.hc .lg-stars{color:#7a5d00;}
  body.hc .mt-a{border-color:#000; background:var(--surface);}
  body.hc .mt-pad button{background:var(--surface); border:2px solid #000; color:#000;}
  body.hc .mt-pad .ok{background:#006b2d; border-color:#006b2d; color:#fff;}
  body.hc .mt-fb{color:#006b2d;}
  body.hc .mt-fb.ans{color:#c40000;}
  body.hc .lg-kbd button,body.hc .blok{border-color:#6a4a00;}
  body.hc .fl-word.dim{color:#8a8a8a;}
  body.hc .slot .dots i.off{border-color:#666;}
  body.hc .np textarea,body.hc .media-bar input,body.hc .ed-theme-sel,
  body.hc .lg-ed-form input[type=text],body.hc .ed-pictorow input{border-color:#000; color:#000;}
  body.hc .np-result{background:#0047ab;}
  body.hc .np-row label,body.hc .thint,body.hc .guestnote,body.hc .ed-credit,
  body.hc .gcard .gd,body.hc .st-footer{color:#222;}
  body.hc .gcard{border-color:#000; background:var(--surface);}
  body.hc .gcat-title{color:#000;}
  body.hc .tbtn.ghost{background:var(--surface); border:2px solid #000; color:#000;}
  body.hc .wmin,body.hc .wclose{border:1.5px solid #000; background:var(--surface);}
  body.hc .wclose{color:#c40000;}
  body.hc .wz.on,body.hc #zoomPct.on{background:#ffd400; color:#000;}
  body.hc .ed-tabs button,body.hc .ed-cats button{color:#000; background:var(--surface); border:1.5px solid #000;}
  body.hc .ed-tabs button.active,body.hc .ed-cats button.active{background:#ffd400;}
  body.hc .ed-pane{border-color:#000; background:var(--surface);}
  body.hc .timer .presets button,body.hc .timer .main button,body.hc .ticon,
  body.hc .hud-btn,body.hc .mm-seg button{background:var(--surface); border:1.5px solid #000; color:#000;}
  body.hc .timer .main .bstart{background:#006b2d; border-color:#006b2d; color:#fff;}
  body.hc .dock-item{color:#000;}
  body.hc .media-msg{color:#ddd;}
  /* =========== Flash words widget =========== */
  .fl-word{font-size:58px; font-weight:900; letter-spacing:3px; min-height:70px; display:flex; align-items:center;}
  .fl-word.dim{color:#c2cddc;}
  .fl-pic{font-size:46px; min-height:56px; display:flex; align-items:center;}
  .fl-pic img{width:56px; height:56px; object-fit:contain;}
  .fl-sel{
    border:1px solid var(--line); border-radius:10px; height:34px; font:inherit;
    font-weight:800; font-size:13px; color:var(--muted); background:var(--surface);
    padding:0 6px; outline:none; cursor:pointer;
  }
  /* =========== Chop & blend widget =========== */
  .hk-word{min-height:70px; display:flex; align-items:center; gap:4px; flex-wrap:wrap; justify-content:center;}
  .hk-whole{font-size:52px; font-weight:900; letter-spacing:3px;}
  .hk-l{font-size:46px; font-weight:900; animation:pop .4s both;}
  .hk-l.v{color:var(--red);}
  .hk-l.c{color:var(--blue);}
  .hk-sep{font-size:30px; color:var(--muted); font-weight:700; margin:0 3px;}
  /* =========== Balloon word widget =========== */
  .bl-balloons{font-size:34px; letter-spacing:4px; min-height:44px;}
  .bl-word{font-size:44px; font-weight:900; letter-spacing:6px; min-height:56px; display:flex; align-items:center;}
  .bl-msg{min-height:26px; font-size:17px; font-weight:800;}
  .bl-msg.win{color:var(--green);}
  .bl-msg.lose{color:var(--red);}
  .bl-kbd button:disabled{cursor:default;}
  /* =========== Anchor words widget =========== */
  .an{flex:1; min-height:0; display:flex; flex-direction:column;}
  .an-hint{
    flex:none; font-size:11.5px; font-weight:700; color:var(--muted);
    padding:6px 10px; background:var(--surface-2); border-bottom:1px solid var(--line);
  }
  /* bibliotheekknoppen: bewaar (💾) en verkenner (🗂) rechtsboven op de stage */
  .an{position:relative;}
  .an-tools{position:absolute; top:34px; right:8px; z-index:3; display:flex; gap:6px;}
  .an-tools button{
    border:1px solid var(--line); background:var(--surface); border-radius:10px;
    width:34px; height:34px; cursor:pointer; font-size:15px; opacity:.85;
  }
  .an-tools button:hover{opacity:1; border-color:var(--blue);}
  .an-stage{flex:1; min-height:0; position:relative; overflow:hidden; background:var(--surface); cursor:grab; touch-action:none;}
  .an-stage:active{cursor:grabbing;}
  .an-layer{position:absolute; inset:0;}
  .an-cell{
    position:absolute; width:128px; height:56px; border-radius:12px; border:2px dashed #dbe4f0;
    display:flex; align-items:center; justify-content:center; gap:6px; font-weight:800; font-size:15px;
    color:var(--ink); padding:2px 8px; overflow:hidden; text-align:center; cursor:pointer;
  }
  .an-cell:hover{border-color:#b6c6dc;}
  .an-cell.filled{border-style:solid; border-color:#cdd7e4; background:var(--surface); box-shadow:0 3px 8px rgba(30,50,90,.12);}
  .an-cell.root{border:2.5px solid #d9a400; background:#fff8dd;}
  .an-cell.root.filled{background:var(--yellow); font-size:16px;}
  .an-cell input{width:100%; border:none; outline:none; font:inherit; text-align:center; background:transparent;}
  .an-word{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;}
  .an-pic{
    flex:none; width:22px; height:22px; display:flex; align-items:center;
    justify-content:center; font-size:16px; line-height:1;
  }
  .an-pic img{width:100%; height:100%; object-fit:contain;}
  /* geen automatisch plaatje (nog) - lege, klikbare plek i.p.v. een nep-ankersymbool,
     dient als snelkoppeling naar de plaatjeskiezer */
  .an-pic-empty{
    border:1.5px dashed #cdd7e4; border-radius:6px; cursor:pointer; opacity:.6;
    transition:opacity .15s, border-color .15s;
  }
  .an-pic-empty:hover{opacity:1; border-color:var(--blue);}
  .an-dot{
    position:absolute; right:4px; bottom:4px; width:15px; height:15px; border-radius:50%;
    border:1.5px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.3); cursor:pointer; padding:0;
    opacity:.55; transition:opacity .15s;
  }
  .an-cell:hover .an-dot{opacity:1;}
  body.hc .an-cell{border-color:#555; color:#000;}
  /* =========== Dice widget =========== */
  .dc{flex:1; min-height:0; display:flex; flex-direction:column; gap:10px; padding:12px; align-items:center;}
  .dc-row{flex:1; display:flex; gap:14px; align-items:center; justify-content:center; flex-wrap:wrap; cursor:pointer;}
  .die{
    width:92px; height:92px; background:var(--surface); border:3.5px solid var(--ink); border-radius:18px;
    display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr);
    padding:10px; box-shadow:0 5px 0 rgba(0,0,0,.15);
  }
  .die.rolling{animation:shake .3s infinite;}
  .die i{width:16px; height:16px; border-radius:50%; background:var(--ink); place-self:center; visibility:hidden;}
  .die i.on{visibility:visible;}
  .dc-sum{font-size:22px; font-weight:900; min-height:28px;}
  /* =========== Traffic light widget =========== */
  .tl{flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:14px;}
  .tl-house{width:min(100%,390px); background:#22272f; border-radius:26px; padding:14px; display:flex; flex-direction:column; gap:9px; box-shadow:0 10px 26px rgba(0,0,0,.35);}
  .tl-lamp{
    width:70px; height:70px; flex:none; border-radius:50%; border:4px solid rgba(255,255,255,.13); cursor:pointer;
    opacity:.22; transition:all .2s; padding:0;
  }
  .tl-lamp.red{background:#e33; color:#e33;}
  .tl-lamp.orange{background:#f5a623; color:#f5a623;}
  .tl-lamp.green{background:#2ecc71; color:#2ecc71;}
  .tl-lamp.on{opacity:1; box-shadow:0 0 46px currentColor;}
  .tl-option{display:flex;align-items:center;gap:15px;color:#fff}.tl-option>span{display:flex;flex-direction:column;gap:2px}.tl-option strong{font-size:18px}.tl-option small{color:#cbd3df;font-size:13px;font-weight:700}.tl-status{min-height:25px;color:var(--ink);font-size:17px;font-weight:900;text-align:center}
  .tl-mini{padding:12px 10px; gap:10px; border-radius:20px;}
  .tl-mini .tl-lamp{width:62px; height:62px;}
  /* =========== Name picker widget =========== */
  .np{flex:1; min-height:0; display:flex; flex-direction:column; gap:10px; padding:12px;}
  .np textarea{
    flex:1; min-height:0; border:1px solid var(--line); border-radius:12px; padding:10px;
    font:inherit; font-size:14.5px; resize:none; outline:none;
  }
  .np-result{
    min-height:72px; display:flex; align-items:center; justify-content:center;
    font-size:32px; font-weight:900; color:#fff; text-align:center; padding:8px 12px;
    background:linear-gradient(135deg,var(--blue),var(--purple));
    border-radius:18px; position:relative; overflow:hidden;
    text-shadow:0 2px 6px rgba(0,0,0,.3); letter-spacing:1px;
  }
  .np-result.spin{animation:npspin .25s infinite; background:linear-gradient(135deg,var(--orange),var(--red));}
  .np-result.winner{animation:pop .45s;}
  @keyframes npspin{0%,100%{transform:scale(1) rotate(-1deg);} 50%{transform:scale(1.04) rotate(1deg);}}
  .np-row{display:flex; gap:10px; align-items:center; flex:none;}
  .np-row label{font-size:13px; font-weight:700; color:var(--muted); display:flex; gap:5px; align-items:center; margin-left:auto;}
  .np-progress{margin:-3px 0;color:var(--muted);font-size:12px;font-weight:900;text-align:center}
  /* gallery categories */
  .gcat-title{font-size:13.5px; font-weight:800; color:var(--muted); margin:16px 0 8px; text-transform:uppercase; letter-spacing:.5px;}
  .gcat-title:first-child{margin-top:0;}
  /* =========== Timer widget =========== */
  .timer{display:flex; flex-direction:column; align-items:center; flex:1; min-height:0; gap:10px; padding:14px;}
  .tstage{
    flex:1; min-height:0; width:100%; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:8px;
  }
  .topts{display:flex; justify-content:space-between; align-items:center; width:100%; flex:none;}
  .tseg{display:flex; background:var(--surface-2); border-radius:999px; padding:3px; gap:2px;}
  .tseg button{border:none; border-radius:999px; background:transparent; padding:6px 12px; font-size:15px; cursor:pointer; line-height:1; color:var(--muted);}
  .tseg button.on{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-1);}
  .mm-seg button{font:inherit; font-weight:700; font-size:13px;}
  .ticon{border:none; background:var(--surface-2); border-radius:var(--radius); padding:7px 11px; font-size:15px; cursor:pointer; line-height:1;}
  .ticon.on{background:var(--accent-soft); color:var(--accent-ink);}
  .timer .tpie{
    flex:1 1 0; min-height:80px; aspect-ratio:1/1; width:auto; max-width:100%; max-height:220px;
    display:none; cursor:grab; touch-action:none;
  }
  .timer .tpie:active{cursor:grabbing;}
  .timer.m-pie .tpie,.timer.m-both .tpie{display:block;}
  .timer .tdisp{font-size:46px; font-weight:900; font-variant-numeric:tabular-nums; flex:none;}
  .timer.m-both .tdisp{font-size:26px;}
  .timer.m-pie .tdisp{font-size:17px; color:var(--muted);}
  .timer .tdisp.warn{color:var(--red); animation:blink 1s infinite;}
  @keyframes blink{50%{opacity:.35;}}
  .timer .trow{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; flex:none;}
  .thint{flex:none;}
  .timer .presets button{
    border:none; border-radius:999px; padding:6px 13px; background:var(--surface-2); font:inherit;
    font-weight:800; font-size:12.5px; color:var(--muted); cursor:pointer;
  }
  .timer .presets button:hover{background:var(--surface-3); color:var(--ink);}
  .timer .main button{
    border:none; border-radius:12px; padding:10px 26px; font:inherit; font-weight:800;
    font-size:15.5px; cursor:pointer; background:var(--surface-2); color:var(--ink);
  }
  .timer .main .bstart{background:var(--green); color:#fff; min-width:110px;}
  .thint{font-size:11.5px; color:var(--muted); text-align:center; line-height:1.4;}
  .timer.flash{animation:tflash .5s 4;}
  @keyframes tflash{50%{background:#fdeaa0;}}

/* ---------- login-extra's (school, koppelcode) ---------- */
#liSchool{
  width:100%; border:1px solid var(--line); border-radius:var(--radius);
  height:var(--control-h); padding:0 12px; color:var(--ink);
  font:inherit; font-size:15px; outline:none; margin-bottom:10px; background:var(--surface);
}
.lisub{font-size:13px; font-weight:700; color:var(--muted); margin-bottom:8px;}
#ownPwBlock .lrow{margin-bottom:10px;}
#ownPwBlock input{flex:1; min-width:0;}

/* systeemmanager: veilige voorbeeldweergave van vaste rollen */
.vw-role-block[hidden],#rolePreviewBanner[hidden],#rolePreviewTeacherActions[hidden]{display:none}
.vw-role-block{margin-bottom:8px;padding:10px 12px;border:1px solid var(--accent-soft);border-radius:12px;background:var(--surface-2)}
.vw-role-block .vw-row{align-items:flex-start;padding-top:0}.vw-role-seg{flex-wrap:wrap;justify-content:flex-end;max-width:min(620px,72%)}
.vw-role-note{margin-top:7px}
#rolePreviewBanner{position:fixed;top:calc(var(--tbar) + 8px);left:50%;z-index:5700;display:flex;align-items:center;gap:8px;transform:translateX(-50%);padding:7px 9px 7px 12px;border:1px solid var(--orange);border-radius:999px;background:var(--surface);box-shadow:var(--shadow-2);font-size:12px}
#rolePreviewBanner span{font-weight:800;color:var(--orange)}#rolePreviewBanner button{border:0;border-radius:999px;padding:5px 9px;background:color-mix(in srgb,var(--orange) 16%,var(--surface));color:var(--ink);font:inherit;font-weight:800;cursor:pointer}
#rolePreviewTeacherActions{display:flex;align-items:center;gap:5px}
#rolePreviewTeacherActions button{background:var(--accent);color:#fff}
#rolePreviewTeacherActions button:hover,#rolePreviewTeacherActions button:focus-visible{filter:brightness(1.08);outline:2px solid var(--accent-soft);outline-offset:1px}
.role-preview-note{max-width:760px;margin:0 auto 14px;padding:11px 14px;border:1px solid var(--orange);border-radius:12px;background:color-mix(in srgb,var(--orange) 16%,var(--surface));color:var(--ink);font-size:13px;line-height:1.45}
body.role-preview-active #parentView button:disabled,body.role-preview-active #parentView input:disabled,body.role-preview-active #parentView select:disabled{opacity:.55;cursor:not-allowed}
body.role-preview-pupil #pupilView .widget-body{pointer-events:none;user-select:none}

.role-preview-note .role-preview-add-widget{display:flex;margin-top:9px}
.role-preview-widget-picker{width:min(760px,94vw);max-height:88vh;overflow:auto}
.role-preview-widget-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:12px}
.role-preview-widget-card{width:100%;display:grid;grid-template-columns:50px minmax(0,1fr);align-items:center;gap:10px;padding:11px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);text-align:left;cursor:pointer}
.role-preview-widget-card:hover,.role-preview-widget-card:focus-visible{border-color:var(--accent);outline:2px solid var(--accent-soft)}
.role-preview-widget-card .gi{font-size:30px;text-align:center}.role-preview-widget-card>span:last-child{min-width:0}.role-preview-widget-card .gn,.role-preview-widget-card .gd{display:block}.role-preview-widget-card .gd{margin-top:3px;color:var(--muted);font-size:11px;line-height:1.35}
body.role-preview-updating #board{visibility:hidden}
@media(max-width:560px){.role-preview-widget-grid{grid-template-columns:1fr}}
body.tb-left #rolePreviewBanner,body.tb-right #rolePreviewBanner{top:8px}
@media(max-width:720px){.vw-role-block .vw-row{align-items:stretch;flex-direction:column}.vw-role-seg{max-width:none;justify-content:flex-start}#rolePreviewBanner{max-width:calc(100vw - 24px);flex-wrap:wrap;justify-content:center;border-radius:16px;white-space:nowrap}#rolePreviewBanner strong{display:none}#rolePreviewTeacherActions{order:3;width:100%;justify-content:center}}

/* ---------- weergave-instellingen (tabblad "Weergave") ---------- */
.vw-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-height:var(--control-h); padding:7px 0; border-bottom:1px solid var(--line);
}
.vw-row:last-of-type{border-bottom:none;}
.vw-lbl{font-weight:700; font-size:14.5px;}
.seg{display:flex; background:var(--surface-2); border-radius:999px; padding:3px; gap:2px; flex:none;}
.seg button{
  border:none; border-radius:999px; padding:6px 13px; font:inherit; font-weight:700;
  cursor:pointer; background:transparent; color:var(--muted); font-size:13.5px;
}
.seg button.active{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-1);}
/* ---------- beheerpaneel (tabblad "Beheer" binnen Instellingen) ----------
   alle velden/knoppen in een rij zijn even hoog: var(--control-h) */
.am-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;}
.am-head h2{margin:0; font-size:20px;}
.am-h3{margin:14px 0 6px; font-size:14px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px;}
/* School/Klassen/Gebruikers staan nu na elkaar in één tabblad i.p.v. drie
   losse - wat lucht onder elk blok zodat de volgende kop niet knelt, en een
   duidelijke scheidingslijn zodra er een nieuwe sectie begint (alleen ná een
   sectie, dus niet boven de allereerste kop van de pagina) */
.am-section{margin-bottom:14px;}
.am-section + .am-h3{margin-top:22px; padding-top:16px; border-top:1px solid var(--line);}

/* ---- "School" drill-down navigator: tegel-overzicht -> gefocust detail ---- */
.am-nav-header{display:flex; gap:8px; margin-bottom:12px;}
.am-nav-header .am-filter{flex:1;}
.am-crumb-back{
  background:none; border:none; color:var(--accent-ink); font-weight:700;
  font-size:14px; cursor:pointer; padding:8px 6px; font:inherit; border-radius:8px;
}
.am-crumb-back:hover{background:var(--surface-2);}
.am-stat-strip{display:flex; gap:10px; margin-bottom:14px;}
.am-stat{flex:1; background:var(--surface-2); border-radius:var(--radius-s); padding:8px 10px; text-align:center;}
.am-stat b{display:block; font-size:18px; font-variant-numeric:tabular-nums;}
.am-stat span{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.3px;}
.am-tilegrid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:6px;}
.am-tilegrid > .am-add-wrap{grid-column:1 / -1;}
.am-tile{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:12px 14px; text-align:left; cursor:pointer; font:inherit; color:var(--ink);
  display:flex; flex-direction:column; gap:8px;
}
.am-tile:hover{background:var(--surface-2);}
.am-tile-name{font-weight:700; font-size:14.5px;}
.am-tile-chips{display:flex; flex-wrap:wrap; gap:5px;}
.am-tile.wide{grid-column:1 / -1; flex-direction:row; align-items:center; justify-content:space-between;}
.am-tile.warn{border-color:color-mix(in srgb, var(--orange) 45%, var(--line));}
.am-tile .am-chip.flag{background:var(--orange); color:#1d1200; border-color:transparent;}
.am-tile.add{
  border-style:dashed; border-color:var(--accent); color:var(--accent-ink); background:var(--accent-soft);
  align-items:center; justify-content:center; flex-direction:row; font-weight:700;
}
.am-kebab-row{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; gap:8px;}
.am-nav-title{font-family:"Quicksand","Segoe UI Rounded",ui-rounded,sans-serif; font-size:17px; margin:0;}
.am-kebab{
  border:1px solid var(--line); background:var(--surface); border-radius:999px;
  width:32px; height:32px; cursor:pointer; color:var(--muted); font-size:16px; flex:none;
}
.am-kebab:hover{background:var(--surface-2);}
.am-kebab-panel{
  background:var(--surface-2); border-radius:var(--radius-s); padding:10px;
  margin-bottom:14px; display:flex; flex-direction:column; gap:8px;
}
.am-section-label{
  font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
  color:var(--muted); margin:14px 0 6px;
}
.am-person,.am-target{cursor:pointer;}
.am-person-info{flex:1; display:flex; flex-direction:column; min-width:0; gap:1px;}
.am-person-info .am-name{font-size:14px;}
.am-person-info .am-role{font-size:11.5px; color:var(--muted); font-weight:600;}
.am-sheet-backdrop{position:fixed; inset:0; background:rgba(15,22,38,.4); z-index:60; display:none;}
.am-sheet-backdrop.open{display:block;}
/* de Cast-sheet opent vanaf het bord zelf (buiten Instellingen om), dus moet
   boven de zwevende pen-HUD (#hud, z-index 5500) uitkomen - zelfde laag als
   .modalwrap (6000), niet de 60 die volstaat zodra je al in Instellingen zit */
#castBackdrop{z-index:6000;}
.am-sheet{
  position:absolute; left:0; right:0; bottom:0; max-width:520px; margin:0 auto;
  background:var(--surface); border-radius:18px 18px 0 0; padding:16px 18px 24px;
  max-height:82vh; overflow-y:auto; box-shadow:var(--shadow-2);
}
@media (min-width:560px){
  .am-sheet{border-radius:var(--radius-l); bottom:auto; top:50%; transform:translateY(-50%); max-height:76vh;}
}

.am-msg{
  min-height:20px; font-size:13.5px; font-weight:700; color:var(--green); margin:4px 0;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
/* vaste schoolkiezer voor de systeemmanager, boven alle beheer-tabs */
.am-schoolbar{
  display:flex; align-items:center; gap:8px; margin:0 0 10px;
  padding:8px 10px; background:var(--surface-2); border-radius:12px;
}
.am-schoolbar-lbl{font-size:16px;}
.am-schoolbar .am-sel{flex:1; min-width:0;}
/* de dichtgeklapte "＋ ..."-knop hoort rechts, niet als volle-breedte-rij
   links uitgelijnd zoals een gebruikersrij - dat maakt meteen duidelijk dat
   het om een aparte actie gaat, niet om nóg een item in de lijst. Eenmaal
   uitgeklapt neemt het formulier zelf wél de volle breedte (align-self niet
   gezet op .am-add, dus terug naar de stretch van de kolom-flex hierboven). */
.am-add-wrap{display:flex; flex-direction:column;}
.am-add-wrap > .tbtn{align-self:flex-end;}
/* een uitgeklapt toevoegformulier moet nooit op een bestaande-gebruikersrij
   lijken: duidelijk eigen kader (accentkleur, stippellijn) i.p.v. de neutrale
   achtergrond van .am-row/.am-row-tools, plus een titel die herhaalt wát je
   aan het toevoegen bent zodra de knoptekst zelf uit beeld is. */
.am-add{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:8px 0;
  background:var(--accent-soft); border:1.5px dashed var(--accent);
  border-radius:var(--radius); padding:10px;
}
.am-add-title{
  flex:1 1 100%; font-weight:800; font-size:12.5px; color:var(--accent-ink);
  text-transform:uppercase; letter-spacing:.4px;
}
.am-inp,.am-sel,.am-pw{
  border:1px solid var(--line); border-radius:var(--radius); height:var(--control-h);
  padding:0 11px; font:inherit; font-size:14px; outline:none;
  background:var(--surface); color:var(--ink); min-width:0;
}
.am-inp:focus,.am-sel:focus,.am-pw:focus{border-color:var(--accent);}
/* de generieke settings-input-regel (width:100%/marge) geldt niet in het beheerpaneel:
   daar bepalen de am-*-regels de maat, zodat alles in een rij gelijk uitlijnt */
#settingsModal #adminModal input{margin-bottom:0;}
.am-inp{flex:1; min-width:140px;}
.am-pw{width:120px;}
.am-list{display:flex; flex-direction:column; gap:5px;}
.am-group{font-weight:700; font-size:13px; margin-top:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px;}
/* inklapbare groepskop (leerlingen per klas): klikbaar, pijltje in de tekst */
.am-group-toggle{cursor:pointer; user-select:none;}
.am-group-toggle:hover{color:var(--ink);}
/* formulier-fout direct bij het formulier zelf */
.am-form-err{width:100%; min-height:0; color:var(--red); font-size:13px; font-weight:700;}
/* Systeem-tab: schoolrij duidelijk zwaarder dan de beheerder-subrijen */
.am-row-school{background:var(--accent-soft);}
.am-row-school > .am-name{font-size:15px;}
.am-row-sub{
  margin-left:22px; background:var(--surface);
  border-left:3px solid var(--line); border-radius:var(--radius-s);
}
/* uitklapbaar gereedschapsblok per gebruikersrij (achter het ✏-knopje) */
.am-row-tools{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap; width:100%;
  margin-top:6px; padding-top:8px; border-top:1px dashed var(--line);
}
.am-edit{
  border:none; background:transparent; border-radius:8px; cursor:pointer;
  font-size:14px; padding:4px 8px; opacity:.6;
}
.am-edit:hover{opacity:1; background:var(--surface-3);}
.am-edit.on{opacity:1; background:var(--accent-soft);}
/* uniforme maat: álle knoppen en velden in het beheer op controlhoogte,
   zodat formulieren en actieknoppen in elke rij gelijk uitlijnen */
#adminModal .tbtn{
  min-height:var(--control-h); height:var(--control-h);
  padding:0 14px; font-size:14px;
}
/* één interactiesysteem: mini-label boven elk veld/select/knopgroep */
.am-field{display:flex; flex-direction:column; gap:3px; min-width:0;}
.am-field-lbl{
  font-size:10.5px; font-weight:800; color:var(--muted);
  text-transform:uppercase; letter-spacing:.4px;
}
/* de rij-flexregels van .am-inp (flex-basis 0/100%) gelden binnen de
   kolom-flex van het label verticaal en drukten het veld plat - binnenin
   een veldlabel dus altijd de vaste controlhoogte, breedte via het label */
.am-field > .am-inp, .am-field > .am-sel, .am-field > .am-pw, .am-field > .am-inline,
.am-field > .am-classes, .am-field > .am-actions{flex:none; width:100%;}
.am-add .am-field{flex:1 1 100%;}
.am-row-tools .am-field{flex:0 1 auto; min-width:150px;}
.am-inline{display:flex; gap:6px; align-items:center;}
.am-inline > .am-inp, .am-inline > .am-pw{flex:1 1 auto; min-width:0;}

.learning-profile-badge{
  margin:8px 10px 0;padding:6px 10px;border-radius:10px;
  background:color-mix(in srgb,var(--accent) 12%,var(--surface));
  color:var(--muted);font-size:12px;font-weight:700;line-height:1.3;
}
.learning-level-card{
  margin:10px 0;padding:12px;border:1px solid var(--line);border-radius:12px;
  background:var(--surface-2);
}
.learning-level-card h3{margin:0 0 6px;}
.learning-level-card .guestnote{margin:4px 0 10px;}
.learning-source-note{margin-top:14px;}
.parent-levels{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:8px;}
.parent-levels .learning-level-card{margin:0;}
.learning-level-summary{margin:8px 0 0;}
.managed-learning-level .lg-levels,
.managed-learning-level .clock-level-control,
.managed-learning-level .place-level-control,
.managed-learning-level .money-level-control{display:none;}
/* niveau kan ook als tandwielveld staan (gearField/field rond .lg-levels) -
   dan moet het hele label (incl. "Niveau"-tekst) verdwijnen, niet alleen de
   knoppenrij erin, anders blijft er een lege regel in het tandwielpaneel over */
.managed-learning-level .edu-controls label:has(.lg-levels){display:none;}
.board-learning-level{display:grid;grid-template-columns:auto auto minmax(130px,1fr);align-items:end;gap:8px;padding:8px 10px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--accent) 7%,var(--surface));font-size:11px}
.board-learning-level label{display:grid;gap:3px;color:var(--muted);font-weight:800}
.board-learning-select{min-width:104px;border:1px solid var(--line);border-radius:8px;padding:6px 8px;background:var(--surface);color:var(--ink);font:inherit;font-weight:750}
.board-learning-summary{align-self:center;overflow:hidden;color:var(--muted);font-weight:700;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:620px){.board-learning-level{grid-template-columns:1fr 1fr}.board-learning-summary{grid-column:1/-1}.board-learning-select{width:100%;min-width:0}}
@media(max-width:620px){.learning-level-card .am-inline{align-items:stretch;flex-direction:column;}}
/* gevaarlijke acties: afwijkende kleur + tweede klik als bevestiging */
.am-btn.am-danger{background:var(--red-soft); color:var(--red); font-weight:800;}
.am-btn.am-danger.armed{background:var(--red); color:#fff;}
/* credential-resultaat direct bij de gebruikersrij */
.am-result{
  display:flex; align-items:center; gap:8px; width:100%;
  background:var(--accent-soft); color:var(--accent-ink);
  border-radius:10px; padding:8px 12px; font-weight:800;
}
.am-result code{font-size:16px; letter-spacing:.5px;}
.am-row{
  display:flex; gap:8px; align-items:center; background:var(--surface-2);
  border-radius:var(--radius); padding:7px 10px; flex-wrap:wrap;
}
.am-name{font-weight:700; font-size:14px; flex:1; min-width:120px;}
.am-role{font-size:12px; font-weight:700; color:var(--muted);}
.am-code{font-size:12.5px; font-weight:700; color:var(--orange);}
.am-actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.am-btn,.am-copy{
  background:var(--surface); border-radius:var(--radius);
  height:var(--control-h); padding:0 12px; border:1px solid var(--line);
  font:inherit; font-weight:700; font-size:12.5px; cursor:pointer; color:var(--ink); line-height:1;
}
.am-btn:hover,.am-copy:hover{background:var(--surface-3);}
/* actieve knop in een keuzerij (vakgebied-tabs in Klassenmanagement/Voortgang) -
   ontbrak nog, waardoor niet te zien was welk vakgebied geselecteerd was. */
.am-btn.active{border-color:var(--accent); background:var(--accent-soft); color:var(--accent-ink);}
.am-del{
  border:1px solid var(--line); background:var(--red-soft); border-radius:var(--radius);
  width:var(--control-h); height:var(--control-h); cursor:pointer; font-size:13px; flex:none;
}
.am-del:hover{background:var(--red);}
.am-classes{display:flex; gap:6px; flex-wrap:wrap; align-items:center;}
.am-chip{
  display:inline-flex; gap:6px; align-items:center; background:var(--surface);
  border:1px solid var(--line); border-radius:999px; padding:5px 12px;
  font-weight:700; font-size:13px;
}
button.am-chip{cursor:pointer; color:var(--muted);}
button.am-chip.on{border-color:var(--accent); background:var(--accent-soft); color:var(--accent-ink);}
.am-chip.active{border-color:var(--green); background:color-mix(in srgb, var(--green) 15%, var(--surface)); color:var(--green);}
.am-chipx{border:none; background:transparent; color:var(--red); font-weight:900; cursor:pointer; padding:0; font-size:11px;}
.am-reset{
  background:var(--surface-2); border:1px solid var(--line); border-radius:12px;
  padding:10px 12px; margin:6px 0; display:flex; flex-direction:column; gap:8px;
}
.am-reset-head{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.am-reset-list{display:flex; flex-direction:column; gap:5px; max-height:260px; overflow:auto;}
.am-reset-row{
  display:flex; gap:8px; align-items:center; background:var(--surface);
  border-radius:8px; padding:5px 8px; flex-wrap:wrap;
}
.am-reset-pw{font-weight:800; font-family:monospace; font-size:13px; color:var(--green);}
body.hc .am-row,body.hc .am-chip{border:1.5px solid #000; background:var(--surface);}
body.hc .am-reset,body.hc .am-reset-row{border:1.5px solid #000; background:var(--surface);}

/* ============================================================
   Mobiel & tablet: responsieve aanpassingen. Alles hieronder is
   additief - de bovenstaande desktopstijl blijft de standaard.
   ============================================================ */

/* ---------- tablet (≤1024px) ---------- */
@media (max-width:1024px){
}

/* ---------- telefoon (≤600px) ---------- */
@media (max-width:600px){
  #toolbar{padding:0 8px; gap:6px; overflow-x:auto;}
  /* alleen de uil op kleine schermen, woordmerk verdwijnt */
  .logo-word{display:none;}
  .tbtn{padding:0 10px; font-size:13px;}
  /* de balk moet écht passen: zonder dit vielen 💾 Opslaan en ⚙ Instellingen
     buiten beeld en zat 🖼 (afbeeldingscatalogus) precies onder de duim -
     elke mis-tik opende dan het schermvullende afbeeldingenscherm. De
     tekstzoom (A−/A＋) is toegankelijkheid en blijft dus zichtbaar; alleen
     het percentage, de catalogusknop (blijft via ＋-menu bereikbaar) en
     volledig scherm verdwijnen, en opslaan toont alleen 💾. */
  #zoomPct,#btnImages,#btnFs{display:none;}
  #btnSave span{display:none;}
  #btnSave{min-width:0;}
  #userLbl{display:inline-block; max-width:96px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom;}
  /* tekenbalk en zwevende knoppen deelden op een telefoon de onderrand en
     lagen over elkaar heen: wissen/sluiten op de tekenbalk raakten dan de
     ＋- of bordenknop, waardoor "steeds" het bordenpaneel of ＋-menu
     (→ afbeeldingenscherm) opende. Nu ligt de tekenbalk in een eigen laag
     bóven de knoppenrij (hij groeit omhoog, dus dit klopt bij elke
     schermbreedte), en houden ＋ en borden de onderrand voor zichzelf.
     Gecentreerd op inhoudsbreedte (geen vaste randen), zodat de balk
     geminimaliseerd ook echt smal is. */
  #hud{bottom:88px; max-width:calc(100vw - 16px);}

  /* beheerpaneel: dichte rijen worden gestapeld i.p.v. verdrukt */
  .am-row{flex-direction:column; align-items:stretch;}
  .am-row .am-pw{width:100%;}
  .am-row .am-actions{display:flex; flex-direction:row; justify-content:flex-end; gap:6px;}
  .am-reset-row{flex-direction:column; align-items:stretch;}
  .am-add .am-inp{flex:1 1 100%;}
}

/* ---------- aanraakschermen (los van breedte) ---------- */
@media (pointer:coarse){
  /* alle controls (ook invoervelden) groeien mee naar tikformaat */
  :root{--control-h:44px;}
  .hud-btn{width:var(--tap-sm); height:var(--tap-sm); font-size:15px;}
  #penbar .wp-group button{width:var(--tap-sm); height:var(--tap-sm);}
  #hud.vert{width:104px;}
  #hud.vert #penbar .wp-group{grid-template-columns:repeat(2,36px);}
  .am-chip{padding:7px 14px;}
  .am-chipx{padding:4px;}
  /* geen hover op aanraakschermen: de greep moet altijd zichtbaar zijn */
  .widget-rs{opacity:.7; width:38px; height:38px;}
}

/* ============================================================
   Menubalk-positie: links of rechts (Weergave-instelling).
   De balk wordt een verticale kolom; bord en zwevende elementen
   schuiven mee via dezelfde body-class.
   ============================================================ */
body.tb-left #toolbar,body.tb-right #toolbar{
  top:0; bottom:0; width:var(--tbar); height:auto;
  flex-direction:column; padding:12px 0; gap:10px;
  overflow-y:auto; overflow-x:hidden;
}
body.tb-left #toolbar{left:0; right:auto; border-right:1px solid var(--line); border-bottom:none;}
body.tb-right #toolbar{right:0; left:auto; border-left:1px solid var(--line); border-bottom:none;}
body.tb-left .logo-word,body.tb-right .logo-word,
body.tb-left #verTag,body.tb-right #verTag,
body.tb-left #btnSave span,body.tb-right #btnSave span,
body.tb-left #userLbl,body.tb-right #userLbl{display:none;}
body.tb-left #toolbar .tbtn,body.tb-right #toolbar .tbtn{padding:0; width:var(--control-h); min-width:0; flex:none;}
body.tb-left #btnSave,body.tb-right #btnSave{min-width:0;}
body.tb-left #zoomPct,body.tb-right #zoomPct{min-width:0; font-size:11.5px;}
body.tb-left #board,body.tb-left #pupilView{inset:0 0 0 var(--tbar);}
body.tb-right #board,body.tb-right #pupilView{inset:0 var(--tbar) 0 0;}
body.tb-right #fab{right:calc(var(--tbar) + 16px);}
body.tb-right #fabBoardsBtn{right:calc(var(--tbar) + 88px);}
body.tb-right #boardStrip{right:calc(var(--tbar) + 12px);}
body.tb-left #fabmenu{right:24px;}
body.tb-right #fabmenu{right:calc(var(--tbar) + 16px);}

/* ============================================================
   Weergave-instelling "glas-effect uit": ondoorzichtige panelen
   i.p.v. blur - rustiger en lichter voor oudere digiborden.
   ============================================================ */
body.no-glass .widget,body.no-glass #hud,body.no-glass .fab-item,
body.no-glass #boardStrip,body.no-glass .mm-top,
body.no-glass .widget.bare .widget-head{
  backdrop-filter:none; -webkit-backdrop-filter:none;
  background:var(--surface);
}
body.no-glass .widget-head{background:var(--surface-2);}

/* ============================================================
   Donker thema: bord-achtergrondpatronen en glas-laag.
   (De chrome-laag volgt automatisch via de tokens in body.dark.)
   ============================================================ */
body.dark #board.bg-dots{background-image:radial-gradient(circle,#2c3a5e 1.4px,transparent 1.4px);}
body.dark #board.bg-lines{background-image:repeating-linear-gradient(#0000 0 39px,#2c3a5e 39px 40px);}
body.dark #board.bg-write{background-image:repeating-linear-gradient(
  #0000 0 19px,#243052 19px 20px,#0000 20px 39px,#3a4a70 39px 40.5px,#0000 40.5px 59px,#243052 59px 60px,#0000 60px 79px);}
body.dark #board.bg-grid-s{background-image:
  repeating-linear-gradient(#0000 0 24px,#243052 24px 25px),
  repeating-linear-gradient(90deg,#0000 0 24px,#243052 24px 25px);}
body.dark #board.bg-grid-b{background-image:
  repeating-linear-gradient(#0000 0 49px,#2c3a5e 49px 50px),
  repeating-linear-gradient(90deg,#0000 0 49px,#2c3a5e 49px 50px);}
body.dark .widget{background:var(--glass); border-color:var(--glass-line);}
body.dark .widget:hover,body.dark .widget:focus-within{background:var(--glass-strong); border-color:rgba(255,255,255,.14);}
body.dark .widget-head{background:rgba(255,255,255,.04); border-bottom-color:rgba(255,255,255,.08);}
body.dark #hud{background:var(--glass); border-color:var(--glass-line);}
body.dark .fab-item{background:var(--glass-strong); color:var(--ink);}
body.dark .fab-item:hover{background:var(--surface-3);}
body.dark #boardStrip{background:var(--glass-strong); border-color:var(--glass-line);}
body.dark .widget.bare .widget-head{background:var(--glass-strong);}
body.dark .mm-top{background:var(--glass-strong);}
body.dark .mm-pop{background:var(--surface); box-shadow:var(--shadow-2);}
body.dark .dock-item{background:var(--surface-2); color:var(--ink);}
body.dark .dock-item:hover{background:var(--surface-3);}
body.dark .wp-group button.on{background:var(--surface-3); box-shadow:none;}
body.dark .lg-kbd button,body.dark .blok{filter:saturate(.9) brightness(.96);}
body.dark .bs-card canvas{background:#fff;} /* bord-preview blijft de echte (witte) bordkleur tonen */


/* ---------- compacte tekenwerkbalk met selectie-popovers ---------- */
#penbar{flex-wrap:nowrap; gap:4px; overflow:visible;}
.pen-picker{position:relative; flex:none;}
.pen-current{
  width:42px; height:32px; padding:0 5px; border:1px solid transparent; border-radius:9px;
  background:var(--surface-2); color:var(--ink); cursor:pointer; display:flex;
  align-items:center; justify-content:center; gap:3px; font:inherit;
}
.pen-current:hover,.pen-picker.open .pen-current{background:var(--surface-3); border-color:var(--line);}
.pen-current-value{font-size:16px; line-height:1; min-width:18px; text-align:center;}
.pen-caret{font-size:8px; color:var(--muted); transform:rotate(0); transition:transform .15s;}
.pen-picker.open .pen-caret{transform:rotate(180deg);}
.pen-current-color{width:18px; height:18px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.16);}
.pen-current-size{display:block; border-radius:50%; background:var(--ink);}
.pen-current-bg{width:19px; height:19px; display:block; border:1.5px solid #9db6d8; border-radius:4px; background:#fff;}
.pen-current-bg.bg-dots{background-image:radial-gradient(circle,#9db6d8 1px,transparent 1px); background-size:5px 5px;}
.pen-current-bg.bg-lines{background-image:repeating-linear-gradient(#0000 0 4px,#9db6d8 4px 5px);}
.pen-current-bg.bg-write{background-image:repeating-linear-gradient(#0000 0 2px,#c3d5ec 2px 3px,#0000 3px 5px,#6d92c4 5px 6px);}
.pen-current-bg.bg-grid-s{background-image:repeating-linear-gradient(#0000 0 4px,#9db6d8 4px 5px),repeating-linear-gradient(90deg,#0000 0 4px,#9db6d8 4px 5px);}
.pen-current-bg.bg-grid-b{background-image:repeating-linear-gradient(#0000 0 8px,#9db6d8 8px 9px),repeating-linear-gradient(90deg,#0000 0 8px,#9db6d8 8px 9px);}
#penbar .pen-popover{
  display:none; position:absolute; left:50%; bottom:calc(100% + 10px); transform:translateX(-50%);
  z-index:20; width:max-content; max-width:min(300px,calc(100vw - 24px)); padding:7px;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow-2); gap:5px;
}
#penbar .pen-picker.open>.pen-popover{display:flex;}
#penbar .pen-color-popover{width:210px; flex-direction:column; align-items:stretch;}
#penbar .pen-color-popover .wp-group{display:grid; grid-template-columns:repeat(6,28px); background:transparent; padding:0;}
.pen-pop-label{font-size:10px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.45px; margin:2px 2px 0;}
.pen-custom{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:3px; padding-top:7px; border-top:1px solid var(--line); font-size:12px; font-weight:700;}
.pen-custom input{width:34px; height:26px; padding:0; border:0; border-radius:7px; background:transparent; cursor:pointer;}
#hud.vert #penbar .pen-popover{left:calc(100% + 10px); bottom:auto; top:50%; transform:translateY(-50%);}
#hud.vert #penbar .pen-color-popover{display:none;}
#hud.vert #penbar .pen-picker.open>.pen-color-popover{display:flex;}
body.hc #penbar .pen-current,body.hc #penbar .pen-popover{border:2px solid #000;}
@media (max-width:600px),(pointer:coarse){
  #penbar{gap:3px;}
  .pen-current{width:40px; height:36px;}
  #penbar .pen-popover{position:fixed; left:50%; bottom:70px; transform:translateX(-50%);}
}


/* ============================================================
   Nieuwe widgets: verjaardagstaart, getallenlijn en zinsbouwer
   ============================================================ */
/* Verjaardagstaart */
.bd{height:100%; min-height:0; display:grid; grid-template-columns:minmax(180px,220px) 1fr; background:var(--surface);}
.bd-controls{padding:12px; overflow:auto; display:flex; flex-direction:column; gap:8px; background:var(--surface-2); border-right:1px solid var(--line);}
.bd-controls input[type=text],.bd-controls input[type=number],.bd-controls select{
  width:100%; height:36px; border:1px solid var(--line); border-radius:9px; padding:0 9px; background:var(--surface); color:var(--ink); font:inherit; font-size:13px;
}
.bd-controls label{display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12px; font-weight:800; color:var(--muted);}
.bd-controls input[type=range]{width:96px;}.bd-color input{width:42px; height:30px; padding:1px; border:0; background:transparent; cursor:pointer;}
.bd-check{justify-content:flex-start !important;}.bd-party{margin-top:auto; min-height:38px;}
.bd-stage{min-width:0; position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:54px 16px 34px; background:radial-gradient(circle at 50% 20%,#fff 0,var(--surface-2) 72%);}
.bd-title{position:absolute; top:16px; left:12px; right:12px; text-align:center; font-size:clamp(20px,4vw,34px); font-weight:900; color:var(--pink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.bd-cake{width:min(100%,390px); display:flex; flex-direction:column; align-items:center; filter:drop-shadow(0 10px 10px rgba(29,52,97,.18)); z-index:2;}
.bd-layer{height:72px; position:relative; background:var(--cake); border-radius:20px 20px 12px 12px; border-bottom:8px solid color-mix(in srgb,var(--cake),#8b4b2b 18%); box-shadow:inset 0 13px 0 var(--icing); flex:none;}
.bd-layer-1{width:94%;}.bd-layer-2{width:76%;}.bd-layer-3{width:58%;}
.bd-deco{position:absolute; inset:16px 8px auto; text-align:center; color:#fff; font-weight:900; letter-spacing:5px; white-space:nowrap; overflow:hidden; text-shadow:0 1px 2px rgba(0,0,0,.25);}
.bd-deco.sprinkles{color:#fff5a5;}.bd-deco.stars{color:#fff0a8;font-size:18px}.bd-deco.fruit{font-size:17px;letter-spacing:2px;}
.bd-candle-row{position:absolute; left:8%; right:8%; top:-31px; height:34px; display:flex; justify-content:center; align-items:flex-end; gap:3px;}
.bd-candle{display:block; width:5px; height:25px; border-radius:2px; background:repeating-linear-gradient(45deg,#fff 0 3px,var(--blue) 3px 6px); position:relative;}
.bd-candle::before{content:""; position:absolute; width:8px; height:12px; left:-1.5px; top:-12px; border-radius:70% 30% 60% 40%; background:linear-gradient(#fff7a0,var(--orange)); box-shadow:0 0 8px var(--orange);}
.bd-age-badge{position:absolute; right:8%; top:20%; z-index:4; min-width:58px; height:58px; padding:0 10px; border-radius:20px; display:grid; place-items:center; color:#fff; font-size:29px; font-weight:900; transform:rotate(7deg); box-shadow:0 5px 12px rgba(0,0,0,.2); border:3px solid #fff;}
.bd-plate{width:min(94%,420px); height:30px; border-radius:50%; margin-top:-12px; box-shadow:0 8px 12px rgba(29,52,97,.22); z-index:1;}
/* =========== Personage (avatar): schaalbare SVG met anatomische ankerpunten
   en vaste voor-/achterlagen voor haar en accessoires. ====================== */
.avatar-face{display:inline-block; flex:none; overflow:visible;}
.avatar-face.sm{width:24px; height:24px;}
.avatar-face.md{width:44px; height:44px;}
.avatar-face.lg{width:180px; height:180px;}
.avatar-dance-host{isolation:isolate;}
.avatar-dance-stage{position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;pointer-events:none;overflow:hidden;animation:avDanceStage 3.35s ease both;}
.avatar-dance-stage::before{content:"";position:absolute;width:min(70%,260px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 22%,transparent),transparent 68%);}
.avatar-dance-stage .avatar-face{position:relative;width:clamp(92px,34%,150px);height:clamp(92px,55%,150px);filter:drop-shadow(0 10px 8px rgba(29,52,97,.22));transform-box:fill-box;transform-origin:50% 88%;will-change:transform;}
.avatar-dance-stage.av-dance-bounce .avatar-face{animation:avDanceBounce 2.8s cubic-bezier(.36,.07,.19,.97) both;}
.avatar-dance-stage.av-dance-twist .avatar-face{animation:avDanceTwist 2.8s ease-in-out both;}
.avatar-dance-stage.av-dance-spin .avatar-face{animation:avDanceSpin 2.8s cubic-bezier(.4,0,.2,1) both;}
.avatar-dance-stage.av-dance-shuffle .avatar-face{animation:avDanceShuffle 2.8s ease-in-out both;}
.avatar-dance-stage.av-dance-wiggle .avatar-face{animation:avDanceWiggle 2.8s ease-in-out both;}
.avatar-dance-stage.av-dance-robot .avatar-face{animation:avDanceRobot 2.8s steps(2,end) both;}
@keyframes avDanceStage{0%{opacity:0}8%,82%{opacity:1}100%{opacity:0}}
@keyframes avDanceBounce{0%,100%{transform:translateY(0) scale(1)}10%,36%,62%{transform:translateY(5px) scale(1.08,.92)}22%,48%,74%{transform:translateY(-34px) scale(.96,1.04)}86%{transform:translateY(-12px) rotate(5deg)}}
@keyframes avDanceTwist{0%,100%{transform:rotate(0) translateX(0)}12%,36%,60%,84%{transform:rotate(-13deg) translateX(-10px)}24%,48%,72%{transform:rotate(13deg) translateX(10px)}90%{transform:scale(1.08)}}
@keyframes avDanceSpin{0%,10%,100%{transform:rotate(0) scale(1)}20%{transform:translateY(-12px) rotate(-12deg)}62%{transform:translateY(-20px) rotate(372deg) scale(1.08)}78%{transform:translateY(0) rotate(360deg) scale(1)}88%{transform:scale(1.1,.9)}}
@keyframes avDanceShuffle{0%,100%{transform:translateX(0) rotate(0)}12%,36%,60%{transform:translateX(-30px) translateY(-7px) rotate(-7deg)}24%,48%,72%{transform:translateX(30px) translateY(0) rotate(7deg)}82%{transform:translateX(-10px) scale(1.08,.92)}90%{transform:translateX(10px) scale(.96,1.04)}}
@keyframes avDanceWiggle{0%,100%{transform:rotate(0) scale(1)}10%,30%,50%,70%{transform:rotate(-10deg) scale(1.04)}20%,40%,60%,80%{transform:rotate(10deg) scale(1.04)}88%{transform:translateY(-24px) scale(.95,1.08)}94%{transform:translateY(0) scale(1.1,.9)}}
@keyframes avDanceRobot{0%,100%{transform:translate(0) rotate(0)}15%{transform:translateX(-24px) rotate(-8deg)}30%{transform:translateX(-24px) rotate(8deg)}45%{transform:translateY(-26px) scale(1.06)}60%{transform:translateX(24px) rotate(8deg)}75%{transform:translateX(24px) rotate(-8deg)}90%{transform:translateY(-10px) scale(.96,1.08)}}
.avatar-dance-stage.av-dance-reduced{animation:none;}
.avatar-dance-stage.av-dance-reduced .avatar-face{animation:none;transform:none;}
.avatar-editor{display:flex; flex-direction:column; gap:12px; padding:14px; height:100%; min-height:0; overflow:auto;}
.avatar-preview{display:flex; justify-content:center; padding:10px; background:var(--surface-2); border-radius:16px; flex:none;}
.avatar-controls{display:flex; flex-direction:column; gap:10px;}
.avatar-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.avatar-row label{display:flex; flex-direction:column; gap:3px; font-size:11px; font-weight:800; color:var(--muted); flex:1; min-width:110px;}
.avatar-row select{height:36px; border:1px solid var(--line); border-radius:9px; padding:0 8px; background:var(--surface); color:var(--ink); font:inherit;}
.avatar-row input[type=color]{width:44px; height:34px; padding:1px; border:0; background:transparent; cursor:pointer;}
.avatar-species-row{display:flex; gap:8px;}
.avatar-species-row button{flex:1; height:40px; border:2px solid var(--line); border-radius:12px; background:var(--surface); color:var(--ink); font:inherit; font-weight:800; cursor:pointer;}
.avatar-species-row button.active{border-color:var(--accent); background:var(--accent-soft); color:var(--accent-ink);}
.avatar-save-msg{min-height:20px; font-size:12.5px; font-weight:800; color:var(--green); text-align:center;}
/* aanmoedigings-badge naast een goed-antwoord-melding (math.js-pilot) */
.av-cheer{display:inline-flex; vertical-align:middle; margin-left:8px; animation:avCheerBounce .6s ease;}
@keyframes avCheerBounce{0%{transform:scale(.4) translateY(6px); opacity:0;}60%{transform:scale(1.15) translateY(-4px); opacity:1;}100%{transform:scale(1) translateY(0);}}
/* Getallenlijn */
.nlw{height:100%; min-height:0; display:flex; flex-direction:column; gap:11px; padding:14px; background:var(--surface);}
.nlw-settings{display:flex; align-items:end; gap:8px; flex-wrap:wrap;}
.nlw-settings label{font-size:11px; font-weight:800; color:var(--muted); display:flex; flex-direction:column; gap:3px;}
.nlw-settings input,.nlw-settings select{width:72px; height:34px; border:1px solid var(--line); border-radius:9px; padding:0 8px; background:var(--surface); color:var(--ink); font:inherit;}
.nlw-new{margin-left:auto; min-height:34px;}.nlw-playtop{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap}.nlw-task{text-align:center; font-size:clamp(18px,3vw,27px); font-weight:900; color:var(--blue);}.nlw-score{padding:5px 9px;border-radius:999px;background:var(--surface-2);color:var(--muted);font-size:11px;font-weight:900}
.nlw-scroll{flex:1; min-height:115px; overflow-x:auto; overflow-y:hidden; border-radius:14px; background:var(--surface-2); padding:20px 18px 8px;}
.nlw-line{position:relative; min-width:max-content; height:88px; display:flex; align-items:center; padding:0 18px;}
.nlw-line::before{content:""; position:absolute; height:4px; left:18px; right:18px; top:38px; border-radius:4px; background:var(--ink);}
.nlw-tick{width:52px; height:76px; flex:none; border:0; background:transparent; color:var(--ink); position:relative; cursor:pointer; font:inherit; font-weight:800; padding:0;}
.nlw-tick i{position:absolute; width:3px; height:18px; background:var(--ink); top:31px; left:calc(50% - 1.5px);}
.nlw-tick span{position:absolute; top:53px; left:0; right:0; text-align:center; font-size:12px;}
.nlw-tick.selected::before{content:""; position:absolute; width:23px; height:23px; border-radius:50%; background:var(--pink); border:3px solid #fff; left:calc(50% - 14px); top:27px; z-index:2; box-shadow:0 2px 6px rgba(0,0,0,.25);}
.nlw-actions{display:flex; align-items:center; justify-content:center; gap:8px;}.nlw-value{min-width:76px; text-align:center; font-size:28px; font-weight:900; color:var(--pink);}
.nlw-feedback{min-height:24px; text-align:center; font-weight:800;}.nlw-feedback.ok{color:var(--green);}.nlw-feedback.bad{color:var(--red);}
/* Zinsbouwer */
.sb{height:100%; min-height:0; display:flex; flex-direction:column; gap:10px; padding:12px; background:var(--surface);}
.sb-sentence{min-height:72px; border:2px dashed var(--line); border-radius:14px; padding:12px; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:7px; font-size:clamp(17px,3vw,25px); font-weight:900;}
.sb-sentence.empty{color:var(--muted); font-size:14px; font-weight:700;}.sb-part{padding:7px 11px; border-radius:10px;}.sb-part.who{background:#dce9ff;color:#174c9b}.sb-part.does{background:#dcf7e7;color:#176b3a}.sb-part.what{background:#fff0cf;color:#855b00}
.sb-banks{flex:1; min-height:0; overflow:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}.sb-bank{min-width:0; border-radius:12px; padding:9px; background:var(--surface-2);}.sb-bank h3{margin:0 0 7px; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px;}
.sb-chips{display:flex; flex-wrap:wrap; gap:6px;}.sb-chip-wrap{display:inline-flex;align-items:stretch}.sb-chip{border:0; border-radius:999px; padding:7px 10px; font:inherit; font-size:12.5px; font-weight:800; cursor:pointer; text-align:left;}.sb-bank.who .sb-chip{background:#dce9ff;color:#174c9b}.sb-bank.does .sb-chip{background:#dcf7e7;color:#176b3a}.sb-bank.what .sb-chip{background:#fff0cf;color:#855b00}
.sb-chip-wrap .sb-chip{border-radius:999px 0 0 999px}.sb-chip-remove{border:0;border-radius:0 999px 999px 0;padding:0 7px;background:var(--surface-3);color:var(--muted);font-weight:900;cursor:pointer}.sb-chip-remove:hover{background:var(--red-soft);color:var(--red)}
.sb-add,.sb-actions{display:flex; align-items:center; gap:7px; flex-wrap:wrap;}.sb-add select,.sb-add input{height:36px; border:1px solid var(--line); border-radius:9px; padding:0 9px; background:var(--surface); color:var(--ink); font:inherit;}.sb-add input{flex:1; min-width:150px;}.sb-actions{justify-content:flex-end;}.sb-back{font-size:20px;}
body.dark .bd-stage{background:radial-gradient(circle at 50% 20%,var(--surface-2),var(--surface));}
@media(max-width:600px){.bd{grid-template-columns:1fr}.bd-controls{max-height:155px;border-right:0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(2,1fr)}.bd-party{margin-top:0}.sb-banks{grid-template-columns:1fr}.nlw-settings{gap:5px}}

/* Educatieve widgets en compacte widgetbibliotheek */
.gallery-head,.gallery-tools,.gallery-data{display:flex;align-items:center;gap:8px}.gallery-head h2{flex:1}.gallery-tools{position:sticky;top:-24px;z-index:2;background:var(--surface);padding:6px 0 10px}.gallery-tools input{flex:1;height:42px;border:1px solid var(--line);border-radius:12px;padding:0 13px;background:var(--surface);color:var(--ink);font:inherit}.gallery-data{margin:8px 0 14px;flex-wrap:wrap}#galleryTemplates{display:flex;gap:7px;overflow-x:auto;padding:2px 0 8px}.gcat-title{margin:18px 0 8px;font-size:13px;font-weight:900;color:var(--muted);text-transform:uppercase}.gcard{position:relative}.gstar{position:absolute;right:7px;top:7px;border:0;background:transparent;color:var(--orange);font-size:22px;cursor:pointer}.gallery-empty,.edu-empty{text-align:center;color:var(--muted);padding:28px}.widget.locked .widget-rs{display:none}.widget.locked{outline:2px solid var(--accent-soft)}.widget.preview .widget-head{position:absolute;z-index:4;width:100%;opacity:0}.widget.preview:hover .widget-head,.widget.preview:focus-within .widget-head{opacity:1}.widget.preview .widget-rs{display:none}.widget.preview{border-color:transparent;box-shadow:none}.wpreview.on{background:var(--accent-soft);color:var(--accent-ink)}
.edu{height:100%;display:flex;flex-direction:column;background:var(--surface);color:var(--ink)}.edu-settings{flex:none;background:var(--surface-2);border-bottom:1px solid var(--line)}.edu-settings summary{cursor:pointer;padding:9px 12px;font-weight:800;font-size:13px}.edu-controls{display:flex;align-items:end;gap:8px;flex-wrap:wrap;padding:0 12px 10px}.edu-controls label{display:flex;flex-direction:column;gap:3px;font-size:11px;font-weight:800;color:var(--muted)}.edu-controls [hidden]{display:none}.edu-controls input,.edu-controls select,.edu-controls textarea{min-height:34px;border:1px solid var(--line);border-radius:9px;padding:5px 8px;background:var(--surface);color:var(--ink);font:inherit}.edu-controls textarea{height:65px;resize:vertical}.edu-stage{flex:1;min-height:0;overflow:auto;padding:16px;display:flex;align-items:center;justify-content:center}
.fraction-game{width:min(100%,620px);display:flex;flex-direction:column;align-items:center;gap:9px}.fraction-summary{min-height:34px;padding:5px 13px;border-radius:999px;background:var(--surface-2);color:var(--purple);font-size:18px;font-weight:950}.fraction-wall{width:100%;display:flex;flex-direction:column;gap:5px}.fraction-wall>div{display:flex;gap:4px}.fraction-piece{flex:1;min-height:38px;border:2px solid hsl(var(--fraction-hue) 55% 43%);border-radius:7px;background:hsl(var(--fraction-hue) 75% 90%);font-weight:800;color:#20304a;cursor:pointer;transition:transform .12s,filter .12s}.fraction-piece:hover{filter:brightness(.96);transform:translateY(-1px)}.fraction-piece.selected{background:hsl(var(--fraction-hue) 70% 55%);color:#fff}.fraction-clear{align-self:flex-end;min-height:34px}
.place-grid{display:grid;grid-template-columns:repeat(6,1fr);width:100%;border:1px solid var(--line);border-radius:14px;overflow:hidden}.place-grid div{text-align:center;border-right:1px solid var(--line)}.place-grid b{display:block;padding:8px;background:var(--surface-2);font-size:12px}.place-grid output{display:block;padding:18px 4px;font-size:clamp(25px,5vw,48px);font-weight:900;color:var(--blue)}
.money-app{width:100%;min-height:100%;align-self:flex-start;display:flex;flex-direction:column;justify-content:flex-start;color:var(--ink)}
.money-top{position:sticky;top:-16px;z-index:6;width:100%;display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:8px;padding:8px 4px;background:var(--surface);border-bottom:1px solid var(--line)}.money-level-control{display:flex;align-items:center;gap:6px}.money-level-control>span{color:var(--muted);font-size:12px;font-weight:900}.money-levels button{min-width:31px;padding:6px 9px;white-space:nowrap}.money-mode{width:36px;padding:0;font-size:18px}.money-score{margin-left:auto;padding:6px 10px;border-radius:999px;background:var(--surface-2);color:var(--muted);font-size:12px;font-weight:900}
.money-task-card{width:min(100%,650px);margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px;border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:var(--shadow-1)}.money-task-card h3{margin:0;text-align:center;font-size:clamp(19px,3vw,25px)}.money-level-hint{margin:-7px 0 0;text-align:center;color:var(--muted);font-size:12px;font-weight:800}
.money-target{width:100%;min-height:98px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:12px;border-radius:16px;background:var(--surface-2)}.money-target>span:first-child{flex-basis:100%;color:var(--muted);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.5px}.money-assignment{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;text-align:center}.money-task-amount{font-size:clamp(45px,10vw,72px);line-height:1;font-weight:950;color:var(--green)}.money-task-words{flex-basis:100%;margin:0;font-size:clamp(21px,4vw,31px);line-height:1.15;font-weight:950;color:var(--purple)}.money-assignment.compact .money-task-amount{font-size:clamp(38px,8vw,58px)}.money-assignment.compact .money-task-words{font-size:clamp(19px,4vw,27px)}
.money-wallet{width:100%;min-height:112px;padding:10px;border:3px dashed var(--line);border-radius:18px;background:linear-gradient(145deg,var(--surface-2),var(--surface));transition:border-color .15s,background .15s,transform .15s}.money-wallet>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}.money-wallet output{font-size:24px;font-weight:950;color:var(--green)}.money-wallet>p{margin:22px auto;color:var(--muted);font-weight:800;text-align:center}.money-wallet.droptarget{border-color:var(--green);background:#e4f6eb;transform:scale(1.01)}.money-wallet.money-remove-target{border-color:var(--red);background:#fff0ed;box-shadow:0 0 0 4px rgba(190,55,45,.1)}
.money-pile{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;min-height:58px}
.money-piece{position:relative;display:block;flex:none;overflow:hidden;padding:0;border:0;background:transparent;color:#26354a;filter:drop-shadow(0 3px 3px rgba(20,35,60,.28));user-select:none}.money-piece:is(button){appearance:none;cursor:grab;touch-action:none}.money-piece:is(button):active{cursor:grabbing}.money-piece:is(button):focus-visible{outline:3px solid var(--accent);outline-offset:3px}.money-piece-image{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}.money-piece-fallback{display:none;width:100%;height:100%;place-items:center;border:1px solid rgba(30,40,55,.35);background:var(--surface-2);font:900 12px/1 system-ui}.money-piece.image-missing .money-piece-image{display:none}.money-piece.image-missing .money-piece-fallback{display:grid}
.money-piece.coin{width:44px;height:44px;border-radius:50%}.money-piece.coin[data-value="1"]{width:36px;height:36px}.money-piece.coin[data-value="2"]{width:42px;height:42px}.money-piece.coin[data-value="5"]{width:47px;height:47px}.money-piece.coin[data-value="10"]{width:44px;height:44px}.money-piece.coin[data-value="20"]{width:49px;height:49px}.money-piece.coin[data-value="50"]{width:54px;height:54px}.money-piece.coin[data-value="100"]{width:52px;height:52px}.money-piece.coin[data-value="200"]{width:57px;height:57px}
.money-piece.note{height:43px;border-radius:2px}.money-piece.note .money-piece-fallback{border-radius:2px}.money-piece.note[data-value="500"]{width:82px;height:42px}.money-piece.note[data-value="1000"]{width:86px;height:45px}.money-piece.note[data-value="2000"]{width:89px;height:48px}.money-piece.note[data-value="5000"]{width:93px;height:51px}.money-drag-clone{opacity:.98}.money-drag-clone.from-wallet{opacity:.92;filter:drop-shadow(0 14px 18px rgba(160,45,45,.3))}
.money-tray-wrap{width:100%;display:flex;flex-direction:column;align-items:center;gap:8px}.money-tray-wrap>b{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.4px}.money-cash-tray{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:11px;border:1px solid var(--line);border-radius:16px;background:var(--surface-2)}
.money-count-task{width:100%;min-height:128px;display:grid;place-items:center;padding:14px;border-radius:17px;background:linear-gradient(145deg,#eef7e9,var(--surface-2));border:1px solid var(--line)}.money-count-task .money-piece{transform:rotate(var(--money-tilt,0deg))}
.money-shop-task{width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,.8fr);gap:12px}.money-product,.money-paid{min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:12px;border:1px solid var(--line);border-radius:17px;background:var(--surface-2)}.money-product-icon{font-size:clamp(52px,8vw,70px);line-height:1;filter:drop-shadow(0 5px 5px rgba(30,45,70,.2))}.money-product-name{max-width:100%;font-size:17px;font-weight:950;text-align:center}.money-product>b,.money-paid>b{color:var(--muted);font-size:12px;text-transform:uppercase}.money-product .money-task-amount{font-size:37px}.money-product .money-task-words{font-size:19px}.money-paid>output{font-size:31px;font-weight:950;color:var(--blue)}
.money-digit-answer,.money-type-answer{width:min(100%,300px);display:flex;flex-direction:column;align-items:center;gap:10px}.money-digit-answer>p,.money-type-answer>p{margin:0;color:var(--muted);font-weight:800;text-align:center}.money-answer-slots{display:flex;align-items:center;justify-content:center;gap:6px}.money-answer-slots>strong{font-size:29px}.money-digit-slot.slot.sm{width:43px;height:64px;padding-top:1px}.money-digit-slot.slot.sm .ghost{height:24px;font-size:20px}.money-digit-slot.slot.sm .slot-dots{margin-bottom:3px}.money-digit-slot.filled{padding:0}.money-digit-slot.fixed{border-style:solid;background:var(--surface-2);opacity:.72}.money-digit-block.blok,.money-digit-slot.slot.sm{--dot:6px}.money-digit-block.blok{width:39px;height:62px;min-height:62px;padding-top:2px;cursor:default}.money-digit-block.blok .bl{height:26px;font-size:25px;color:var(--purple)}.money-digit-block.blok .blok-dots{margin-bottom:3px}.money-digit-tray.lg-tray{display:grid;grid-template-columns:repeat(5,39px);gap:7px;min-height:0;padding:11px 14px}.money-digit-tray .money-drag-digit{cursor:grab}.money-digit-tray .money-drag-digit:active{cursor:grabbing}.money-digit-slot.droptarget{border-color:var(--green);background:#e3f6ea;transform:scale(1.06)}
.money-type-display{min-width:190px;padding:9px 14px;border:3px dashed var(--line);border-radius:14px;background:var(--surface-2);font-size:34px;font-weight:950;letter-spacing:2px;color:var(--green)}.money-keypad{width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.money-keypad .tbtn{min-width:0;padding:0;font-size:20px}
.money-feedback{min-height:24px;margin:0;text-align:center;font-weight:900}.money-feedback.ok{color:var(--green)}.money-feedback.bad{color:var(--red)}.money-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.money-actions .tbtn:not(.ghost){background:var(--green);color:#fff}
@media(max-width:520px){.money-task-card{gap:9px;padding:10px}.money-level-control>span{display:none}.money-top{top:-10px;gap:5px}.money-shop-task{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:7px}.money-product,.money-paid{min-height:112px;padding:8px 6px;gap:4px}.money-product-icon{font-size:46px}.money-product-name{font-size:14px}.money-product .money-task-amount{font-size:32px}.money-product .money-task-words{font-size:16px}.money-paid>output{font-size:26px}.money-cash-tray{gap:6px;padding:9px}}
.wordtypes{display:flex;gap:9px;flex-wrap:wrap;justify-content:center}.wordtypes button{border:0;border-radius:10px;padding:10px 13px;font:inherit;font-weight:900;background:var(--surface-2)}.wordtypes button[data-type=noun]{background:#dce9ff;color:#174c9b}.wordtypes button[data-type=verb]{background:#dcf7e7;color:#176b3a}.wordtypes button[data-type=adjective]{background:#fff0cf;color:#855b00}.wordtypes p{flex-basis:100%;text-align:center;color:var(--muted);font-size:12px}
.schedule{width:min(100%,450px);display:flex;flex-direction:column;gap:7px}.schedule>div{display:flex;align-items:center;gap:12px;padding:9px;background:var(--surface-2);border-radius:12px;border-left:4px solid var(--widget-accent)}.schedule-icon{width:33px;height:33px;display:grid;place-items:center;flex:none;border-radius:10px;background:var(--surface);font-size:20px;font-style:normal}.schedule time{font-weight:900;color:var(--blue)}.schedule span{flex:1;font-weight:800}.schedule .tbtn{height:30px;min-height:30px;padding:0 9px}.class-total{flex-basis:100%;width:100%;margin:0 0 3px;color:var(--muted);font-size:12px;font-weight:900;text-align:center}.mood{display:flex;gap:8px;flex-wrap:wrap}.mood .tbtn{flex:1;min-width:62px;font-size:36px;height:auto;padding:12px;background:var(--surface);border:2px solid var(--line);color:var(--ink)}.mood span{display:block;font-size:14px}.poll{width:min(100%,440px);display:flex;flex-direction:column;gap:8px}.poll h3{margin-bottom:0;text-align:center}.poll .tbtn{position:relative;overflow:hidden;text-align:left}.poll .tbtn i{position:absolute;inset:0 auto 0 0;background:color-mix(in srgb,var(--widget-accent) 22%,var(--surface));z-index:0;transition:width .25s}.poll .tbtn span{position:relative;float:right;font-weight:900}.poll .tbtn{isolation:isolate}
@media(max-width:600px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.gcard{min-height:120px;padding:13px 8px}.gcard .gd{display:none}.widget .wdup,.widget .wpreview{display:none}.edu-stage{padding:10px}.place-grid b{font-size:9px}.place-grid output{padding:12px 2px}}
/* =========== Geluidsmeter =========== */
.nm{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:14px}
.nm-stage{display:flex;align-items:flex-end;gap:14px;flex:1;min-height:0}
.nm-gauge{position:relative;width:70px;height:min(280px,100%);min-height:120px;border-radius:35px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden;box-shadow:inset 0 2px 8px rgba(20,36,52,.12)}
.nm-fill{position:absolute;left:0;right:0;bottom:0;height:0%;border-radius:35px 35px 0 0;transition:height .25s ease-out,background-color .25s;background:var(--surface-2)}
.nm-fill.green{background:var(--green)}
.nm-fill.yellow{background:var(--yellow)}
.nm-fill.red{background:var(--red)}
.nm-mark{position:absolute;left:0;right:0;height:2px;background:rgba(255,255,255,.8);box-shadow:0 0 0 1px rgba(20,36,52,.25)}
.nm-face{font-size:52px;line-height:1}
.nm-gauge.warn{animation:nmwarn 1s infinite}
@keyframes nmwarn{0%,100%{box-shadow:inset 0 2px 8px rgba(20,36,52,.12)}50%{box-shadow:inset 0 2px 8px rgba(20,36,52,.12),0 0 0 4px color-mix(in srgb,var(--red) 45%,transparent)}}
.nm-status{min-height:26px;font-size:16px;font-weight:900;text-align:center}
.nm-zones{width:100%;max-width:320px;display:flex;flex-direction:column;gap:6px}
.nm-zone-row{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;color:var(--muted)}
.nm-zone-row input{flex:1}
.nm-zone-lbl{flex:none;min-width:96px}
.nm-privacy{margin:0;max-width:320px;color:var(--muted);font-size:11px;text-align:center;line-height:1.4}
/* =========== Gevoelszones =========== */
.fz{flex:1;min-height:0;display:flex;flex-direction:column;gap:14px;padding:14px;overflow:auto}
.fz-zones{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.fz-zone{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 10px;border-radius:18px;border:2px solid var(--line);background:var(--surface);cursor:pointer;font:inherit;color:var(--ink)}
.fz-zone.blue{border-color:color-mix(in srgb,var(--blue) 40%,var(--line))}
.fz-zone.green{border-color:color-mix(in srgb,var(--green) 40%,var(--line))}
.fz-zone.yellow{border-color:color-mix(in srgb,var(--yellow) 55%,var(--line))}
.fz-zone.red{border-color:color-mix(in srgb,var(--red) 40%,var(--line))}
.fz-zone.active.blue{background:color-mix(in srgb,var(--blue) 16%,var(--surface))}
.fz-zone.active.green{background:color-mix(in srgb,var(--green) 16%,var(--surface))}
.fz-zone.active.yellow{background:color-mix(in srgb,var(--yellow) 22%,var(--surface))}
.fz-zone.active.red{background:color-mix(in srgb,var(--red) 16%,var(--surface))}
.fz-emoji{font-size:32px}
.fz-label{font-weight:900;font-size:14px}
.fz-detail{padding:12px 16px;border-radius:16px;border:1px solid var(--line);background:var(--surface-2);text-align:center}
.fz-detail-title{margin:0 0 4px;font-size:16px}
.fz-detail-desc{margin:0 0 6px;font-weight:800;color:var(--ink)}
.fz-detail-tip{margin:0;color:var(--muted);font-size:13px;line-height:1.4}
.fz-detail.blue{border-color:color-mix(in srgb,var(--blue) 35%,var(--line))}
.fz-detail.green{border-color:color-mix(in srgb,var(--green) 35%,var(--line))}
.fz-detail.yellow{border-color:color-mix(in srgb,var(--yellow) 45%,var(--line))}
.fz-detail.red{border-color:color-mix(in srgb,var(--red) 35%,var(--line))}
/* =========== Ademhalingsoefening =========== */
.bre{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:14px}
.bre-stage{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center}
.bre-circle{width:120px;height:120px;border-radius:50%;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--blue) 55%,#fff),var(--blue));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#fff;font-weight:900;transform:scale(1);transition:transform 1s ease-in-out;box-shadow:0 12px 30px rgba(20,54,97,.28)}
.bre-circle.hold{filter:brightness(.92)}
.bre-word{font-size:15px}
.bre-count{font-size:26px;font-variant-numeric:tabular-nums}
.bre-rounds{color:var(--muted);font-size:13px;font-weight:800}
.bre-row{display:flex;gap:10px;align-items:center}
/* =========== Complimentenmachine =========== */
.cpl{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:14px}
.cpl-card{width:min(100%,420px);min-height:140px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px;border-radius:22px;background:linear-gradient(135deg,var(--pink),var(--purple));color:#fff;text-align:center;box-shadow:0 14px 30px rgba(139,92,246,.28);opacity:.55;transform:scale(.96);transition:opacity .2s,transform .2s}
.cpl-card.show{opacity:1;transform:scale(1)}
.cpl-icon{font-size:34px}
.cpl-text{margin:0;font-size:17px;font-weight:800;line-height:1.4;text-shadow:0 2px 6px rgba(0,0,0,.2)}

/* Wereldoriëntatie: natuurherkenning en topografie */
.world-app{width:100%;min-height:100%;align-self:flex-start;display:flex;flex-direction:column;justify-content:flex-start;color:var(--ink)}
.world-top{position:sticky;top:-16px;z-index:6;width:100%;display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between;gap:8px;margin-bottom:10px;padding:9px 4px;background:color-mix(in srgb,var(--surface) 94%,transparent);border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}.world-top>strong{font-size:15px}.world-top>span{padding:6px 10px;border-radius:999px;background:var(--surface-2);color:var(--muted);font-size:12px;font-weight:900;white-space:nowrap}
.world-level-control{display:flex;align-items:center;gap:6px}.world-level-control>span{color:var(--muted);font-size:12px;font-weight:900}.world-levels button{min-width:31px;padding:6px 9px;white-space:nowrap}
.world-task-card{width:min(100%,680px);margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:13px;padding:18px;border:1px solid color-mix(in srgb,var(--line) 80%,var(--accent));border-radius:24px;background:linear-gradient(155deg,var(--surface),color-mix(in srgb,var(--surface-2) 68%,var(--surface)));box-shadow:0 18px 40px rgba(24,42,66,.12)}.world-task-card>h3{max-width:560px;margin:0;text-align:center;font-size:clamp(19px,4cqi,27px);line-height:1.2}.world-intro{width:100%;margin:0;padding:10px 14px;border-radius:14px;background:linear-gradient(120deg,var(--accent-soft),color-mix(in srgb,var(--accent-soft) 55%,var(--surface)));color:var(--accent-ink);font-weight:850;line-height:1.4;text-align:center}
.world-visual{width:min(100%,460px);display:flex;align-items:flex-start;justify-content:center;gap:12px}.world-visual.mixed{width:min(100%,620px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.world-photo{position:relative;min-width:0;margin:0;overflow:hidden;border:1px solid color-mix(in srgb,var(--line) 75%,var(--ink));border-radius:19px;background:#152432;box-shadow:0 10px 24px rgba(20,36,52,.18)}.world-picture{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}.world-photo-badge{position:absolute;left:9px;top:9px;padding:5px 9px;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:rgba(10,27,42,.78);color:#fff;font-size:10px;font-weight:950;letter-spacing:.45px;text-transform:uppercase;box-shadow:0 2px 8px rgba(0,0,0,.18);backdrop-filter:blur(6px)}.world-photo-credit{position:absolute;right:7px;bottom:7px;max-width:calc(100% - 14px);overflow:hidden;padding:4px 7px;border-radius:8px;background:rgba(10,27,42,.8);color:#fff!important;font-size:9px;font-weight:750;line-height:1.2;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;backdrop-filter:blur(6px)}.world-photo-credit:hover,.world-photo-credit:focus-visible{text-decoration:underline;outline:2px solid #fff;outline-offset:1px}
.world-identity{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}.world-identity h3{margin:0;font-size:18px;line-height:1.2}.world-identity em{color:var(--muted);font-size:12px;font-family:Georgia,serif;font-weight:650}
.world-answers{width:min(100%,560px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.world-answers .tbtn{min-width:0;min-height:48px;padding:8px 11px;border:1px solid var(--line);background:var(--surface);box-shadow:0 3px 8px rgba(20,36,52,.06)}.world-answers .tbtn:hover{border-color:var(--accent);background:var(--accent-soft)}.world-answers .tbtn.correct{background:var(--green);color:#fff;border-color:transparent}.world-feedback{min-height:24px;margin:0;text-align:center;font-weight:900}.world-feedback.ok{color:var(--green)}.world-feedback.bad{color:var(--red)}.world-actions{display:flex;justify-content:center}.world-fact{width:min(100%,560px);margin:0;padding:11px 14px;border:1px solid color-mix(in srgb,var(--green) 28%,var(--line));border-radius:15px;background:#eef7e9;color:#2f6f3e;text-align:center}.world-fact .world-identity em{color:#527c5b}.world-fact p{margin:6px 0 0;font-weight:800;line-height:1.4}
.world-answers .tbtn.wrong{background:color-mix(in srgb,var(--red) 14%,var(--surface));color:var(--red);border-color:var(--red)}.world-clue{width:min(100%,560px);padding:18px 20px;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:18px;background:linear-gradient(135deg,var(--accent-soft),var(--surface));color:var(--accent-ink);font-size:clamp(16px,3.2cqi,21px);font-weight:850;line-height:1.5;text-align:center}.world-clue-latin{font-family:Georgia,serif;font-size:clamp(23px,4.6cqi,34px);font-style:italic;font-weight:700}
.world-photo-answers{width:min(100%,640px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.world-photo-choice{position:relative;min-width:0;margin:0;overflow:hidden;border:3px solid transparent;border-radius:18px;background:#152432;box-shadow:0 8px 18px rgba(20,36,52,.16);transition:border-color .15s,transform .15s,box-shadow .15s}.world-image-button{display:block;width:100%;margin:0;padding:0;border:0;background:#152432;cursor:pointer}.world-image-button .world-picture{transition:transform .18s,filter .18s}.world-photo-choice:hover{transform:translateY(-2px);box-shadow:0 12px 22px rgba(20,36,52,.2)}.world-image-button:hover .world-picture{transform:scale(1.025)}.world-image-button:focus-visible{outline:4px solid var(--accent);outline-offset:-4px}.world-choice-number{position:absolute;left:8px;top:8px;display:grid;width:28px;height:28px;place-items:center;border:2px solid rgba(255,255,255,.7);border-radius:50%;background:rgba(10,27,42,.86);color:#fff;font-size:13px;font-weight:950;pointer-events:none}.world-photo-choice.correct{border-color:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 25%,transparent)}.world-photo-choice.wrong{border-color:var(--red)}.world-photo-choice.wrong .world-picture{filter:saturate(.65) brightness(.82)}
.world-gallery{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.world-specimen{min-width:0;display:flex;flex-direction:column;align-items:center;gap:9px;padding:11px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(155deg,var(--surface),var(--surface-2));box-shadow:0 8px 22px rgba(20,36,52,.08)}.world-specimen .world-visual{width:100%}.world-specimen p{margin:0;padding:0 5px 3px;color:var(--muted);font-size:12px;font-weight:720;line-height:1.4;text-align:center}
/* flitskaarten: zelfde opbouw als flits.js (naam kort tonen, dan zelftoets),
   hier met de foto/kaart altijd zichtbaar en de naam geflitst i.p.v. andersom */
.world-flash-card{width:100%;display:flex;flex-direction:column;align-items:center;gap:10px}
.world-flash-name{font-size:clamp(24px,5vw,34px);font-weight:900;letter-spacing:1px;color:var(--blue);min-height:44px;display:flex;align-items:center}
.world-flash-name.dim{color:var(--muted)}
.world-flash-hint{margin:0;color:var(--muted);font-weight:800;text-align:center}
.world-flash-reflect{width:100%;padding:10px 14px;border-radius:14px;background:var(--surface-2);text-align:center}
.world-flash-reflect>p{margin:0 0 8px;font-weight:900}
/* letterblokken: hergebruikt de blok/vak/dots-stijl van letters.js/de rekenwidgets */
.world-spell-hint{margin:0;color:var(--muted);font-weight:800;text-align:center}
.world-spell-answer{width:100%;display:flex;flex-direction:column;align-items:center;gap:12px}
.world-spell-word{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;max-width:100%}
.world-spell-gap{width:14px;flex:none}
.world-letter-slot.slot.sm,.world-letter-block.blok.sm{--dot:6px;width:40px;height:62px;padding-top:3px}
.world-letter-slot.slot.sm .ghost{height:24px;font-size:19px}
.world-letter-slot.slot.sm .slot-dots{margin-bottom:4px}
.world-letter-block.blok.sm .bl{height:26px;font-size:22px}
.world-letter-block.blok.sm .blok-dots{margin-bottom:4px}
.world-spell-tray.lg-tray{max-width:min(100%,480px)}
.topo-card{width:min(100%,740px)}.topo-map-wrap{width:100%;display:flex;flex-direction:column;align-items:center;gap:7px;overflow:hidden;padding:10px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(155deg,#edf8fd,#dff2fb)}.topo-map{display:block;width:min(100%,510px);height:auto;max-height:590px;touch-action:manipulation;filter:drop-shadow(0 9px 13px rgba(29,60,76,.13))}.topo-water{fill:#dff3fb}.topo-province{stroke:#fff;stroke-width:4.5;stroke-linejoin:round;vector-effect:non-scaling-stroke;transition:filter .15s,opacity .15s,fill .15s}.topo-province[role=button]{cursor:pointer}.topo-province[role=button]:hover,.topo-province[role=button]:focus{filter:brightness(.88) saturate(1.12);outline:none}.topo-province[role=button]:focus-visible{stroke:var(--navy);stroke-width:8}.topo-province.picked{fill:var(--red)!important}.topo-province.target{fill:var(--green)!important}.topo-label,.topo-city-label{fill:#18324e;paint-order:stroke;stroke:#fff;stroke-width:5px;stroke-linejoin:round;font-size:18px;font-weight:950;text-anchor:middle;pointer-events:none}.topo-city-label{text-anchor:start;font-size:16px}.topo-city-label.left{text-anchor:end}.topo-marker{cursor:pointer}.topo-hit{fill:transparent}.topo-dot{fill:var(--navy);stroke:#fff;stroke-width:4;transition:fill .15s,stroke-width .15s}.topo-marker:hover .topo-dot,.topo-marker:focus .topo-dot{fill:var(--orange);outline:none}.topo-marker:focus-visible .topo-dot{stroke:var(--navy);stroke-width:8}.topo-marker.picked .topo-dot{fill:var(--red)}.topo-marker.target .topo-dot{fill:var(--green);stroke-width:7}.topo-source{align-self:flex-end;color:#3b657b;font-size:9px;font-weight:750;text-decoration:none}.topo-source:hover,.topo-source:focus-visible{text-decoration:underline}
.topo-province.inactive{opacity:.32}.topo-region[role=button],.topo-river[role=button],.world-continent[role=button]{cursor:pointer}.topo-region.picked .topo-province{fill:var(--red)!important}.topo-region.target .topo-province{fill:var(--green)!important}.topo-region:hover .topo-province,.topo-region:focus .topo-province{filter:brightness(.88) saturate(1.12)}.topo-region:focus-visible .topo-province{stroke:var(--navy);stroke-width:8}.topo-region-label{font-size:20px}
.topo-river.inactive{opacity:.22}.topo-river-hit,.topo-river-line{fill:none;stroke-linecap:round;stroke-linejoin:round}.topo-river-hit{stroke:transparent;stroke-width:38;pointer-events:stroke}.topo-river-line{stroke:var(--river-color);stroke-width:10;pointer-events:none;transition:stroke .15s,stroke-width .15s}.topo-river:hover .topo-river-line,.topo-river:focus .topo-river-line{stroke-width:15}.topo-river:focus-visible .topo-river-line{stroke:var(--navy);stroke-width:18}.topo-river.picked .topo-river-line{stroke:var(--red)}.topo-river.target .topo-river-line{stroke:var(--green);stroke-width:16}.topo-river-label{fill:#18324e;paint-order:stroke;stroke:#fff;stroke-width:5px;stroke-linejoin:round;font-size:20px;font-style:italic;font-weight:950;text-anchor:middle;pointer-events:none}
.world-map-wrap{padding:12px}.world-map{width:100%;max-width:680px;max-height:none}.world-continent{stroke:#fff;stroke-width:1.4;stroke-linejoin:round;vector-effect:non-scaling-stroke;transition:filter .15s,opacity .15s,fill .15s}.world-continent.inactive{opacity:.28}.world-continent:hover,.world-continent:focus{filter:brightness(.88) saturate(1.12);outline:none}.world-continent:focus-visible{stroke:var(--navy);stroke-width:4}.world-continent.picked{fill:var(--red)!important}.world-continent.target{fill:var(--green)!important}.world-continent-label{fill:#18324e;paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round;font-size:14px;font-weight:950;text-anchor:middle;pointer-events:none}
/* een veelgebruikte keuze (spel/activiteit) die in de vaste bovenbalk van
   klok/geld/plaatswaarde/wereld staat i.p.v. achter het tandwiel */
.top-field{display:flex;flex-direction:column;gap:2px;font-size:11px;font-weight:800;color:var(--muted)}
.top-field select{height:36px;border:1px solid var(--line);border-radius:9px;padding:0 8px;background:var(--surface);color:var(--ink);font:inherit;font-weight:750}
.topo-world-legend{width:100%;display:flex;flex-wrap:wrap;justify-content:center;gap:6px}.topo-world-legend span{display:flex;align-items:center;gap:5px;padding:5px 8px;border:1px solid color-mix(in srgb,var(--line) 75%,transparent);border-radius:999px;background:var(--surface);color:var(--ink);font-size:11px;font-weight:850}.topo-world-legend i{width:10px;height:10px;flex:none;border:1px solid rgba(24,50,78,.18);border-radius:50%}
body.dark .world-fact{background:#1d3b2a;color:#a9e5b7}body.dark .world-fact .world-identity em{color:#a9e5b7}body.dark .topo-map-wrap{background:linear-gradient(155deg,#193446,#122c3e)}body.dark .topo-water{fill:#173145}body.dark .topo-label,body.dark .topo-city-label,body.dark .topo-river-label,body.dark .world-continent-label{fill:#f7fbff;stroke:#18324e}body.dark .topo-source{color:#a9cadb}

.clock-app{width:100%;min-height:100%;display:flex;flex-direction:column;justify-content:flex-start;color:var(--ink)}
.clock-top{position:sticky;top:-16px;z-index:6;width:100%;display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:8px;padding:8px 4px;background:var(--surface);border-bottom:1px solid var(--line)}.clock-level-control{display:flex;align-items:center;gap:6px}.clock-level-control>span{color:var(--muted);font-size:12px;font-weight:900}.clock-levels button{min-width:31px;padding:6px 9px;white-space:nowrap}.clock-mode{width:36px;padding:0;font-size:18px}.clock-score{margin-left:auto;padding:6px 10px;border-radius:999px;background:var(--surface-2);color:var(--muted);font-size:12px;font-weight:900}
.clock-task-card{width:min(100%,620px);margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px;border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:var(--shadow-1)}
.clock-task-card h3{margin:0;text-align:center;font-size:clamp(18px,3vw,24px)}.clock-intro{max-width:440px;margin:0;text-align:center;color:var(--muted);font-weight:700;line-height:1.5}
.clock-target{width:100%;min-height:88px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:10px;border-radius:15px;background:var(--surface-2)}.clock-target>span:first-child{flex-basis:100%;color:var(--muted);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.5px}.clock-target-words{font-size:20px;color:var(--purple)}.clock-assignment{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;text-align:center}.clock-assignment.compact{width:100%}.clock-assignment.compact .clock-task-digital{font-size:44px}.clock-assignment.compact .clock-task-words{font-size:24px}.clock-task-digital{font-size:clamp(48px,10vw,78px);line-height:1;font-weight:950;letter-spacing:2px;color:var(--blue)}.clock-task-words{flex-basis:100%;margin:0;font-size:clamp(24px,5vw,36px);line-height:1.15;font-weight:950;color:var(--purple)}.clock-daypart{padding:6px 11px;border-radius:999px;background:var(--purple);color:#fff;font-size:14px;font-weight:900}.clock-target .clock-reference{--clock-size:112px;border-width:5px;box-shadow:inset 0 0 0 2px var(--line),0 4px 10px rgba(20,35,60,.12)}.clock-reference b{font-size:9px}.clock-reference .clock-pin{left:calc(50% - 6px);top:calc(50% - 6px);width:12px;height:12px;border-width:2px}
.clock-work{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}.clock{--clock-size:min(230px,62vw);width:var(--clock-size);height:var(--clock-size);flex:none;position:relative;overflow:hidden;border:9px solid var(--ink);border-radius:50%;background:radial-gradient(circle at 50% 46%,var(--surface) 0 62%,var(--surface-2) 100%);box-shadow:inset 0 0 0 3px var(--line),0 8px 20px rgba(20,35,60,.14)}
.clock-set-answer{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.clock-period{display:flex;align-items:center;justify-content:center;gap:3px;padding:3px;border-radius:999px;background:var(--surface-2)}
.clock-period .tbtn{min-height:36px;padding:0 12px;border-radius:999px}
.clock-period .tbtn.active{background:var(--purple);color:#fff;border-color:transparent}
.clock-tick{position:absolute;z-index:1;border-radius:4px}.clock-tick.hour{left:calc(50% - 2px);top:3%;width:4px;height:5%;background:var(--blue);transform-origin:50% 940%}.clock-tick.minor{left:calc(50% - 1px);top:4%;width:2px;height:4%;background:var(--ink);opacity:.28;transform-origin:50% 1150%}
.clock b{position:absolute;z-index:2;left:calc(50% - 12px);top:calc(50% - 12px);width:24px;height:24px;display:grid;place-items:center;font-size:14px;transform:rotate(var(--clock-angle)) translateY(calc(var(--clock-size)*-.34)) rotate(calc(-1 * var(--clock-angle)))}
.clock-hand{position:absolute;z-index:4;left:calc(50% - 5px);bottom:50%;width:10px;border-radius:9px;transform-origin:50% 100%;background:var(--ink);cursor:grab;touch-action:none}.clock-hand:active{cursor:grabbing}.clock-hour{height:28%}.clock-min{left:calc(50% - 4px);width:8px;height:39%;background:var(--pink)}.clock-pin{position:absolute;z-index:5;left:calc(50% - 8px);top:calc(50% - 8px);width:16px;height:16px;border:3px solid var(--surface);border-radius:50%;background:var(--pink);box-shadow:0 1px 4px rgba(0,0,0,.28)}
.clock.interactive{touch-action:none;user-select:none;outline:4px solid transparent;transition:outline-color .15s,transform .15s}.clock.interactive:hover,.clock.interactive:focus-within{outline-color:var(--accent-soft)}
.clock-time-blocks{display:flex;align-items:center;justify-content:center;gap:5px;margin:0;padding:6px;border:0;border-radius:14px;background:transparent;color:var(--ink);font:inherit}.clock-time-blocks:is(button){cursor:pointer}.clock-time-blocks:is(button):hover,.clock-time-blocks:is(button):focus-visible{background:var(--accent-soft);outline:2px solid var(--accent)}.clock-time-blocks>strong{font-size:30px}
.clock-digit-block.blok,.clock-digit-slot.slot.sm{--dot:6px}
.clock-digit-block.blok{width:42px;height:66px;min-height:66px;padding-top:3px;cursor:default}.clock-digit-block.blok .bl{height:29px;font-size:27px;color:var(--purple)}.clock-digit-block.blok .blok-dots{margin-bottom:4px}
.clock-live-answer{padding:6px 12px;border:2px dashed var(--line);border-radius:16px;background:var(--surface-2)}.clock-read-layout{width:100%;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}.clock-read-layout>.clock-assignment{flex:1;min-width:190px}.clock-read-layout .clock{--clock-size:180px}.clock-block-answer{width:min(100%,250px);display:flex;flex-direction:column;align-items:center;gap:10px}.clock-block-answer>p{margin:0;color:var(--muted);font-weight:800;text-align:center}.clock-answer-slots{display:flex;align-items:center;justify-content:center;gap:7px}.clock-digit-slot.slot.sm{width:46px;height:66px;padding-top:2px}.clock-digit-slot.slot.sm .ghost{height:25px;font-size:20px}.clock-digit-slot.slot.sm .slot-dots{margin-bottom:4px}.clock-digit-slot.filled{padding:0}.clock-slot-colon{font-size:30px;margin:0 2px}.clock-block-tray.lg-tray{display:grid;grid-template-columns:repeat(5,38px);gap:7px;min-height:0;padding:11px 14px}.clock-block-tray .clock-drag-block{width:38px;height:66px;min-height:66px;cursor:grab}.clock-block-tray .clock-drag-block:active{cursor:grabbing}.clock-block-tray .clock-drag-block:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.clock-digit-slot.droptarget{border-color:var(--green);background:#e3f6ea;transform:scale(1.06)}
.clock-choices{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.clock-choices.wood .clock-time-blocks{border:1px solid var(--line);background:var(--surface-2)}.clock-word-choice{min-height:48px;border:2px solid var(--wood-d)!important;background:linear-gradient(#fdf3dd,var(--wood))!important;color:var(--ink)!important;box-shadow:0 3px 0 var(--wood-d)}.clock-digital-choice{min-width:118px;min-height:58px;font-size:28px!important;color:var(--blue)!important}.clock-type-answer{width:min(100%,250px);display:flex;flex-direction:column;align-items:center;gap:9px}.clock-type-answer>p{margin:0;color:var(--muted);font-weight:800;text-align:center}.clock-type-display{min-width:180px;padding:9px 14px;border:3px dashed var(--line);border-radius:14px;background:var(--surface-2);font-size:34px;font-weight:950;letter-spacing:3px;color:var(--blue)}.clock-keypad{width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.clock-keypad .tbtn{min-width:0;padding:0;font-size:20px}.clock-keypad .ok{background:var(--green);color:#fff}
.clock-feedback{min-height:24px;margin:0;text-align:center;font-weight:900}.clock-feedback.ok{color:var(--green)}.clock-feedback.bad{color:var(--red)}.clock-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.clock-actions .tbtn:not(.ghost){background:var(--green);color:#fff}.clock-drag-hint{color:var(--muted);font-weight:800;text-align:center}
@media(max-width:480px){.clock-task-card{padding:12px}.clock-level-control>span{display:none}.clock-top{gap:5px}.clock{--clock-size:min(210px,68vw)}.clock-target{min-height:72px}.clock-block-tray.lg-tray{gap:7px;padding:9px}}

/* plaatswaarde: "Bouwen"-oefening hergebruikt hetzelfde blok/vak/tray-systeem
   als de oefenklok/het geldwidget, alleen met een variabel aantal kolommen
   (2/3/6 al naar niveau) en een kolomlabel (HD/TD/D/H/T/E) boven elk vak. */
.place-app{width:100%;min-height:100%;display:flex;flex-direction:column;justify-content:flex-start;color:var(--ink)}
.place-top{position:sticky;top:-16px;z-index:6;width:100%;display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:8px;padding:8px 4px;background:var(--surface);border-bottom:1px solid var(--line)}
.place-level-control{display:flex;align-items:center;gap:6px}.place-level-control>span{color:var(--muted);font-size:12px;font-weight:900}
.place-levels button{min-width:31px;padding:6px 9px;white-space:nowrap}
.place-score{margin-left:auto;padding:6px 10px;border-radius:999px;background:var(--surface-2);color:var(--muted);font-size:12px;font-weight:900}
.place-task-card{width:min(100%,620px);margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px;border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:var(--shadow-1)}
.place-target{width:100%;min-height:88px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:10px;border-radius:15px;background:var(--surface-2)}
.place-target>span:first-child{color:var(--muted);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.5px}
.place-task-digital{font-size:clamp(48px,10vw,78px);line-height:1;font-weight:950;letter-spacing:2px;color:var(--blue)}
.place-block-answer{width:min(100%,520px);display:flex;flex-direction:column;align-items:center;gap:10px}.place-block-answer>p{margin:0;color:var(--muted);font-weight:800;text-align:center}
.place-answer-slots{display:flex;align-items:flex-end;justify-content:center;gap:7px;flex-wrap:wrap}
.place-slot-col{display:flex;flex-direction:column;align-items:center;gap:4px}.place-slot-col>b{font-size:11px;font-weight:900;color:var(--muted);text-transform:uppercase}
.place-digit-slot.slot.sm{width:46px;height:66px;padding-top:2px}.place-digit-slot.slot.sm .ghost{height:25px;font-size:20px}.place-digit-slot.slot.sm .slot-dots{margin-bottom:4px}.place-digit-slot.filled{padding:0}
.place-digit-tray.lg-tray{display:grid;grid-template-columns:repeat(5,38px);gap:7px;min-height:0;padding:11px 14px}.place-digit-tray .place-drag-block{width:38px;height:56px;min-height:56px;cursor:grab}.place-digit-tray .place-drag-block:active{cursor:grabbing}.place-digit-tray .place-drag-block:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.place-digit-slot.droptarget{border-color:var(--green);background:#e3f6ea;transform:scale(1.06)}
.place-digit-block.blok,.place-digit-slot.slot.sm{--dot:6px}
.place-digit-block.blok{width:42px;height:66px;min-height:66px;padding-top:3px;cursor:default}.place-digit-block.blok .bl{height:29px;font-size:27px;color:var(--purple)}.place-digit-block.blok .blok-dots{margin-bottom:4px}
.place-feedback{min-height:24px;margin:0;text-align:center;font-weight:900}.place-feedback.ok{color:var(--green)}.place-feedback.bad{color:var(--red)}
.place-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.place-actions .tbtn:not(.ghost){background:var(--green);color:#fff}
@media(max-width:480px){.place-task-card{padding:12px}.place-level-control>span{display:none}.place-top{gap:5px}.place-digit-tray.lg-tray{gap:7px;padding:9px}}

/* Letter- en cijferdoelen staan intrinsiek in het midden. safe center
   valt bij een te lange woordrij terug op het begin van de scrollstrook,
   zodat de eerste vakken bereikbaar blijven in plaats van links af te snijden. */
.lg-slots,.mt-slots,.clock-answer-slots,.money-answer-slots,.place-answer-slots,.world-spell-word{
  width:max-content;max-width:100%;margin-inline:auto;justify-content:safe center;
}
.lg-slots,.mt-slots{overflow-x:auto;scrollbar-width:thin}
.lg-slots>.slot,.mt-slots>.slot,.clock-answer-slots>.slot,.money-answer-slots>.slot,
.world-spell-word>.slot,.place-answer-slots>.place-slot-col{flex:none}

/* ============================================================
   Kindvriendelijke spel-laag
   Eén accent, duidelijke missies en tastbare bediening voor elk widgettype.
   ============================================================ */
.widget{--widget-accent:var(--teal);--widget-soft:color-mix(in srgb,var(--widget-accent) 12%,var(--surface))}
.widget:is([data-widget="anchor"],[data-widget="letters"],[data-widget="flits"],[data-widget="hak"],[data-widget="ball"],[data-widget="sentence"],[data-widget="wordtypes"]){--widget-accent:var(--purple)}
.widget:is([data-widget="madd"],[data-widget="msub"],[data-widget="mmul"],[data-widget="mdiv"],[data-widget="mpct"],[data-widget="numberline"],[data-widget="fractions"],[data-widget="clock"],[data-widget="placevalue"],[data-widget="money"]){--widget-accent:var(--blue)}
.widget:is([data-widget="trees"],[data-widget="birds"],[data-widget="plants"],[data-widget="topography"]){--widget-accent:var(--green)}
.widget:is([data-widget="birthday"],[data-widget="schedule"],[data-widget="light"],[data-widget="mood"],[data-widget="poll"]){--widget-accent:var(--pink)}
.widget[data-widget="media"]{--widget-accent:var(--orange)}
.widget:not(.bare){border-top:4px solid var(--widget-accent)}
.widget:not(.bare) .widget-head .wicon{width:34px;height:34px;display:grid;place-items:center;flex:none;border-radius:11px;background:var(--widget-soft);font-size:20px;transform:rotate(-3deg)}
.widget:not(.bare) .widget-head .wtitle{color:color-mix(in srgb,var(--widget-accent) 74%,var(--ink))}
.widget-body{background-image:radial-gradient(circle at 96% 4%,color-mix(in srgb,var(--widget-accent) 8%,transparent) 0 54px,transparent 55px)}
.widget-body .tbtn{transition:transform .12s,filter .12s,box-shadow .12s}.widget-body .tbtn:not(.ghost){background:var(--widget-accent);box-shadow:0 3px 0 color-mix(in srgb,var(--widget-accent) 72%,#18233a)}.widget-body .tbtn:active{transform:translateY(2px) scale(.985);box-shadow:none}.widget-body :is(button,input,select,textarea):focus-visible{outline:3px solid color-mix(in srgb,var(--widget-accent) 72%,#fff);outline-offset:2px}
.play-mission{width:min(100%,560px);margin:0 auto;padding:8px 12px;border:1px solid color-mix(in srgb,var(--widget-accent) 25%,var(--line));border-radius:13px;background:var(--widget-soft);color:color-mix(in srgb,var(--widget-accent) 68%,var(--ink));font-size:13px;font-weight:850;line-height:1.35;text-align:center}
.fl-reflect,.hk-reflect{width:100%;padding:8px 10px;border-radius:14px;background:var(--widget-soft);text-align:center}.fl-reflect p,.hk-reflect p{margin:0 0 7px;font-weight:900}.fl-reflect>div,.hk-reflect>div{display:flex;justify-content:center;gap:7px;flex-wrap:wrap}.fl-reflect[hidden],.hk-reflect[hidden]{display:none}
.dc-history{min-height:28px;display:flex;align-items:center;justify-content:center;gap:5px;flex-wrap:wrap}.dc-history span{margin-right:3px;color:var(--muted);font-size:11px;font-weight:850}.dc-history b{min-width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:var(--widget-soft);color:var(--widget-accent)}
.notes-app{height:100%;display:flex;flex-direction:column;background:#fff8cf;transition:background .15s}.notes-app[data-theme="mint"]{background:#e5f7df}.notes-app[data-theme="sky"]{background:#e2f3ff}.notes-app[data-theme="lilac"]{background:#f0e8ff}.notes-tools{min-height:42px;display:flex;align-items:center;gap:7px;padding:6px 8px;border-bottom:1px solid rgba(29,52,97,.12);color:#52627b;font-size:11px;font-weight:900}.notes-swatches{display:flex;gap:4px}.notes-swatches button{width:24px;height:24px;padding:0;border:2px solid rgba(29,52,97,.16);border-radius:50%;cursor:pointer}.notes-swatches button[data-theme="sun"]{background:#fff0a8}.notes-swatches button[data-theme="mint"]{background:#cdeebe}.notes-swatches button[data-theme="sky"]{background:#c6e9ff}.notes-swatches button[data-theme="lilac"]{background:#dfd0ff}.notes-swatches button.on{outline:2px solid var(--ink);outline-offset:1px}.notes-size{height:28px;padding:0 7px;border:1px solid rgba(29,52,97,.18);border-radius:8px;background:rgba(255,255,255,.5);color:#33445f;font-weight:900;cursor:pointer}.notes-size.on{background:#fff}.notes-count{margin-left:auto;white-space:nowrap}
.mt-card,.lg-card,.money-task-card,.clock-task-card,.world-task-card,.sb-sentence,.nlw-scroll{box-shadow:0 7px 20px rgba(29,52,97,.09)}
@media(pointer:coarse){.widget-body :is(.tbtn,.sb-chip,.nlw-tick,.fraction-piece,.tl-lamp){min-height:44px}}
@media(prefers-reduced-motion:reduce){.widget-body *,.widget-body *::before,.widget-body *::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@container widget (max-width:520px){.play-mission{padding:6px 9px;font-size:12px}.tl{padding:8px}.tl-house{padding:9px}.tl-lamp{width:58px;height:58px}.tl-option{gap:11px}.tl-option strong{font-size:16px}.tl-option small{font-size:11px}.notes-color-label{display:none}.notes-tools{gap:5px}.notes-count{font-size:10px}.fraction-game{gap:6px}.fraction-piece{min-height:34px;font-size:11px}.dc-history span{flex-basis:100%;text-align:center}.sb-surprise{flex-basis:100%}}

/* ============================================================
   Widgetinhoud op telefoonformaat
   De widget-body is de container: dit werkt zowel op het bord als
   in de leerlingweergave en ook wanneer een widget zelf smal is.
   ============================================================ */
@media(max-width:600px){
  /* De langere selector is nodig om de desktopregel
     body.pupil-mode #pupilView werkelijk te overschrijven. De veilige
     ondermarge houdt de laatste opdracht vrij van de mobiele browserbalk. */
  body.pupil-mode #pupilView{
    padding:8px 8px max(8px,env(safe-area-inset-bottom));
    gap:12px;
    overscroll-behavior:contain;
  }
  #pupilView .pupil-card{width:100%!important;max-width:100%;min-width:0!important}
  /* Op een laag telefoonscherm wordt een bordwidget begrensd tot het zichtbare
     bord. De inhoud moet dan kunnen scrollen; overflow:hidden sneed vooral de
     opdrachtkaart en blokkenbak af. Letter/rekenroots mogen daarbij hoger
     worden dan hun viewport, waarna widget-body de scroll afhandelt. */
  .widget-body{
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .widget-body>:is(.lg,.mt){flex:none;min-height:100%}
  .lg-card{min-height:210px}
  .mt-card{min-height:180px}
  /* De knop is buiten een opgelost woord display:none. De oude vaste 46px
     liet desondanks een lege witte "footer" onder de blokken staan. */
  .lg-bottom{min-height:0}
  .widget:not(.bare){max-width:calc(100% - 8px)}
  .widget-head{gap:4px;padding:6px 8px}
  .widget-head .wicon{font-size:18px}
  .wmin,.wclose{width:36px;height:36px;border-radius:10px}
  .wz{min-width:36px;padding:0 4px}
}
@media(pointer:coarse){
  .lg-levels button,.lg-cards button,.lg-snd,.lg-mode,.fl-sel,.tseg button,
  .nlw-settings input,.nlw-settings select,.sb-add input,.sb-add select,
  .edu-controls input,.edu-controls select{min-height:var(--tap-sm)}
  .mm-node .mm-add,.mm-node .mm-del,.mm-node .mm-cog{display:block}
  .an-tools button{width:var(--tap-sm);height:var(--tap-sm)}
}

@container widget (max-width:520px){
  /* gedeelde taal-, reken- en gereedschapskaarten */
  .lg,.mt,.dc,.np,.timer,.nlw,.sb{gap:8px;padding:8px}
  .lg-top,.mt-top,.topts,.np-row,.nlw-settings{flex-wrap:wrap}
  .lg-top>*,.mt-top>*{max-width:100%}
  .lg-levels{max-width:100%;overflow-x:auto;scrollbar-width:thin}
  .lg-levels button{padding:6px 9px}
  .lg-progress,.mt-score{min-width:0;margin-left:0;flex:1;justify-content:flex-end;text-align:right}
  .lg-card,.mt-card{gap:8px;padding:8px}
  .lg-pic{font-size:clamp(42px,16cqi,60px)}
  .lg-pic img{width:clamp(58px,20cqi,76px);height:clamp(58px,20cqi,76px)}
  .lg-instr{padding:6px 8px;font-size:13px}
  .lg-slots{gap:7px;overflow-x:auto;padding:3px 1px 8px}
  .lg-tray{gap:7px;min-height:0;max-height:44%;overflow:auto;padding:8px}
  .lg-kbd{gap:5px;padding:7px}
  .lg-kbd button{width:36px;height:42px;font-size:18px}
  .lg-ed-form{gap:7px;padding:9px}
  .lg-ed-form input.ed-word,.ed-theme-name,.ed-theme-folder{width:min(100%,170px)}
  .ed-pictorow{flex-wrap:wrap}
  .fl-sel{min-width:0}
  .fl-word{min-height:54px;font-size:clamp(30px,14cqi,48px);letter-spacing:2px;text-align:center}
  .hk-word{min-height:54px}
  .hk-whole{font-size:clamp(30px,13cqi,44px)}
  .hk-l{font-size:clamp(27px,12cqi,40px)}
  .hk-sep{font-size:22px;margin:0 1px}
  .bl-balloons{font-size:clamp(24px,9cqi,32px);letter-spacing:2px}
  .bl-word{min-height:45px;font-size:clamp(28px,12cqi,40px);letter-spacing:3px;text-align:center}
  .mt-q{font-size:clamp(28px,12cqi,38px)}
  .mt-a{min-width:90px;height:50px;font-size:28px}
  .mt-pad{gap:6px}
  .mt-pad button{min-height:44px;padding:8px 0}

  /* schrijfblad, media, mindmap, anker, dobbelsteen, namen en timer */
  .wp-bar{gap:4px;padding:5px;max-height:45%;overflow:auto}
  .wp-group{gap:2px;padding:2px}
  .wp-group button{width:30px;height:30px}
  .wp-clear{width:34px;height:34px}
  .media-bar{flex-wrap:wrap;padding:7px}
  .media-bar input{flex-basis:190px}
  .mm-top{max-width:calc(100% - 16px);gap:4px;padding:4px 6px}
  .mm-hint{display:none}
  .mm-seg button{padding:5px 8px;font-size:12px}
  .mm-node{max-width:46%;padding:7px 10px}
  .mm-pop{max-width:calc(100% - 8px)}
  .an-hint{min-height:42px;padding:6px 92px 6px 8px}
  .an-tools{top:4px;right:4px}
  .an-cell{width:112px;height:52px;padding:2px 5px;font-size:13px}
  .dc-row{gap:8px}
  .die{width:clamp(64px,25cqi,84px);height:clamp(64px,25cqi,84px);padding:8px}
  .die i{width:clamp(10px,4cqi,14px);height:clamp(10px,4cqi,14px)}
  .np-result{min-height:62px;padding:7px;font-size:clamp(23px,9cqi,30px)}
  .np-row{gap:7px}
  .np-row .tbtn{flex:1}
  .np-row label{margin-left:0}
  .timer{gap:7px;padding:8px}
  .timer .tpie{max-height:190px}
  .timer .tdisp{font-size:clamp(36px,15cqi,46px)}
  .timer .presets button{padding:7px 10px}
  .timer .main button{padding:10px 16px}
  .tseg button{padding:6px 9px}

  /* verjaardag, getallenlijn en zinsbouwer */
  .bd{grid-template-columns:1fr}
  .bd-controls{max-height:165px;border-right:0;border-bottom:1px solid var(--line);
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:8px}
  .bd-controls>*{min-width:0}
  .bd-controls input[type=range]{width:min(96px,100%)}
  .bd-party{margin-top:0}
  .bd-stage{padding:48px 10px 25px}
  .bd-layer{height:62px}
  .bd-age-badge{min-width:48px;height:48px;font-size:24px}
  .nlw-settings{align-items:end;gap:5px}
  .nlw-settings label{flex:1;min-width:64px}
  .nlw-settings input,.nlw-settings select{width:100%}
  .nlw-new{margin-left:0}
  .nlw-scroll{padding-inline:8px}
  .nlw-actions{gap:5px;flex-wrap:wrap}
  .nlw-value{min-width:58px;font-size:24px}
  .sb-banks{grid-template-columns:1fr}
  .sb-sentence{min-height:60px;padding:8px}
  .sb-add{gap:5px}
  .sb-add input{min-width:120px}
  .sb-actions{gap:5px}

  /* educatieve widgets: dezelfde compacte opbouw als de oefenklok */
  .edu-stage{align-items:safe center;justify-content:safe center;padding:10px}
  .edu-controls{gap:6px;padding:0 8px 8px}
  .fraction-wall,.place-grid,.wordtypes,.schedule,.mood,.poll{align-self:center}
  .place-grid b{padding:6px 2px;font-size:9px;overflow-wrap:anywhere}
  .place-grid output{padding:12px 2px;font-size:clamp(22px,8cqi,36px)}
  .wordtypes,.mood{width:100%;justify-content:center}
  .schedule>div{gap:7px;padding:8px}
  .schedule span{min-width:0;overflow-wrap:anywhere}
  .mood .tbtn{font-size:30px;padding:9px}
  .poll h3{margin:8px 0}

  .money-task-card,.clock-task-card,.world-task-card,.place-task-card{gap:9px;padding:10px}
  .world-top{top:-10px;gap:5px}
  .world-gallery{grid-template-columns:1fr}
  .world-visual.mixed{gap:6px}
  .world-photo-badge{left:6px;top:6px;padding:4px 7px;font-size:8px}
  .world-photo-credit{right:5px;bottom:5px;max-width:calc(100% - 10px);font-size:8px}
  .world-photo-answers{gap:6px}
  .world-clue{padding:13px 12px}
  .topo-map-wrap{padding:6px}
  .topo-map{max-height:450px}
  .world-map-wrap{padding:4px}
  .world-map{max-height:none}
  .world-continent-label{font-size:12px}
  .topo-world-legend{gap:4px}
  .topo-world-legend span{padding:4px 6px;font-size:10px}
  .money-top,.clock-top,.place-top{top:-10px;gap:5px}
  .money-level-control>span,.clock-level-control>span,.place-level-control>span,.world-level-control>span{display:none}
  .money-shop-task{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:7px}
  .money-product,.money-paid{min-height:112px;padding:8px 6px;gap:4px}
  .money-product-icon{font-size:46px}
  .money-product-name{font-size:14px}
  .money-product .money-task-amount{font-size:32px}
  .money-product .money-task-words{font-size:16px}
  .money-paid>output{font-size:26px}
  .money-cash-tray{gap:6px;padding:9px}
  .clock{--clock-size:min(210px,68cqi)}
  .clock-target{min-height:72px}
  .clock-read-layout{gap:10px}
  .clock-read-layout>.clock-assignment{min-width:0;flex-basis:100%}
  .clock-block-tray.lg-tray{gap:7px;padding:9px}
}

@container widget (max-width:340px){
  .lg,.mt,.dc,.np,.timer,.nlw,.sb{padding:6px}
  .lg-cards{gap:3px}
  .lg-cards button,.lg-snd,.lg-mode{width:32px;height:34px}
  /* smallere blokken: label én stipmaat moeten mee, anders steekt het raster
     onder het blok uit (dat gebeurde hier met de cijferblokken) */
  .lg .slot:not(.clock-digit-slot):not(.money-digit-slot):not(.place-digit-slot),
  .lg .blok:not(.clock-digit-block):not(.money-digit-block):not(.place-digit-block){--dot:7px;width:52px;height:82px}
  .lg .blok:not(.clock-digit-block):not(.money-digit-block):not(.place-digit-block) .bl{font-size:28px;height:36px}
  .lg .slot:not(.clock-digit-slot):not(.money-digit-slot):not(.place-digit-slot) .ghost{font-size:24px;height:32px}
  .clock-answer-slots,.money-answer-slots,.place-answer-slots{gap:4px}
  .clock-digit-slot.slot.sm,.money-digit-slot.slot.sm,.place-digit-slot.slot.sm{width:39px}
  /* de blokhoogte geeft mee (de widget is te smal, niet te laag), zodat de
     cijfers leesbaar blijven en het raster er alsnog binnen past */
  .clock-digit-block.blok,.money-digit-block.blok,.place-digit-block.blok{width:34px}
  .clock-block-tray.lg-tray,.money-digit-tray.lg-tray,.place-digit-tray.lg-tray{
    grid-template-columns:repeat(5,34px);gap:4px;padding:7px}
  .clock-block-tray .clock-drag-block,.place-digit-tray .place-drag-block{width:34px}
  .clock-type-display,.money-type-display{min-width:0;width:100%;font-size:30px}
  .world-answers{grid-template-columns:1fr}
  .world-visual.mixed{gap:5px}
  .schedule>div{flex-wrap:wrap}
  .schedule span{flex-basis:calc(100% - 70px)}
  .sb-add input{flex-basis:100%}
  .bd-controls{grid-template-columns:1fr;max-height:180px}
}

/* ============================================================
   Zakelijk thema: Instellingen (#settingsModal)
   Het bord blijft speels; het beheer is voor volwassenen. De ID-scope
   verslaat alle .am- en .st-regels hierboven, dus dit blok kan alles
   overschrijven zonder het bord of het ouderportaal te raken.
   ============================================================ */
#settingsModal{
  --control-h:32px; --radius:7px; --radius-s:6px; --radius-l:10px;
  font-family:ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (pointer:coarse){ #settingsModal{--control-h:40px;} }
#settingsModal.st-modal{width:min(1100px,96vw);}
#settingsModal .st-head h2{font-size:16px; font-weight:650; letter-spacing:.2px;}
#settingsModal #stSearch{border-radius:var(--radius-s); background:var(--surface); font-size:13px;}
/* navigatie: neutraal, gedempte iconen, accent alleen als inzetlijn */
#settingsModal .st-nav-btn{font-size:13.5px; font-weight:550; border-radius:var(--radius-s); padding:7px 10px;}
#settingsModal .st-nav-btn.active{background:var(--surface-3); color:var(--ink); box-shadow:inset 3px 0 0 var(--accent);}
#settingsModal .st-nav-ico{filter:grayscale(1); opacity:.6; font-size:13px;}
#settingsModal .st-nav-btn.active .st-nav-ico{opacity:.9;}
#settingsModal .st-nav-group{font-size:10px; letter-spacing:.7px;}
#settingsModal .st-sec-title{font-size:15px; font-weight:650; display:flex; gap:8px; align-items:center;}
#settingsModal .st-sec-ico{filter:grayscale(1); opacity:.6; font-size:14px;}
#settingsModal .st-sec-sub{font-size:12px;}
#settingsModal .st-result{border-radius:var(--radius-s);}
/* platte rijen: scheidingslijnen i.p.v. losse pastel-pills - LET OP: geen
   flex-direction hier, de bestaande mobiel-stack-regel moet blijven werken */
#settingsModal .am-list{gap:0; border:1px solid var(--line); border-radius:var(--radius-s); overflow:hidden; background:var(--surface);}
#settingsModal .am-row{
  background:transparent; border-radius:0; box-shadow:none;
  /* meer verticale ruimte dan voorheen (was 7px): rijen zonder gap ertussen
     stonden zo dicht op elkaar dat je makkelijk de verkeerde raakte, zeker
     op een telefoon */
  border-bottom:1px solid var(--line); margin:0; padding:12px 10px; font-size:13.5px;
}
#settingsModal .am-list > .am-row:last-child,
#settingsModal .am-list > .am-add-wrap:last-child{border-bottom:none;}
#settingsModal .am-row:hover{background:var(--surface-2);}
#settingsModal .am-row-school{background:transparent; font-weight:600;}
#settingsModal .am-row-sub{border-left:none; border-radius:0; padding-left:30px; background:transparent;}
#settingsModal .am-name{font-size:13.5px; font-weight:600;}
#settingsModal .am-role{font-size:12.5px;}
/* groepskoppen: subtiele sticky sectierijen binnen de lijst */
#settingsModal .am-group{
  position:sticky; top:0; z-index:2; margin:0; padding:7px 10px 5px;
  background:var(--surface-2); border-bottom:1px solid var(--line);
  font-size:11px; letter-spacing:.6px; color:var(--muted);
}
/* controls: vlak, omrand, compact */
#settingsModal .am-inp, #settingsModal .am-sel, #settingsModal .am-pw{
  border-radius:var(--radius-s); font-size:13px; background:var(--surface);
}
#settingsModal .am-btn, #settingsModal .am-copy, #settingsModal .tbtn{
  border:1px solid var(--line); border-radius:var(--radius-s); background:var(--surface);
  color:var(--ink);   /* .tbtn is standaard wit-op-blauw; hier wit-op-wit dus overschrijven */
  font-size:12.5px; font-weight:550; box-shadow:none; padding:0 12px;
}
#settingsModal .am-btn:hover, #settingsModal .tbtn:hover{background:var(--surface-2);}
/* de primaire knop (accent) houdt bewust witte tekst */
#settingsModal .am-btn.am-primary, #settingsModal .tbtn.am-primary{color:#fff;}
#settingsModal .tbtn:disabled{opacity:.5;}
#settingsModal .am-btn.am-danger{background:transparent; border:1px solid var(--line); color:var(--red); font-weight:600;}
#settingsModal .am-btn.am-danger.armed{background:var(--red); border-color:var(--red); color:#fff;}
#settingsModal .am-edit{border:1px solid transparent; border-radius:var(--radius-s); font-size:12.5px; opacity:.75;}
#settingsModal .am-edit:hover{opacity:1; border-color:var(--line); background:var(--surface-2);}
#settingsModal .am-chip{border-radius:var(--radius-s); padding:3px 9px; font-size:12px;}
#settingsModal .am-result{
  background:transparent; border:1px solid var(--accent); color:var(--accent-ink);
  border-radius:var(--radius-s); font-weight:600; padding:7px 11px;
}
#settingsModal .am-schoolbar{background:transparent; border:1px solid var(--line); border-radius:var(--radius-s); padding:6px 10px;}
#settingsModal .am-reset{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-s); box-shadow:none;}
#settingsModal .am-reset-row{background:transparent; border-radius:0; border-bottom:1px solid var(--line);}
#settingsModal .am-h3{font-size:12px; letter-spacing:.5px;}
#settingsModal .am-field-lbl{font-size:10px; letter-spacing:.5px;}
#settingsModal .am-add{border-radius:var(--radius-s);}
#settingsModal .am-add-wrap > .tbtn{border-style:dashed; border-color:var(--accent); color:var(--accent-ink); font-weight:550;}
#settingsModal .am-add-wrap > .tbtn:hover{color:var(--ink); background:var(--accent-soft);}
/* weergave-sectie: vlakke segmentknoppen */
#settingsModal .seg{border:1px solid var(--line); border-radius:var(--radius-s); background:var(--surface); padding:2px; box-shadow:none;}
#settingsModal .seg button{border-radius:5px; box-shadow:none; font-size:12.5px;}
#settingsModal .seg button.on{background:var(--surface-3); color:var(--ink); box-shadow:none;}
#settingsModal .vw-lbl{font-size:12.5px; font-weight:600;}
/* hoog contrast: de ID-scope verslaat de body.hc-regels, dus expliciet terug */
body.hc #settingsModal .am-row{border-bottom:1.5px solid #000;}
body.hc #settingsModal .am-list, body.hc #settingsModal .am-reset,
body.hc #settingsModal .am-btn, body.hc #settingsModal .tbtn,
body.hc #settingsModal .am-inp, body.hc #settingsModal .am-sel{border-color:#000;}

/* ---- gebruikers: master-detail (tabel links, bewerkpaneel rechts) ---- */
#settingsModal .am-toolbar{display:flex; gap:8px; margin:0 0 10px; align-items:center;}
#settingsModal .am-toolbar .am-filter{flex:1; min-width:0;}
#settingsModal .am-btn.am-primary{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600;}
#settingsModal .am-btn.am-primary:hover{background:var(--accent); opacity:.9;}
#settingsModal .am-split{display:flex; align-items:flex-start;}
#settingsModal .am-master{flex:1; min-width:0;}
#settingsModal .am-detail{
  width:330px; flex:none; position:sticky; top:0; margin-left:16px; padding-left:16px;
  border-left:1px solid var(--line); display:flex; flex-direction:column; gap:10px;
  max-height:calc(min(700px,92vh) - 220px); overflow-y:auto;
}
#settingsModal .am-detail .am-field{width:100%;}
#settingsModal .am-detail .am-tools{display:flex; flex-direction:column; gap:10px; width:100%;}
#settingsModal .am-detail-empty{color:var(--muted); font-size:12.5px; line-height:1.55; padding:10px 2px;}
#settingsModal .am-detail-head{display:flex; gap:10px; align-items:center;}
#settingsModal .am-detail-head h4{margin:0; font-size:13.5px; font-weight:650;}
#settingsModal .am-detail-head .am-role{display:block; font-size:11.5px;}
#settingsModal .am-detail-title{min-width:0; flex:1;}
#settingsModal .am-detail-close{flex:none;}
/* de tabel: per-rij grid met vaste kolomverhoudingen lijnt over rijen heen uit */
#settingsModal .am-tr{
  display:grid; grid-template-columns:minmax(0,1.8fr) .9fr 1fr .9fr;
  gap:10px; align-items:center; cursor:pointer;
}
#settingsModal .am-thead{
  display:grid; grid-template-columns:minmax(0,1.8fr) .9fr 1fr .9fr; gap:10px;
  padding:0 10px 5px; font-size:10px; font-weight:700; letter-spacing:.6px;
  text-transform:uppercase; color:var(--muted);
}
#settingsModal .am-tr.sel{background:var(--surface-2); box-shadow:inset 3px 0 0 var(--accent);}
#settingsModal .am-tr .am-name{display:flex; gap:8px; align-items:center; min-width:0;}
#settingsModal .am-name-txt{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#settingsModal .am-username{color:var(--muted); font-weight:500; font-size:11px;}
#settingsModal .am-cell{
  font-size:12.5px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#settingsModal .am-avatar{
  width:24px; height:24px; border-radius:50%; flex:none;
  background:var(--surface-3); color:var(--muted); font-size:10px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center; letter-spacing:.3px;
}
#settingsModal .am-avatar.big{width:34px; height:34px; font-size:12.5px;}
#settingsModal .am-status .am-chip{background:transparent; border:1px solid var(--line); color:var(--muted); font-size:11px;}
#settingsModal .am-status .am-chip.on{border-color:var(--accent); color:var(--accent-ink);}
/* smal scherm: het detailpaneel wordt een overlay óver de tabel (onder de
   tabel stapelen betekent bij grote scholen eindeloos scrollen) */
@media (max-width:760px){
  #settingsModal .am-thead{display:none;}
  #settingsModal .am-tr{grid-template-columns:minmax(0,1fr) auto;}
  #settingsModal .am-tr .am-cell{display:none;}
  #settingsModal .am-tr .am-cell:nth-of-type(2){display:block; text-align:right;}
  #settingsModal .am-detail{display:none;}
  #settingsModal .am-split.has-sel .am-detail{
    display:flex; position:fixed; inset:10% 4% 4%; z-index:6500; margin:0;
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:14px; max-height:none; box-shadow:var(--shadow-2);
  }
}

/* ---- groepskaart: één kader om items die bij elkaar horen ---- */
#settingsModal .am-card{
  border:1px solid var(--line); border-radius:var(--radius-s); background:var(--surface);
  overflow:hidden; margin-bottom:10px;
}
#settingsModal .am-card-head{
  display:flex; gap:9px; align-items:center; padding:9px 12px;
  background:var(--surface-2); border-bottom:1px solid var(--line);
}
#settingsModal .am-card:has(.am-card-subs[style*="none"]):not(:has(.am-card-tools:not([style*="none"]))) .am-card-head{border-bottom:none;}
#settingsModal .am-ico{filter:grayscale(1); opacity:.55; font-size:13px; flex:none;}
#settingsModal .am-card-title{font-weight:650; font-size:13.5px; flex:1; min-width:80px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#settingsModal .am-card-sum{margin-left:auto; flex:0 1 auto; min-width:0; font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#settingsModal .am-card-toggle{cursor:pointer; user-select:none; padding:4px 6px; border-radius:5px;}
#settingsModal .am-card-toggle:hover{background:var(--surface-3); color:var(--ink);}
#settingsModal .am-card-tools{padding:10px 12px; border-bottom:1px solid var(--line); display:flex; flex-wrap:wrap; gap:10px;}
#settingsModal .am-card-subs > .am-row{border-bottom:1px solid var(--line);}
#settingsModal .am-card-subs > .am-row:last-child{border-bottom:none;}
/* compacte subrij binnen een kaart */
#settingsModal .am-card-sub{font-size:12.5px; padding:5px 12px 5px 30px; flex-wrap:wrap;}
#settingsModal .am-card-sub .am-name{font-size:12.5px; font-weight:550; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* Visuele opdracht- en reeksbouwer voor groepsleiding */
#castBackdrop .cast-composer-sheet{width:min(960px,calc(100vw - 32px));max-width:960px;max-height:min(90dvh,900px);padding:18px 20px 0;overscroll-behavior:contain}
.cast-composer-intro{max-width:72ch;margin:0 0 10px;color:var(--muted);font-size:13px;line-height:1.45}
.cast-status{min-height:0;margin:0 0 10px;padding:0;font-size:13px;font-weight:850}
.cast-status:empty{display:none}.cast-status.error{padding:9px 11px;border-radius:10px;background:var(--red-soft);color:var(--red)}.cast-status.success{padding:9px 11px;border-radius:10px;background:color-mix(in srgb,var(--green) 14%,var(--surface));color:var(--green)}
.cast-guide{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 14px;padding:0;list-style:none}
.cast-guide li{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;background:var(--surface-2);color:var(--muted);font-size:11px}
.cast-guide li span{width:24px;height:24px;display:grid;place-items:center;flex:none;border-radius:50%;background:var(--accent);color:#fff;font-weight:950}.cast-guide li strong{color:var(--ink)}
.cast-composer-card{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;padding:15px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:0 3px 14px rgba(20,35,60,.05)}
.cast-composer-card>h3,.cast-section-head h3{margin:0;font-size:16px}.cast-composer-card>.am-group,.cast-pupil-head>.am-group{margin:4px 0 0}
.cast-kind-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.cast-kind-button{display:flex;min-width:0;min-height:66px;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;padding:10px 12px;border:1.5px solid var(--line);border-radius:13px;background:var(--surface-2);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.cast-kind-button:hover{border-color:var(--accent)}.cast-kind-button.active{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}.cast-kind-button span{color:var(--muted);font-size:11px;line-height:1.25}.cast-kind-button:disabled{opacity:.55;cursor:default}
.cast-live-hint{margin:0;padding:8px 10px;border-left:3px solid var(--blue);border-radius:0 9px 9px 0;background:color-mix(in srgb,var(--blue) 7%,var(--surface));color:var(--muted);font-size:11px;line-height:1.4}
.cast-field{display:flex;flex-direction:column;gap:5px;color:var(--muted);font-size:11.5px;font-weight:850}.cast-field .am-inp,.cast-field .am-sel{width:100%}.cast-mode-field{max-width:360px}
.cast-section-head,.cast-pupil-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.cast-section-head>div:first-child{display:flex;min-width:0;flex-direction:column;gap:2px}.cast-section-head small{color:var(--muted);font-size:11px;font-weight:650;line-height:1.35}.cast-mini-actions{display:flex!important;flex-direction:row!important;flex:none;gap:6px}
.cast-widget-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:8px}
.cast-widget-card{display:grid;grid-template-columns:38px minmax(0,1fr) 28px;align-items:center;gap:8px;min-height:62px;padding:9px 10px;border:1.5px solid var(--line);border-radius:13px;background:var(--surface-2);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.cast-widget-card:hover{border-color:var(--accent);transform:translateY(-1px)}.cast-widget-card.selected{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}.cast-widget-card:disabled{opacity:.5;cursor:default;transform:none}
.cast-widget-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:var(--surface);font-size:22px}.cast-widget-copy{display:flex;min-width:0;flex-direction:column;gap:2px}.cast-widget-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.cast-widget-copy small{color:var(--muted);font-size:10.5px;font-weight:750}.cast-widget-plus,.cast-widget-count{width:25px;height:25px;display:grid;place-items:center;border-radius:50%;background:var(--accent);color:#fff;font-size:15px;font-weight:950}.cast-widget-count{background:var(--green)}
.cast-path-list{display:flex;flex-direction:column;gap:7px}.cast-path-step{display:grid;grid-template-columns:28px 34px minmax(105px,1fr) minmax(155px,1fr) minmax(130px,165px) auto;align-items:center;gap:8px;padding:8px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.cast-path-number{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:var(--accent);color:#fff;font-size:12px;font-weight:900}.cast-step-icon{font-size:22px;text-align:center}.cast-step-copy{display:flex;min-width:0;flex-direction:column;gap:2px}.cast-step-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.cast-step-copy small{color:var(--muted);font-size:10px}.cast-step-mode{min-width:0;width:100%}.cast-step-controls{display:flex;gap:4px}.cast-path-step .am-btn{min-width:32px;min-height:34px;padding:4px 7px}.cast-step-remove{color:var(--red)!important}.cast-sequence-count{flex:none;padding:4px 8px;border-radius:999px;background:var(--surface-2);color:var(--muted);font-size:10.5px;font-weight:850}.cast-path-progress{width:100%;height:7px;accent-color:var(--green)}
.cast-step-option{display:flex;min-width:0;flex-direction:column;gap:3px}.cast-step-option>span:first-child{overflow:hidden;color:var(--muted);font-size:9.5px;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.cast-step-theme{min-width:0;width:100%}.cast-theme-field{max-width:420px}.cast-theme-na{display:flex;min-height:35px;align-items:center;padding:0 9px;border:1px dashed var(--line);border-radius:9px;color:var(--muted);font-size:11px;font-weight:700}
.cast-path-empty,.cast-empty,.cast-kind-note{margin:0;padding:12px;border:1px dashed var(--line);border-radius:12px;background:var(--surface-2);color:var(--muted);font-size:12px;line-height:1.45}
.cast-audience{gap:8px}.cast-target-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:7px}.cast-target-card{display:flex;min-width:0;align-items:center;gap:9px;padding:9px 10px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);cursor:pointer}.cast-target-card:hover{border-color:var(--accent)}.cast-target-card:has(.cast-target-check:checked){border-color:var(--accent);background:var(--accent-soft)}.cast-target-check{width:19px;height:19px;flex:none;accent-color:var(--accent)}.cast-target-via{flex:none;padding:3px 7px;border-radius:999px;background:var(--accent);color:#fff;font-size:9.5px;font-weight:900}.cast-pupil-search{width:100%}.cast-pupil-grid{max-height:250px;overflow-y:auto;padding:2px}.cast-target-card[hidden]{display:none}
.cast-sendbar{position:sticky;z-index:2;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px -20px 0;padding:13px 20px calc(13px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(14px)}
.cast-send-summary{display:flex;min-width:0;flex-direction:column;gap:2px}.cast-send-summary strong{font-size:13px}.cast-send-summary span{color:var(--muted);font-size:11px}.cast-validation{color:var(--orange);font-size:10.5px;font-weight:800}.cast-send-button{min-height:44px;flex:none;padding:0 18px;border:0;border-radius:12px;background:var(--accent);color:#fff;font:inherit;font-weight:900;cursor:pointer;box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 30%,transparent)}.cast-send-button:hover{filter:brightness(.94)}.cast-send-button:disabled{opacity:.5;cursor:default;box-shadow:none}
body.hc .cast-kind-button,body.hc .cast-widget-card,body.hc .cast-target-card,body.hc .cast-composer-card{border-width:2px}

/* Leerkrachtdashboard: scanbare status per leerling */
#settingsModal .teacher-dashboard{margin:10px 0 20px}
#settingsModal .dashboard-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:10px}
#settingsModal .dashboard-summary-chip{display:flex;align-items:center;gap:7px;padding:9px 10px;border-radius:10px;background:var(--surface-2);color:var(--muted)}
#settingsModal .dashboard-summary-chip strong{font-size:20px;color:var(--ink)}
#settingsModal .dashboard-summary-chip span{font-size:11px;font-weight:800}
#settingsModal .dashboard-summary-chip.complete{box-shadow:inset 3px 0 var(--green)}
#settingsModal .dashboard-summary-chip.active{box-shadow:inset 3px 0 var(--blue)}
#settingsModal .dashboard-summary-chip.support{box-shadow:inset 3px 0 var(--orange)}
#settingsModal .dashboard-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
#settingsModal .dashboard-card{display:flex;flex-direction:column;align-items:stretch;gap:5px;text-align:left;padding:11px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font:inherit;cursor:pointer}
#settingsModal .dashboard-card:hover{border-color:var(--accent);box-shadow:0 4px 14px rgba(30,50,90,.1)}
#settingsModal .dashboard-status{align-self:flex-start;padding:2px 7px;border-radius:99px;background:var(--surface-2);color:var(--muted);font-size:10px;font-weight:900}
#settingsModal .dashboard-card.complete .dashboard-status{background:color-mix(in srgb,var(--green) 16%,var(--surface));color:var(--green)}
#settingsModal .dashboard-card.support .dashboard-status{background:color-mix(in srgb,var(--orange) 16%,var(--surface));color:var(--orange)}
#settingsModal .dashboard-name{font-size:14px}
#settingsModal .dashboard-path{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#settingsModal .dashboard-path-bar{display:block;height:5px;border-radius:99px;background:var(--surface-3);overflow:hidden}
#settingsModal .dashboard-path-bar i{display:block;height:100%;border-radius:inherit;background:var(--green)}
#settingsModal .dashboard-score{font-size:11.5px;font-weight:800;color:var(--muted)}
@media (max-width:700px){
  #castBackdrop .cast-composer-sheet{width:100%;max-width:none;max-height:94dvh;padding:14px 14px 0;border-radius:18px 18px 0 0}
  .cast-guide li{justify-content:center;padding:7px}.cast-guide li strong{display:none}
  .cast-kind-tabs{grid-template-columns:1fr}.cast-kind-button{min-height:54px}.cast-kind-button span{display:none}
  .cast-section-head{align-items:flex-start;flex-direction:column}.cast-section-head .cast-mini-actions{align-self:stretch}.cast-mini-actions .am-btn{flex:1}
  .cast-widget-grid{grid-template-columns:1fr 1fr}.cast-widget-card{grid-template-columns:34px minmax(0,1fr) 24px;min-height:58px;padding:7px}.cast-widget-icon{width:34px;height:34px;font-size:19px}
  .cast-path-step{grid-template-columns:26px 30px minmax(0,1fr) auto}.cast-step-theme-option{grid-column:2 / -1;grid-row:2}.cast-step-option:not(.cast-step-theme-option){grid-column:2 / -1;grid-row:3}.cast-step-controls{grid-column:4;grid-row:1}.cast-step-copy small{display:none}
  .cast-target-grid{grid-template-columns:1fr}.cast-pupil-head{align-items:flex-end}.cast-pupil-head .am-btn{font-size:11px}
  .cast-sendbar{margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px}.cast-send-summary span{display:none}.cast-send-button{padding:0 13px}
}
@media (max-width:420px){.cast-widget-grid{grid-template-columns:1fr}.cast-send-summary small{max-width:170px}.cast-sequence-count{white-space:normal}}
@media (max-width:600px){#settingsModal .dashboard-summary{grid-template-columns:1fr 1fr}}

/* Voortgang-tab: klassenmanagement-koppeling + grafiek (v0.4.35-beta e.v.) */
/* Realtime leersessies bovenin het klasdashboard */
#settingsModal .live-session-overview{margin-bottom:14px;padding:12px;border:1px solid color-mix(in srgb,var(--blue) 32%,var(--line));border-radius:14px;background:color-mix(in srgb,var(--blue) 5%,var(--surface))}
#settingsModal .live-session-head,#settingsModal .live-session-group-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
#settingsModal .live-session-head{margin-bottom:10px;font-size:14px}
#settingsModal .live-connection{padding:3px 8px;border-radius:99px;background:var(--surface-2);color:var(--orange);font-size:10px;font-weight:900}
#settingsModal .live-connection.connected{background:color-mix(in srgb,var(--green) 14%,var(--surface));color:var(--green)}
#settingsModal .live-session-group+.live-session-group{margin-top:12px}
#settingsModal .live-session-group-head{margin-bottom:6px;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.35px}
#settingsModal .live-session-group-head span{min-width:22px;padding:2px 6px;border-radius:99px;background:var(--surface-2);text-align:center;font-weight:900}
#settingsModal .live-session-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:7px}
#settingsModal .live-session-card{display:flex;min-width:0;flex-direction:column;align-items:flex-start;gap:4px;padding:10px;border:1px solid var(--line);border-radius:11px;background:var(--surface);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
#settingsModal .live-session-card:hover,#settingsModal .live-session-card:focus-visible{border-color:var(--accent);outline:2px solid var(--accent-soft);box-shadow:0 4px 12px rgba(30,50,90,.08)}
#settingsModal .live-session-card.live{border-color:color-mix(in srgb,var(--green) 45%,var(--line));box-shadow:inset 3px 0 var(--green)}
#settingsModal .live-session-card.recent{box-shadow:inset 3px 0 var(--line)}
#settingsModal .live-session-status{padding:2px 7px;border-radius:99px;background:var(--surface-2);color:var(--muted);font-size:10px;font-weight:900}
#settingsModal .live-session-card.live .live-session-status{background:color-mix(in srgb,var(--green) 15%,var(--surface));color:var(--green)}
#settingsModal .live-session-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
#settingsModal .live-session-widget,#settingsModal .live-session-time,#settingsModal .live-session-score{max-width:100%;color:var(--muted);font-size:11px;line-height:1.35}
#settingsModal .live-session-score{font-weight:850;color:var(--accent-ink)}

#settingsModal .am-combo-shell{display:flex;flex-direction:column;gap:14px}
#settingsModal .am-combo-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:14px;align-items:stretch;padding:16px;border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line));border-radius:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 10%,var(--surface)),var(--surface))}
#settingsModal .am-combo-hero-copy{display:flex;flex-direction:column;gap:8px}
#settingsModal .am-combo-kicker{color:var(--accent-ink);font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.48px}
#settingsModal .am-combo-title{margin:0;font-size:clamp(18px,3vw,26px);line-height:1.05}
#settingsModal .am-combo-lead{margin:0;max-width:62ch;color:var(--muted);font-size:13px;line-height:1.45}
#settingsModal .am-combo-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:4px}
#settingsModal .am-combo-stat{padding:10px 11px;border-radius:12px;background:var(--surface-2);display:flex;flex-direction:column;gap:2px}
#settingsModal .am-combo-stat strong{font-size:19px;line-height:1;color:var(--ink)}
#settingsModal .am-combo-stat span{font-size:10.5px;font-weight:850;color:var(--muted);text-transform:uppercase;letter-spacing:.35px}
#settingsModal .am-combo-chart{width:100%;min-height:140px;align-self:center}
#settingsModal .am-combo-chart rect{filter:drop-shadow(0 3px 8px rgba(20,35,60,.12))}
#settingsModal .am-combo-chart-value{fill:#fff;font-size:18px;font-weight:900}
#settingsModal .am-combo-chart-label{fill:var(--muted);font-size:10px;font-weight:800}
#settingsModal .am-combo-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:start}
#settingsModal .am-combo-pane{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:0 3px 14px rgba(20,35,60,.05)}
#settingsModal .am-combo-pane-title{font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.35px;color:var(--accent-ink)}
#settingsModal .am-combo-pane .teacher-dashboard{margin-top:0}
#settingsModal .am-combo-pane .am-group:first-child{margin-top:0}
#settingsModal .assignment-composer-cta{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:14px;background:var(--accent-soft)}
#settingsModal .assignment-composer-cta>div{display:flex;min-width:0;flex-direction:column;gap:3px}#settingsModal .assignment-composer-cta strong{font-size:13px;color:var(--accent-ink)}#settingsModal .assignment-composer-cta span{color:var(--muted);font-size:11px;line-height:1.35}#settingsModal .assignment-composer-cta .tbtn{flex:none;background:var(--accent);color:#fff}
@media (max-width:920px){#settingsModal .am-combo-hero{grid-template-columns:1fr}#settingsModal .am-combo-layout{grid-template-columns:1fr}}
@media (max-width:600px){#settingsModal .am-combo-stats{grid-template-columns:1fr 1fr}#settingsModal .assignment-composer-cta{align-items:stretch;flex-direction:column}#settingsModal .assignment-composer-cta .tbtn{width:100%}}

#settingsModal .progress-level-badge{
  display:inline-flex; align-self:flex-start; padding:4px 10px; margin-bottom:10px;
  border-radius:999px; background:var(--accent-soft); color:var(--accent-ink);
  font-size:12.5px; font-weight:700;
}
#settingsModal .progress-summary{
  display:flex; align-items:center; gap:16px; padding:14px; margin-bottom:12px;
  border:1px solid var(--line); border-radius:var(--radius-s); background:var(--surface);
}
#settingsModal .progress-ring{width:64px; height:64px; flex:none;}
#settingsModal .progress-ring-pct{font-size:22px; font-weight:800; fill:var(--ink);}
#settingsModal .progress-summary-text{flex:none; min-width:110px;}
#settingsModal .progress-summary-count{font-weight:700; font-size:14px; color:var(--ink);}
#settingsModal .progress-summary-hint{font-size:11.5px; color:var(--muted);}
#settingsModal .progress-bars{flex:1; min-width:0; height:56px;}
#settingsModal .am-card-sub .am-role{font-size:11.5px; margin-left:auto;}
#settingsModal .am-card-sub .am-edit{flex:none;}
#settingsModal .am-card-sub .am-row-tools{width:100%;}
#settingsModal .img-quota-pick{margin-bottom:8px; max-width:420px;}
/* status-glyph (● actief / ○ wacht) met uitleg via title */
#settingsModal .am-glyph{flex:none; font-size:10px; color:var(--muted); cursor:default;}
#settingsModal .am-glyph.ok{color:var(--green);}
/* mobiel: rijen binnen het beheer niet meer verticaal stapelen - de generieke
   stapelregel maakte school en subrij ononderscheidbaar; wrap vangt overloop */
@media (max-width:600px){
  #settingsModal .am-row{flex-direction:row; align-items:center; flex-wrap:wrap;}
  /* kaartkop mag wrappen: titel houdt regel 1, samenvatting+Bewerken eronder */
  #settingsModal .am-card-head{flex-wrap:wrap;}
  /* compacte subrij op telefoon: naam + Bewerken op regel 1, verbruik eronder */
  #settingsModal .am-card-sub .am-role{order:3; flex-basis:100%; margin-left:0;}
  #settingsModal .am-card-sub .am-edit{margin-left:auto;}
}

/* ---- inklapbare koppen: wachtwoordblok (Account) en Inhoud-kaarten ---- */
#settingsModal .am-h3-toggle{cursor:pointer; user-select:none;}
#settingsModal .am-h3-toggle::after{content:" ▸";}
#settingsModal .am-h3-toggle.open::after{content:" ▾";}
#settingsModal .am-h3-toggle:hover{color:var(--ink);}
#settingsModal #ownPwBlock{display:none;}
#settingsModal #ownPwBlock.open{display:flex;}
#settingsModal .am-card-head.am-card-toggle{cursor:pointer;}
#settingsModal .cms-card-body{padding:10px 12px;}
#settingsModal .cms-card-body .am-reset{border:none; padding:0; background:transparent;}

/* ---- uniforme control-maat: elk veld/knop in het beheer even hoog ---- */
#settingsModal .am-btn,
#settingsModal .am-copy,
#settingsModal .tbtn,
#settingsModal .am-edit,
#settingsModal .am-inp,
#settingsModal .am-sel,
#settingsModal .am-pw,
#settingsModal input[type="search"],
#settingsModal input[type="number"],
#settingsModal input[type="password"],
#settingsModal input[type="text"]{
  height:var(--control-h); min-height:var(--control-h); box-sizing:border-box;
  font-size:13px; line-height:1;
}
#settingsModal .am-edit{padding:0 12px; opacity:.75;}
#settingsModal .am-edit:hover{opacity:1;}
/* textarea's (CMS) mogen hoger; niet vastpinnen */
#settingsModal textarea.am-inp, #settingsModal .cms-ta{height:auto; min-height:64px;}
/* labels boven de velden even breed als hun veld zodat rijen uitlijnen */
#settingsModal .am-field{gap:4px;}