/* whiteboard.css — Whiteboard, whiteboard assignments, snapshots widget. */
/* ── Whiteboard input boxes ────────────────────────── */
#wb-input-layer{position:fixed;z-index:7050;pointer-events:none;display:none}
#wb-stu-input-layer{position:fixed;z-index:8050;pointer-events:none;display:none}
.wb-input-box{position:absolute;background:rgba(255,255,255,.96);border:2px solid #6366f1;border-radius:8px;padding:.5rem .6rem;box-shadow:0 2px 12px rgba(0,0,0,.12);pointer-events:auto;font-family:"Poppins",sans-serif;font-size:.8125rem;min-height:60px;box-sizing:border-box}
.wb-ib-placing{border-style:dashed;border-color:#94a3b8}
.wb-ib-label{font-weight:600;color:#1e1e2e;margin-bottom:.3rem;word-break:break-word}
.wb-ib-label-edit{outline:none;min-width:120px;color:#1e1e2e;font-weight:600;border-bottom:2px solid #6366f1;padding:0 2px;word-break:break-word}
.wb-ib-label-edit:empty::before{content:attr(data-ph);color:#94a3b8;font-weight:400}
.wb-ib-hint{font-size:.72rem;color:#94a3b8;margin-top:.25rem}
.wb-ib-footer{display:flex;align-items:center;gap:.5rem;margin-top:.25rem}
.wb-ib-count{font-size:.75rem;color:#6366f1;font-weight:500}
.wb-ib-show-btn{font-size:.72rem;background:#6366f1;color:#fff;border:none;border-radius:5px;padding:.18rem .5rem;cursor:pointer;font-family:inherit}
.wb-ib-del{position:absolute;top:-8px;right:-8px;width:20px;height:20px;border-radius:50%;background:#ef4444;color:#fff;border:none;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;font-family:inherit}
.wb-ib-drag{position:absolute;top:2px;left:50%;transform:translateX(-50%);cursor:grab;font-size:14px;color:#94a3b8;padding:0 4px;user-select:none;line-height:1}.wb-ib-drag:active{cursor:grabbing}
.wb-ib-mode{border:none;border-radius:4px;padding:.1rem .4rem;font-size:.7rem;font-family:inherit;cursor:pointer;font-weight:600;flex-shrink:0}
.wb-ib-mode-direct{background:#dbeafe;color:#1d4ed8}
.wb-ib-mode-copy{background:#fef9c3;color:#854d0e}
.wb-ib-mode-pick{display:flex;flex-direction:column;gap:.35rem;margin-top:.4rem}
.wb-ib-pick-btn{border:2px solid transparent;border-radius:7px;padding:.4rem .6rem;font-size:.78rem;font-family:inherit;cursor:pointer;font-weight:600;text-align:left;transition:background .12s,border-color .12s}
.wb-ib-pick-direct{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8}.wb-ib-pick-direct:hover{background:#dbeafe}
.wb-ib-pick-copy{background:#fefce8;border-color:#fde68a;color:#92400e}.wb-ib-pick-copy:hover{background:#fef9c3}
#wba-stu-stage{position:relative}
#wba-stu-input-layer{position:absolute;inset:14px;pointer-events:none;display:none;z-index:2}
.wb-ib-ta{width:100%;border:1.5px solid #d1d5db;border-radius:5px;padding:.3rem .4rem;font-size:.8125rem;font-family:inherit;resize:none;box-sizing:border-box;margin:.25rem 0 .3rem}
.wb-ib-ta:focus{outline:none;border-color:#6366f1}
.wb-ib-ta:disabled{background:#f1f5f9;color:#64748b}
.wb-ib-submit-btn{background:#6366f1;color:#fff;border:none;border-radius:6px;padding:.3rem .75rem;font-size:.8rem;cursor:pointer;font-family:inherit;font-weight:600}
.wb-ib-submit-btn.wb-ib-sent{background:#059669}
.wb-ib-submit-btn:disabled{background:#94a3b8;cursor:default}
.wb-ib-answer-pop{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.22);padding:1.25rem 1.5rem;min-width:300px;max-width:480px;max-height:60vh;overflow-y:auto;z-index:7200;font-family:"Poppins",sans-serif}
.wb-ib-ap-title{font-weight:700;font-size:.9375rem;margin-bottom:.75rem;color:#1e1e2e}
.wb-ib-ap-row{display:flex;flex-direction:column;gap:.1rem;padding:.5rem 0;border-bottom:1px solid #f1f5f9;font-size:.8125rem}
.wb-ib-ap-row strong{color:#6366f1;font-size:.75rem}
.wb-ib-ap-row span{color:#1e1e2e}
.wb-ib-ap-empty{color:#94a3b8;font-size:.8125rem;padding:.5rem 0}
.wb-ib-ap-close{position:absolute;top:.75rem;right:.75rem;background:none;border:none;font-size:1.25rem;cursor:pointer;color:#64748b}
/* ── Whiteboard modal ─────────────────────────────── */
#wb-modal{position:fixed;inset:0;z-index:7000;display:none;flex-direction:column;background:#f0f4f7}
#wb-tbar{display:flex;align-items:center;gap:.25rem;padding:.4rem .75rem;background:var(--el);border-bottom:1px solid var(--border);flex-shrink:0;white-space:nowrap;overflow-x:auto;overflow-y:visible;box-shadow:0 1px 4px rgba(0,0,0,.05);scrollbar-width:none}
#wb-tbar::-webkit-scrollbar{display:none}
.wbtb-g{display:flex;align-items:center;gap:.2rem}
.wbtb-sep{width:1px;height:1.4rem;background:var(--border);margin:0 .35rem;flex-shrink:0}
.wbtb-spacer{flex:1}
.wbtool,.wbtb-act{width:2rem;height:2rem;min-width:2rem;max-width:2rem;border-radius:var(--r-md);border:none;background:transparent;color:var(--font-sub);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .12s,color .12s;flex-shrink:0;padding:0;overflow:hidden}
.wbtool:hover,.wbtb-act:hover{background:var(--bg);color:var(--font)}
.wbtool.wbtb-on{background:var(--main-sub);color:var(--main)}
.wbcol{width:1.25rem;height:1.25rem;border-radius:50%;background:var(--cc);border:2.5px solid transparent;cursor:pointer;transition:transform .12s,border-color .12s;flex-shrink:0;outline:2px solid rgba(0,0,0,.1);outline-offset:0}
.wbcol:hover{transform:scale(1.2)}
.wbcol.wbcol-on{outline-color:var(--main);transform:scale(1.2)}
.wbcol-more{position:relative;width:auto;height:auto;min-width:1.25rem;min-height:1.25rem;border-radius:50%;background:#fff;outline-color:rgba(0,0,0,.15);display:grid;place-items:center;color:#555}
/* Shrunk to a 1px inert speck, not a full-size overlay — see the comment above _showColPicker's
   markup for why a bigger one caused the native picker to reopen on every later click. */
.wbcol-more-inp{position:absolute;top:0;left:0;width:1px;height:1px;opacity:0;pointer-events:none;border:none;padding:0}
.wbcol-pick{width:2.8rem;height:2.8rem;min-width:2.8rem;border-radius:var(--r-md);background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .12s,transform .12s}
.wbcol-pick:hover{background:var(--bg);transform:scale(1.06)}
#wb-col-pop{position:fixed;z-index:99999;background:var(--el);border:1px solid var(--border);border-radius:var(--r-lg);padding:.45rem .55rem;box-shadow:0 4px 18px rgba(0,0,0,.15);display:flex;gap:.4rem;align-items:center}
.wbw-dots{border:none;background:transparent;cursor:pointer;padding:0 .35rem;height:2.8rem;display:flex;align-items:center;border-radius:var(--r-sm);color:var(--font-sub);transition:background .12s,color .12s;flex-shrink:0}
.wbw-dots:hover{background:var(--bg);color:var(--font)}
#wb-w-pop{position:fixed;z-index:99999;background:var(--el);border:1px solid var(--border);border-radius:var(--r-lg);padding:.75rem 1.1rem;box-shadow:0 4px 18px rgba(0,0,0,.15);width:14rem;display:flex;flex-direction:column;align-items:center;gap:.6rem}
.wb-w-prev-wrap{height:3rem;display:flex;align-items:center;justify-content:center;width:100%}
#wb-w-prev{border-radius:50%;flex-shrink:0;transition:width .07s,height .07s}
.wb-w-slider{width:100%;-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;background:var(--border);outline:none;cursor:pointer}
.wb-w-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--main);cursor:pointer;box-shadow:0 0 0 3px rgba(57,176,187,.2)}
.wb-w-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--main);cursor:pointer;border:none}
/* Text action buttons (top toolbar) */
.wbtb-txt{border:1.5px solid var(--border);background:var(--bg);color:var(--font);border-radius:var(--r-md);padding:.3rem .7rem;font-size:.78rem;font-weight:500;cursor:pointer;transition:background .12s,border-color .12s,color .12s;white-space:nowrap;font-family:"Poppins",sans-serif;display:flex;align-items:center;gap:.3rem;flex-shrink:0;height:auto!important;width:auto!important;max-width:none!important;overflow:visible!important}
.wbtb-txt:hover{background:var(--main-sub);border-color:var(--main);color:var(--main)}
.wbtb-txt:disabled{opacity:.45;cursor:not-allowed}
.wbtb-txt.wbtb-show-on{background:var(--bg);border-color:var(--border);color:var(--font)}
.wbtb-txt.wbtb-show-on:hover{background:var(--bg);border-color:var(--border)}
#wba-tbar-dist.wba-active{background:#fef2f2;border-color:#fecaca;color:#dc2626}
.wbtb-save-btn{background:#f8fafc;border-color:#dde3ed;color:#334155}
.wbtb-save-btn:hover{background:#e6f7f8;border-color:#39b0bb;color:#0c6b75}
.wbtb-clear-act:hover{background:#fef2f2!important;color:#dc2626!important;border-color:#fecaca!important}
.wbtb-close-wb{color:#64748b}
.wbtb-close-wb:hover{background:#fef2f2!important;border-color:#fecaca!important;color:#dc2626!important}
.wb-grid-opt{display:flex;flex-direction:column;align-items:center;gap:.25rem;border:1.5px solid transparent;border-radius:var(--r-md);background:transparent;padding:.35rem .45rem;cursor:pointer;transition:background .12s,border-color .12s}
.wb-grid-opt span{font-size:.6rem;font-weight:600;color:var(--font-sub);white-space:nowrap}
.wb-grid-opt:hover{background:var(--bg);border-color:var(--border)}
.wb-grid-opt--on{background:var(--main-sub);border-color:var(--main)}
.wb-grid-opt--on span{color:var(--main)}
.wbtb-brand{display:flex;align-items:center;gap:.4rem;flex-shrink:0;padding-right:.1rem}
.wbtb-brand-lbl{font-family:"Poppins",sans-serif;font-size:1rem;font-weight:600;color:var(--main);white-space:nowrap}
.wbbg{width:1.25rem;height:1.25rem;border-radius:50%;background:var(--bgc);border:2px solid transparent;cursor:pointer;flex-shrink:0;outline:2px solid rgba(0,0,0,.08);outline-offset:0;transition:transform .12s,outline-color .12s}
.wbbg:hover{transform:scale(1.2)}
.wbbg-on{outline-color:var(--main);transform:scale(1.2)}
#wb-draw-bar .wbbg{width:1.5rem;height:1.5rem}
.wb-ib-readonly-hint{font-size:.72rem;color:#94a3b8;font-style:italic;margin-top:.25rem}
.wb-bg-dot{display:inline-block;width:.85rem;height:.85rem;border-radius:50%;border:1.5px solid rgba(0,0,0,.12);flex-shrink:0;margin-right:.35rem;vertical-align:middle}
#wb-bg-pop{position:fixed;z-index:99999;background:var(--el);border:1.5px solid var(--border);border-radius:var(--r-lg);box-shadow:0 4px 18px rgba(0,0,0,.12);padding:.45rem .5rem;display:flex;flex-direction:column;gap:.2rem;font-family:"Poppins",sans-serif;min-width:120px}
.wb-bg-opt{display:flex;align-items:center;gap:.5rem;border:1.5px solid transparent;border-radius:var(--r-md);background:transparent;padding:.3rem .45rem;cursor:pointer;transition:background .12s,border-color .12s;font-family:"Poppins",sans-serif;font-size:.72rem;font-weight:600;color:var(--font);text-align:left;width:100%}
.wb-bg-opt:hover{background:var(--bg);border-color:var(--border)}
.wb-bg-opt--on{background:var(--main-sub);border-color:var(--main);color:var(--main)}
.wb-bg-swatch{display:inline-block;width:1rem;height:1rem;border-radius:50%;border:1.5px solid rgba(0,0,0,.1);flex-shrink:0}
.wb-bg-sep{height:1px;background:var(--border);margin:.3rem 0}
.wb-bg-grid-row{display:flex;flex-wrap:wrap;gap:.3rem;max-width:13.5rem}
.wb-grid-rows{display:flex;align-items:center;gap:.3rem;padding:.3rem .2rem 0;border-top:1px solid var(--border);margin-top:.3rem}
.wb-grid-rows[hidden]{display:none}
.wb-grid-rows-lbl{font-size:.65rem;font-weight:600;color:var(--font-sub);margin-right:auto}
.wb-grid-rows-btn{border:1px solid var(--border);background:transparent;border-radius:.25rem;width:1.35rem;height:1.35rem;line-height:1;display:grid;place-items:center;color:var(--font-sub);cursor:pointer;font-size:.9rem;font-family:inherit}
.wb-grid-rows-btn:hover{background:var(--bg);color:var(--main)}
.wb-grid-rows-val{font-size:.68rem;font-weight:600;color:var(--font);min-width:2.4rem;text-align:center}
.wb-chord-panel{position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:6;display:none;flex-direction:column;align-items:center;gap:.4rem;background:var(--main-sub);border:1.5px solid var(--main);border-radius:var(--r-lg);box-shadow:0 4px 14px rgba(0,0,0,.14);padding:.5rem .6rem;pointer-events:auto}
.wb-chord-seg{display:flex;border:1.5px solid var(--main);border-radius:.4rem;overflow:hidden;background:var(--el)}
.wb-chord-seg .wb-chord-opt{flex:1;border:0;background:transparent;font-size:12.5px;font-weight:600;padding:5px 14px;white-space:nowrap;color:var(--main);cursor:pointer;font-family:inherit}
.wb-chord-seg .wb-chord-opt.wbtb-on{background:var(--main);color:#fff}
.wb-chord-seg-sm .wb-chord-opt{font-size:11px;font-weight:500;padding:3px 10px}
.wb-chord-play-row{display:flex;align-items:center;gap:.4rem}
.wb-chord-playbtn{width:28px;height:28px;flex-shrink:0;border-radius:50%;border:0;background:var(--main);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0 0 0 2px;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.wb-chord-playbtn:disabled{opacity:.4;cursor:default;box-shadow:none}
.wb-chord-clearbtn{font-size:11px;padding:3px 10px;border-radius:.4rem;border:1.5px solid var(--main);background:transparent;color:var(--main);cursor:pointer;white-space:nowrap;font-family:inherit}
.wb-chord-clearbtn:disabled{opacity:.4;cursor:default}
#wb-shapes-pop{position:fixed;z-index:99999;background:var(--el);border:1.5px solid var(--border);border-radius:var(--r-lg);box-shadow:0 4px 18px rgba(0,0,0,.12);padding:.5rem;display:flex;flex-wrap:wrap;gap:.35rem;max-width:15.5rem}
.wb-shape-opt{display:flex;align-items:center;justify-content:center;border:1.5px solid transparent;border-radius:var(--r-md);background:transparent;padding:.3rem;cursor:pointer;transition:background .12s,border-color .12s;width:3.4rem;height:3rem}
.wb-shape-opt svg{width:100%;height:100%}
.wb-shape-opt:hover{background:var(--bg);border-color:var(--border)}
#wb-ref-pop{position:fixed;z-index:99999;background:var(--el);border:1.5px solid var(--border);border-radius:var(--r-lg);box-shadow:0 4px 18px rgba(0,0,0,.12);padding:.5rem;display:flex;flex-direction:column;gap:.3rem;max-width:15.5rem;font-family:"Poppins",sans-serif}
.wb-ref-heading{font-size:.68rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--font-sub);padding:.15rem .3rem}
.wb-ref-chart-list{display:flex;flex-direction:column;gap:.15rem}
.wb-ref-chart-opt{display:flex;align-items:center;border:1.5px solid transparent;border-radius:var(--r-md);background:transparent;padding:.4rem .5rem;cursor:pointer;transition:background .12s,border-color .12s;font-family:"Poppins",sans-serif;font-size:.78rem;font-weight:600;color:var(--font);text-align:left;width:100%}
.wb-ref-chart-opt:hover{background:var(--bg);border-color:var(--border)}

/* Uppslag modal — sidebar categories + playful icon-card grid */
#wb-refmodal-backdrop{position:fixed;inset:0;z-index:99999;background:rgba(15,23,42,.45);display:flex;align-items:center;justify-content:center;font-family:"Poppins",sans-serif}
.wb-refmodal{background:var(--el);border-radius:var(--r-xl);box-shadow:0 1.5rem 4rem rgba(0,0,0,.35);width:min(56rem,94vw);height:min(38rem,88vh);display:flex;flex-direction:column;overflow:hidden;animation:gm-modal-pop .18s cubic-bezier(.2,.8,.3,1)}
.wb-refmodal-head{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid var(--border);flex-shrink:0}
.wb-refmodal-head h2{font-size:1.15rem;font-weight:700;color:var(--font);margin:0}
.wb-refmodal-x{background:none;border:none;cursor:pointer;color:var(--font-sub);display:flex;padding:.5rem;border-radius:.5rem;align-items:center;justify-content:center}
.wb-refmodal-x:hover{background:var(--bg)}
.wb-refmodal-body{display:flex;flex:1;min-height:0}
.wb-refmodal-sidebar{width:13.5rem;flex-shrink:0;background:var(--bg);border-right:1px solid var(--border);padding:.75rem;overflow-y:auto;display:flex;flex-direction:column;gap:.15rem}
.wb-refmodal-cat{display:flex;align-items:center;gap:.65rem;border:none;background:transparent;border-radius:var(--r-md);padding:.6rem .7rem;cursor:pointer;font-family:"Poppins",sans-serif;font-size:.85rem;font-weight:600;color:var(--font-sub);text-align:left;transition:background .12s,color .12s}
.wb-refmodal-cat:hover{background:var(--el)}
.wb-refmodal-cat--on{background:var(--el);color:var(--main);box-shadow:0 1px 4px rgba(0,0,0,.08)}
.wb-refmodal-cat svg{flex-shrink:0;width:1.3rem;height:1.3rem}
.wb-refmodal-content{flex:1;overflow-y:auto;padding:1.25rem}
.wb-refmodal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:1rem}
.wb-refmodal-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:.6rem;background:var(--main-sub);border:1.5px solid transparent;border-radius:1rem;padding:1rem .75rem;cursor:pointer;transition:transform .12s,box-shadow .12s,border-color .12s}
.wb-refmodal-card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.1);border-color:var(--main)}
.wb-refmodal-card--on{border-color:var(--main);box-shadow:inset 0 0 0 1.5px var(--main)}
.wb-refmodal-card svg{width:3.4rem;height:3.4rem}
.wb-refmodal-card span{font-size:.82rem;font-weight:600;color:var(--font);text-align:center;line-height:1.25}
.wb-refmodal-empty{color:var(--font-sub);font-size:.85rem;padding:2rem;text-align:center}
.wbtb-x{margin-left:.15rem;border:none;background:transparent;color:var(--font-sub);width:2.6rem!important;height:2.6rem!important;min-width:2.6rem!important;max-width:2.6rem!important}
.wbtb-x:hover{background:#fef2f2!important;color:#dc2626!important}
.wbtb-x svg{width:20px;height:20px}
/* Stage + canvas frame */
#wb-stage{flex:1;display:flex;padding:.875rem;overflow:hidden;position:relative}
/* ── WB Tab bar (teacher) — inline in #wb-tbar ─────────────────────────── */
#wb-tab-bar{display:flex;align-items:center;gap:.3rem;flex-shrink:0;overflow:visible;}
.wbt-tabs{display:flex;gap:.3rem;align-items:center;flex-shrink:0}
.wbt-tab{display:flex;align-items:center;gap:.25rem;padding:.18rem .55rem .18rem .65rem;background:var(--el);border:1.5px solid var(--border);border-radius:var(--r-md);cursor:pointer;font-size:.75rem;font-weight:500;color:var(--font-sub);transition:background .12s,border-color .12s;white-space:nowrap;user-select:none;flex-shrink:0;position:relative}
.wbt-tab:hover{background:var(--bg);border-color:var(--main)}
.wbt-tab--active{background:var(--main-sub,#ebf7f8);border-color:var(--main,#39b0bb);color:#0f5261;font-weight:600}
.wbt-tab--active::after{content:'';position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:7px solid var(--main,#39b0bb);pointer-events:none}
.wbt-tab--done{background:#f0fdf4;border-color:#86efac;color:#166534}
.wbt-tab-name{cursor:default;max-width:8rem;overflow:hidden;text-overflow:ellipsis}
.wbt-eye{border:none;background:transparent;cursor:pointer;padding:.1rem;color:var(--font-sub);border-radius:var(--r-sm);display:flex;align-items:center;line-height:1;flex-shrink:0}
.wbt-eye:hover{background:var(--main-sub);color:var(--main)}
.wbt-eye--on{color:var(--main)}
.wbt-done-btn,.wbt-edit-btn{border:none;background:#dcfce7;color:#16a34a;border-radius:var(--r-sm);padding:.1rem .4rem;font-size:.7rem;font-weight:600;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:.2rem;flex-shrink:0;line-height:1.4}
.wbt-done-btn:hover{background:#bbf7d0}.wbt-edit-btn{background:#fef3c7;color:#92400e}.wbt-edit-btn:hover{background:#fde68a}
.wbt-rm{border:none;background:transparent;color:var(--font-sub);font-size:.9rem;cursor:pointer;padding:.1rem .25rem;border-radius:var(--r-sm);line-height:1;flex-shrink:0}
.wbt-rm:hover{background:#fee2e2;color:#dc2626}
.wbt-add{border:1.5px dashed var(--border);background:transparent;color:var(--font-sub);border-radius:var(--r-md);padding:.25rem .65rem;font-size:.78rem;font-weight:500;cursor:pointer;font-family:inherit;white-space:nowrap;flex-shrink:0;transition:background .12s,border-color .12s}
.wbt-add:hover{background:var(--main-sub);border-color:var(--main);color:var(--main)}
.wbt-bar-sep{flex:1}
.wbt-elev-group{display:flex;align-items:center;gap:.15rem;border:1.5px solid var(--border);border-radius:var(--r-md);padding:.2rem .3rem;flex-shrink:0;position:relative}
.wbt-elev-lbl{position:absolute;top:-.52rem;left:.4rem;background:var(--el);padding:0 .2rem;font-size:.6rem;font-weight:700;color:var(--font-sub);letter-spacing:.04em;line-height:1;pointer-events:none}
.wbt-elev-vsep{width:1px;height:1.1rem;background:var(--border);flex-shrink:0;align-self:center}
.wbt-mode-opt{border:none;background:transparent;color:var(--font-sub);border-radius:var(--r-sm);padding:.2rem .75rem;font-size:.75rem;font-weight:500;cursor:pointer;font-family:inherit;transition:background .18s,color .18s,box-shadow .18s;white-space:nowrap;position:relative;z-index:1}
.wbt-mode-opt--on{background:var(--bg);color:var(--font);box-shadow:0 1px 3px rgba(0,0,0,.12);font-weight:600}
.wbt-pause-on{background:rgba(220,38,38,.1);color:#dc2626;font-weight:600}
.wbt-show-init{background:var(--main-sub);color:var(--main);font-weight:600}
/* Live/Pause show-stu button */
#wba-tbar-show{display:flex;align-items:center;gap:.35rem;overflow:hidden;min-width:4rem;transition:background .15s,color .15s}
#wba-tbar-show .wbtb-live-dot{width:7px;height:7px;border-radius:50%;background:#22c55e;flex-shrink:0;box-shadow:0 0 0 0 rgba(34,197,94,.5);animation:wb-pulse 1.6s ease-out infinite}
#wba-tbar-show.wbtb-show-on .wbtb-live-dot{animation:none;background:#94a3b8}
#wba-tbar-show .wbtb-live-label{display:inline-block;transition:opacity .18s,transform .18s;white-space:nowrap}
@keyframes wb-pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}70%{box-shadow:0 0 0 6px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
/* ── Student WB tab picker ─────────────────────────────────────────────── */
#wb-stu-tabs,#wba-stu-tabs{display:flex;gap:.3rem;padding:.4rem .9rem;background:var(--bg);border-bottom:1px solid var(--border);flex-shrink:0;overflow-x:auto;align-items:center}
#wba-back-wb{display:none}
.wbstu-tab{border:1.5px solid var(--border);background:var(--el);color:var(--font-sub);border-radius:var(--r-md);padding:.3rem .85rem;font-size:.8rem;font-weight:500;cursor:pointer;font-family:inherit;white-space:nowrap;transition:background .12s,border-color .12s}
.wbstu-tab:hover{background:var(--bg);border-color:var(--main)}
.wbstu-tab--active{background:var(--main-sub);border-color:var(--main);color:var(--main);font-weight:600;filter:drop-shadow(0 7px 0 var(--main,#39b0bb))}
#wb-draw-bar{display:flex;align-items:center;gap:.25rem;padding:.45rem .9rem;background:var(--el);border-top:1px solid var(--border);border-bottom:1px solid var(--border);flex-shrink:0;white-space:nowrap;overflow-x:auto;overflow-y:visible;box-shadow:0 -1px 4px rgba(0,0,0,.04)}
#wb-draw-bar .wbtool,#wb-draw-bar .wbtb-act{width:3.1rem;height:3.1rem;min-width:3.1rem;max-width:3.1rem}
#wb-draw-bar .wbtool svg,#wb-draw-bar .wbtb-act svg{width:1.9rem;height:1.9rem}
#wb-draw-bar .wbtool .material-icons-outlined,#wb-draw-bar .wbtb-act .material-icons-outlined{font-size:1.55rem!important}
#wb-draw-bar .wbcol-pick svg{width:1.75rem;height:1.75rem}
#wb-draw-bar .wbtool.wbtb-on{background:var(--main-sub);box-shadow:inset 0 0 0 1.5px var(--main)}
#wb-draw-bar .wbtool-wide{width:auto;max-width:none;padding:0 .75rem;gap:.3rem}
.wbtool-label{font-size:11px;font-weight:600;white-space:nowrap;color:var(--font-sub)}
.wbtool-wide.wbtb-on .wbtool-label{color:var(--main)}
#wb-draw-bar .wbcol{width:1.5rem;height:1.5rem}
#wb-canvas-bg,#wb-stu-canvas-bg{position:absolute;inset:14px;border-radius:10px;z-index:1;pointer-events:none}
#wb-grid-overlay,#wb-stu-grid-overlay{position:absolute;inset:14px;pointer-events:none;background-image:linear-gradient(rgba(57,176,187,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(57,176,187,.18) 1px,transparent 1px);background-size:40px 40px;border-radius:10px;z-index:2}
#wb-footer{display:none}
#wb-close-main{display:none}
#wb-exit-draw{background:#39b0bb;color:#fff;border:none;border-radius:7px;padding:.3rem .9rem;font-size:.78rem;font-weight:600;cursor:pointer;font-family:"Poppins",sans-serif;transition:background .15s;animation:wb-exit-pulse 1.8s ease-in-out infinite;pointer-events:auto;opacity:1}
#wb-exit-draw:hover{background:#2d9aa4;animation:none}
@keyframes wb-exit-pulse{0%,100%{box-shadow:0 0 0 0 rgba(57,176,187,.45)}50%{box-shadow:0 0 0 7px rgba(57,176,187,0)}}
#wba-download-all{background:#0f766e;color:#fff;border:none;border-radius:6px;padding:.25rem .7rem;font-size:.78rem;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s}
#wba-download-all:hover{background:#0d9488}#wba-download-all:disabled{opacity:.6;cursor:wait}
#wba-view-download{background:#0f766e;color:#fff;border:none;border-radius:6px;padding:.3rem .8rem;font-size:.82rem;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s}
#wba-view-download:hover{background:#0d9488}#wba-view-download:disabled{opacity:.6;cursor:wait}
#wb-canvas{flex:1;display:block;cursor:crosshair;touch-action:none;border-radius:var(--r-lg);box-shadow:0 2px 16px rgba(0,0,0,.08),0 0 0 1px rgba(0,0,0,.05);background:transparent;position:relative;z-index:3}
/* Student WB overlay — same light frame as teacher */
#wb-student-overlay{display:none;position:fixed;inset:0;z-index:8000;background:#f0f4f7;flex-direction:column}
#wb-stu-tbar{display:flex;align-items:center;gap:.25rem;padding:.4rem .75rem;background:var(--el);border-bottom:1px solid var(--border);flex-shrink:0;white-space:nowrap;overflow:visible;box-shadow:0 1px 4px rgba(0,0,0,.05)}
#wb-stu-draw-bar{display:flex;align-items:center;gap:.25rem;padding:.45rem .9rem;background:var(--el);border-top:1px solid var(--border);flex-shrink:0;white-space:nowrap;overflow-x:auto;overflow-y:visible;box-shadow:0 -1px 4px rgba(0,0,0,.04);scrollbar-width:none}
#wb-stu-draw-bar::-webkit-scrollbar{display:none}
#wb-student-overlay:not(.wb-stu-can-draw) #wb-stu-draw-bar{display:none}
#wb-stu-draw-bar .wbtool,#wb-stu-draw-bar .wbtb-act{width:2.8rem;height:2.8rem;min-width:2.8rem;max-width:2.8rem}
#wb-stu-draw-bar .wbtool.wbtb-on{background:var(--main-sub);box-shadow:inset 0 0 0 1.5px var(--main)}
#wb-stu-draw-bar .wbcol{width:1.5rem;height:1.5rem}
#wb-stu-stage{flex:1;display:flex;padding:.875rem;overflow:hidden;position:relative}
#wb-student-canvas{flex:1;display:block;cursor:crosshair;touch-action:none;border-radius:var(--r-lg);box-shadow:0 2px 16px rgba(0,0,0,.08),0 0 0 1px rgba(0,0,0,.05);background:transparent;position:relative;z-index:3}
#wb-stu-btn{display:none;position:fixed;top:.75rem;left:.75rem;z-index:7900;width:2.5rem;height:2.5rem;border-radius:var(--r-full);background:var(--main-sub);border:1.5px solid var(--main);box-shadow:0 2px 8px rgba(0,0,0,.1);align-items:center;justify-content:center;cursor:pointer;color:var(--main);transition:background .12s,transform .1s}
#wb-stu-btn:hover{background:var(--main-sub);filter:brightness(.95);transform:scale(1.08)}
#wb-stu-btn.wb-stu-btn--visible{display:flex}
/* Draw bar auto-hides during drawing */
#wb-stu-draw-bar,#wba-stu-draw-bar{transition:transform .18s ease}
#wb-student-overlay.wb-is-drawing #wb-stu-draw-bar,
#wba-stu-overlay.wb-is-drawing #wba-stu-draw-bar{transform:translateY(105%)}
/* Student tab bar — "Min kopia" variant */
.wbstu-tab--copy{background:#f0fdf4;border-color:#86efac;color:#166534}
.wbstu-tab--copy:hover{background:#dcfce7}
/* WbAssign student overlay — same framed look */
#wba-stu-overlay{display:none;position:fixed;inset:0;z-index:9100;background:#f0f4f7;flex-direction:column}
#wba-stu-heading{font-size:.9rem;font-weight:700;color:var(--font);white-space:nowrap;flex-shrink:0}
#wba-stu-tbar{display:flex;align-items:center;gap:.25rem;padding:.4rem .75rem;background:var(--el);border-bottom:1px solid var(--border);flex-shrink:0;white-space:nowrap;overflow:visible;box-shadow:0 1px 4px rgba(0,0,0,.05)}
#wba-stu-draw-bar{display:flex;align-items:center;gap:.25rem;padding:.45rem .9rem;background:var(--el);border-top:1px solid var(--border);flex-shrink:0;white-space:nowrap;overflow-x:auto;overflow-y:visible;box-shadow:0 -1px 4px rgba(0,0,0,.04);scrollbar-width:none}
#wba-stu-draw-bar::-webkit-scrollbar{display:none}
#wba-stu-draw-bar .wbtool,#wba-stu-draw-bar .wbtb-act{width:2.8rem;height:2.8rem;min-width:2.8rem;max-width:2.8rem}
#wba-stu-draw-bar .wbtool.wbtb-on{background:var(--main-sub);box-shadow:inset 0 0 0 1.5px var(--main)}
#wba-stu-draw-bar .wbcol{width:1.5rem;height:1.5rem}
#wba-stu-stage{flex:1;display:flex;padding:.875rem;overflow:hidden}
#wba-stu-cvs{flex:1;display:block;cursor:crosshair;touch-action:none;border-radius:var(--r-lg);box-shadow:0 2px 16px rgba(0,0,0,.08),0 0 0 1px rgba(0,0,0,.05);background:var(--el)}
/* "Jag är klar!" button */
.wba-done-btn{background:var(--main);color:#fff;border:none;border-radius:var(--r-md);padding:.35rem 1rem;font-size:.82rem;font-weight:700;cursor:pointer;font-family:"Poppins",sans-serif;transition:background .15s,transform .1s;flex-shrink:0}
.wba-done-btn:hover{background:#2d9aa4}
.wba-done-btn.done{background:#16a34a}
.wba-done-btn.done:hover{background:#15803d}
/* Gallery: done badge + name row */
.wba-cn-row{display:flex;align-items:center;gap:.4rem}
.wba-done-badge{display:none;background:#dcfce7;color:#15803d;border-radius:99px;font-size:.65rem;font-weight:700;padding:.1rem .5rem;white-space:nowrap}
/* WbAssign locked overlay */
/* Save dialog */
#wb-start-dialog{position:absolute;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;z-index:101}
#wb-start-card{background:var(--el);border-radius:var(--r-xl);padding:1.8rem 2rem;display:flex;flex-direction:column;gap:1rem;min-width:300px;box-shadow:0 8px 32px rgba(0,0,0,.14);text-align:center}
#wb-start-q{margin:0;font-size:1rem;font-weight:600;color:var(--font)}
#wb-start-btns{display:flex;flex-direction:column;gap:.5rem}
#wb-start-yes{border:none;background:var(--main);color:#fff;border-radius:var(--r-md);padding:.6rem 1rem;font-size:.9rem;font-weight:600;cursor:pointer;font-family:inherit}
#wb-start-no{border:1.5px solid var(--border);background:var(--el);color:var(--font-sub);border-radius:var(--r-md);padding:.6rem 1rem;font-size:.9rem;cursor:pointer;font-family:inherit}
#wb-start-yes:hover{background:#2d9aa4}#wb-start-no:hover{background:var(--bg)}
#wb-save-dialog{position:absolute;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;z-index:100}
#wb-save-card{background:var(--el);border-radius:var(--r-xl);padding:1.5rem 2rem;display:flex;flex-direction:column;gap:.75rem;min-width:320px;box-shadow:0 8px 32px rgba(0,0,0,.14)}
#wb-save-title{margin:0;font-size:1rem;font-weight:600;color:var(--font)}
#wb-save-input{border:1.5px solid var(--border);border-radius:var(--r-md);padding:.5rem .75rem;font-size:.9rem;outline:none;font-family:inherit;color:var(--font);background:var(--bg)}
#wb-save-input:focus{border-color:var(--main)}
#wb-save-btns{display:flex;gap:.5rem;justify-content:flex-end}
#wb-save-cancel{border:1.5px solid var(--border);background:var(--el);color:var(--font-sub);border-radius:var(--r-md);padding:.4rem .9rem;font-size:.85rem;cursor:pointer;font-family:inherit}
#wb-save-ok{border:none;background:var(--main);color:#fff;border-radius:var(--r-md);padding:.4rem .9rem;font-size:.85rem;font-weight:600;cursor:pointer;font-family:inherit}
#wb-save-ok:disabled{opacity:.6;cursor:not-allowed}
#wb-save-msg{margin:0;font-size:.82rem;min-height:1.1em}
/* Whiteboard: grant button — inherits .wbtb-txt, just override active state */
.wbtb-grant.wbtb-grant-on{background:#fef2f2;border-color:#fecaca;color:#dc2626}
.wbtb-grant.wbtb-grant-on:hover{background:#fee2e2}
#wb-grant-label{font-size:.78rem}
/* Whiteboard: grant popup */
#wb-grant-popup{position:absolute;top:3.5rem;right:6rem;z-index:200;background:var(--el);border-radius:var(--r-xl);border:1px solid var(--border);box-shadow:0 8px 32px rgba(0,0,0,.14);padding:.75rem;min-width:220px;max-width:300px;display:flex;flex-direction:column;gap:.25rem}
.wb-grant-title{font-size:.75rem;font-weight:600;color:var(--font-sub);text-transform:uppercase;letter-spacing:.04em;padding:.25rem .5rem .5rem}
.wb-grant-row{display:flex;align-items:center;gap:.6rem;border:none;background:none;border-radius:var(--r-md);padding:.5rem .75rem;font-size:.88rem;color:var(--font);cursor:pointer;font-family:inherit;text-align:left;width:100%}
.wb-grant-row:hover{background:var(--main-sub)}
.wb-grant-row-on{background:var(--main-sub);font-weight:600;color:var(--main)}
.wb-grant-revoke{color:#dc2626;font-size:.82rem}
.wb-grant-revoke:hover{background:rgba(220,38,38,.08)}
/* Student: grant banner */
#wb-grant-modal{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.35);z-index:200;animation:wb-banner-in .25s ease}
#wb-grant-modal-card{background:var(--el);border-radius:var(--r-xl);padding:2rem 2.2rem;display:flex;flex-direction:column;align-items:center;gap:1rem;max-width:320px;text-align:center;box-shadow:0 12px 40px rgba(0,0,0,.16)}
#wb-grant-modal-icon{font-size:2.2rem;line-height:1}
#wb-grant-modal-text{margin:0;font-size:1rem;font-weight:600;color:var(--font);line-height:1.4}
#wb-grant-modal-ok{border:none;background:var(--main);color:#fff;border-radius:var(--r-md);padding:.6rem 1.6rem;font-size:.9rem;font-weight:600;cursor:pointer;font-family:inherit}
#wb-grant-modal-ok:hover{background:#2d9aa4}
@keyframes wb-banner-in{from{opacity:0;transform:translateX(-50%) translateY(12px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
/* Whiteboard text edit overlay styles are set inline in JS */
/* ── WbAssign: whiteboard shrinks when gallery is open ───────── */
#wb-modal.wba-open{right:310px}
#wb-modal.wba-session [data-a="show-stu"],
#wb-modal.wba-session [data-a="grant"],
#wb-modal.wba-session [data-a="clear-stu"]{display:none!important}
/* ── WbAssign distribute button — colours set via .wbtb-txt overrides above ── */
/* ── WbAssign prep-mode toggle button ───────────────────────── */
/* ── WbAssign mode-choice dialog (shown inside WB on open) ──── */
#wba-mode-dlg{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.55);z-index:10;backdrop-filter:blur(4px)}
#wba-mode-dlg.visible{display:flex}
.wba-mode-box{background:#1e2535;border-radius:14px;padding:1.5rem 2rem;color:#f1f5f9;display:flex;flex-direction:column;align-items:center;gap:1rem;max-width:340px;width:90%;box-shadow:0 8px 40px rgba(0,0,0,.5)}
.wba-mode-box h3{margin:0;font-size:1rem;font-weight:600;text-align:center;line-height:1.3}
.wba-mode-btns{display:flex;gap:.75rem;width:100%}
.wba-mode-btn{flex:1;padding:.65rem .5rem;border:none;border-radius:9px;font-family:"Poppins",sans-serif;font-size:.8rem;font-weight:600;cursor:pointer;transition:background .12s}
#wba-mb-now{background:rgba(99,102,241,.35);color:#c7d2fe}
#wba-mb-now:hover{background:rgba(99,102,241,.6)}
#wba-mb-prep{background:rgba(255,255,255,.08);color:#94a3b8}
#wba-mb-prep:hover{background:rgba(255,255,255,.16);color:#f1f5f9}
#wba-mb-skip{background:none;color:#64748b;font-size:.72rem;font-weight:400;text-decoration:underline;padding:.2rem;margin-top:-.4rem}
/* wba-stu-exit now inherits .wbtb-x in toolbar */
/* ── WbAssign gallery panel ─────────────────────────────────── */
#wba-panel{display:none;position:fixed;top:8px;right:10px;bottom:12px;width:290px;background:#f8fafc;border-radius:14px;box-shadow:0 8px 32px rgba(0,0,0,.18),0 2px 8px rgba(0,0,0,.08);flex-direction:column;z-index:9000;font-family:"Poppins",sans-serif;overflow:hidden}
.wba-ph{border-radius:14px 14px 0 0}
.wba-ph{display:flex;align-items:center;justify-content:space-between;padding:.6rem .75rem;background:rgba(14,22,30,.92);color:#fff;flex-shrink:0;gap:.4rem}
.wba-ph>span{font-size:.85rem;font-weight:600;white-space:nowrap}
.wba-ph div{display:flex;gap:.3rem;align-items:center}
.wba-ph button{border:none;background:rgba(255,255,255,.12);color:rgba(255,255,255,.8);border-radius:6px;padding:.28rem .55rem;font-size:.72rem;cursor:pointer;white-space:nowrap;font-family:inherit;transition:background .12s}
.wba-ph button:hover{background:rgba(255,255,255,.25)}
.wba-end-btn{background:rgba(220,38,38,.25)!important;color:#fca5a5!important}
.wba-end-btn:hover{background:rgba(220,38,38,.45)!important;color:#fff!important}
.wba-hint{margin:0;padding:.55rem .75rem .35rem;font-size:.72rem;color:#64748b;line-height:1.4;border-bottom:1px solid #e8edf2;flex-shrink:0}
#wba-history-modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:10000}
#wba-history-card{background:#fff;border-radius:14px;width:min(90vw,640px);max-height:80vh;display:flex;flex-direction:column;box-shadow:0 12px 40px rgba(0,0,0,.2);overflow:hidden}
#wba-history-hdr{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;background:#1e2535;color:#f1f5f9;flex-shrink:0}
#wba-history-hdr span{font-size:.95rem;font-weight:600}
#wba-history-close{border:none;background:rgba(255,255,255,.12);color:#f1f5f9;border-radius:6px;padding:.25rem .6rem;cursor:pointer;font-size:.85rem}
#wba-history-body{overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.5rem;flex:1;font-size:.85rem;color:#334155}
.wba-hist-row{text-align:left;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:.6rem .9rem;cursor:pointer;font-family:inherit;font-size:.85rem;color:#1e293b;transition:background .12s}
.wba-hist-row:hover{background:#eff6ff;border-color:#93c5fd}
#wba-hist-back{border:none;background:none;color:#3b82f6;cursor:pointer;font-family:inherit;font-size:.82rem;padding:.2rem 0;margin-bottom:.5rem}
#wba-hist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.75rem}
.wba-hist-cell{border:1px solid #e2e8f0;border-radius:8px;overflow:hidden;background:#f8fafc}
.wba-hist-name{font-size:.75rem;font-weight:600;color:#334155;padding:.4rem .6rem;border-bottom:1px solid #e2e8f0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wba-hist-img{width:100%;display:block;aspect-ratio:1}
.wba-hist-empty{padding:1.5rem;text-align:center;color:#94a3b8;font-size:.75rem}
#wba-cards{overflow-y:auto;flex:1;padding:.5rem .4rem}
/* ── Card ─────────────────────────────────────────────────────── */
.wba-card{display:flex;align-items:center;gap:.55rem;padding:.55rem .65rem;border-radius:10px;cursor:pointer;transition:background .12s,border-color .12s;margin-bottom:.3rem;border:1px solid rgba(0,0,0,.08);background:#fff}
.wba-card:hover{background:rgba(57,176,187,.06);border-color:rgba(57,176,187,.3)}
.wba-card.wba-locked{opacity:.75}
.wba-card.wba-reviewed{background:#f0fdf4;border-color:#bbf7d0}
.wba-card.wba-reviewed:hover{background:#dcfce7}
#wba-view-reviewed{border:1.5px solid #d1d5db;background:#f8fafc;color:#555;border-radius:7px;padding:.28rem .55rem;font-size:.72rem;cursor:pointer;font-family:inherit;white-space:nowrap}
#wba-view-reviewed.wba-reviewed-on{background:#16a34a;border-color:#16a34a;color:#fff}
.wba-av{width:2.1rem;height:2.1rem;min-width:2.1rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.05rem;flex-shrink:0;line-height:1}
.wba-ci{flex:1;min-width:0;display:flex;flex-direction:column;gap:.18rem}
.wba-cn{font-size:.8rem;font-weight:600;color:#111;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wba-ct{line-height:1}
.wba-ca{display:flex;align-items:center;gap:.45rem;flex-shrink:0}
.wba-dot{width:.55rem;height:.55rem;min-width:.55rem;border-radius:50%;display:inline-block;background:#d1d5db}
/* ── Lock toggle switch ─────────────────────────────────────── */
.wba-sw{display:flex;align-items:center;gap:.3rem;cursor:pointer;flex-shrink:0;user-select:none}
.wba-sw-inp{position:absolute;opacity:0;width:0;height:0}
.wba-sw-track{display:inline-block;width:2rem;height:1rem;background:#d1d5db;border-radius:999px;transition:background .18s;position:relative;flex-shrink:0}
.wba-sw-track::after{content:'';position:absolute;top:.1rem;left:.1rem;width:.8rem;height:.8rem;background:#fff;border-radius:50%;transition:transform .18s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.wba-sw-inp:checked+.wba-sw-track{background:#f87171}
.wba-sw-inp:checked+.wba-sw-track::after{transform:translateX(1rem)}
.wba-sw-lbl{font-size:.7rem;color:#888;min-width:2rem}
/* ── WbAssign view panel ─────────────────────────────────────── */
#wba-view{display:none;position:fixed;inset:0;z-index:9100;background:#fff;flex-direction:column;font-family:"Poppins",sans-serif}
#wba-view-hdr{display:flex;align-items:center;gap:.6rem;padding:.45rem .75rem;background:rgba(14,22,30,.92);color:#fff;flex-shrink:0}
#wba-view-back{border:none;background:rgba(255,255,255,.12);color:rgba(255,255,255,.8);border-radius:6px;padding:.28rem .6rem;font-size:.8rem;cursor:pointer;font-family:inherit;white-space:nowrap}
#wba-view-hdr button{border:none;background:rgba(255,255,255,.1);color:rgba(255,255,255,.8);border-radius:6px;padding:.28rem .65rem;font-size:.78rem;cursor:pointer;white-space:nowrap;font-family:inherit;transition:background .12s}
#wba-view-hdr button:hover{background:rgba(255,255,255,.25);color:#fff}
#wba-view-name{font-size:.9rem;font-weight:600;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#wba-view-body{flex:1;display:flex;min-height:0}
#wba-view-list{width:13.5rem;background:rgba(14,22,30,.94);flex-shrink:0;display:flex;flex-direction:column;overflow:hidden;border-right:1px solid rgba(255,255,255,.08)}
#wba-view-list-hdr{padding:.55rem .75rem .4rem;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:rgba(255,255,255,.45);flex-shrink:0}
#wba-view-list-rows{flex:1;overflow-y:auto;padding:0 .4rem .5rem;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}
#wba-view-list-rows::-webkit-scrollbar{width:.3rem}
#wba-view-list-rows::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:999px}
.wba-vrow{display:flex;align-items:center;gap:.5rem;width:100%;border:1.5px solid transparent;background:transparent;color:rgba(255,255,255,.75);border-radius:8px;padding:.38rem .5rem;font-size:.8rem;font-weight:500;cursor:pointer;font-family:inherit;text-align:left;transition:background .12s,border-color .12s,color .12s;margin-bottom:.15rem}
.wba-vrow:hover{background:rgba(255,255,255,.1);color:#fff}
.wba-vrow.is-on{background:rgba(57,176,187,.25);border-color:#39b0bb;color:#fff}
.wba-vrow-av{display:inline-flex;align-items:center;justify-content:center;width:1.4rem;height:1.4rem;border-radius:50%;font-size:.75rem;font-weight:700;color:#fff;flex-shrink:0}
.wba-vrow-nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wba-vrow-dot{width:.45rem;height:.45rem;border-radius:50%;flex-shrink:0}
.wba-vrow-done{font-size:.58rem;font-weight:700;background:#16a34a;color:#fff;border-radius:999px;padding:.05rem .35rem;text-transform:uppercase;letter-spacing:.02em;flex-shrink:0}
.wba-vrow-lk{font-size:.7rem;flex-shrink:0}
#wba-view-main{flex:1;display:flex;flex-direction:column;min-width:0}
#wba-annot-tb{display:flex;align-items:center;gap:.25rem;padding:.3rem .65rem;background:rgba(14,22,30,.86);flex-shrink:0;flex-wrap:wrap}
.wba-tg{display:flex;align-items:center;gap:.2rem}
.wba-sep{width:1px;height:1rem;background:rgba(255,255,255,.15);margin:0 .18rem;flex-shrink:0}
.wba-tb{width:1.75rem;height:1.75rem;min-width:1.75rem;border-radius:6px;border:none;background:transparent;color:rgba(255,255,255,.55);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .12s;padding:0;font-size:.76rem;font-family:"Poppins",sans-serif}
.wba-tb:hover{background:rgba(255,255,255,.12);color:#fff}
.wba-tb-on{background:rgba(57,176,187,.28);color:#39b0bb}
.wba-col{width:1.25rem;height:1.25rem;min-width:1.25rem;border-radius:50%;border:2px solid transparent;cursor:pointer;background:var(--cc);transition:border-color .1s}
.wba-col.wba-col-on{border-color:#fff}
#wba-view-cvs{flex:1;display:block;cursor:crosshair;touch-action:none}
#wba-give-access-pop{position:fixed;z-index:99999;background:#fff;border:1.5px solid #dde3ed;border-radius:10px;box-shadow:0 4px 18px rgba(0,0,0,.15);padding:.4rem;min-width:160px;font-family:"Poppins",sans-serif}
.wba-gap-title{font-size:.68rem;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.04em;padding:.2rem .45rem .35rem}
.wba-gap-row{display:flex;align-items:center;gap:.45rem;width:100%;border:none;background:transparent;border-radius:7px;padding:.32rem .45rem;cursor:pointer;font-family:"Poppins",sans-serif;font-size:.8rem;font-weight:500;color:#1e293b;text-align:left;transition:background .1s}
.wba-gap-row:hover{background:#f1f5f9}
.wba-gap-av{display:inline-flex;align-items:center;justify-content:center;width:1.4rem;height:1.4rem;border-radius:50%;font-size:.8rem;flex-shrink:0;color:#fff;font-weight:700}
.wba-gap-skip{display:block;width:100%;border:none;background:transparent;padding:.3rem .45rem;font-size:.72rem;color:#94a3b8;cursor:pointer;font-family:"Poppins",sans-serif;text-align:left;border-top:1px solid #f1f5f9;margin-top:.2rem}
/* ── Student assignment overlay — see new block above ────────── */
#wba-stu-locked{display:none;position:absolute;inset:0;background:rgba(0,0,0,.45);z-index:10;align-items:center;justify-content:center;font-size:1.4rem;font-weight:700;color:#fff;pointer-events:none;flex-direction:column;gap:.5rem;font-family:"Poppins",sans-serif}
/* ── "Läraren visar" banner ──────────────────────────────────── */
#wb-pause-banner{position:absolute;bottom:1.2rem;left:50%;transform:translateX(-50%);background:rgba(14,22,30,.75);color:#fff;padding:.5rem 1.2rem;border-radius:999px;font-size:.85rem;font-weight:600;pointer-events:none;z-index:20;white-space:nowrap;font-family:"Poppins",sans-serif;backdrop-filter:blur(4px)}
#wba-show-banner{display:none;position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);background:rgba(14,22,30,.85);color:#fff;padding:.6rem 1.4rem;border-radius:999px;font-size:.9rem;font-weight:600;pointer-events:none;z-index:9999;white-space:nowrap;font-family:"Poppins",sans-serif}
/* ── Snapshots widget ─────────────────────────────────────────── */
.snw-topbar{display:flex;align-items:center;justify-content:flex-end;padding:.3rem .6rem;border-bottom:1px solid var(--divider,rgba(0,0,0,.08));flex-shrink:0}
.snw-refresh{border:none;background:none;font-size:.78rem;color:var(--font-sub,#888);cursor:pointer;padding:.375rem .6rem;border-radius:5px;min-height:2rem}
.snw-refresh:hover{background:rgba(0,0,0,.06)}
.snw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.5rem;padding:.6rem;overflow-y:auto;flex:1}
.snw-card{border-radius:8px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.12);cursor:pointer;transition:transform .1s,box-shadow .1s;background:#fff}
.snw-card:hover{transform:translateY(-2px);box-shadow:0 3px 10px rgba(0,0,0,.18)}
.snw-thumb{width:100%;aspect-ratio:16/9;background:center/cover no-repeat #f3f4f6}
.snw-info{padding:.3rem .45rem .4rem;display:flex;align-items:center;gap:.3rem}
.snw-name{font-size:.72rem;font-weight:500;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3}
.snw-actions{display:flex;gap:.2rem;flex-shrink:0}
.snw-btn{border:none;background:none;font-size:.8rem;cursor:pointer;padding:1px 3px;border-radius:4px;opacity:.6;line-height:1}
.snw-btn:hover{opacity:1;background:rgba(0,0,0,.07)}
.snw-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;height:100%;color:var(--font-sub,#999);font-size:.88rem;padding:1rem}
/* Lightbox */
#snw-lightbox{position:fixed;inset:0;z-index:9500;display:flex;align-items:center;justify-content:center}
#snw-lb-bg{position:absolute;inset:0;background:rgba(0,0,0,.7);cursor:pointer}
#snw-lb-card{position:relative;background:#fff;border-radius:12px;padding:1rem;display:flex;flex-direction:column;align-items:center;gap:.75rem;max-width:90vw;max-height:90vh;box-shadow:0 12px 48px rgba(0,0,0,.35)}
#snw-lb-title{font-size:1rem;font-weight:600;color:#111;align-self:flex-start}
#snw-lb-img{max-width:80vw;max-height:70vh;border-radius:6px;object-fit:contain;display:block}
#snw-lb-close{border:none;background:#f3f4f6;color:#555;border-radius:7px;padding:.45rem 1.2rem;font-size:.88rem;cursor:pointer;font-family:inherit}
#snw-lb-close:hover{background:#e5e7eb}