/* panels.css — Teacher on phone, welcome guide, collections, share/publish/history/admin modals, drawing toolbar. */
/* ── Teacher on a phone — same card list as students + a remote control bar.
   Reuses #student-mobile-list; iPads keep the full editor (see _isMobileDevice). */
body.teacher-mobile .header,body.teacher-mobile .kk-lessons,body.teacher-mobile .kk-toolbar,body.teacher-mobile .add-menu,body.teacher-mobile .kk-settings,body.teacher-mobile #kk-toast{display:none!important}
body.teacher-mobile #kk-scene,body.teacher-mobile #kk-stage{display:none!important}
body.teacher-mobile #student-mobile-list{display:flex!important;position:fixed;inset:0;z-index:90000;background:var(--bg);padding-bottom:9.5rem!important}
.tm-top{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:.5rem;padding:.35rem .15rem .7rem;background:var(--bg)}
.tm-top .tm-top-name{font-weight:700;font-size:1.05rem;color:#1a1a1a;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm-top .tm-top-badge{font-size:.62rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--main,#39b0bb);background:#e6f6f8;padding:.22rem .55rem;border-radius:99px;flex-shrink:0}
#tm-bar{position:fixed;left:0;right:0;bottom:0;z-index:90002;display:flex;flex-direction:column;gap:.5rem;padding:.7rem .8rem calc(.7rem + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 -2px 16px rgba(0,0,0,.13);font-family:"Poppins",sans-serif}
#tm-bar .tm-row{display:flex;align-items:center;gap:.5rem}
#tm-bar .tm-timer{justify-content:center;background:#f3f6f7;border-radius:.9rem;padding:.4rem .5rem}
#tm-bar .tm-timer.tm-disabled{justify-content:flex-start}
#tm-bar .tm-time{font-size:1.5rem;font-weight:700;min-width:4.2rem;text-align:center;color:#1a1a1a;font-variant-numeric:tabular-nums}
#tm-bar .tm-mini{width:2.4rem;height:2.4rem;border:none;border-radius:.7rem;background:#fff;color:var(--main,#39b0bb);display:grid;place-items:center;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.1)}
#tm-bar .tm-mini:active{transform:scale(.93)}
#tm-bar .tm-play{width:2.9rem;height:2.9rem;border:none;border-radius:50%;background:var(--main,#39b0bb);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 8px rgba(57,176,187,.4)}
#tm-bar .tm-play .material-icons-outlined{font-size:1.7rem}
#tm-bar .tm-hint{display:flex;align-items:center;gap:.45rem;color:#6b7280;font-size:.8rem;line-height:1.3;padding:.2rem .3rem}
#tm-bar .tm-attn{flex:1;display:flex;align-items:center;justify-content:center;gap:.45rem;border:none;border-radius:.85rem;background:var(--main,#39b0bb);color:#fff;font-family:inherit;font-weight:600;font-size:.95rem;padding:.72rem .6rem;cursor:pointer;box-shadow:0 2px 10px rgba(57,176,187,.35)}
#tm-bar .tm-attn:active{transform:translateY(1px)}
#tm-bar .tm-attn--on{background:#e6797a;box-shadow:0 2px 12px rgba(230,121,122,.45)}
#tm-bar .tm-lock{display:flex;align-items:center;gap:.4rem;border:none;border-radius:.85rem;background:#eef1f3;color:#9aa3ab;font-family:inherit;font-weight:600;font-size:.85rem;padding:.72rem .7rem;cursor:not-allowed;position:relative}
#tm-bar .tm-soon{font-size:.6rem;background:#cdd5da;color:#5b646b;padding:.12rem .4rem;border-radius:99px;font-weight:700;text-transform:uppercase}
#tm-bar .tm-share{display:flex;flex-direction:column;gap:.55rem;align-items:center;text-align:center}
#tm-bar .tm-share-txt{display:flex;align-items:center;gap:.4rem;color:#4b5563;font-size:.85rem;line-height:1.3}
#tm-bar .tm-share-btn{border:none;background:var(--main,#39b0bb);color:#fff;font-family:inherit;font-weight:600;font-size:.9rem;padding:.6rem 1.5rem;border-radius:999px;cursor:pointer}
/* 2 + 3. Desktop / Chromebook */
body.student-mode:not(.student-mobile) #student-mobile-list{display:none!important}
body.student-mode:not(.student-mobile).board-too-small #kk-stage{display:none}
body.student-mode:not(.student-mobile).board-too-small #student-hand-fab{display:none!important}
body.student-mode:not(.student-mobile).board-too-small #student-too-small{display:flex!important}
.no-heads-mode .widget .widget-head{display:none!important}
.no-heads-mode .widget{border-radius:var(--r-xl)!important}
.present-mode .ag-add,.present-mode .widget-edit-toggle,.present-mode .cd-cal,.present-mode .res-add-area{display:none!important}
.present-mode .widget input,.present-mode .widget textarea{pointer-events:none}
.present-mode .ag-s{pointer-events:none}
.present-mode .txt-ctrl{display:none!important}
/* Agenda: title's static span is the default view everywhere (click to edit); time still swaps to static only in present mode */
.ag-m-disp{display:none}
.present-mode .ag-t,.present-mode .ag-m{display:none!important}
.present-mode .ag-t-disp,.present-mode .ag-m-disp{display:block}
.skin-glass-dark .ag-m-disp{color:rgba(244,241,234,.62)}
#sel-toolbar.hidden{display:none!important}

/* Hand-raise widget (backward compat) */
.hrw-empty{padding:.75rem .875rem;font-size:.8125rem;color:var(--font-sub);text-align:center}
.hrw-row{display:flex;align-items:center;gap:.5rem;padding:.4rem .875rem;border-bottom:1px solid rgba(0,0,0,.06);font-size:.875rem}
.hrw-row:last-child{border-bottom:none}
.hrw-num{font-size:.7rem;font-weight:700;color:var(--main);min-width:1rem;text-align:right;font-variant-numeric:tabular-nums}
.hrw-emoji{font-size:1rem;flex-shrink:0}
.hrw-name{flex:1;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hrw-time{font-size:.6875rem;color:var(--font-sub);white-space:nowrap;font-variant-numeric:tabular-nums}

/* Hand-raise widget */
.hrw .wbody{align-items:flex-start;justify-content:flex-start;padding:.5rem .75rem;gap:0}
.hrw-list{width:100%;flex:1;overflow-y:auto}
.hrw-item{display:flex;align-items:center;gap:.5rem;padding:.375rem 0;border-bottom:1px solid var(--hover)}
.hrw-item:last-child{border-bottom:none}
.hrw-hand{font-size:1rem;flex-shrink:0}
.hrw-info{flex:1;min-width:0}
.hrw-name{font-size:.8125rem;font-weight:500;color:var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hrw-time{font-size:.6875rem;color:var(--font-sub)}
.hrw-lower{flex-shrink:0;height:1.5rem;padding:0 .5rem;border:1px solid var(--border);border-radius:var(--r-full);background:transparent;color:var(--font-sub);font-family:"Poppins",sans-serif;font-size:.6875rem;cursor:pointer;transition:background .1s,color .1s}
.hrw-lower:hover{background:var(--danger-sub);border-color:var(--danger);color:var(--danger)}
.hrw-empty{font-size:.8125rem;color:#bbb;font-style:italic;padding:.75rem 0;text-align:center;width:100%}
.hrw-count{font-size:.6875rem;font-weight:600;color:var(--main);background:var(--main-sub);padding:.125rem .5rem;border-radius:var(--r-full);margin-left:auto}

/* Modal */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);backdrop-filter:blur(2px);z-index:200;display:flex;align-items:center;justify-content:center}
.overlay.hidden{display:none}
.mbox{background:#fff;border-radius:var(--r-xl);padding:1.5rem;width:440px;box-shadow:0 8px 32px rgba(0,0,0,.2)}
.mtitle{font-size:1rem;font-weight:600;margin-bottom:1rem}
.mlabel{font-size:.8125rem;color:var(--font-sub);margin-bottom:.375rem;display:block}
.minput{width:100%;height:2.5rem;padding:0 1rem;border:1px solid var(--border);border-radius:var(--r-full);font-family:"Poppins",sans-serif;font-size:.875rem;outline:none;margin-bottom:.875rem}
.minput:focus{border:2px solid var(--main);padding:0 calc(1rem - 1px)}
.mfooter{display:flex;gap:.5rem;justify-content:flex-end;margin-top:1rem}
.skolon-login-btn{display:flex;align-items:center;justify-content:center;gap:.625rem;width:100%;height:2.75rem;border-radius:var(--r-full);background:#00a4e0;color:#fff;font-family:"Poppins",sans-serif;font-size:.9375rem;font-weight:600;text-decoration:none;transition:opacity .15s}
.skolon-login-btn:hover{opacity:.9}
.swatches{display:flex;gap:.375rem;flex-wrap:wrap;margin-bottom:.875rem}
.swatch{width:2.25rem;height:2.25rem;border-radius:var(--r-md);border:2px solid transparent;cursor:pointer;transition:border-color .12s,transform .1s;flex-shrink:0}
.swatch:hover{border-color:var(--main);transform:scale(1.08)}

/* Teacher identity */
.hdr-user-chip{display:inline-flex;align-items:stretch;height:2.25rem;border-radius:var(--r-full);border:1px solid var(--border);background:var(--el);flex-shrink:0}
.hdr-user-chip>:first-child{border-radius:var(--r-full) 0 0 var(--r-full)}
.hdr-user-chip>:last-child{border-radius:0 var(--r-full) var(--r-full) 0}
.hdr-user-chip-sep{width:1px;background:var(--border);flex-shrink:0}
.teacher-chip{position:relative;display:inline-flex;align-items:center;justify-content:center;width:2.25rem;padding:0;border:none;background:transparent;color:var(--font);cursor:pointer;transition:background .12s,color .12s;flex-shrink:0}
.teacher-chip:hover{background:var(--main-sub);color:var(--main)}
.teacher-chip .tc-icon{font-size:1.4rem}
.tc-label-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.cssm-nolicense{display:flex;align-items:flex-start;gap:.5rem;padding:.875rem 1rem;margin-bottom:.875rem;border-radius:.75rem;background:rgba(249,168,37,.12);color:#8a6d1a;font-size:.8125rem;font-weight:400;line-height:1.6}
.cssm-inert{opacity:.45!important;pointer-events:none!important;cursor:default!important}
.user-menu-pop{position:fixed;z-index:15000;background:var(--el);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:0 .5rem 2rem rgba(0,0,0,.18);padding:.375rem;font-family:"Poppins",sans-serif;min-width:11rem}
/* ── Welcome guide (first-run slides) ── */
.wg-overlay{position:fixed;inset:0;z-index:19000;background:rgba(15,40,44,.45);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:1rem}
.wg-card{position:relative;width:min(30rem,94vw);background:var(--el,#fff);border-radius:1.25rem;box-shadow:0 1.5rem 4rem rgba(0,0,0,.3);padding:1.5rem 1.75rem 1.25rem;font-family:"Poppins",sans-serif;animation:wg-in .25s ease-out}
@keyframes wg-in{from{opacity:0;transform:translateY(.75rem) scale(.97)}to{opacity:1;transform:none}}
.wg-close{position:absolute;top:.75rem;right:.75rem;border:none;background:transparent;font-size:1rem;color:var(--font-sub);cursor:pointer;width:2rem;height:2rem;border-radius:50%;transition:background .12s}
.wg-close:hover{background:var(--hover)}
.wg-header{font-size:1.05rem;font-weight:700;text-align:center;color:var(--main,#39b0bb);margin-bottom:.5rem}
.wg-body{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.75rem;min-height:16.5rem;padding:.5rem 0}
.wg-emoji{font-size:3.25rem;line-height:1;width:6rem;height:6rem;display:flex;align-items:center;justify-content:center;border-radius:50%;animation:wg-float 3.2s ease-in-out infinite}
@keyframes wg-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-.4rem)}}
.wg-slide-title{font-size:1.15rem;font-weight:700;color:var(--font)}
.wg-slide-text{font-size:.875rem;line-height:1.65;color:var(--font-sub);max-width:24rem}
.wg-links{display:flex;flex-direction:column;align-items:center;gap:.5rem}
.wg-more{font-size:.75rem;color:var(--font-sub);max-width:22rem;line-height:1.5}
.wg-link-row{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}
.wg-link{display:inline-flex;align-items:center;gap:.375rem;padding:.4rem .875rem;border-radius:999px;background:rgba(57,176,187,.1);color:#1d7d86;font-size:.8125rem;font-weight:600;text-decoration:none;transition:background .12s}
.wg-link:hover{background:rgba(57,176,187,.2)}
.wg-footer{display:flex;align-items:center;justify-content:space-between;margin-top:.75rem}
.wg-nav{border:none;background:transparent;font-family:inherit;font-size:.875rem;font-weight:600;color:var(--font-sub);cursor:pointer;padding:.5rem .875rem;border-radius:var(--r-full);transition:background .12s}
.wg-nav:hover{background:var(--hover)}
.wg-next-primary{background:var(--main,#39b0bb);color:#fff}
.wg-next-primary:hover{background:#2d99a3}
.wg-dots{display:flex;gap:.4rem}
.wg-dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--border,#dedede);cursor:pointer;transition:background .15s,transform .15s}
.wg-dot.is-active{background:var(--main,#39b0bb);transform:scale(1.25)}
.user-menu-name{font-size:.75rem;color:var(--font-sub);padding:.375rem .75rem .25rem;border-bottom:1px solid var(--divider);margin-bottom:.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:16rem}
.user-menu-item{display:flex;align-items:center;gap:.5rem;width:100%;padding:.5rem .75rem;border:none;background:transparent;font-family:inherit;font-size:.875rem;cursor:pointer;color:var(--font);border-radius:var(--r-lg);transition:background .1s}
.user-menu-item:hover{background:var(--hover)}
.user-menu-sep{height:1px;background:var(--divider);margin:.25rem .375rem}
a.user-menu-item{text-decoration:none}
.teacher-chip .tc-dot{position:absolute;bottom:0;right:0;width:8px;height:8px;border-radius:50%;background:var(--success);border:1.5px solid var(--el);flex-shrink:0}
.save-indicator{display:inline-flex;align-items:center;gap:.3rem;height:1.75rem;padding:0 .625rem;border-radius:var(--r-full);font-size:.75rem;font-weight:500;flex-shrink:0;white-space:nowrap;opacity:0;transition:opacity .3s,background .3s,color .3s;pointer-events:none}
.save-indicator.saving{opacity:1;background:rgba(57,176,187,.12);color:var(--main)}
.save-indicator.saved{opacity:1;background:rgba(52,168,83,.12);color:#1a7a35}
.save-indicator.saving::before{content:'';width:.5rem;height:.5rem;border-radius:50%;border:1.5px solid var(--main);border-top-color:transparent;animation:spin .6s linear infinite}
.save-indicator.saved::before{content:'✓';font-size:.75rem;font-weight:700;color:#1a7a35}
.save-indicator.error{opacity:1;background:rgba(192,57,43,.12);color:#c0392b}
.flag-btn{height:2rem;width:2rem;border-radius:var(--r-full);border:1px solid var(--border);background:var(--el);font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:border-color .12s;line-height:1;padding:0}
.flag-btn:hover{border-color:var(--main)}
.header-icon-btn{height:2rem;width:2rem;border-radius:var(--r-full);border:1px solid var(--border);background:var(--el);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--font-sub);transition:border-color .12s,color .12s;padding:0}
.header-icon-btn:hover{border-color:var(--main);color:var(--main)}
.hdr-boards-btn{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;border:none;background:transparent;cursor:pointer;color:var(--font-sub);transition:background .12s,color .12s;flex-shrink:0;padding:0}
.hdr-boards-btn .material-icons-outlined{font-size:1.25rem}
.hdr-boards-btn:hover{background:var(--main-sub);color:var(--main)}
.flag-pop{position:fixed;z-index:16000;background:var(--el);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:0 4px 16px rgba(0,0,0,.15);padding:.25rem;display:flex;flex-direction:column;min-width:10rem}
.flag-pop-item{display:flex;align-items:center;gap:.5rem;padding:.3125rem .5rem;border-radius:.375rem;border:none;background:transparent;cursor:pointer;width:100%;color:var(--font);transition:background .1s;font-family:"Poppins",sans-serif}
.flag-pop-item:hover{background:var(--hover)}
.flag-pop-item.is-active{color:var(--main);font-weight:600}
.flag-pop-flag{font-size:1.125rem;line-height:1;width:1.75rem}
.flag-pop-name{font-size:.8125rem}

/* ── Collection picker ── */
.btn-collection-picker{display:inline-flex;align-items:center;gap:.375rem;height:2rem;padding:0 .75rem;border-radius:var(--r-full);border:1px solid var(--border);background:var(--el);font-family:"Poppins",sans-serif;font-size:.8125rem;font-weight:500;cursor:pointer;color:var(--font);transition:background .12s,border-color .12s,color .12s;flex-shrink:0;max-width:12rem}
.btn-collection-picker:hover{background:var(--main-sub);border-color:var(--main);color:var(--main)}
.btn-collection-picker .material-icons-outlined{font-size:1rem;color:var(--main);flex-shrink:0}
.coll-picker-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.coll-picker-chevron{font-size:.875rem!important;color:var(--font-sub);flex-shrink:0;margin-left:-.1rem}
.coll-picker-pop{position:fixed;z-index:999999;background:var(--el);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:0 .5rem 2rem rgba(0,0,0,.16);width:18rem;overflow:hidden;font-family:"Poppins",sans-serif}
.coll-picker-head{font-size:.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--font-sub);padding:.625rem .875rem .375rem}
.coll-picker-list{max-height:16rem;overflow-y:auto;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.coll-picker-item{width:100%;display:flex;align-items:center;gap:.5rem;padding:.5rem .875rem;border:none;background:transparent;font-family:"Poppins",sans-serif;font-size:.8125rem;cursor:pointer;text-align:left;color:var(--font);transition:background .1s}
.coll-picker-item:hover{background:var(--hover)}
.coll-picker-item.active{background:var(--main-sub);color:var(--main)}
.coll-picker-icon{font-size:1rem!important;color:var(--font-sub);flex-shrink:0}
.coll-picker-item.active .coll-picker-icon{color:var(--main)}
.coll-picker-item-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.coll-picker-role{flex-shrink:0}
.coll-badge-editor{font-size:.625rem;font-weight:600;padding:.1rem .375rem;border-radius:var(--r-full);background:var(--warn-sub);color:var(--warn)}
.coll-active-check{font-size:.875rem!important;color:var(--main);flex-shrink:0}
.coll-picker-empty{padding:.75rem .875rem;font-size:.8125rem;color:var(--font-sub);text-align:center}
.coll-picker-foot{padding:.5rem .75rem}
.coll-picker-new{width:100%;display:inline-flex;align-items:center;gap:.375rem;padding:.5rem .75rem;border-radius:var(--r-md);border:1.5px dashed var(--border);background:transparent;font-family:"Poppins",sans-serif;font-size:.8125rem;font-weight:500;cursor:pointer;color:var(--font-sub);transition:border-color .12s,color .12s,background .12s;justify-content:center}
.coll-picker-new:hover{border-color:var(--main);color:var(--main);background:var(--main-sub)}
/* Enhanced rows: switch button + kebab */
.coll-picker-item{padding:0;gap:0}
.coll-picker-switch{flex:1;min-width:0;display:flex;align-items:center;gap:.5rem;padding:.5rem .25rem .5rem .875rem;border:none;background:transparent;font-family:"Poppins",sans-serif;font-size:.8125rem;color:inherit;cursor:pointer;text-align:left}
.coll-kebab{flex-shrink:0;width:1.75rem;height:1.75rem;margin-right:.45rem;border:none;background:transparent;border-radius:50%;cursor:pointer;display:grid;place-items:center;color:var(--font-sub);transition:background .1s}
.coll-kebab:hover{background:rgba(0,0,0,.08)}
.coll-kebab .material-icons-outlined{font-size:1.1rem!important}
.coll-picker-foot{display:flex;flex-direction:column;gap:.4rem}
.coll-picker-overview{width:100%;display:inline-flex;align-items:center;gap:.375rem;justify-content:center;padding:.5rem .75rem;border-radius:var(--r-md);border:1px solid var(--border);background:transparent;font-family:"Poppins",sans-serif;font-size:.8125rem;font-weight:500;cursor:pointer;color:var(--font-sub);transition:background .12s,color .12s,border-color .12s}
.coll-picker-overview:hover{border-color:var(--main);color:var(--main);background:var(--main-sub)}
.coll-picker-overview .material-icons-outlined{font-size:1rem!important;color:var(--main)}
/* Row actions menu */
/* Share collection modal */
.coll-share-modal{width:min(26rem,100%)}
.csm-intro{font-size:.8125rem;color:var(--font-sub);line-height:1.45;margin:0 0 1rem}
.csm-link-row{display:flex;gap:.5rem;align-items:center;margin-bottom:1.25rem}
.csm-link-inp{flex:1;min-width:0;height:2.3rem;border:1.5px solid var(--border);border-radius:var(--r-full);padding:0 .9rem;font-family:"Poppins",sans-serif;font-size:.8rem;color:var(--font);background:var(--bg);outline:none}
.csm-copy{flex-shrink:0;height:2.3rem;display:inline-flex;align-items:center;gap:.3rem;padding:0 .85rem;border-radius:var(--r-full);border:none;background:var(--main);color:#fff;font-family:"Poppins",sans-serif;font-size:.8rem;font-weight:600;cursor:pointer}
.csm-copy:disabled{opacity:.5;cursor:default}
.csm-members-list{display:flex;flex-direction:column;gap:.25rem;margin-top:.375rem;max-height:12rem;overflow-y:auto}
.csm-qr-row{margin-top:.5rem;margin-bottom:1.25rem}
.csm-qr-label{font-size:.75rem;font-weight:600;color:var(--font-sub);margin-bottom:.375rem}
.csm-qr-code{width:8rem;height:8rem;background:#fff;border-radius:.5rem;padding:.5rem;box-shadow:0 1px 3px rgba(0,0,0,.1)}
.csm-member{display:flex;align-items:center;gap:.6rem;padding:.5rem .25rem}
.csm-member-ic{font-size:1.1rem!important;color:var(--font-sub);flex-shrink:0}
.csm-member-name{flex:1;min-width:0;font-size:.85rem;color:var(--font);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.csm-you{color:var(--font-sub);font-size:.75rem}
.csm-member-role{flex-shrink:0;font-size:.7rem;font-weight:600;color:var(--font-sub);background:var(--hover);padding:.15rem .5rem;border-radius:var(--r-full)}
.csm-member-remove{flex-shrink:0;width:1.6rem;height:1.6rem;border:none;background:transparent;border-radius:50%;cursor:pointer;display:grid;place-items:center;color:var(--font-sub)}
.csm-member-remove:hover{background:rgba(217,83,79,.12);color:#d9534f}
.csm-ext-toggle{display:flex;align-items:flex-start;gap:.6rem;padding:.7rem .8rem;border:1px solid var(--border);border-radius:var(--r-lg);margin:0 0 1.1rem;cursor:pointer}
.csm-ext-toggle input{position:absolute;opacity:0;width:0;height:0}
.csm-ext-track{position:relative;flex-shrink:0;width:2.6rem;height:1.5rem;border-radius:99px;background:var(--border);transition:background .15s;margin-top:.1rem}
.csm-ext-track::after{content:'';position:absolute;top:.18rem;left:.18rem;width:1.14rem;height:1.14rem;border-radius:50%;background:#fff;transition:transform .15s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.csm-ext-toggle input:checked + .csm-ext-track{background:var(--main)}
.csm-ext-toggle input:checked + .csm-ext-track::after{transform:translateX(1.1rem)}
.csm-ext-label{font-size:.8rem;font-weight:600;color:var(--font);line-height:1.35}
.csm-ext-label small{display:block;font-weight:400;color:var(--font-sub);font-size:.72rem;margin-top:.2rem;line-height:1.4}
/* ── Collections page (full-screen manager) ── */
.coll-page{position:fixed;inset:0;z-index:999991;background:rgba(10,20,25,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:flex-start;justify-content:center;padding:2rem 1.5rem;overflow-y:auto;opacity:0;transition:opacity .18s;font-family:"Poppins",sans-serif}
.coll-page.coll-page-visible{opacity:1}
.coll-page-inner{background:var(--bg);border-radius:1.5rem;width:100%;max-width:64rem;box-shadow:0 1.5rem 4rem rgba(0,0,0,.25);overflow:hidden;flex-shrink:0;animation:collPageIn .22s ease}
@keyframes collPageIn{from{transform:translateY(12px) scale(.99);opacity:.5}to{transform:none;opacity:1}}
.coll-page-head{display:flex;align-items:flex-start;gap:1rem;padding:1.75rem 2rem 1.25rem;border-bottom:1px solid var(--divider)}
.coll-page-titlewrap{display:flex;align-items:center;gap:.875rem;flex:1;min-width:0}
.coll-page-title-ic{font-size:1.875rem!important;color:var(--main);flex-shrink:0}
.coll-page-title{font-size:1.375rem;font-weight:700;color:var(--font);margin:0;line-height:1.2}
.coll-page-sub{font-size:.8125rem;color:var(--font-sub);margin:.15rem 0 0}
.coll-page-close{width:2.25rem;height:2.25rem;border-radius:50%;border:none;background:var(--hover);cursor:pointer;display:grid;place-items:center;color:var(--font-sub);flex-shrink:0;transition:background .12s}
.coll-page-close:hover{background:rgba(0,0,0,.1)}
.coll-page-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1.125rem;padding:1.5rem 2rem 2rem}
.coll-card{background:var(--el);border:1.5px solid var(--border);border-radius:1.125rem;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .15s,border-color .15s,transform .15s;position:relative}
.coll-card:hover{box-shadow:0 .5rem 1.5rem rgba(0,0,0,.13);border-color:var(--main);transform:translateY(-2px)}
.coll-card.is-active{border-color:var(--main);box-shadow:0 0 0 1.5px var(--main)}
.coll-card-open{flex:1;display:flex;flex-direction:column;gap:.5rem;align-items:stretch;text-align:left;border:none;background:transparent;cursor:pointer;padding:1rem 1.125rem .75rem;font-family:inherit;color:inherit}
.coll-card-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-height:1.5rem}
.coll-card-folder{font-size:1.5rem!important;color:var(--main)}
.coll-card-current{font-size:.625rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--main);background:var(--main-sub);border-radius:99px;padding:.15rem .5rem}
.coll-card-shared{font-size:.625rem;font-weight:600;color:var(--warn);background:var(--warn-sub);border-radius:99px;padding:.15rem .5rem}
.coll-card-ext{display:inline-flex;align-items:center;gap:.2rem;font-size:.6rem;font-weight:600;color:var(--font-sub);background:var(--hover);border:1px solid var(--border);border-radius:99px;padding:.13rem .45rem;white-space:nowrap}
.coll-card-ext .material-icons-outlined{font-size:.8rem!important}
.coll-card-ext-note{display:flex;align-items:flex-start;gap:.3rem;font-size:.66rem;color:var(--font-sub);line-height:1.35;margin-top:.4rem}
.coll-card-ext-note .material-icons-outlined{font-size:.85rem!important;flex-shrink:0;color:var(--font-sub);margin-top:.05rem}
.coll-card-name{font-size:1.0625rem;font-weight:700;color:var(--font);line-height:1.25;word-break:break-word}
.coll-card-meta{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.coll-card-count,.coll-card-chip{display:inline-flex;align-items:center;gap:.25rem;font-size:.6875rem;font-weight:600;border-radius:99px;padding:.2rem .55rem}
.coll-card-count{background:var(--hover);color:var(--font-sub)}
.coll-card-count .material-icons-outlined,.coll-card-chip .material-icons-outlined{font-size:.875rem!important}
.coll-card-chip{background:var(--main-sub);color:var(--main)}
.coll-card-chip-empty{background:var(--hover);color:var(--font-sub)}
.coll-card-people{display:flex;align-items:center;gap:.1rem;margin-top:.2rem;min-height:1.6rem}
.coll-card-people-empty{font-size:.6875rem;color:var(--font-sub);gap:.25rem}
.coll-card-people-empty .material-icons-outlined{font-size:.95rem!important}
.coll-avatar{width:1.6rem;height:1.6rem;border-radius:50%;background:var(--main);color:#fff;font-size:.625rem;font-weight:700;display:grid;place-items:center;margin-right:-.4rem;border:2px solid var(--el);flex-shrink:0}
.coll-avatar-more{background:var(--font-sub)}
/* Live collaboration presence chip (who else is editing this collection now) */
.coll-presence{display:inline-flex;align-items:center;height:2rem;margin-left:.4rem;padding:0 .6rem 0 .55rem;border-radius:var(--r-full);background:var(--main-sub);vertical-align:middle;animation:collPresIn .18s ease}
@keyframes collPresIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
.coll-presence-av{width:1.4rem;height:1.4rem;border-radius:50%;background:var(--main);color:#fff;font-size:.58rem;font-weight:700;display:grid;place-items:center;margin-right:-.35rem;border:2px solid var(--el);flex-shrink:0}
.coll-presence-more{background:var(--font-sub)}
.coll-presence-label{font-size:.75rem;font-weight:600;color:var(--main);margin-left:.6rem;display:inline-flex;align-items:center;gap:.3rem;white-space:nowrap}
.coll-presence-label::before{content:'';width:.45rem;height:.45rem;border-radius:50%;background:var(--main);box-shadow:0 0 0 0 rgba(57,176,187,.5);animation:collPresPulse 1.6s infinite}
@keyframes collPresPulse{0%{box-shadow:0 0 0 0 rgba(57,176,187,.45)}70%{box-shadow:0 0 0 .35rem rgba(57,176,187,0)}100%{box-shadow:0 0 0 0 rgba(57,176,187,0)}}
.coll-card-people-label{font-size:.6875rem;color:var(--font-sub);margin-left:.75rem}
.coll-card-boards{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.1rem}
.coll-board-chip{font-size:.66rem;font-weight:500;color:var(--font-sub);background:var(--hover);border:1px solid var(--border);border-radius:99px;padding:.12rem .5rem;max-width:8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.coll-board-chip-link{cursor:pointer;transition:background .12s,border-color .12s,color .12s}
.coll-board-chip-link:hover{background:var(--main-sub);border-color:var(--main);color:var(--main)}
.coll-board-chip-more{color:var(--main);background:var(--main-sub);border-color:transparent}
.coll-card-actions{display:flex;gap:.25rem;padding:.5rem .75rem;border-top:1px solid var(--divider);justify-content:flex-end;flex-wrap:wrap}
.coll-card-btn{width:2rem;height:2rem;border-radius:.5rem;border:none;background:transparent;cursor:pointer;display:grid;place-items:center;color:var(--font-sub);transition:background .1s,color .1s}
.coll-card-btn:hover{background:var(--hover);color:var(--main)}
.coll-card-btn .material-icons-outlined{font-size:1.125rem}
.coll-card-btn-del:hover{background:#fef2f2;color:#e05252}
.coll-card-new{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;min-height:11rem;border:2px dashed var(--border);border-radius:1.125rem;background:transparent;cursor:pointer;font-family:"Poppins",sans-serif;font-size:.875rem;font-weight:600;color:var(--font-sub);transition:border-color .15s,background .15s,color .15s}
.coll-card-new:hover{border-color:var(--main);background:var(--main-sub);color:var(--main)}
.coll-card-new .material-icons-outlined{font-size:1.75rem}
.coll-card-btn-students{color:var(--main)}
.coll-card-btn-students:hover{background:var(--main-sub);color:var(--main)}
@media(max-width:640px){.coll-page{padding:0}.coll-page-inner{border-radius:0;min-height:100%}.coll-page-grid{grid-template-columns:1fr;padding:1.25rem}.coll-page-head{padding:1.25rem 1.25rem 1rem}}
/* ── Share-with-students modal (from collections page) ── */
.coll-modal.coll-stu{width:min(56rem,100%);max-height:min(95vh,64rem);display:flex;flex-direction:column}
.coll-stu .coll-modal-body{overflow-y:auto}
.cssm-loading,.cssm-empty{padding:1.5rem .25rem;text-align:center;color:var(--font-sub);font-size:.875rem}
.cssm-all{display:flex;align-items:center;gap:.75rem;justify-content:space-between;background:var(--main-sub);border:1px solid var(--main);border-radius:var(--r-lg);padding:.75rem .875rem}
.cssm-all-info{display:flex;align-items:center;gap:.6rem;min-width:0}
.cssm-all-info>.material-icons-outlined{color:var(--main);font-size:1.4rem!important;flex-shrink:0}
.cssm-all-title{font-size:.9rem;font-weight:700;color:var(--font)}
.cssm-all-sub{font-size:.72rem;color:var(--font-sub)}
.cssm-all-actions{display:flex;align-items:center;gap:.4rem;flex-shrink:0}
.cssm-share-all{height:2rem;padding:0 .9rem;border-radius:var(--r-full);border:none;background:var(--main);color:#fff;font-family:"Poppins",sans-serif;font-size:.78rem;font-weight:600;cursor:pointer;white-space:nowrap}
.cssm-share-all:hover{opacity:.9}
.cssm-class-btn{display:inline-flex;align-items:center;gap:.25rem;height:2rem;padding:0 .6rem;border-radius:var(--r-full);border:1px solid var(--border);background:var(--el);font-family:"Poppins",sans-serif;font-size:.74rem;font-weight:500;color:var(--font-sub);cursor:pointer;white-space:nowrap;max-width:9rem;overflow:hidden;text-overflow:ellipsis}
.cssm-class-btn:hover{border-color:var(--main);color:var(--main)}
.cssm-class-btn .material-icons-outlined{font-size:.95rem!important}
.cssm-overview-link{display:inline-flex;align-items:center;gap:.35rem;margin-top:.6rem;border:none;background:transparent;color:var(--main);font-family:"Poppins",sans-serif;font-size:.8rem;font-weight:600;cursor:pointer;padding:.2rem 0}
.cssm-overview-link .material-icons-outlined{font-size:1rem!important}
.cssm-board-list{display:flex;flex-direction:column;gap:.4rem}
.cssm-board{display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--el)}
.cssm-board-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:.35rem}
.cssm-board-name{font-size:.85rem;font-weight:600;color:var(--font);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cssm-board-sub{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.cssm-copy{display:inline-flex;align-items:center;gap:.25rem;height:1.7rem;padding:0 .55rem;border-radius:var(--r-full);border:1px solid var(--border);background:transparent;font-family:"Poppins",sans-serif;font-size:.72rem;font-weight:500;color:var(--font-sub);cursor:pointer}
.cssm-copy:hover{border-color:var(--main);color:var(--main)}
.cssm-copy .material-icons-outlined{font-size:.9rem!important}
.cssm-switch{flex-shrink:0;cursor:pointer;display:inline-block;position:relative;width:2.6rem;height:1.5rem}
.cssm-switch input{position:absolute;opacity:0;width:0;height:0}
.cssm-switch-track{position:absolute;inset:0;border-radius:99px;background:var(--border);transition:background .15s}
.cssm-switch-track::after{content:'';position:absolute;top:.18rem;left:.18rem;width:1.14rem;height:1.14rem;border-radius:50%;background:#fff;transition:transform .15s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.cssm-switch input:checked + .cssm-switch-track{background:var(--main)}
.cssm-switch input:checked + .cssm-switch-track::after{transform:translateX(1.1rem)}
.cssm-class-pop{position:fixed;z-index:999994;background:var(--el);border:1px solid var(--border);border-radius:12px;box-shadow:0 .5rem 2rem rgba(0,0,0,.2);width:min(32rem,calc(100vw - 2rem));max-height:calc(100vh - 4rem);display:flex;flex-direction:column;font-family:"Poppins",sans-serif;overflow:hidden}
.cssm-class-list{max-height:14rem;overflow-y:auto;padding:.35rem}
.cssm-class-item{display:flex;align-items:center;gap:.5rem;padding:.45rem .55rem;border-radius:8px;font-size:.8rem;color:var(--font);cursor:pointer}
.cssm-class-item:hover{background:var(--hover)}
.cssm-class-item input{accent-color:var(--main);width:1rem;height:1rem;cursor:pointer;flex-shrink:0}
.cssm-class-empty{padding:1rem;font-size:.8rem;color:var(--font-sub);text-align:center}
.cssm-class-foot{display:flex;justify-content:space-between;gap:.5rem;padding:.5rem;border-top:1px solid var(--border)}
.cssm-class-clear{border:none;background:transparent;color:var(--font-sub);font-family:"Poppins",sans-serif;font-size:.78rem;cursor:pointer}
.cssm-class-ok{border:none;background:var(--main);color:#fff;border-radius:var(--r-full);padding:.3rem .8rem;font-family:"Poppins",sans-serif;font-size:.78rem;font-weight:600;cursor:pointer}
/* New collection modal */
.coll-modal-backdrop{position:fixed;inset:0;z-index:999992;background:rgba(0,0,0,.35);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:1rem}
.coll-modal{background:var(--el);border-radius:var(--r-xl);box-shadow:0 1rem 3rem rgba(0,0,0,.22);width:min(22rem,100%);font-family:"Poppins",sans-serif;overflow:hidden}
.coll-modal-head{display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem;border-bottom:1px solid var(--border)}
.coll-modal-title{font-size:1rem;font-weight:600;flex:1;color:var(--font)}
.coll-modal-close{width:2rem;height:2rem;border-radius:50%;border:none;background:var(--hover);cursor:pointer;display:grid;place-items:center;color:var(--font-sub);flex-shrink:0}
.coll-modal-close:hover{background:rgba(0,0,0,.1)}
.coll-modal-body{padding:1.25rem}
.coll-modal-label{display:block;font-size:.8125rem;font-weight:600;color:var(--font);margin-bottom:.375rem}
.coll-modal-inp{width:100%;height:2.5rem;border:1.5px solid var(--border);border-radius:var(--r-full);padding:0 1rem;font-family:"Poppins",sans-serif;font-size:.9375rem;outline:none;color:var(--font);background:var(--bg);transition:border-color .15s}
.coll-modal-inp:focus{border-color:var(--main);background:#fff}
.coll-modal-foot{display:flex;gap:.5rem;justify-content:flex-end;padding:.75rem 1.25rem 1rem;border-top:1px solid var(--border)}
.coll-modal-cancel{height:2rem;padding:0 .875rem;border-radius:var(--r-full);border:1px solid var(--border);background:transparent;font-family:"Poppins",sans-serif;font-size:.8125rem;cursor:pointer;color:var(--font-sub)}
.coll-modal-cancel:hover{background:var(--hover)}
.coll-modal-create{height:2rem;padding:0 1rem;border-radius:var(--r-full);border:none;background:var(--main);color:#fff;font-family:"Poppins",sans-serif;font-size:.8125rem;font-weight:600;cursor:pointer;transition:opacity .12s}
.coll-modal-create:hover{opacity:.88}

/* ── Version history modal ──
   The list can be long (a month of daily versions plus everything from today), so the body scrolls
   rather than the page. Versions taken because a save was about to lose boards are tinted amber —
   those are the rows a teacher came here for, and they must be findable without reading every
   timestamp. Only CSS variables that are actually defined in this file are used: --divider and
   --hover-2 appear elsewhere in this stylesheet but are never declared, and an undefined variable
   inside a shorthand silently drops the whole declaration. */
.coll-hist-modal{width:min(38rem,calc(100vw - 2rem));display:flex;flex-direction:column;max-height:calc(100vh - 6rem)}
.coll-hist-modal .coll-modal-body{overflow-y:auto;padding:1rem 1.25rem}
.coll-hist-intro{margin:0 0 .875rem;font-size:.8125rem;line-height:1.5;color:var(--font-sub)}
.coll-hist-list{display:flex;flex-direction:column;gap:.375rem}
.coll-hist-row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;padding:.625rem .75rem;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--bg)}
.coll-hist-row.is-flagged{border-color:#e8a33d;background:rgba(232,163,61,.07)}
.coll-hist-when{display:flex;flex-direction:column;gap:.125rem;min-width:0;flex:1}
.coll-hist-time{font-size:.875rem;font-weight:600;color:var(--font)}
.coll-hist-sub{font-size:.75rem;color:var(--font-sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.coll-hist-flag{display:inline-flex;align-items:center;gap:.25rem;font-size:.6875rem;font-weight:600;color:#8a5a10;background:rgba(232,163,61,.2);border-radius:var(--r-full);padding:.1875rem .5rem}
.coll-hist-flag .material-icons-outlined{font-size:.875rem}
.coll-hist-actions{display:flex;gap:.375rem;flex-shrink:0}
.coll-hist-btn{height:1.875rem;padding:0 .75rem;border-radius:var(--r-full);border:1px solid var(--border);background:transparent;font-family:"Poppins",sans-serif;font-size:.75rem;cursor:pointer;color:var(--font-sub)}
.coll-hist-btn:hover{background:var(--hover)}
.coll-hist-btn-primary{border-color:transparent;background:var(--main);color:#fff;font-weight:600}
.coll-hist-btn-primary:hover{opacity:.88;background:var(--main)}
.coll-hist-btn:disabled{opacity:.6;cursor:default}
.coll-hist-peek{flex-basis:100%;display:flex;flex-wrap:wrap;gap:.25rem;padding-top:.5rem;border-top:1px dashed var(--border);font-size:.75rem;color:var(--font-sub)}
.coll-hist-chip{display:inline-flex;align-items:center;gap:.25rem;background:var(--hover);border-radius:var(--r-full);padding:.125rem .5rem;font-size:.75rem;color:var(--font)}
.coll-hist-chip em{font-style:normal;color:var(--font-sub);font-size:.6875rem}
.coll-hist-chip-restore{margin-left:.25rem;padding:.1rem .5rem;border:1px solid var(--main);border-radius:var(--r-full);background:var(--main-sub);color:var(--main);font-size:.66rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .12s}
.coll-hist-chip-restore:hover{background:var(--main);color:#fff}
.coll-hist-chip-restore:disabled{opacity:.5;cursor:default}
.coll-hist-snapshots{margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--border)}
.coll-hist-snapshots-head{display:flex;align-items:center;gap:.375rem;font-size:.8125rem;font-weight:600;color:var(--font);margin-bottom:.5rem;flex-wrap:wrap}
.coll-hist-snapshots-head small{font-weight:400;color:var(--font-sub);font-size:.75rem;flex-basis:100%}
.coll-hist-empty{padding:1rem;text-align:center;font-size:.8125rem;color:var(--font-sub)}

/* ── Publish modal ── */
.pub-backdrop{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center}
.pub-modal{background:var(--el);border-radius:var(--r-xl);box-shadow:0 8px 32px rgba(0,0,0,.2);width:min(48rem,calc(100vw - 2rem));max-height:calc(100vh - 4rem);overflow:auto;font-family:"Poppins",sans-serif;display:flex;flex-direction:column}
.pub-head{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.25rem .75rem;border-bottom:1px solid var(--divider)}
.pub-title{font-size:1rem;font-weight:600;color:var(--font)}
.pub-close{width:2rem;height:2rem;border:none;border-radius:50%;background:var(--hover);cursor:pointer;display:grid;place-items:center;color:var(--font-sub);font-size:1.125rem;transition:background .12s}
.pub-close:hover{background:var(--hover-2)}
.pub-body{padding:1rem 1.25rem;display:flex;flex-direction:column;gap:.75rem}
.pub-intro{font-size:.8125rem;color:var(--font-sub);line-height:1.55;margin-bottom:1rem}
/* ── Admin modal ── */
.adm-modal{background:var(--el);border-radius:var(--r-xl);box-shadow:0 8px 32px rgba(0,0,0,.18);width:min(34rem,calc(100vw - 2rem));font-family:"Poppins",sans-serif;display:flex;flex-direction:column;max-height:calc(100vh - 4rem);overflow:hidden}
.adm-head{display:flex;align-items:center;padding:1.25rem 1.25rem .75rem;flex-shrink:0}
.adm-title{font-size:1.0625rem;font-weight:700;flex:1}
.adm-tabs{display:flex;gap:.25rem;padding:0 1.25rem .75rem;border-bottom:1px solid var(--divider);flex-shrink:0}
.adm-tab{padding:.375rem .875rem;border-radius:var(--r-full);border:none;background:transparent;font-family:inherit;font-size:.8125rem;cursor:pointer;color:var(--font-sub);transition:background .1s,color .1s}
.adm-tab.is-on{background:var(--main);color:#fff}
.adm-body{padding:1.25rem;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:.75rem}
.adm-intro{font-size:.8125rem;color:var(--font-sub);line-height:1.55}
.adm-section-head{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--font-sub);padding:.25rem 0 .125rem;margin-top:.5rem;border-top:1px solid var(--border)}
.adm-widget-grid{display:flex;flex-direction:column;gap:.25rem}
.adm-widget-card{border-radius:var(--r-lg);overflow:hidden}
.adm-widget-row{display:flex;align-items:center;gap:.75rem;padding:.5rem .625rem;border-radius:var(--r-lg);cursor:pointer;transition:background .1s}
.adm-widget-card .adm-widget-row{border-radius:0}
.adm-widget-row:hover{background:var(--hover)}
.adm-widget-row input{accent-color:var(--main);width:1rem;height:1rem;flex-shrink:0;cursor:pointer}
.adm-widget-icon{font-size:1.25rem;color:var(--main);flex-shrink:0}
.adm-widget-info{flex:1;min-width:0}
.adm-widget-info strong{display:block;font-size:.875rem;font-weight:600;color:var(--font)}
.adm-widget-info small{font-size:.75rem;color:var(--font-sub)}
.adm-privacy-toggle{background:none;border:none;cursor:pointer;padding:.25rem;display:flex;align-items:center;border-radius:50%;transition:background .1s;flex-shrink:0}
.adm-privacy-toggle:hover{background:var(--hover)}
.adm-privacy-info{background:var(--bg);border-top:1px solid var(--border);padding:.75rem .875rem;display:flex;flex-direction:column;gap:.375rem}
.adm-privacy-row{display:flex;gap:.5rem;align-items:flex-start;font-size:.8125rem}
.adm-privacy-label{font-weight:600;color:var(--font-sub);min-width:7rem;flex-shrink:0;font-size:.75rem;padding-top:.1rem}
.adm-form{display:flex;flex-direction:column;gap:.5rem}
.adm-inp{height:2.5rem;border:1px solid var(--border);border-radius:var(--r-lg);padding:0 .875rem;font-family:inherit;font-size:.875rem;outline:none;background:var(--bg);color:var(--font)}
.adm-inp:focus{border-color:var(--main)}
.adm-admins-list{display:flex;flex-direction:column;gap:.375rem;margin-top:.5rem}
.adm-admin-row{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;border-radius:var(--r-lg);border:1px solid var(--border);background:var(--bg)}
.adm-admin-info{flex:1;min-width:0}
.adm-admin-info strong{display:block;font-size:.875rem;font-weight:600}
.adm-admin-info small{font-size:.75rem;color:var(--font-sub)}
.adm-revoke-btn{padding:.25rem .625rem;border-radius:var(--r-full);border:1px solid #e67c7a;background:transparent;color:#e67c7a;font-family:inherit;font-size:.75rem;cursor:pointer}
.adm-empty{font-size:.875rem;color:var(--font-sub);text-align:center;padding:1.5rem 0}
.adm-org-select-row{display:flex;flex-direction:column;gap:.375rem}
.adm-org-new{display:flex;gap:.375rem;flex-wrap:wrap}
.adm-select{height:2.5rem;border:1px solid var(--border);border-radius:var(--r-lg);padding:0 .875rem;font-family:inherit;font-size:.875rem;background:var(--bg);color:var(--font);outline:none;cursor:pointer}
.adm-select:focus{border-color:var(--main)}
.adm-org-name{font-size:.9375rem;font-weight:600;color:var(--font);padding:.375rem 0}
.adm-field-label{font-size:.6875rem;font-weight:600;color:var(--font-sub);text-transform:uppercase;letter-spacing:.04em}
/* Skol-TV admin panel */
.adm-tv-row{display:flex;align-items:center;gap:.5rem}
.adm-tv-row input[type=text],.adm-tv-row input[type=password]{flex:1;height:2.25rem;border:1px solid var(--border);border-radius:var(--r-lg);padding:0 .75rem;font-family:inherit;font-size:.8125rem;background:var(--bg);color:var(--font);outline:none}
.adm-tv-link-inp{color:var(--font-sub)}
.adm-tv-slots{display:flex;flex-direction:column;gap:.5rem}
.adm-tv-slot{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding:.625rem;border:1px solid var(--border);border-radius:var(--r-lg)}
.adm-tv-weekdays{display:flex;gap:.375rem;flex-wrap:wrap}
.adm-tv-day{display:flex;align-items:center;gap:.2rem;font-size:.6875rem;color:var(--font-sub);cursor:pointer}
.adm-tv-day input{accent-color:var(--main);width:.875rem;height:.875rem;cursor:pointer}
.adm-tv-slot input[type=time]{height:2rem;border:1px solid var(--border);border-radius:var(--r-md);padding:0 .375rem;font-family:inherit;font-size:.8125rem;background:var(--bg);color:var(--font)}
.adm-tv-slot select{height:2rem;border:1px solid var(--border);border-radius:var(--r-md);padding:0 .5rem;font-family:inherit;font-size:.8125rem;background:var(--bg);color:var(--font);min-width:8rem}
.adm-tv-slot .adm-tv-label{flex:1;min-width:8rem;height:2rem;border:1px solid var(--border);border-radius:var(--r-md);padding:0 .5rem;font-family:inherit;font-size:.8125rem;background:var(--bg);color:var(--font)}
.adm-tv-del{padding:.25rem .5rem;border-radius:var(--r-md);border:1px solid var(--border);background:transparent;color:var(--font-sub);cursor:pointer}
.adm-tv-del:hover{border-color:#e67c7a;color:#e67c7a}
.pub-share-header{display:flex;align-items:center;margin-bottom:.375rem;padding-right:.25rem}
.pub-screen-row{display:flex;align-items:center;gap:.75rem;padding:.625rem .75rem;border-radius:var(--r-lg);border:1px solid var(--border);transition:border-color .12s,background .12s;flex:1;min-width:0}
.pub-screens-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:1.25rem}
@media (max-width:40rem){.pub-screens-grid{grid-template-columns:1fr}}
.pub-viewer-badge{display:inline-flex;align-items:center;gap:.2rem;padding:.125rem .5rem;border-radius:var(--r-full);background:rgba(57,176,187,.12);color:var(--main);font-size:.75rem;font-weight:600;flex-shrink:0}
/* New screen wizard */
.ns-modal{background:var(--el);border-radius:var(--r-xl);box-shadow:0 1rem 3rem rgba(0,0,0,.22);width:min(54rem,calc(100vw - 2rem));font-family:"Poppins",sans-serif;display:flex;flex-direction:column;max-height:calc(100vh - 3rem);overflow:hidden}
.ns-head{display:flex;align-items:center;gap:.75rem;padding:1.25rem 1.5rem 1rem;border-bottom:1px solid var(--divider);flex-shrink:0}
.ns-title{font-size:1.125rem;font-weight:700;flex:1;color:var(--font)}
.ns-body{padding:1.25rem 1.5rem 1.5rem;overflow-y:auto;flex:1}
.ns-section-label{font-size:.6875rem;font-weight:700;color:var(--font-sub);text-transform:uppercase;letter-spacing:.07em;margin-bottom:.75rem}
.ns-footer{display:flex;justify-content:space-between;align-items:center;padding:1.25rem 1.5rem;border-top:1px solid var(--divider);flex-shrink:0;gap:1rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;height:2.75rem;padding:0 1.375rem;border-radius:var(--r-full);font-family:"Poppins",sans-serif;font-size:.9375rem;font-weight:600;cursor:pointer;transition:background .14s,border-color .14s,color .14s,box-shadow .14s;letter-spacing:.01em;border:2px solid transparent;white-space:nowrap}
.btn-o{background:transparent;border-color:var(--border);color:var(--font)}.btn-o:hover{border-color:var(--main);color:var(--main);background:rgba(57,176,187,.05)}
.btn-p{background:#39b0bb;color:#fff;border-color:#39b0bb}.btn-p:hover{background:#2e9aa4;border-color:#2e9aa4;box-shadow:0 .25rem .75rem rgba(57,176,187,.35)}
.btn .material-icons-outlined{font-size:1rem}
/* Scene swatches */
.ns-bg-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.625rem}
.ns-bg-swatch{border-radius:var(--r-lg);aspect-ratio:16/9;cursor:pointer;position:relative;overflow:hidden;border:2.5px solid transparent;transition:border-color .13s,transform .13s,box-shadow .13s}
.ns-bg-swatch:hover{transform:scale(1.04);box-shadow:0 .25rem 1rem rgba(0,0,0,.18)}
.ns-bg-swatch.is-on{border-color:var(--main);box-shadow:0 0 0 3px rgba(57,176,187,.22)}
.ns-bg-name{position:absolute;bottom:0;left:0;right:0;padding:.3rem .5rem;font-size:.6rem;font-weight:600;background:rgba(0,0,0,.38);color:#fff;text-align:center}
.ns-bg-check{position:absolute;top:.3rem;right:.3rem;font-size:1rem!important;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5)}
/* Pastel color dots */
.ns-color-row{display:flex;flex-wrap:wrap;gap:.5rem}
.ns-color-dot{width:2.625rem;height:2.625rem;border-radius:50%;border:2.5px solid transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .13s,transform .13s,box-shadow .13s;flex-shrink:0}
.ns-color-dot:hover{transform:scale(1.12);box-shadow:0 .125rem .5rem rgba(0,0,0,.18)}
.ns-color-dot.is-on{border-color:var(--main);box-shadow:0 0 0 3px rgba(57,176,187,.22)}
/* Copy list */
.ns-copy-list{display:flex;flex-direction:column;gap:.5rem;max-height:22rem;overflow-y:auto}
.ns-copy-opt{display:flex;align-items:center;gap:.875rem;padding:.875rem 1rem;border-radius:var(--r-lg);border:2px solid var(--border);background:var(--bg);cursor:pointer;font-family:"Poppins",sans-serif;font-size:.9375rem;font-weight:500;color:var(--font);transition:border-color .13s,background .13s;text-align:left;width:100%}
.ns-copy-opt:hover{border-color:var(--main);background:var(--main-sub)}
.ns-copy-opt.is-on{border-color:var(--main);background:var(--main-sub)}
.ns-copy-icon{font-size:1.375rem!important;color:var(--main)}
.ns-copy-name{flex:1;font-weight:600}
.ns-copy-check{font-size:1.25rem!important;color:var(--main);margin-left:auto}
/* Cross-collection copy/move */
.ns-dest-select{width:100%;padding:.6rem .75rem;border:1.5px solid var(--border);border-radius:var(--r-lg);background:var(--bg);color:var(--font);font-family:"Poppins",sans-serif;font-size:.9rem}
.ns-coll-actions{display:flex;gap:.5rem;margin-top:.6rem}
.ns-coll-actions .btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.35rem}
.ns-coll-actions .btn .material-icons-outlined{font-size:1rem}
.ns-move-btn{color:var(--font-sub)}
.ns-coll-none,.ns-coll-err{font-size:.85rem;color:var(--font-sub);padding:.5rem 0}
.ns-coll-err{color:#b91c1c}
/* Layout cards */
.ns-layout-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.625rem}
.ns-layout-opt{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.875rem .625rem;border-radius:var(--r-lg);border:2px solid var(--border);background:var(--bg);cursor:pointer;transition:border-color .13s,background .13s,box-shadow .13s;font-family:"Poppins",sans-serif}
.ns-layout-opt:hover{border-color:var(--main);background:#fff;box-shadow:0 .125rem .5rem rgba(57,176,187,.12)}
.ns-layout-opt.is-on{border-color:var(--main);background:var(--main-sub);box-shadow:0 0 0 3px rgba(57,176,187,.15)}
.ns-layout-opt svg{width:4.5rem;height:3.75rem;color:var(--font-sub)}
.ns-layout-opt.is-on svg{color:var(--main)}
.ns-layout-opt strong{font-size:.8125rem;font-weight:700;color:var(--font)}
.ns-layout-opt small{font-size:.6875rem;color:var(--font-sub);text-align:center;line-height:1.3}
/* Screen picker popover */
.screen-picker-pop{position:fixed;z-index:12000;background:var(--el);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:0 .5rem 2rem rgba(0,0,0,.18);padding:.625rem;min-width:16rem}
.screen-picker-title{font-size:.75rem;font-weight:600;color:var(--font-sub);padding:.25rem .5rem .5rem;letter-spacing:.04em;text-transform:uppercase}
.screen-picker-opt{display:flex;align-items:center;gap:.75rem;width:100%;padding:.625rem .75rem;border:none;border-radius:var(--r-lg);background:transparent;cursor:pointer;font-family:"Poppins",sans-serif;text-align:left;transition:background .1s;color:var(--font)}
.screen-picker-opt:hover{background:var(--hover)}
.screen-picker-opt strong{display:block;font-size:.875rem;font-weight:600}
.screen-picker-opt small{display:block;font-size:.75rem;color:var(--font-sub);font-weight:400}
.pub-screen-row.is-shared{border-color:var(--main);background:rgba(57,176,187,.05)}
.pub-group-btn{display:flex;align-items:center;gap:.3rem;margin-top:.5rem;padding:.3rem .75rem;border-radius:var(--r-full);border:1px solid var(--main);background:rgba(57,176,187,.08);color:var(--main);font-family:inherit;font-size:.75rem;font-weight:400;cursor:pointer;transition:background .1s}
.pub-group-btn:hover{background:rgba(57,176,187,.16)}
.pub-group-btn--warn{border-color:var(--border);background:transparent;color:var(--font-sub)}
.pub-group-btn--warn:hover{background:var(--hover);border-color:var(--main);color:var(--main)}
.pub-group-warning{display:flex;align-items:center;gap:.25rem;margin-top:.375rem;font-size:.6875rem;color:#d97706}
.pub-group-pop{position:fixed;z-index:15000;background:var(--el);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:0 .5rem 2rem rgba(0,0,0,.18);width:min(56rem,calc(100vw - 2rem));height:calc(100vh - 4rem);max-height:calc(100vh - 4rem);display:flex;flex-direction:column;font-family:"Poppins",sans-serif}
.pub-group-pop-head{padding:.625rem .75rem;border-bottom:1px solid var(--divider);display:flex;align-items:center;gap:.5rem;flex-shrink:0}
.pub-group-search{flex:1;min-width:0;height:2rem;border:1px solid var(--border);border-radius:var(--r-full);padding:0 .75rem;font-family:inherit;font-size:.8125rem;outline:none;background:var(--bg)}
.pub-group-search:focus{border-color:var(--main)}
.pub-group-count{font-size:.6875rem;font-weight:600;color:var(--font-sub);white-space:nowrap;flex-shrink:0}
.pub-group-count.has-sel{color:var(--main)}
.pub-group-list{overflow-y:auto;flex:1;padding:.375rem 0;min-height:0}
.pub-group-item-wrap{border-bottom:1px solid var(--divider);display:flex;flex-wrap:wrap;align-items:center}
.pub-group-item-wrap:last-child{border-bottom:none}
.pub-group-item{display:flex;align-items:center;gap:.625rem;padding:.4rem .875rem;cursor:pointer;font-size:.8125rem;color:var(--font);transition:background .1s;flex:1}
.pub-group-item:hover{background:var(--hover)}
.pub-group-item input{accent-color:var(--main);width:.9375rem;height:.9375rem;flex-shrink:0;cursor:pointer}
.pub-group-expand{flex-shrink:0;width:1.75rem;height:1.75rem;display:flex;align-items:center;justify-content:center;border:none;background:transparent;cursor:pointer;color:var(--font-sub);border-radius:var(--r-full);transition:transform .15s}
.pub-group-expand:hover{background:var(--hover)}
.pub-group-expand:disabled{opacity:.3;cursor:default}
.pub-group-expand.is-open{transform:rotate(180deg)}
.pub-group-members{flex-basis:100%;padding:.125rem 0 .375rem 1.75rem;max-height:12rem;overflow-y:auto}
.pub-student-item{display:flex;align-items:center;gap:.5rem;padding:.3rem .5rem;cursor:pointer;font-size:.75rem;color:var(--font);border-radius:.375rem;min-width:0}
.pub-student-item:hover{background:var(--hover)}
.pub-student-item input{accent-color:var(--main);width:.875rem;height:.875rem;flex-shrink:0;cursor:pointer}
.pub-student-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.pub-student-item--implied{opacity:.55}
.pub-student-item--implied input{cursor:default}
.pub-student-implied-tag{font-size:.625rem;color:var(--font-sub);margin-left:auto;white-space:nowrap}
.pub-student-group-hint{font-size:.6875rem;color:var(--font-sub);margin-left:auto;white-space:nowrap}
.pub-student-empty{padding:.375rem .875rem;font-size:.75rem;color:var(--font-sub)}
.pub-student-search-wrap{border-top:1px solid var(--divider);padding:.625rem .75rem .375rem;display:flex;flex-direction:column;flex:1;min-height:0}
.pub-student-search-row{display:flex;align-items:center;gap:.5rem}
.pub-student-search{flex:1;min-width:0;height:2rem;border:1px solid var(--border);border-radius:var(--r-full);padding:0 .75rem;font-family:inherit;font-size:.8125rem;outline:none;background:var(--bg);flex-shrink:0}
.pub-student-search:focus{border-color:var(--main)}
.pub-student-list-label{font-size:.6875rem;font-weight:600;color:var(--font-sub);white-space:nowrap;flex-shrink:0}
.pub-student-list{overflow-y:auto;flex:1;margin-top:.375rem;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:.125rem;align-content:start}
.pub-group-pop-foot{padding:.5rem .75rem;border-top:1px solid var(--divider);display:flex;gap:.375rem;flex-shrink:0}
.pub-group-all,.pub-group-none{flex:1;padding:.3rem;border-radius:var(--r-full);border:1px solid var(--border);background:transparent;font-family:inherit;font-size:.75rem;cursor:pointer;color:var(--font-sub)}
.pub-group-all:hover,.pub-group-none:hover{background:var(--hover)}
.pub-group-ok{padding:.3rem .875rem;border-radius:var(--r-full);border:none;background:var(--main);color:#fff;font-family:inherit;font-size:.75rem;font-weight:600;cursor:pointer}
.pub-group-ok:hover{opacity:.9}
.pub-screen-name{flex:1;font-size:1rem;font-weight:700;color:var(--font);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pub-screen-link{font-size:.75rem;color:var(--font-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:10rem}
.pub-toggle-wrap{display:flex;flex-direction:column;align-items:center;gap:.25rem;flex-shrink:0}
.pub-toggle-label{font-size:.6875rem;font-weight:400;color:var(--font-sub);text-transform:uppercase;letter-spacing:.04em}
.pub-toggle-value{font-size:.6875rem;font-weight:600;color:var(--font-sub);min-width:1.5rem;text-align:center}
.pub-tog input:checked~.pub-toggle-value{color:var(--main)}
.pub-tog{position:relative;width:2.25rem;height:1.25rem;cursor:pointer}
.pub-tog input{position:absolute;opacity:0;width:0;height:0}
.pub-tog-track{position:absolute;inset:0;border-radius:9999px;background:var(--border);transition:background .2s}
.pub-tog input:checked~.pub-tog-track{background:var(--main)}
.pub-tog-thumb{position:absolute;top:.125rem;left:.125rem;width:1rem;height:1rem;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s}
.pub-tog input:checked~.pub-tog-thumb{transform:translateX(1rem)}
.pub-link-row{display:flex;align-items:center;gap:.5rem;padding:.5rem .625rem;border-radius:var(--r-md);background:var(--divider);margin-top:.125rem}
.pub-link-url{flex:1;font-size:.75rem;color:var(--font-sub);word-break:break-all;font-family:monospace}
.pub-copy-btn{flex-shrink:0;height:1.75rem;padding:0 .625rem;border-radius:var(--r-full);border:1px solid var(--border);background:var(--el);font-family:"Poppins",sans-serif;font-size:.75rem;cursor:pointer;color:var(--font-sub);transition:border-color .12s,color .12s;display:inline-flex;align-items:center;gap:.25rem}
.pub-copy-btn:hover{border-color:var(--main);color:var(--main)}
.pub-copy-overview{height:2.25rem;padding:0 1rem;font-size:.8125rem;border-color:var(--main);color:var(--main);font-weight:500}
.pub-empty{font-size:.8125rem;color:var(--font-sub);text-align:center;padding:.5rem 0}
.pub-section-label{font-size:.6875rem;font-weight:600;color:var(--font-sub);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.125rem}
/* Shared board read-only mode (viewer) */
.shared-board-view .widget-head,.shared-board-view .widget-close,.shared-board-view .kk-lesson-add,.shared-board-view .txt-ctrl,.shared-board-view .drag-handle,.shared-board-view .resize-handle,.shared-board-view .widget-op-btn{display:none!important}
.shared-board-view .widget{pointer-events:none}
.shared-board-view .widget-body{pointer-events:auto}
.shared-board-view .kk-lesson:not(.kk-lesson-add){pointer-events:auto;cursor:pointer}
.shared-board-view #kk-toolbar,.shared-board-view #btn-push-students,.shared-board-view #btn-publish,.shared-board-view #btn-whiteboard,.shared-board-view #btn-hand-panel,.shared-board-view #btn-chat-panel{display:none!important}
.shared-board-view #kk-stage{padding-bottom:0}
/* Shared board edit mode (editor) — can edit content but not delete boards */
.shared-board-edit .kk-lesson-add,.shared-board-edit .lesson-close{display:none!important}
.shared-board-edit #btn-publish,.shared-board-edit #btn-push-students{display:none!important}
/* ── Welcome overlay ── */
#wlc-overlay{position:fixed;top:3.5rem;left:0;right:0;bottom:4.5rem;z-index:190;display:flex;align-items:center;justify-content:center;padding:1.5rem;background:linear-gradient(145deg,#1a8f9a 0%,#29b0bb 45%,#3acfd0 100%);pointer-events:none;overflow-y:auto}
#wlc-overlay .wlc-card{pointer-events:auto}
.wlc-card{background:#fff;border-radius:1.75rem;box-shadow:0 1.5rem 4rem rgba(0,0,0,.22);padding:clamp(1.5rem,4vh,3rem) clamp(1.25rem,4vw,3.5rem) clamp(1.25rem,3vh,2.5rem);max-width:34rem;width:100%;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.75rem;animation:wlc-in .4s cubic-bezier(.16,1,.3,1)}
@keyframes wlc-in{from{opacity:0;transform:translateY(1.5rem) scale(.96)}to{opacity:1;transform:none}}
.wlc-logo{width:clamp(3rem,6vh,5rem);height:clamp(3rem,6vh,5rem);border-radius:1.25rem;background:linear-gradient(145deg,#29b0bb,#3acfd0);display:flex;align-items:center;justify-content:center;margin-bottom:.125rem;box-shadow:0 .5rem 1.5rem rgba(41,176,187,.35);flex-shrink:0}
.wlc-badge{font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#29b0bb;background:rgba(41,176,187,.1);border-radius:99px;padding:.2rem .875rem;margin-bottom:-.25rem}
.wlc-h1{font-size:clamp(1.75rem,4vh,2.5rem);font-weight:800;color:#0e3f44;line-height:1.1;margin:0}
.wlc-tagline{font-size:.9375rem;font-weight:500;color:#546365;margin-top:-.25rem;font-style:italic}
.wlc-body{font-size:.875rem;color:#546365;line-height:1.6;max-width:26rem;margin:.125rem 0}
.wlc-btn{margin-top:.25rem;width:100%;padding:.875rem 1.5rem;border-radius:var(--r-xl);background:linear-gradient(135deg,#29b0bb,#1a9aa5);color:#fff;border:none;font-family:"Poppins",sans-serif;font-size:1rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.625rem;box-shadow:0 .375rem 1.25rem rgba(41,176,187,.4);transition:transform .13s,box-shadow .13s}
.wlc-btn:hover{transform:translateY(-1px);box-shadow:0 .625rem 1.75rem rgba(41,176,187,.5)}
.wlc-btn:active{transform:translateY(0)}
.wlc-welcome{font-size:.875rem;color:#9caead;margin-top:.25rem}
/* Locked screen (no license) */
.wlc-locked{pointer-events:auto}
.wlc-locked-card{background:#fff;border-radius:1.75rem;box-shadow:0 1.5rem 4rem rgba(0,0,0,.22);padding:2.5rem 3rem 2rem;max-width:44rem;width:100%;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1rem;animation:wlc-in .4s cubic-bezier(.16,1,.3,1)}
.wlc-features{display:grid;grid-template-columns:repeat(3,1fr);gap:.875rem;width:100%;margin:.25rem 0}
.wlc-feat{background:rgba(41,176,187,.07);border-radius:1rem;padding:1.125rem 1rem;text-align:left;border:1.5px solid rgba(41,176,187,.12)}
.wlc-feat-icon{margin-bottom:.625rem}
.wlc-feat-title{font-size:.875rem;font-weight:700;color:#0e3f44;margin-bottom:.25rem}
.wlc-feat-desc{font-size:.78125rem;color:#546365;line-height:1.5}
.wlc-locked-cta{background:linear-gradient(135deg,#e8f9fa,#d4f5f5);border-radius:1.25rem;padding:1.125rem 1.25rem;display:flex;align-items:flex-start;gap:.75rem;width:100%;text-align:left;border:1.5px solid rgba(41,176,187,.2)}
.wlc-locked-cta-ic{flex-shrink:0;margin-top:.125rem}
.wlc-locked-cta p{margin:0;font-size:.9375rem;color:#0e3f44;font-weight:500;line-height:1.5}
.wlc-locked-logout{font-size:.8125rem;color:#9caead;margin-top:-.125rem;text-decoration:none}
.wlc-locked-logout:hover{color:#546365;text-decoration:underline}
@media(max-width:520px){.wlc-features{grid-template-columns:1fr}.wlc-locked-card{padding:2rem 1.5rem 1.5rem}}
/* First-use add-button hint */
.add-hint-text{background:#0e3f44;color:#fff;font-family:"Poppins",sans-serif;font-size:.875rem;font-weight:600;line-height:1.4;text-align:center;padding:.625rem 1rem;border-radius:.875rem;box-shadow:0 .375rem 1.25rem rgba(14,63,68,.35)}
.add-hint-arrow{animation:add-hint-bounce .75s ease-in-out infinite alternate}
@keyframes add-hint-bounce{from{transform:translateY(0)}to{transform:translateY(8px)}}
/* Tab rename inline input (canvas.js _startTabRename) */
.tab-rename-input{width:6rem;min-width:4rem;border:none;outline:none;background:transparent;font:inherit;color:inherit;padding:0;text-align:center}
/* Delete-screen confirmation popup (canvas.js showDeleteConfirm) */
.del-screen-pop{position:fixed;z-index:9999;background:var(--el,#fff);border:1px solid var(--border,#dedede);border-radius:var(--r-lg,1rem);box-shadow:0 4px 16px rgba(0,0,0,.15);padding:.75rem 1rem;display:flex;flex-direction:column;gap:.5rem;min-width:11rem;font-family:"Poppins",sans-serif}
/* ── Drawing overlay toolbar ── */
#draw-tbar{position:fixed;bottom:5.5rem;left:50%;transform:translateX(-50%);z-index:5000;align-items:center;gap:.375rem;background:rgba(14,22,30,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:.45rem .875rem;box-shadow:0 4px 24px rgba(0,0,0,.45);font-family:"Poppins",sans-serif;white-space:nowrap}
.dtb-g{display:flex;align-items:center;gap:.25rem}
.dtb-sep{width:1px;height:1.25rem;background:rgba(255,255,255,.12);margin:0 .25rem;flex-shrink:0}
.dtool,.dtb-act{width:2rem;height:2rem;min-width:2rem;max-width:2rem;border-radius:7px;border:none;background:transparent;color:rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .12s,color .12s;flex-shrink:0;padding:0;overflow:hidden}
.dtool:hover,.dtb-act:hover{background:rgba(255,255,255,.12);color:#fff}
.dtool.dtb-on{background:rgba(57,176,187,.25);color:#39b0bb}
.dtool-wide{width:auto;max-width:none;padding:0 .625rem;gap:.3rem}
.dtool-label{font-size:11px;font-weight:600;white-space:nowrap}
.dtb-x:hover{background:rgba(234,67,53,.22)!important;color:#ef5350!important}
.dcol{width:1.2rem;height:1.2rem;border-radius:50%;background:var(--cc);border:2px solid rgba(255,255,255,.15);cursor:pointer;transition:transform .12s,border-color .12s;flex-shrink:0}
.dcol:hover{transform:scale(1.2)}
.dcol.dcb-on{border-color:#fff;transform:scale(1.2)}
.dcol-more{position:relative;width:auto;height:auto;min-width:1.2rem;min-height:1.2rem;border-radius:50%;background:#fff;display:grid;place-items:center;color:#555}
/* Shrunk to a 1px inert speck, not a full-size overlay — see the comment at this button's markup
   (drawing.js) for why a bigger one caused the native picker to reopen on every later click. */
.dcol-more-inp{position:absolute;top:0;left:0;width:1px;height:1px;opacity:0;pointer-events:none;border:none;padding:0}
.dwidth{width:1.75rem;height:1.75rem;border-radius:5px;border:none;background:transparent;color:rgba(255,255,255,.45);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .12s,color .12s}
.dwidth:hover{background:rgba(255,255,255,.1);color:#fff}
.dwidth.dwb-on{background:rgba(57,176,187,.2);color:#39b0bb}
.dwidth-dot{display:inline-block;border-radius:50%;background:currentColor;flex-shrink:0}
#btn-draw{position:relative}
#btn-draw.is-on{background:var(--main-sub)!important;color:var(--main)!important;border-color:var(--main)!important}
#btn-draw.has-perm-layer::after{content:'';position:absolute;top:3px;right:3px;width:7px;height:7px;border-radius:50%;background:#f59e0b;border:1.5px solid var(--bg)}
#kk-toolbar.draw-active{opacity:.22;pointer-events:none;transition:opacity .2s}
.dtb-exit-draw{border:1.5px solid rgba(255,255,255,.2);border-radius:999px;background:transparent;color:rgba(255,255,255,.75);font-family:"Poppins",sans-serif;font-size:.7rem;font-weight:600;padding:.3rem .85rem;cursor:pointer;white-space:nowrap;line-height:1.4;letter-spacing:.01em;transition:background .12s,border-color .12s,color .12s}
.dtb-exit-draw:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.45);color:#fff}
.wbtb-open-snap{background:rgba(57,176,187,.12);color:#39b0bb;border:1px solid rgba(57,176,187,.35);display:inline-flex;align-items:center}
.wbtb-open-snap:hover{background:rgba(57,176,187,.25)}
#wb-open-snap-pop{position:fixed;z-index:99999;background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:.875rem;box-shadow:0 .5rem 2rem rgba(0,0,0,.2);width:22rem;max-height:22rem;overflow-y:auto;font-family:"Poppins",sans-serif}
.wb-osp-hdr{padding:.6rem 1rem .4rem;font-weight:600;font-size:.82rem;color:#555;border-bottom:1px solid #f0f0f0}
.wb-osp-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.5rem;padding:.625rem}
.wb-osp-card{cursor:pointer;border-radius:.5rem;overflow:hidden;border:1.5px solid #e5e7eb;transition:border-color .12s,transform .1s}
.wb-osp-card:hover{border-color:#39b0bb;transform:scale(1.03)}
.wb-osp-thumb{width:100%;aspect-ratio:1/1;background-size:cover;background-position:center;background-color:#f6f8fa}
.wb-osp-name{font-size:.68rem;padding:.2rem .3rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#444;background:#fafafa}
.wb-osp-empty,.wb-osp-loading{padding:1.5rem;text-align:center;color:#888;font-size:.85rem}