/* teach - alle opmaak */
  :root{
    --bg:#eef3f8; --panel:#ffffff; --ink:#26344a; --muted:#7b8aa3;
    --blue:#3b7dd8; --blue-d:#2b62b0; --red:#e0554d; --green:#3fae6a;
    --yellow:#f7c948; --purple:#9b59b6; --orange:#f28c38;
    --wood:#f6e7c9; --wood-d:#e8d2a4;
    --radius:16px; --shadow:0 10px 30px rgba(30,50,90,.18);
    /* minimale tikzones voor touch (WCAG/iOS-richtlijn) */
    --tap:44px; --tap-sm:36px;
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  *::-webkit-scrollbar{width:8px; height:8px;}
  *::-webkit-scrollbar-thumb{background:#c3cfde; border-radius:4px;}
  *::-webkit-scrollbar-track{background:transparent;}
  html,body{height:100%; margin:0; overflow:hidden;}
  body{
    font-family:"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;}
  /* ---------- Toolbar ---------- */
  #toolbar{
    position:fixed; top:0; left:0; right:0; height:58px; z-index:5000;
    background:var(--panel); box-shadow:0 2px 10px rgba(30,50,90,.10);
    display:flex; align-items:center; gap:10px; padding:0 16px;
    overflow-x:auto; overflow-y:hidden; scrollbar-width:none;
  }
  #toolbar::-webkit-scrollbar{display:none;}
  #zoomPct{min-width:58px; padding:9px 8px; font-size:13px; text-align:center;}
  #zoomPct.on{background:var(--yellow); color:#6b5200;}
  #btnZoomIn:disabled,#btnZoomOut:disabled{opacity:.35; cursor:default;}
  .logo{display:flex; align-items:baseline; gap:1px; font-size:30px; font-weight:900; line-height:1;}
  .logo span{display:inline-block; transform-origin:bottom center;}
  .logo .l1{color:var(--red);    transform:rotate(-6deg);}
  .logo .l2{color:var(--orange); transform:rotate(4deg) translateY(-2px);}
  .logo .l3{color:var(--green);  transform:rotate(-3deg);}
  .logo .l4{color:var(--blue);   transform:rotate(5deg) translateY(-1px);}
  .logo .l5{color:var(--purple); transform:rotate(-4deg);}
  .logo .crayon{font-size:24px; margin-left:6px; transform:rotate(10deg);}
  #verTag{font-size:10.5px; font-weight:700; color:var(--muted); align-self:flex-end; margin-left:4px; transform:none;}
  #verTag.beta{color:#fff; background:var(--orange); padding:1px 7px; border-radius:8px;}
  .logo:hover span:not(.crayon){animation:bounce .5s;}
  .logo .l2{animation-delay:.05s;} .logo .l3{animation-delay:.1s;}
  .logo .l4{animation-delay:.15s;} .logo .l5{animation-delay:.2s;}
  @keyframes bounce{0%,100%{transform:translateY(0);} 40%{transform:translateY(-8px);}}
  #toolbar .spacer{flex:1;}
  .tbtn{
    border:none; border-radius:12px; padding:9px 14px; font:inherit; font-weight:700;
    background:var(--blue); color:#fff; cursor:pointer; font-size:14.5px;
  }
  .tbtn:hover{background:var(--blue-d);}
  .tbtn.ghost{background:#e8eef6; color:var(--ink);}
  .tbtn.ghost:hover{background:#dbe5f1;}
  #btnSave{min-width:158px; text-align:center;}
  #btnSave.ok{background:var(--green); color:#fff;}
  #btnUser.on{background:var(--green); color:#fff;}
  #langToggle{display:flex; background:#e8eef6; border-radius:12px; overflow:hidden;}
  #langToggle button{
    border:none; padding:9px 13px; font:inherit; font-weight:700; cursor:pointer;
    background:transparent; color:var(--muted); font-size:13.5px;
  }
  #langToggle button.active{background:var(--blue); color:#fff;}
  /* ---------- Board ---------- */
  #board{position:absolute; inset:58px 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;}
  body.pen #boardInk{pointer-events:auto; cursor:crosshair;}
  body.pen.pen-text #boardInk{cursor:text;}
  body.pen.pen-hand #boardInk{pointer-events:none;} /* hand tool: interact with everything */
  /* 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:#fff; border-radius:12px;
    border:2.5px solid #e3eaf3; cursor:pointer; overflow:hidden;
  }
  .bs-card:hover{border-color:var(--blue);}
  .bs-card.active{border-color:var(--yellow);}
  .bs-card canvas{display:block; width:168px; height:105px; background:#fff;}
  .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:#fbe3e1; 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;
  }
  /* folder management panel (save menu) */
  #boardsPanel{
    position:fixed; right:16px; top:64px; z-index:5600; width:300px; max-height:66vh;
    overflow:auto; display:none; flex-direction:column; gap:8px; padding:12px;
    border-radius:16px; background:rgba(255,255,255,.96); backdrop-filter:blur(12px);
    box-shadow:0 10px 30px rgba(30,50,90,.3); border:1px solid rgba(255,255,255,.7);
  }
  #boardsPanel.open{display:flex;}
  .bp-folder{display:flex; align-items:center; gap:6px; font-weight:800; font-size:14px; margin-top:4px;}
  .bp-folder .bpf-name{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .bp-folder button{
    border:none; background:#e8eef6; border-radius:8px; padding:4px 8px; font:inherit;
    font-weight:800; font-size:11.5px; cursor:pointer; color:var(--muted); flex:none;
  }
  .bp-folder button:hover{background:#dbe5f1; color:var(--ink);}
  .bp-boards{display:flex; flex-wrap:wrap; gap:6px;}
  .bp-board{
    display:flex; align-items:center; gap:5px; border:2px solid #e3eaf3; background:#fff;
    border-radius:10px; padding:5px 10px; font:inherit; font-weight:700; font-size:12.5px;
    cursor:pointer; color:var(--muted);
  }
  .bp-board.active{border-color:var(--yellow); background:var(--yellow); color:#6b5200;}
  .bp-board .bpb-x{border:none; background:transparent; color:var(--red); font-weight:900;
    cursor:pointer; padding:0; font-size:11px; opacity:.8;}
  .bp-board:hover .bpb-x{opacity:1;}
  .bp-board input{border:none; outline:none; font:inherit; width:80px; background:transparent;}
  .bp-new{display:flex; gap:6px; margin-top:6px;}
  .bp-new input{
    flex:1; min-width:0; border:2px solid #cdd9e8; border-radius:10px; padding:7px 9px;
    font:inherit; font-size:13px; outline:none;
  }
  .bp-hint{font-size:11px; color:var(--muted); font-weight:700;}
  #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:#fff; transform:translateX(-4px);}
  .fab-item.on{background:var(--yellow);}
  .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:#e8eef6 !important; color:var(--ink) !important;}
  .pen-close.on{background:var(--yellow) !important; color:#6b5200 !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:#fff; 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 #cdd9e8;}
  .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:#e8eef6;}
  .mm-pop .mp-fs.on{background:var(--yellow);}
  .mm-pop .mp-ls{width:34px; height:24px; border-radius:7px; background:#e8eef6; position:relative;}
  .mm-pop .mp-ls.on{background:var(--yellow);}
  .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 */
  .dtool{position:absolute; z-index:3; 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:#fbe3e1; 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;}
  .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:#fff;
    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(--yellow);}
  .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:#fff; 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:#fff;}
  .mm-stage svg{position:absolute; inset:0; width:100%; height:100%; pointer-events:none;}
  .mm-node{
    position:absolute; transform:translate(-50%,-50%); background:#fff;
    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:#fbe3e1; 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:#e8eef6; 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:#dbe5f1;}
  #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 - 84px); 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:#fff;
    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:#eef3f9; transform:translateY(-2px);}
  .dock-item .di{font-size:16px; line-height:1;}
  .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:#fbe3e1; 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:#e8eef6; 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:#dbe5f1;}
  .wz{font-size:10.5px; width:auto; min-width:30px; padding:0 5px;}
  .wz.on{background:var(--yellow); color:#6b5200;}
  .widget-body{flex:1; overflow:hidden; position:relative; display:flex; flex-direction:column; min-height:0;}
  /* ---------- Modals ---------- */
  .modalwrap{
    position:fixed; inset:0; z-index:6000; background:rgba(30,45,70,.45);
    display:none; align-items:center; justify-content:center;
  }
  .modalwrap.open{display:flex;}
  .modal{
    background:var(--panel); border-radius:20px; padding:26px; width:min(680px,92vw);
    max-height:88vh; overflow:auto; box-shadow:var(--shadow);
  }
  .modal h2{margin:0 0 18px; font-size:21px;}
  .gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px;}
  .gcard{
    border:2px solid #e3eaf3; border-radius:16px; padding:18px 14px; text-align:center;
    cursor:pointer; transition:all .15s; background:#fbfdff;
  }
  .gcard:hover{border-color:var(--blue); transform:translateY(-2px); box-shadow:0 6px 18px rgba(59,125,216,.18);}
  .gcard .gi{font-size:38px;}
  .gcard .gn{font-weight:800; margin-top:8px; font-size:15px;}
  .gcard .gd{font-size:12.5px; color:var(--muted); margin-top:4px; line-height:1.35;}
  /* login modal */
  #loginModal{width:min(400px,92vw);}
  #loginModal input{
    width:100%; border:2px solid #cdd9e8; border-radius:12px; padding:11px 12px;
    font:inherit; font-size:16px; outline:none; margin-bottom:10px;
  }
  #loginModal input:focus{border-color:var(--blue);}
  .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;}
  #loginMsg{min-height:20px; font-size:13.5px; font-weight:700; color:var(--red); margin:6px 0;}
  #loginMsg.ok{color:var(--green);}
  .guestnote{font-size:13px; color:var(--muted); margin-top:12px; line-height:1.45;}
  #loggedBox{display:none;}
  #loggedBox .hello{font-size:18px; font-weight:800; margin-bottom:14px;}
  /* =========================================================
     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:#e8eef6; border-radius:12px; overflow:hidden;}
  .lg-levels button{
    border:none; background:transparent; padding:8px 13px; font:inherit; font-weight:800;
    font-size:13.5px; color:var(--muted); cursor:pointer;
  }
  .lg-levels button.active{background:var(--green); color:#fff;}
  .lg-cards{display:flex; gap:5px; flex-wrap:wrap;}
  .lg-cards button{
    border:2px solid #e3eaf3; background:#fff; 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(--yellow); background:var(--yellow); color:#6b5200;}
  .lg-cards .lg-theme{
    width:auto; padding:0 11px; max-width:120px; overflow:hidden;
    text-overflow:ellipsis; white-space:nowrap;
  }
  .lg-num{
    border:2px solid #e3eaf3; border-radius:10px; height:34px; font:inherit;
    font-weight:800; font-size:13px; color:var(--muted); background:#fff;
    padding:0 4px; outline:none; cursor:pointer;
  }
  .lg-snd,.lg-mode{
    border:2px solid #e3eaf3; border-radius:10px; width:34px; height:34px;
    background:#fff; 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{width:46px; height:74px; border-radius:10px; padding-top:4px;}
  .blok.sm .bl{font-size:24px; height:30px; color:var(--purple);}
  .blok.sm .dots,.slot.sm .dots{grid-template-columns:repeat(2,7px); grid-template-rows:repeat(3,7px); gap:2.5px;}
  .blok.sm .dots i,.slot.sm .dots i{width:7px; height:7px;}
  .blok.sm .blok-dots{margin-bottom:7px;}
  .slot.sm{width:46px; height:74px; padding-top:4px;}
  .slot.sm .ghost{font-size:22px; height:26px;}
  .slot.sm .slot-dots{margin-bottom:6px;}
  .slot.sm .dots i.off{width:6px; height: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:2px solid #cdd9e8; border-radius:10px; padding:9px 10px;
    font:inherit; font-weight:700; font-size:15px; outline:none; background:#fff; cursor:pointer;
  }
  .ed-theme-name{
    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:#fbe3e1; 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;}
  .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:#f1f7ff; 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:linear-gradient(#ffffff,#f6fafe); border:2px solid #e3eaf3;
    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{
    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;}
  .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{
    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:10px;}
  .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:9px;}
  .dots{display:grid; grid-template-columns:repeat(2,9px); grid-template-rows:repeat(3,9px); gap:3px;}
  .dots i{width:9px; height:9px; border-radius:50%; background:transparent;}
  .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:7px; height:7px;}
  .lg-tray{
    display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
    background:#eef3f9; 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:#fff; 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:#f1f7ff; border-radius:14px; padding:12px;
  }
  .lg-ed-form input[type=text]{
    border:2px solid #cdd9e8; 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:#fff; border-radius:10px; border:2px dashed #cdd9e8; 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;}
  /* picture picker tabs */
  .ed-tabs{display:flex; gap:6px;}
  .ed-tabs button{
    border:none; border-radius:10px 10px 0 0; padding:9px 16px; font:inherit; font-weight:800;
    font-size:13.5px; background:#e8eef6; color:var(--muted); cursor:pointer;
  }
  .ed-tabs button.active{background:var(--yellow); color:#6b5200;}
  .ed-pane{background:#fbfdff; border:2px solid #e3eaf3; border-radius:0 12px 12px 12px; padding:12px; min-height:120px;}
  .ed-cats{display:flex; gap:5px; flex-wrap:wrap; margin-bottom:10px;}
  .ed-cats button{
    border:none; background:#e8eef6; border-radius:9px; padding:6px 11px; font:inherit;
    font-weight:800; font-size:12.5px; color:var(--muted); cursor:pointer;
  }
  .ed-cats button.active{background:var(--blue); color:#fff;}
  .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(--yellow);}
  .ed-pictorow{display:flex; gap:8px; margin-bottom:10px;}
  .ed-pictorow input{flex:1; border:2px solid #cdd9e8; 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:2px solid #e3eaf3; background:#fff; 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(--yellow); background:#fff8e1;}
  .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:#e8eef6; 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;}
  .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:#f7fafd; 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:#fbe3e1; 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:14px; outline:none; background:#fffdf2; color:var(--ink);}
  /* =========== 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:#f7fafd; border-bottom:1px solid #e3eaf3;
  }
  .wp-group{display:flex; gap:4px; align-items:center; background:#e8eef6; 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:#fff; 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:#fbe3e1; 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:#fff;}
  .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:#f7fafd; border-bottom:1px solid #e3eaf3;
  }
  .media-bar input{
    flex:1; min-width:0; border:2px solid #cdd9e8; 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:linear-gradient(#fff,#f6fafe);
    border:2px solid #e3eaf3; 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:#eef3f9; 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:#e8eef6; font:inherit; font-weight:900;
    font-size:22px; padding:12px 0; cursor:pointer; color:var(--ink);
  }
  .mt-pad button:hover{background:#dbe5f1;}
  .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 =========== */
  body.hc{--bg:#fff; --ink:#000; --muted:#2b2b2b; --blue:#0047ab; --red:#c40000;
    --green:#006b2d; --yellow:#ffd400; --wood:#ffe9b0; --wood-d:#8a6a00;}
  body.hc #board.bg-dots{background-image:radial-gradient(circle,#7d8ea3 1.7px,transparent 1.7px);}
  body.hc .widget{background:#fff; 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:#fff;}
  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:#fff;}
  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:#fff; 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:#fff;}
  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;}
  #btnHC.on{background:var(--yellow); color:#000;}
  /* high contrast inside every widget */
  body.hc .lg-levels,body.hc .tseg{background:#fff; 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:#fff;
  }
  body.hc .lg-cards button.active{background:#ffd400; border-color:#000; color:#000;}
  body.hc .lg-tray{background:#fff; border:2px dashed #000;}
  body.hc .lg-card,body.hc .mt-card{background:#fff; 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:#fff;}
  body.hc .mt-pad button{background:#fff; 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 .bp-hint,body.hc .gcard .gd{color:#222;}
  body.hc .gcard{border-color:#000; background:#fff;}
  body.hc .gcat-title{color:#000;}
  body.hc .tbtn.ghost{background:#fff; border:2px solid #000; color:#000;}
  body.hc .wmin,body.hc .wclose{border:1.5px solid #000; background:#fff;}
  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:#fff; 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:#fff;}
  body.hc .timer .presets button,body.hc .timer .main button,body.hc .ticon,
  body.hc .hud-btn,body.hc .mm-seg button{background:#fff; border:1.5px solid #000; color:#000;}
  body.hc .timer .main .bstart{background:#006b2d; border-color:#006b2d; color:#fff;}
  body.hc .bp-board{border-color:#000; color:#000;}
  body.hc .bp-board.active{background:#ffd400;}
  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:2px solid #e3eaf3; border-radius:10px; height:34px; font:inherit;
    font-weight:800; font-size:13px; color:var(--muted); background:#fff;
    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:#f7fafd; border-bottom:1px solid #e3eaf3;
  }
  .an-stage{flex:1; min-height:0; position:relative; overflow:hidden; background:#fff; 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; 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:#fff; 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-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:#fff; 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; align-items:center; justify-content:center; padding:14px;}
  .tl-house{background:#22272f; border-radius:26px; padding:20px 18px; display:flex; flex-direction:column; gap:16px; box-shadow:0 10px 26px rgba(0,0,0,.35);}
  .tl-lamp{
    width:100px; height:100px; border-radius:50%; border:none; 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-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:2px solid #cdd9e8; 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;}
  /* 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:#e8eef6; border-radius:10px; overflow:hidden;}
  .tseg button{border:none; background:transparent; padding:7px 13px; font-size:15px; cursor:pointer; line-height:1;}
  .tseg button.on{background:var(--blue); color:#fff;}
  .mm-seg button{font:inherit; font-weight:800; font-size:13px;}
  .ticon{border:none; background:#e8eef6; border-radius:10px; padding:7px 11px; font-size:15px; cursor:pointer; line-height:1;}
  .ticon.on{background:var(--yellow);}
  .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:#e8eef6; font:inherit;
    font-weight:800; font-size:12.5px; color:var(--muted); cursor:pointer;
  }
  .timer .presets button:hover{background:#dbe5f1; 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:#e8eef6; 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:2px solid #cdd9e8; border-radius:12px; padding:11px 12px;
  font:inherit; font-size:15px; outline:none; margin-bottom:10px; background:#fff;
}
.lidiv{height:1.5px; background:#e3eaf3; margin:14px 0;}
.lisub{font-size:13px; font-weight:700; color:var(--muted); margin-bottom:8px;}
#ownPwRow{margin-bottom:10px;}
#ownPwRow input{
  flex:1; min-width:0; border:2px solid #cdd9e8; border-radius:12px;
  padding:10px 12px; font:inherit; font-size:15px; outline:none;
}
/* ---------- beheerpaneel ---------- */
#adminModal{width:min(760px,94vw); max-height:86vh; overflow:auto;}
.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;}
.am-msg{
  min-height:20px; font-size:13.5px; font-weight:800; color:var(--green); margin:4px 0;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.am-add{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:8px 0;}
.am-inp,.am-sel{
  border:2px solid #cdd9e8; border-radius:10px; padding:8px 10px; font:inherit;
  font-size:14px; outline:none; background:#fff; min-width:0;
}
.am-inp{flex:1; min-width:140px;}
.am-list{display:flex; flex-direction:column; gap:5px;}
.am-group{font-weight:900; font-size:13px; margin-top:10px; color:var(--ink);}
.am-row{
  display:flex; gap:8px; align-items:center; background:#f7fafd;
  border-radius:10px; padding:6px 10px; flex-wrap:wrap;
}
.am-name{font-weight:800; font-size:14px; flex:1; min-width:120px;}
.am-role{font-size:12px; font-weight:700; color:var(--muted);}
.am-pw{
  border:2px solid #cdd9e8; border-radius:8px; padding:5px 8px; font:inherit;
  font-size:13px; width:110px; outline:none;
}
.am-code{font-size:12.5px; font-weight:800; color:var(--orange);}
.am-actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.am-btn{
  border:none; background:#e8eef6; border-radius:8px; padding:6px 10px;
  font:inherit; font-weight:800; font-size:12px; cursor:pointer; color:var(--ink);
}
.am-btn:hover{background:#dbe5f1;}
.am-del{
  border:none; background:#fbe3e1; border-radius:8px; width:28px; height:28px;
  cursor:pointer; font-size:13px;
}
.am-del:hover{background:var(--red);}
.am-classes{display:flex; gap:6px; flex-wrap:wrap;}
.am-chip{
  display:inline-flex; gap:6px; align-items:center; background:#fff;
  border:2px solid #e3eaf3; border-radius:999px; padding:5px 12px;
  font-weight:800; font-size:13px;
}
.am-chipx{border:none; background:transparent; color:var(--red); font-weight:900; cursor:pointer; padding:0; font-size:11px;}
.am-copy{
  border:none; background:#e8eef6; border-radius:8px; padding:5px 8px;
  font:inherit; font-size:13px; cursor:pointer; color:var(--ink); line-height:1;
}
.am-copy:hover{background:#dbe5f1;}
.am-reset{
  background:#f7fafd; border:2px solid #cdd9e8; 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:#fff;
  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:#fff;}
body.hc .am-reset,body.hc .am-reset-row{border:1.5px solid #000; background:#fff;}

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

/* ---------- tablet (≤1024px) ---------- */
@media (max-width:1024px){
  /* #boardsPanel had een vaste 300px-breedte die op smallere
     schermen overflowt; #boardStrip deed dit al goed. */
  #boardsPanel{width:min(300px, calc(100vw - 32px));}
}

/* ---------- telefoon (≤600px) ---------- */
@media (max-width:600px){
  #toolbar{padding:0 8px; gap:6px;}
  .logo{font-size:22px;}
  .logo .crayon{font-size:18px; margin-left:4px;}
  #verTag{display:none;}
  .tbtn{padding:8px 10px; font-size:13px;}
  #boardsPanel{top:60px; max-height:min(66vh,480px);}

  /* 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){
  .tbtn{min-height:var(--tap-sm);}
  #langToggle button{min-height:var(--tap-sm);}
  .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-btn,.am-copy{min-height:var(--tap-sm); padding:8px 12px;}
  .am-del{width:var(--tap-sm); height:var(--tap-sm);}
  .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;}
}