@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap');
:root{
  --bar:64px; --r:14px;
  --primary:#4361ee; --danger:#ef233c; --ok:#06d6a0; --warn:#ffd166;
  --font:'DM Sans',sans-serif; --mono:'DM Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0;}

/* ── APP SHELL ─────────────────────────────── */
#kv{
  position:fixed!important;
  top:0!important;left:0!important;right:0!important;bottom:0!important;
  width:100%!important;
  height:100vh!important;
  height:100dvh!important;
  max-width:none!important;z-index:999990!important;
  display:flex!important;flex-direction:column!important;
  font-family:'DM Sans',system-ui,sans-serif!important;
  overflow:hidden!important;
  /* Reset theme CSS variables inside plugin */
  --font:'DM Sans',system-ui,sans-serif;
  --r:14px;
  --primary:#4361ee;
  --danger:#ef233c;
  --ok:#06d6a0;
  --warn:#ffd166;
  --bar:64px;
}

/* ── CANVAS + PAGES ────────────────────────── */
#kv-canvas{
  flex:1;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#1a1a2e,#16213e);
  transition:background .4s;
}
#kv-pages{width:100%;height:100%;position:relative;}

/* Page nav bar */
#kv-page-nav{
  position:absolute;top:10px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:6px;
  background:rgba(0,0,0,.45);backdrop-filter:blur(12px);
  border-radius:24px;padding:5px 12px;z-index:500;
  border:1px solid rgba(255,255,255,.12);
}
#kv-page-nav button{
  background:rgba(255,255,255,.12);border:none;color:#fff;
  border-radius:8px;padding:4px 10px;cursor:pointer;font-family:var(--font);
  font-size:.82rem;font-weight:600;transition:background .15s;
}
#kv-page-nav button:hover{background:rgba(255,255,255,.25);}
#kv-page-info{color:rgba(255,255,255,.7);font-size:.82rem;font-weight:600;padding:0 4px;}

/* Single page layer */
.kv-page{
  position:absolute;inset:0;
  display:none;
}
.kv-page.active{display:block;}

/* ── TOOLBAR ───────────────────────────────── */
#kv-bar{
  height:var(--bar);flex-shrink:0;
  display:flex;align-items:center;gap:8px;padding:0 14px;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-top:1px solid rgba(255,255,255,.12);
  z-index:99980;position:relative;
}
.kv-bar-left{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.kv-bar-mid{
  display:flex;align-items:center;gap:4px;flex:1;
  justify-content:center;overflow-x:auto;padding:0 8px;
  scrollbar-width:none;
}
.kv-bar-mid::-webkit-scrollbar{display:none;}
.kv-bar-right{display:flex;align-items:center;gap:8px;flex-shrink:0;}

/* Tool buttons */
.kv-t{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  color:#fff;border-radius:10px;padding:5px 9px;cursor:pointer;
  font-family:var(--font);font-size:.58rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;
  transition:all .15s;min-width:46px;
}
.kv-t>:first-child{font-size:1.1rem;line-height:1;}
.kv-t:hover{background:rgba(255,255,255,.28);transform:translateY(-2px);}
.kv-t-more{border-style:dashed!important;}

/* Pickers */
.kv-pick{position:relative;z-index:99985!important;}
.kv-pick>button{
  display:flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.22);
  color:#fff;border-radius:8px;padding:6px 11px;
  font-family:var(--font);font-size:.82rem;font-weight:600;cursor:pointer;white-space:nowrap;
}
.kv-pick>button:hover{background:rgba(255,255,255,.25);}
.kv-menu{
  display:none;position:absolute;bottom:calc(100% + 6px);left:0;
  background:rgba(14,14,28,.97);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.12);border-radius:12px;
  min-width:230px;z-index:99990!important;
  box-shadow:0 -12px 40px rgba(0,0,0,.5);overflow:hidden;
}
.kv-menu.open{display:block;}
.kv-mi{display:flex;align-items:center;gap:8px;padding:10px 14px;color:rgba(255,255,255,.85);font-size:.88rem;cursor:pointer;}
.kv-mi:hover{background:rgba(255,255,255,.08);}
.kv-mi.on{color:#4cc9f0;}
.kv-mi-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.kv-mi-edit,.kv-mi-copy,.kv-mi-del{color:rgba(255,255,255,.25);font-size:.8rem;padding:2px 5px;border-radius:4px;cursor:pointer;transition:all .12s;}
.kv-mi-edit:hover{color:#ffd166;background:rgba(255,209,102,.15);}
.kv-mi-copy:hover{color:#4cc9f0;background:rgba(76,201,240,.15);}
.kv-mi-del:hover{color:var(--danger);background:rgba(239,35,60,.15);}
.kv-mi-new{display:flex;align-items:center;gap:6px;padding:10px 14px;color:#4cc9f0;font-size:.85rem;font-weight:600;cursor:pointer;border-top:1px solid rgba(255,255,255,.08);}
.kv-mi-new:hover{background:rgba(76,201,240,.08);}

/* Right buttons */
.kv-icon-btn{
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  color:#fff;border-radius:8px;padding:6px 11px;font-size:.82rem;
  cursor:pointer;transition:background .15s;font-family:var(--font);font-weight:600;
  white-space:nowrap;
}
.kv-icon-btn:hover{background:rgba(255,255,255,.25);}
.kv-save-btn{
  background:rgba(6,214,160,.85)!important;border:none!important;color:#fff!important;
  border-radius:8px!important;padding:6px 14px!important;
  font-family:var(--font)!important;font-weight:700!important;font-size:.82rem!important;
  cursor:pointer!important;white-space:nowrap;
}
.kv-save-btn:hover{opacity:.85!important;}
#kv-avatar{flex-shrink:0;}

/* ── BG PANEL ──────────────────────────────── */
#kv-bgpanel{
  display:none;position:absolute;bottom:calc(var(--bar)+10px);right:10px;
  width:270px;background:rgba(14,14,28,.97);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.15);border-radius:14px;
  color:#fff;box-shadow:0 -8px 30px rgba(0,0,0,.5);z-index:99985!important;
}
#kv-bgpanel.open{display:block;}
.kv-panel-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.1);font-weight:700;}
#kv-bgclose{background:none;border:none;color:rgba(255,255,255,.5);font-size:1rem;cursor:pointer;}
#kv-bgclose:hover{color:#fff;}
.kv-panel-body{padding:14px 16px;}
.kv-plabel{font-size:.72rem;font-weight:700;color:rgba(255,255,255,.45);letter-spacing:.07em;text-transform:uppercase;margin-bottom:6px;}
.kv-presets{display:flex;flex-wrap:wrap;gap:7px;}
.kv-preset{width:42px;height:42px;border-radius:8px;cursor:pointer;border:2px solid transparent;transition:all .15s;}
.kv-preset:hover{transform:scale(1.12);border-color:#fff;}

/* ── WIDGETS ───────────────────────────────── */
.kv-w{
  position:absolute;
  background:rgba(255,255,255,.95);backdrop-filter:blur(16px);
  border-radius:var(--r);
  box-shadow:0 8px 32px rgba(0,0,0,.22),0 2px 8px rgba(0,0,0,.08);
  border:1px solid rgba(0,0,0,.06);
  display:flex;flex-direction:column;
  min-width:180px;min-height:100px;
  animation:wpop .2s cubic-bezier(.34,1.56,.64,1);overflow:hidden;
}
@keyframes wpop{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}

/* Header – invisible, slides in on hover */
.kv-wh{
  display:flex;align-items:center;gap:6px;
  flex-shrink:0;
  padding:0 10px;height:4px;overflow:hidden;
  cursor:grab;user-select:none;
  background:rgba(0,0,0,.04);
  border-bottom:0px solid rgba(0,0,0,.06);
  transition:height .18s ease,padding .18s ease,border-bottom-width .18s;
}
.kv-w:hover .kv-wh{
  height:28px;padding:4px 10px;
  border-bottom-width:1px;
}
.kv-wh:active{cursor:grabbing;}
.kv-wh-icon,.kv-wh-title,.kv-wh-x{opacity:0;transition:opacity .15s;}
.kv-w:hover .kv-wh-icon,.kv-w:hover .kv-wh-title,.kv-w:hover .kv-wh-x{opacity:1;}
.kv-wh-icon{font-size:.85rem;}
.kv-wh-title{flex:1;font-size:.65rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#777;}
.kv-wh-x{background:none;border:none;color:#bbb;font-size:.88rem;cursor:pointer!important;padding:1px 3px;border-radius:4px;line-height:1;pointer-events:auto!important;z-index:999999!important;position:relative;}
.kv-wh-x:hover{color:#ef233c;}
.kv-wb{padding:12px;flex:1;overflow-y:auto;color:#1b1f3b!important;font-size:.92rem;min-height:60px;display:block;}
.kv-wr{
  position:absolute;bottom:0;right:0;width:18px;height:18px;
  cursor:se-resize;display:flex;align-items:flex-end;justify-content:flex-end;
  padding:3px;color:rgba(0,0,0,.15);font-size:.65rem;user-select:none;
  opacity:0;transition:opacity .15s;z-index:20;
}
.kv-w:hover .kv-wr{opacity:1;}
.kv-wr:hover{color:var(--primary);}

/* ── TIMER ─────────────────────────────────── */
.kv-tinp{display:flex;justify-content:center;align-items:center;gap:5px;margin-bottom:6px;}
.kv-tinp input{width:54px;text-align:center;font-family:var(--mono);font-size:.95rem;border:2px solid #e0e0e0;border-radius:8px;padding:5px;}
.kv-tinp span{font-family:var(--mono);font-size:1.4rem;color:#bbb;}
.kv-tbtns{display:flex;justify-content:center;gap:5px;margin-bottom:6px;}
.kv-tbtns button{background:#f0f3ff;border:1.5px solid #d0d8ff;color:var(--primary);border-radius:8px;padding:5px 12px;font-family:var(--font);font-weight:700;font-size:.82rem;cursor:pointer;}
.kv-tbtns button:hover{background:#dde3ff;}
.kv-tprofs-title{font-size:.65rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#aaa;margin-bottom:5px;text-align:center;}
.kv-tprofs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:5px;justify-content:center;}
.kv-tprof{background:#f5f5f5;border:1.5px solid #e0e0e0;border-radius:20px;padding:3px 9px;font-size:.75rem;cursor:pointer;display:flex;align-items:center;gap:4px;color:#555;}
.kv-tprof:hover{border-color:var(--primary);color:var(--primary);}
.kv-tchip-x{color:#ccc;font-size:.68rem;cursor:pointer;}
.kv-tchip-x:hover{color:var(--danger);}
.kv-tprofsave{display:flex;gap:5px;padding:0 6px;}
.kv-tprofsave input{flex:1;border:1.5px solid #e0e0e0;border-radius:8px;padding:4px 8px;font-family:var(--font);font-size:.8rem;}
.kv-tprofsave button{background:var(--primary);color:#fff;border:none;border-radius:8px;padding:4px 10px;font-family:var(--font);font-weight:700;cursor:pointer;}

/* ── NAMES ─────────────────────────────────── */
.kv-ninfo{font-size:.8rem;color:#888;background:#f7f7f7;border-radius:8px;padding:6px 10px;margin-bottom:10px;}
.kv-nresult{font-size:clamp(1.6rem,4.5vw,3rem);font-weight:700;color:var(--primary);text-align:center;min-height:52px;display:flex;align-items:center;justify-content:center;margin-bottom:10px;}
.kv-npick{display:block;width:100%;background:linear-gradient(135deg,var(--primary),#f72585);color:#fff;border:none;border-radius:10px;padding:11px;font-family:var(--font);font-size:.92rem;font-weight:700;cursor:pointer;margin-bottom:8px;}
details.kv-nedit summary{cursor:pointer;font-size:.8rem;color:#888;font-weight:600;padding:3px 0;list-style:none;}
details.kv-nedit summary::-webkit-details-marker{display:none;}
.kv-nedit textarea{width:100%;border:1.5px solid #e0e0e0;border-radius:8px;padding:7px;font-family:var(--font);font-size:.83rem;resize:vertical;margin:5px 0;}
.kv-nedit button{background:var(--primary);color:#fff;border:none;border-radius:8px;padding:6px 12px;font-family:var(--font);font-weight:700;cursor:pointer;font-size:.83rem;}

/* ── NOISE ─────────────────────────────────── */
.kv-noisewrap{height:24px;background:#f0f0f0;border-radius:99px;overflow:hidden;margin-bottom:8px;}
.kv-noisefill{height:100%;width:0;background:linear-gradient(90deg,var(--ok),var(--warn),var(--danger));border-radius:99px;transition:width .08s;}
.kv-noiselbl{text-align:center;font-size:1.2rem;font-weight:700;margin-bottom:12px;color:#333;}
.kv-noisebtns{display:flex;gap:6px;margin-bottom:10px;}
.kv-noisebtns button{flex:1;background:#f0f3ff;border:1.5px solid #d0d8ff;color:var(--primary);border-radius:8px;padding:7px;font-family:var(--font);font-weight:700;cursor:pointer;font-size:.82rem;}
.kv-noisebtns button:disabled{background:#f5f5f5;border-color:#e0e0e0;color:#ccc;cursor:not-allowed;}
.kv-noisethr{display:flex;align-items:center;gap:7px;font-size:.8rem;color:#888;}
.kv-noisethr input[type=range]{flex:1;accent-color:var(--primary);}

/* ── TEXT ──────────────────────────────────── */
.kv-textbar{display:flex;flex-wrap:wrap;gap:3px;margin-bottom:7px;background:#f8f8f8;border-radius:8px;padding:5px;border:1px solid #ebebeb;}
.kv-fb{
  background:#fff;border:1.5px solid #e8e8e8;border-radius:5px;
  padding:4px 8px;font-size:.82rem;cursor:pointer;
  transition:all .13s;min-width:28px;font-family:var(--font);
  color:#444;white-space:nowrap;
}
.kv-fb:hover{background:#f0f3ff;border-color:var(--primary);color:var(--primary);}
.kv-fb.active{background:var(--primary);color:#fff;border-color:var(--primary);}
.kv-fb-sep{width:1px;background:#e0e0e0;margin:2px 2px;align-self:stretch;}
.kv-fsel{border:1.5px solid #e8e8e8;border-radius:5px;padding:4px 6px;font-family:var(--font);font-size:.8rem;background:#fff;cursor:pointer;color:#444;}
.kv-fcolor{width:28px;height:28px;border:1.5px solid #e8e8e8;border-radius:5px;cursor:pointer;padding:2px;background:#fff;}
.kv-editor{
  flex:1;border:1.5px solid #e8e8e8;border-radius:8px;
  padding:12px 14px;font-family:var(--font);font-size:.95rem;
  line-height:1.7;color:#1b1f3b;outline:none;overflow-y:auto;min-height:70px;
  background:#fff;
}
.kv-editor:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(67,97,238,.08);}
.kv-editor:empty:before{content:'Skriv text här…';color:#ccc;}
.kv-editor h1{font-size:1.9rem;margin:6px 0 2px;font-weight:800;}
.kv-editor h2{font-size:1.4rem;margin:5px 0 2px;font-weight:700;}
.kv-editor h3{font-size:1.15rem;margin:4px 0 2px;font-weight:700;}
/* Fix list indentation */
.kv-editor ul{padding-left:1.6em;list-style:disc;}
.kv-editor ol{padding-left:1.6em;list-style:decimal;}
.kv-editor li{padding:1px 0;}

/* ── TASKS ─────────────────────────────────── */
.kv-taskinfo{font-size:.78rem;color:#888;background:#f7f7f7;border-radius:8px;padding:6px 10px;margin-bottom:8px;}
.kv-taskitem{display:flex;align-items:center;gap:7px;padding:7px 0;border-bottom:1px solid #f0f0f0;}
.kv-taskitem input[type=checkbox]{width:17px;height:17px;accent-color:var(--primary);cursor:pointer;flex-shrink:0;}
.kv-taskitem label{flex:1;font-size:.88rem;cursor:pointer;}
.kv-taskitem.done label{text-decoration:line-through;color:#bbb;}
.kv-taskdel{background:none;border:none;color:#ddd;font-size:.88rem;cursor:pointer;padding:2px 4px;border-radius:4px;}
.kv-taskdel:hover{color:var(--danger);}
.kv-taskadd{display:flex;gap:5px;margin-top:7px;}
.kv-taskadd input{flex:1;border:1.5px solid #e0e0e0;border-radius:8px;padding:7px 9px;font-family:var(--font);font-size:.86rem;}
.kv-taskadd input:focus{outline:none;border-color:var(--primary);}
.kv-taskadd button{background:var(--primary);color:#fff;border:none;border-radius:8px;padding:7px 12px;font-family:var(--font);font-weight:700;cursor:pointer;font-size:1rem;}

/* ── WHITEBOARD ────────────────────────────── */
.kv-wbtools{display:flex;gap:4px;flex-wrap:wrap;align-items:center;margin-bottom:5px;position:relative;z-index:20;}
.kv-wbtools button{background:#f5f5f5;border:1.5px solid #e0e0e0;border-radius:6px;padding:4px 9px;font-size:.8rem;cursor:pointer;transition:all .13s;font-family:var(--font);font-weight:600;}
.kv-wbtools button.on,.kv-wbtools button:hover{background:var(--primary);color:#fff;border-color:var(--primary);}
.kv-wbtools input[type=color]{width:28px;height:28px;border:1.5px solid #e0e0e0;border-radius:6px;cursor:pointer;padding:2px;}
.kv-wbtools input[type=range]{width:70px;accent-color:var(--primary);}
.kv-wbcanvas{display:block;border-radius:8px;background:#fff;cursor:crosshair;touch-action:none;border:1.5px solid #eee;flex:1;}
/* Shapes popup */
.kv-shapes-popup{
  position:absolute;top:calc(100% + 4px);left:0;
  background:#fff;border:1.5px solid #e0e0e0;border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);padding:8px;
  display:none;z-index:200;
  gap:5px;flex-wrap:wrap;min-width:220px;
}
.kv-shapes-popup.open{display:flex!important;}
.kv-shape-btn{background:#f5f5f5;border:1.5px solid #e0e0e0;border-radius:6px;
  padding:7px 10px;cursor:pointer;font-size:1rem;transition:all .13s;
  display:flex;flex-direction:column;align-items:center;gap:2px;min-width:50px;font-family:var(--font);}
.kv-shape-btn span{font-size:.65rem;font-weight:600;color:#888;}
.kv-shape-btn:hover,.kv-shape-btn.on{background:var(--primary);color:#fff;border-color:var(--primary);}
.kv-shape-btn:hover span,.kv-shape-btn.on span{color:#fff;}

/* ── VIDEO ─────────────────────────────────── */
.kv-ytresults{max-height:140px;overflow-y:auto;margin-bottom:7px;}
.kv-ytrow{display:flex;align-items:center;gap:7px;padding:5px 3px;cursor:pointer;border-radius:6px;}
.kv-ytrow:hover{background:#f0f3ff;}
.kv-ytrow img{width:56px;height:32px;object-fit:cover;border-radius:4px;flex-shrink:0;}
.kv-ytrow span{font-size:.78rem;color:#333;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}

/* ── GROUPS ────────────────────────────────── */
.kv-gctrl{display:flex;align-items:center;gap:7px;margin-bottom:12px;flex-wrap:wrap;}
.kv-gctrl label{font-size:.8rem;color:#666;font-weight:600;}
.kv-gctrl input[type=number]{width:55px;border:1.5px solid #e0e0e0;border-radius:8px;padding:5px;font-family:var(--font);}
.kv-gctrl button{background:var(--primary);color:#fff;border:none;border-radius:8px;padding:6px 12px;font-family:var(--font);font-weight:700;cursor:pointer;font-size:.82rem;}
.kv-ggrid{display:flex;flex-wrap:wrap;gap:8px;}
.kv-gcard{background:#f7f8ff;border:1.5px solid #e0e5ff;border-radius:10px;padding:8px 12px;min-width:90px;}
.kv-gcard h4{font-size:.68rem;font-weight:800;margin-bottom:4px;text-transform:uppercase;letter-spacing:.05em;}
.kv-gcard ul{list-style:none;}.kv-gcard li{font-size:.84rem;padding:1px 0;color:#333;}

/* ── SEATING ───────────────────────────────── */
.kv-sctrl{display:flex;align-items:center;gap:7px;margin-bottom:8px;flex-wrap:wrap;}
.kv-sctrl label{font-size:.8rem;color:#666;font-weight:600;}
.kv-sctrl input[type=number]{width:50px;border:1.5px solid #e0e0e0;border-radius:8px;padding:5px;font-size:.86rem;}
.kv-sctrl button{background:var(--primary);color:#fff;border:none;border-radius:8px;padding:6px 10px;font-family:var(--font);font-weight:700;cursor:pointer;font-size:.8rem;}
.kv-sgrid{display:grid;gap:4px;margin-bottom:5px;}
.kv-seat{background:#f0f3ff;border:1.5px solid #d0d8ff;border-radius:7px;padding:5px 3px;font-size:.75rem;text-align:center;font-weight:600;cursor:pointer;transition:all .13s;min-height:38px;display:flex;align-items:center;justify-content:center;word-break:break-word;line-height:1.2;}
.kv-seat:hover{background:#dde3ff;border-color:var(--primary);}
.kv-seat.emp{background:#fafafa;border-color:#e8e8e8;color:#ccc;}
.kv-shint{font-size:.7rem;color:#bbb;text-align:center;}

/* ── WORKMODE ──────────────────────────────── */
.kv-workmode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;}
.kv-wm-btn{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 6px;border:2px solid #e0e5ff;border-radius:11px;cursor:pointer;transition:all .18s;background:#f7f8ff;}
.kv-wm-btn:hover{border-color:var(--primary);background:#eef1ff;transform:translateY(-2px);}
.kv-wm-btn.active{border-color:var(--primary);background:var(--primary);color:#fff;}
.kv-wm-btn.active .kv-wm-label{color:#fff;}
.kv-wm-label{font-size:.72rem;font-weight:700;text-align:center;color:#444;}

/* ── IMAGE ─────────────────────────────────── */
.kv-img-drop{border:2px dashed #d0d8ff;border-radius:10px;padding:20px;text-align:center;cursor:pointer;color:#aaa;font-size:.88rem;transition:all .18s;margin-bottom:8px;}
.kv-img-drop:hover,.kv-img-drop.drag{border-color:var(--primary);color:var(--primary);background:#f0f3ff;}
.kv-img-controls{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px;}
.kv-img-controls button{background:#f0f3ff;border:1.5px solid #d0d8ff;color:var(--primary);border-radius:6px;padding:4px 10px;font-family:var(--font);font-size:.78rem;font-weight:700;cursor:pointer;}

/* ── PDF ───────────────────────────────────── */
.kv-pdf-drop{border:2px dashed #ffd6d6;border-radius:10px;padding:20px;text-align:center;cursor:pointer;color:#aaa;font-size:.88rem;transition:all .18s;margin-bottom:8px;}
.kv-pdf-drop:hover,.kv-pdf-drop.drag{border-color:var(--danger);color:var(--danger);background:#fff0f0;}
.kv-pdf-nav{display:flex;align-items:center;justify-content:center;gap:5px;margin-bottom:7px;flex-wrap:wrap;}
.kv-pdf-nav button{background:#f5f5f5;border:1.5px solid #e0e0e0;border-radius:6px;padding:4px 9px;cursor:pointer;font-weight:700;transition:all .12s;font-size:.82rem;}
.kv-pdf-nav button:hover{background:var(--primary);color:#fff;border-color:var(--primary);}

/* ── TRAFFIC LIGHT ─────────────────────────── */
.kv-tlight{display:flex;flex-direction:column;align-items:center;gap:10px;padding:8px 0;}
.kv-tlight-box{background:#222;border-radius:16px;padding:14px 20px;display:flex;flex-direction:column;gap:12px;border:3px solid #111;}
.kv-tlight-circle{width:70px;height:70px;border-radius:50%;cursor:pointer;transition:all .2s;border:3px solid rgba(0,0,0,.3);}
.kv-tlight-circle.off{opacity:.18;filter:grayscale(.5);}
.kv-tlight-circle:hover{transform:scale(1.06);}
.kv-tlight-lbl{font-size:.82rem;color:#888;font-weight:600;text-align:center;}

/* ── SCOREBOARD ────────────────────────────── */
.kv-score-teams{display:flex;flex-direction:column;gap:8px;margin-bottom:10px;}
.kv-score-row{display:flex;align-items:center;gap:8px;}
.kv-score-name{flex:1;font-size:.9rem;font-weight:600;color:#333;}
.kv-score-val{font-family:var(--mono);font-size:1.5rem;font-weight:700;color:var(--primary);min-width:48px;text-align:center;}
.kv-score-btns{display:flex;gap:4px;}
.kv-score-btns button{background:#f0f3ff;border:1.5px solid #d0d8ff;color:var(--primary);border-radius:6px;padding:4px 10px;font-size:1rem;cursor:pointer;font-weight:700;}
.kv-score-btns button:hover{background:var(--primary);color:#fff;}
.kv-score-del{background:none;border:none;color:#ddd;cursor:pointer;font-size:.9rem;padding:2px 4px;}
.kv-score-del:hover{color:var(--danger);}
.kv-score-add{display:flex;gap:6px;margin-top:6px;}
.kv-score-add input{flex:1;border:1.5px solid #e0e0e0;border-radius:8px;padding:7px 9px;font-family:var(--font);font-size:.86rem;}
.kv-score-add button{background:var(--primary);color:#fff;border:none;border-radius:8px;padding:7px 12px;font-family:var(--font);font-weight:700;cursor:pointer;}

/* ── POLL ──────────────────────────────────── */
.kv-poll-q{width:100%;border:1.5px solid #e0e0e0;border-radius:8px;padding:8px;font-family:var(--font);font-size:.9rem;margin-bottom:8px;resize:none;}
.kv-poll-q:focus{outline:none;border-color:var(--primary);}
.kv-poll-options{display:flex;flex-direction:column;gap:6px;margin-bottom:8px;}
.kv-poll-opt-row{display:flex;align-items:center;gap:6px;}
.kv-poll-opt-row input[type=text]{flex:1;border:1.5px solid #e0e0e0;border-radius:8px;padding:6px 8px;font-family:var(--font);font-size:.86rem;}
.kv-poll-opt-row input[type=text]:focus{outline:none;border-color:var(--primary);}
.kv-poll-opt-del{background:none;border:none;color:#ddd;cursor:pointer;font-size:.9rem;padding:2px 5px;}
.kv-poll-opt-del:hover{color:var(--danger);}
.kv-poll-addopt{background:#f0f3ff;border:1.5px solid #d0d8ff;color:var(--primary);border-radius:8px;padding:6px 12px;font-family:var(--font);font-weight:700;cursor:pointer;font-size:.82rem;width:100%;margin-bottom:8px;}
.kv-poll-start{display:block;width:100%;background:linear-gradient(135deg,var(--primary),#f72585);color:#fff;border:none;border-radius:10px;padding:10px;font-family:var(--font);font-size:.92rem;font-weight:700;cursor:pointer;margin-bottom:8px;}
.kv-poll-results{display:flex;flex-direction:column;gap:6px;}
.kv-poll-bar-row{display:flex;flex-direction:column;gap:2px;}
.kv-poll-bar-lbl{display:flex;justify-content:space-between;font-size:.8rem;font-weight:600;color:#555;}
.kv-poll-bar-track{height:22px;background:#f0f0f0;border-radius:99px;overflow:hidden;}
.kv-poll-bar-fill{height:100%;background:linear-gradient(90deg,var(--primary),#4cc9f0);border-radius:99px;transition:width .5s ease;}
.kv-poll-vote-btns{display:flex;flex-direction:column;gap:6px;}
.kv-poll-vote-btn{background:#f7f8ff;border:1.5px solid #e0e5ff;border-radius:10px;padding:10px;font-family:var(--font);font-size:.9rem;font-weight:600;cursor:pointer;text-align:left;transition:all .15s;}
.kv-poll-vote-btn:hover{background:var(--primary);color:#fff;border-color:var(--primary);}

/* ── TOOL PICKER ───────────────────────────── */
.kv-tp-list{display:flex;flex-direction:column;gap:4px;}
.kv-tp-row{
  display:flex;align-items:center;gap:0;
  border:1.5px solid #e0e0e0;border-radius:10px;overflow:hidden;
  background:#fff;transition:all .15s;cursor:grab;
}
.kv-tp-row:active{cursor:grabbing;opacity:.7;}
.kv-tp-row.drag-over{border-color:var(--primary);background:#f0f3ff;}
.kv-tp-drag-handle{
  padding:8px 10px;color:#ccc;cursor:grab;font-size:1rem;
  border-right:1px solid #f0f0f0;user-select:none;
}
.kv-tp-check{
  display:flex;align-items:center;gap:8px;
  flex:1;padding:9px 10px;cursor:pointer;
  font-family:var(--font);font-size:.85rem;font-weight:600;color:#444;
  transition:background .13s;
}
.kv-tp-check:has(input:checked){background:#f0f3ff;color:var(--primary);}
.kv-tp-check input{accent-color:var(--primary);width:15px;height:15px;flex-shrink:0;cursor:pointer;}
.kv-tp-icon{font-size:1.1rem;}
.kv-tp-name{flex:1;}
.kv-tp-open{
  background:#f8f8f8;border:none;border-left:1px solid #f0f0f0;
  color:#aaa;padding:9px 12px;cursor:pointer;font-size:.82rem;
  font-weight:700;transition:all .13s;flex-shrink:0;
}
.kv-tp-open:hover{background:var(--primary);color:#fff;}
.kv-t-more{border-style:dashed!important;opacity:.8;}

/* ── MODALS ────────────────────────────────── */
.kv-modal{display:none;position:fixed;inset:0;z-index:100000;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);align-items:center;justify-content:center;}
.kv-modal.open{display:flex;}
.kv-mbox{background:#fff;border-radius:var(--r);padding:26px;width:90%;max-width:440px;box-shadow:0 24px 60px rgba(0,0,0,.25);max-height:90vh;overflow-y:auto;}
.kv-mbox h3{font-size:1.1rem;font-weight:700;margin-bottom:16px;color:#1b1f3b;}
.kv-mbox label{display:block;font-size:.78rem;font-weight:700;color:#888;margin-bottom:12px;}
.kv-mbox label input,.kv-mbox label textarea{display:block;width:100%;margin-top:4px;border:1.5px solid #e0e0e0;border-radius:8px;padding:9px;font-family:var(--font);font-size:.9rem;}
.kv-mbox label input:focus,.kv-mbox label textarea:focus{outline:none;border-color:var(--primary);}
.kv-mbtns{display:flex;gap:9px;flex-wrap:wrap;}
.kv-btn-ok{background:var(--primary);color:#fff;border:none;border-radius:8px;padding:9px 18px;font-family:var(--font);font-weight:700;cursor:pointer;}
.kv-btn-ok:hover{opacity:.85;}
.kv-mclose{background:#f5f5f5;border:1.5px solid #e0e0e0;border-radius:8px;padding:9px 15px;font-family:var(--font);font-weight:700;cursor:pointer;}
.kv-copyrow{display:flex;align-items:center;justify-content:space-between;padding:7px 0;border-bottom:1px solid #f0f0f0;font-size:.88rem;}
.kv-copyrow button{background:var(--primary);color:#fff;border:none;border-radius:6px;padding:4px 11px;font-family:var(--font);font-weight:700;cursor:pointer;font-size:.8rem;}

/* ── TOAST ─────────────────────────────────── */
#kv-toast{position:fixed;bottom:calc(var(--bar)+12px);left:50%;transform:translateX(-50%) translateY(8px);background:rgba(14,14,28,.96);border:1px solid rgba(255,255,255,.12);color:#fff;border-radius:10px;padding:10px 20px;font-family:var(--font);font-weight:600;font-size:.88rem;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:100001;white-space:nowrap;}
#kv-toast.on{opacity:1;transform:translateX(-50%) translateY(0);}

/* ── AUTH ──────────────────────────────────── */
#kv-auth{position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;z-index:999990!important;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460);font-family:var(--font);overflow-y:auto;padding:20px;}
#kv-auth-box{background:#fff;border-radius:20px;padding:34px 30px;width:100%;max-width:420px;box-shadow:0 24px 80px rgba(0,0,0,.4);}
.kv-auth-logo{font-size:2.6rem;text-align:center;margin-bottom:6px;}
.kv-auth-title{font-size:1.5rem;font-weight:800;text-align:center;color:#1b1f3b;margin-bottom:4px;}
.kv-auth-sub{font-size:.86rem;color:#888;text-align:center;margin-bottom:18px;}
.kv-auth-tabs{display:flex;background:#f5f5f5;border-radius:10px;padding:3px;margin-bottom:18px;}
.kv-auth-tab{flex:1;background:none;border:none;border-radius:7px;padding:7px;font-family:var(--font);font-size:.86rem;font-weight:600;color:#888;cursor:pointer;transition:all .18s;}
.kv-auth-tab.active{background:#fff;color:var(--primary);box-shadow:0 2px 8px rgba(0,0,0,.1);}
.kv-auth-panel{display:none;}.kv-auth-panel.active{display:block;}
.kv-auth-msg{padding:9px 12px;border-radius:8px;font-size:.86rem;margin-bottom:12px;font-weight:600;}
.kv-auth-msg.err{background:#fff0f0;color:#c00;border:1.5px solid #fcc;}
.kv-auth-msg.ok{background:#f0fff4;color:#0a7;border:1.5px solid #9de;}
.kv-auth-label{display:block;font-size:.76rem;font-weight:700;color:#888;margin-bottom:11px;}
.kv-auth-label input{display:block;width:100%;margin-top:4px;border:1.5px solid #e0e0e0;border-radius:8px;padding:10px 12px;font-family:var(--font);font-size:.93rem;color:#1b1f3b;}
.kv-auth-label input:focus{outline:none;border-color:var(--primary);}
.kv-auth-remember{display:flex;align-items:center;gap:7px;font-size:.82rem;color:#666;margin-bottom:12px;cursor:pointer;}
.kv-auth-remember input{width:15px;height:15px;accent-color:var(--primary);}
.kv-auth-btn{width:100%;background:var(--primary);color:#fff;border:none;border-radius:10px;padding:12px;font-family:var(--font);font-size:.95rem;font-weight:700;cursor:pointer;margin-bottom:9px;}
.kv-auth-btn:hover{opacity:.88;}
.kv-auth-link{display:block;text-align:center;font-size:.8rem;color:#aaa;text-decoration:none;}
.kv-auth-divider{display:flex;align-items:center;gap:10px;margin:14px 0;color:#ccc;font-size:.8rem;}
.kv-auth-divider::before,.kv-auth-divider::after{content:'';flex:1;height:1px;background:#eee;}
.kv-auth-guest{width:100%;background:#f5f5f5;border:1.5px solid #e0e0e0;border-radius:10px;padding:11px;font-family:var(--font);font-size:.88rem;font-weight:600;color:#555;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;}
.kv-auth-guest-note{font-size:.72rem;font-weight:400;color:#aaa;}

/* ── Share button in class menu ─────────────── */
.kv-mi-share{color:rgba(255,255,255,.25);font-size:.8rem;padding:2px 5px;border-radius:4px;cursor:pointer;transition:all .12s;}
.kv-mi-share:hover{color:#06d6a0;background:rgba(6,214,160,.15);}

/* ── Share URL input ────────────────────────── */
#kv-share-url{font-family:DM Mono,monospace;}

/* ── Accept share modal highlight ──────────── */
#kv-maccept .kv-mbox{border-top:4px solid #4361ee;}

/* ── Shapes popup always hidden until .open ── */
.kv-shapes-popup{display:none!important;}
.kv-shapes-popup.open{display:flex!important;}

/* ── Widget header absolute overlay fix ─────── */


/* ── Share modal tabs ──────────────────────── */
.kv-share-tabs{display:flex;gap:0;background:#f5f5f5;border-radius:10px;padding:3px;margin-bottom:16px;}
.kv-share-tab{flex:1;background:none;border:none;border-radius:7px;padding:8px;font-family:var(--font);font-size:.86rem;font-weight:600;color:#888;cursor:pointer;transition:all .18s;}
.kv-share-tab.active{background:#fff;color:var(--primary);box-shadow:0 2px 8px rgba(0,0,0,.1);}
.kv-share-panel{display:none;}
.kv-share-panel.active{display:block;}

/* Big code display */
.kv-share-code{
  font-family:var(--mono);font-size:3rem;font-weight:700;
  color:var(--primary);letter-spacing:.25em;text-align:center;
  background:#f0f3ff;border-radius:12px;padding:16px;margin-bottom:12px;
}

/* ════════════════════════════════════════════
   MOBILE – viewport meta ensures correct scale
   Widgets use position:absolute (inside #kv fixed)
════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── TOOLBAR ── */
  :root { --bar: 58px; }

  #kv-bar {
    padding: 0 6px;
    gap: 4px;
  }

  /* Left: smaller class/lesson pickers */
  .kv-bar-left { gap: 3px; flex-shrink: 0; }
  .kv-pick > button {
    padding: 4px 8px;
    font-size: .72rem;
    max-width: 100px;
    overflow: hidden;
  }
  #kv-cl, #kv-ll {
    max-width: 65px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
  }

  /* Mid: scrollable, hide text labels */
  .kv-bar-mid {
    flex: 1;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 2px;
    gap: 3px;
    scrollbar-width: none;
  }
  .kv-bar-mid::-webkit-scrollbar { display: none; }

  .kv-t {
    min-width: 34px;
    padding: 4px 6px;
    font-size: 0; /* hide text */
    gap: 0;
  }
  .kv-t > :first-child { font-size: 1.1rem; line-height: 1; }
  .kv-t span { display: none; }

  /* Right: compact */
  .kv-bar-right { gap: 4px; flex-shrink: 0; }
  .kv-icon-btn { padding: 4px 7px; font-size: .75rem; white-space: nowrap; }
  #kv-logout-btn { font-size: 0; padding: 5px 8px; } /* just icon */
  #kv-avatar { width: 22px; height: 22px; flex-shrink: 0; }
  .kv-save-btn { padding: 5px 9px !important; font-size: .75rem !important; }

  /* Dropdown menus: full width */
  .kv-menu {
    left: 0;
    right: 0;
    min-width: unset;
    width: calc(100vw - 12px);
    max-height: 55vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── BG PANEL ── */
  #kv-bgpanel {
    right: 6px;
    left: 6px;
    width: auto;
    bottom: calc(var(--bar) + 8px);
  }

  /* ── WIDGETS: absolute inside #kv-canvas ── */
  /* Keep position:absolute (already is), just constrain size */
  .kv-w {
    /* Let JS position them, just limit max size */
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100vh - var(--bar) - 60px) !important;
    min-width: 0 !important;
  }

  /* Widget header: always visible on mobile */
  .kv-wh {
    height: 36px !important;
    padding: 6px 12px !important;
    border-bottom-width: 1px !important;
    cursor: default !important;
  }
  .kv-wh-icon, .kv-wh-title, .kv-wh-x {
    opacity: 1 !important;
  }
  .kv-wh-x {
    color: var(--danger) !important;
    font-size: 1.1rem !important;
    padding: 2px 8px !important;
  }

  /* Hide resize on mobile */
  .kv-wr { display: none !important; }

  /* Widget body scrollable */
  .kv-wb { overflow-y: auto; -webkit-overflow-scrolling: touch; }

  /* ── PAGE NAV ── */
  #kv-page-nav {
    top: auto;
    bottom: calc(var(--bar) + 8px);
    transform: translateX(-50%);
    left: 50%;
    font-size: .76rem;
    padding: 4px 8px;
  }
  #kv-page-nav button { padding: 3px 7px; font-size: .76rem; }

  /* ── MODALS ── */
  .kv-mbox {
    width: 95vw !important;
    max-width: none !important;
    max-height: 85vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px 16px;
  }

  /* ── TOAST ── */
  #kv-toast {
    bottom: calc(var(--bar) + 50px) !important;
    max-width: 88vw;
    white-space: normal;
    text-align: center;
    font-size: .84rem;
  }

  /* ── WORKMODE: 2 cols ── */
  .kv-workmode-grid { grid-template-columns: repeat(2,1fr); }

  /* ── TOOL PICKER ── */
  .kv-tp-list .kv-tp-row { font-size: .82rem; }
  .kv-tp-drag-handle { padding: 6px 8px; }

  /* ── AUTH ── */
  #kv-auth { padding: 16px; padding-top: 40px; align-items: flex-start; }
  #kv-auth-box { padding: 24px 18px; }
  .kv-auth-title { font-size: 1.3rem; }
}

/* ── PHONE PORTRAIT (≤480px) ── */
@media (max-width: 480px) {
  .kv-pick > button { max-width: 80px; font-size: .68rem; }
  #kv-cl, #kv-ll { max-width: 48px; }
  .kv-save-btn { padding: 5px 7px !important; font-size: .7rem !important; }
  #kv-bgbtn { font-size: 0 !important; padding: 5px 8px !important; } /* emoji only */
}

@media (max-width: 768px) {
  #kv-bar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(0,0,0,0.75);
  }
}