/* toolbar.css — Main toolbar, add-widget popup, settings drawer, My images, background picker. */
/* ── Floating toolbar ── */
/* ── Toolbar ── */
#kk-board-label{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);font-family:"Poppins",sans-serif;font-size:.6875rem;font-weight:600;color:var(--font-sub);background:#fff;border:1px solid #e5e5e5;border-radius:8px 8px 0 0;border-bottom:none;padding:.25rem .875rem;white-space:nowrap;pointer-events:auto;cursor:text;z-index:1;letter-spacing:.01em;user-select:none}
body.present-mode #kk-board-label,body.student-mode #kk-board-label{display:none}
.kk-toolbar{position:absolute;left:50%;bottom:1rem;transform:translateX(-50%);display:inline-flex;align-items:center;gap:.25rem;padding:.3rem;background:#fff;border:1px solid #e5e5e5;border-radius:var(--r-full);filter:drop-shadow(0 .375rem 1rem rgba(20,30,35,.13));z-index:5001;white-space:nowrap;overflow:visible}
.kk-tool{display:inline-flex;align-items:center;gap:.375rem;padding:.625rem .75rem;border-radius:var(--r-full);font-family:"Poppins",sans-serif;font-size:.8125rem;color:var(--font);border:1px solid transparent;background:transparent;cursor:pointer;transition:background .12s,color .12s}
.kk-tool:hover{background:var(--hover)}
.kk-tool.is-on{background:var(--main-sub);color:var(--main);border-color:var(--main)}
.kk-tool-primary{background:var(--main);color:#fff;border-color:var(--main);padding:.5rem 1rem;font-weight:600}
.kk-tool-primary:hover{opacity:.92;background:var(--main)}
.kk-tool-accent{background:rgba(57,176,187,.10);color:var(--main);border-color:var(--main);padding:.5rem 1rem;font-weight:600}
.kk-tool-accent:hover{background:var(--main);color:#fff}
.kk-tool-sep{display:none}
.kk-tool-optgroup{display:inline-flex;align-items:center;gap:.25rem}
.kk-tool-spacer{flex:1}
.kk-tool .material-icons-outlined,.kk-tool-primary .material-icons-outlined,.kk-tool-accent .material-icons-outlined{font-size:1.3rem}
.kk-tool-icon{padding:.4rem;width:2.375rem;height:2.375rem;position:relative;justify-content:center;flex-shrink:0}
.kk-hands-ico{height:1.35rem;width:auto;display:block;flex-shrink:0}
.kk-tool-icon .kk-tool-badge{position:absolute;top:-.25rem;right:-.25rem;min-width:1.125rem;height:1.125rem;border-radius:99px;background:#ef4444;color:#fff;font-size:.625rem;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 .25rem;pointer-events:none;line-height:1}
/* ─ Skicka till elever (publish) ─ */
.kk-tool-push{font-weight:600;padding:.5rem .6rem;font-size:.75rem}
.kk-tool-push .material-icons-outlined{font-size:1.1rem}
/* .kk-tool-push no longer highlights as orange when is-dirty — it's confusing
   rather than helpful. The save indicator at the top right says "Sparar..." / "Sparat". */
.kk-tool-push.is-live{background:transparent;color:#111;border-color:transparent}
.kk-tool-push.is-live:hover{background:var(--hover)}
.kk-tool-push.is-busy{opacity:.6;pointer-events:none}
/* Split push button: primary action + caret to choose Live/Manuell */
.kk-push-group{display:inline-flex;align-items:center}
.kk-push-group #btn-push-students{border-top-right-radius:0;border-bottom-right-radius:0;padding-right:.5rem;min-width:5.5rem;justify-content:center}
.kk-push-caret{border-top-left-radius:0;border-bottom-left-radius:0;padding-left:.25rem;padding-right:.4rem;margin-left:1px}
.kk-push-caret .material-icons-outlined{font-size:1.1rem}
#btn-push-students .material-icons-outlined{color:#111}
#btn-push-students.is-dirty .material-icons-outlined{color:#39b0bb}
.kk-push-caret.is-open{background:var(--hover)}
/* Live/Manuell delivery-mode menu */
.push-mode-menu{position:fixed;z-index:15000;min-width:15.5rem;background:var(--el,#fff);border:1px solid var(--border);border-radius:.875rem;box-shadow:0 .5rem 1.5rem rgba(20,30,35,.16);padding:.4rem;font-family:"Poppins",sans-serif;animation:pmIn .14s ease}
@keyframes pmIn{from{opacity:0;transform:translateY(.25rem)}to{opacity:1;transform:none}}
.push-mode-head{font-size:.7rem;font-weight:600;color:var(--font-sub);text-transform:uppercase;letter-spacing:.03em;padding:.4rem .6rem .35rem}
.push-mode-item{display:flex;align-items:flex-start;gap:.6rem;width:100%;text-align:left;padding:.55rem .6rem;border:none;background:transparent;border-radius:.6rem;cursor:pointer;transition:background .1s}
.push-mode-item:hover{background:var(--hover)}
.push-mode-item.is-active{background:var(--main-sub)}
.push-mode-ico{width:1.9rem;height:1.9rem;border-radius:.5rem;display:grid;place-items:center;flex-shrink:0;background:var(--hover);color:var(--font-sub)}
.push-mode-item.is-active .push-mode-ico{background:var(--main);color:#fff}
.push-mode-body{flex:1;min-width:0}
.push-mode-title{font-size:.8125rem;font-weight:600;color:var(--font)}
.push-mode-sub{font-size:.7rem;color:var(--font-sub);margin-top:.1rem;white-space:normal}
.push-mode-check{margin-left:auto;align-self:center;color:var(--main);font-size:1.1rem;display:none}
.push-mode-item.is-active .push-mode-check{display:block}
#kk-toast{position:fixed;left:50%;bottom:5rem;transform:translateX(-50%) translateY(1rem);background:rgba(20,30,35,.92);color:#fff;font-family:"Poppins",sans-serif;font-size:.8125rem;font-weight:500;padding:.625rem 1rem;border-radius:var(--r-full);box-shadow:0 .5rem 1.5rem rgba(20,30,35,.25);z-index:50;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;white-space:nowrap}
#kk-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#kk-toast.err{background:#dc2626}
#session-expired-banner{position:fixed;bottom:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:center;gap:1rem;padding:.7rem 1.2rem;background:#7c3aed;color:#fff;font-size:.85rem;font-weight:500;box-shadow:0 -2px 12px rgba(0,0,0,.18)}
#session-expired-banner a{color:#e9d5ff;text-decoration:underline;white-space:nowrap;cursor:pointer}
.pub-live-row{display:inline-flex;align-items:center;gap:.5rem;margin-top:.5rem;cursor:pointer;user-select:none}
.pub-live-switch{position:relative;width:2.25rem;height:1.25rem;border-radius:var(--r-full);background:rgba(0,0,0,.18);transition:background .15s;flex-shrink:0}
.pub-live-switch.on{background:#16a34a}
.pub-live-dot{position:absolute;top:.1875rem;left:.1875rem;width:.875rem;height:.875rem;border-radius:50%;background:#fff;transition:transform .15s}
.pub-live-switch.on .pub-live-dot{transform:translateX(1rem)}
.pub-live-text{font-size:.75rem;color:var(--font-sub)}

/* ── Add-widget popup ── */
.add-menu{position:absolute;bottom:5.75rem;left:50%;transform:translateX(-50%);width:min(80rem,calc(100vw - 2.5rem));height:min(54rem,calc(100vh - 7.75rem));max-height:calc(100vh - 7.75rem);background:rgba(255,255,255,.97);backdrop-filter:blur(28px) saturate(140%);-webkit-backdrop-filter:blur(28px) saturate(140%);border:1px solid rgba(255,255,255,.7);border-radius:var(--r-xl);box-shadow:0 1.25rem 2.5rem rgba(10,20,40,.22);z-index:9;display:flex;flex-direction:column;overflow:hidden}
.add-menu.hidden{display:none}
.add-menu-tip{position:absolute;bottom:-.4375rem;left:50%;margin-left:-.4375rem;width:.875rem;height:.875rem;background:rgba(255,255,255,.95);border-right:1px solid rgba(255,255,255,.7);border-bottom:1px solid rgba(255,255,255,.7);transform:rotate(45deg)}
.add-menu-head{padding:.75rem .875rem .75rem 1rem;display:flex;align-items:center;gap:.5rem;border-bottom:1px solid rgba(0,0,0,.06);flex-shrink:0}
.add-menu-search{flex:1;display:flex;align-items:center;gap:.5rem;padding:.4375rem .75rem;border-radius:var(--r-full);background:rgba(0,0,0,.04);border:1px solid transparent}
.add-menu-search:focus-within{background:#fff;border-color:var(--main)}
.add-menu-search .material-icons-outlined{color:var(--font-sub);font-size:1.125rem}
.add-menu-search input{flex:1;border:none;outline:none;background:transparent;font-family:"Poppins",sans-serif;font-size:.875rem;color:var(--font)}
.add-menu-body{display:flex;overflow:hidden;flex:1;min-height:0}
.add-menu-sidebar{width:12.5rem;flex-shrink:0;background:rgba(0,0,0,.025);border-right:1px solid rgba(0,0,0,.06);padding:.5rem;overflow-y:auto;display:flex;flex-direction:column;gap:.1rem;scrollbar-width:thin}
.add-menu-cat{display:flex;align-items:center;gap:.6rem;border:none;background:transparent;border-radius:var(--r-md);padding:.55rem .6rem;cursor:pointer;font-family:"Poppins",sans-serif;font-size:.78rem;font-weight:600;color:var(--font-sub);text-align:left;transition:background .12s,color .12s}
.add-menu-cat:hover{background:rgba(0,0,0,.045)}
.add-menu-cat--on{background:#fff;color:var(--main);box-shadow:0 1px 5px rgba(0,0,0,.09)}
.add-menu-cat .material-icons-outlined{font-size:1.15rem;flex-shrink:0}
.add-menu-content{flex:1;overflow-y:auto;overflow-x:hidden;padding:.875rem 1rem;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.15) transparent}
.add-menu-scroll-hint{position:sticky;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:center;padding:.5rem 0 .375rem;background:linear-gradient(transparent,rgba(255,255,255,.96) 40%);pointer-events:auto;opacity:1;transition:opacity .2s;flex-shrink:0;cursor:pointer}
.add-menu-scroll-hint.hidden{opacity:0;pointer-events:none}
.add-menu-scroll-hint-arrow{width:2rem;height:2rem;border-radius:50%;background:var(--main);display:grid;place-items:center;box-shadow:0 2px 8px rgba(57,176,187,.5)}
.add-menu-scroll-hint-arrow .material-icons-outlined{font-size:1.125rem;color:#fff;animation:bounce-down .9s ease-in-out infinite}
.add-menu-scroll-hint:hover .add-menu-scroll-hint-arrow{background:var(--main-dark,#2db8c9);box-shadow:0 3px 10px rgba(57,176,187,.65)}
@keyframes bounce-down{0%,100%{transform:translateY(-2px)}50%{transform:translateY(2px)}}
.add-menu-cat-heading{font-size:.95rem;font-weight:700;color:var(--font);margin:0 0 .75rem .1rem}
.add-menu-cardgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:.85rem}
/* Lärarens verktyg overview: compact cards on one surface (4 columns; the "show" group sits beside the last card) */
.tl-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem}
.tl-h{grid-column:1/-1;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--font-sub)}
.tl-grid .add-tile{padding:.65rem .5rem;gap:.35rem}
.tl-grid .add-tile-icon{width:2.4rem;height:2.4rem;border-radius:.8rem}
.tl-grid .add-tile-icon .material-icons-outlined{font-size:1.35rem}
.tl-block{display:flex;flex-direction:column;gap:.5rem;min-width:0;border:1.5px dashed rgba(0,0,0,.14);border-radius:1.2rem;padding:.6rem .7rem .7rem}
.tl-block .tl-h{grid-column:auto}
.tl-sub{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
.add-menu-headrow{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.4rem}
.add-menu-headrow .add-menu-cat-heading{margin:0}
.cat-viewtoggle{display:inline-flex;background:rgba(0,0,0,.06);border-radius:999px;padding:.15rem;flex-shrink:0}
.cat-viewtoggle button{border:0;background:transparent;border-radius:999px;padding:.2rem .7rem;font:600 .72rem/1.2 "Poppins",sans-serif;color:var(--font-sub);cursor:pointer}
.cat-viewtoggle button.on{background:var(--main);color:#fff}
.add-tile-thumb{width:100%;aspect-ratio:3/2;border-radius:.8rem;overflow:hidden;background:var(--el,#fff);flex-shrink:0;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.add-tile-thumb--icon{display:grid;place-items:center;color:#fff}
.add-tile-thumb--icon .material-icons-outlined{font-size:2.2rem}
.tl-grid.thumbs .add-tile{gap:.45rem;padding:.5rem .5rem .65rem}
.tl-grid .add-tile-thumb{border-radius:.65rem;aspect-ratio:2/1.35}
.add-menu-cardgrid.thumbs .add-tile{gap:.5rem;padding:.6rem .6rem .75rem}
.add-tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:.55rem;padding:1rem .7rem;border-radius:1rem;border:1.5px solid transparent;background:var(--main-sub);text-align:center;cursor:pointer;font-family:"Poppins",sans-serif;color:var(--font);width:100%;min-width:0;transition:transform .12s,box-shadow .12s,border-color .12s}
.add-tile:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.1);border-color:var(--main)}
.add-tile.coming{opacity:.55;cursor:default}
.add-tile.coming:hover{transform:none;box-shadow:none;border-color:transparent}
.add-tile-icon{width:3.1rem;height:3.1rem;border-radius:1rem;display:grid;place-items:center;background:#fff;color:var(--main);flex-shrink:0}
.add-tile-icon .material-icons-outlined{font-size:1.65rem}
.add-tile-text{min-width:0;width:100%}
.add-tile-label{font-size:.82rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.3rem;min-width:0}
.add-tile-desc{display:block;font-size:.7rem;color:var(--font-sub);line-height:1.3;margin-top:.2rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.plus-badge{font-size:.5625rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:.1rem .35rem;border-radius:.25rem;background:linear-gradient(135deg,#f59e0b,#f97316);color:#fff;flex-shrink:0}
.add-tile--plus:not([data-body-tier="plus"]){opacity:.75}
body[data-tier="plus"] .add-tile--plus{opacity:1}
.add-tile--org-locked{opacity:.5;cursor:not-allowed}
.add-tile--org-locked .add-tile-icon{background:#f1f5f9;color:#94a3b8}
/* Upgrade modal */
.upgrade-modal{background:var(--el);border-radius:var(--r-xl);box-shadow:0 8px 32px rgba(0,0,0,.2);width:min(22rem,calc(100vw - 2rem));padding:2rem;text-align:center;font-family:"Poppins",sans-serif}
.upgrade-icon{font-size:2.5rem;margin-bottom:.75rem}
.upgrade-title{font-size:1.25rem;font-weight:600;margin-bottom:.5rem}
.upgrade-desc{font-size:.875rem;color:var(--font-sub);margin-bottom:1.25rem}
.upgrade-list{text-align:left;list-style:none;display:flex;flex-direction:column;gap:.375rem;margin-bottom:1.5rem;padding:0}
.upgrade-list li{font-size:.8125rem;color:var(--font);display:flex;align-items:center;gap:.5rem}
.upgrade-list li::before{content:"✓";color:var(--main);font-weight:700;flex-shrink:0}
.upgrade-footer{display:flex;gap:.75rem;justify-content:center}
.add-tile-pill{font-size:.625rem;padding:.0625rem .375rem;border-radius:var(--r-full);background:var(--warn-sub);color:#b07b00;font-weight:600}
.add-menu-foot{padding:.5rem .75rem;border-top:1px solid rgba(0,0,0,.06);background:rgba(0,0,0,.02);flex-shrink:0}
.add-foot-btn{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:.4375rem;padding:.5rem;border-radius:var(--r-md);border:1px solid var(--border);background:#fff;font-family:"Poppins",sans-serif;font-size:.8125rem;color:var(--font);cursor:pointer}
.add-foot-btn:hover{background:var(--main-sub);border-color:var(--main);color:var(--main)}
.add-foot-btn .material-icons-outlined{font-size:1rem;color:var(--main)}

/* ── Settings drawer ── */
.kk-settings{position:absolute;top:3.25rem;right:1rem;bottom:4.5rem;width:21rem;background:rgba(255,255,255,.88);backdrop-filter:blur(28px) saturate(140%);-webkit-backdrop-filter:blur(28px) saturate(140%);border:1px solid rgba(255,255,255,.6);border-radius:var(--r-xl);box-shadow:0 1rem 2.5rem rgba(10,20,40,.20);z-index:8;display:flex;flex-direction:column;overflow:hidden}
.kk-settings.kk-settings--embedded{position:static;inset:auto;width:100%;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border:none;box-shadow:none;z-index:auto;overflow:visible}
.kk-settings--embedded .kk-settings-head{display:none}
.kk-settings--embedded .kk-settings-body{padding:0;overflow:visible}
.bgm-tabs{display:flex;gap:.375rem;padding:0 1.5rem;border-bottom:1px solid var(--divider);flex-shrink:0}
.bgm-tab{padding:.625rem .25rem;border:none;background:none;font-family:"Poppins",sans-serif;font-size:.8125rem;font-weight:600;color:var(--font-sub);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.bgm-tab.is-on{color:var(--main);border-bottom-color:var(--main)}
.kk-settings.hidden{display:none}
.kk-settings-head{padding:1rem 1.25rem .75rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(0,0,0,.06);flex-shrink:0}
.kk-settings-head h2{font-size:1rem;font-weight:600;margin:0}
.kk-settings-body{padding:.5rem 1rem 1rem;overflow:auto;flex:1}
.kk-settings-section{padding:.875rem .25rem .625rem;border-bottom:1px solid rgba(0,0,0,.05)}
.kk-settings-section:last-child{border-bottom:none}
.kk-settings-section h3{font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--font-sub);margin:0 0 .5rem;font-weight:600}
/* ── Mina bilder — upload zone + grid + picker ── */
.mi-upload-zone{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:1.25rem;border:2px dashed var(--border);border-radius:var(--r-lg);cursor:pointer;transition:border-color .15s,background .15s}
.mi-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin-bottom:.5rem}
.mi-picker .mi-folder-bar{padding:.5rem .75rem 0;margin-bottom:0}
.mi-pk-actions{padding:.5rem .75rem 0;margin-bottom:0}
.mi-act{display:inline-flex;align-items:center;gap:.35rem;border:1.5px solid var(--border);background:var(--el,#fff);color:var(--font);border-radius:var(--r-full);padding:.3rem .8rem;font-family:"Poppins",sans-serif;font-size:.78rem;font-weight:600;cursor:pointer;transition:border-color .12s,background .12s}
.mi-act:hover{border-color:var(--main);background:var(--main-sub)}
.mi-act .material-icons-outlined{font-size:1.05rem;color:var(--main)}
.mi-usage{margin-left:auto;font-size:.72rem;color:var(--font-sub);font-weight:600}
.mi-usage-hot{color:#d9822b}
.mi-act-status{font-size:.75rem;color:var(--font-sub);font-weight:600}
.mi-upload-zone:hover,.mi-drag{border-color:var(--main);background:rgba(57,176,187,.06)}
.mi-drop-txt{font-size:.75rem;color:var(--font-sub)}
.mi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(4rem,1fr));gap:.375rem;margin-top:.625rem;max-height:16rem;overflow-y:auto}
.mi-thumb{position:relative;aspect-ratio:1;border-radius:var(--r-md);overflow:hidden;cursor:default}
.mi-thumb img{width:100%;height:100%;object-fit:cover}
.mi-del,.mi-move{position:absolute;top:.15rem;width:1.4rem;height:1.4rem;border:none;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .12s}
.mi-del{right:.15rem}
.mi-move{left:.15rem}
.mi-thumb:hover .mi-del,.mi-thumb:hover .mi-move{opacity:1}
.mi-empty{font-size:.75rem;color:var(--font-sub);padding:.5rem 0;text-align:center}
.mi-folder-bar{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:.5rem}
.mi-folder-tab{display:flex;align-items:center;gap:.25rem;border:1px solid var(--border);background:var(--surface);color:var(--font-sub);border-radius:999px;padding:.2rem .625rem;font-size:.6875rem;font-family:inherit;cursor:pointer;transition:border-color .12s,color .12s}
.mi-folder-tab:hover{border-color:var(--main);color:var(--font)}
.mi-folder-tab.is-active{border-color:var(--main);background:rgba(57,176,187,.1);color:var(--main);font-weight:600}
.mi-folder-add{color:var(--main)}
.mi-folder-del{display:flex;align-items:center;justify-content:center;border-radius:50%;padding:.05rem}
.mi-folder-del:hover{background:rgba(0,0,0,.12)}
.mi-picker{width:min(36rem,calc(100vw - 2rem));max-height:min(80vh,40rem)}
.mi-picker-body{display:grid;grid-template-columns:repeat(auto-fill,minmax(5rem,1fr));gap:.5rem;padding:.75rem;overflow-y:auto;max-height:min(70vh,34rem)}
.mi-pick-thumb{border:2px solid transparent;border-radius:var(--r-md);overflow:hidden;cursor:pointer;padding:0;background:transparent;aspect-ratio:1;transition:border-color .12s}
.mi-pick-thumb:hover{border-color:var(--main)}
.mi-pick-thumb img{width:100%;height:100%;object-fit:cover}
.mi-choice-btn{display:flex;align-items:center;gap:.5rem;width:100%;border:none;background:transparent;padding:.5rem .75rem;font-family:inherit;font-size:.8125rem;color:var(--font);cursor:pointer;text-align:left;border-radius:var(--r-md);transition:background .1s}
.mi-choice-btn:hover{background:var(--hover)}
.bg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.4375rem}
.bg-swatch{aspect-ratio:4/3;border-radius:.625rem;border:2px solid transparent;cursor:pointer;position:relative;overflow:hidden;transition:border-color .15s,box-shadow .15s}
.bg-swatch.is-on{border-color:var(--main);box-shadow:0 0 0 3px rgba(57,176,187,.18)}
.bg-swatch .name{position:absolute;bottom:.25rem;left:.375rem;right:.375rem;font-size:.625rem;font-weight:600;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.45)}
/* ── Background picker modal ── */
.pub-backdrop.bgm-backdrop{align-items:center;justify-content:flex-end;padding-right:2.5rem;transition:background .2s}
.bgm-modal{position:relative;background:var(--el);border-radius:var(--r-xl);box-shadow:0 1rem 3rem rgba(0,0,0,.22);width:min(56rem,calc(100vw - 2rem));max-height:calc(100vh - 3rem);display:flex;flex-direction:column;overflow:hidden;font-family:"Poppins",sans-serif}
/* Layout tab: shrink to a small corner panel and drop the dimming backdrop,
   so widget/layout changes are clearly visible on the board behind it. */
.bgm-backdrop.bgm-compact{background:transparent;align-items:flex-start;justify-content:flex-end;padding:4.5rem 1.5rem 1.5rem 0;pointer-events:none}
.bgm-backdrop.bgm-compact .bgm-modal{width:22rem;max-height:min(34rem,calc(100vh - 6rem));pointer-events:auto}
/* "Bakgrund" and "Mina bilder" share one size (the content of the two differs a lot, so the height is fixed, not left to the content) */
.bgm-backdrop:not(.bgm-compact) .bgm-modal{height:min(46rem,calc(100vh - 3rem))}
.bgm-head{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem 1rem;border-bottom:1px solid var(--divider);flex-shrink:0}
.bgm-title{font-size:1.125rem;font-weight:700;color:var(--font)}
.bgm-body{padding:1.25rem 1.5rem 1.5rem;overflow-y:auto;flex:1}
/* A touch darker than the modal's white so the Bakgrund tab's swatches (many
   of which are themselves near-white/pastel) stand out from the panel. */
#bgm-pane-bg{background:var(--hover)}
.bgm-scroll-hint{position:absolute;left:0;right:0;bottom:0;height:2.75rem;display:flex;align-items:flex-end;justify-content:center;padding-bottom:.35rem;pointer-events:none;background:linear-gradient(to bottom,rgba(255,255,255,0),var(--el) 70%);color:var(--font-sub);opacity:0;transition:opacity .2s}
.bgm-scroll-hint.is-visible{opacity:1}
.bgm-scroll-hint .material-icons-outlined{font-size:1.25rem;animation:bgm-hint-bob 1.4s ease-in-out infinite}
@keyframes bgm-hint-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(.2rem)}}
.bgm-scene-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.625rem}
.bgm-swatch{aspect-ratio:16/9;border-radius:var(--r-lg);cursor:pointer;position:relative;overflow:hidden;border:2.5px solid transparent;transition:border-color .13s,transform .13s,box-shadow .13s}
.bgm-swatch:hover{transform:scale(1.04);box-shadow:0 .25rem 1rem rgba(0,0,0,.18)}
.bgm-swatch.is-on{border-color:var(--main);box-shadow:0 0 0 3px rgba(57,176,187,.22)}
.bgm-swatch-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}
.bgm-check{position:absolute;top:.3rem;right:.3rem;font-size:1rem!important;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.bgm-swatch-remove{position:absolute;top:.25rem;left:.25rem;width:1.25rem;height:1.25rem;border-radius:50%;border:none;background:rgba(0,0,0,.5);color:#fff;font-size:.8125rem!important;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;opacity:0;transition:opacity .13s,background .13s}
.bgm-swatch:hover .bgm-swatch-remove{opacity:1}
.bgm-swatch-remove:hover{background:#dc2626}
.bgm-upload-swatch{aspect-ratio:16/9;border-radius:var(--r-lg);cursor:pointer;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.125rem;border:2px dashed var(--border);background:var(--hover);color:var(--font-sub);transition:border-color .13s,color .13s;text-align:center;padding:.25rem}
.bgm-upload-swatch:hover{border-color:var(--main);color:var(--main)}
.bgm-upload-swatch .material-icons-outlined{font-size:1.125rem}
.bgm-upload-swatch span.bgm-upload-lbl{font-size:.625rem;font-weight:600;line-height:1.15}
.bgm-upload-swatch.is-busy{opacity:.6;pointer-events:none}
.tog-row{display:flex;align-items:center;justify-content:space-between;padding:.4375rem .25rem;font-size:.875rem}
.tog-row+.tog-row{border-top:1px solid rgba(0,0,0,.04)}
.tog-row .label{display:flex;align-items:center;gap:.5rem}
.tog-row .label .material-icons-outlined{color:var(--font-sub);font-size:1.125rem}
.tog{width:2.25rem;height:1.25rem;border-radius:var(--r-full);background:var(--border);position:relative;cursor:pointer;flex-shrink:0;transition:background .16s}
.tog::after{content:'';position:absolute;top:.125rem;left:.125rem;width:1rem;height:1rem;border-radius:50%;background:#fff;transition:transform .16s}
.tog.on{background:var(--main)}
.tog.on::after{transform:translateX(1rem)}
.size-segs{display:flex;background:rgba(0,0,0,.05);border-radius:var(--r-full);padding:.1875rem}
.size-seg{flex:1;text-align:center;font-size:.75rem;padding:.25rem .5rem;border-radius:var(--r-full);cursor:pointer;color:var(--font-sub);font-family:"Poppins",sans-serif;background:transparent;border:none;transition:background .12s}
.size-seg.on{background:#fff;color:var(--font);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.preset-row{display:flex;align-items:center;gap:.5rem;padding:.5rem;border-radius:var(--r-md);cursor:pointer;font-size:.875rem;transition:background .1s}
.preset-row:hover{background:rgba(0,0,0,.04)}
.preset-row.on{background:var(--main-sub);color:var(--main)}
.preset-row .material-icons-outlined{font-size:1rem;color:var(--font-sub)}
.preset-row.on .material-icons-outlined{color:var(--main)}

/* ── Opacity slider ── */
input[type=range].opacity-slider{-webkit-appearance:none;appearance:none;width:100%;height:.375rem;border-radius:var(--r-full);background:linear-gradient(90deg,rgba(57,176,187,.2),rgba(57,176,187,.9));outline:none;cursor:pointer;border:none;padding:0}
input[type=range].opacity-slider::-webkit-slider-thumb{-webkit-appearance:none;width:1rem;height:1rem;border-radius:50%;background:var(--main);box-shadow:0 1px 4px rgba(0,0,0,.2);cursor:pointer}
input[type=range].opacity-slider::-moz-range-thumb{width:1rem;height:1rem;border:none;border-radius:50%;background:var(--main);cursor:pointer}
/* ── Countdown calendar ── */
.cd-setup{display:flex;flex-direction:column;gap:.5rem;padding:.625rem .75rem .5rem}
.cd-setup-label{font-size:.8125rem;font-weight:600;color:var(--font)}
.cd-setup-inp{height:2.25rem;border:1.5px solid var(--border);border-radius:var(--r-full);padding:0 .875rem;font-family:"Poppins",sans-serif;font-size:.875rem;outline:none;background:var(--el);color:var(--font)}
.cd-setup-inp:focus{border-color:var(--main)}
.cd-cal{padding:.5rem 1rem .75rem;border-top:1px solid rgba(0,0,0,.08)}
.cd-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.375rem;font-size:.8125rem;font-weight:600}
.cd-cal-nav{background:none;border:none;cursor:pointer;font-size:1.125rem;width:1.5rem;height:1.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;color:inherit;transition:background .1s}
.cd-cal-nav:hover{background:rgba(57,176,187,.15);color:var(--main)}
.cd-cal-dow{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:.125rem}
.cd-cal-dow span{text-align:center;font-size:.5625rem;font-weight:600;color:var(--font-sub);text-transform:uppercase;padding:.125rem 0}
.cd-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px}
.cd-cal-day{border:none;background:none;cursor:pointer;border-radius:50%;font-family:'Poppins',sans-serif;font-size:.75rem;padding:0;aspect-ratio:1;display:flex;align-items:center;justify-content:center;color:inherit;transition:background .1s,color .1s}
.cd-cal-day:hover:not(:empty){background:rgba(57,176,187,.12);color:var(--main)}
.cd-cal-day.is-today{color:var(--main);font-weight:600}
.cd-cal-day.is-sel{background:var(--main)!important;color:#fff!important;font-weight:600}
.cd-cal-day.is-past{opacity:.3}
.cd-cal-day:empty{cursor:default;pointer-events:none}


/* Lärarens verktyg: wider and taller so the tools fit; Feedback gets almost the whole screen to work in */
.add-menu.add-menu--tools{width:min(80rem,calc(100vw - 2.5rem));height:min(54rem,calc(100vh - 7.75rem))}
.add-menu.add-menu--work{width:min(110rem,calc(100vw - 1.5rem));height:calc(100vh - 7rem);max-height:calc(100vh - 7rem);bottom:5.5rem}
.add-menu--work .add-menu-content{padding:.6rem .8rem}

/* Lärarens verktyg: the wider menu holds MORE tools per row, as the same cards as in the other categories (same proportions), so
   everything is in one view */
.add-menu--tools .tl-grid{grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:.6rem}
.add-menu--tools .tl-grid .tl-block{grid-column:span 2!important;padding:.5rem .6rem .6rem}
.add-menu--tools .tl-sub{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.add-menu--tools .tl-grid .add-tile-thumb{aspect-ratio:3/2;height:auto}
.add-menu--tools .tl-grid.thumbs .add-tile{padding:.5rem .5rem .6rem}
.add-menu--tools .tl-grid .add-tile-desc{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}