:root{--ink:#233547;--line:#d8e2ec;--blue:#4788c8;--panel:#fff;--shadow:0 10px 30px #19354a33}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--ink);background:#172b3b}
button,input,textarea,select{font:inherit}
#viewport{position:fixed;inset:0;overflow:hidden;background:#172b3b}
#stage{position:absolute;width:1920px;height:1080px;transform-origin:0 0;background:linear-gradient(135deg,#315d87,#78b4e4);background-size:cover;background-position:center;overflow:hidden}
#stage:after{content:"";position:absolute;inset:0;background:rgba(0,0,0,var(--dim,0));pointer-events:none;z-index:1}
#board{position:absolute;inset:0;z-index:2}
.widget{position:absolute;background:rgba(255,255,255,.96);border:1px solid #d9e2ea;border-radius:16px;box-shadow:var(--shadow);overflow:hidden;min-width:180px;min-height:100px}
.widget.selected{outline:4px solid #4b93d2aa}.head{height:42px;padding:0 10px;display:flex;align-items:center;justify-content:space-between;background:#f7f9fb;border-bottom:1px solid #e2e9ef;cursor:move;user-select:none}.title{font-size:15px;font-weight:750}.actions{display:flex;gap:4px}.actions button{border:0;background:transparent;border-radius:7px;padding:4px 7px;cursor:pointer}.actions button:hover{background:#e6eef5}
.body{height:calc(100% - 42px);padding:16px;overflow:auto}
#topbar{position:fixed;top:12px;left:12px;right:12px;z-index:200;display:flex;justify-content:space-between;pointer-events:none}#topbar>*{pointer-events:auto}.group{display:flex;gap:8px}
.ib{width:48px;height:48px;border:0;border-radius:14px;background:#fffffff0;box-shadow:var(--shadow);font-size:21px;cursor:pointer;color:#34495b}.ib:hover{background:#fff}
#toolbarWrap{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:210}.toolbar{display:flex;gap:3px;max-width:calc(100vw - 30px);overflow:auto;padding:8px;border-radius:18px;background:#fffffff2;box-shadow:var(--shadow)}.tool{min-width:78px;border:0;background:transparent;border-radius:12px;padding:8px 6px;cursor:pointer;color:#34495b;display:flex;flex-direction:column;gap:4px;align-items:center}.tool:hover,.tool.active{background:#eaf3ff;color:#2869a8}.tool b{font-size:11px;font-weight:650}.tool span{font-size:26px;line-height:1}
#pages{position:fixed;right:16px;bottom:18px;z-index:210;display:flex;align-items:center;gap:6px;padding:7px;background:#fffffff2;border-radius:14px;box-shadow:var(--shadow)}.pbtn{border:0;background:#f3f6f9;border-radius:9px;width:36px;height:36px;cursor:pointer;font-size:18px}.pname{font-size:12px;font-weight:700;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drawer{position:fixed;inset:0;z-index:300;background:#13283a77;display:none}.drawer.open{display:block}.panel{position:absolute;right:0;top:0;bottom:0;width:min(500px,100%);background:#fff;padding:22px;overflow:auto;box-shadow:-15px 0 40px #0003}
h2,h3{margin:0 0 12px}.section{padding:16px 0;border-bottom:1px solid #e5ebf0}.row{display:flex;gap:8px;align-items:center}.col{display:flex;flex-direction:column;gap:9px}.primary,.secondary{border-radius:10px;padding:9px 12px;cursor:pointer}.primary{border:0;background:var(--blue);color:white}.secondary{border:1px solid #cfdbe6;background:white;color:#34495b}.hint{font-size:12px;color:#637485}
input,textarea,select{width:100%;border:1px solid #cbd8e4;border-radius:10px;padding:9px;background:white}textarea{min-height:110px;resize:vertical}
.presetGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.preset{height:100px;border-radius:14px;border:3px solid transparent;background-size:cover;background-position:center;cursor:pointer;position:relative}.preset.sel{border-color:#3f8bcb}.preset span{position:absolute;left:8px;bottom:8px;background:#fffffff0;padding:4px 8px;border-radius:8px;font-size:12px;font-weight:750}
.modal{position:fixed;inset:0;z-index:400;display:none;place-items:center;background:#14283a77}.modal.show{display:grid}.card{width:min(560px,calc(100vw - 30px));max-height:86vh;overflow:auto;background:white;border-radius:18px;padding:22px;box-shadow:var(--shadow)}
.textedit{height:100%;font-size:28px;line-height:1.3;outline:none}.big{font-size:52px;font-weight:800;text-align:center}.center{text-align:center}.traffic{display:flex;justify-content:center;gap:22px;padding:16px}.light{width:68px;height:68px;border-radius:50%;background:#cbd3da;cursor:pointer;box-shadow:inset 0 0 0 4px #00000011}.light.on.red{background:#ef5350}.light.on.yellow{background:#f3c54a}.light.on.green{background:#58c879}
.timetable{width:100%;border-collapse:collapse}.timetable td,.timetable th{padding:9px;border-bottom:1px solid #e3e9ef;text-align:left}.imgbox{height:100%;display:grid;place-items:center}.imgbox img{max-width:100%;max-height:100%;object-fit:contain}
.wheelBox{height:100%;display:grid;place-items:center;position:relative}.wheelBox canvas{max-width:100%;max-height:100%;touch-action:none}.wheelResult{font-size:22px;font-weight:800;text-align:center}.randomCard{font-size:34px;font-weight:850;min-height:100px;display:grid;place-items:center;text-align:center;border-radius:14px;background:linear-gradient(135deg,#eef6ff,#fff3db)}.dice{font-size:72px;text-align:center}.number{font-size:56px;font-weight:850;text-align:center}
#drawCanvas{position:absolute;inset:0;width:1920px;height:1080px;z-index:80;display:none;cursor:crosshair;touch-action:none}.drawOn #drawCanvas{display:block}.drawControls{position:fixed;top:70px;left:14px;z-index:230;display:none;gap:8px;align-items:center;padding:10px;background:#fffffff5;border-radius:14px;box-shadow:var(--shadow)}.drawOn .drawControls{display:flex}.drawControls input[type=color]{width:42px;height:34px;padding:2px}.drawControls input[type=range]{width:120px}
.resizeGrip{position:absolute;right:0;bottom:0;width:24px;height:24px;cursor:nwse-resize;background:linear-gradient(135deg,transparent 45%,#9aacba 46%,#9aacba 54%,transparent 55%)}
.pageItem{display:flex;gap:7px;margin:7px 0}.pageItem button:first-child{flex:1;text-align:left}
@media(max-width:760px){.tool{min-width:65px}.toolbar{border-radius:13px}.tool b{font-size:10px}#pages{bottom:102px}.toolbarWrap{bottom:8px}}

/* ---- module boundary ---- */

.rich-toolbar{display:flex;flex-wrap:wrap;gap:5px;padding:7px;border-bottom:1px solid #e1e8ef;background:#f7f9fb}
.rich-toolbar button,.rich-toolbar select{width:auto;min-width:32px;padding:5px 7px;border:1px solid #d6e0e8;background:#fff;border-radius:7px;cursor:pointer}
.rich-editor{height:calc(100% - 46px);padding:12px;outline:none;font-size:27px;line-height:1.3;overflow:auto}
.pro-traffic{width:130px;margin:auto;padding:13px;border-radius:28px;background:linear-gradient(145deg,#2c3440,#12171e);box-shadow:inset 0 2px 5px #ffffff18,0 9px 18px #17212d55}
.pro-light{width:88px;height:88px;border-radius:50%;margin:9px auto;background:#171b21;border:6px solid #07090c;box-shadow:inset 0 0 18px #000;cursor:pointer;transition:.15s}
.pro-light.on.red{background:radial-gradient(circle at 38% 30%,#ffb0aa,#f22 42%,#8c0000 100%);box-shadow:0 0 28px #ff2f2faa,inset 0 0 15px #ffcccc}
.pro-light.on.yellow{background:radial-gradient(circle at 38% 30%,#fff4a7,#ffd41f 42%,#8d6200 100%);box-shadow:0 0 28px #ffd62faa,inset 0 0 15px #fff4cc}
.pro-light.on.green{background:radial-gradient(circle at 38% 30%,#b8ffd0,#29d86d 42%,#006b2a 100%);box-shadow:0 0 28px #27d86faa,inset 0 0 15px #ccffe1}
.moreGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.moreTile{height:96px;border:1px solid #d7e1ea;background:#fff;border-radius:14px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.moreTile:hover{background:#eef6ff}.moreTile .mi{font-size:30px}.moreTile small{font-weight:700}
.videoWrap{height:100%;display:grid;place-items:center;background:#111}.videoWrap iframe{width:100%;height:100%;border:0}
.visualTimer{height:100%;display:grid;place-items:center}.ring{width:min(72%,260px);aspect-ratio:1;border-radius:50%;background:conic-gradient(#4b93d2 var(--p),#e7edf3 0);display:grid;place-items:center;position:relative}.ring:after{content:"";position:absolute;inset:14px;background:#fff;border-radius:50%}.ring b{z-index:1;font-size:34px}
.diceFace{font-size:96px;text-align:center;filter:drop-shadow(0 5px 5px #0002)}
.stopwatch{font-variant-numeric:tabular-nums}.sticker{font-size:90px;text-align:center;height:100%;display:grid;place-items:center}
.scoreboard{display:grid;grid-template-columns:1fr 100px 1fr;align-items:center;height:100%;gap:10px;text-align:center}.team{font-size:20px;font-weight:800}.score{font-size:58px;font-weight:900}.scoreboard button{font-size:25px;width:42px;height:42px}
.groupPick{font-size:24px;font-weight:800;text-align:center;padding:15px;min-height:80px;display:grid;place-items:center;background:#f1f7ff;border-radius:12px}
.eventBox{height:100%;display:grid;place-items:center;text-align:center}.eventBox .days{font-size:54px;font-weight:900}
.hyperlinkBox{height:100%;display:grid;place-items:center;text-align:center}.hyperlinkBox a{font-size:28px;font-weight:800;color:#286db0}
.calendarBox{font-size:26px;text-align:center;padding-top:20px}.calendarBox .date{font-size:62px;font-weight:900}
.pdfBox{height:100%;display:grid;place-items:center;text-align:center}.pdfBox a{font-size:24px;font-weight:800;color:#286db0}
.webcamWrap{height:100%;background:#111;display:grid;place-items:center;position:relative}.webcamWrap video{width:100%;height:100%;object-fit:cover}
.qrHint{font-size:13px;text-align:center}

/* ---- module boundary ---- */

body.menu-bottom #toolbarWrap{left:50%;right:auto;top:auto;bottom:16px;transform:translateX(-50%)}
body.menu-left #toolbarWrap{left:14px;right:auto;top:50%;bottom:auto;transform:translateY(-50%)}
body.menu-right #toolbarWrap{left:auto;right:14px;top:50%;bottom:auto;transform:translateY(-50%)}
body.menu-left .toolbar,body.menu-right .toolbar{flex-direction:column;max-height:calc(100vh - 110px);max-width:96px;overflow-y:auto;overflow-x:hidden}
body.menu-left .tool,body.menu-right .tool{min-width:72px;width:72px}
body.menu-left #pages{right:16px;left:auto;bottom:18px}
body.menu-right #pages{left:16px;right:auto;bottom:18px}
body.menu-bottom #pages{right:16px;left:auto;bottom:18px}
.menuPositionChoices{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.menuPosBtn{border:1px solid #cfdbe6;background:#fff;border-radius:12px;padding:12px 8px;cursor:pointer;font-weight:700}
.menuPosBtn.active{background:#eaf3ff;border-color:#4b93d2;color:#2869a8}
.widget.frameless{background:transparent;border:0;box-shadow:none;overflow:visible}
.widget.frameless .body{background:transparent;padding:0;overflow:visible}
.widget.frameless .head{position:absolute;top:-38px;left:0;right:0;z-index:10;border:1px solid #d9e2ea;border-radius:10px;background:rgba(255,255,255,.94);box-shadow:0 6px 18px #19354a2b;opacity:0;pointer-events:none;transition:.15s}
.widget.frameless:hover .head,.widget.frameless.selected .head{opacity:1;pointer-events:auto}
.widget.frameless .resizeGrip{opacity:0;transition:.15s}
.widget.frameless:hover .resizeGrip,.widget.frameless.selected .resizeGrip{opacity:1}
.widget.frameless.selected{outline:2px dashed rgba(75,147,210,.55);outline-offset:5px}
.widget.frameless .pro-traffic{margin:0 auto}
.widget.frameless .sticker{background:transparent;text-shadow:0 5px 15px rgba(0,0,0,.16)}

/* ---- module boundary ---- */

/* Presentasjonsmodus: meny skjules automatisk, men kan trekkes ut igjen */
#presentationMenuToggle{
  position:fixed;
  z-index:225;
  display:none;
  border:0;
  background:rgba(255,255,255,.94);
  color:#34495b;
  box-shadow:var(--shadow);
  cursor:pointer;
  font-size:20px;
}
body.presentation-mode #presentationMenuToggle{display:block}

/* Posisjon på håndtaket følger valgt menyplassering */
body.presentation-mode.menu-bottom #presentationMenuToggle{
  left:50%;
  bottom:8px;
  transform:translateX(-50%);
  width:58px;
  height:28px;
  border-radius:14px 14px 6px 6px;
}
body.presentation-mode.menu-left #presentationMenuToggle{
  left:8px;
  top:50%;
  transform:translateY(-50%);
  width:28px;
  height:58px;
  border-radius:6px 14px 14px 6px;
}
body.presentation-mode.menu-right #presentationMenuToggle{
  right:8px;
  top:50%;
  transform:translateY(-50%);
  width:28px;
  height:58px;
  border-radius:14px 6px 6px 14px;
}

/* Selve verktøylinjen trekkes utenfor skjermen */
body.presentation-mode.menu-collapsed.menu-bottom #toolbarWrap{
  bottom:-140px !important;
  opacity:0;
  pointer-events:none;
}
body.presentation-mode.menu-collapsed.menu-left #toolbarWrap{
  left:-120px !important;
  opacity:0;
  pointer-events:none;
}
body.presentation-mode.menu-collapsed.menu-right #toolbarWrap{
  right:-120px !important;
  opacity:0;
  pointer-events:none;
}
#toolbarWrap{transition:left .25s ease,right .25s ease,bottom .25s ease,opacity .2s ease}

/* I presentasjonsmodus skjules sidevelgeren og toppknappene mens menyen er trukket inn */
body.presentation-mode.menu-collapsed #pages{
  opacity:0;
  pointer-events:none;
}
body.presentation-mode.menu-collapsed #topbar .ib:not(#fs){
  opacity:0;
  pointer-events:none;
}
#pages,#topbar .ib{transition:opacity .2s ease}

/* Fullskjermknappen beholdes tilgjengelig slik at man kan gå ut av fullskjerm */
body.presentation-mode #fs{
  opacity:1 !important;
  pointer-events:auto !important;
}

/* ---- module boundary ---- */

/* Tekstwidget – ren visning når den ikke redigeres */
.widget.text-widget .head{
  opacity:0;
  pointer-events:none;
  position:absolute;
  top:-44px;
  left:0;
  right:0;
  z-index:20;
  border-radius:12px;
  box-shadow:0 8px 22px rgba(20,40,60,.18);
}
.widget.text-widget.selected .head{
  opacity:1;
  pointer-events:auto;
}
.widget.text-widget{
  overflow:visible;
}
.widget.text-widget .body{
  height:100%;
}
.widget.text-widget.selected .body{
  outline:2px solid #6d63ff;
  outline-offset:0;
}
.widget.text-widget .resizeGrip{
  opacity:0;
}
.widget.text-widget.selected .resizeGrip{
  opacity:1;
}
.widget.text-widget:not(.selected) .rich-toolbar{
  display:none;
}
.widget.text-widget:not(.selected) .rich-editor{
  height:100%;
}
.widget.text-widget.selected .rich-toolbar{
  display:flex;
}
.widget.text-widget.selected .rich-editor{
  height:calc(100% - 46px);
}

/* Bakgrunnstype */
.widget.transparent-bg{
  background:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
}
.widget.transparent-bg .body{
  background:transparent !important;
}
.widget.transparent-bg.selected{
  outline:2px solid #6d63ff;
}
.widget.transparent-bg:not(.selected){
  border-color:transparent !important;
  box-shadow:none !important;
}

/* Når tekstwidget ikke er valgt: ingen redigeringspreg */
.widget.text-widget:not(.selected){
  border-color:transparent;
}
.widget.text-widget:not(.selected):not(.transparent-bg){
  border-color:rgba(255,255,255,.65);
}

/* Flyttehåndtak / markering */
.widget.text-widget.selected:before,
.widget.text-widget.selected:after{
  content:"";
  position:absolute;
  width:14px;height:14px;
  border:2px solid #6d63ff;
  background:#fff;
  border-radius:50%;
  z-index:30;
}
.widget.text-widget.selected:before{left:-8px;top:-8px}
.widget.text-widget.selected:after{right:-8px;bottom:-8px}

.bgToggle{
  display:flex;align-items:center;gap:8px;margin-top:10px;
  padding:10px;border:1px solid #dbe4ec;border-radius:10px;background:#f8fafc
}
.bgToggle input{width:auto}

/* ---- module boundary ---- */

#webStatus{position:fixed;left:16px;top:16px;z-index:240;background:rgba(255,255,255,.92);border:1px solid #d8e2eb;box-shadow:0 5px 18px rgba(20,40,60,.12);border-radius:12px;padding:8px 11px;font-size:12px;color:#405468;backdrop-filter:blur(8px)}
#webStatus b{color:#1f3447} body.presentation-mode #webStatus{display:none}

/* ---- module boundary ---- */

#webBoardNav{
  position:fixed;left:16px;top:58px;z-index:239;
  display:flex;gap:6px
}
#webBoardNav a,#webBoardNav button{
  border:1px solid #d8e2eb;background:rgba(255,255,255,.92);
  color:#34495b;border-radius:10px;padding:7px 10px;text-decoration:none;
  cursor:pointer;font-size:12px;box-shadow:0 4px 14px rgba(20,40,60,.1)
}
body.presentation-mode #webBoardNav{display:none}


/* ===== Web v6 advanced board UX ===== */
#quickActions{
  position:fixed;z-index:260;display:none;gap:6px;
  background:rgba(255,255,255,.96);border:1px solid #dce6ee;
  box-shadow:0 8px 24px rgba(20,40,60,.18);border-radius:12px;padding:6px
}
#quickActions.show{display:flex}
#quickActions button{border:0;background:#f3f7fa;border-radius:8px;padding:7px 9px;cursor:pointer}
#quickActions button:hover{background:#e6f1fb}

.widget.locked .head{cursor:default}
.widget.locked .resizeGrip{display:none!important}
.widget.locked{outline-color:rgba(255,166,0,.55)!important}
.widget.locked .title:after{content:" 🔒";font-size:12px}

.widget.hidden-widget{opacity:.35}
.widget.hidden-widget:after{
  content:"Skjult";position:absolute;inset:auto 8px 8px auto;
  font-size:11px;background:#233547;color:white;padding:4px 7px;border-radius:7px
}

#layersPanel{
  position:fixed;right:18px;top:78px;z-index:255;width:310px;max-height:calc(100vh - 165px);
  overflow:auto;background:rgba(255,255,255,.97);border:1px solid #dbe5ed;border-radius:16px;
  box-shadow:0 14px 38px rgba(20,40,60,.18);padding:13px;display:none
}
#layersPanel.show{display:block}
.layerHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}
.layerHead h3{margin:0}
.layerItem{display:grid;grid-template-columns:1fr auto;gap:7px;align-items:center;padding:8px;border:1px solid #e2e9ef;border-radius:10px;margin:6px 0;background:#fff}
.layerItem.selected{border-color:#5c9ed8;background:#eef7ff}
.layerItem .lname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:700;cursor:pointer}
.layerBtns{display:flex;gap:3px}.layerBtns button{border:0;background:#f2f6f9;border-radius:6px;padding:4px 6px;cursor:pointer}

.snapGuides:before,.snapGuides:after{
  content:"";position:absolute;pointer-events:none;z-index:999;background:#5d8cff55
}
.snapGuides:before{left:50%;top:0;bottom:0;width:2px}
.snapGuides:after{top:50%;left:0;right:0;height:2px}

#toast{
  position:fixed;left:50%;bottom:95px;transform:translateX(-50%);
  z-index:500;background:#122d46;color:white;padding:9px 13px;border-radius:10px;
  font-size:13px;box-shadow:0 10px 25px #0003;opacity:0;pointer-events:none;transition:.2s
}
#toast.show{opacity:1}

#historyControls{position:fixed;left:16px;bottom:18px;z-index:215;display:flex;gap:6px}
#historyControls button{width:40px;height:40px;border:0;border-radius:11px;background:#fffffff0;box-shadow:var(--shadow);cursor:pointer;font-size:18px}
body.presentation-mode #historyControls{display:none}

.widget .head .actions .lockBtn.locked{background:#fff1cf}


/* =========================================================
   WEB V7 – PROFESSIONAL WIDGET DESIGN SYSTEM
   ========================================================= */

:root{
  --kv-navy:#092a58;
  --kv-blue:#0ba8f4;
  --kv-purple:#6a55f6;
  --kv-cyan:#27d7ff;
  --kv-yellow:#ffcb28;
  --kv-pink:#ff4d83;
  --kv-green:#26c281;
  --kv-red:#ef4f5f;
  --kv-widget-shadow:0 16px 38px rgba(13,42,75,.16);
}

.widget.pro-widget{
  border:1px solid rgba(255,255,255,.72);
  background:rgba(255,255,255,.95);
  box-shadow:var(--kv-widget-shadow);
  border-radius:22px;
}
.widget.pro-widget .head{
  background:rgba(248,251,254,.94);
  border-bottom:1px solid #e7eef4;
  height:38px
}
.widget.pro-widget .body{height:calc(100% - 38px)}
.widget.pro-widget.transparent-bg{
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important
}

/* DIGITAL CLOCK */
.kvClock{
  height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;position:relative;overflow:hidden;border-radius:18px;
  background:linear-gradient(145deg,#08294f,#104b81 60%,#156bac);
  color:white;padding:18px
}
.kvClock:before{
  content:"";position:absolute;width:220px;height:220px;border-radius:50%;
  background:rgba(39,215,255,.12);right:-80px;top:-90px
}
.kvClock .time{
  position:relative;font-size:clamp(38px,4vw,76px);font-weight:850;
  letter-spacing:-.045em;font-variant-numeric:tabular-nums;line-height:1
}
.kvClock .date{position:relative;margin-top:10px;font-size:16px;font-weight:650;color:#d7ecff}
.kvClock .day{position:relative;margin-top:3px;font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:#9ed8ff}
.kvClock.light{
  background:linear-gradient(145deg,#fff,#eff8ff);color:var(--kv-navy);border:1px solid #d8ebf8
}
.kvClock.light .date{color:#4e708d}.kvClock.light .day{color:#1887ca}

/* TIMER */
.kvTimer{
  height:100%;display:grid;grid-template-columns:minmax(145px,.85fr) 1.15fr;
  align-items:center;gap:18px;padding:18px;border-radius:18px;
  background:linear-gradient(145deg,#ffffff,#f5faff)
}
.kvTimerRing{
  width:min(100%,210px);aspect-ratio:1;margin:auto;border-radius:50%;
  background:conic-gradient(var(--kv-blue) var(--progress),#e6eef5 0);
  display:grid;place-items:center;position:relative;box-shadow:inset 0 0 0 1px #dbe8f1
}
.kvTimerRing:after{content:"";position:absolute;inset:15px;background:white;border-radius:50%;box-shadow:inset 0 0 20px #eef5fa}
.kvTimerRing strong{position:relative;z-index:1;font-size:34px;font-weight:900;font-variant-numeric:tabular-nums;color:var(--kv-navy)}
.kvTimerInfo h4{font-size:13px;text-transform:uppercase;letter-spacing:.12em;margin:0 0 6px;color:#6a8197}
.kvTimerInfo .remaining{font-size:30px;font-weight:850;color:var(--kv-navy)}
.kvTimerActions{display:flex;gap:7px;flex-wrap:wrap;margin-top:13px}
.kvMiniBtn{border:0;border-radius:10px;padding:8px 11px;cursor:pointer;font-weight:750}
.kvMiniBtn.primary{background:linear-gradient(135deg,var(--kv-blue),#287df5);color:#fff}
.kvMiniBtn.soft{background:#edf5fb;color:#345873}
.kvMiniBtn.warn{background:#fff2e8;color:#a85b23}

/* VISUAL TIMER */
.kvVisualTimer{height:100%;display:grid;place-items:center;padding:16px;background:linear-gradient(145deg,#fff,#f7fbff);border-radius:18px}
.kvVisualTimer .disc{
  width:min(75%,275px);aspect-ratio:1;border-radius:50%;position:relative;
  background:conic-gradient(var(--kv-purple) var(--progress),#edf0f6 0);
  box-shadow:0 12px 28px #19354a18
}
.kvVisualTimer .disc:after{
  content:"";position:absolute;inset:20px;border-radius:50%;background:white;
  box-shadow:inset 0 0 30px #eef3f8
}
.kvVisualTimer .disc .inside{
  position:absolute;inset:0;z-index:2;display:grid;place-items:center;text-align:center
}
.kvVisualTimer .inside strong{font-size:37px;color:var(--kv-navy);font-variant-numeric:tabular-nums}
.kvVisualTimer .inside span{font-size:11px;text-transform:uppercase;letter-spacing:.13em;color:#758b9c}

/* TRAFFIC LIGHT */
.widget.traffic-pro{
  background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible
}
.kvTraffic{
  width:142px;margin:auto;padding:13px 12px 16px;border-radius:31px;
  background:linear-gradient(145deg,#28323c,#10161c 70%);
  border:1px solid #4e5962;
  box-shadow:0 18px 28px rgba(0,0,0,.28),inset 0 2px 0 rgba(255,255,255,.08)
}
.kvTraffic:after{
  content:"";display:block;width:48px;height:14px;margin:15px auto -30px;
  background:#151b21;border-radius:0 0 8px 8px;box-shadow:0 10px 0 #151b21
}
.kvTrafficLight{
  width:88px;height:88px;margin:9px auto;border-radius:50%;
  background:#151a1f;border:6px solid #080b0e;
  box-shadow:inset 0 0 22px #000;position:relative;cursor:pointer;transition:.16s
}
.kvTrafficLight:after{
  content:"";position:absolute;left:14px;top:10px;width:26px;height:16px;border-radius:50%;
  background:rgba(255,255,255,.07);transform:rotate(-25deg)
}
.kvTrafficLight.red.on{background:radial-gradient(circle at 38% 28%,#ffb2b2,#ff3b43 42%,#8c0010 100%);box-shadow:0 0 30px #ff4058aa,inset 0 0 16px #ffd6d6}
.kvTrafficLight.yellow.on{background:radial-gradient(circle at 38% 28%,#fff5b3,#ffd536 42%,#8b6500 100%);box-shadow:0 0 30px #ffd536aa,inset 0 0 16px #fff7d1}
.kvTrafficLight.green.on{background:radial-gradient(circle at 38% 28%,#b8ffd6,#27d276 42%,#006a32 100%);box-shadow:0 0 30px #27d276aa,inset 0 0 16px #d6ffe7}

/* RANDOMIZER */
.kvRandom{
  height:100%;padding:18px;border-radius:18px;
  background:
    radial-gradient(circle at 90% 8%,rgba(106,85,246,.12),transparent 35%),
    linear-gradient(145deg,#fff,#f6fbff);
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:14px
}
.kvRandom .eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:#71899d;font-weight:800}
.kvRandom .result{
  min-width:70%;max-width:95%;padding:18px 22px;border-radius:18px;
  background:white;border:1px solid #dfebf3;box-shadow:0 10px 24px rgba(9,42,88,.08);
  font-size:clamp(25px,3vw,43px);font-weight:900;color:var(--kv-navy);text-align:center
}
.kvRandom .shuffle{
  border:0;background:linear-gradient(135deg,var(--kv-blue),#327cf1 55%,var(--kv-purple));
  color:#fff;padding:10px 17px;border-radius:12px;font-weight:800;cursor:pointer;
  box-shadow:0 8px 18px rgba(55,113,220,.2)
}

/* DICE */
.kvDice{height:100%;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:18px;background:linear-gradient(145deg,#fff,#f7faff);border-radius:18px}
.kvDiceFace{
  width:130px;height:130px;border-radius:28px;background:white;border:1px solid #dfe9f0;
  box-shadow:0 14px 28px rgba(9,42,88,.14);display:grid;place-items:center;margin:auto;
  font-size:78px;color:var(--kv-navy)
}
.kvDiceInfo{text-align:center}.kvDiceInfo strong{display:block;font-size:33px;color:var(--kv-navy);margin-bottom:10px}

/* STICKERS */
.widget.sticker-pro{background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible}
.widget.sticker-pro .body{background:transparent!important;padding:0!important}
.kvSticker{
  height:100%;display:grid;place-items:center;font-size:min(9vw,130px);
  filter:drop-shadow(0 12px 13px rgba(15,40,65,.18));transform:translateZ(0)
}
.kvStickerLabel{
  display:inline-block;background:#fff;border:1px solid #e0e9ef;border-radius:999px;
  padding:5px 9px;font-size:11px;color:#5d7488;box-shadow:0 5px 12px #15355010
}

/* SCOREBOARD */
.kvScoreboard{
  height:100%;padding:16px;border-radius:18px;
  background:linear-gradient(145deg,#092a58,#124f87);color:white;
  display:grid;grid-template-columns:1fr 62px 1fr;gap:10px;align-items:center
}
.kvTeam{text-align:center}.kvTeamName{font-size:16px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kvScore{font-size:62px;font-weight:950;line-height:1;font-variant-numeric:tabular-nums;margin:10px 0}
.kvScoreControls{display:flex;justify-content:center;gap:6px}
.kvScoreControls button{width:38px;height:38px;border:0;border-radius:10px;background:#ffffff18;color:white;font-size:22px;cursor:pointer}
.kvVs{font-size:13px;text-transform:uppercase;letter-spacing:.12em;text-align:center;color:#8ed7ff}

/* TIMETABLE */
.kvTimetable{height:100%;overflow:auto;border-radius:16px;background:#fff}
.kvTimetable table{width:100%;border-collapse:collapse}
.kvTimetable th{
  position:sticky;top:0;background:#eef7fe;color:#1d5d8d;text-transform:uppercase;
  font-size:11px;letter-spacing:.1em;text-align:left;padding:11px;border-bottom:1px solid #d8e8f3
}
.kvTimetable td{padding:11px;border-bottom:1px solid #edf1f4;font-size:14px}
.kvTimetable tbody tr:nth-child(even){background:#fbfdff}
.kvTimetable tbody tr:hover{background:#eef8ff}
.kvTimetable .timecol{font-weight:850;color:var(--kv-navy);width:90px}

/* SOUND LEVEL */
.kvSound{height:100%;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:18px;text-align:center;border-radius:18px;background:linear-gradient(145deg,#fff,#f5fbff)}
.kvSoundIcon{font-size:64px;filter:drop-shadow(0 8px 10px #0b2e4e18)}
.kvSoundLabel{font-size:14px;font-weight:800;color:var(--kv-navy)}
.kvSound input[type=range]{accent-color:var(--kv-blue)}

/* CALENDAR + EVENT */
.kvCalendar{height:100%;display:grid;place-items:center;padding:16px;background:linear-gradient(145deg,#fff,#f8fbff);border-radius:18px;text-align:center}
.kvCalendar .month{text-transform:uppercase;letter-spacing:.13em;font-size:12px;font-weight:800;color:#3788be}
.kvCalendar .date{font-size:74px;line-height:1;font-weight:950;color:var(--kv-navy);margin:6px 0}
.kvCalendar .weekday{font-size:18px;font-weight:750;color:#5a7288}
.kvEvent{height:100%;display:grid;place-items:center;text-align:center;padding:18px;border-radius:18px;background:linear-gradient(145deg,#fff8d9,#fff)}
.kvEvent .eventTitle{font-size:15px;font-weight:850;color:#725c0f}
.kvEvent .eventDays{font-size:70px;font-weight:950;color:#b88600;line-height:1;margin:8px 0}
.kvEvent .eventUnit{text-transform:uppercase;letter-spacing:.13em;font-size:11px;color:#8f7a38}

/* WIDGET SETTINGS THEME */
.kvSettingsGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:10px 0}
.kvThemeBtn{border:1px solid #d7e2ea;background:#fff;border-radius:11px;padding:10px;cursor:pointer;font-weight:700}
.kvThemeBtn.active{border-color:var(--kv-blue);background:#eef8ff;color:#1575b2}


/* =========================================================
   WEB V7.1 – CLEAN SINGLE WIDGET TOOLBAR
   The v6 floating quick-actions bar is intentionally disabled.
   A selected widget should have ONE compact toolbar only.
   ========================================================= */
#quickActions,
#quickActions.show{
  display:none !important;
}


/* =========================================================
   WEB V8 – CLASSROOM TOOL POLISH
   ========================================================= */

/* Stopwatch */
.kvStopwatch{
  height:100%;display:grid;place-items:center;text-align:center;padding:18px;
  border-radius:18px;background:linear-gradient(145deg,#071f3e,#0b477d);color:#fff
}
.kvStopwatch .label{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:#9bd9ff;font-weight:800}
.kvStopwatch .swtime{font-size:clamp(38px,5vw,72px);font-weight:900;letter-spacing:-.04em;font-variant-numeric:tabular-nums;margin:8px 0 14px}
.kvStopwatch .kvMiniBtn.soft{background:#ffffff18;color:#fff}

/* Group maker */
.kvGroups{height:100%;overflow:auto;padding:16px;border-radius:18px;background:linear-gradient(145deg,#fff,#f5faff)}
.kvGroupsTop{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.kvGroupsTop strong{color:var(--kv-navy);font-size:15px}
.kvGroupGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:9px}
.kvGroupCard{border-radius:14px;padding:11px;background:#fff;border:1px solid #dfebf3;box-shadow:0 7px 17px rgba(9,42,88,.06)}
.kvGroupCard b{display:block;color:#267eb7;margin-bottom:6px}
.kvGroupCard span{display:block;font-size:13px;color:#425d73;padding:2px 0}

/* QR + link + image */
.kvMediaCard{height:100%;display:grid;place-items:center;padding:16px;text-align:center;border-radius:18px;background:linear-gradient(145deg,#fff,#f7fbff)}
.kvMediaCard .mediaIcon{font-size:54px;margin-bottom:8px;filter:drop-shadow(0 8px 12px #092a5818)}
.kvMediaCard strong{color:var(--kv-navy);font-size:17px}
.kvMediaCard p{color:#6a8195;font-size:12px;max-width:90%;overflow:hidden;text-overflow:ellipsis}
.kvMediaCard a{display:inline-flex;margin-top:8px;padding:8px 12px;border-radius:10px;background:#eaf6ff;color:#1375b3;font-weight:800;text-decoration:none}
.kvImageFrame{height:100%;width:100%;display:grid;place-items:center;overflow:hidden;border-radius:17px;background:transparent}
.kvImageFrame img{width:100%;height:100%;object-fit:contain;display:block}

/* Work symbol / instruction card */
.kvWorkSymbol{
  height:100%;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:16px;
  padding:18px;border-radius:18px;background:linear-gradient(145deg,#fff,#f6fbff)
}
.kvWorkSymbol .symbol{width:82px;height:82px;border-radius:24px;display:grid;place-items:center;font-size:43px;background:#e9f7ff}
.kvWorkSymbol h3{margin:0 0 4px;color:var(--kv-navy);font-size:21px}
.kvWorkSymbol p{margin:0;color:#637b90;font-size:13px}

/* Poll */
.kvPoll{height:100%;overflow:auto;padding:16px;border-radius:18px;background:linear-gradient(145deg,#fff,#f7fbff)}
.kvPollQuestion{font-size:18px;font-weight:850;color:var(--kv-navy);margin-bottom:12px}
.kvPollRow{display:grid;grid-template-columns:1fr auto;gap:9px;align-items:center;margin:8px 0}
.kvPollChoice{position:relative;overflow:hidden;border:1px solid #dce8f1;border-radius:11px;background:#fff;padding:10px;cursor:pointer}
.kvPollFill{position:absolute;left:0;top:0;bottom:0;background:#dff3ff;z-index:0}
.kvPollChoice span{position:relative;z-index:1;font-weight:700;color:#34536c}
.kvPollCount{min-width:30px;text-align:center;font-weight:850;color:#267db4}

/* Text editor: cleaner presentation mode */
.widget.text-pro .body{padding:0!important}
.kvRichText{height:100%;overflow:auto;padding:18px 20px;border-radius:0 0 18px 18px;background:var(--text-bg,#fff);color:var(--text-color,#173652)}
.kvRichText:focus{outline:none}
body.presentation-mode .widget.text-pro .kvRichText{border-radius:18px}

/* Focus mode */
body.focus-mode #pages,
body.focus-mode #historyControls,
body.focus-mode #menuToggle,
body.focus-mode #widgetMenu,
body.focus-mode .widget:not(.focus-target){display:none!important}
body.focus-mode .widget.focus-target{
  display:block!important;position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;
  border-radius:0!important;z-index:9999!important
}
body.focus-mode .widget.focus-target .head{display:none!important}
body.focus-mode .widget.focus-target .body{height:100%!important;border-radius:0!important}


/* =========================================================
   WEB V9 – RESPONSIVE WIDGETS + RANDOMIZER
   ========================================================= */

/* Focus mode is intentionally retired in v9. */
body.focus-mode #pages,
body.focus-mode #historyControls,
body.focus-mode #menuToggle,
body.focus-mode #widgetMenu,
body.focus-mode .widget:not(.focus-target),
body.focus-mode .widget.focus-target{
  display:revert!important;
  position:revert!important;
  inset:auto!important;
  width:auto!important;
  height:auto!important;
  border-radius:revert!important;
  z-index:revert!important;
}
body.focus-mode .widget.focus-target .head{display:flex!important}
body.focus-mode .widget.focus-target .body{height:calc(100% - 38px)!important}

/* General scalable body rules */
.widget.scalable-widget .body{
  display:flex;
  align-items:stretch;
  justify-content:stretch;
  overflow:hidden;
}
.widget.scalable-widget .body > *{
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
}

/* Traffic light scales with widget dimensions */
.widget.traffic-pro .body{display:grid!important;place-items:center!important;overflow:visible!important}
.kvTraffic{
  --traffic-scale:min(1,1);
  width:min(42%, 150px);
  max-height:92%;
  aspect-ratio: .46 / 1;
  padding:clamp(6px,2.2%,13px);
  border-radius:clamp(16px,7%,31px);
  display:flex;
  flex-direction:column;
  justify-content:space-evenly;
  align-items:center;
  margin:auto;
}
.kvTrafficLight{
  width:auto!important;
  height:auto!important;
  aspect-ratio:1;
  flex:0 1 27%;
  max-width:78%;
  max-height:27%;
  margin:0!important;
  border-width:clamp(3px,1.4%,6px)!important;
}
.kvTraffic:after{
  width:35%;
  height:5%;
  min-height:7px;
  margin:2% auto -10%;
  box-shadow:0 .55em 0 #151b21
}

/* Clock typography scales with the box */
.kvClock .time{font-size:clamp(26px, min(9vw,11vh), 82px)}
.kvClock .date{font-size:clamp(11px,2.2vw,18px)}
.kvClock .day{font-size:clamp(9px,1.5vw,13px)}

/* Timer automatically switches to compact layout */
.kvTimer{
  grid-template-columns:minmax(90px,.85fr) 1.15fr;
  gap:clamp(8px,3%,18px);
  padding:clamp(8px,4%,18px)
}
.kvTimerRing{width:min(95%,210px)}
.kvTimerRing strong{font-size:clamp(18px,4vw,34px)}
.kvTimerInfo .remaining{font-size:clamp(17px,3vw,30px)}
.widget.compact-widget .kvTimer{grid-template-columns:1fr;grid-template-rows:1fr auto;gap:6px}
.widget.compact-widget .kvTimerInfo h4,.widget.compact-widget .kvTimerInfo .remaining{display:none}
.widget.compact-widget .kvTimerActions{justify-content:center;margin-top:3px}
.widget.compact-widget .kvMiniBtn{padding:6px 8px;font-size:11px}

/* Scoreboard scales */
.kvScoreboard{padding:clamp(7px,3%,16px);grid-template-columns:1fr clamp(38px,12%,62px) 1fr}
.kvTeamName{font-size:clamp(10px,2vw,16px)}
.kvScore{font-size:clamp(30px,8vw,70px)}
.kvScoreControls button{width:clamp(27px,5vw,38px);height:clamp(27px,5vw,38px);font-size:clamp(16px,3vw,22px)}

/* Sticker scales strictly with widget */
.kvSticker{font-size:min(72cqw,72cqh,150px)}
.widget.sticker-pro{container-type:size}

/* Calendar / countdown scale */
.kvCalendar .date{font-size:clamp(34px,10vw,82px)}
.kvCalendar .weekday{font-size:clamp(12px,2.3vw,18px)}
.kvEvent .eventDays{font-size:clamp(36px,10vw,82px)}

/* Sound scales */
.kvSoundIcon{font-size:clamp(30px,9vw,72px)}

/* Professional wheel */
.kvWheel{
  height:100%;
  width:100%;
  display:grid;
  grid-template-columns:minmax(140px,1fr) minmax(120px,.5fr);
  align-items:center;
  gap:clamp(8px,3%,18px);
  padding:clamp(8px,3%,18px);
  border-radius:18px;
  background:
    radial-gradient(circle at 90% 5%,rgba(106,85,246,.12),transparent 32%),
    linear-gradient(145deg,#ffffff,#f4faff);
  overflow:hidden;
}
.kvWheelStage{
  position:relative;
  width:100%;
  height:100%;
  min-height:120px;
  display:grid;
  place-items:center;
}
.kvWheelCanvas{
  display:block;
  width:min(100%,100cqh);
  height:auto;
  max-height:100%;
  aspect-ratio:1;
  filter:drop-shadow(0 12px 22px rgba(9,42,88,.18));
}
.kvWheelStage{container-type:size}
.kvWheelPointer{
  position:absolute;
  top:1%;
  left:50%;
  transform:translateX(-50%);
  width:0;height:0;
  border-left:clamp(8px,2cqw,15px) solid transparent;
  border-right:clamp(8px,2cqw,15px) solid transparent;
  border-top:clamp(18px,4cqw,30px) solid var(--kv-navy);
  z-index:3;
  filter:drop-shadow(0 3px 2px #0002)
}
.kvWheelSide{text-align:center;min-width:0}
.kvWheelSide .eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:#71899d;font-weight:850}
.kvWheelResult{
  font-size:clamp(18px,3vw,38px);
  font-weight:950;color:var(--kv-navy);
  line-height:1.05;margin:8px 0 13px;
  overflow-wrap:anywhere
}
.kvWheelSpin{
  border:0;
  background:linear-gradient(135deg,var(--kv-blue),#2e7df3 55%,var(--kv-purple));
  color:white;font-weight:850;
  padding:10px 15px;border-radius:12px;cursor:pointer;
  box-shadow:0 9px 20px rgba(47,116,226,.22)
}
.kvWheelMeta{font-size:11px;color:#748a9d;margin-top:8px}
.widget.compact-widget .kvWheel{
  grid-template-columns:1fr;
  grid-template-rows:minmax(100px,1fr) auto;
}
.widget.compact-widget .kvWheelSide .eyebrow,
.widget.compact-widget .kvWheelMeta{display:none}
.widget.compact-widget .kvWheelResult{font-size:16px;margin:2px 0 5px}
.widget.compact-widget .kvWheelSpin{padding:6px 10px;font-size:11px}

/* Random result card scales */
.kvRandom{padding:clamp(7px,4%,18px);gap:clamp(6px,3%,14px)}
.kvRandom .result{padding:clamp(8px,4%,18px);font-size:clamp(18px,6cqw,44px)}
.kvRandom{container-type:inline-size}

/* Scalable group / poll / timetable text */
.kvGroupGrid{grid-template-columns:repeat(auto-fit,minmax(min(120px,45%),1fr))}
.kvTimetable th,.kvTimetable td{padding:clamp(5px,2%,11px);font-size:clamp(10px,1.5vw,14px)}


/* =========================================================
   WEB V10 – PROFESSIONAL TEXT EDITOR
   ========================================================= */

/* Remove the old in-widget rich toolbar completely */
.widget.text-pro .rich-toolbar,
.widget.text-widget .rich-toolbar{
  display:none!important;
}

/* Text widgets should look like content, not like a form */
.widget.text-pro,
.widget.text-widget{
  overflow:visible;
}
.widget.text-pro .body,
.widget.text-widget .body{
  padding:0!important;
  height:100%!important;
  overflow:visible!important;
}
.widget.text-pro .head,
.widget.text-widget .head{
  height:36px;
}
.widget.text-pro:not(.selected) .head,
.widget.text-widget:not(.selected) .head{
  opacity:0!important;
  pointer-events:none!important;
}
.widget.text-pro.selected .head,
.widget.text-widget.selected .head{
  opacity:1!important;
  pointer-events:auto!important;
}
.widget.text-pro:not(.selected),
.widget.text-widget:not(.selected){
  border-color:transparent!important;
  box-shadow:none!important;
}
.widget.text-pro.selected,
.widget.text-widget.selected{
  outline:2px solid #645cff!important;
  outline-offset:0!important;
}

.kvTextSurface{
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  padding:clamp(10px,2.6%,22px);
  overflow:auto;
  outline:none;
  border-radius:inherit;
  color:var(--text-color,#172f48);
  background:var(--text-surface,#fff);
  line-height:1.25;
  word-break:break-word;
}
.widget.transparent-bg .kvTextSurface{
  background:transparent!important;
}
.kvTextSurface:empty:before{
  content:attr(data-placeholder);
  color:#7d8792;
  opacity:.72;
  font-style:italic;
  pointer-events:none;
}
.widget.text-pro:not(.selected) .kvTextSurface{
  cursor:default;
}
.widget.text-pro.selected .kvTextSurface{
  cursor:text;
}

/* One floating toolbar, styled after the reference */
#textEditorBar{
  position:fixed;
  z-index:380;
  display:none;
  align-items:center;
  gap:4px;
  min-height:48px;
  max-width:calc(100vw - 24px);
  overflow-x:auto;
  padding:6px 8px;
  border:1px solid rgba(213,224,234,.95);
  border-radius:14px;
  background:rgba(255,255,255,.97);
  box-shadow:0 10px 34px rgba(15,40,68,.18);
  backdrop-filter:blur(12px);
}
#textEditorBar.show{display:flex}
#textEditorBar .sep{
  width:1px;
  align-self:stretch;
  background:#e3e9ef;
  margin:0 3px;
  flex:0 0 auto;
}
#textEditorBar button,
#textEditorBar select,
#textEditorBar input[type=number]{
  height:34px;
  border:0;
  background:transparent;
  color:#23394f;
  border-radius:8px;
  padding:0 8px;
  cursor:pointer;
  flex:0 0 auto;
}
#textEditorBar button:hover,
#textEditorBar button.active,
#textEditorBar select:hover,
#textEditorBar input[type=number]:hover{
  background:#edf4fa;
}
#textEditorBar button{
  min-width:34px;
  font-weight:700;
  font-size:15px;
}
#textEditorBar .dragText{
  cursor:move;
  color:#8091a0;
  font-size:18px;
}
#textEditorBar .fontSelect{
  width:132px;
  font-weight:650;
}
#textEditorBar .sizeInput{
  width:58px;
  text-align:center;
  font-variant-numeric:tabular-nums;
}
#textEditorBar .colorBtn{
  position:relative;
  width:34px;
  padding:0;
}
#textEditorBar .colorDot{
  width:23px;height:23px;border-radius:50%;
  background:#172f48;
  display:block;margin:auto;
  border:1px solid #d8e0e7;
}
#textEditorBar input[type=color]{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
#textEditorBar .danger:hover{background:#fff0f1;color:#bd3342}
#textEditorBar .textMore{font-size:20px;font-weight:800}

/* Selected text widget handles: subtle and professional */
.widget.text-pro.selected:before,
.widget.text-pro.selected:after{
  width:15px!important;height:15px!important;
  border:2px solid #645cff!important;
  background:#fff!important;
  border-radius:50%!important;
}
.widget.text-pro.selected .resizeGrip{
  width:23px;height:23px;opacity:1!important;
}

/* Text settings modal */
.textSettingsGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.textSettingCard{
  border:1px solid #dce6ee;
  border-radius:12px;
  padding:11px;
  background:#f9fbfd;
}
.textSettingCard label{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:13px;
  font-weight:700;
}
.textSettingCard input[type=checkbox]{
  width:auto;
}
@media(max-width:760px){
  #textEditorBar{
    left:8px!important;
    right:8px!important;
    max-width:none;
  }
  #textEditorBar .fontSelect{width:105px}
}


/* =========================================================
   WEB V10.1 – TEXT TOOLBAR WIDTH + WORKING DRAG HANDLE
   ========================================================= */

/* Toolbar always follows the selected text box width.
   It wraps naturally to new rows instead of scrolling sideways. */
#textEditorBar{
  flex-wrap:wrap!important;
  align-content:flex-start;
  overflow-x:hidden!important;
  overflow-y:visible!important;
  max-width:none!important;
  min-width:0;
  height:auto;
  min-height:48px;
  padding:6px 8px;
}

/* Each toolbar row can wrap downward; unused horizontal space stays empty. */
#textEditorBar button,
#textEditorBar select,
#textEditorBar input[type=number],
#textEditorBar .sep{
  flex:0 0 auto;
}

#textEditorBar .sep{
  min-height:34px;
}

#textEditorBar .dragText{
  cursor:grab!important;
  user-select:none;
  touch-action:none;
}
#textEditorBar .dragText:active{
  cursor:grabbing!important;
}

/* Prevent mobile rule from forcing toolbar wider than the selected text box. */
@media(max-width:760px){
  #textEditorBar{
    right:auto!important;
    max-width:none!important;
  }
}


/* =========================================================
   WEB V11 – TRUE WIDGET FITTING / RESPONSIVE CONTENT
   ========================================================= */

.widget.auto-fit-widget .body{
  overflow:hidden!important;
}

/* Visual widgets are centered and allowed to use all available body space */
.widget.auto-fit-widget .body{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}

/* Content-driven widgets that should still scroll */
.widget[data-type="timetable"] .body,
.widget[data-type="groupmaker"] .body,
.widget[data-type="poll"] .body,
.widget[data-type="text"] .body{
  overflow:auto!important;
}

/* Remove old rigid traffic sizing; JS now computes exact fit */
.kvTraffic{
  width:auto!important;
  max-height:none!important;
  margin:0!important;
  flex:none!important;
}
.kvTrafficLight{
  flex:none!important;
  max-width:none!important;
  max-height:none!important;
}

/* Sticker gets explicit pixel size from the sizing engine */
.kvSticker{
  font-size:var(--kv-sticker-size,90px)!important;
  line-height:1!important;
}

/* Dice face explicitly scales */
.kvDiceFace{
  width:var(--kv-dice-size,130px)!important;
  height:var(--kv-dice-size,130px)!important;
  font-size:calc(var(--kv-dice-size,130px) * .6)!important;
  border-radius:calc(var(--kv-dice-size,130px) * .22)!important;
}

/* Clock gets widget-local font sizes */
.kvClock .time{font-size:var(--kv-clock-time,56px)!important}
.kvClock .date{font-size:var(--kv-clock-date,15px)!important}
.kvClock .day{font-size:var(--kv-clock-day,11px)!important}

/* Calendar / event */
.kvCalendar .date{font-size:var(--kv-calendar-date,64px)!important}
.kvCalendar .weekday{font-size:var(--kv-calendar-weekday,17px)!important}
.kvEvent .eventDays{font-size:var(--kv-event-days,64px)!important}

/* Sound */
.kvSoundIcon{font-size:var(--kv-sound-icon,58px)!important}

/* Scoreboard */
.kvScore{font-size:var(--kv-score-size,56px)!important}
.kvTeamName{font-size:var(--kv-team-size,15px)!important}

/* Wheel / timer */
.kvTimerRing{width:var(--kv-ring-size,180px)!important;height:var(--kv-ring-size,180px)!important;flex:none!important}
.kvVisualTimer .disc{width:var(--kv-visual-size,230px)!important;height:var(--kv-visual-size,230px)!important;flex:none!important}
.kvWheelCanvas{width:var(--kv-wheel-size,300px)!important;height:var(--kv-wheel-size,300px)!important;max-width:none!important;max-height:none!important}

/* Work symbol */
.kvWorkSymbol .symbol{
  width:var(--kv-work-symbol,82px)!important;
  height:var(--kv-work-symbol,82px)!important;
  font-size:calc(var(--kv-work-symbol,82px) * .52)!important;
}

/* Images always fit inside the available box without cropping */
.kvImageFrame img{
  max-width:100%!important;
  max-height:100%!important;
  width:auto!important;
  height:auto!important;
  object-fit:contain!important;
}


/* =========================================================
   WEB V11.1 – TRAFFIC LIGHT HOTFIX
   ========================================================= */

/* Earlier responsive rules used width/height:auto!important on the bulbs.
   That overrode the sizing engine. V11.1 uses explicit CSS variables instead. */
.widget.traffic-pro .body{
  display:grid!important;
  place-items:center!important;
  overflow:visible!important;
  padding:0!important;
}

.kvTraffic{
  width:var(--kv-traffic-width,140px)!important;
  height:var(--kv-traffic-height,330px)!important;
  max-width:none!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  margin:0!important;
  padding:var(--kv-traffic-pad,10px)!important;
  border-radius:var(--kv-traffic-radius,28px)!important;
  display:grid!important;
  grid-template-rows:repeat(3,1fr) var(--kv-traffic-stand,20px)!important;
  align-items:center!important;
  justify-items:center!important;
  gap:0!important;
  background:linear-gradient(145deg,#293540,#0e151b 72%)!important;
  border:1px solid #4b5964!important;
  box-shadow:0 16px 28px rgba(0,0,0,.28),inset 0 2px 0 rgba(255,255,255,.08)!important;
  overflow:visible!important;
  position:relative!important;
}

/* Remove the old pseudo stand because we now draw the stand in the grid. */
.kvTraffic:after{
  content:""!important;
  width:var(--kv-traffic-stand-width,44px)!important;
  height:var(--kv-traffic-stand,20px)!important;
  min-height:0!important;
  margin:0!important;
  align-self:end!important;
  background:#11181e!important;
  border-radius:0 0 7px 7px!important;
  box-shadow:none!important;
}

.kvTrafficLight{
  width:var(--kv-light-size,76px)!important;
  height:var(--kv-light-size,76px)!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  aspect-ratio:1!important;
  flex:none!important;
  margin:0!important;
  border:var(--kv-light-border,5px) solid #06090c!important;
  border-radius:50%!important;
  background:radial-gradient(circle at 38% 28%,#28323b 0 12%,#151c22 46%,#080d11 100%)!important;
  box-shadow:inset 0 0 22px rgba(0,0,0,.9)!important;
  position:relative!important;
  cursor:pointer!important;
}

.kvTrafficLight.red.on{
  background:radial-gradient(circle at 38% 28%,#ffd0d0,#ff4853 38%,#b50018 72%,#65000d 100%)!important;
  box-shadow:0 0 var(--kv-glow,28px) rgba(255,61,80,.75),inset 0 0 15px rgba(255,230,230,.9)!important;
}
.kvTrafficLight.yellow.on{
  background:radial-gradient(circle at 38% 28%,#fff8bf,#ffd638 38%,#b87c00 72%,#664000 100%)!important;
  box-shadow:0 0 var(--kv-glow,28px) rgba(255,214,56,.72),inset 0 0 15px rgba(255,250,214,.9)!important;
}
.kvTrafficLight.green.on{
  background:radial-gradient(circle at 38% 28%,#c8ffda,#39dc82 38%,#078c43 72%,#004c24 100%)!important;
  box-shadow:0 0 var(--kv-glow,28px) rgba(52,220,128,.72),inset 0 0 15px rgba(220,255,234,.9)!important;
}


/* =========================================================
   WEB V12 – WIDGET LIBRARY POLISH
   ========================================================= */

/* Shared professional widget shell */
.kvProCard{
  width:100%;height:100%;box-sizing:border-box;
  border-radius:18px;background:linear-gradient(145deg,#fff,#f6fbff);
  color:#173652;overflow:hidden;
}
.kvProCenter{display:grid;place-items:center;text-align:center;padding:clamp(8px,4%,20px)}
.kvProEyebrow{font-size:clamp(9px,2cqw,12px);font-weight:850;letter-spacing:.13em;text-transform:uppercase;color:#6f879b}
.kvProTitle{font-size:clamp(15px,5cqw,25px);font-weight:900;color:#102f50;overflow-wrap:anywhere}
.kvProSub{font-size:clamp(10px,3cqw,14px);color:#71889b;overflow-wrap:anywhere}

/* Stopwatch */
.kvStopwatchV12{container-type:size}
.kvStopwatchV12 .swtime{font-size:clamp(28px,16cqw,78px);font-weight:950;font-variant-numeric:tabular-nums;letter-spacing:-.045em}
.kvStopwatchV12 .actions{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:clamp(5px,3cqh,14px)}

/* Hyperlink */
.kvLinkV12{container-type:size}
.kvLinkV12 .icon{font-size:clamp(30px,22cqh,70px)}
.kvLinkV12 a{display:inline-flex;padding:8px 13px;margin-top:9px;border-radius:11px;background:#e7f5ff;color:#1378b7;text-decoration:none;font-weight:850}

/* Work symbol */
.kvWorkV12{container-type:size;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:clamp(8px,4cqw,18px);padding:clamp(9px,5cqw,20px)}
.kvWorkV12 .symbol{width:clamp(46px,28cqh,100px);height:clamp(46px,28cqh,100px);border-radius:26%;display:grid;place-items:center;background:#e7f6ff;font-size:clamp(25px,15cqh,54px)}
.widget.compact-widget .kvWorkV12{grid-template-columns:1fr;text-align:center}
.widget.compact-widget .kvWorkV12 .symbol{margin:auto}

/* Poll */
.kvPollV12{container-type:size;padding:clamp(8px,4cqw,18px);overflow:auto}
.kvPollV12 .question{font-size:clamp(14px,5cqw,22px);font-weight:900;color:#102f50;margin-bottom:10px}
.kvPollV12 .choice{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:clamp(7px,2cqh,11px);margin:6px 0;border:1px solid #dce9f2;border-radius:12px;background:#fff;overflow:hidden;cursor:pointer}
.kvPollV12 .fill{position:absolute;inset:0 auto 0 0;background:#dff3ff}
.kvPollV12 .label,.kvPollV12 .count{position:relative;z-index:1;font-weight:750}

/* Groups */
.kvGroupsV12{container-type:size;padding:clamp(8px,4cqw,18px);overflow:auto}
.kvGroupsV12 .top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.kvGroupsV12 .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(135px,45cqw),1fr));gap:8px}
.kvGroupsV12 .group{padding:10px;border-radius:13px;border:1px solid #dfebf3;background:#fff;box-shadow:0 6px 16px #092a580d}
.kvGroupsV12 .group b{display:block;color:#237eb9;margin-bottom:5px}
.kvGroupsV12 .group span{display:block;font-size:clamp(10px,3cqw,13px);padding:2px 0}

/* QR */
.kvQrV12{container-type:size}
.kvQrV12 canvas,.kvQrV12 img{max-width:75%;max-height:70%;width:auto!important;height:auto!important}

/* Image presentation */
.widget[data-type="image"] .body{background:transparent!important}
.widget[data-type="image"]:not(.selected){background:transparent!important;border-color:transparent!important;box-shadow:none!important}

/* More compact mode threshold helpers */
.widget.ultra-compact .kvProSub,
.widget.ultra-compact .kvProEyebrow{display:none!important}


/* =========================================================
   WEB V13 – PROFESSIONAL WIDGET LIBRARY
   ========================================================= */

.kvLibrary{
  display:flex;flex-direction:column;gap:13px;
}
.kvLibraryTop{
  display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;
}
.kvLibrarySearch{
  margin:0!important;height:42px;border-radius:12px!important;
  background:#f7fafc!important;padding:0 13px!important;
}
.kvLibraryCats{
  display:flex;gap:6px;flex-wrap:wrap;
}
.kvLibraryCat{
  border:1px solid #d8e4ed;background:#fff;color:#48637a;
  padding:7px 10px;border-radius:999px;cursor:pointer;font-size:12px;font-weight:800;
}
.kvLibraryCat.active{background:#e7f5ff;color:#1678b6;border-color:#bfe4f8}
.kvLibraryGrid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;
}
.kvLibraryItem{
  border:1px solid #dce7ef;background:#fff;border-radius:14px;
  min-height:112px;padding:10px;cursor:pointer;text-align:left;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  transition:.16s;min-width:0
}
.kvLibraryItem:hover{
  transform:translateY(-2px);border-color:#bcdff4;
  box-shadow:0 9px 22px rgba(9,42,88,.09);background:#fbfdff
}
.kvLibraryItem .icon{font-size:29px;line-height:1;margin-bottom:8px}
.kvLibraryItem strong{font-size:13px;color:#183854}
.kvLibraryItem small{
  display:block;margin-top:4px;color:#7a8e9f;font-size:10px;line-height:1.3;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical
}
.kvLibraryEmpty{
  grid-column:1/-1;text-align:center;padding:34px;color:#72889a
}
.kvLibraryRecent{font-size:11px;color:#72889a}
.kvLibraryBadge{
  margin-left:auto;background:#eef6ff;color:#2779b1;padding:3px 6px;border-radius:7px;font-size:9px;font-weight:900
}

.kvSymbolPicker{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0 14px
}
.kvSymbolOption{
  border:1px solid #dce6ee;background:#fff;border-radius:12px;padding:10px 7px;
  cursor:pointer;text-align:center;font-weight:750;color:#405b72
}
.kvSymbolOption span{display:block;font-size:28px;margin-bottom:4px}
.kvSymbolOption.active{background:#eaf7ff;border-color:#3e9bd2;color:#1b709f}

@media(max-width:720px){
  .kvLibraryGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* =========================================================
   WEB V14 – BETTER CONTENT SCALING
   ========================================================= */

/* Work symbol fills the box instead of staying tiny */
.kvWorkV12{
  container-type:size;
  width:100%;
  height:100%;
  display:grid;
  grid-template-columns:minmax(110px,28%) 1fr;
  align-items:center;
  gap:clamp(14px,4cqw,34px);
  padding:clamp(18px,4cqw,44px);
}
.kvWorkV12 .symbol{
  width:min(100%,26cqh)!important;
  height:auto!important;
  aspect-ratio:1;
  min-width:90px;
  max-width:260px;
  border-radius:26%;
  display:grid;
  place-items:center;
  background:#e7f6ff;
  font-size:clamp(46px,14cqh,150px)!important;
  justify-self:center;
}
.kvWorkV12 .kvProTitle{
  font-size:clamp(28px,6cqw,68px)!important;
  line-height:1.05;
  margin-bottom:clamp(8px,1.4cqh,18px);
}
.kvWorkV12 .kvProSub{
  font-size:clamp(16px,3cqw,34px)!important;
  line-height:1.25;
  max-width:90%;
}

/* Big-box mode for work symbols */
.widget.large-widget .kvWorkV12{
  grid-template-columns:minmax(180px,30%) 1fr;
}
.widget.large-widget .kvWorkV12 .symbol{
  width:min(100%,30cqh)!important;
  max-width:320px;
}
.widget.large-widget .kvWorkV12 .kvProTitle{
  font-size:clamp(36px,5.5cqw,82px)!important;
}
.widget.large-widget .kvWorkV12 .kvProSub{
  font-size:clamp(20px,2.7cqw,40px)!important;
}

/* Compact layout stays usable */
.widget.compact-widget .kvWorkV12{
  grid-template-columns:1fr;
  text-align:center;
  align-content:center;
}
.widget.compact-widget .kvWorkV12 .symbol{
  width:min(42cqw,32cqh)!important;
  min-width:58px;
  max-width:140px;
}
.widget.compact-widget .kvWorkV12 .kvProTitle{
  font-size:clamp(18px,8cqw,34px)!important;
}
.widget.compact-widget .kvWorkV12 .kvProSub{
  font-size:clamp(12px,4.5cqw,20px)!important;
  max-width:100%;
}

/* Scale cards more aggressively in large widgets */
.widget.large-widget .kvProTitle{
  font-size:clamp(24px,4cqw,54px);
}
.widget.large-widget .kvProSub{
  font-size:clamp(15px,2.1cqw,28px);
}
.widget.large-widget .kvProEyebrow{
  font-size:clamp(11px,1.4cqw,18px);
}

/* Stopwatch large mode */
.widget.large-widget .kvStopwatchV12 .swtime{
  font-size:clamp(56px,13cqw,140px)!important;
}
.widget.large-widget .kvStopwatchV12 .kvMiniBtn{
  font-size:clamp(14px,1.8cqw,22px);
  padding:clamp(9px,1.4cqh,16px) clamp(14px,2cqw,24px);
}

/* Poll and groups make better use of vertical space */
.widget.large-widget .kvPollV12 .question{
  font-size:clamp(24px,4cqw,50px)!important;
}
.widget.large-widget .kvPollV12 .choice{
  padding:clamp(12px,2cqh,22px)!important;
}
.widget.large-widget .kvPollV12 .label,
.widget.large-widget .kvPollV12 .count{
  font-size:clamp(17px,2.2cqw,30px)!important;
}
.widget.large-widget .kvGroupsV12 .group b{
  font-size:clamp(18px,2.4cqw,30px);
}
.widget.large-widget .kvGroupsV12 .group span{
  font-size:clamp(15px,2cqw,24px)!important;
}

/* Hyperlink scales into bigger presentation card */
.widget.large-widget .kvLinkV12 .icon{
  font-size:clamp(64px,18cqh,160px)!important;
}
.widget.large-widget .kvLinkV12 .kvProTitle{
  font-size:clamp(30px,5cqw,64px)!important;
}
.widget.large-widget .kvLinkV12 .kvProSub{
  font-size:clamp(16px,2cqw,28px)!important;
}
.widget.large-widget .kvLinkV12 a{
  font-size:clamp(16px,2cqw,24px);
  padding:clamp(10px,1.5cqh,16px) clamp(16px,2.4cqw,28px);
}


/* =========================================================
   WEB V14.1 – WORK SYMBOL PRESETS
   ========================================================= */
.kvWorkPresetGrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  margin:10px 0 14px;
}
.kvWorkPreset{
  border:1px solid #dce6ee;
  background:#fff;
  border-radius:13px;
  padding:11px;
  cursor:pointer;
  text-align:left;
  display:grid;
  grid-template-columns:42px 1fr;
  gap:10px;
  align-items:center;
}
.kvWorkPreset:hover{background:#f7fbff;border-color:#bfdff2}
.kvWorkPreset.active{background:#eaf7ff;border-color:#3997d0}
.kvWorkPreset .ico{font-size:28px;text-align:center}
.kvWorkPreset strong{display:block;color:#173652;font-size:13px}
.kvWorkPreset small{display:block;color:#71869a;font-size:10px;line-height:1.3;margin-top:2px}
.kvCustomWorkFields{
  display:none;
  margin-top:10px;
  padding:12px;
  border:1px solid #dce6ee;
  border-radius:12px;
  background:#f8fbfd;
}
.kvCustomWorkFields.show{display:block}
@media(max-width:620px){
  .kvWorkPresetGrid{grid-template-columns:1fr}
}


/* =========================================================
   WEB V15 – WIDGET EXPERIENCE / SMART DEFAULTS
   ========================================================= */

.kvQuickPresetRow{
  display:flex;flex-wrap:wrap;gap:7px;margin:9px 0 13px
}
.kvQuickPreset{
  border:1px solid #d9e6ef;background:#fff;color:#36566e;
  border-radius:999px;padding:7px 11px;font-size:12px;font-weight:850;cursor:pointer
}
.kvQuickPreset:hover,.kvQuickPreset.active{
  background:#e8f6ff;border-color:#7bc3ed;color:#1677b1
}
.kvFieldHint{
  color:#758b9e;font-size:11px;margin:-5px 0 8px
}

/* Better default empty states */
.kvEmptyState{
  width:100%;height:100%;display:grid;place-items:center;text-align:center;
  padding:18px;color:#70869a
}
.kvEmptyState .ico{font-size:clamp(36px,16cqh,76px);margin-bottom:8px}
.kvEmptyState strong{display:block;color:#24445f;font-size:clamp(15px,4cqw,22px)}
.kvEmptyState small{display:block;margin-top:4px;font-size:clamp(10px,2.5cqw,13px)}

/* Widget selection should stay subtle even on giant widgets */
.widget.selected{
  --selection-color:#625cff;
}
.widget.selected .head{
  backdrop-filter:blur(10px);
}

/* Universal responsive button sizing */
.widget.large-widget .kvMiniBtn{
  min-height:40px;
}
.widget.ultra-compact .kvMiniBtn{
  min-height:28px;padding:4px 7px;font-size:10px
}

/* Scoreboard large presentation */
.widget.large-widget .kvScoreboard{
  padding:clamp(18px,4cqw,44px)!important
}

/* Calendar and countdown large presentation */
.widget.large-widget .kvCalendar,
.widget.large-widget .kvEvent{
  transform:scale(1.08);
  transform-origin:center;
}

/* Dice presentation */
.widget.large-widget .kvDiceFace{
  --kv-dice-size:min(34cqh,28cqw);
}

/* Sound widget */
.widget.large-widget .kvSound{
  padding:clamp(18px,4cqw,42px)
}


/* =========================================================
   WEB V16 – PAGE WORKFLOW
   ========================================================= */

#pageManagerBtn{
  border:0;background:#f3f7fa;border-radius:9px;
  height:36px;padding:0 10px;cursor:pointer;font-weight:800;color:#35536c
}
#pageManagerBtn:hover{background:#e8f3fb}

.kvPageManager{
  display:flex;flex-direction:column;gap:10px
}
.kvPageToolbar{
  display:flex;gap:7px;flex-wrap:wrap
}
.kvPageList{
  display:flex;flex-direction:column;gap:7px;max-height:55vh;overflow:auto;padding-right:3px
}
.kvPageRow{
  display:grid;grid-template-columns:40px 1fr auto;gap:8px;align-items:center;
  border:1px solid #dce7ef;background:#fff;border-radius:12px;padding:8px
}
.kvPageRow.active{
  border-color:#5b9ed4;background:#eef8ff
}
.kvPageIndex{
  width:34px;height:34px;border-radius:9px;background:#eef4f8;display:grid;place-items:center;
  font-size:12px;font-weight:900;color:#516c82;cursor:grab
}
.kvPageInfo{min-width:0}
.kvPageInfo strong{
  display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#183a56;font-size:13px
}
.kvPageInfo small{display:block;color:#7a8f9f;font-size:10px;margin-top:2px}
.kvPageActions{display:flex;gap:3px}
.kvPageActions button{
  border:0;background:#f3f7fa;border-radius:7px;padding:5px 7px;cursor:pointer
}
.kvPageActions button:hover{background:#e7f2fa}
.kvPageActions .danger:hover{background:#fff0f1;color:#b33442}

.kvNewPageOptions{
  display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:12px
}
.kvNewPageCard{
  border:1px solid #dce7ef;background:#fff;border-radius:13px;padding:13px;cursor:pointer;text-align:left
}
.kvNewPageCard:hover{background:#f7fbff;border-color:#b9def3}
.kvNewPageCard .ico{font-size:28px;margin-bottom:7px}
.kvNewPageCard strong{display:block;color:#183a56}
.kvNewPageCard small{display:block;color:#748a9c;margin-top:3px;font-size:10px;line-height:1.3}

@media(max-width:650px){
  .kvNewPageOptions{grid-template-columns:1fr}
}


/* =========================================================
   WEB V17 – LARGE WIDGET SCALING + SOFT/TRANSPARENT SURFACES
   ========================================================= */

:root{
  --kv-surface-opacity:1;
  --kv-surface-blur:0px;
}

/* universal widget surface modes */
.widget.surface-transparent,
.widget.surface-transparent .body,
.widget.surface-transparent .kvProCard,
.widget.surface-transparent .kvTimer,
.widget.surface-transparent .kvClock,
.widget.surface-transparent .kvVisualTimer,
.widget.surface-transparent .kvRandom,
.widget.surface-transparent .kvScoreboard,
.widget.surface-transparent .kvCalendar,
.widget.surface-transparent .kvEvent,
.widget.surface-transparent .kvSound,
.widget.surface-transparent .kvGroupsV12,
.widget.surface-transparent .kvPollV12,
.widget.surface-transparent .kvLinkV12,
.widget.surface-transparent .kvWorkV12{
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
}

.widget.surface-soft{
  background:rgba(255,255,255,var(--widget-opacity,.72))!important;
  backdrop-filter:blur(var(--widget-blur,10px));
  -webkit-backdrop-filter:blur(var(--widget-blur,10px));
}
.widget.surface-soft .body{
  background:transparent!important;
}
.widget.surface-soft .kvProCard,
.widget.surface-soft .kvTimer,
.widget.surface-soft .kvClock.light,
.widget.surface-soft .kvVisualTimer,
.widget.surface-soft .kvRandom,
.widget.surface-soft .kvCalendar,
.widget.surface-soft .kvEvent,
.widget.surface-soft .kvSound,
.widget.surface-soft .kvGroupsV12,
.widget.surface-soft .kvPollV12,
.widget.surface-soft .kvLinkV12,
.widget.surface-soft .kvWorkV12{
  background:rgba(255,255,255,var(--widget-inner-opacity,.38))!important;
  backdrop-filter:blur(var(--widget-blur,10px));
  -webkit-backdrop-filter:blur(var(--widget-blur,10px));
}

/* selected state stays clear regardless of transparency */
.widget.selected.surface-transparent,
.widget.selected.surface-soft{
  outline:2px solid #625cff!important;
}

/* TIMER: actually use large boxes */
.widget.timer-pro .body{
  overflow:hidden!important;
}
.kvTimer{
  width:100%!important;
  height:100%!important;
  box-sizing:border-box;
}
.widget.large-widget .kvTimer{
  grid-template-columns:minmax(260px,.92fr) minmax(280px,1.08fr)!important;
  gap:clamp(28px,5cqw,72px)!important;
  padding:clamp(28px,5cqw,72px)!important;
}
.widget.large-widget .kvTimerRing{
  --kv-ring-size:min(52cqh,34cqw)!important;
}
.widget.large-widget .kvTimerRing strong{
  font-size:clamp(42px,7cqw,100px)!important;
}
.widget.large-widget .kvTimerInfo{
  align-self:center;
}
.widget.large-widget .kvTimerInfo h4{
  font-size:clamp(14px,1.8cqw,26px)!important;
  letter-spacing:.14em;
}
.widget.large-widget .kvTimerInfo .remaining{
  font-size:clamp(36px,5.2cqw,82px)!important;
  line-height:1.05;
}
.widget.large-widget .kvTimerActions{
  gap:clamp(8px,1.2cqw,16px)!important;
  margin-top:clamp(18px,2.3cqh,30px)!important;
}
.widget.large-widget .kvTimerActions .kvMiniBtn{
  font-size:clamp(16px,1.7cqw,24px)!important;
  padding:clamp(11px,1.4cqh,18px) clamp(18px,2cqw,28px)!important;
}

/* very wide timers */
.widget.timer-wide .kvTimer{
  grid-template-columns:minmax(320px,.8fr) minmax(360px,1.2fr)!important;
}

/* very tall timers */
.widget.timer-tall .kvTimer{
  grid-template-columns:1fr!important;
  grid-template-rows:minmax(260px,1fr) auto!important;
  text-align:center;
}
.widget.timer-tall .kvTimerInfo{align-self:start}
.widget.timer-tall .kvTimerActions{justify-content:center}

/* visual timer also scales aggressively */
.widget.large-widget .kvVisualTimer{
  padding:clamp(28px,4cqw,60px)!important;
}
.widget.large-widget .kvVisualTimer .disc{
  --kv-visual-size:min(62cqh,45cqw)!important;
}
.widget.large-widget .kvVisualTimer .inside strong{
  font-size:clamp(42px,7cqw,92px)!important;
}

/* clock large mode */
.widget.large-widget .kvClock .time{
  --kv-clock-time:clamp(58px,10cqw,150px)!important;
}
.widget.large-widget .kvClock .date{
  --kv-clock-date:clamp(18px,2.5cqw,34px)!important;
}
.widget.large-widget .kvClock .day{
  --kv-clock-day:clamp(13px,1.7cqw,24px)!important;
}

/* surface settings UI */
.kvSurfaceModes{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin:10px 0 12px;
}
.kvSurfaceMode{
  border:1px solid #dce6ee;
  background:#fff;
  border-radius:12px;
  padding:11px 8px;
  cursor:pointer;
  text-align:center;
  font-weight:800;
  color:#466177;
}
.kvSurfaceMode.active{
  background:#eaf7ff;
  border-color:#4a9bd1;
  color:#176fa8;
}
.kvRangeLabel{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  align-items:center;
  font-size:12px;
  font-weight:800;
  color:#476177;
}
.kvRangeLabel output{color:#1b77af}


/* =========================================================
   WEB V17.1 – CONTEXTUAL WIDGET CHROME
   Widget title/action bar is editing chrome, not board content.
   ========================================================= */

/* Default board state: no permanent header strip. */
.widget .head{
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:0!important;
  z-index:30!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translateY(-4px)!important;
  transition:opacity .14s ease,transform .14s ease,visibility .14s!important;
}

/* Do not reserve content space for a hidden header. */
.widget .body{
  inset:0!important;
  height:100%!important;
}

/* Editing mode: reveal controls only when actually interacting. */
body:not(.presenting):not(.presentation-mode):not(.fullscreen-mode) .widget:hover .head,
body:not(.presenting):not(.presentation-mode):not(.fullscreen-mode) .widget.selected .head,
body:not(.presenting):not(.presentation-mode):not(.fullscreen-mode) .widget:focus-within .head{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:translateY(0)!important;
}

/* Header becomes a floating editing toolbar rather than a full-time title bar. */
body:not(.presenting):not(.presentation-mode):not(.fullscreen-mode) .widget:hover .head,
body:not(.presenting):not(.presentation-mode):not(.fullscreen-mode) .widget.selected .head{
  background:rgba(248,252,255,.94)!important;
  box-shadow:0 5px 15px rgba(15,50,80,.10)!important;
  border-bottom:1px solid rgba(190,211,226,.72)!important;
}

/* Presentation/fullscreen: editing chrome must never appear, even on mouse hover. */
body.presenting .widget .head,
body.presentation-mode .widget .head,
body.fullscreen-mode .widget .head,
:fullscreen .widget .head{
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

/* Also suppress edit-only selection furniture in presentation. */
body.presenting .widget,
body.presentation-mode .widget,
body.fullscreen-mode .widget,
:fullscreen .widget{
  outline:none!important;
}
body.presenting .widget .resize,
body.presentation-mode .widget .resize,
body.fullscreen-mode .widget .resize,
:fullscreen .widget .resize{
  display:none!important;
}


/* =========================================================
   WEB V18 – SNAP / ALIGNMENT GUIDES
   ========================================================= */
#kvGuideLayer{
  position:absolute;inset:0;pointer-events:none;z-index:9998;overflow:hidden
}
.kvGuide{
  position:absolute;background:#655cff;opacity:.78;pointer-events:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.35)
}
.kvGuide.v{width:1px;top:0;bottom:0}
.kvGuide.h{height:1px;left:0;right:0}
.kvGuideLabel{
  position:absolute;z-index:9999;pointer-events:none;
  background:#655cff;color:white;border-radius:6px;padding:3px 6px;
  font-size:10px;font-weight:900;box-shadow:0 3px 9px rgba(25,30,80,.18)
}

/* subtle board grid option */
#board.kvGridOn{
  background-image:
    linear-gradient(rgba(255,255,255,.075) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.075) 1px,transparent 1px);
  background-size:24px 24px;
  background-blend-mode:soft-light;
}

/* alignment control */
#snapBtn.active,#gridBtn.active{
  background:#e9f6ff!important;color:#1777b2!important;
  box-shadow:inset 0 0 0 1px #b9e1f7
}


/* =========================================================
   WEB V18.1 – PRESENTATION PAGE NAVIGATION
   ========================================================= */

#presentationPageHint{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  z-index:420;
  display:none;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(10,34,58,.72);
  color:white;
  font-size:11px;
  font-weight:800;
  backdrop-filter:blur(10px);
  pointer-events:none;
  opacity:.86;
}
body.presentation-mode #presentationPageHint,
body.fullscreen-mode #presentationPageHint,
:fullscreen #presentationPageHint{
  display:flex;
}


/* =========================================================
   WEB V19 – MULTI SELECT / GROUP MOVE
   ========================================================= */
.widget.multi-selected{
  outline:2px solid rgba(98,92,255,.72)!important;
  outline-offset:1px;
}
.widget.multi-selected:not(.selected) .head{
  opacity:0!important;visibility:hidden!important;pointer-events:none!important
}
#kvSelectionBox{
  position:absolute;z-index:9996;pointer-events:none;display:none;
  border:1.5px solid #625cff;background:rgba(98,92,255,.09);border-radius:4px
}
#kvMultiBar{
  position:fixed;z-index:10050;left:50%;top:16px;transform:translateX(-50%);
  display:none;align-items:center;gap:5px;padding:6px;
  background:rgba(255,255,255,.96);border:1px solid #d9e5ee;border-radius:13px;
  box-shadow:0 10px 30px rgba(18,48,75,.16);backdrop-filter:blur(12px)
}
#kvMultiBar.show{display:flex}
#kvMultiBar .count{padding:0 8px;font-size:11px;font-weight:900;color:#526b7e}
#kvMultiBar button{
  border:0;background:#f3f7fa;border-radius:8px;padding:7px 9px;cursor:pointer;font-weight:800;color:#35536c
}
#kvMultiBar button:hover{background:#e8f4fb}
#kvMultiBar button.danger:hover{background:#fff0f1;color:#b33442}
body.presenting #kvMultiBar,body.presentation-mode #kvMultiBar,
body.fullscreen-mode #kvMultiBar,:fullscreen #kvMultiBar{display:none!important}


/* =========================================================
   WEB V19.1 – POLISHED BOARD NAVIGATION
   ========================================================= */

/* Make the lower toolbar feel like one intentional component */
#pages{
  gap:6px!important;
  align-items:center!important;
  padding:6px!important;
  background:rgba(255,255,255,.94)!important;
  border:1px solid rgba(210,225,236,.9)!important;
  border-radius:16px!important;
  box-shadow:0 10px 28px rgba(20,54,80,.13)!important;
  backdrop-filter:blur(14px)!important;
}
#pages button{
  border:0!important;
  min-height:38px!important;
  padding:0 12px!important;
  border-radius:10px!important;
  background:transparent!important;
  color:#344e63!important;
  font-size:13px!important;
  font-weight:800!important;
  box-shadow:none!important;
}
#pages button:hover{background:#edf6fb!important}
#pages button.active,#pages #snapBtn.active,#pages #gridBtn.active{
  background:#e7f5ff!important;
  color:#1578b4!important;
}
#pages #pageManagerBtn{font-size:14px!important}
#pages #snapBtn,#pages #gridBtn{border-left:1px solid #e5edf3!important;border-radius:0 9px 9px 0!important}
#pages .pageName,#pages .page-label{
  font-weight:900!important;color:#2f475b!important
}

/* Header/back navigation: replace the scattered pills with a single compact cluster */
#topLeft,#boardTopLeft,.board-top-left{
  display:flex!important;
  align-items:center!important;
  gap:0!important;
  background:rgba(255,255,255,.94)!important;
  border:1px solid rgba(210,225,236,.9)!important;
  border-radius:13px!important;
  box-shadow:0 8px 24px rgba(20,54,80,.11)!important;
  overflow:hidden!important;
  backdrop-filter:blur(12px)!important;
}
#topLeft > *,#boardTopLeft > *,.board-top-left > *{
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:transparent!important;
}
#topLeft > * + *,#boardTopLeft > * + *,.board-top-left > * + *{
  border-left:1px solid #e3ebf1!important;
}

/* Known loose navigation controls from older builds */
.backLink,.homeLink,.boardBack,.boardHome,.storageBadge,.projectBadge{
  min-height:38px!important;
  display:inline-flex!important;
  align-items:center!important;
  padding:0 12px!important;
  border:0!important;
  border-radius:10px!important;
  background:rgba(255,255,255,.94)!important;
  color:#38536a!important;
  font-size:12px!important;
  font-weight:800!important;
  box-shadow:0 6px 18px rgba(20,54,80,.09)!important;
  text-decoration:none!important;
}
.storageBadge,.projectBadge{
  box-shadow:none!important;
  background:transparent!important;
}

/* No editing/navigation chrome in presentation */
body.presenting #pages,body.presentation-mode #pages,body.fullscreen-mode #pages,:fullscreen #pages,
body.presenting #topLeft,body.presentation-mode #topLeft,body.fullscreen-mode #topLeft,:fullscreen #topLeft,
body.presenting #boardTopLeft,body.presentation-mode #boardTopLeft,body.fullscreen-mode #boardTopLeft,:fullscreen #boardTopLeft,
body.presenting .board-top-left,body.presentation-mode .board-top-left,body.fullscreen-mode .board-top-left,:fullscreen .board-top-left{
  display:none!important
}


/* =========================================================
   WEB V20 – UNIFIED BOARD DESIGN SYSTEM
   ========================================================= */

:root{
  --ui-bg:rgba(255,255,255,.96);
  --ui-soft:#f4f8fb;
  --ui-soft-2:#edf5fa;
  --ui-line:#dbe6ee;
  --ui-line-strong:#c8d8e5;
  --ui-ink:#173652;
  --ui-muted:#6d8294;
  --ui-blue:#1599df;
  --ui-blue-dark:#1376ae;
  --ui-purple:#655cff;
  --ui-danger:#c44755;
  --ui-shadow:0 14px 34px rgba(18,49,76,.14);
  --ui-shadow-soft:0 8px 22px rgba(18,49,76,.10);
  --ui-radius:14px;
  --ui-radius-lg:18px;
}

/* ---------- Shared control language ---------- */
button,
input,
select,
textarea{
  font-family:inherit;
}

button{
  -webkit-tap-highlight-color:transparent;
}

.primary,
button.primary{
  border:0!important;
  background:linear-gradient(135deg,#18a7e8,#2d7df4 58%,#675df8)!important;
  color:white!important;
  border-radius:10px!important;
  font-weight:850!important;
  box-shadow:0 6px 15px rgba(45,125,244,.18)!important;
}
.primary:hover,
button.primary:hover{
  filter:brightness(1.035);
  transform:translateY(-1px);
}

.secondary,
button.secondary{
  border:1px solid var(--ui-line)!important;
  background:#fff!important;
  color:var(--ui-ink)!important;
  border-radius:10px!important;
  font-weight:750!important;
  box-shadow:none!important;
}
.secondary:hover,
button.secondary:hover{
  background:var(--ui-soft)!important;
  border-color:var(--ui-line-strong)!important;
}

input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
select,
textarea{
  border:1px solid var(--ui-line)!important;
  background:#fff!important;
  color:var(--ui-ink)!important;
  border-radius:10px!important;
  box-shadow:inset 0 1px 2px rgba(15,45,70,.03)!important;
}
input:focus,
select:focus,
textarea:focus{
  outline:none!important;
  border-color:#7fc2e9!important;
  box-shadow:0 0 0 3px rgba(21,153,223,.11)!important;
}
textarea{min-height:110px;resize:vertical}

/* ---------- Modal ---------- */
#modal,
.modal{
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}
#card,
.modal .box{
  border:1px solid rgba(214,228,238,.95)!important;
  border-radius:20px!important;
  box-shadow:0 24px 70px rgba(12,36,60,.22)!important;
  background:rgba(255,255,255,.985)!important;
}
#card h2,
.modal .box h2{
  margin-top:0!important;
  color:#173652!important;
  letter-spacing:-.02em;
}
#card h3{
  color:#294b66!important;
  font-size:14px!important;
}
#card label{
  color:#38566e!important;
  font-size:12px!important;
  font-weight:800!important;
}
.hint{
  color:var(--ui-muted)!important;
  line-height:1.45!important;
}

/* ---------- Drawer / settings ---------- */
.drawer{
  background:rgba(255,255,255,.97)!important;
  backdrop-filter:blur(15px)!important;
  border-left:1px solid var(--ui-line)!important;
  box-shadow:-16px 0 40px rgba(16,45,70,.14)!important;
}
.drawer .panel{
  padding:18px!important;
}
.drawer .section{
  border-bottom:1px solid #edf2f6!important;
  padding:13px 0!important;
}
.drawer .section h3{
  color:#274961!important;
  margin:0 0 8px!important;
}

/* ---------- Main bottom toolbar ---------- */
#toolbarWrap{
  background:transparent!important;
  box-shadow:none!important;
}
.toolbar{
  background:rgba(255,255,255,.96)!important;
  border:1px solid rgba(211,225,235,.95)!important;
  border-radius:20px!important;
  box-shadow:0 14px 34px rgba(15,48,74,.15)!important;
  backdrop-filter:blur(15px)!important;
  padding:7px!important;
  gap:2px!important;
}
.tool{
  border-radius:12px!important;
  color:#37536a!important;
  transition:.14s ease!important;
}
.tool:hover{
  background:#edf7fc!important;
  transform:translateY(-1px);
}
.tool .ico{
  filter:saturate(.95);
}
.tool span,
.tool small{
  font-weight:800!important;
}

/* side toolbar version */
body.menu-left .toolbar,
body.menu-right .toolbar{
  border-radius:18px!important;
  padding:7px 5px!important;
}

/* ---------- Page/navigation cluster ---------- */
#pages{
  border-radius:15px!important;
  background:rgba(255,255,255,.96)!important;
  padding:5px!important;
}
#pages button{
  transition:.13s ease!important;
}
#pages button:hover{
  transform:translateY(-1px);
}

/* Give page label stronger hierarchy than utilities */
#pages .page,
#pages .pageName,
#pages .page-label{
  background:#f7fafc!important;
  border-radius:9px!important;
  padding:0 11px!important;
}

/* ---------- Board identity / upper-left status ---------- */
#webStatus{
  position:fixed!important;
  left:16px!important;
  top:16px!important;
  z-index:240!important;
  background:rgba(255,255,255,.95)!important;
  border:1px solid var(--ui-line)!important;
  box-shadow:var(--ui-shadow-soft)!important;
  border-radius:12px!important;
  padding:8px 11px!important;
  font-size:11px!important;
  color:#657b8d!important;
  backdrop-filter:blur(12px)!important;
}
#webStatus b{
  color:#25465f!important;
  font-size:12px!important;
}
#webBoardNav{
  position:fixed!important;
  left:16px!important;
  top:58px!important;
  z-index:239!important;
  display:inline-flex!important;
  gap:0!important;
  overflow:hidden!important;
  border:1px solid var(--ui-line)!important;
  border-radius:12px!important;
  box-shadow:var(--ui-shadow-soft)!important;
  background:rgba(255,255,255,.95)!important;
  backdrop-filter:blur(12px)!important;
}
#webBoardNav a,
#webBoardNav button{
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:transparent!important;
  color:#36546b!important;
  font-size:11px!important;
  font-weight:800!important;
  padding:8px 11px!important;
}
#webBoardNav a + a,
#webBoardNav a + button,
#webBoardNav button + a,
#webBoardNav button + button{
  border-left:1px solid #e6edf2!important;
}
#webBoardNav a:hover,
#webBoardNav button:hover{
  background:#edf7fc!important;
}

/* ---------- Widget header / chrome ---------- */
.widget .head{
  border:1px solid rgba(211,225,235,.95)!important;
  border-radius:11px!important;
  box-shadow:0 6px 17px rgba(15,47,72,.12)!important;
  background:rgba(255,255,255,.97)!important;
}
.widget .head .title{
  color:#2a495f!important;
  font-size:11px!important;
  font-weight:900!important;
}
.widget .head .actions button{
  border-radius:7px!important;
  color:#38556b!important;
}
.widget .head .actions button:hover{
  background:#edf5fa!important;
}

/* ---------- Text toolbar ---------- */
#textEditorBar{
  border:1px solid rgba(209,224,235,.96)!important;
  background:rgba(255,255,255,.98)!important;
  box-shadow:0 12px 34px rgba(15,47,72,.15)!important;
  border-radius:13px!important;
}
#textEditorBar button,
#textEditorBar select,
#textEditorBar input[type=number]{
  color:#2d4b61!important;
}
#textEditorBar .sep{
  background:#e8eef3!important;
}

/* ---------- Layers ---------- */
#layersPanel{
  border:1px solid var(--ui-line)!important;
  border-radius:17px!important;
  box-shadow:0 18px 45px rgba(14,43,67,.17)!important;
  background:rgba(255,255,255,.98)!important;
}
.layerItem{
  border-color:#e3ebf1!important;
  box-shadow:none!important;
}
.layerItem:hover{
  background:#f7fbfd!important;
}
.layerItem.selected{
  background:#edf8ff!important;
  border-color:#9bd0ee!important;
}

/* ---------- Widget library ---------- */
.kvLibraryItem{
  border:1px solid #dfe8ef!important;
  box-shadow:none!important;
}
.kvLibraryItem:hover{
  border-color:#a9d4ec!important;
  background:#f8fcff!important;
  box-shadow:0 8px 20px rgba(15,48,74,.09)!important;
}
.kvLibraryCat{
  transition:.13s ease!important;
}
.kvLibraryCat:hover{
  background:#edf7fc!important;
}

/* ---------- Presentation purity ---------- */
body.presenting #webStatus,
body.presentation-mode #webStatus,
body.fullscreen-mode #webStatus,
:fullscreen #webStatus,
body.presenting #webBoardNav,
body.presentation-mode #webBoardNav,
body.fullscreen-mode #webBoardNav,
:fullscreen #webBoardNav{
  display:none!important;
}

/* ---------- Small screens ---------- */
@media(max-width:720px){
  #webStatus{left:8px!important;top:8px!important}
  #webBoardNav{left:8px!important;top:49px!important}
  .toolbar{border-radius:16px!important}
}


/* =========================================================
   WEB V20.1 – NO OVERLAPPING MENUS
   ========================================================= */

/* Bottom menu layout: main toolbar owns the bottom center.
   Page/navigation controls sit above it, never on top of it. */
body.menu-bottom #toolbarWrap{
  left:50%!important;
  bottom:16px!important;
  transform:translateX(-50%)!important;
  max-width:calc(100vw - 32px)!important;
}
body.menu-bottom #pages{
  right:18px!important;
  left:auto!important;
  bottom:132px!important;
  transform:none!important;
  z-index:218!important;
}

/* If the main toolbar becomes tall because of a narrow screen,
   keep page controls clear of it. */
@media(max-width:1180px){
  body.menu-bottom #pages{
    bottom:142px!important;
  }
}
@media(max-width:760px){
  body.menu-bottom #pages{
    bottom:116px!important;
    right:8px!important;
    max-width:calc(100vw - 16px)!important;
    overflow:auto!important;
  }
}

/* Left/right menu variants keep page controls opposite the toolbar. */
body.menu-left #pages{
  right:18px!important;
  left:auto!important;
  bottom:18px!important;
}
body.menu-right #pages{
  left:18px!important;
  right:auto!important;
  bottom:18px!important;
}

/* Top-left identity/navigation becomes one unified horizontal component. */
#webStatus{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  min-height:40px!important;
  padding:0 11px!important;
  white-space:nowrap!important;
}
#webBoardNav{
  top:16px!important;
  left:auto!important;
  right:16px!important;
  min-height:40px!important;
  align-items:center!important;
}

/* Reduce visual weight of both clusters. */
#webStatus,
#webBoardNav{
  border-radius:12px!important;
  box-shadow:0 7px 20px rgba(18,49,76,.10)!important;
}

/* On smaller screens stack deliberately rather than collide. */
@media(max-width:900px){
  #webStatus{
    left:8px!important;
    top:8px!important;
    max-width:calc(100vw - 16px)!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  #webBoardNav{
    left:8px!important;
    right:auto!important;
    top:54px!important;
  }
}

/* Presentation remains completely clean. */
body.presenting #webStatus,
body.presentation-mode #webStatus,
body.fullscreen-mode #webStatus,
:fullscreen #webStatus,
body.presenting #webBoardNav,
body.presentation-mode #webBoardNav,
body.fullscreen-mode #webBoardNav,
:fullscreen #webBoardNav,
body.presenting #pages,
body.presentation-mode #pages,
body.fullscreen-mode #pages,
:fullscreen #pages{
  display:none!important;
}


/* =========================================================
   WEB V20.2 – ONE HEADER, NO REDUNDANT MENUS
   ========================================================= */

/* Retire every old status/nav layout rule by using a new single parent. */
#boardHeader{
  position:fixed!important;
  left:16px!important;
  top:16px!important;
  z-index:245!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:0!important;
  height:40px!important;
  max-width:calc(100vw - 150px)!important;
  overflow:hidden!important;
  background:rgba(255,255,255,.96)!important;
  border:1px solid #dbe6ee!important;
  border-radius:12px!important;
  box-shadow:0 8px 22px rgba(18,49,76,.11)!important;
  backdrop-filter:blur(12px)!important;
}

/* Single back button is enough. "Forside" was redundant from inside a board. */
#boardBack,
#boardHeader .boardHeaderAction{
  position:static!important;
  flex:0 0 auto!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  align-self:stretch!important;
  min-height:0!important;
  padding:0 12px!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#34536a!important;
  text-decoration:none!important;
  font-size:11px!important;
  font-weight:850!important;
  box-shadow:none!important;
  white-space:nowrap!important;
}
#boardBack:hover,
#boardHeader .boardHeaderAction:hover{
  background:#edf7fc!important;
}
#boardHeader .boardHeaderAction{
  border-left:1px solid #e5edf3!important;
  cursor:pointer!important;
}

/* Status is now content INSIDE the same bar, never its own floating menu. */
#boardHeader #webStatus{
  position:static!important;
  inset:auto!important;
  z-index:auto!important;
  flex:1 1 auto!important;
  min-width:0!important;
  height:100%!important;
  display:flex!important;
  align-items:center!important;
  gap:5px!important;
  padding:0 11px!important;
  margin:0!important;
  border:0!important;
  border-left:1px solid #e5edf3!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  white-space:nowrap!important;
  overflow:hidden!important;
}
#boardHeader #webBoardName{
  color:#213f58!important;
  font-size:12px!important;
  font-weight:900!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#boardHeader #webSaveState{
  color:#7a8d9d!important;
  font-size:10px!important;
  font-weight:650!important;
  flex:0 0 auto!important;
}
#boardHeader .statusSep{
  color:#a4b1bc!important;
  flex:0 0 auto!important;
}

/* Old webBoardNav is intentionally gone. If stale cached markup exists, hide it. */
#webBoardNav{
  display:none!important;
}

/* Topbar now only owns fullscreen + overflow/settings, top-right. */
#topbar{
  left:auto!important;
  right:16px!important;
  top:16px!important;
  width:auto!important;
  justify-content:flex-end!important;
  pointer-events:none!important;
}
#topbar .group{
  pointer-events:auto!important;
}
#topbar .group:empty{
  display:none!important;
}

/* Keep the page controls and main tool palette physically separate. */
body.menu-bottom #pages{
  right:16px!important;
  left:auto!important;
  transform:none!important;
}
body.menu-bottom #toolbarWrap{
  left:50%!important;
  transform:translateX(-50%)!important;
}

/* Small screens: one header row still; truncate board name instead of stacking menus. */
@media(max-width:720px){
  #boardHeader{
    left:8px!important;
    top:8px!important;
    max-width:calc(100vw - 116px)!important;
    height:38px!important;
  }
  #boardBack{
    padding:0 9px!important;
  }
  #boardHeader #webSaveState,
  #boardHeader .statusSep{
    display:none!important;
  }
  #topbar{
    right:8px!important;
    top:8px!important;
  }
}

/* Absolutely no board chrome in presentation/fullscreen. */
body.presenting #boardHeader,
body.presentation-mode #boardHeader,
body.fullscreen-mode #boardHeader,
:fullscreen #boardHeader{
  display:none!important;
}


/* =========================================================
   WEB V20.3 – COMPACT PAGE NAVIGATION
   ========================================================= */

/* The old floating page panel is retired. */
#pages{display:none!important}

/* Page controls are now part of the main toolbar. */
.toolbarDivider{
  width:1px;
  height:48px;
  background:#e4edf3;
  margin:0 5px;
  flex:0 0 auto;
}
#pageCompact{
  display:flex;
  align-items:center;
  gap:2px;
  flex:0 0 auto;
  height:58px;
  padding:0 2px;
}
#pageCompact .pageIconBtn{
  width:36px!important;
  min-width:36px!important;
  height:36px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border:0!important;
  border-radius:10px!important;
  background:transparent!important;
  color:#35536b!important;
  font-size:18px!important;
  font-weight:900!important;
  box-shadow:none!important;
  cursor:pointer!important;
}
#pageCompact .pageIconBtn:hover{
  background:#edf7fc!important;
}
#pageCompact .pageIconBtn.add{
  color:#1479b4!important;
}
#pageCompact .pageCounter{
  min-width:44px;
  padding:0 6px;
  text-align:center;
  color:#2c485e;
  font-size:12px;
  font-weight:900;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* The "pages" manager icon is intentionally icon-only in the main toolbar. */
#pageCompact #pageManagerBtn{
  font-size:16px!important;
  margin-right:2px;
}

/* Snap/grid are settings, not navigation, so they live in the drawer. */
.viewOptionRow{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:10px;
}
.compactSettingBtn{
  min-height:34px!important;
  padding:0 10px!important;
  font-size:11px!important;
}
.compactSettingBtn.active{
  background:#e8f6ff!important;
  border-color:#b9e1f7!important;
  color:#1677b1!important;
}

/* Main toolbar can remain one coherent surface even with page navigation. */
.toolbar{
  align-items:center!important;
}
body.menu-bottom .toolbar{
  max-width:calc(100vw - 32px)!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scrollbar-width:none;
}
body.menu-bottom .toolbar::-webkit-scrollbar{display:none}

/* Side menu: compact page controls stack neatly at the end. */
body.menu-left .toolbarDivider,
body.menu-right .toolbarDivider{
  width:52px;
  height:1px;
  margin:5px auto;
}
body.menu-left #pageCompact,
body.menu-right #pageCompact{
  width:72px;
  height:auto;
  min-height:0;
  flex-wrap:wrap;
  justify-content:center;
  padding:3px 0;
}
body.menu-left #pageCompact .pageCounter,
body.menu-right #pageCompact .pageCounter{
  order:-1;
  width:100%;
  min-width:0;
  padding:3px 0;
}

/* No editing page controls in presentation. */
body.presenting #pageCompact,
body.presentation-mode #pageCompact,
body.fullscreen-mode #pageCompact,
:fullscreen #pageCompact{
  display:none!important;
}


/* =========================================================
   WEB V21 – PROFESSIONAL BACKGROUND MANAGER
   ========================================================= */

.kvBgManager{
  display:flex;
  flex-direction:column;
  gap:13px;
}
.kvBgTop{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}
.kvBgTop h2{margin-bottom:3px!important}
.kvBgCurrent{
  display:grid;
  grid-template-columns:140px 1fr;
  gap:13px;
  align-items:center;
  padding:11px;
  border:1px solid #dce7ef;
  border-radius:14px;
  background:#f9fbfd;
}
.kvBgPreview{
  height:82px;
  border-radius:11px;
  background-size:cover;
  background-position:center;
  border:1px solid #d8e4ec;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
}
.kvBgCurrent strong{display:block;color:#183a56}
.kvBgCurrent small{display:block;color:#758b9d;margin-top:3px;line-height:1.35}
.kvBgTabs{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.kvBgTab{
  border:1px solid #d9e5ee;
  background:#fff;
  color:#476178;
  padding:7px 10px;
  border-radius:999px;
  cursor:pointer;
  font-size:11px;
  font-weight:850;
}
.kvBgTab.active{
  background:#e8f6ff;
  border-color:#9ed4f1;
  color:#1678b3;
}
.kvBgGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
}
.kvBgCard{
  position:relative;
  min-height:116px;
  border:1px solid #dce7ef;
  border-radius:13px;
  overflow:hidden;
  cursor:pointer;
  background:#eef5fa;
  box-shadow:none;
}
.kvBgCard:hover{
  border-color:#9ed2ee;
  box-shadow:0 8px 22px rgba(15,48,74,.09);
}
.kvBgCard.active{
  outline:2px solid #655cff;
  outline-offset:1px;
}
.kvBgThumb{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
}
.kvBgCard span{
  position:absolute;
  left:8px;
  right:8px;
  bottom:8px;
  display:inline-flex;
  width:max-content;
  max-width:calc(100% - 16px);
  padding:5px 7px;
  border-radius:8px;
  background:rgba(9,36,62,.72);
  color:white;
  font-size:10px;
  font-weight:850;
  backdrop-filter:blur(8px);
}
.kvBgUpload{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  align-items:center;
  padding:12px;
  border:1px dashed #bad2e1;
  border-radius:13px;
  background:#f8fbfd;
}
.kvBgUpload input[type=file]{
  margin:0!important;
  min-width:0;
}
.kvBgControls{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.kvBgControl{
  border:1px solid #dfe8ef;
  border-radius:12px;
  padding:11px;
  background:#fbfdff;
}
.kvBgControl label{
  display:grid!important;
  grid-template-columns:1fr auto;
  gap:8px;
  align-items:center;
  margin:0!important;
}
.kvBgControl output{
  color:#1979b2;
  font-weight:900;
}
.kvBgControl input[type=range]{
  width:100%;
  margin:8px 0 0;
}
.kvBgPosition{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
  margin-top:8px;
}
.kvBgPosition button{
  min-height:32px;
  border:1px solid #dbe6ee;
  background:white;
  border-radius:8px;
  cursor:pointer;
  font-size:11px;
  font-weight:750;
  color:#466177;
}
.kvBgPosition button.active{
  background:#e8f6ff;
  border-color:#9bd1ef;
  color:#1677b1;
}
.kvBgActions{
  display:flex;
  justify-content:flex-end;
  gap:7px;
  flex-wrap:wrap;
}
@media(max-width:700px){
  .kvBgGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kvBgCurrent{grid-template-columns:1fr}
  .kvBgControls{grid-template-columns:1fr}
}


/* =========================================================
   WEB V22 – UNDO / REDO
   ========================================================= */
#historyControls{
  position:fixed;
  right:78px;
  top:16px;
  z-index:244;
  display:flex;
  height:40px;
  overflow:hidden;
  border:1px solid #dbe6ee;
  border-radius:12px;
  background:rgba(255,255,255,.96);
  box-shadow:0 8px 22px rgba(18,49,76,.10);
  backdrop-filter:blur(12px);
}
#historyControls button{
  width:40px;height:40px;padding:0;border:0;border-radius:0;
  background:transparent;color:#35536b;font-size:18px;font-weight:900;
  cursor:pointer;box-shadow:none
}
#historyControls button+button{border-left:1px solid #e5edf3}
#historyControls button:hover:not(:disabled){background:#edf7fc}
#historyControls button:disabled{opacity:.28;cursor:default}
body.presenting #historyControls,
body.presentation-mode #historyControls,
body.fullscreen-mode #historyControls,
:fullscreen #historyControls{display:none!important}
@media(max-width:720px){
  #historyControls{right:72px;top:8px;height:38px}
  #historyControls button{width:36px;height:38px}
}

/* V24 unified board chrome */
#historyControls{display:none!important}
#topbar{position:fixed!important;top:16px!important;right:16px!important;left:auto!important;width:auto!important;z-index:246!important;display:block!important;pointer-events:none!important}
#topbar #boardTopActions{pointer-events:auto!important;display:flex!important;gap:0!important;height:40px!important;overflow:hidden!important;border:1px solid #dbe6ee!important;border-radius:12px!important;background:rgba(255,255,255,.96)!important;box-shadow:0 8px 22px rgba(18,49,76,.10)!important;backdrop-filter:blur(12px)!important}
#topbar #boardTopActions .ib{width:40px!important;min-width:40px!important;height:40px!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:#35536b!important;font-size:16px!important}
#topbar #boardTopActions .ib+.ib{border-left:1px solid #e5edf3!important}
#topbar #boardTopActions .ib:hover{background:#edf7fc!important}
#topbar #boardTopActions .ib:disabled{opacity:.28!important}
#boardHeader{max-width:calc(100vw - 250px)!important}
@media(max-width:720px){#topbar{top:8px!important;right:8px!important}#topbar #boardTopActions{height:38px!important}#topbar #boardTopActions .ib{width:34px!important;min-width:34px!important;height:38px!important}#boardHeader{max-width:calc(100vw - 195px)!important}}
body.presenting #topbar,body.presentation-mode #topbar,body.fullscreen-mode #topbar,:fullscreen #topbar{display:none!important}

/* =========================================================
   WEB V33 – SYNC STATUS / OFFLINE / CONFLICT
   ========================================================= */
#webSaveState[data-sync="saving"]{color:#137db6!important}
#webSaveState[data-sync="saved"]{color:#23835e!important}
#webSaveState[data-sync="offline"]{color:#b16a15!important}
#webSaveState[data-sync="error"],#webSaveState[data-sync="conflict"]{color:#b74755!important}
#mkOfflineBar{
  position:fixed;left:50%;top:68px;transform:translateX(-50%) translateY(-8px);
  z-index:10060;display:none;max-width:min(620px,calc(100vw - 28px));
  padding:9px 13px;border-radius:11px;background:#fff7e7;border:1px solid #f0d69b;
  color:#825a16;font-size:11px;font-weight:800;box-shadow:0 10px 28px rgba(65,48,10,.12)
}
#mkOfflineBar.show{display:block;transform:translateX(-50%) translateY(0)}
#mkConflictBar{
  position:fixed;left:50%;top:70px;transform:translateX(-50%) translateY(-10px);
  z-index:10070;display:none;align-items:center;justify-content:space-between;gap:20px;
  width:min(800px,calc(100vw - 30px));padding:13px 14px 13px 16px;
  border-radius:14px;background:#fff;border:1px solid #efc9cf;
  box-shadow:0 18px 45px rgba(50,22,29,.16)
}
#mkConflictBar.show{display:flex;transform:translateX(-50%) translateY(0)}
.mkConflictText{display:flex;flex-direction:column;gap:2px}.mkConflictText strong{font-size:12px;color:#9b3f4a}.mkConflictText span{font-size:10px;color:#71879a}
.mkConflictActions{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.mkConflictActions button{border:1px solid #dbe6ee;background:#fff;color:#35536b;border-radius:9px;padding:8px 10px;font-weight:800;cursor:pointer}
.mkConflictActions button.primary{border:0;background:linear-gradient(135deg,#0aa9ef,#6657e8);color:#fff}
#mkDismissConflict{width:32px;padding:8px 0!important}
body.presenting #mkOfflineBar,body.presentation-mode #mkOfflineBar,body.fullscreen-mode #mkOfflineBar,:fullscreen #mkOfflineBar,
body.presenting #mkConflictBar,body.presentation-mode #mkConflictBar,body.fullscreen-mode #mkConflictBar,:fullscreen #mkConflictBar{display:none!important}
@media(max-width:700px){#mkConflictBar{align-items:flex-start;flex-direction:column}.mkConflictActions{width:100%;justify-content:flex-start}}

/* V36 – adminstyrte bakgrunner */
.mkManagedBackgrounds{margin-top:12px;padding-top:11px;border-top:1px solid rgba(100,130,150,.18)}
.mkManagedTitle{font-size:10px;font-weight:900;color:#637d91;text-transform:uppercase;letter-spacing:.08em;margin-bottom:7px}
.mkManagedGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.mkManagedBg{border:1px solid #dce7ef;background:#fff;border-radius:9px;padding:5px;cursor:pointer;color:#36536b;min-width:0}
.mkManagedBg:hover{border-color:#8bcff0;box-shadow:0 4px 12px rgba(23,87,126,.08)}
.mkManagedSwatch{display:block;height:42px;border-radius:6px;border:1px solid rgba(30,70,100,.08);margin-bottom:4px}
.mkManagedBg small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px;font-weight:800}


/* =========================================================
   V40 – DASHBOARD PREVIEW MODE
   Renders the real first board page inside dashboard thumbnails.
   ========================================================= */
body.preview-mode{
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  background:#eef5f9!important;
}
body.preview-mode #boardHeader,
body.preview-mode #topbar,
body.preview-mode #toolbarWrap,
body.preview-mode #quickActions,
body.preview-mode #textEditorBar,
body.preview-mode #layersPanel,
body.preview-mode #toast,
body.preview-mode .drawer,
body.preview-mode .modal,
body.preview-mode #presentationMenuToggle,
body.preview-mode #presentationPageHint,
body.preview-mode .drawControls,
body.preview-mode .widgetToolbar,
body.preview-mode .widgetChrome,
body.preview-mode .widgetHandle,
body.preview-mode .resizeHandle,
body.preview-mode .rotateHandle{
  display:none!important;
}
body.preview-mode #viewport{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  overflow:hidden!important;
  background:#eef5f9!important;
}
body.preview-mode #stage{
  pointer-events:none!important;
}
body.preview-mode #board,
body.preview-mode #board *{
  pointer-events:none!important;
  user-select:none!important;
}
body.preview-mode .widget,
body.preview-mode [data-widget],
body.preview-mode .selected,
body.preview-mode .isSelected{
  outline:none!important;
  box-shadow:none!important;
}
body.preview-mode #drawCanvas{
  pointer-events:none!important;
}

/* V65 – Mattestykker: skalerbar Countdown-layout + utregningsark */
.widget.mathdown-widget{min-width:560px;min-height:430px}
.widget.mathdown-widget .body{padding:0!important;overflow:hidden!important;display:block!important;container-type:size}
.widget.mathdown-widget .body>*{width:100%;height:100%;min-width:0;min-height:0}

.widget.mathdown-widget .mkMathStage{
  --mk-green:#35cc78;--mk-yellow:#f4c747;--mk-red:#ef4b51;
  box-sizing:border-box;width:100%;height:100%;position:relative;overflow:hidden;
  display:grid;grid-template-rows:auto minmax(0,1fr);gap:clamp(12px,2.2cqh,28px);
  padding:clamp(16px,3cqh,34px) clamp(18px,2.6cqw,38px) clamp(16px,2.4cqh,30px);
  color:#fff;background:radial-gradient(circle at 50% -28%,rgba(87,180,235,.5),transparent 42%),linear-gradient(145deg,#082a54 0%,#145e97 52%,#08284e 100%);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
.widget.mathdown-widget .mkMathStage:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.055),transparent 30%,transparent 72%,rgba(255,255,255,.03))}
.widget.mathdown-widget .mkMathTop{position:relative;z-index:1;display:grid;gap:clamp(12px,2.6cqh,30px);justify-items:center}
.widget.mathdown-widget .mkMathTiles{width:100%;display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:clamp(8px,1.25cqw,18px)!important}
.widget.mathdown-widget .mkMathTile{box-sizing:border-box!important;width:100%!important;min-width:0!important;aspect-ratio:1.28/1;display:grid!important;place-items:center!important;border:clamp(3px,.38cqw,5px) solid #061a33!important;border-radius:clamp(5px,.65cqw,9px)!important;background:linear-gradient(180deg,#fff,#edf1f5)!important;color:#0b2e59!important;box-shadow:0 clamp(5px,1.1cqh,12px) clamp(12px,2.2cqh,28px) rgba(0,0,0,.3),inset 0 1px #fff!important;font-size:clamp(26px,5.2cqw,68px)!important;font-weight:950!important;line-height:1!important;text-shadow:none!important;opacity:1!important}
.widget.mathdown-widget .mkMathTile.big{background:linear-gradient(180deg,#fff5cf,#ecc85f)!important;color:#3b2900!important}
.widget.mathdown-widget .mkMathTile.small{background:linear-gradient(180deg,#fff,#e9eff6)!important;color:#0b315f!important}
.widget.mathdown-widget .mkMathTile.empty{color:#7b8590!important;font-size:clamp(10px,1.1cqw,15px)!important;letter-spacing:.11em!important}

.widget.mathdown-widget .mkMathTargetPanel{box-sizing:border-box;width:clamp(210px,30cqw,390px)!important;height:clamp(74px,13cqh,132px)!important;padding:6px 16px!important;display:grid!important;place-items:center!important;border:clamp(3px,.38cqw,5px) solid #061a33!important;border-radius:clamp(5px,.65cqw,9px)!important;background:linear-gradient(180deg,#fff,#f0f2f5)!important;box-shadow:0 clamp(7px,1.3cqh,15px) clamp(16px,2.8cqh,32px) rgba(0,0,0,.3),inset 0 1px #fff!important;text-align:center!important}
.widget.mathdown-widget .mkMathTargetPanel strong{display:block!important;font-size:clamp(40px,6.6cqw,86px)!important;line-height:1!important;font-weight:950!important;letter-spacing:.025em!important;color:#071f42!important;font-variant-numeric:tabular-nums!important}
.widget.mathdown-widget .mkMathTargetPanel:not(.revealed) strong{color:#b5bdc6!important}

.widget.mathdown-widget .mkMathBottom{position:relative;z-index:1;min-height:0;display:grid!important;grid-template-columns:minmax(220px,1fr) clamp(190px,24cqw,330px) minmax(170px,1fr)!important;align-items:center!important;gap:clamp(20px,3.2cqw,52px)!important}
.widget.mathdown-widget .mkMathDrawControls{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:clamp(10px,1.8cqh,18px)!important;visibility:visible!important}
.widget.mathdown-widget .mkMathDrawControls.hidden{visibility:hidden!important;pointer-events:none!important}
.widget.mathdown-widget .mkMathDrawBtn{box-sizing:border-box;width:100%!important;display:flex!important;align-items:center!important;gap:clamp(10px,1.2cqw,16px)!important;padding:clamp(10px,1.45cqh,16px) clamp(11px,1.25cqw,16px)!important;border:2px solid rgba(255,255,255,.6)!important;border-radius:clamp(9px,1cqw,13px)!important;background:linear-gradient(180deg,#fff,#eef3f7)!important;color:#0b315f!important;box-shadow:0 9px 20px rgba(0,0,0,.22)!important;cursor:pointer!important;text-align:left!important;transition:.15s ease!important}
.widget.mathdown-widget .mkMathDrawBtn:hover{transform:translateY(-2px)!important;box-shadow:0 13px 28px rgba(0,0,0,.28)!important}
.widget.mathdown-widget .mkMathBtnIcon{box-sizing:border-box;flex:0 0 clamp(54px,6cqw,82px)!important;height:clamp(44px,6.5cqh,66px)!important;display:grid!important;place-items:center!important;border-radius:8px!important;background:#0c3c70!important;color:#fff!important;font-size:clamp(15px,1.65cqw,22px)!important;font-weight:950!important;box-shadow:inset 0 -3px rgba(0,0,0,.15)!important}
.widget.mathdown-widget .mkMathDrawBtn.big .mkMathBtnIcon{background:#e4bc43!important;color:#332500!important}
.widget.mathdown-widget .mkMathBtnText{display:block!important;min-width:0!important}.widget.mathdown-widget .mkMathBtnText strong{display:block!important;font-size:clamp(14px,1.45cqw,20px)!important;line-height:1.1!important;color:#0b315f!important}.widget.mathdown-widget .mkMathBtnText small{display:block!important;margin-top:5px!important;font-size:clamp(9px,.9cqw,13px)!important;font-weight:700!important;color:#67727e!important}.widget.mathdown-widget .mkMathDrawBtn:disabled{opacity:.48!important;cursor:not-allowed!important;transform:none!important}

.widget.mathdown-widget .mkMathCountdownBlock{justify-self:center!important;display:flex!important;flex-direction:column!important;align-items:center!important;gap:clamp(6px,1cqh,10px)!important}
.widget.mathdown-widget .mkMathCountdownLabel{font-size:clamp(11px,1.25cqw,17px)!important;font-weight:950!important;letter-spacing:.16em!important;color:#eaf5ff!important}
.widget.mathdown-widget .mkMathTimer{--progress:360deg;--timer-color:var(--mk-green);box-sizing:border-box;width:clamp(160px,20cqw,265px)!important;height:clamp(160px,20cqw,265px)!important;aspect-ratio:1!important;border-radius:50%!important;display:grid!important;place-items:center!important;position:relative!important;padding:clamp(11px,1.4cqw,18px)!important;background:conic-gradient(from 0deg,var(--timer-color) 0 var(--progress),rgba(255,255,255,.13) var(--progress) 360deg)!important;box-shadow:0 18px 38px rgba(0,0,0,.34),0 0 0 5px rgba(255,255,255,.055)!important;transition:background .2s linear!important}
.widget.mathdown-widget .mkMathCountdownBlock.good .mkMathTimer{--timer-color:var(--mk-green)}.widget.mathdown-widget .mkMathCountdownBlock.warn .mkMathTimer{--timer-color:var(--mk-yellow)}.widget.mathdown-widget .mkMathCountdownBlock.danger .mkMathTimer{--timer-color:var(--mk-red)}
.widget.mathdown-widget .mkMathTimer:before{content:""!important;position:absolute!important;inset:-7px!important;border-radius:50%!important;border:2px solid rgba(255,255,255,.56)!important;box-shadow:0 0 0 4px rgba(5,21,46,.52)!important}
.widget.mathdown-widget .mkMathTimerTicks{position:absolute!important;inset:-4px!important;border-radius:50%!important;background:repeating-conic-gradient(from -1deg,rgba(255,255,255,.94) 0 1.4deg,transparent 1.4deg 6deg)!important;-webkit-mask:radial-gradient(circle,transparent 71%,#000 72% 76%,transparent 77%)!important;mask:radial-gradient(circle,transparent 71%,#000 72% 76%,transparent 77%)!important;pointer-events:none!important}
.widget.mathdown-widget .mkMathTimerInner{box-sizing:border-box;width:100%!important;height:100%!important;border-radius:50%!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;background:radial-gradient(circle at 50% 35%,#185487,#092b57 72%)!important;box-shadow:inset 0 0 34px rgba(0,0,0,.4)!important;position:relative!important;z-index:2!important}
.widget.mathdown-widget .mkMathTimerInner strong{font-size:clamp(52px,7cqw,92px)!important;line-height:.9!important;font-weight:950!important;color:#fff!important;font-variant-numeric:tabular-nums!important}.widget.mathdown-widget .mkMathTimerInner span{margin-top:6px!important;font-size:clamp(9px,.9cqw,13px)!important;letter-spacing:.17em!important;color:#cfe7fb!important;font-weight:950!important}
.widget.mathdown-widget .mkMathTimerControls{height:clamp(32px,4.5cqh,46px)!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important}.widget.mathdown-widget .mkMathMiniBtn{border:1px solid rgba(255,255,255,.42)!important;border-radius:8px!important;padding:clamp(6px,.75cqh,9px) clamp(11px,1.15cqw,16px)!important;background:rgba(255,255,255,.14)!important;color:#fff!important;font-size:clamp(10px,1cqw,14px)!important;font-weight:850!important;cursor:pointer!important}.widget.mathdown-widget .mkMathMiniBtn.primary{background:#fff!important;color:#0b3567!important}.widget.mathdown-widget .mkMathMiniBtn:disabled{opacity:.42!important;cursor:not-allowed!important}.widget.mathdown-widget .mkMathWaiting{font-size:clamp(9px,.9cqw,13px)!important;color:#cde1f4!important;white-space:nowrap!important}
.widget.mathdown-widget .mkMathRoundControl{justify-self:end!important}.widget.mathdown-widget .mkMathNewRound{display:inline-flex!important;align-items:center!important;gap:9px!important;border:2px solid rgba(255,255,255,.55)!important;border-radius:clamp(9px,1cqw,13px)!important;padding:clamp(11px,1.4cqh,16px) clamp(15px,1.7cqw,24px)!important;background:rgba(5,27,58,.68)!important;color:#fff!important;font-size:clamp(12px,1.15cqw,16px)!important;font-weight:900!important;cursor:pointer!important;box-shadow:0 9px 20px rgba(0,0,0,.23)!important;backdrop-filter:blur(5px)!important}.widget.mathdown-widget .mkMathNewRound:hover{background:rgba(9,47,88,.92)!important}.widget.mathdown-widget .mkMathResetIcon{font-size:1.35em!important;line-height:1!important}.widget.mathdown-widget .mkMathHint{position:absolute!important;left:28px!important;right:28px!important;bottom:clamp(7px,1cqh,12px)!important;text-align:center!important;font-size:clamp(8px,.75cqw,11px)!important;color:#cde1f3!important;z-index:1!important;pointer-events:none!important}

/* Når tiden er ute blir nederste del til et ruteark. Tall og måltall blir stående. */
.widget.mathdown-widget .mkMathReview{position:relative;z-index:1;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);gap:clamp(8px,1.4cqh,14px)}
.widget.mathdown-widget .mkMathReviewBar{display:flex;align-items:center;justify-content:space-between;gap:20px}.widget.mathdown-widget .mkMathReviewTitle{font-size:clamp(12px,1.25cqw,18px);font-weight:950;letter-spacing:.14em;color:#eaf5ff}
.widget.mathdown-widget .mkMathGridPaper{position:relative;min-height:0;border:clamp(3px,.32cqw,4px) solid #071a33;border-radius:clamp(8px,.85cqw,12px);overflow:hidden;background-color:#fff;background-image:linear-gradient(rgba(55,126,187,.24) 1px,transparent 1px),linear-gradient(90deg,rgba(55,126,187,.24) 1px,transparent 1px),linear-gradient(rgba(55,126,187,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(55,126,187,.14) 1px,transparent 1px);background-size:clamp(28px,3cqw,42px) clamp(28px,3cqw,42px),clamp(28px,3cqw,42px) clamp(28px,3cqw,42px),clamp(14px,1.5cqw,21px) clamp(14px,1.5cqw,21px),clamp(14px,1.5cqw,21px) clamp(14px,1.5cqw,21px);box-shadow:0 14px 32px rgba(0,0,0,.3),inset 0 1px #fff}
.widget.mathdown-widget .mkMathGridPaper:before{content:"";position:absolute;left:clamp(32px,4.8cqw,68px);top:0;bottom:0;width:2px;background:rgba(220,68,79,.36)}
.widget.mathdown-widget .mkMathGridHint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:72%;padding:9px 14px;border-radius:10px;background:rgba(255,255,255,.88);color:#6b7d8f;font-size:clamp(10px,.95cqw,14px);font-weight:750;text-align:center;pointer-events:none;box-shadow:0 4px 16px rgba(30,70,110,.09)}

@container (max-width:760px){
  .widget.mathdown-widget .mkMathStage{padding:16px 18px 18px;gap:14px}.widget.mathdown-widget .mkMathTiles{gap:8px!important}.widget.mathdown-widget .mkMathBottom{grid-template-columns:minmax(175px,1fr) 175px minmax(145px,1fr)!important;gap:18px!important}.widget.mathdown-widget .mkMathTimer{width:145px!important;height:145px!important}.widget.mathdown-widget .mkMathTimerInner strong{font-size:48px!important}
}

/* =========================================================
   WEB V68 – DISCREET BOARD HEADER + RETRACTABLE MAIN MENU
   ========================================================= */

/* Tavleinformasjonen ligger som en liten flik langs venstre kant.
   Hover/fokus åpner hele feltet. Klikk på fliken kan feste det åpent. */
#boardHeader{
  left:0!important;
  top:16px!important;
  width:42px!important;
  max-width:min(620px,calc(100vw - 150px))!important;
  height:42px!important;
  border-radius:0 13px 13px 0!important;
  overflow:hidden!important;
  transition:width .24s cubic-bezier(.2,.8,.2,1),box-shadow .2s ease!important;
  will-change:width;
}
#boardHeader:hover,
#boardHeader:focus-within,
#boardHeader.header-pinned{
  width:min(560px,calc(100vw - 150px))!important;
  box-shadow:0 12px 30px rgba(18,49,76,.16)!important;
}
#boardHeaderPeek{
  width:42px!important;
  min-width:42px!important;
  height:42px!important;
  flex:0 0 42px!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  border:0!important;
  border-right:1px solid #e5edf3!important;
  background:linear-gradient(180deg,#fafdff,#eef5f9)!important;
  color:#35556c!important;
  font-size:25px!important;
  font-weight:700!important;
  line-height:1!important;
  cursor:pointer!important;
}
#boardHeader:hover #boardHeaderPeek,
#boardHeader:focus-within #boardHeaderPeek,
#boardHeader.header-pinned #boardHeaderPeek{
  color:#2869a8!important;
  background:#edf7fc!important;
}
#boardHeader #boardBack,
#boardHeader #webStatus{
  opacity:0!important;
  visibility:hidden!important;
  transform:translateX(-7px)!important;
  transition:opacity .16s ease .04s,transform .2s ease .04s,visibility 0s linear .2s!important;
}
#boardHeader:hover #boardBack,
#boardHeader:hover #webStatus,
#boardHeader:focus-within #boardBack,
#boardHeader:focus-within #webStatus,
#boardHeader.header-pinned #boardBack,
#boardHeader.header-pinned #webStatus{
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
  transition-delay:.04s!important;
}
#boardHeader #boardBack{padding:0 13px!important}
#boardHeader #webStatus{padding-right:15px!important}

/* Hovedmenyen kan nå trekkes inn/ut også uten fullskjerm. */
#presentationMenuToggle{
  display:block!important;
  width:34px;
  height:58px;
  padding:0;
  border:1px solid rgba(255,255,255,.55);
  border-radius:12px;
  background:rgba(19,45,68,.88);
  color:#fff;
  box-shadow:0 8px 24px rgba(10,32,49,.24);
  backdrop-filter:blur(10px);
  font-size:22px;
  font-weight:800;
  line-height:1;
  opacity:.9;
  transition:opacity .18s ease,transform .18s ease,background .18s ease;
}
#presentationMenuToggle:hover{
  opacity:1;
  background:rgba(27,65,94,.96);
}
body.menu-bottom #presentationMenuToggle{
  left:50%;
  right:auto;
  top:auto;
  bottom:4px;
  transform:translateX(-50%);
  width:60px;
  height:28px;
  border-radius:12px 12px 5px 5px;
}
body.menu-left #presentationMenuToggle{
  left:4px;
  right:auto;
  top:50%;
  bottom:auto;
  transform:translateY(-50%);
  width:28px;
  height:60px;
  border-radius:5px 12px 12px 5px;
}
body.menu-right #presentationMenuToggle{
  left:auto;
  right:4px;
  top:50%;
  bottom:auto;
  transform:translateY(-50%);
  width:28px;
  height:60px;
  border-radius:12px 5px 5px 12px;
}

/* Gjelder både vanlig tavle og fullskjerm/presentasjon. */
body.menu-collapsed.menu-bottom #toolbarWrap{
  bottom:-150px!important;
  opacity:0!important;
  pointer-events:none!important;
}
body.menu-collapsed.menu-left #toolbarWrap{
  left:-130px!important;
  opacity:0!important;
  pointer-events:none!important;
}
body.menu-collapsed.menu-right #toolbarWrap{
  right:-130px!important;
  opacity:0!important;
  pointer-events:none!important;
}
#toolbarWrap{
  transition:left .25s ease,right .25s ease,bottom .25s ease,opacity .2s ease!important;
}

/* I vanlig modus beholdes toppknappene tilgjengelige selv om hovedmenyen er skjult. */
body:not(.presentation-mode).menu-collapsed #topbar .ib{
  opacity:1!important;
  pointer-events:auto!important;
}

/* På små skjermer holder fliken seg liten, men kan fortsatt åpnes. */
@media(max-width:720px){
  #boardHeader{left:0!important;top:8px!important;width:40px!important;height:40px!important;max-width:calc(100vw - 112px)!important}
  #boardHeaderPeek{width:40px!important;min-width:40px!important;height:40px!important;flex-basis:40px!important}
  #boardHeader:hover,#boardHeader:focus-within,#boardHeader.header-pinned{width:calc(100vw - 112px)!important}
}

body.preview-mode #presentationMenuToggle{display:none!important}

/* =========================================================
   WEB V70 – HOVERMENYER MED PIN (STABILITETSFIKS)
   ========================================================= */

/* Den gamle manuelle uttrekksknappen er erstattet av hover-fliker. */
#presentationMenuToggle{display:none!important}

/* ----- Hovedmeny ----- */
#toolbarWrap{overflow:visible!important}
#mainMenuPeek{
  position:absolute;z-index:3;border:1px solid rgba(255,255,255,.58);background:rgba(17,45,69,.9);color:#fff;
  box-shadow:0 8px 24px rgba(10,32,49,.22);backdrop-filter:blur(10px);cursor:pointer;font-size:21px;font-weight:900;
  display:grid;place-items:center;padding:0;transition:background .18s ease,opacity .18s ease,transform .22s ease;
}
#mainMenuPeek:hover{background:rgba(30,73,105,.98)}
body.menu-bottom #mainMenuPeek{left:50%;bottom:-5px;transform:translate(-50%,100%);width:62px;height:28px;border-radius:0 0 12px 12px}
body.menu-left #mainMenuPeek{top:50%;right:-5px;transform:translate(100%,-50%);width:28px;height:62px;border-radius:0 12px 12px 0}
body.menu-right #mainMenuPeek{top:50%;left:-5px;transform:translate(-100%,-50%);width:28px;height:62px;border-radius:12px 0 0 12px}

#mainMenuPin{
  min-width:34px!important;width:34px!important;height:34px!important;align-self:center;border:0;border-radius:10px;background:#edf7fc;color:#315c79;
  cursor:pointer;font-size:15px;display:grid;place-items:center;padding:0;margin:0 2px;
}
#mainMenuPin:hover,#mainMenuPin.is-pinned{background:#dceefa;color:#1d668f}
body.menu-left #mainMenuPin,body.menu-right #mainMenuPin{min-height:34px!important;height:34px!important}

/* Menyen er skjult som standard, men fliken blir stående i kanten. */
body:not(.main-menu-pinned) #toolbarWrap{opacity:0!important;pointer-events:auto!important}
body:not(.main-menu-pinned).menu-bottom #toolbarWrap{bottom:-94px!important}
body:not(.main-menu-pinned).menu-left #toolbarWrap{left:-104px!important}
body:not(.main-menu-pinned).menu-right #toolbarWrap{right:-104px!important}
body:not(.main-menu-pinned) #toolbarWrap:hover,
body:not(.main-menu-pinned) #toolbarWrap:focus-within{opacity:1!important}
body:not(.main-menu-pinned).menu-bottom #toolbarWrap:hover,
body:not(.main-menu-pinned).menu-bottom #toolbarWrap:focus-within{bottom:16px!important}
body:not(.main-menu-pinned).menu-left #toolbarWrap:hover,
body:not(.main-menu-pinned).menu-left #toolbarWrap:focus-within{left:14px!important}
body:not(.main-menu-pinned).menu-right #toolbarWrap:hover,
body:not(.main-menu-pinned).menu-right #toolbarWrap:focus-within{right:14px!important}
body.main-menu-pinned #toolbarWrap{opacity:1!important}

/* ----- Hurtigmeny oppe til høyre ----- */
#topbar{overflow:visible!important}
#rightMenuPeek{
  position:absolute;top:0;right:0;width:30px;height:40px;border:1px solid #dbe6ee;border-radius:12px 0 0 12px;
  background:rgba(255,255,255,.96);color:#35536b;box-shadow:0 8px 22px rgba(18,49,76,.10);cursor:pointer;font-size:20px;font-weight:900;
  display:grid;place-items:center;padding:0;z-index:3;transition:right .22s ease,background .18s ease;
}
#rightMenuPeek:hover{background:#edf7fc}
#rightMenuPin.is-pinned{background:#dceefa!important;color:#1d668f!important}

body:not(.right-menu-pinned) #boardTopActions{
  transform:translateX(calc(100% + 18px));opacity:0!important;pointer-events:none!important;
  transition:transform .24s cubic-bezier(.2,.8,.2,1),opacity .18s ease!important;
}
body:not(.right-menu-pinned) #topbar:hover #boardTopActions,
body:not(.right-menu-pinned) #topbar:focus-within #boardTopActions{
  transform:none;opacity:1!important;pointer-events:auto!important;
}
body:not(.right-menu-pinned) #topbar:hover #rightMenuPeek,
body:not(.right-menu-pinned) #topbar:focus-within #rightMenuPeek{right:calc(100% - 30px)}
body.right-menu-pinned #boardTopActions{transform:none!important;opacity:1!important;pointer-events:auto!important}
body.right-menu-pinned #rightMenuPeek{display:none!important}

/* Fullskjerm: samme hoverlogikk i stedet for å gjemme menyene permanent. */
body.presentation-mode #topbar,
body.fullscreen-mode #topbar,
:fullscreen #topbar{display:block!important}
body.presentation-mode #boardHeader,
body.fullscreen-mode #boardHeader,
:fullscreen #boardHeader{display:none!important}

/* Ikke la gammel collapsed-state overstyre v69. */
body.menu-collapsed.menu-bottom #toolbarWrap,
body.menu-collapsed.menu-left #toolbarWrap,
body.menu-collapsed.menu-right #toolbarWrap{pointer-events:auto!important}

@media(max-width:720px){
  #mainMenuPeek{font-size:18px}
  #rightMenuPeek{height:38px;width:28px}
}


/* =========================================================
   WEB V71 – SYNLIGE HOVER-FLIKER
   V70 skjulte hele #toolbarWrap, og dermed også fliken som skulle
   åpne menyen. I v71 står wrapperen på normal plass, mens bare
   selve menyflaten skjules. Fliken er fixed i skjermkanten.
   ========================================================= */

/* Hovedmeny: wrapperen må alltid eksistere på sin normale plass. */
#toolbarWrap{
  opacity:1!important;
  pointer-events:none!important;
  overflow:visible!important;
  transition:left .25s ease,right .25s ease,bottom .25s ease!important;
}

/* Nullstill v70-reglene som flyttet hele wrapperen utenfor skjermen. */
body:not(.main-menu-pinned).menu-bottom #toolbarWrap{bottom:16px!important}
body:not(.main-menu-pinned).menu-left #toolbarWrap{left:14px!important}
body:not(.main-menu-pinned).menu-right #toolbarWrap{right:14px!important}

/* Det er kun den hvite menyflaten som skjules. */
body:not(.main-menu-pinned) #toolbarWrap > .toolbar{
  opacity:0!important;
  pointer-events:none!important;
  visibility:hidden!important;
  transition:opacity .18s ease,transform .24s cubic-bezier(.2,.8,.2,1),visibility 0s linear .24s!important;
}
body:not(.main-menu-pinned).menu-bottom #toolbarWrap > .toolbar{transform:translateY(34px)!important}
body:not(.main-menu-pinned).menu-left #toolbarWrap > .toolbar{transform:translateX(-34px)!important}
body:not(.main-menu-pinned).menu-right #toolbarWrap > .toolbar{transform:translateX(34px)!important}

/* Hover på fliken gjør parent-wrapper hovered og åpner menyen. */
body:not(.main-menu-pinned) #toolbarWrap:hover > .toolbar,
body:not(.main-menu-pinned) #toolbarWrap:focus-within > .toolbar{
  opacity:1!important;
  pointer-events:auto!important;
  visibility:visible!important;
  transform:none!important;
  transition-delay:0s!important;
}
body.main-menu-pinned #toolbarWrap > .toolbar{
  opacity:1!important;
  pointer-events:auto!important;
  visibility:visible!important;
  transform:none!important;
}

/* Selve fliken ligger alltid fysisk i skjermkanten, uavhengig av menystørrelse. */
#mainMenuPeek{
  position:fixed!important;
  pointer-events:auto!important;
  z-index:260!important;
}
body.menu-bottom #mainMenuPeek{
  left:50%!important;right:auto!important;top:auto!important;bottom:0!important;
  transform:translateX(-50%)!important;
  width:68px!important;height:26px!important;border-radius:12px 12px 0 0!important;
}
body.menu-left #mainMenuPeek{
  left:0!important;right:auto!important;top:50%!important;bottom:auto!important;
  transform:translateY(-50%)!important;
  width:26px!important;height:68px!important;border-radius:0 12px 12px 0!important;
}
body.menu-right #mainMenuPeek{
  right:0!important;left:auto!important;top:50%!important;bottom:auto!important;
  transform:translateY(-50%)!important;
  width:26px!important;height:68px!important;border-radius:12px 0 0 12px!important;
}
body.main-menu-pinned #mainMenuPeek{opacity:.45!important}

/* Hurtigmeny til høyre: samme prinsipp. Fliken må ikke være fanget inne i
   den skjulte action-gruppen. */
#topbar{pointer-events:none!important;overflow:visible!important}
#rightMenuPeek{
  position:fixed!important;
  top:18px!important;right:0!important;left:auto!important;
  width:28px!important;height:42px!important;
  border-radius:12px 0 0 12px!important;
  z-index:261!important;
  pointer-events:auto!important;
  transition:background .18s ease,opacity .18s ease!important;
}
body:not(.right-menu-pinned) #boardTopActions{
  transform:translateX(30px)!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transition:transform .24s cubic-bezier(.2,.8,.2,1),opacity .18s ease,visibility 0s linear .24s!important;
}
body:not(.right-menu-pinned) #topbar:hover #boardTopActions,
body:not(.right-menu-pinned) #topbar:focus-within #boardTopActions{
  transform:none!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transition-delay:0s!important;
}
body:not(.right-menu-pinned) #topbar:hover #rightMenuPeek,
body:not(.right-menu-pinned) #topbar:focus-within #rightMenuPeek{
  opacity:.35!important;
}
body.right-menu-pinned #boardTopActions{
  transform:none!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;
}
body.right-menu-pinned #rightMenuPeek{display:none!important}

/* Pin-knappene er alltid klikkbare når menyen er åpnet. */
#mainMenuPin,#rightMenuPin{pointer-events:auto!important}

@media(max-width:720px){
  body.menu-bottom #mainMenuPeek{width:60px!important;height:24px!important}
  body.menu-left #mainMenuPeek,body.menu-right #mainMenuPeek{width:24px!important;height:60px!important}
  #rightMenuPeek{top:10px!important;width:26px!important;height:40px!important}
}


/* =========================================================
   WEB V72 – FESTET SOM STANDARD + ALLTID SYNLIG MENYFLIK
   Vanlig modus: menyer er pinnet som standard, men kan løsnes.
   Fullskjerm: menyer oppfører seg som hover-menyer. Fliken er
   alltid synlig slik at plasseringen er tydelig.
   ========================================================= */

/* Fliken er en permanent, diskré retningsmarkør – også når menyen er pinnet. */
body.main-menu-pinned #mainMenuPeek{
  opacity:.42!important;
  display:flex!important;
}
body.main-menu-pinned #mainMenuPeek:hover{opacity:.8!important}
body.right-menu-pinned #rightMenuPeek{
  display:flex!important;
  opacity:.42!important;
}
body.right-menu-pinned #rightMenuPeek:hover{opacity:.8!important}

/* I fullskjerm kan menyene ikke pinnes. Pin-knappene skjules av JS,
   mens kantflikene fortsatt viser hvor man skal hovere. */
body.menus-fullscreen-hover #mainMenuPeek,
body.menus-fullscreen-hover #rightMenuPeek{
  opacity:.72!important;
}
body.menus-fullscreen-hover #mainMenuPin,
body.menus-fullscreen-hover #rightMenuPin{
  display:none!important;
}

/* =========================================================
   WEB V73 – MENYFLIK KUN NÅR MENYEN ER LØSNET
   Ingen grå flik under en synlig/pinnet hovedmeny. Når menyen
   er løsnet vises kun en mørk, diskret kantflik med hvit pil.
   Samme prinsipp gjelder hurtigmenyen til høyre.
   ========================================================= */
body.main-menu-pinned #mainMenuPeek,
body.right-menu-pinned #rightMenuPeek{
  display:none!important;
}
body:not(.main-menu-pinned) #mainMenuPeek{
  display:grid!important;
  opacity:1!important;
  background:rgba(17,45,69,.94)!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.7)!important;
  box-shadow:0 7px 22px rgba(8,28,44,.24)!important;
}
body:not(.main-menu-pinned) #mainMenuPeek:hover{
  background:rgba(30,73,105,.99)!important;
}
body:not(.right-menu-pinned) #rightMenuPeek{
  display:grid!important;
  opacity:1!important;
  background:rgba(17,45,69,.94)!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.7)!important;
  box-shadow:0 7px 22px rgba(8,28,44,.24)!important;
}
body:not(.right-menu-pinned) #rightMenuPeek:hover{
  background:rgba(30,73,105,.99)!important;
}
/* Fullskjerm bruker alltid hovermodus, derfor er flikene synlige der. */
body.menus-fullscreen-hover #mainMenuPeek,
body.menus-fullscreen-hover #rightMenuPeek{
  display:grid!important;
  opacity:1!important;
  color:#fff!important;
}

/* =========================================================
   WEB V74 – STABILITY + DRAWING TOOL POLISH
   ========================================================= */
#drawCanvas{
  z-index:190;
}
.drawControls{
  min-height:50px;
  padding:7px 9px;
  border:1px solid rgba(184,202,216,.9);
  border-radius:15px;
  gap:6px;
  backdrop-filter:blur(12px);
}
.drawModeBtn{
  width:38px;height:38px;border:0;border-radius:10px;background:#eef4f8;color:#173b58;
  display:grid;place-items:center;font-size:20px;font-weight:800;cursor:pointer;
}
.drawModeBtn:hover{background:#e1edf5}
.drawModeBtn.active{background:#173b58;color:#fff;box-shadow:0 4px 12px rgba(20,55,82,.22)}
.drawDivider{width:1px;height:28px;background:#dbe5ec;margin:0 2px}
.drawColorWrap{width:38px;height:38px;border-radius:10px;overflow:hidden;border:2px solid #dbe5ec;background:#fff;cursor:pointer}
.drawColorWrap input{width:48px!important;height:48px!important;transform:translate(-5px,-5px);padding:0!important;border:0;cursor:pointer}
.drawSizeWrap{height:38px;display:flex;align-items:center;gap:7px;padding:0 8px;border-radius:10px;background:#f3f7fa}
#penSizePreview{display:block;border-radius:50%;background:#173b58;flex:0 0 auto}
.drawSizeWrap input[type=range]{width:110px}
#drawCanvas[data-draw-mode="eraser"]{cursor:cell}
body.drawOn .widget{pointer-events:none}
body.drawOn #drawCanvas{pointer-events:auto}
body.drawOn .drawControls{pointer-events:auto}

@media(max-width:760px){
  .drawControls{left:8px;right:8px;top:58px;overflow-x:auto}
  .drawSizeWrap input[type=range]{width:80px}
}

/* =========================================================
   V75 — TIMER
   Large classroom-first timer with robust scaling.
   ========================================================= */
.widget.timer-v75 .body{padding:0!important;overflow:hidden!important;background:transparent!important}
.widget.timer-v75 .kvTimer,.widget.timer-v75 .kvTimerRing,.widget.timer-v75 .kvTimerInfo{display:none!important}
.mkTimer75{
  --t75-navy:#0a2d57;
  --t75-blue:#1b6fac;
  --t75-light:#eff7fc;
  height:100%;width:100%;box-sizing:border-box;
  display:grid;grid-template-rows:minmax(0,1fr) auto auto;
  gap:clamp(10px,1.5cqh,20px);
  padding:clamp(14px,2.4cqw,30px);
  border-radius:inherit;
  background:radial-gradient(circle at 50% 35%,#2d83b8 0,#176293 42%,#0b3a67 100%);
  color:#fff;
  container-type:size;
  user-select:none;
}
.mkTimer75Main{min-height:0;display:grid;place-items:center}
.mkTimer75Ring{
  --timer-p:360deg;
  width:min(62cqw,61cqh,430px);aspect-ratio:1;border-radius:50%;position:relative;
  display:grid;place-items:center;
  background:conic-gradient(from 0deg,#40d5a3 0 var(--timer-p),rgba(255,255,255,.16) var(--timer-p) 360deg);
  box-shadow:0 16px 42px rgba(1,21,44,.3),inset 0 0 0 clamp(4px,.7cqw,8px) rgba(255,255,255,.16);
  transition:background .25s ease;
}
.mkTimer75Ring:before{content:"";position:absolute;inset:clamp(9px,1.7cqw,18px);border-radius:50%;background:linear-gradient(150deg,#0e4c7d,#071f43);box-shadow:inset 0 0 40px rgba(0,0,0,.28),0 0 0 2px rgba(255,255,255,.1)}
.mkTimer75Ring:after{content:"";position:absolute;inset:clamp(18px,3.2cqw,34px);border-radius:50%;border:1px solid rgba(255,255,255,.13)}
.mkTimer75Inner{position:relative;z-index:2;text-align:center;padding:10px}
.mkTimer75Time{font-size:clamp(44px,14cqw,112px);line-height:.92;font-weight:900;letter-spacing:-.055em;font-variant-numeric:tabular-nums;text-shadow:0 4px 18px rgba(0,0,0,.24)}
.mkTimer75Status{margin-top:clamp(8px,1.5cqh,15px);font-size:clamp(10px,2.3cqw,18px);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#cce7f7}
.mkTimer75.is-warning .mkTimer75Ring{background:conic-gradient(from 0deg,#ffd15a 0 var(--timer-p),rgba(255,255,255,.16) var(--timer-p) 360deg)}
.mkTimer75.is-danger .mkTimer75Ring,.mkTimer75.is-finished .mkTimer75Ring{background:conic-gradient(from 0deg,#ff5c61 0 var(--timer-p),rgba(255,255,255,.16) var(--timer-p) 360deg)}
.mkTimer75.is-finished .mkTimer75Time{animation:t75Pulse .9s ease-in-out 2}
@keyframes t75Pulse{50%{transform:scale(1.06)}}
.mkTimer75Controls{display:flex;align-items:center;justify-content:center;gap:clamp(7px,1.1cqw,12px);flex-wrap:wrap}
.mkTimer75Btn{
  appearance:none;border:1px solid rgba(255,255,255,.36);background:rgba(6,31,65,.56);color:#fff;
  min-height:clamp(38px,6.5cqh,54px);padding:0 clamp(15px,2.7cqw,28px);border-radius:14px;
  font:800 clamp(12px,2.2cqw,17px)/1 system-ui,-apple-system,"Segoe UI",sans-serif;cursor:pointer;
  box-shadow:0 6px 18px rgba(3,24,50,.17);transition:.15s ease;
}
.mkTimer75Btn:hover:not(:disabled){transform:translateY(-1px);background:rgba(10,47,88,.8)}
.mkTimer75Btn.primary{background:#fff;color:#0a3c6a;border-color:#fff}
.mkTimer75Btn.icon{padding:0;width:clamp(40px,6.5cqh,54px);font-size:clamp(15px,2.5cqw,20px)}
.mkTimer75Btn:disabled{opacity:.36;cursor:default}
.mkTimer75Presets{display:flex;justify-content:center;align-items:center;gap:clamp(5px,.8cqw,9px);flex-wrap:wrap}
.mkTimer75Presets button{
  appearance:none;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.09);color:#edf8ff;
  border-radius:999px;padding:clamp(6px,1.1cqh,9px) clamp(9px,1.35cqw,14px);cursor:pointer;
  font:750 clamp(9px,1.55cqw,13px)/1 system-ui,-apple-system,"Segoe UI",sans-serif;white-space:nowrap
}
.mkTimer75Presets button:hover,.mkTimer75Presets button.active{background:#fff;color:#0a3c6a;border-color:#fff}
.mkTimer75Presets .custom{border-style:dashed}
@container (max-width: 500px){
  .mkTimer75{padding:12px;gap:8px}
  .mkTimer75Ring{width:min(70cqw,55cqh,280px)}
  .mkTimer75Presets button:nth-child(n+5):not(.custom){display:none}
}
@container (max-height: 330px){
  .mkTimer75{grid-template-columns:minmax(0,1fr) minmax(170px,.75fr);grid-template-rows:minmax(0,1fr) auto;padding:10px 14px;gap:8px 16px}
  .mkTimer75Main{grid-row:1 / span 2}
  .mkTimer75Ring{width:min(42cqw,72cqh,250px)}
  .mkTimer75Controls{align-self:end}
  .mkTimer75Presets{align-self:start}
  .mkTimer75Presets button:nth-child(n+5):not(.custom){display:none}
}
.timer75Fields{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0 14px}
.timer75Fields label{margin:0!important}
.timer75Fields input{font-size:18px;text-align:center;font-weight:800}

/* V78 — transparent Timer surface. Keeps controls/ring readable while the large blue panel disappears. */
.widget.timer-v75.surface-transparent{background:transparent!important;box-shadow:none!important;border-color:transparent!important}
.widget.timer-v75.surface-transparent .mkTimer75,
.mkTimer75.is-transparent{background:transparent!important}
.widget.timer-v75.surface-transparent .body{background:transparent!important}
/* v81 – Tilfeldig elev */
.student-picker-widget .body{padding:0!important;overflow:hidden}.student-picker-widget{--sp-bg:linear-gradient(145deg,#102d4d,#174d68 55%,#176d72);background:var(--sp-bg)!important}.student-picker-widget.student-transparent{background:transparent!important;box-shadow:none!important;border-color:transparent!important}.student-picker-widget.student-transparent .head{background:rgba(14,43,70,.82)!important;border-radius:14px}.mkStudentPicker{height:100%;display:grid;grid-template-rows:auto 1fr auto;gap:clamp(10px,2cqh,20px);padding:clamp(16px,3cqh,30px);box-sizing:border-box;color:#fff}.mkStudentMeta{display:flex;justify-content:space-between;align-items:center;gap:15px;font-size:clamp(13px,2.1cqh,22px);font-weight:800;opacity:.92}.mkStudentMeta b{padding:.35em .65em;border-radius:999px;background:rgba(255,255,255,.13);white-space:nowrap}.mkStudentStage{display:flex;align-items:center;justify-content:center;min-height:0;border:1px solid rgba(255,255,255,.16);border-radius:clamp(18px,3cqh,28px);background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.15),rgba(255,255,255,.045));box-shadow:inset 0 1px rgba(255,255,255,.1)}.mkStudentName{max-width:94%;font-size:clamp(44px,12cqh,112px);font-weight:950;line-height:.95;letter-spacing:-.045em;text-align:center;text-wrap:balance;text-shadow:0 5px 20px rgba(0,0,0,.22);transition:transform .08s,opacity .08s}.mkStudentName.flash{transform:scale(1.035);opacity:.78}.mkStudentActions{display:flex;justify-content:center;gap:clamp(7px,1.5cqw,14px);flex-wrap:wrap}.mkStudentActions button{font-size:clamp(12px,2cqh,20px)!important;padding:clamp(9px,1.5cqh,15px) clamp(14px,2.2cqw,25px)!important;border-radius:12px!important}.mkPickStudent{min-width:clamp(150px,28cqw,270px);font-weight:950!important;letter-spacing:.03em}.student-picker-widget.student-transparent .mkStudentStage{background:rgba(14,43,70,.68);backdrop-filter:blur(8px)}

/* v84.1 – Gruppeinndeling */
.widget[data-type="groupdivider"] .body{overflow:hidden}
.mkGroupDivider{height:100%;box-sizing:border-box;padding:clamp(14px,3cqw,28px);display:flex;flex-direction:column;gap:clamp(12px,2cqw,20px);background:linear-gradient(145deg,#f8fcff,#edf7fb);color:#123552;container-type:size}
.group-divider-transparent .mkGroupDivider{background:transparent}
.mkGroupHead{display:flex;align-items:center;justify-content:space-between;gap:16px;flex:0 0 auto}
.mkGroupHead>div{display:flex;flex-direction:column;gap:2px}.mkGroupHead strong{font-size:clamp(18px,4cqw,30px);color:#103a5b}.mkGroupHead span{font-size:clamp(11px,2cqw,15px);color:#648096;font-weight:700}
.mkGroupHead button{font-size:clamp(12px,2.2cqw,16px);padding:.8em 1.25em;white-space:nowrap}
.mkGroupGrid{flex:1;min-height:0;overflow:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,42cqw),1fr));align-content:start;gap:clamp(10px,2cqw,18px);padding:2px}
.mkGroupCard{background:#fff;border:1px solid #d6e6ef;border-radius:18px;padding:clamp(12px,2.6cqw,20px);box-shadow:0 10px 28px rgba(15,62,91,.08)}
.mkGroupCard h3{margin:0 0 .55em;color:#1678b6;font-size:clamp(16px,3cqw,23px)}.mkGroupCard div{padding:.25em 0;border-bottom:1px solid #edf3f7;font-size:clamp(13px,2.5cqw,19px);font-weight:700;color:#23465f}.mkGroupCard div:last-child{border-bottom:0}
.mkGroupEmpty{flex:1;display:grid;place-content:center;text-align:center;gap:8px;border:2px dashed #c9dde9;border-radius:20px;color:#638097}.mkGroupEmpty b{font-size:clamp(20px,4cqw,34px);color:#244e69}.mkGroupEmpty span{font-size:clamp(12px,2.2cqw,16px)}
.mkGroupFoot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:0 0 auto}.mkGroupFoot span{font-weight:800;color:#5c788c;font-size:clamp(11px,2cqw,14px)}
.mkGroupSettings .mkGsEyebrow{font-size:12px;font-weight:900;letter-spacing:.08em;color:#2384c4;margin-bottom:4px}.mkGroupSettings h2{margin:0 0 4px}.mkGdSwitch{display:flex!important;align-items:center;justify-content:space-between;gap:20px}.mkGdSwitch span{display:flex;flex-direction:column}.mkGdSwitch small{color:#6c8293;margin-top:3px}.mkGdSwitch input{width:22px;height:22px;flex:0 0 auto}

/* ===== v85: standalone Lykkehjul + virtual 3D Terning ===== */
.widget[data-type="wheel"] .body,.widget[data-type="dice"] .body{overflow:hidden}
.mkWheelShell,.mkDiceShell{width:100%;height:100%;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,2.2cqh,18px);padding:clamp(10px,2.6cqw,22px);border-radius:18px;background:linear-gradient(145deg,#073b49,#0b5863 58%,#0b6970);color:#fff}
.mk-wheel-transparent .mkWheelShell,.mk-dice-transparent .mkDiceShell{background:transparent}
.mkWheelStage{position:relative;width:min(74cqw,66cqh);aspect-ratio:1;flex:0 1 auto;filter:drop-shadow(0 14px 26px #001b2460)}
.mkWheelDisk{position:absolute;inset:3%;border-radius:50%;background:var(--wheel-bg);border:clamp(5px,1.2cqw,10px) solid #fff;box-shadow:inset 0 0 0 3px #073b4960,0 0 0 3px #073b4960;will-change:transform}
.mkWheelHub{position:absolute;left:50%;top:50%;translate:-50% -50%;width:17%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:#fff;color:#0b5964;font-size:clamp(12px,3.5cqw,26px);font-weight:1000;box-shadow:0 4px 15px #00232c70}
.mkWheelPointer{position:absolute;z-index:5;left:50%;top:-1%;translate:-50% 0;width:0;height:0;border-left:clamp(12px,3cqw,25px) solid transparent;border-right:clamp(12px,3cqw,25px) solid transparent;border-top:clamp(24px,5cqw,42px) solid #fff;filter:drop-shadow(0 4px 3px #00242c55)}
.mkWheelLabel{position:absolute;left:50%;top:50%;width:43%;height:0;transform-origin:0 0;transform:rotate(var(--a)) translateX(24%);pointer-events:none}
.mkWheelLabel b{display:block;max-width:90%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;text-shadow:0 2px 4px #00252d90;font-size:clamp(9px,2.3cqw,17px);line-height:1;font-weight:900}
.mkWheelResult,.mkDiceResult{text-align:center;line-height:1.05;min-height:clamp(42px,9cqh,68px);display:flex;flex-direction:column;justify-content:center;gap:4px}
.mkWheelResult small,.mkDiceResult small{font-size:clamp(9px,1.7cqw,12px);font-weight:900;letter-spacing:.16em;opacity:.7}
.mkWheelResult strong{font-size:clamp(18px,5.2cqw,38px);max-width:90cqw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mkWheelSpin,.mkDiceRoll{min-width:min(70%,280px);font-size:clamp(12px,2.6cqw,18px)!important;padding:clamp(10px,2cqh,15px) clamp(18px,4cqw,34px)!important;border-radius:999px!important}

.mkDiceScene{width:min(54cqw,50cqh);aspect-ratio:1;perspective:900px;display:grid;place-items:center;margin:2% 0}
.mkDiceCube{--die-size:min(37.8cqw,35cqh);position:relative;width:var(--die-size);height:var(--die-size);transform-style:preserve-3d;will-change:transform}
.mkDieFace{position:absolute;inset:0;border-radius:14%;background:linear-gradient(145deg,#fff,#e9f0f2);border:clamp(2px,.7cqw,5px) solid #d4e0e4;box-shadow:inset -8px -10px 18px #a7bcc344,inset 8px 8px 16px #ffffff,0 0 0 1px #fff8;display:grid;place-items:center;backface-visibility:hidden}
.mkDieFace.front{transform:translateZ(calc(var(--die-size)/2))}
.mkDieFace.back{transform:rotateY(180deg) translateZ(calc(var(--die-size)/2))}
.mkDieFace.right{transform:rotateY(90deg) translateZ(calc(var(--die-size)/2))}
.mkDieFace.left{transform:rotateY(-90deg) translateZ(calc(var(--die-size)/2))}
.mkDieFace.top{transform:rotateX(90deg) translateZ(calc(var(--die-size)/2))}
.mkDieFace.bottom{transform:rotateX(-90deg) translateZ(calc(var(--die-size)/2))}
.mkDiePips{position:absolute;inset:14%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr)}
.mkDiePips i{width:clamp(7px,2.6cqw,18px);aspect-ratio:1;border-radius:50%;background:#073f4b;place-self:center;box-shadow:inset 1px 2px 2px #001b2255}
.mkDiePips.p1 i:nth-child(1){grid-area:2/2}.mkDiePips.p2 i:nth-child(1){grid-area:1/1}.mkDiePips.p2 i:nth-child(2){grid-area:3/3}
.mkDiePips.p3 i:nth-child(1){grid-area:1/1}.mkDiePips.p3 i:nth-child(2){grid-area:2/2}.mkDiePips.p3 i:nth-child(3){grid-area:3/3}
.mkDiePips.p4 i:nth-child(1){grid-area:1/1}.mkDiePips.p4 i:nth-child(2){grid-area:1/3}.mkDiePips.p4 i:nth-child(3){grid-area:3/1}.mkDiePips.p4 i:nth-child(4){grid-area:3/3}
.mkDiePips.p5 i:nth-child(1){grid-area:1/1}.mkDiePips.p5 i:nth-child(2){grid-area:1/3}.mkDiePips.p5 i:nth-child(3){grid-area:2/2}.mkDiePips.p5 i:nth-child(4){grid-area:3/1}.mkDiePips.p5 i:nth-child(5){grid-area:3/3}
.mkDiePips.p6 i:nth-child(1){grid-area:1/1}.mkDiePips.p6 i:nth-child(2){grid-area:1/3}.mkDiePips.p6 i:nth-child(3){grid-area:2/1}.mkDiePips.p6 i:nth-child(4){grid-area:2/3}.mkDiePips.p6 i:nth-child(5){grid-area:3/1}.mkDiePips.p6 i:nth-child(6){grid-area:3/3}
.mkDiceResult strong{font-size:clamp(28px,8cqw,58px)}
.mkToolSettings .mkToolEyebrow{font-size:11px;letter-spacing:.16em;font-weight:900;color:#188295;margin-bottom:5px}.mkToolSettings textarea{min-height:190px;resize:vertical}.mkToolSwitch{display:flex!important;align-items:center;justify-content:space-between;gap:18px;padding:14px 0!important;border-top:1px solid #e3ecef}.mkToolSwitch span{display:flex;flex-direction:column;gap:3px}.mkToolSwitch small{color:#668087;font-weight:500}.mkToolSwitch input{width:20px;height:20px;flex:0 0 auto}


/* ===== v85.1: robust responsive sizing for Lykkehjul + Terning ===== */
.widget[data-type="wheel"] .body,
.widget[data-type="dice"] .body{overflow:hidden!important;min-width:0;min-height:0}
.mkWheelShell,.mkDiceShell{
  overflow:hidden;
  gap:clamp(6px,1.6vh,14px);
  padding:clamp(8px,1.8vw,18px);
}
.mkWheelStage{
  width:var(--mk-wheel-size,260px)!important;
  height:var(--mk-wheel-size,260px)!important;
  aspect-ratio:auto!important;
  flex:0 0 auto!important;
  max-width:calc(100% - 2px);
  max-height:calc(100% - 2px);
}
.mkWheelDisk{inset:4%!important;border-width:clamp(3px,calc(var(--mk-wheel-size,260px) * .018),9px)!important}
.mkWheelLabel b{font-size:var(--mk-wheel-label-size,12px)!important}
.mkWheelPointer{
  top:0!important;
  border-left-width:clamp(9px,calc(var(--mk-wheel-size,260px) * .045),23px)!important;
  border-right-width:clamp(9px,calc(var(--mk-wheel-size,260px) * .045),23px)!important;
  border-top-width:clamp(18px,calc(var(--mk-wheel-size,260px) * .085),42px)!important;
}
.mkWheelHub{font-size:clamp(10px,calc(var(--mk-wheel-size,260px) * .055),27px)!important}
.mkWheelResult,.mkDiceResult{flex:0 0 auto;min-height:0!important}
.mkWheelResult small,.mkDiceResult small{font-size:clamp(8px,1.4vw,11px)}
.mkWheelResult strong{font-size:clamp(15px,4vw,34px)!important;line-height:1.05}
.mkWheelSpin,.mkDiceRoll{flex:0 0 auto;min-width:min(72%,260px)!important;padding:clamp(7px,1.5vh,13px) clamp(14px,3vw,28px)!important;font-size:clamp(10px,2.1vw,17px)!important}

.mkDiceScene{
  width:var(--mk-dice-scene,240px)!important;
  height:var(--mk-dice-scene,240px)!important;
  aspect-ratio:auto!important;
  flex:0 0 auto!important;
  margin:0!important;
  perspective:calc(var(--mk-dice-scene,240px) * 3.2)!important;
}
.mkDiceCube{
  --die-size:var(--mk-die-size,155px)!important;
  width:var(--mk-die-size,155px)!important;
  height:var(--mk-die-size,155px)!important;
  flex:none!important;
}
.mkDieFace{
  width:100%!important;height:100%!important;inset:0!important;
  border-width:clamp(2px,calc(var(--mk-die-size,155px) * .025),5px)!important;
  box-sizing:border-box;
}
.mkDiePips i{width:var(--mk-die-pip,14px)!important;height:var(--mk-die-pip,14px)!important}
.mkDiceResult strong{font-size:clamp(24px,7vw,54px)!important}

/* Very small widget sizes: protect controls before shrinking the visual into nothing. */
@media (max-width:700px){
  .mkWheelShell,.mkDiceShell{padding:8px}
}


/* ===== v85.2: complete widget-relative scaling ===== */
.widget[data-type="wheel"] .mkWheelShell,
.widget[data-type="dice"] .mkDiceShell{
  padding:var(--mk-tool-pad,10px)!important;
  gap:var(--mk-tool-gap,8px)!important;
  justify-content:center!important;
}
.widget[data-type="wheel"] .mkWheelResult,
.widget[data-type="dice"] .mkDiceResult{
  width:100%;
  max-width:100%;
  overflow:hidden;
  gap:max(2px,calc(var(--mk-tool-gap,8px) * .28))!important;
}
.widget[data-type="wheel"] .mkWheelResult small,
.widget[data-type="dice"] .mkDiceResult small{
  font-size:var(--mk-result-label,9px)!important;
  line-height:1!important;
}
.widget[data-type="wheel"] .mkWheelResult strong,
.widget[data-type="dice"] .mkDiceResult strong{
  font-size:var(--mk-result-text,28px)!important;
  line-height:1!important;
  max-width:100%!important;
  padding:0 2px;
  box-sizing:border-box;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.widget[data-type="wheel"] .mkWheelSpin,
.widget[data-type="dice"] .mkDiceRoll{
  min-width:0!important;
  max-width:100%!important;
  width:auto!important;
  font-size:var(--mk-button-font,12px)!important;
  line-height:1.1!important;
  padding:var(--mk-button-pady,8px) var(--mk-button-padx,16px)!important;
  min-height:0!important;
  height:auto!important;
  white-space:nowrap;
}
.widget[data-type="wheel"] .mkWheelHub{
  font-size:var(--mk-wheel-hub-size,14px)!important;
}
.widget[data-type="wheel"] .mkWheelPointer{
  border-left-width:calc(var(--mk-wheel-pointer,18px) * .52)!important;
  border-right-width:calc(var(--mk-wheel-pointer,18px) * .52)!important;
  border-top-width:var(--mk-wheel-pointer,18px)!important;
}
.widget[data-type="wheel"] .mkWheelLabel b{
  font-size:var(--mk-wheel-label-size,10px)!important;
}
.widget[data-type="dice"] .mkDiceResult strong{
  font-size:var(--mk-result-text,36px)!important;
}
/* On genuinely tiny widgets, remove decorative breathing room before content gets clipped. */
.widget[data-type="wheel"] .mkWheelStage,
.widget[data-type="dice"] .mkDiceScene{min-width:0!important;min-height:0!important}

/* v86 — Interaktiv tallinje */
.widget.mk-numberline-widget .body{overflow:hidden!important;padding:0!important}
.widget.mk-numberline-widget.mk-numberline-transparent .body{background:transparent!important;box-shadow:none!important}
.mkNumberLine{--nl-scale:1;height:100%;box-sizing:border-box;padding:calc(22px * var(--nl-scale));display:grid;grid-template-rows:auto 1fr auto;gap:calc(14px * var(--nl-scale));font-family:inherit;color:#102f3b;container-type:size}
.mkNlTop{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:calc(14px * var(--nl-scale));font-weight:800;opacity:.75}.mkNlTop strong{font-size:inherit}
.mkNlStage{position:relative;min-height:0;margin:0 calc(32px * var(--nl-scale));touch-action:none}
.mkNlAxis{position:absolute;left:0;right:0;top:56%;height:calc(5px * var(--nl-scale));border-radius:999px;background:#123d4b;box-shadow:0 2px 7px #102f3b25}
.mkNlAxis:before,.mkNlAxis:after{content:"";position:absolute;top:50%;width:0;height:0;border-top:calc(8px * var(--nl-scale)) solid transparent;border-bottom:calc(8px * var(--nl-scale)) solid transparent;transform:translateY(-50%)}.mkNlAxis:before{left:calc(-13px * var(--nl-scale));border-right:calc(14px * var(--nl-scale)) solid #123d4b}.mkNlAxis:after{right:calc(-13px * var(--nl-scale));border-left:calc(14px * var(--nl-scale)) solid #123d4b}
.mkNlTick{position:absolute;top:50%;width:calc(2px * var(--nl-scale));height:calc(14px * var(--nl-scale));background:#315d67;transform:translate(-50%,-50%)}.mkNlTick.major{height:calc(25px * var(--nl-scale));width:calc(3px * var(--nl-scale));background:#123d4b}.mkNlTick b{position:absolute;top:calc(19px * var(--nl-scale));left:50%;transform:translateX(-50%);font-size:calc(14px * var(--nl-scale));white-space:nowrap}
.mkNlMarker{position:absolute;top:56%;transform:translate(-50%,-100%);margin-top:calc(-12px * var(--nl-scale));border:0;background:transparent;padding:0;cursor:grab;z-index:5;color:#fff;touch-action:none}.mkNlMarker:active{cursor:grabbing}.mkNlMarker span{display:grid;place-items:center;width:calc(46px * var(--nl-scale));height:calc(46px * var(--nl-scale));border-radius:50% 50% 50% 10%;transform:rotate(-45deg);background:#0d7f89;box-shadow:0 calc(5px * var(--nl-scale)) calc(15px * var(--nl-scale)) #073e4930;font-size:calc(19px * var(--nl-scale));font-weight:950;border:calc(3px * var(--nl-scale)) solid #fff}.mkNlMarker span::first-letter{}.mkNlMarker span{line-height:1}.mkNlMarker span{color:transparent}.mkNlMarker span:after{content:attr(data-x)}.mkNlMarker span{color:#fff}.mkNlMarker b{display:block;margin-top:calc(6px * var(--nl-scale));color:#123d4b;background:#fff;border-radius:999px;padding:calc(3px * var(--nl-scale)) calc(9px * var(--nl-scale));font-size:calc(14px * var(--nl-scale));box-shadow:0 2px 8px #102f3b22}.mkNlB span{background:#e39b28}
.mkNlJump{position:absolute;left:0;right:0;top:9%;width:100%;height:45%;overflow:visible;pointer-events:none}.mkNlJump path{fill:none;stroke:#e47d42;stroke-width:1.7;stroke-linecap:round;stroke-dasharray:2.5 1.2}.mkNlJump text{font-size:6px;font-weight:900;fill:#c65c26}
.mkNlActions{display:flex;justify-content:center;gap:calc(9px * var(--nl-scale));flex-wrap:wrap}.mkNlActions button{font-size:calc(14px * var(--nl-scale))!important;padding:calc(8px * var(--nl-scale)) calc(16px * var(--nl-scale))!important;min-height:0!important}
@container (max-width:430px){.mkNlTop{display:none}.mkNumberLine{grid-template-rows:1fr auto}.mkNlStage{margin:0 22px}.mkNlActions button{font-size:11px!important}}
.mkNlMarker span{transform:rotate(-45deg)}.mkNlMarker span{position:relative}.mkNlMarker span::after{content:""}.mkNlMarker[data-marker="A"] span::before{content:"A"}.mkNlMarker[data-marker="B"] span::before{content:"B"}.mkNlMarker span::before{transform:rotate(45deg);display:block;color:#fff}
\n\n/* v86.1 — Tallinje: ekte skalering også i små widgetstørrelser */
.mkNumberLine{min-width:0!important;min-height:0!important;overflow:hidden}
.mkNlStage{min-width:0!important;overflow:visible}
.mkNumberLine.mkNlTiny{padding:calc(10px * var(--nl-scale));gap:calc(6px * var(--nl-scale));grid-template-rows:1fr auto}
.mkNumberLine.mkNlTiny .mkNlTop{display:none!important}
.mkNumberLine.mkNlTiny .mkNlStage{margin:0 calc(24px * var(--nl-scale));min-height:calc(125px * var(--nl-scale))}
.mkNumberLine.mkNlTiny .mkNlAxis{top:54%}
.mkNumberLine.mkNlTiny .mkNlMarker{top:54%;margin-top:calc(-8px * var(--nl-scale))}
.mkNumberLine.mkNlTiny .mkNlMarker span{width:calc(42px * var(--nl-scale));height:calc(42px * var(--nl-scale));font-size:calc(17px * var(--nl-scale));border-width:max(1px,calc(3px * var(--nl-scale)))}
.mkNumberLine.mkNlTiny .mkNlMarker b{margin-top:calc(4px * var(--nl-scale));padding:calc(2px * var(--nl-scale)) calc(7px * var(--nl-scale));font-size:max(8px,calc(13px * var(--nl-scale)))}
.mkNumberLine.mkNlTiny .mkNlTick b{font-size:max(7px,calc(13px * var(--nl-scale)));top:calc(17px * var(--nl-scale))}
.mkNumberLine.mkNlTiny .mkNlActions{gap:calc(7px * var(--nl-scale));flex-wrap:nowrap;align-items:center;min-height:0}
.mkNumberLine.mkNlTiny .mkNlActions button{width:auto!important;min-width:0!important;max-width:none!important;height:auto!important;min-height:0!important;margin:0!important;border-radius:max(7px,calc(10px * var(--nl-scale)))!important;padding:max(4px,calc(7px * var(--nl-scale))) max(7px,calc(13px * var(--nl-scale)))!important;font-size:max(8px,calc(13px * var(--nl-scale)))!important;line-height:1.15!important;white-space:nowrap!important}
.mkNumberLine.mkNlTiny .mkNlJump{top:12%;height:42%}
.mkNumberLine.mkNlTiny .mkNlJump text{font-size:5px;transform:translateY(5px)}
.mkNumberLine.mkNlMicro{padding:2px!important;gap:2px!important}
.mkNumberLine.mkNlMicro .mkNlStage{margin:0 8px!important;min-height:74px}
.mkNumberLine.mkNlMicro .mkNlActions{gap:4px!important;padding-bottom:2px}
.mkNumberLine.mkNlMicro .mkNlActions button{padding:4px 7px!important;font-size:8px!important;border-radius:7px!important}
.mkNumberLine.mkNlMicro .mkNlMarker span{width:22px;height:22px;font-size:10px;border-width:1px}
.mkNumberLine.mkNlMicro .mkNlMarker b{font-size:7px;padding:1px 4px;margin-top:2px}
.mkNumberLine.mkNlMicro .mkNlTick b{font-size:7px;top:9px}
.mkNumberLine.mkNlMicro .mkNlTick{height:5px;width:1px}.mkNumberLine.mkNlMicro .mkNlTick.major{height:10px;width:1px}
.mkNumberLine.mkNlMicro .mkNlAxis{height:2px}
.mkNumberLine.mkNlMicro .mkNlAxis:before,.mkNumberLine.mkNlMicro .mkNlAxis:after{border-top-width:4px;border-bottom-width:4px}.mkNumberLine.mkNlMicro .mkNlAxis:before{left:-6px;border-right-width:7px}.mkNumberLine.mkNlMicro .mkNlAxis:after{right:-6px;border-left-width:7px}
.mkNumberLine.mkNlMicro .mkNlJump text{font-size:4px;transform:translateY(8px)}

/* v87.1 — Brøkbygger */
.widget.mk-fraction-widget .body{overflow:hidden!important;padding:0!important}
.widget.mk-fraction-widget.mk-fraction-transparent .body{background:transparent!important;box-shadow:none!important}
.mkFractionBuilder{--fb-scale:1;height:100%;box-sizing:border-box;min-width:0;min-height:0;overflow:hidden;padding:calc(14px * var(--fb-scale));display:grid;grid-template-rows:minmax(0,1fr) auto;gap:calc(9px * var(--fb-scale));font-family:inherit;color:#12364a}
.mkFbStage{min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;gap:calc(15px * var(--fb-scale));overflow:hidden}
.mkFbCard{min-width:0;min-height:0;width:min(94%,calc(410px * var(--fb-scale)));height:min(100%,calc(390px * var(--fb-scale)));border-radius:calc(22px * var(--fb-scale));background:linear-gradient(180deg,#fff,#f7fbfc);border:1px solid #cadde5;box-shadow:0 calc(8px * var(--fb-scale)) calc(25px * var(--fb-scale)) #103b4b16;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;align-items:center;justify-items:center;padding:calc(12px * var(--fb-scale));box-sizing:border-box}
.mkFbCompare .mkFbCard{width:min(42%,calc(340px * var(--fb-scale)))}
.mkFbCardHead{width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:calc(12px * var(--fb-scale));font-weight:900;color:#36596a}.mkFbCardHead small{font-size:calc(10px * var(--fb-scale));color:#78909c}
.mkFbVisual{min-height:0;width:100%;height:100%;display:grid;place-items:center;padding:calc(4px * var(--fb-scale));box-sizing:border-box}
.mkFbCircle{display:block;width:min(100%,calc(225px * var(--fb-scale)));height:min(100%,calc(225px * var(--fb-scale)));max-height:100%;overflow:visible;filter:drop-shadow(0 calc(5px * var(--fb-scale)) calc(10px * var(--fb-scale)) #193d4b1c)}
.mkFbPart{fill:#eef5f7;stroke:#fff;stroke-width:1.7;cursor:pointer;transition:fill .14s ease,transform .12s ease;transform-origin:50% 50%}.mkFbPart:hover{filter:brightness(.97)}.mkFbCardA .mkFbPart.filled{fill:#16a3a9}.mkFbCardB .mkFbPart.filled{fill:#f2a52b}.mkFbOuter{fill:none;stroke:#173f50;stroke-width:2.2;pointer-events:none}
.mkFbRect{width:min(94%,calc(305px * var(--fb-scale)));height:min(72%,calc(155px * var(--fb-scale)));display:grid;grid-template-columns:repeat(var(--fb-den),1fr);border:calc(3px * var(--fb-scale)) solid #173f50;border-radius:calc(12px * var(--fb-scale));overflow:hidden;box-shadow:0 calc(5px * var(--fb-scale)) calc(12px * var(--fb-scale)) #173f501a}.mkFbRectPart{border:0;border-right:1px solid #fff;background:#eef5f7;min-width:0;padding:0;cursor:pointer}.mkFbRectPart:last-child{border-right:0}.mkFbCardA .mkFbRectPart.filled{background:#16a3a9}.mkFbCardB .mkFbRectPart.filled{background:#f2a52b}
.mkFbValue{display:grid;grid-template-rows:auto 2px auto;justify-items:center;align-items:center;line-height:1;font-size:calc(24px * var(--fb-scale));font-weight:950;color:#11384a;min-width:calc(48px * var(--fb-scale));margin:calc(2px * var(--fb-scale)) 0}.mkFbValue span{width:100%;height:max(1px,calc(2px * var(--fb-scale)));background:#11384a;border-radius:99px;margin:calc(3px * var(--fb-scale)) 0}
.mkFbSteppers{width:100%;display:flex;justify-content:center;gap:calc(7px * var(--fb-scale));margin-top:calc(4px * var(--fb-scale))}.mkFbSteppers>div{display:flex;align-items:center;border:1px solid #d3e2e8;border-radius:999px;overflow:hidden;background:#f8fbfc}.mkFbSteppers button{border:0!important;background:transparent!important;color:#173f50!important;width:calc(32px * var(--fb-scale))!important;height:calc(29px * var(--fb-scale))!important;min-height:0!important;padding:0!important;font-size:calc(18px * var(--fb-scale))!important;font-weight:900!important;box-shadow:none!important}.mkFbSteppers span{font-size:calc(9px * var(--fb-scale));font-weight:900;text-transform:uppercase;letter-spacing:.08em;min-width:calc(47px * var(--fb-scale));text-align:center;color:#607d8b}
.mkFbCompareCenter{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(10px * var(--fb-scale));min-width:calc(85px * var(--fb-scale))}.mkFbCompareMath{display:flex;align-items:center;gap:calc(7px * var(--fb-scale));font-size:calc(14px * var(--fb-scale));font-weight:950;color:#25495a;background:#fff;border:1px solid #d5e4ea;border-radius:999px;padding:calc(6px * var(--fb-scale)) calc(10px * var(--fb-scale));box-shadow:0 4px 12px #173f5012;white-space:nowrap}.mkFbCompareMath b{font-size:calc(20px * var(--fb-scale));color:#173f50}.mkFbCompareSign{font-size:calc(46px * var(--fb-scale));font-weight:950;line-height:1;color:#173f50}
.mkFbActions{display:flex;align-items:center;justify-content:center;gap:calc(7px * var(--fb-scale));flex-wrap:nowrap;min-width:0}.mkFbActions button{min-width:0!important;min-height:0!important;height:auto!important;padding:calc(7px * var(--fb-scale)) calc(13px * var(--fb-scale))!important;font-size:calc(12px * var(--fb-scale))!important;line-height:1.1!important;white-space:nowrap!important}.mkFbShapeToggle{display:flex;align-items:center;border:1px solid #d3e2e8;border-radius:999px;overflow:hidden;background:#f8fbfc}.mkFbShapeToggle button{border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:#416273!important}.mkFbShapeToggle button.isActive{background:#173f50!important;color:#fff!important}
.mkFractionBuilder.mkFbTiny{padding:calc(7px * var(--fb-scale));gap:calc(4px * var(--fb-scale))}.mkFractionBuilder.mkFbTiny .mkFbStage{gap:calc(5px * var(--fb-scale))}.mkFractionBuilder.mkFbTiny .mkFbCard{border-radius:calc(14px * var(--fb-scale));padding:calc(6px * var(--fb-scale));grid-template-rows:minmax(0,1fr) auto auto}.mkFractionBuilder.mkFbTiny .mkFbCardHead{display:none}.mkFractionBuilder.mkFbTiny .mkFbCircle{width:min(100%,calc(150px * var(--fb-scale)));height:min(100%,calc(150px * var(--fb-scale)))}.mkFractionBuilder.mkFbTiny .mkFbRect{width:94%;height:64%}.mkFractionBuilder.mkFbTiny .mkFbValue{font-size:max(11px,calc(20px * var(--fb-scale)));min-width:calc(34px * var(--fb-scale))}.mkFractionBuilder.mkFbTiny .mkFbSteppers span{display:none}.mkFractionBuilder.mkFbTiny .mkFbSteppers button{width:max(19px,calc(28px * var(--fb-scale)))!important;height:max(18px,calc(25px * var(--fb-scale)))!important;font-size:max(11px,calc(16px * var(--fb-scale)))!important}.mkFractionBuilder.mkFbTiny .mkFbActions button{padding:max(4px,calc(6px * var(--fb-scale))) max(6px,calc(10px * var(--fb-scale)))!important;font-size:max(8px,calc(11px * var(--fb-scale)))!important}.mkFractionBuilder.mkFbTiny .mkFbCompareCenter{min-width:calc(45px * var(--fb-scale));gap:2px}.mkFractionBuilder.mkFbTiny .mkFbCompareMath{display:none}.mkFractionBuilder.mkFbTiny .mkFbCompareSign{font-size:max(17px,calc(28px * var(--fb-scale)))}
.mkFractionBuilder.mkFbMicro{padding:2px!important;gap:2px!important}.mkFractionBuilder.mkFbMicro .mkFbStage{gap:3px}.mkFractionBuilder.mkFbMicro .mkFbCard{padding:3px;border-radius:7px;border-width:1px}.mkFractionBuilder.mkFbMicro .mkFbCircle{width:min(100%,86px);height:min(100%,86px)}.mkFractionBuilder.mkFbMicro .mkFbValue{font-size:11px;min-width:22px;margin:0}.mkFractionBuilder.mkFbMicro .mkFbValue span{margin:1px 0}.mkFractionBuilder.mkFbMicro .mkFbSteppers{gap:2px;margin:0}.mkFractionBuilder.mkFbMicro .mkFbSteppers button{width:18px!important;height:17px!important;font-size:10px!important}.mkFractionBuilder.mkFbMicro .mkFbActions{gap:2px}.mkFractionBuilder.mkFbMicro .mkFbActions button{font-size:7px!important;padding:3px 5px!important;border-radius:6px!important}.mkFractionBuilder.mkFbMicro .mkFbShapeToggle{border-radius:6px}.mkFractionBuilder.mkFbMicro .mkFbCompareCenter{min-width:18px}.mkFractionBuilder.mkFbMicro .mkFbCompareSign{font-size:12px}


/* v88 — Interaktiv gangetabell */
.widget.mk-times-widget .body{overflow:hidden!important;padding:0!important}.widget.mk-times-widget.mk-times-transparent .body{background:transparent!important;box-shadow:none!important}
.mkTimes{--mt-s:1;height:100%;box-sizing:border-box;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:calc(10px * var(--mt-s));padding:calc(14px * var(--mt-s));overflow:hidden;color:#12364a;font-family:inherit}
.mkMtTop{display:flex;align-items:center;justify-content:space-between;gap:calc(10px * var(--mt-s));min-width:0}.mkMtModes{display:flex;background:#edf4f7;border:1px solid #d3e2e8;border-radius:999px;padding:calc(3px * var(--mt-s));gap:calc(2px * var(--mt-s))}.mkMtModes button{border:0!important;box-shadow:none!important;background:transparent!important;color:#486777!important;border-radius:999px!important;padding:calc(7px * var(--mt-s)) calc(13px * var(--mt-s))!important;font-size:calc(12px * var(--mt-s))!important;font-weight:900!important;min-height:0!important}.mkMtModes button.active{background:#173f50!important;color:#fff!important}.mkMtFocus{font-size:calc(18px * var(--mt-s));font-weight:950;color:#0f7f88;background:#e4f7f5;border-radius:999px;padding:calc(6px * var(--mt-s)) calc(12px * var(--mt-s));white-space:nowrap}
.mkMtStage{min-width:0;min-height:0;display:grid;place-items:center;overflow:hidden}.mkMtGrid{width:min(100%,calc(700px * var(--mt-s)));height:min(100%,calc(485px * var(--mt-s)));aspect-ratio:1/1;display:grid;grid-template-columns:repeat(calc(var(--mt-n) + 1),1fr);grid-template-rows:repeat(calc(var(--mt-n) + 1),1fr);gap:max(1px,calc(2px * var(--mt-s)));background:#d9e6eb;padding:max(1px,calc(2px * var(--mt-s)));border-radius:calc(14px * var(--mt-s));overflow:hidden;box-shadow:0 calc(8px * var(--mt-s)) calc(24px * var(--mt-s)) #173f5014}
.mkMtCell{min-width:0!important;min-height:0!important;width:auto!important;height:auto!important;margin:0!important;padding:0!important;border:0!important;border-radius:calc(5px * var(--mt-s))!important;display:grid!important;place-items:center!important;font-size:calc(15px * var(--mt-s))!important;font-weight:900!important;line-height:1!important;box-shadow:none!important}.mkMtHead{background:#173f50!important;color:#fff!important}.mkMtHead:hover{background:#0f6670!important}.mkMtCorner{background:#0d7f89!important;color:#fff!important;font-size:calc(20px * var(--mt-s))!important}.mkMtProduct{background:#fff!important;color:#183c4d!important;transition:background .12s ease,transform .12s ease,color .12s ease}.mkMtProduct:hover{transform:scale(.96);background:#f4fafb!important}.mkMtProduct.isFocus{background:#dff6f2!important;color:#087c83!important;box-shadow:inset 0 0 0 max(1px,calc(2px * var(--mt-s))) #18a4a9!important}.mkMtProduct.isHidden{background:#f7fafb!important;color:#9aadb6!important}.mkMtProduct.isHidden span{font-size:calc(17px * var(--mt-s));color:#9aadb6}
.mkMtHint{text-align:center;font-size:calc(10px * var(--mt-s));font-weight:800;color:#6f8793;min-height:calc(14px * var(--mt-s))}
.mkMtRandom{width:min(94%,calc(720px * var(--mt-s)));height:min(92%,calc(430px * var(--mt-s)));border:1px solid #cfe0e7;border-radius:calc(26px * var(--mt-s));background:linear-gradient(145deg,#fff,#f1f8fa);box-shadow:0 calc(12px * var(--mt-s)) calc(35px * var(--mt-s)) #173f5018;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(20px * var(--mt-s));padding:calc(20px * var(--mt-s));box-sizing:border-box}.mkMtRandomLabel{font-size:calc(13px * var(--mt-s));font-weight:950;letter-spacing:.12em;color:#68828f}.mkMtEquation{display:flex;align-items:center;justify-content:center;gap:calc(18px * var(--mt-s));font-size:calc(52px * var(--mt-s));font-weight:950;color:#12364a;line-height:1}.mkMtEquation b{font-size:1.15em}.mkMtEquation strong{display:grid;place-items:center;min-width:calc(100px * var(--mt-s));height:calc(92px * var(--mt-s));border-radius:calc(18px * var(--mt-s));background:#173f50;color:#fff}.mkMtEquation span{color:#718995}.mkMtRandomActions{display:flex;gap:calc(9px * var(--mt-s))}.mkMtRandomActions button{min-height:0!important;height:auto!important;padding:calc(10px * var(--mt-s)) calc(20px * var(--mt-s))!important;font-size:calc(14px * var(--mt-s))!important}.mkMtRandom small{font-size:calc(10px * var(--mt-s));font-weight:800;color:#718995}
.mkTimes.mkMtTiny{padding:calc(7px * var(--mt-s));gap:calc(5px * var(--mt-s))}.mkTimes.mkMtTiny .mkMtFocus,.mkTimes.mkMtTiny .mkMtHint{display:none}.mkTimes.mkMtTiny .mkMtTop{justify-content:center}.mkTimes.mkMtTiny .mkMtModes button{padding:max(4px,calc(6px * var(--mt-s))) max(7px,calc(10px * var(--mt-s)))!important;font-size:max(8px,calc(11px * var(--mt-s)))!important}.mkTimes.mkMtTiny .mkMtCell{font-size:max(7px,calc(12px * var(--mt-s)))!important}.mkTimes.mkMtTiny .mkMtCorner{font-size:max(9px,calc(16px * var(--mt-s)))!important}.mkTimes.mkMtTiny .mkMtEquation{font-size:max(25px,calc(44px * var(--mt-s)));gap:max(7px,calc(12px * var(--mt-s)))}.mkTimes.mkMtTiny .mkMtRandom{gap:max(7px,calc(13px * var(--mt-s)));padding:max(7px,calc(12px * var(--mt-s)))}.mkTimes.mkMtTiny .mkMtRandomActions button{font-size:max(8px,calc(11px * var(--mt-s)))!important;padding:max(5px,calc(7px * var(--mt-s))) max(8px,calc(13px * var(--mt-s)))!important}
.mkTimes.mkMtMicro{padding:2px!important;gap:2px!important}.mkTimes.mkMtMicro .mkMtModes{padding:1px}.mkTimes.mkMtMicro .mkMtModes button{font-size:7px!important;padding:3px 5px!important}.mkTimes.mkMtMicro .mkMtGrid{gap:1px;padding:1px;border-radius:5px}.mkTimes.mkMtMicro .mkMtCell{font-size:6px!important;border-radius:2px!important}.mkTimes.mkMtMicro .mkMtRandomLabel,.mkTimes.mkMtMicro .mkMtRandom small{display:none}.mkTimes.mkMtMicro .mkMtEquation{font-size:22px;gap:5px}.mkTimes.mkMtMicro .mkMtEquation strong{min-width:38px;height:34px;border-radius:6px}.mkTimes.mkMtMicro .mkMtRandomActions{gap:4px}.mkTimes.mkMtMicro .mkMtRandomActions button{font-size:7px!important;padding:4px 6px!important;border-radius:6px!important}
.mkMtChecks{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.mkMtTableCheck{display:grid!important;place-items:center;cursor:pointer}.mkMtTableCheck input{position:absolute;opacity:0;pointer-events:none}.mkMtTableCheck span{width:100%;box-sizing:border-box;text-align:center;padding:9px 4px;border:1px solid #d3e2e8;border-radius:10px;background:#f7fafb;font-weight:900;color:#36596a}.mkMtTableCheck input:checked+span{background:#173f50;color:#fff;border-color:#173f50}.mkSettingsHelp{color:#718995;font-size:13px;margin:0 0 10px}


/* Restored in v88.1: cumulative v83.2–v83.6 fixes that were accidentally dropped in later packages. */
/* =========================================================
   v83.2 – Keep widget content clear of contextual chrome
   The floating widget header used to sit on top of the first
   content row. While edit chrome is visible, reserve exactly
   the header height inside the widget body instead.
   ========================================================= */
@media (hover:hover) {
  body:not(.presenting):not(.presentation-mode):not(.fullscreen-mode) .widget:hover > .body,
  body:not(.presenting):not(.presentation-mode):not(.fullscreen-mode) .widget.selected > .body,
  body:not(.presenting):not(.presentation-mode):not(.fullscreen-mode) .widget:focus-within > .body {
    transform:translateY(38px)!important;
    height:calc(100% - 38px)!important;
  }
}

/* Touch devices do not have a meaningful hover state; only make room
   once a widget is actually selected/focused. */
@media (hover:none) {
  body:not(.presenting):not(.presentation-mode):not(.fullscreen-mode) .widget.selected > .body,
  body:not(.presenting):not(.presentation-mode):not(.fullscreen-mode) .widget:focus-within > .body {
    transform:translateY(38px)!important;
    height:calc(100% - 38px)!important;
  }
}

/* The contextual header is hidden in presentation/fullscreen, so content
   must always reclaim the full widget area there. */
body.presenting .widget > .body,
body.presentation-mode .widget > .body,
body.fullscreen-mode .widget > .body,
:fullscreen .widget > .body {
  transform:none!important;
  height:100%!important;
}
/* v83.3 – Tilfeldig elev: reveal + confetti */
.mkStudentStage{position:relative;overflow:hidden}.mkStudentStage.winner{animation:mkWinnerPulse .55s ease-out 2}.mkStudentStage.winner .mkStudentName{animation:mkWinnerName .7s cubic-bezier(.2,.9,.2,1);text-shadow:0 7px 28px rgba(0,0,0,.28),0 0 34px rgba(255,220,92,.42)}
.mkStudentConfetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:5}.mkStudentConfetti i{position:absolute;left:var(--x);top:-8%;width:clamp(7px,1.2cqw,13px);height:clamp(11px,1.8cqw,19px);border-radius:2px;animation:mkConfetti 2.15s cubic-bezier(.12,.72,.32,1) var(--d) forwards;transform:translateX(0) rotate(0)}
@keyframes mkConfetti{0%{transform:translate3d(0,-15%,0) rotate(0);opacity:1}100%{transform:translate3d(var(--dx),120cqh,0) rotate(var(--r));opacity:.15}}
@keyframes mkWinnerPulse{0%{box-shadow:inset 0 1px rgba(255,255,255,.1)}50%{box-shadow:inset 0 0 70px rgba(255,215,80,.24),0 0 30px rgba(255,215,80,.18)}100%{box-shadow:inset 0 1px rgba(255,255,255,.1)}}
@keyframes mkWinnerName{0%{transform:scale(.72);opacity:.2}65%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}


/* v83.4 – Tilfeldig elev: polished settings, stronger reveal/confetti */
.student-picker-widget .body{position:relative}
.mkStudentPicker{position:relative;isolation:isolate}
.mkStudentStage{z-index:1}
.mkStudentStage.winner::before{content:"";position:absolute;inset:-20%;background:radial-gradient(circle at 50% 50%,rgba(255,218,91,.34),rgba(255,218,91,0) 58%);animation:mkWinnerGlow 1.15s ease-out;pointer-events:none}
.mkStudentStage.winner .mkStudentName{position:relative;z-index:2}
.mkStudentConfetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:30;border-radius:inherit}
.mkStudentConfetti i{position:absolute;left:var(--x);top:-12%;width:var(--w);height:var(--h);opacity:0;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.mkStudentConfetti.go i{animation:mkStudentConfettiFall var(--dur) cubic-bezier(.12,.7,.25,1) var(--d) forwards}
@keyframes mkStudentConfettiFall{0%{transform:translate3d(0,-25%,0) rotate(0deg);opacity:0}8%{opacity:1}100%{transform:translate3d(var(--dx),125cqh,0) rotate(var(--r));opacity:.9}}
@keyframes mkWinnerGlow{0%{transform:scale(.4);opacity:0}35%{opacity:1}100%{transform:scale(1.2);opacity:0}}

.modal .card.mkStudentSettingsCard{width:min(590px,calc(100vw - 28px));padding:0!important;border-radius:22px!important;overflow:auto;background:#f7fbff;box-shadow:0 28px 90px rgba(8,31,52,.32)}
.mkStudentSettings{color:#183852}
.mkStudentSettingsHead{padding:24px 26px 18px;background:linear-gradient(135deg,#eef8ff,#f9fbff);border-bottom:1px solid #dbe9f3}
.mkStudentSettingsHead h2{margin:3px 0 5px!important;font-size:28px!important;color:#12344f!important}
.mkStudentSettingsHead p{margin:0;color:#668096;font-size:14px;line-height:1.45}
.mkSettingsEyebrow{font-size:11px;font-weight:900;letter-spacing:.13em;color:#2785c6}
.mkSettingsSection{padding:18px 26px;border-bottom:1px solid #e2edf5}
.mkSettingsSection h3{margin:0 0 12px;font-size:13px;text-transform:uppercase;letter-spacing:.09em;color:#5b7488}
.mkSettingsSelect{display:block;width:100%;height:48px;border:1px solid #cddfea;border-radius:12px;background:#fff;color:#183852;font-weight:800;padding:0 14px;outline:none}
.mkSettingsSelect:focus{border-color:#2696ec;box-shadow:0 0 0 3px rgba(38,150,236,.12)}
.mkSettingsEmpty{padding:13px 14px;border-radius:12px;background:#fff6df;color:#6b5321;font-size:14px}
.mkSettingsToggle{display:flex!important;align-items:center;justify-content:space-between;gap:18px;margin:0!important;padding:13px 0;cursor:pointer}
.mkSettingsToggle+.mkSettingsToggle{border-top:1px solid #edf3f7}
.mkSettingsToggle>span{display:grid;gap:3px;min-width:0}
.mkSettingsToggle b{font-size:15px;color:#183852}
.mkSettingsToggle small{font-size:12px;color:#73899b;line-height:1.35}
.mkSettingsToggle input{position:absolute;opacity:0;pointer-events:none}
.mkSettingsToggle i{position:relative;flex:0 0 46px;width:46px;height:26px;border-radius:999px;background:#c8d6df;transition:.18s ease;box-shadow:inset 0 0 0 1px rgba(22,57,81,.08)}
.mkSettingsToggle i::after{content:"";position:absolute;width:20px;height:20px;left:3px;top:3px;border-radius:50%;background:#fff;box-shadow:0 2px 7px rgba(17,45,65,.25);transition:.18s ease}
.mkSettingsToggle input:checked+i{background:linear-gradient(135deg,#1aa8ef,#5c55ff)}
.mkSettingsToggle input:checked+i::after{transform:translateX(20px)}
.mkSettingsActions{display:flex;justify-content:flex-end;gap:10px;padding:18px 26px 24px}
.mkSettingsActions button{min-width:105px;padding:11px 18px!important;border-radius:11px!important;font-weight:850!important}

/* ===== v89: tavlemotor quality pass ===== */
.widget > .head{touch-action:none}
.widget > .resizeGrip{touch-action:none}
body.drawOn #drawCanvas{touch-action:none}
.widget.locked > .head{touch-action:auto}

/* ===== v90: Land & hovedsteder ===== */
.widget.mk-country-transparent,.widget.mk-country-transparent .body{background:transparent!important;box-shadow:none!important}
.mkCountry{--cq-s:1;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:calc(12px*var(--cq-s));padding:calc(16px*var(--cq-s));box-sizing:border-box;color:#123c4b;overflow:hidden}
.cqModes{display:flex;gap:calc(7px*var(--cq-s));padding:calc(5px*var(--cq-s));background:#e8f3f5;border-radius:calc(14px*var(--cq-s));max-width:100%;flex-wrap:nowrap}
.cqModes button{border:0;background:transparent;color:#56717b;border-radius:calc(10px*var(--cq-s));padding:calc(8px*var(--cq-s)) calc(12px*var(--cq-s));font-size:calc(13px*var(--cq-s));font-weight:850;white-space:nowrap}
.cqModes button.active{background:#fff;color:#087e8c;box-shadow:0 2px 9px #173d491c}
.cqStage{min-height:0;flex:1;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:calc(9px*var(--cq-s))}
.cqQuestion{font-size:calc(22px*var(--cq-s));font-weight:900;line-height:1.15;max-width:95%}
.cqFlag{width:calc(360px*var(--cq-s));height:calc(230px*var(--cq-s));display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 calc(8px*var(--cq-s)) calc(14px*var(--cq-s)) rgba(12,55,70,.18));user-select:none;overflow:hidden;flex:0 0 auto}
.cqFlag img{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;user-select:none;pointer-events:none}
.cqAnswer{display:flex;flex-direction:column;align-items:center;gap:calc(3px*var(--cq-s));min-height:calc(62px*var(--cq-s))}
.cqAnswer strong{font-size:calc(34px*var(--cq-s));line-height:1;font-weight:950;color:#0b5664}.cqAnswer strong.cqHidden{font-size:calc(48px*var(--cq-s))}.cqAnswer span{font-size:calc(14px*var(--cq-s));font-weight:750;color:#6a858d}
.cqActions{display:flex;justify-content:center;gap:calc(9px*var(--cq-s));flex-wrap:wrap}.cqActions button{font-size:calc(14px*var(--cq-s))!important;padding:calc(9px*var(--cq-s)) calc(16px*var(--cq-s))!important;border-radius:calc(10px*var(--cq-s))!important}
.cqMeta{font-size:calc(11px*var(--cq-s));font-weight:800;color:#789099;letter-spacing:.03em}
.mkCountry.cqTiny{padding:calc(10px*var(--cq-s));gap:calc(7px*var(--cq-s))}.mkCountry.cqTiny .cqMeta{display:none}.mkCountry.cqTiny .cqQuestion{font-size:calc(19px*var(--cq-s))}.mkCountry.cqTiny .cqFlag{width:calc(285px*var(--cq-s));height:calc(180px*var(--cq-s))}.mkCountry.cqTiny .cqFlag img{width:100%;height:100%}.mkCountry.cqTiny .cqAnswer strong{font-size:calc(29px*var(--cq-s))}
.mkCountry.cqMicro .cqModes button{padding:calc(6px*var(--cq-s)) calc(8px*var(--cq-s));font-size:calc(11px*var(--cq-s))}.mkCountry.cqMicro .cqQuestion{display:none}.mkCountry.cqMicro .cqFlag{width:calc(205px*var(--cq-s));height:calc(128px*var(--cq-s))}.mkCountry.cqMicro .cqFlag img{width:100%;height:100%}.mkCountry.cqMicro .cqAnswer span{display:none}.mkCountry.cqMicro .cqActions button{padding:calc(7px*var(--cq-s)) calc(11px*var(--cq-s))!important}

/* ===== v91: Interaktivt verdenskart ===== */
.widget.mk-worldmap-transparent,.widget.mk-worldmap-transparent .body{background:transparent!important;box-shadow:none!important}
.mkWorldMap{--wm-s:1;height:100%;min-height:0;display:flex;flex-direction:column;gap:calc(10px*var(--wm-s));padding:calc(14px*var(--wm-s));box-sizing:border-box;color:#123c4b;overflow:hidden}
.wmLoading{margin:auto;font-size:calc(18px*var(--wm-s));font-weight:850;color:#5d7b87}.wmLoading.wmError{color:#a83d48}
.wmTop{display:flex;align-items:center;justify-content:space-between;gap:calc(10px*var(--wm-s));min-width:0;flex:0 0 auto}
.wmModes{display:flex;gap:calc(6px*var(--wm-s));padding:calc(4px*var(--wm-s));background:#e7f2f5;border-radius:calc(13px*var(--wm-s))}
.wmModes button{border:0;background:transparent;color:#57727d;border-radius:calc(9px*var(--wm-s));padding:calc(7px*var(--wm-s)) calc(12px*var(--wm-s));font-size:calc(13px*var(--wm-s));font-weight:900;white-space:nowrap}.wmModes button.active{background:#fff;color:#087e8c;box-shadow:0 2px 9px #173d491c}
.wmScope{font-size:calc(11px*var(--wm-s));font-weight:850;color:#789098;white-space:nowrap}
.wmQuizHead{display:flex;align-items:center;justify-content:center;gap:calc(12px*var(--wm-s));min-height:calc(48px*var(--wm-s));flex:0 0 auto}
.wmQuizPrompt,.wmQuizFeedback{display:flex;align-items:baseline;justify-content:center;gap:calc(8px*var(--wm-s));font-size:calc(14px*var(--wm-s));font-weight:800;color:#667f89}.wmQuizPrompt strong,.wmQuizFeedback b{font-size:calc(23px*var(--wm-s));font-weight:950;color:#103f50}.wmQuizFeedback.correct{color:#13835f}.wmQuizFeedback.correct b{color:#087a57}.wmQuizFeedback span{font-size:calc(12px*var(--wm-s));font-weight:750;color:#718891}
.wmNextBtn,.wmRandomBtn,.wmSmallBtn,.wmWorldBtn{border:1px solid #c8dde5;background:#fff;color:#153f50;border-radius:calc(9px*var(--wm-s));font-weight:850;cursor:pointer}.wmNextBtn{padding:calc(8px*var(--wm-s)) calc(14px*var(--wm-s));font-size:calc(13px*var(--wm-s))}
.wmMapShell{position:relative;min-height:0;flex:1;width:100%;overflow:hidden;border-radius:calc(18px*var(--wm-s));background:linear-gradient(180deg,#ccebf5 0%,#def2f5 100%);box-shadow:inset 0 0 0 1px rgba(25,83,99,.12)}
.wmSvg{width:100%;height:100%;display:block;touch-action:manipulation}.wmOcean{fill:#d8f0f6}.wmCountry{fill:#eef4ec;stroke:#fff;stroke-width:1.25;cursor:pointer;transition:fill .16s ease,opacity .16s ease,filter .16s ease}.wmCountry:hover{fill:#79cbd0;filter:drop-shadow(0 0 2px rgba(12,79,91,.25))}.wmCountry.selected{fill:#16a4b1}.wmCountry.correct{fill:#3acb91}.wmCountry.wrong{fill:#ef747d}.wmCountry.dim{opacity:.28;cursor:default}.wmCountry.dim:hover{fill:#eef4ec;filter:none}
.wmInfoDock{position:absolute;left:calc(12px*var(--wm-s));right:calc(12px*var(--wm-s));bottom:calc(12px*var(--wm-s));display:flex;align-items:center;justify-content:space-between;gap:calc(8px*var(--wm-s));pointer-events:none}
.wmInfoCard,.wmEmptyHint{pointer-events:auto;display:flex;align-items:center;gap:calc(9px*var(--wm-s));min-height:calc(52px*var(--wm-s));padding:calc(7px*var(--wm-s)) calc(10px*var(--wm-s));border:1px solid rgba(177,210,220,.92);background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-radius:calc(12px*var(--wm-s));box-shadow:0 calc(6px*var(--wm-s)) calc(18px*var(--wm-s)) rgba(15,70,85,.13)}
.wmInfoCard img{width:calc(56px*var(--wm-s));height:calc(38px*var(--wm-s));object-fit:contain;flex:0 0 auto}.wmInfoText{display:flex;flex-direction:column;min-width:0}.wmInfoText strong{font-size:calc(16px*var(--wm-s));font-weight:950;line-height:1.08}.wmInfoText span{font-size:calc(11px*var(--wm-s));font-weight:750;color:#6f8790;white-space:nowrap}.wmSmallBtn{padding:calc(6px*var(--wm-s)) calc(9px*var(--wm-s));font-size:calc(11px*var(--wm-s));white-space:nowrap}
.wmEmptyHint{font-size:calc(12px*var(--wm-s));font-weight:800;color:#66818b}.wmRandomBtn{pointer-events:auto;padding:calc(9px*var(--wm-s)) calc(13px*var(--wm-s));font-size:calc(12px*var(--wm-s));white-space:nowrap}.wmWorldBtn{position:absolute;right:calc(12px*var(--wm-s));top:calc(12px*var(--wm-s));padding:calc(7px*var(--wm-s)) calc(10px*var(--wm-s));font-size:calc(11px*var(--wm-s));box-shadow:0 4px 14px rgba(20,67,80,.13)}
.mkWorldMap.wmTiny{padding:calc(9px*var(--wm-s));gap:calc(6px*var(--wm-s))}.mkWorldMap.wmTiny .wmScope{display:none}.mkWorldMap.wmTiny .wmQuizHead{min-height:calc(38px*var(--wm-s))}.mkWorldMap.wmTiny .wmQuizPrompt strong,.mkWorldMap.wmTiny .wmQuizFeedback b{font-size:calc(19px*var(--wm-s))}.mkWorldMap.wmTiny .wmInfoCard img{width:calc(46px*var(--wm-s));height:calc(31px*var(--wm-s))}
.mkWorldMap.wmMicro .wmModes button{font-size:calc(11px*var(--wm-s));padding:calc(6px*var(--wm-s)) calc(8px*var(--wm-s))}.mkWorldMap.wmMicro .wmQuizPrompt span,.mkWorldMap.wmMicro .wmQuizFeedback span{display:none}.mkWorldMap.wmMicro .wmInfoText span,.mkWorldMap.wmMicro .wmSmallBtn{display:none}.mkWorldMap.wmMicro .wmRandomBtn{padding:calc(7px*var(--wm-s)) calc(9px*var(--wm-s));font-size:calc(10px*var(--wm-s))}.mkWorldMap.wmMicro .wmEmptyHint{display:none}

/* ===== v92: Geografi Memory ===== */
.widget.mk-geomemory-transparent,.widget.mk-geomemory-transparent .body{background:transparent!important;box-shadow:none!important}
.mkGeoMemory{--gm-s:1;height:100%;min-height:0;display:flex;flex-direction:column;gap:calc(10px*var(--gm-s));padding:calc(14px*var(--gm-s));box-sizing:border-box;color:#123c4b;overflow:hidden;position:relative}
.gmLoading{margin:auto;font-size:calc(18px*var(--gm-s));font-weight:900;color:#5f7c86}.gmLoading.gmError{color:#ad4650}
.gmTop{display:flex;align-items:center;justify-content:space-between;gap:calc(12px*var(--gm-s));flex:0 0 auto}.gmTitle{display:flex;flex-direction:column;min-width:0}.gmTitle strong{font-size:calc(20px*var(--gm-s));font-weight:950;line-height:1}.gmTitle span{font-size:calc(11px*var(--gm-s));font-weight:800;color:#708993;margin-top:calc(4px*var(--gm-s))}
.gmStats{display:flex;align-items:center;gap:calc(7px*var(--gm-s));flex-wrap:wrap;justify-content:flex-end}.gmStats>span{display:flex;align-items:baseline;gap:calc(4px*var(--gm-s));padding:calc(6px*var(--gm-s)) calc(9px*var(--gm-s));border:1px solid #d2e3e9;border-radius:calc(10px*var(--gm-s));background:rgba(255,255,255,.9);font-size:calc(10px*var(--gm-s));font-weight:800;color:#6b838c}.gmStats b{font-size:calc(15px*var(--gm-s));color:#103f50}.gmScopeNote{font-size:calc(10px*var(--gm-s));font-weight:800;color:#9b7330;text-align:center;background:#fff6df;border-radius:calc(8px*var(--gm-s));padding:calc(5px*var(--gm-s)) calc(8px*var(--gm-s))}
.gmBoard{min-height:0;flex:1;display:grid;grid-template-columns:repeat(var(--gm-cols),minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:calc(8px*var(--gm-s));perspective:1200px}
.gmCard{min-width:0;min-height:0;padding:0;border:0;background:transparent;cursor:pointer;perspective:900px;touch-action:manipulation;contain:layout paint}.gmCardInner{display:block;position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .38s cubic-bezier(.2,.72,.25,1);border-radius:calc(12px*var(--gm-s));will-change:transform;transform:translateZ(0)}.gmCard.open .gmCardInner,.gmCard.matched .gmCardInner{transform:translateZ(0) rotateY(180deg)}
.gmBack,.gmFront{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:inherit;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;transform:translateZ(.1px)}.gmBack{flex-direction:column;gap:calc(3px*var(--gm-s));background:linear-gradient(145deg,#0c6371,#123b62);color:white;border:1px solid rgba(255,255,255,.28);box-shadow:0 calc(5px*var(--gm-s)) calc(13px*var(--gm-s)) rgba(13,53,69,.18)}.gmBack>span{font-size:calc(24px*var(--gm-s));filter:drop-shadow(0 2px 4px rgba(0,0,0,.15))}.gmBack small{font-size:calc(8px*var(--gm-s));letter-spacing:.13em;font-weight:950;opacity:.75}
.gmFront{transform:rotateY(180deg) translateZ(.1px);background:#fff;border:1px solid #cfe0e7;box-shadow:0 calc(5px*var(--gm-s)) calc(14px*var(--gm-s)) rgba(17,67,83,.13);padding:calc(8px*var(--gm-s));box-sizing:border-box}.gmCard.matched .gmFront{border-color:#55c69d;box-shadow:0 0 0 calc(2px*var(--gm-s)) rgba(62,193,146,.16),0 calc(5px*var(--gm-s)) calc(14px*var(--gm-s)) rgba(17,67,83,.12)}
.gmFlagWrap{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.gmFlagWrap img{display:block;max-width:96%;max-height:90%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 calc(3px*var(--gm-s)) calc(6px*var(--gm-s)) rgba(22,55,68,.16));pointer-events:none}.gmCountryName{font-size:calc(17px*var(--gm-s));font-weight:950;line-height:1.05;text-align:center;color:#123d4e;overflow-wrap:anywhere}
.gmBottom{display:flex;align-items:center;justify-content:center;gap:calc(8px*var(--gm-s));flex:0 0 auto}.gmBottom button{font-size:calc(12px*var(--gm-s))!important;padding:calc(8px*var(--gm-s)) calc(13px*var(--gm-s))!important;border-radius:calc(9px*var(--gm-s))!important}
.gmWin{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:rgba(8,54,69,.36);backdrop-filter:blur(5px);animation:gmFade .25s ease}.gmWinCard{min-width:min(62%,360px);display:flex;flex-direction:column;align-items:center;text-align:center;gap:calc(8px*var(--gm-s));padding:calc(24px*var(--gm-s));border-radius:calc(18px*var(--gm-s));background:white;box-shadow:0 25px 70px rgba(7,45,59,.26)}.gmWinCard>span{font-size:calc(44px*var(--gm-s))}.gmWinCard strong{font-size:calc(25px*var(--gm-s));font-weight:950;color:#0a5562}.gmWinCard small{font-size:calc(12px*var(--gm-s));font-weight:800;color:#728992}.gmWinCard button{font-size:calc(13px*var(--gm-s))!important;padding:calc(9px*var(--gm-s)) calc(16px*var(--gm-s))!important}@keyframes gmFade{from{opacity:0}to{opacity:1}}
.mkGeoMemory.gmTiny{padding:calc(9px*var(--gm-s));gap:calc(6px*var(--gm-s))}.mkGeoMemory.gmTiny .gmTitle span,.mkGeoMemory.gmTiny .gmScopeNote{display:none}.mkGeoMemory.gmTiny .gmTitle strong{font-size:calc(16px*var(--gm-s))}.mkGeoMemory.gmTiny .gmStats>span{padding:calc(4px*var(--gm-s)) calc(6px*var(--gm-s))}.mkGeoMemory.gmTiny .gmCountryName{font-size:calc(14px*var(--gm-s))}.mkGeoMemory.gmTiny .gmBoard{gap:calc(5px*var(--gm-s))}.mkGeoMemory.gmTiny .gmBack small{display:none}.mkGeoMemory.gmTiny .gmBottom button{padding:calc(6px*var(--gm-s)) calc(9px*var(--gm-s))!important}
.mkGeoMemory.gmMicro .gmTitle{display:none}.mkGeoMemory.gmMicro .gmStats{width:100%;justify-content:center}.mkGeoMemory.gmMicro .gmStats>span:not(:first-child){display:none}.mkGeoMemory.gmMicro .gmBottom .gmReveal{display:none}.mkGeoMemory.gmMicro .gmBack>span{font-size:calc(18px*var(--gm-s))}.mkGeoMemory.gmMicro .gmCountryName{font-size:calc(11px*var(--gm-s))}.mkGeoMemory.gmMicro .gmFront{padding:calc(4px*var(--gm-s))}
/* v91.1 – world map navigation + stronger quiz task */
.wmQuizHead{min-height:calc(92px*var(--wm-s));align-items:stretch}
.wmQuizTask{min-width:min(520px,70%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(3px*var(--wm-s));padding:calc(8px*var(--wm-s)) calc(18px*var(--wm-s));border:1px solid #d4e5ea;background:#fff;border-radius:calc(15px*var(--wm-s));box-shadow:0 5px 18px rgba(15,70,85,.08)}
.wmTaskEyebrow{font-size:calc(10px*var(--wm-s));font-weight:950;letter-spacing:.16em;color:#25899a}.wmTaskMain{display:flex;align-items:center;justify-content:center;gap:calc(10px*var(--wm-s))}.wmTaskMain img{width:calc(48px*var(--wm-s));height:calc(32px*var(--wm-s));object-fit:contain}.wmTaskMain strong{font-size:calc(28px*var(--wm-s));font-weight:950;color:#103f50}.wmTaskHint{font-size:calc(11px*var(--wm-s));font-weight:800;color:#6d8790}.wmQuizTask.correct{border-color:#a8e2ca;background:#f3fff9}.wmQuizTask.correct .wmTaskEyebrow{color:#13835f}
.wmMapControls{position:absolute;right:calc(12px*var(--wm-s));top:calc(12px*var(--wm-s));display:flex;flex-direction:column;gap:calc(5px*var(--wm-s));z-index:5}.wmMapControls button{width:calc(38px*var(--wm-s));height:calc(38px*var(--wm-s));border:1px solid #bfd8e1;background:rgba(255,255,255,.96);border-radius:calc(10px*var(--wm-s));font-size:calc(22px*var(--wm-s));font-weight:950;color:#153f50;cursor:pointer;box-shadow:0 4px 14px rgba(20,67,80,.12)}.wmMapControls button:hover{background:#f4fbfd}
.wmSvg{touch-action:none;cursor:grab}.wmSvg:active{cursor:grabbing}
.mkWorldMap.wmTiny .wmQuizHead{min-height:calc(66px*var(--wm-s))}.mkWorldMap.wmTiny .wmQuizTask{min-width:0;flex:1;padding:calc(5px*var(--wm-s)) calc(8px*var(--wm-s))}.mkWorldMap.wmTiny .wmTaskMain strong{font-size:calc(20px*var(--wm-s))}.mkWorldMap.wmTiny .wmTaskMain img{width:calc(38px*var(--wm-s));height:calc(25px*var(--wm-s))}.mkWorldMap.wmMicro .wmTaskHint{display:none}.mkWorldMap.wmMicro .wmMapControls button{width:calc(31px*var(--wm-s));height:calc(31px*var(--wm-s));font-size:calc(17px*var(--wm-s))}

/* v92.2 – compact world-map quiz header: map remains the visual focus */
.mkWorldMap .wmQuizHead{min-height:calc(58px*var(--wm-s));max-height:calc(72px*var(--wm-s));align-items:center;gap:calc(10px*var(--wm-s))}
.mkWorldMap .wmQuizTask{min-width:0;width:auto;max-width:min(560px,72%);display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:calc(10px*var(--wm-s));row-gap:0;align-items:center;justify-content:start;padding:calc(6px*var(--wm-s)) calc(12px*var(--wm-s));border-radius:calc(12px*var(--wm-s));text-align:left}
.mkWorldMap .wmTaskEyebrow{grid-column:2;grid-row:1;font-size:calc(8px*var(--wm-s));line-height:1.05;align-self:end}
.mkWorldMap .wmTaskMain{display:contents}
.mkWorldMap .wmTaskMain img{grid-column:1;grid-row:1 / span 3;width:calc(58px*var(--wm-s));height:calc(39px*var(--wm-s));max-height:100%;object-fit:contain;border-radius:calc(4px*var(--wm-s));filter:drop-shadow(0 2px 4px rgba(16,63,80,.12))}
.mkWorldMap .wmTaskMain strong{grid-column:2;grid-row:2;font-size:calc(22px*var(--wm-s));line-height:1.02;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mkWorldMap .wmTaskHint{grid-column:2;grid-row:3;font-size:calc(9px*var(--wm-s));line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;align-self:start}
.mkWorldMap .wmNextBtn{flex:0 0 auto;padding:calc(7px*var(--wm-s)) calc(12px*var(--wm-s));font-size:calc(11px*var(--wm-s))}
.mkWorldMap.wmTiny .wmQuizHead{min-height:calc(48px*var(--wm-s));max-height:calc(56px*var(--wm-s));gap:calc(6px*var(--wm-s))}
.mkWorldMap.wmTiny .wmQuizTask{max-width:74%;padding:calc(4px*var(--wm-s)) calc(7px*var(--wm-s));column-gap:calc(6px*var(--wm-s))}
.mkWorldMap.wmTiny .wmTaskMain img{width:calc(42px*var(--wm-s));height:calc(28px*var(--wm-s))}
.mkWorldMap.wmTiny .wmTaskMain strong{font-size:calc(17px*var(--wm-s))}
.mkWorldMap.wmTiny .wmTaskEyebrow{font-size:calc(7px*var(--wm-s))}
.mkWorldMap.wmTiny .wmTaskHint{font-size:calc(8px*var(--wm-s))}
.mkWorldMap.wmMicro .wmQuizHead{min-height:calc(40px*var(--wm-s));max-height:calc(46px*var(--wm-s))}
.mkWorldMap.wmMicro .wmTaskEyebrow,.mkWorldMap.wmMicro .wmTaskHint{display:none}
.mkWorldMap.wmMicro .wmQuizTask{grid-template-rows:1fr;max-width:72%}
.mkWorldMap.wmMicro .wmTaskMain img{grid-row:1;width:calc(32px*var(--wm-s));height:calc(21px*var(--wm-s))}
.mkWorldMap.wmMicro .wmTaskMain strong{grid-row:1;font-size:calc(14px*var(--wm-s))}

/* v92.5 – administratorvisning av andre brukeres tavler (kun lesing) */
body.admin-readonly-mode #topbar,
body.admin-readonly-mode #toolbarWrap,
body.admin-readonly-mode #quickActions,
body.admin-readonly-mode #textEditorBar,
body.admin-readonly-mode #layersPanel,
body.admin-readonly-mode .drawer,
body.admin-readonly-mode .modal,
body.admin-readonly-mode .drawControls,
body.admin-readonly-mode .widgetToolbar,
body.admin-readonly-mode .widgetChrome,
body.admin-readonly-mode .widgetHandle,
body.admin-readonly-mode .resizeHandle,
body.admin-readonly-mode .rotateHandle,
body.admin-readonly-mode #presentationMenuToggle{display:none!important}
body.admin-readonly-mode #stage,
body.admin-readonly-mode #board,
body.admin-readonly-mode #board *{pointer-events:none!important;user-select:none!important}
body.admin-readonly-mode .widget,body.admin-readonly-mode [data-widget]{outline:none!important}
#adminReadonlyBar{position:fixed;left:50%;top:14px;transform:translateX(-50%);z-index:10000;display:flex;align-items:center;justify-content:space-between;gap:20px;width:min(980px,calc(100vw - 34px));padding:9px 12px;border:1px solid #c9e4f3;border-radius:14px;background:rgba(255,255,255,.96);box-shadow:0 12px 34px rgba(22,66,94,.16);backdrop-filter:blur(12px);font-family:Inter,system-ui,sans-serif;color:#173650}
#adminReadonlyBar>div{display:flex;align-items:center;gap:8px}#adminReadonlyBar span{font-size:12px;color:#6d8497}#adminReadonlyBar button,#adminReadonlyBar a{border:1px solid #d7e6ef;background:#fff;color:#315a73;border-radius:9px;padding:7px 10px;font-weight:800;font-size:11px;text-decoration:none;cursor:pointer}#adminReadonlyBar a{background:#eaf8ff;border-color:#c9e7f5;color:#177ca8}
body.admin-readonly-mode #boardHeader{display:none!important}
@media(max-width:700px){#adminReadonlyBar{top:7px;flex-direction:column;gap:6px;width:calc(100vw - 14px);padding:7px}#adminReadonlyBar>div{flex-wrap:wrap;justify-content:center}}


/* =========================================================
   v97.0 – Widgetbibliotek med skoletrinn
   ========================================================= */
.kvLibraryLevelWrap{
  padding:10px;
  border:1px solid #d9e5ed;
  border-radius:15px;
  background:linear-gradient(135deg,#f7fbfd,#f4f2ff);
}
.kvLibraryLevelLabel,.kvLibraryCategoryLabel{
  font-size:9px;
  font-weight:950;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#718696;
  margin:0 0 7px 2px;
}
.kvLibraryCategoryLabel{margin-top:2px;margin-bottom:0}
.kvLibraryLevels{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
}
.kvLibraryLevel{
  min-width:0;
  border:1px solid #d5e2ea;
  background:#fff;
  border-radius:12px;
  padding:9px 10px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:8px;
  color:#426078;
  text-align:left;
  transition:.15s;
}
.kvLibraryLevel span{
  min-width:36px;
  height:27px;
  padding:0 6px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:#edf5fa;
  color:#557187;
  font-size:9px;
  font-weight:950;
}
.kvLibraryLevel strong{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kvLibraryLevel:hover{border-color:#b8d7e7;background:#fbfdff}
.kvLibraryLevel.active{
  border-color:#9386e8;
  background:#eeebff;
  color:#4f42ad;
  box-shadow:inset 0 0 0 1px rgba(103,87,239,.12)
}
.kvLibraryLevel.active span{background:#6757ef;color:#fff}
@media(max-width:620px){
  .kvLibraryLevels{grid-template-columns:1fr}
  .kvLibraryLevel{padding:8px 9px}
}

/* ===== v99.4 – PowerPoint-style presentation display ===== */
body.mk-presentation-window #boardHeader,
body.mk-presentation-window #topbar,
body.mk-presentation-window #toolbarWrap,
body.mk-presentation-window #quickActions,
body.mk-presentation-window #textEditorBar,
body.mk-presentation-window #layersPanel,
body.mk-presentation-window #drawer,
body.mk-presentation-window #presentationPageHint,
body.mk-presentation-window #adminReadonlyBar,
body.mk-presentation-window .drawControls,
body.mk-presentation-window #mkConflictBar,
body.mk-presentation-window #mkOfflineBar{display:none!important}
body.mk-presentation-window{overflow:hidden!important;background:#111;cursor:default}
body.mk-presentation-window #viewport{inset:0!important;width:100vw!important;height:100vh!important}
body.mk-presentation-window #stage{transform-origin:top left}
body.mk-presentation-window .widget .head,
body.mk-presentation-window .widget .resizeGrip{display:none!important}
body.mk-presentation-window .widget{outline:none!important}

#mkPresentationHelper{position:fixed;right:18px;top:18px;z-index:100000;display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:rgba(15,31,48,.88);color:#fff;font:600 12px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif;box-shadow:0 8px 28px rgba(0,0,0,.22);opacity:.2;transition:opacity .2s ease}
#mkPresentationHelper:hover{opacity:1}
#mkPresentationHelper button{border:0;border-radius:9px;background:#fff;color:#17324d;padding:8px 11px;font-weight:750;cursor:pointer}
#mkPresentationHelper.is-fullscreen{display:none}

#mkScreenChooser{position:fixed;inset:0;z-index:100000;background:rgba(18,37,55,.4);backdrop-filter:blur(5px);display:grid;place-items:center;padding:24px}
.mkScreenChooserCard{width:min(560px,calc(100vw - 32px));background:#fff;border:1px solid #dce8f1;border-radius:22px;padding:26px;box-shadow:0 24px 70px rgba(22,50,75,.22);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#18344d}
.mkScreenChooserEyebrow{font-size:11px;font-weight:800;letter-spacing:.11em;color:#5a7a94;margin-bottom:7px}
.mkScreenChooserCard h2{font-size:24px;margin:0 0 5px}.mkScreenChooserCard>p{margin:0 0 18px;color:#60788c}
.mkScreenChoices{display:grid;gap:9px}.mkScreenChoice{width:100%;border:1px solid #dce8f1;background:#f8fbfd;border-radius:14px;padding:13px 15px;display:flex;align-items:center;gap:13px;text-align:left;color:#17324d;cursor:pointer}.mkScreenChoice:hover{background:#eef7fd;border-color:#acd7f1}.mkScreenIcon{font-size:25px}.mkScreenChoice b{display:block;font-size:14px}.mkScreenChoice small{display:block;margin-top:3px;color:#71879a;font-size:12px}.mkScreenCancel{margin-top:16px;border:1px solid #d9e4ec;background:#fff;color:#4c667a;border-radius:10px;padding:9px 14px;font-weight:700;cursor:pointer}

/* =========================================================
   v99.5 – SMARTBOARD PRESENTATION MODE
   Full canvas + only drawing and widget access on display.
   ========================================================= */
body.mk-presentation-window{margin:0!important;overflow:hidden!important;background:#000!important}
body.mk-presentation-window #viewport{position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;margin:0!important;padding:0!important}
body.mk-presentation-window #toolbarWrap,
body.mk-presentation-window #topbar,
body.mk-presentation-window #boardHeader,
body.mk-presentation-window #presentationPageHint,
body.mk-presentation-window #webBoardNav,
body.mk-presentation-window #historyControls{display:none!important}

#mkPresentationHelper{position:fixed;right:18px;bottom:18px;z-index:10020;display:block!important;pointer-events:none}
#mkPresentationHelper .mkPresentationTools{display:flex;align-items:center;gap:8px;padding:7px;background:rgba(255,255,255,.94);border:1px solid rgba(19,50,72,.12);border-radius:16px;box-shadow:0 10px 34px rgba(0,0,0,.18);pointer-events:auto;backdrop-filter:blur(12px)}
#mkPresentationHelper button{border:0;background:transparent;color:#21384b;border-radius:11px;min-width:72px;min-height:60px;padding:7px 10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font:inherit;font-weight:750;cursor:pointer;touch-action:manipulation}
#mkPresentationHelper button span{font-size:25px;line-height:1}
#mkPresentationHelper button b{font-size:11px}
#mkPresentationHelper button:hover,#mkPresentationHelper button:active,#mkPresentationHelper button.active{background:#e8f4fb;color:#176f9e}
#mkPresentationHelper.is-fullscreen .mkPresentationFs{display:none!important}

body.mk-presentation-window.drawOn #mkPresentationHelper{opacity:.16;transition:opacity .18s ease}
body.mk-presentation-window.drawOn #mkPresentationHelper:hover,
body.mk-presentation-window.drawOn #mkPresentationHelper:focus-within{opacity:1}
body.mk-presentation-window .drawControls{top:18px!important;left:50%!important;transform:translateX(-50%)!important;z-index:10030!important;max-width:calc(100vw - 32px);flex-wrap:wrap;justify-content:center}
body.mk-presentation-window .modal{z-index:10040!important}
body.mk-presentation-window .modal .card{max-height:calc(100vh - 48px)!important;overflow:auto!important}

@media (pointer:coarse){
  #mkPresentationHelper{right:14px;bottom:14px}
  #mkPresentationHelper button{min-width:88px;min-height:70px}
  #mkPresentationHelper button span{font-size:30px}
  #mkPresentationHelper button b{font-size:13px}
  body.mk-presentation-window .drawControls button{min-height:46px}
}

/* =========================================================
   v99.6 – Compact SmartBoard controls + tight widget frames
   ========================================================= */
/* Presentation helper must be two small floating buttons only. The old v99.4
   top/bottom values otherwise stretch the helper into a full-height strip. */
body.mk-presentation-window #mkPresentationHelper{
  top:12px!important;
  right:12px!important;
  bottom:auto!important;
  left:auto!important;
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  opacity:1!important;
  color:inherit!important;
  pointer-events:none!important;
}
body.mk-presentation-window #mkPresentationHelper .mkPresentationTools{
  display:flex!important;
  gap:6px!important;
  padding:4px!important;
  border-radius:12px!important;
  background:rgba(255,255,255,.88)!important;
  border:1px solid rgba(19,50,72,.12)!important;
  box-shadow:0 6px 20px rgba(0,0,0,.14)!important;
  backdrop-filter:blur(10px)!important;
  pointer-events:auto!important;
}
body.mk-presentation-window #mkPresentationHelper button{
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  min-height:42px!important;
  padding:0!important;
  border-radius:9px!important;
  display:grid!important;
  place-items:center!important;
  background:transparent!important;
  color:#24445a!important;
}
body.mk-presentation-window #mkPresentationHelper button span{
  font-size:21px!important;
  line-height:1!important;
}
body.mk-presentation-window #mkPresentationHelper button:hover,
body.mk-presentation-window #mkPresentationHelper button:active,
body.mk-presentation-window #mkPresentationHelper button.active{
  background:#e8f4fb!important;
  color:#176f9e!important;
}
body.mk-presentation-window.drawOn #mkPresentationHelper{
  opacity:1!important;
}
@media (pointer:coarse){
  body.mk-presentation-window #mkPresentationHelper{top:10px!important;right:10px!important}
  body.mk-presentation-window #mkPresentationHelper button{width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important}
  body.mk-presentation-window #mkPresentationHelper button span{font-size:24px!important}
}

/* Visual widgets should not expose a huge empty selection frame. Their body
   fills the shell and the resize engine below keeps intrinsic proportions. */
.widget.traffic-pro .body{width:100%!important;height:calc(100% - 38px)!important;box-sizing:border-box!important}


/* =========================================================
   v99.8 – SmartBoard fullscreen toggle
   Keep the fullscreen control visible while fullscreen is active so a
   touch-only display can also leave fullscreen without an ESC key.
   ========================================================= */
body.mk-presentation-window #mkPresentationHelper.is-fullscreen{
  display:flex!important;
}
body.mk-presentation-window #mkPresentationHelper.is-fullscreen .mkPresentationFs{
  display:grid!important;
}
body.mk-presentation-window #mkPresentationHelper .mkPresentationFs.active{
  background:#e8f4fb!important;
  color:#176f9e!important;
}


/* v99.13 – text editing must behave like a real editor */
.widget.text-widget .kvTextSurface,
.widget.text-pro .kvTextSurface{
  user-select:text!important;
  -webkit-user-select:text!important;
  cursor:text!important;
}
.widget.text-widget .head,
.widget.text-pro .head{
  user-select:none!important;
  -webkit-user-select:none!important;
}

/* v99.18 — remote screen */
#remoteScreen.screen-connected{background:#e9f8f1!important;color:#087a50!important;box-shadow:inset 0 0 0 2px #77d3ad!important}
#mkRemoteOverlay{position:fixed;inset:0;z-index:100000;background:rgba(12,31,45,.48);backdrop-filter:blur(7px);display:grid;place-items:center;padding:20px}
.mkRemoteCard{position:relative;width:min(610px,96vw);background:#fff;border-radius:25px;padding:31px;box-shadow:0 28px 90px rgba(13,43,62,.28);color:#173650}.mkRemoteClose{position:absolute;right:18px;top:15px;border:0;background:transparent;font-size:28px;color:#718594;cursor:pointer}.mkRemoteEyebrow{font-size:11px;letter-spacing:.14em;font-weight:900;color:#168dbd}.mkRemoteCard h2{font-size:27px;margin:6px 0 7px}.mkRemoteIntro{margin:0;color:#687f90;line-height:1.5}.mkRemoteCode{font-size:49px;letter-spacing:.14em;font-weight:900;text-align:center;margin:25px 0 11px;color:#173650}.mkRemoteStatus{display:flex;align-items:center;justify-content:center;gap:8px;color:#738694;font-weight:750;font-size:14px}.mkRemoteStatus i{width:9px;height:9px;border-radius:50%;background:#b6c2ca}.mkRemoteStatus.on{color:#087a50}.mkRemoteStatus.on i{background:#24b47e;box-shadow:0 0 0 5px #24b47e1d}.mkRemoteModes{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:25px}.mkRemoteModes button{text-align:left;border:1px solid #dbe6ed;background:#f8fbfc;border-radius:15px;padding:16px;cursor:pointer;color:#173650}.mkRemoteModes button.active{border:2px solid #168dbd;background:#eef9fd;padding:15px}.mkRemoteModes b,.mkRemoteModes span{display:block}.mkRemoteModes b{font-size:15px;margin-bottom:6px}.mkRemoteModes span{font-size:12px;color:#6f8493;line-height:1.4}.mkRemoteFoot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #e8eef2;margin-top:22px;padding-top:18px;color:#7b8e9b;font-size:12px}.mkDisconnect{border:0;background:#fff0f0;color:#b13c3c;font-weight:800;padding:9px 12px;border-radius:10px;cursor:pointer}
body.mk-screen-client #boardHeader,body.mk-screen-client #topbar,body.mk-screen-client #toolbarWrap,body.mk-screen-client #quickActions,body.mk-screen-client #presentationPageHint,body.mk-screen-client #presentationMenuToggle{display:none!important}body.mk-screen-client{background:#111;overflow:hidden}#mkScreenBadge{position:fixed;right:15px;top:14px;z-index:99999;background:rgba(16,35,48,.78);color:#fff;border-radius:999px;padding:7px 11px;font:700 11px system-ui;opacity:.7;pointer-events:none}body.mk-screen-view #board{pointer-events:none!important}body.mk-screen-view #drawCanvas{pointer-events:none!important}
@media(max-width:620px){.mkRemoteModes{grid-template-columns:1fr}.mkRemoteCode{font-size:38px}.mkRemoteCard{padding:25px 20px}.mkRemoteFoot{align-items:flex-start;gap:10px}}

/* =========================================================
   v99.19 – SKJERMKLIENT: INTERAKTIV PRESENTASJONSMENY
   ========================================================= */
#mkScreenInteractiveTools{position:fixed;right:18px;bottom:18px;z-index:10040;font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
#mkScreenInteractiveTools[hidden]{display:none!important}
#mkScreenInteractiveTools .mkScreenTools{display:flex;align-items:center;gap:5px;padding:7px;background:rgba(255,255,255,.96);border:1px solid rgba(19,50,72,.14);border-radius:16px;box-shadow:0 12px 36px rgba(0,0,0,.20);backdrop-filter:blur(12px)}
#mkScreenInteractiveTools button{border:0;background:transparent;color:#21384b;border-radius:11px;min-width:66px;min-height:58px;padding:6px 9px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font:inherit;font-weight:750;cursor:pointer;touch-action:manipulation}
#mkScreenInteractiveTools button span{font-size:24px;line-height:1}#mkScreenInteractiveTools button b{font-size:10px}
#mkScreenInteractiveTools button:hover,#mkScreenInteractiveTools button:active,#mkScreenInteractiveTools button.active{background:#e8f4fb;color:#176f9e}
#mkScreenInteractiveTools .mkScreenToolsDivider{width:1px;height:40px;background:#dce7ee;margin:0 3px}
#mkScreenInteractiveTools .mkScreenPageBtn{min-width:46px;width:46px;padding:0}#mkScreenInteractiveTools .mkScreenPageBtn span{font-size:30px;font-weight:500}
#mkScreenInteractiveTools .mkScreenAddPage{color:#12815f}.mkScreenPageLabel{min-width:48px;text-align:center;font-size:12px;font-weight:850;color:#36556d;white-space:nowrap}
body.mk-screen-interactive #mkScreenBadge{bottom:91px}
body.mk-screen-interactive.drawOn .drawControls{display:flex!important;z-index:10045!important}
@media(max-width:760px){#mkScreenInteractiveTools{right:10px;bottom:10px}#mkScreenInteractiveTools .mkScreenTools{gap:2px;padding:5px}#mkScreenInteractiveTools button{min-width:54px;min-height:52px;padding:5px}#mkScreenInteractiveTools .mkScreenPageBtn{min-width:40px;width:40px}.mkScreenPageLabel{min-width:42px}}

/* =========================================================
   v99.20 – SKJERMKLIENT: KOMPAKT STATUSINDIKATOR
   ========================================================= */
body.mk-screen-interactive #mkScreenBadge{
  top:12px!important;
  right:12px!important;
  bottom:auto!important;
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  padding:5px 9px!important;
  border-radius:999px!important;
  font-size:10px!important;
  line-height:1.2!important;
  opacity:.58!important;
  white-space:nowrap!important;
}

/* v99.22 – sammenleggbar meny i interaktiv skjermmodus */
#mkScreenInteractiveTools{display:flex;flex-direction:column;align-items:flex-end;gap:7px}
#mkScreenInteractiveTools .mkScreenToolsToggle{display:flex!important;width:50px!important;height:50px!important;min-width:50px!important;min-height:50px!important;padding:0!important;border-radius:50%!important;background:rgba(255,255,255,.96)!important;border:1px solid rgba(19,50,72,.14)!important;box-shadow:0 8px 24px rgba(0,0,0,.18)!important;color:#21384b!important;align-items:center!important;justify-content:center!important}
#mkScreenInteractiveTools .mkScreenToolsToggle span{font-size:23px!important;line-height:1!important}
#mkScreenInteractiveTools .mkScreenTools{transition:opacity .16s ease,transform .16s ease;transform-origin:bottom right}
#mkScreenInteractiveTools:not(.open) .mkScreenTools{display:none!important}
#mkScreenInteractiveTools.open .mkScreenTools{display:flex!important}
@media(max-width:760px){#mkScreenInteractiveTools .mkScreenToolsToggle{width:46px!important;height:46px!important;min-width:46px!important;min-height:46px!important}}

/* MittKlasserom 2.0 – Elevinteraksjon */
.mkStudentActivityModal{position:fixed;inset:0;z-index:120000;background:#102c3b80;display:grid;place-items:center;padding:20px;font-family:system-ui,-apple-system,"Segoe UI",sans-serif}.mkStudentActivityCard{width:min(620px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:24px;box-shadow:0 28px 90px #0004;color:#17384a}.mkStudentActivityHead{display:flex;justify-content:space-between;align-items:center;padding:24px 26px 12px}.mkStudentActivityHead small{font-weight:900;color:#1680a7;letter-spacing:.08em}.mkStudentActivityHead h2{margin:3px 0;font-size:27px}.mkSAclose{border:0;background:#edf3f5;border-radius:50%;width:42px;height:42px;font-size:25px;cursor:pointer}.mkSAcontent{padding:10px 26px 27px}.mkSAcontent label{display:block;font-weight:800;margin:15px 0 6px}.mkSAcontent input{display:block;width:100%;padding:13px 14px;border:1px solid #cbdde4;border-radius:12px;margin:7px 0;font:inherit}.mkSAcontent button{border:0;border-radius:12px;padding:12px 15px;font-weight:800;cursor:pointer}.mkSAprimary{background:#167ca2!important;color:#fff!important}.mkSAcontent>#saStart{width:100%;margin-top:14px}.mkSACodeLabel{text-align:center;font-size:12px;text-transform:uppercase;letter-spacing:.1em;font-weight:900;color:#68818d}.mkSACode{text-align:center;font-size:48px;font-weight:950;letter-spacing:.1em;margin:4px 0}.mkSAurl{text-align:center;color:#167ca2;font-weight:800}.mkSAstate{text-align:center;background:#eff7f7;border-radius:12px;padding:10px;margin:18px 0}.mkSARow{margin:13px 0}.mkSARow>div:first-child{display:flex;justify-content:space-between;gap:10px}.mkSABar{height:10px;background:#e7eff2;border-radius:999px;overflow:hidden;margin-top:6px}.mkSABar i{display:block;height:100%;background:#1680a7;border-radius:999px;transition:width .25s}.mkSAactions{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}.mkSAactions button{flex:1;min-width:120px}

.mkSAerror{margin-top:14px;padding:12px 14px;border-radius:12px;background:#fff0f0;color:#a12b2b;font-weight:750}.mkSAcontent button:disabled{opacity:.6;cursor:wait}
/* MittKlasserom 2.1 – Elevøkt v2 */
.mkSATitle{margin:2px 0 6px;font-size:21px}.mkSAwide{width:100%;margin-top:14px}.mkSASessionStrip{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 8px}.mkSASessionStrip>div{background:#eff6f8;border-radius:14px;padding:12px 14px;text-align:center}.mkSASessionStrip span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#6b838f;font-weight:850}.mkSASessionStrip b{display:block;font-size:25px;margin-top:2px}.mkSACurrent{margin-top:18px}.mkSACurrent span{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#6b838f;font-weight:900}.mkSACurrent h3{margin:4px 0 0;font-size:21px}.mkSAlink{width:100%;background:transparent!important;color:#376174!important;margin-top:8px}.mkSADanger{width:100%;margin-top:18px!important;background:#fff1f1!important;color:#a33131!important;border:1px solid #efcaca!important}.mkSAerror{margin-top:12px;padding:12px 14px;border-radius:12px;background:#fff0f0;color:#982f2f;font-weight:750}@media(max-width:520px){.mkSASessionStrip{grid-template-columns:1fr}.mkSASessionStrip b{font-size:22px}}

/* v2.2 – Elevaktiviteter-bibliotek */
.mkStudentActivitiesTool{position:relative}.mkStudentActivitiesTool span{color:#167ca2}.mkStudentLibraryCard{width:min(760px,100%)}.mkStudentLibraryHead p,.mkStudentActivityHead p{margin:5px 0 0;color:#69818c}.mkStudentLibraryGrid{padding:8px 26px 28px;display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.mkStudentApp{position:relative;text-align:left!important;display:flex;flex-direction:column;align-items:flex-start;min-height:190px;padding:20px!important;border:1px solid #d7e4e9!important;background:#f8fbfc!important;color:#17384a!important;border-radius:18px!important;cursor:pointer}.mkStudentApp:not(.disabled):hover{border-color:#55a7c3!important;background:#f0f9fb!important;transform:translateY(-1px)}.mkStudentAppIcon{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:#dff1f6;color:#167ca2;font-size:23px;font-weight:900;margin-bottom:14px}.mkStudentApp strong{font-size:18px}.mkStudentApp small{font-size:13px;line-height:1.4;color:#637b87;margin-top:7px}.mkStudentApp em{position:absolute;right:13px;top:13px;font-size:10px;font-style:normal;font-weight:900;text-transform:uppercase;letter-spacing:.05em;color:#167ca2}.mkStudentApp.disabled{opacity:.55;cursor:default}.mkStudentApp.disabled em{color:#748891}@media(max-width:680px){.mkStudentLibraryGrid{grid-template-columns:1fr}.mkStudentApp{min-height:145px}}

/* v2.3 – Åpent svar */
.mkSATextPrompt{width:100%;min-height:105px;resize:vertical;border:1px solid #cbdde4;border-radius:12px;padding:13px 14px;font:inherit;color:#17384a}.mkSATextAnswers{display:grid;gap:9px;margin:15px 0}.mkSATextAnswer{display:flex;align-items:flex-start;gap:10px;padding:13px 14px;border:1px solid #dbe7eb;border-radius:13px;background:#f8fbfc}.mkSATextAnswer p{flex:1;margin:0;line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere}.mkSATextAnswer button{padding:5px 8px!important;background:#eaf2f5!important}.mkSATextAnswer.hiddenAnswer{opacity:.45}.mkSAempty{text-align:center;padding:22px;color:#718792;background:#f6f9fa;border-radius:13px}

/* v2.4 – Elevaktivitet på ekstern skjerm */
#mkScreenActivityPresentation{position:fixed;inset:0;z-index:110000;background:linear-gradient(145deg,#eaf5f8,#d8edf3);color:#17384a;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;padding:54px;overflow:auto}
#mkScreenActivityPresentation[hidden]{display:none!important}
.mkSAPresentInner{max-width:1500px;margin:0 auto}
.mkSAPresentEyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:18px;font-weight:900;color:#1680a7;margin-bottom:14px}
#mkSAPresentQuestion{font-size:clamp(42px,5vw,78px);line-height:1.08;margin:0 0 38px;max-width:1400px}
.mkSAPresentAnswers{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:18px}
.mkSAPresentAnswer{background:#fff;border:1px solid #cfe0e7;border-radius:22px;padding:24px 26px;font-size:clamp(24px,2.1vw,38px);line-height:1.28;box-shadow:0 12px 34px rgba(23,56,74,.10);overflow-wrap:anywhere}
.mkSAPresentEmpty{background:#ffffffaa;border:2px dashed #bfd5de;border-radius:20px;padding:30px;text-align:center;font-size:24px;color:#69808a}
body.mk-screen-activity-active #viewport{visibility:hidden!important}

.mkSAScreenActions{display:flex;align-items:center;gap:12px;margin-top:14px;padding:12px 13px;background:#eef7fa;border:1px solid #d4e6ed;border-radius:13px}
.mkSAScreenActions button{background:#fff!important;color:#176d8e!important;border:1px solid #bcd9e4!important;white-space:nowrap}
.mkSAScreenActions button.active{background:#176d8e!important;color:#fff!important}
.mkSAScreenActions button:disabled{opacity:.45;cursor:not-allowed}
.mkSAScreenActions small{color:#637b87;line-height:1.3}

#mkLocalActivityPresentation{position:fixed;inset:0;z-index:110000;background:linear-gradient(145deg,#eaf5f8,#d8edf3);color:#17384a;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;padding:54px;overflow:auto}
#mkLocalActivityPresentation[hidden]{display:none!important}
body.mk-local-activity-active #viewport{visibility:hidden!important}

/* v2.5 – fleksibel elevøkt */
.mkSAChooseHead{padding:18px 26px 4px}.mkSAChooseHead h3{margin:0 0 5px;font-size:22px}.mkSAChooseHead p{margin:0;color:#69818c}
.mkSAInSessionLibrary{padding-top:14px}.mkSAInSessionLibrary .mkStudentApp{min-height:160px}

/* v2.5.1 – Flervalg på ekstern skjerm */
.mkSAMultipleResults{display:flex!important;flex-direction:column;gap:20px!important}
.mkSAPresentMcRow{background:#fff;border:1px solid #cfe0e7;border-radius:20px;padding:20px 24px;box-shadow:0 10px 28px rgba(23,56,74,.08)}
.mkSAPresentMcTop{display:flex;justify-content:space-between;align-items:flex-end;gap:25px;margin-bottom:12px}
.mkSAPresentMcTop b{font-size:clamp(24px,2.2vw,40px);line-height:1.15}
.mkSAPresentMcTop span{font-size:clamp(17px,1.4vw,25px);font-weight:800;color:#587381;white-space:nowrap}
.mkSAPresentMcBar{height:22px;background:#e6eff2;border-radius:999px;overflow:hidden}
.mkSAPresentMcBar i{display:block;height:100%;background:#1680a7;border-radius:999px;transition:width .3s ease}

/* v2.5.2 – elevkode på ekstern skjerm */
.mkSAJoinCodeBox{grid-column:1/-1;background:#fff;border:1px solid #cfe0e7;border-radius:28px;padding:42px 36px;text-align:center;box-shadow:0 16px 46px rgba(23,56,74,.10)}
.mkSAJoinUrl{font-size:clamp(28px,3vw,48px);font-weight:850;color:#167ca2;margin-bottom:14px}
.mkSAJoinCode{font-size:clamp(72px,10vw,160px);font-weight:950;letter-spacing:.08em;line-height:1;color:#17384a;margin:10px 0 20px}
.mkSAJoinHint{font-size:clamp(20px,2vw,32px);color:#627b87;font-weight:700}
.mkSAScreenActionsMulti{flex-wrap:wrap}.mkSAScreenActionsMulti small{flex-basis:100%}

/* v2.5.3 – logo på elevaktivitetsskjerm */
.mkSAPresentBrand{margin-bottom:24px}
.mkSAPresentBrand img{display:block;max-width:min(420px,36vw);max-height:90px;width:auto;height:auto;object-fit:contain}

/* v2.6 – deltakernavn */
.mkSAParticipantButton{border:0!important;background:transparent!important;color:inherit!important;padding:0!important;margin:0!important;text-align:left!important;cursor:pointer}
.mkSAParticipantButton:hover b{text-decoration:underline}
.mkSAParticipantPanel{margin:0 22px 12px;padding:14px 16px;border:1px solid #d5e5eb;background:#f5fafb;border-radius:14px}
.mkSAParticipantPanelHead{display:flex;justify-content:space-between;gap:15px;margin-bottom:10px;color:#294c5b}
.mkSAParticipantNames{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:10px}.mkSAParticipantNames span{background:#fff;border:1px solid #d4e4ea;border-radius:999px;padding:6px 10px;font-weight:700;font-size:13px}
.mkSAParticipantPanel small{display:block;color:#6e838d;line-height:1.35}

/* v2.7 – Tegneaktivitet */
.mkDrawingGallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;padding:18px 24px}.mkDrawingCard{border:1px solid #d4e4ea;background:#fff;border-radius:14px;padding:8px;cursor:pointer;text-align:left}.mkDrawingCard img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;background:#fff;border-radius:9px}.mkDrawingCard div{padding:8px 4px 2px;display:flex;justify-content:space-between;gap:8px}.mkDrawingCard span{color:#68808b;font-size:12px}.mkDrawingPreviewHead{display:flex;align-items:center;gap:18px;padding:14px 22px}.mkDrawingPreviewHead div{display:flex;flex-direction:column}.mkDrawingPreviewHead small{color:#71848d}.mkDrawingPreview{padding:0 22px}.mkDrawingPreview img{display:block;width:100%;max-height:52vh;object-fit:contain;background:#fff;border:1px solid #d6e5eb;border-radius:14px}.mkDrawingNav{display:flex;gap:10px;padding:14px 22px}.mkDrawingNav button{flex:1}.mkSAPresentDrawing{grid-column:1/-1;background:#fff;border-radius:24px;padding:18px;text-align:center}.mkSAPresentDrawing img{max-width:100%;max-height:65vh;object-fit:contain}

.mkDrawingNav button.active{background:#176d8e!important;color:#fff!important}

/* v2.8 – Elevaktiviteter tilgang */
.mkStudentApp.locked{position:relative;opacity:.82}.mkStudentApp.locked:after{content:"🔒";position:absolute;right:14px;bottom:13px;font-size:17px}.mkStudentApp.locked em{color:#8a6b1a!important;background:#fff4cb;padding:4px 7px;border-radius:999px}
.mkSALibraryAccessBanner{margin:4px 26px 6px;padding:12px 14px;border:1px solid #efdca2;background:#fff9e7;border-radius:14px;display:flex;gap:11px;align-items:center}.mkSALibraryAccessBanner>span{font-size:24px;color:#b58b16}.mkSALibraryAccessBanner div{display:flex;flex-direction:column}.mkSALibraryAccessBanner small{color:#7c704f;margin-top:2px}
.mkSALockedInfo{padding:12px 28px 30px;text-align:center}.mkSALockIcon{width:64px;height:64px;margin:4px auto 14px;border-radius:20px;display:grid;place-items:center;background:#fff2c7;color:#9d791c;font-size:30px}.mkSALockedInfo h3{font-size:24px;margin:0 0 8px}.mkSALockedInfo>p{color:#647b87;line-height:1.5;max-width:500px;margin:0 auto 18px}.mkSALockedFeatures{display:grid;grid-template-columns:1fr 1fr;gap:8px;text-align:left;margin:18px auto;max-width:520px}.mkSALockedFeatures span{padding:10px 12px;background:#f3f8fa;border-radius:11px;font-size:13px;font-weight:700}.mkSALockedNotice{margin:18px 0;padding:12px;border-radius:12px;background:#eef7fa;color:#496d7b;font-size:13px}.mkSALockedInfo .mkSAwide{max-width:300px;margin-inline:auto}@media(max-width:620px){.mkSALockedFeatures{grid-template-columns:1fr}}

/* v3.0 – demo previews */
.kvLibraryItem.kvDemoLocked{position:relative;opacity:.88;border-style:dashed!important}
.kvDemoLockBadge{display:inline-flex;margin-top:7px;width:max-content;padding:4px 7px;border-radius:999px;background:#eeeaff;color:#5d50c2;font-size:9px;font-style:normal;font-weight:900}
.kvDemoPreview{text-align:center;padding:6px 4px}.kvDemoPreviewIcon{width:68px;height:68px;margin:0 auto 12px;border-radius:20px;display:grid;place-items:center;background:linear-gradient(145deg,#e7f8fd,#eeeaff);font-size:28px;font-weight:950;color:#275d7b}.kvDemoPreviewBadge{display:inline-flex;padding:5px 8px;border-radius:999px;background:#eeeaff;color:#5e50c3;font-size:9px;font-weight:950;text-transform:uppercase;letter-spacing:.07em}.kvDemoPreview h2{margin:10px 0 7px}.kvDemoPreview>p{color:#607b8d;line-height:1.55}.kvDemoPreviewNote{margin:16px 0;padding:12px 14px;border:1px solid #d8d3f1;border-radius:12px;background:#f7f5ff;color:#5c6380;font-size:12px;line-height:1.5}.kvDemoPriceLink{text-decoration:none}
.mkSALibraryAccessBanner.demo{background:#f3f0ff;border-color:#d7d0f2}.mkSALibraryAccessBanner.demo>span{color:#6657d6}
.mkSADemoPreview{padding:22px 28px 30px;text-align:center}.mkSADemoIcon{width:72px;height:72px;border-radius:21px;margin:0 auto 13px;display:grid;place-items:center;background:linear-gradient(145deg,#e8f8fd,#eeeaff);font-size:30px;font-weight:950;color:#295c79}.mkSADemoPreview h3{font-size:24px;margin:0 0 8px}.mkSADemoPreview>p{max-width:560px;margin:0 auto;color:#647d8e;line-height:1.6}.mkSADemoFeatures{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0}.mkSADemoFeatures span{padding:10px;border-radius:11px;background:#f2f8fa;font-size:11px;font-weight:800;color:#476a7d}.mkSADemoLocked{display:flex;flex-direction:column;gap:4px;margin:17px 0;padding:14px;border:1px solid #d9d3f2;border-radius:13px;background:#f7f5ff}.mkSADemoLocked b{color:#5648b5}.mkSADemoLocked span{font-size:11px;line-height:1.5;color:#69758a}.mkSADemoActions{display:flex;justify-content:center;gap:8px}.mkSADemoActions a,.mkSADemoActions button{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:10px;border:1px solid #cfdae3;background:#fff;color:#35576c;font-weight:850;text-decoration:none;cursor:pointer}.mkSADemoActions a{border:0;color:#fff;background:linear-gradient(135deg,#0aa9ef,#6657ef)}
@media(max-width:650px){.mkSADemoFeatures{grid-template-columns:1fr}}

.mkDrawingExternalHint{text-align:center;padding:0 22px 14px;color:#728794;font-size:11px}