:root{
  --bg:#eaeef9;
  --panel:#ffffff;
  --panel-2:#f4f6fd;
  --line:#e3e7f4;
  --line-2:#ccd3ea;
  --ink:#171733;
  --ink-2:#565a7a;
  --ink-3:#8b90ad;
  --blue:#2f5bea;
  --blue-2:#1d43c4;
  --blue-soft:#e4eaff;
  --teal:#0aab99;
  --teal-soft:#d8f5f1;
  --coral:#ff5069;
  --coral-soft:#ffe4e8;
  --amber:#f59211;
  --amber-soft:#fff0d9;
  --plum:#b83cae;
  --plum-soft:#fce4f8;
  --green:#12a866;
  --green-soft:#d9f5e7;
  --r:18px;
  --sh:0 1px 2px rgba(23,23,51,.06), 0 6px 18px rgba(23,23,51,.07);
  --sh-lift:0 2px 4px rgba(23,23,51,.08), 0 14px 34px rgba(23,23,51,.14);
  --ui:"Figtree",system-ui,-apple-system,sans-serif;
  --display:"Bricolage Grotesque","Figtree",system-ui,sans-serif;
  --rail-w:392px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:var(--ui);color:var(--ink);background:var(--bg);
  font-size:14.5px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow:hidden;
}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ───────── shell ───────── */
#app{display:flex;flex-direction:column;height:100vh}
.topbar{
  display:flex;align-items:center;gap:12px;padding:0 16px;height:62px;flex:0 0 62px;
  background:var(--panel);border-bottom:1px solid var(--line);position:relative;z-index:40;
}
.brand{display:flex;align-items:center;gap:10px}
.brand .mark{width:34px;height:34px;border-radius:11px;background:var(--blue);display:grid;place-items:center;flex:0 0 34px}
.brand .mark svg{width:19px;height:19px;color:#fff}
.brand b{font-family:var(--display);font-size:18px;letter-spacing:-.02em;font-weight:800}
.proj-title{
  background:var(--panel-2);border:2px solid transparent;border-radius:10px;padding:7px 12px;
  font-weight:600;min-width:180px;max-width:300px;font-size:14.5px;
}
.proj-title:hover{background:#eaeefb}
.proj-title:focus{background:#fff;border-color:var(--blue);outline:none}
.topbar .sp{flex:1}

.seg{display:flex;background:var(--panel-2);border-radius:12px;padding:4px;gap:3px}
.seg button{
  background:transparent;border:0;color:var(--ink-2);padding:8px 14px;border-radius:9px;
  font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:7px;
}
.seg button:hover{color:var(--ink);background:#e2e7f8}
.seg button[aria-pressed="true"]{background:#fff;color:var(--blue);box-shadow:0 1px 3px rgba(23,23,51,.12)}
.seg svg{width:17px;height:17px}
.seg.icons button{padding:8px 11px}

.tbtn{
  background:var(--panel-2);border:0;color:var(--ink);padding:10px 15px;border-radius:11px;
  font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:8px;
}
.tbtn:hover{background:#e2e7f8}
.tbtn.primary{background:var(--blue);color:#fff}
.tbtn.primary:hover{background:var(--blue-2)}
.tbtn svg{width:17px;height:17px}

main{flex:1;display:flex;min-height:0}

/* ───────── stage ───────── */
.stage{
  flex:1;min-width:0;position:relative;overflow:auto;padding:30px 24px 120px;
  background:radial-gradient(circle at 50% 0,#f2f5ff,var(--bg) 60%);
}
.frame-wrap{position:relative;margin:0 auto;width:100%;max-width:1120px;transition:max-width .25s cubic-bezier(.2,.8,.3,1)}
.stage[data-device="tablet"] .frame-wrap{max-width:800px}
.stage[data-device="phone"] .frame-wrap{max-width:400px}
.device-frame{
  background:#fff;box-shadow:var(--sh);border-radius:30px;width:100%;min-height:76vh;
  position:relative;overflow:hidden;
}
.device-tag{
  position:absolute;top:-24px;left:0;font-size:12px;color:var(--ink-3);font-weight:600;
  display:flex;align-items:center;gap:6px;
}
.stage.filedrag::after{
  content:"Drop the picture anywhere";position:fixed;inset:62px var(--rail-w) 0 0;z-index:60;
  background:rgba(47,91,234,.10);border:3px dashed var(--blue);border-radius:20px;
  display:grid;place-items:center;font-family:var(--display);font-size:22px;color:var(--blue-2);
  font-weight:700;pointer-events:none;
}

/* ───────── rail ───────── */
.rail{
  flex:0 0 var(--rail-w);width:var(--rail-w);display:flex;flex-direction:column;min-height:0;
  border-left:1px solid var(--line);background:var(--panel);
}
.railtabs{display:flex;gap:2px;padding:9px 9px 0;border-bottom:1px solid var(--line);flex:0 0 auto}
.railtabs button{
  flex:1;background:transparent;border:0;border-radius:10px 10px 0 0;padding:9px 2px 11px;
  color:var(--ink-3);display:flex;flex-direction:column;align-items:center;gap:4px;
  font-size:11px;font-weight:600;border-bottom:3px solid transparent;margin-bottom:-1px;
}
.railtabs button svg{width:19px;height:19px}
.railtabs button:hover{color:var(--ink-2);background:var(--panel-2)}
.railtabs button[aria-selected="true"]{color:var(--blue);border-bottom-color:var(--blue)}
.railbody{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden}
.rail-head{padding:16px 18px 12px}
.rail-head h2{margin:0;font-family:var(--display);font-size:19px;font-weight:700;letter-spacing:-.02em}
.rail-head p{margin:5px 0 0;font-size:12.5px;color:var(--ink-3);line-height:1.5}

.sect{border-top:1px solid var(--line)}
.sect>summary{
  padding:13px 18px;font-weight:700;font-size:13.5px;cursor:pointer;list-style:none;
  display:flex;align-items:center;gap:9px;user-select:none;
}
.sect>summary::-webkit-details-marker{display:none}
.sect>summary:hover{background:var(--panel-2)}
.sect>summary .chev{width:13px;height:13px;transition:transform .16s;color:var(--ink-3)}
.sect[open]>summary .chev{transform:rotate(90deg)}
.sect .inner{padding:2px 18px 18px}

/* form atoms */
.f{margin-bottom:14px}
.f>label,.flabel{display:block;font-size:12.5px;font-weight:700;color:var(--ink-2);margin-bottom:6px}
.f .hint{font-size:12px;color:var(--ink-3);margin-top:5px;line-height:1.45}
input[type=text],input[type=number],input[type=url],select,textarea{
  width:100%;padding:10px 12px;border:1.5px solid var(--line-2);border-radius:10px;background:#fff;font-size:13.5px;
}
textarea{resize:vertical;min-height:76px;line-height:1.55}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.row{display:flex;gap:9px}.row>*{flex:1;min-width:0}
.check{display:flex;gap:10px;align-items:flex-start;padding:10px;border-radius:10px;cursor:pointer;border:1.5px solid transparent}
.check:hover{background:var(--panel-2)}
.check input{margin:2px 0 0;flex:0 0 auto;accent-color:var(--blue);width:17px;height:17px}
.check span{font-size:13.5px;font-weight:500}
.check em{display:block;font-style:normal;font-size:12px;color:var(--ink-3);line-height:1.4;font-weight:400}
.btn{
  border:1.5px solid var(--line-2);background:#fff;border-radius:10px;padding:9px 13px;font-size:13px;
  font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:7px;color:var(--ink);
}
.btn:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-soft)}
.btn.full{width:100%}
.btn.solid{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn.solid:hover{background:var(--blue-2);color:#fff}
.btn.danger{color:#c8324a;border-color:#f3c7ce}
.btn.danger:hover{background:#ffe9ed;border-color:#e88b9c;color:#c8324a}
.btn svg{width:15px;height:15px}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:20px}
.pill.req{color:#a45c00;background:var(--amber-soft)}
.pill.trk{color:var(--ink-2);background:var(--panel-2)}
.pill.opt{color:var(--ink-3);background:var(--panel-2)}
.pill.done{color:#0a7c4a;background:var(--green-soft)}
.pill.q{color:#c8324a;background:var(--coral-soft)}

/* ───────── toolbox ───────── */
.tb-search{padding:0 18px 14px}
.tb-search input{padding-left:34px;background:var(--panel-2) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b90ad' stroke-width='2.4'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.2-3.2'/></svg>") 10px 50%/16px no-repeat;border-color:transparent}
.tb-list{display:flex;flex-direction:column;gap:7px}
.tb-item{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px 12px;
  background:#fff;border:1.5px solid var(--line);border-radius:13px;cursor:pointer;
  transition:border-color .12s, box-shadow .12s, transform .12s;
}
.tb-item:hover{border-color:var(--blue);box-shadow:var(--sh);transform:translateY(-1px)}
.tb-item:active{transform:translateY(0)}
.tb-item .tile{
  width:40px;height:40px;flex:0 0 40px;border-radius:11px;display:grid;place-items:center;
  background:var(--teal-soft);color:var(--teal);
}
.tb-item .tile svg{width:21px;height:21px}
.tb-item.q .tile{background:var(--coral-soft);color:var(--coral)}
.tb-item.x .tile{background:var(--plum-soft);color:var(--plum)}
.tb-item.img .tile{background:var(--blue-soft);color:var(--blue)}
.tb-item .txt{flex:1;min-width:0}
.tb-item b{display:block;font-size:13.5px;font-weight:700;letter-spacing:-.01em}
.tb-item i{font-style:normal;font-size:11.5px;color:var(--ink-3);line-height:1.35;display:block}
.tb-item .add{
  flex:0 0 26px;width:26px;height:26px;border-radius:8px;background:var(--panel-2);color:var(--ink-3);
  display:grid;place-items:center;font-size:17px;font-weight:600;line-height:0;
}
.tb-item:hover .add{background:var(--blue);color:#fff}
.tb-item.on .tile{background:var(--green-soft);color:var(--green)}
.dragging{opacity:.4}
.cat{font-size:12px;font-weight:700;color:var(--ink-3);margin:16px 0 8px;padding:0 18px}
.cat:first-child{margin-top:4px}

/* ───────── structure tree ───────── */
.tree{padding:4px 12px 16px}
.trow{
  display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:11px;cursor:pointer;font-size:13.5px;
}
.trow:hover{background:var(--panel-2)}
.trow.sel{background:var(--blue);color:#fff}
.trow.sel .tmeta{color:#c7d5ff}
.trow .tw{width:28px;height:28px;flex:0 0 28px;border-radius:9px;display:grid;place-items:center;background:var(--panel-2);color:var(--ink-2)}
.trow.sel .tw{background:rgba(255,255,255,.22);color:#fff}
.trow .tw svg{width:15px;height:15px}
.trow .tname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.trow.kid .tname{font-weight:500;font-size:13px}
.trow.kid .tw{width:24px;height:24px;flex:0 0 24px;border-radius:7px}
.trow.kid .tw svg{width:13px;height:13px}
.tmeta{font-size:11px;color:var(--ink-3);font-weight:600}
.tkids{margin-left:16px;border-left:2px solid var(--line);padding-left:6px;margin-bottom:4px}
.tdrop{height:6px;border-radius:3px;margin:1px 10px}
.tdrop.over{background:var(--blue)}
.tthumb{width:28px;height:28px;border-radius:9px;object-fit:cover;flex:0 0 28px}

/* ───────── toast + modal ───────── */
.toast{
  position:fixed;left:calc(50% - var(--rail-w)/2);bottom:26px;transform:translateX(-50%);z-index:200;
  background:var(--ink);color:#fff;padding:12px 18px;border-radius:12px;font-size:13.5px;font-weight:500;
  box-shadow:var(--sh-lift);display:flex;gap:10px;align-items:center;max-width:min(520px,80vw);
}
.toast.err{background:#c8324a}
.toast svg{width:17px;height:17px;flex:0 0 17px}
.modal-bg{position:fixed;inset:0;background:rgba(23,23,51,.42);z-index:300;display:flex;align-items:center;justify-content:center;padding:26px}
.modal{background:#fff;border-radius:20px;box-shadow:var(--sh-lift);width:min(720px,100%);max-height:86vh;display:flex;flex-direction:column}
.modal header{padding:20px 22px 14px;display:flex;align-items:flex-start;gap:14px}
.modal header h2{margin:0;font-family:var(--display);font-size:21px;font-weight:700;letter-spacing:-.02em}
.modal header p{margin:4px 0 0;font-size:13px;color:var(--ink-3)}
.modal header button{margin-left:auto;background:var(--panel-2);border:0;width:34px;height:34px;border-radius:10px;font-size:18px;color:var(--ink-2);line-height:1}
.modal .mbody{padding:0 22px 22px;overflow:auto}
.pickgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px}
.pickgrid .tb-item{flex-direction:column;align-items:flex-start;gap:9px;padding:13px}
.pickgrid .tb-item .add{display:none}
.pickcat{font-size:12px;font-weight:700;color:var(--ink-3);margin:16px 0 9px}
.pickcat:first-child{margin-top:0}

.edit .c-comp{border-radius:12px;transition:box-shadow .12s}
.edit .c-comp:hover{box-shadow:0 0 0 2px #b9c8f7}
.edit .c-comp.sel{box-shadow:0 0 0 3px var(--blue)}
.edit .c-block{border-radius:14px}
.edit .c-block:hover{background:rgba(47,91,234,.03)}
.ehandle{
  position:absolute;top:-15px;right:8px;z-index:8;display:none;gap:4px;align-items:center;
  background:#fff;border:1.5px solid var(--line);border-radius:11px;padding:4px;box-shadow:var(--sh);
  font-family:var(--ui);
}
.edit .c-comp:hover>.ehandle,.edit .c-comp.sel>.ehandle{display:flex}
.ehandle .grip{
  cursor:grab;display:flex;align-items:center;gap:6px;padding:5px 9px;border-radius:8px;
  font-size:12px;font-weight:700;color:var(--ink-2);background:var(--panel-2);
}
.ehandle .grip:active{cursor:grabbing}
.ehandle .grip svg{width:13px;height:13px}
.ehandle button{background:transparent;border:0;color:var(--ink-2);padding:6px 8px;border-radius:8px;line-height:0}
.ehandle button:hover{background:var(--blue-soft);color:var(--blue)}
.ehandle button.rm:hover{background:#ffe9ed;color:#c8324a}
.ehandle svg{width:15px;height:15px}
.ehandle .chip{font-size:11px;font-weight:700;padding:5px 9px;border-radius:8px;background:var(--amber-soft);color:#a45c00}
.ehandle .chip.trk{background:var(--panel-2);color:var(--ink-3)}

.blockbar{position:absolute;top:-14px;left:8px;display:none;gap:4px;z-index:7;font-family:var(--ui)}
.edit .c-block:hover>.blockbar{display:flex}
.blockbar button{
  background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:6px 11px;font-size:11.5px;
  font-weight:700;color:var(--ink-2);display:flex;align-items:center;gap:5px;box-shadow:var(--sh);
}
.blockbar button:hover{border-color:var(--blue);color:var(--blue)}
.blockbar svg{width:13px;height:13px}

.insert{max-width:1080px;margin:0 auto 26px;display:flex;justify-content:center}
.insert button{
  background:transparent;border:2px dashed var(--line-2);color:var(--ink-3);border-radius:12px;
  padding:9px 18px;font-size:13px;font-weight:700;font-family:var(--ui);display:flex;align-items:center;gap:8px;
  width:100%;justify-content:center;
}
.insert button:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-soft)}
.insert button svg{width:15px;height:15px}
.insert.drop-on button{border-color:var(--blue);background:var(--blue-soft);color:var(--blue)}
.insert.over button{border-style:solid;border-color:var(--blue);background:var(--blue);color:#fff;padding:22px}

.colzone{
  min-height:104px;border:2px dashed var(--line-2);border-radius:14px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;color:var(--ink-3);font-size:13px;font-family:var(--ui);
  font-weight:600;padding:16px;text-align:center;
}
.colzone button{
  background:var(--blue);color:#fff;border:0;border-radius:10px;padding:8px 15px;font-size:12.5px;font-weight:700;font-family:var(--ui);
}
.colzone.drop-on{border-color:var(--blue);background:var(--blue-soft)}
.colzone.over{border-color:var(--blue);border-style:solid;background:var(--blue-soft);color:var(--blue)}

.c-imgslot{
  width:100%;aspect-ratio:16/9;border:2px dashed var(--line-2);border-radius:var(--c-radius,14px);
  background:var(--panel-2);display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:7px;color:var(--ink-3);font-family:var(--ui);font-size:13px;font-weight:600;cursor:pointer;padding:14px;
}
.c-imgslot:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-soft)}
.c-imgslot svg{width:26px;height:26px}
.c-imgslot small{font-weight:500;font-size:11.5px;opacity:.85}
.c-imgslot.sm{aspect-ratio:4/3}
.c-imgslot.over{border-color:var(--blue);border-style:solid;background:var(--blue-soft);color:var(--blue)}
.imgswap{
  position:absolute;top:10px;right:10px;background:rgba(23,23,51,.78);color:#fff;border:0;border-radius:9px;
  padding:7px 11px;font-size:11.5px;font-weight:700;font-family:var(--ui);display:none;align-items:center;gap:6px;z-index:4;
}
.imgswap svg{width:13px;height:13px}
.edit .c-comp:hover .imgswap{display:flex}
.imgwrap{position:relative;display:block}
.c-nar-stage .imgwrap{height:100%}
.c-gal .imgwrap,.c-it-img .imgwrap{display:block}

[contenteditable]{outline:none}
.edit [contenteditable]:hover{background:rgba(47,91,234,.05);border-radius:6px}
.edit [contenteditable]:focus{box-shadow:0 0 0 3px var(--blue-soft);background:#fff;border-radius:6px}
.edit .c-nav .nz{border:2px dashed transparent;border-radius:12px;padding:3px;min-width:48px}
.edit .c-nav .nz:hover{border-color:var(--line)}
.edit .c-nav .nz.over{border-color:var(--blue);background:var(--blue-soft)}
.edit .c-nav button{cursor:grab}
.emptypage{
  max-width:640px;margin:40px auto;text-align:center;padding:44px 26px;border-radius:20px;background:var(--panel-2);
}
.emptypage h3{font-family:var(--display);font-size:23px;margin:0 0 8px;letter-spacing:-.02em}
.emptypage p{margin:0 0 20px;color:var(--ink-3);font-size:14.5px}

.secbar{
  position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:9;display:none;gap:5px;
  align-items:center;background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:5px 7px;
  box-shadow:var(--sh-lift);font-family:var(--ui);
}
.edit .c-section:hover>.secbar,.edit .c-section.secsel>.secbar{display:flex}
.secbar .lbl{font-size:11.5px;font-weight:700;color:var(--ink-3);padding:0 6px 0 4px}
.secbar .sw{width:24px;height:24px;border-radius:50%;border:2px solid var(--line);padding:0;flex:0 0 24px}
.secbar .sw:hover{transform:scale(1.12);border-color:var(--ink-3)}
.secbar .sw.on{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue-soft)}
.secbar .sw.none{background:repeating-linear-gradient(45deg,#fff,#fff 4px,#e7eaf6 4px,#e7eaf6 8px)}
.secbar button.tx{
  background:var(--panel-2);border:0;border-radius:999px;padding:6px 11px;font-size:11.5px;font-weight:700;
  color:var(--ink-2);display:flex;align-items:center;gap:5px;
}
.secbar button.tx:hover{background:var(--blue-soft);color:var(--blue)}
.secbar button.tx.rm:hover{background:#ffe9ed;color:#c8324a}
.secbar button.tx svg{width:13px;height:13px}
.secbar .div{width:1px;height:20px;background:var(--line);margin:0 3px}
.edit .c-section{outline:2px dashed transparent;outline-offset:-8px;border-radius:inherit}
.edit .c-section:hover{outline-color:rgba(47,91,234,.22)}
.edit .c-section.secsel{outline:2px solid var(--blue);outline-offset:-8px}
.addsection{max-width:1140px;margin:0 auto;padding:18px 28px 40px}
.addsection button{
  width:100%;background:transparent;border:2px dashed var(--line-2);color:var(--ink-3);border-radius:18px;
  padding:15px;font-size:13.5px;font-weight:700;font-family:var(--ui);display:flex;align-items:center;
  justify-content:center;gap:8px;
}
.addsection button:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-soft)}
.addsection svg{width:16px;height:16px}
.swatchrow{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px}
.swatchrow button{width:34px;height:34px;border-radius:12px;border:2px solid var(--line);padding:0}
.swatchrow button.on{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.swatchrow button.none{background:repeating-linear-gradient(45deg,#fff,#fff 5px,#e7eaf6 5px,#e7eaf6 10px)}
.transpick{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.transpick button{
  border:2px solid var(--line);border-radius:12px;padding:8px 4px 6px;background:#fff;font-size:10.5px;
  font-weight:700;color:var(--ink-2);display:flex;flex-direction:column;align-items:center;gap:5px;
}
.transpick button.on{border-color:var(--blue);color:var(--blue);background:var(--blue-soft)}
.transpick svg{width:34px;height:18px}
.stage.preview .secbar,.stage.preview .addsection{display:none!important}

.stage.preview .ehandle,.stage.preview .blockbar,.stage.preview .insert,
.stage.preview .colzone,.stage.preview .imgswap,.stage.preview .emptypage{display:none!important}

html,body{margin:0;height:100%;background:#f2f3ef}#course{min-height:100%}\n'+css+'\n'
+'.c-root{min-height:100vh;border-radius:0}\n

body{margin:0;font:13px/1.45 Archivo,system-ui,sans-serif;display:flex;height:100vh;background:#2b312d;color:#e8eae4}'
   +'iframe{flex:1;border:0;background:#fff}#log{width:380px;overflow:auto;padding:10px;font:11.5px/1.5 ui-monospace,Menlo,monospace;background:#1d221e}'
   +'#log b{color:#8fb96b}#log i{color:#e0b070;font-style:normal}#log div{border-bottom:1px solid #333a34;padding:3px 0;word-break:break-all}'
   +'h1{font-size:13px;margin:0 0 8px;color:#9aa298}


/* ── plugin footer in the Add panel ────────────────────────── */
.plugbar{
  margin:18px;padding:14px 16px;border-radius:14px;background:var(--panel-2);font-size:12px;
  color:var(--ink-3);line-height:1.5;
}
.plugbar b{color:var(--ink-2)}
.plugbar span{display:block;margin-top:5px}
.plugdrop{
  position:fixed;inset:0;z-index:400;background:rgba(47,91,234,.12);border:4px dashed var(--blue);
  display:grid;place-items:center;font-family:var(--display);font-size:22px;color:var(--blue-2);font-weight:700;
  pointer-events:none;
}