@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Rajdhani:wght@300;400;600;700&display=swap');

:root {
  --bg:#0a0a0a; --ld:rgba(0,211,243,.22); --lg:rgba(0,211,243,.6);
  --panel:#0e1014; --pb:rgba(0,211,243,.16); --text:#dff4f8;
  --td:rgba(200,230,240,.45); --ac:#00d3f3; --ok:#39ff14;
  --sel:#ffd700; --grp:#c084fc;
  --mono:'Share Tech Mono',monospace; --ui:'Rajdhani',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--ui);height:100dvh;display:flex;flex-direction:column;overflow:hidden;user-select:none;-webkit-user-select:none}

/* ── header ── */
header{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:7px 14px;background:var(--panel);border-bottom:1px solid var(--pb);z-index:100;gap:8px}
.logo{font-family:var(--mono);font-size:14px;color:var(--ac);letter-spacing:2px;white-space:nowrap;text-shadow:0 0 14px var(--lg)}
.logo em{color:var(--td);font-size:10px;font-style:normal}
.hi{font-family:var(--mono);font-size:10px;color:var(--td);text-align:right;line-height:1.7}
.hi b{color:var(--ac)}

/* ── toolbar ── */
.tb{flex-shrink:0;display:flex;align-items:center;gap:3px;padding:5px 10px;background:var(--panel);border-bottom:1px solid var(--pb);flex-wrap:wrap;z-index:100}
.tg{display:flex;align-items:center;gap:3px;padding-right:8px;border-right:1px solid var(--pb)}
.tg:last-child{border-right:none;padding-right:0}
.tgl{font-size:9px;color:var(--td);letter-spacing:1px;text-transform:uppercase;padding-right:3px;white-space:nowrap}
.btn{background:transparent;border:1px solid var(--pb);color:var(--td);font-family:var(--ui);font-size:11px;font-weight:600;padding:4px 8px;border-radius:3px;cursor:pointer;transition:all .14s;white-space:nowrap}
.btn:hover{border-color:var(--ac);color:var(--ac);background:rgba(0,211,243,.07)}
.btn.on{border-color:var(--ac);color:var(--ac);background:rgba(0,211,243,.14);box-shadow:0 0 8px rgba(0,211,243,.28)}
.btn.red{border-color:rgba(255,80,80,.35);color:rgba(255,100,100,.65)}
.btn.red:hover{border-color:#ff5050;color:#ff5050;background:rgba(255,80,80,.09)}
.btn.grn{border-color:rgba(57,255,20,.3);color:rgba(57,255,20,.65)}
.btn.grn:hover{border-color:var(--ok);color:var(--ok);background:rgba(57,255,20,.09)}
.btn.selbtn{border-color:rgba(255,215,0,.35);color:rgba(255,215,0,.65)}
.btn.selbtn:hover{border-color:var(--sel);color:var(--sel);background:rgba(255,215,0,.07)}
.btn.selbtn.on{border-color:var(--sel);color:var(--sel);background:rgba(255,215,0,.13);box-shadow:0 0 8px rgba(255,215,0,.3)}
select.btn{appearance:none;-webkit-appearance:none;padding-right:18px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2300d3f3'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 4px center;background-color:transparent}
select.btn option{background:#111318;color:#e0f7fb}

/* ── layout ── */
.main-area{flex:1;display:flex;overflow:hidden;min-height:0}

/* ── canvas ── */
.cw{flex:1;position:relative;overflow:hidden;background:var(--bg);cursor:crosshair;min-width:0}
.cw.selmode{cursor:default}
.cw.oversh{cursor:move}
canvas{position:absolute;top:0;left:0;touch-action:none}
.ch,.cv2{position:absolute;pointer-events:none;background:var(--ld);z-index:5;opacity:0;transition:opacity .12s}
.ch{height:1px;width:100%;left:0}
.cv2{width:1px;height:100%;top:0}
.cw:hover .ch,.cw:hover .cv2{opacity:1}

/* ── join bar ── */
.join-bar{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);background:rgba(8,8,10,.97);border:1px solid var(--grp);border-radius:22px;padding:7px 16px;display:none;align-items:center;gap:10px;z-index:90;box-shadow:0 0 20px rgba(192,132,252,.25);pointer-events:all}
.join-bar.show{display:flex}
.join-bar span{font-family:var(--mono);font-size:10px;color:var(--grp);letter-spacing:1px}
.jbtn{background:transparent;border:1px solid rgba(192,132,252,.4);color:rgba(192,132,252,.8);font-family:var(--ui);font-size:11px;font-weight:700;padding:4px 12px;border-radius:12px;cursor:pointer;transition:all .14s}
.jbtn:hover{border-color:var(--grp);color:var(--grp);background:rgba(192,132,252,.12)}
.jbtn.desel{border-color:rgba(255,80,80,.3);color:rgba(255,80,80,.6)}
.jbtn.desel:hover{border-color:#ff5050;color:#ff5050}

/* ── select hint ── */
.sel-hint{position:absolute;top:10px;left:50%;transform:translateX(-50%);background:rgba(8,8,10,.92);border:1px solid rgba(255,215,0,.35);border-radius:14px;padding:4px 14px;font-family:var(--mono);font-size:10px;color:rgba(255,215,0,.7);pointer-events:none;z-index:80;white-space:nowrap;opacity:0;transition:opacity .25s}
.sel-hint.show{opacity:1}

/* ── drag-select rectangle ── */
.drag-rect{position:absolute;border:1.5px dashed var(--sel);background:rgba(255,215,0,.06);pointer-events:none;z-index:70;display:none}
.drag-rect.show{display:block}

/* ── export/ungroup button flavours ── */
.btn.expbtn{border-color:rgba(0,211,243,.3);color:rgba(0,211,243,.65)}
.btn.expbtn:hover{border-color:var(--ac);color:var(--ac);background:rgba(0,211,243,.09)}
.btn.ungbtn{border-color:rgba(192,132,252,.35);color:rgba(192,132,252,.65)}
.btn.ungbtn:hover{border-color:var(--grp);color:var(--grp);background:rgba(192,132,252,.09)}

/* ── label toggle switch ── */
.toggle-sw{display:inline-flex;align-items:center;cursor:pointer;flex-shrink:0}
.toggle-sw input{display:none}
.toggle-track{width:30px;height:16px;background:rgba(0,211,243,.15);border:1px solid var(--pb);border-radius:8px;position:relative;transition:background .2s}
.toggle-sw input:checked~.toggle-track{background:rgba(0,211,243,.35);border-color:var(--ac)}
.toggle-thumb{position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;background:var(--td);transition:all .2s}
.toggle-sw input:checked~.toggle-track .toggle-thumb{left:16px;background:var(--ac)}

/* ── hover measurement tooltip on canvas ── */
.hover-meas{position:absolute;background:rgba(10,10,14,.95);border:1px solid var(--ac);color:var(--ac);font-family:var(--mono);font-size:11px;padding:5px 10px;border-radius:4px;pointer-events:none;z-index:75;white-space:nowrap;opacity:0;transition:opacity .15s;line-height:1.7}
.hover-meas.show{opacity:1}

/* ── on-screen delete button ── */
.del-sel-btn{position:absolute;top:10px;right:10px;background:rgba(255,50,50,.12);border:1px solid rgba(255,80,80,.5);color:#ff6060;font-family:var(--ui);font-size:11px;font-weight:700;padding:5px 12px;border-radius:4px;cursor:pointer;z-index:88;display:none;transition:all .14s;pointer-events:all}
.del-sel-btn:hover{background:rgba(255,50,50,.25);border-color:#ff5050;color:#ff5050;box-shadow:0 0 10px rgba(255,80,80,.3)}
.del-sel-btn.show{display:block}

/* ── live tip ── */
.tip{position:absolute;background:rgba(8,8,10,.92);border:1px solid var(--ac);color:var(--ac);font-family:var(--mono);font-size:11px;padding:4px 9px;border-radius:3px;pointer-events:none;z-index:60;white-space:nowrap;display:none}

/* ── angle hint ── */
.ahint{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);background:rgba(0,211,243,.08);border:1px solid var(--ld);color:var(--td);font-family:var(--mono);font-size:10px;padding:5px 14px;border-radius:20px;pointer-events:none;z-index:40;white-space:nowrap;opacity:0;transition:opacity .3s}
.ahint.show{opacity:1}

/* ── scale calibration banner ── */
.sbanner{display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(8,8,10,.96);border:1px solid var(--ok);border-radius:8px;padding:18px 24px;text-align:center;z-index:80;pointer-events:none;box-shadow:0 0 30px rgba(57,255,20,.2);min-width:260px}
.sbanner.show{display:block}
.sbt{font-family:var(--mono);font-size:11px;color:var(--ok);letter-spacing:2px;margin-bottom:8px;text-transform:uppercase}
.sbs{font-size:12px;color:var(--td);line-height:1.5}
.sbl{font-family:var(--mono);font-size:16px;color:var(--ac);margin-top:8px}

/* ── side panel ── */
.sp{width:215px;flex-shrink:0;background:var(--panel);border-left:1px solid var(--pb);display:flex;flex-direction:column;overflow:hidden;z-index:50}
.sps{padding:10px 12px;border-bottom:1px solid var(--pb)}
.spt{font-family:var(--mono);font-size:9px;color:var(--ac);letter-spacing:2px;text-transform:uppercase;margin-bottom:8px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.badge{background:rgba(0,211,243,.12);border:1px solid var(--ld);border-radius:10px;padding:1px 6px;font-size:9px;color:var(--ac)}
.sbadge{background:rgba(255,215,0,.12);border:1px solid rgba(255,215,0,.3);border-radius:10px;padding:1px 6px;font-size:9px;color:var(--sel)}
.gbadge{background:rgba(192,132,252,.12);border:1px solid rgba(192,132,252,.3);border-radius:10px;padding:1px 6px;font-size:9px;color:var(--grp)}
.mr{display:flex;justify-content:space-between;align-items:baseline;padding:3px 0;border-bottom:1px solid rgba(0,211,243,.05)}
.mr:last-child{border-bottom:none}
.mr .lb{font-size:11px;color:var(--td)}
.mr .vl{font-family:var(--mono);font-size:12px;color:var(--ac)}
.mr .vl.hi{color:var(--sel)}
.nosel{font-size:11px;color:var(--td);line-height:1.6;padding:4px 0;font-style:italic}
.ell{flex:1;overflow-y:auto;padding:6px 0}
.ell::-webkit-scrollbar{width:4px}
.ell::-webkit-scrollbar-thumb{background:var(--ld);border-radius:2px}
.eli{display:flex;align-items:center;gap:7px;padding:5px 12px;cursor:pointer;border-left:2px solid transparent;transition:all .12s;font-size:11px;color:var(--td)}
.eli:hover{background:rgba(0,211,243,.05);color:var(--text)}
.eli.sel1{border-left-color:var(--sel);background:rgba(255,215,0,.05);color:var(--sel)}
.eli.msel{border-left-color:var(--grp);background:rgba(192,132,252,.05);color:var(--grp)}
.eli.calr{border-left-color:var(--ok);color:rgba(57,255,20,.7)}
.eli.grpd{border-left-color:var(--grp);color:var(--grp)}
.ei{font-size:13px;flex-shrink:0}
.en{flex:1;font-family:var(--mono);font-size:10px;line-height:1.4}
.edel{background:none;border:none;cursor:pointer;color:rgba(255,80,80,.4);font-size:13px;padding:0 2px;transition:color .12s}
.edel:hover{color:#ff5050}

/* ── status bar ── */
.sb{flex-shrink:0;padding:4px 12px;background:var(--panel);border-top:1px solid var(--pb);display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:10px;color:var(--td);flex-wrap:wrap}
.sb b{color:var(--ac)}
.cali{margin-left:auto;display:flex;align-items:center;gap:6px}
.cald{width:7px;height:7px;border-radius:50%;background:#ff5050;box-shadow:0 0 6px #ff5050;animation:pr 2s infinite}
.cald.ok{background:var(--ok);box-shadow:0 0 6px var(--ok);animation:pg 2s infinite}
@keyframes pr{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes pg{0%,100%{opacity:1}50%{opacity:.6}}

/* ── shape dropdown ── */
.drop-wrap{position:relative;display:inline-flex;align-items:center}
.drop-btn{background:transparent;border:1px solid var(--pb);color:var(--td);font-family:var(--ui);font-size:11px;font-weight:600;padding:4px 8px;border-radius:3px;cursor:pointer;transition:all .14s;white-space:nowrap;display:flex;align-items:center;gap:4px}
.drop-btn:hover,.drop-btn.open{border-color:var(--ac);color:var(--ac);background:rgba(0,211,243,.07)}
.drop-btn.on{border-color:var(--ac);color:var(--ac);background:rgba(0,211,243,.14);box-shadow:0 0 8px rgba(0,211,243,.28)}
.drop-chevron{font-size:8px;opacity:.7}
.drop-menu{position:absolute;top:calc(100% + 4px);left:0;background:#0c0f14;border:1px solid var(--pb);border-radius:5px;padding:4px 0;z-index:500;min-width:130px;box-shadow:0 6px 24px rgba(0,0,0,.7);display:none}
.drop-menu.show{display:block}
.drop-item{display:flex;align-items:center;gap:8px;padding:6px 12px;cursor:pointer;font-family:var(--ui);font-size:12px;font-weight:600;color:var(--td);transition:all .12s;white-space:nowrap}
.drop-item:hover{background:rgba(0,211,243,.08);color:var(--ac)}
.drop-item.on{color:var(--ac);background:rgba(0,211,243,.12)}
.drop-item .di{font-size:13px;width:16px;text-align:center}
.drop-btn.grn{border-color:rgba(57,255,20,.3);color:rgba(57,255,20,.65)}
.drop-btn.grn:hover,.drop-btn.grn.open{border-color:var(--ok);color:var(--ok);background:rgba(57,255,20,.09)}

/* ── CAL WIZARD ── */
.calo{display:none;position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:300;align-items:center;justify-content:center;padding:16px}
.calo.open{display:flex}
.cwiz{background:#0c0f14;border:1px solid var(--ac);border-radius:8px;max-width:560px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 0 60px rgba(0,211,243,.18)}
.cwiz::-webkit-scrollbar{width:4px}
.cwiz::-webkit-scrollbar-thumb{background:var(--ld)}
.wh{padding:16px 22px 13px;border-bottom:1px solid var(--pb);display:flex;align-items:center;gap:10px}
.wh h2{font-family:var(--mono);font-size:13px;color:var(--ac);letter-spacing:2px;text-transform:uppercase}
.wbg{font-family:var(--mono);font-size:10px;background:rgba(0,211,243,.12);border:1px solid var(--ld);border-radius:12px;padding:2px 9px;color:var(--ac);margin-left:auto}
.wbd{padding:18px 22px}
.sds{display:flex;gap:8px;margin-bottom:16px;align-items:center}
.sd{width:8px;height:8px;border-radius:50%;background:var(--pb);border:1px solid var(--pb);transition:all .2s}
.sd.done{background:var(--ok);border-color:var(--ok);box-shadow:0 0 6px var(--ok)}
.sd.act{background:var(--ac);border-color:var(--ac);box-shadow:0 0 8px var(--ac)}
.sl{flex:1;height:1px;background:var(--pb)}
.sl.done{background:var(--ok)}
.ws{display:none}
.ws.act{display:block}
.ws h3{font-family:var(--ui);font-size:15px;font-weight:700;color:var(--text);margin-bottom:7px}
.ws p{font-size:13px;color:var(--td);line-height:1.65;margin-bottom:13px}
.mg{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.mc{border:1px solid var(--pb);border-radius:6px;padding:13px 11px;cursor:pointer;transition:all .15s;background:transparent;color:var(--td);font-family:var(--ui);text-align:left}
.mc:hover{border-color:var(--ac);background:rgba(0,211,243,.06)}
.mc.on{border-color:var(--ac);background:rgba(0,211,243,.13);color:var(--text);box-shadow:0 0 14px rgba(0,211,243,.15)}
.mci{font-size:20px;margin-bottom:5px;display:block}
.mct{font-size:13px;font-weight:700;display:block;color:inherit;margin-bottom:3px}
.mcd{font-size:11px;color:var(--td);line-height:1.4}
.rg{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:13px}
.rb{border:1px solid var(--pb);border-radius:5px;padding:9px 10px;cursor:pointer;background:transparent;font-family:var(--ui);text-align:left;transition:all .14s;color:var(--td)}
.rb:hover{border-color:var(--ac);color:var(--text);background:rgba(0,211,243,.06)}
.rb.on{border-color:var(--ac);color:var(--ac);background:rgba(0,211,243,.12)}
.rb .rt{display:block;font-size:12px;font-weight:700;margin-bottom:2px}
.rb .rd{display:block;font-family:var(--mono);font-size:10px;color:var(--td)}
.rdiag{background:#080b0f;border:1px solid var(--pb);border-radius:6px;padding:14px;margin-bottom:14px}
.rdtl{font-family:var(--mono);font-size:9px;color:var(--td);letter-spacing:1px;text-transform:uppercase;margin-bottom:10px}
.ssp{display:flex;gap:6px;align-items:center;justify-content:center;flex-wrap:wrap}
.scrb{border:1px solid var(--pb);border-radius:3px;width:80px;height:46px;position:relative;background:#0a0a0a;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:7px;color:var(--td);overflow:hidden}
.scrl{position:absolute;top:50%;left:6px;right:6px;height:2px;background:var(--ac);transform:translateY(-50%);box-shadow:0 0 6px var(--ac)}
.spp,.spe{font-size:14px;color:var(--td)}
.srt{border:1px solid rgba(57,255,20,.5);border-radius:2px;padding:3px 8px;font-family:var(--mono);font-size:10px;color:var(--ok)}
.rc{font-size:11px;color:var(--td);margin-top:10px;line-height:1.5}
.ir{display:flex;gap:8px;align-items:flex-end;margin-bottom:12px;flex-wrap:wrap}
.ig{flex:1;min-width:90px}
.ig label{font-size:12px;color:var(--td);display:block;margin-bottom:5px}
.inp{width:100%;background:#080b0f;border:1px solid var(--pb);color:var(--text);font-family:var(--mono);font-size:13px;padding:8px 10px;border-radius:4px;outline:none;transition:border-color .14s}
.inp:focus{border-color:var(--ac)}
select.inp{cursor:pointer}
select.inp option{background:#0c0f14}
.ib{background:rgba(0,211,243,.05);border:1px solid var(--ld);border-radius:4px;padding:10px 12px;font-size:12px;color:var(--td);line-height:1.65;margin-bottom:13px}
.ib b{color:var(--ac)}
.ib.ok{background:rgba(57,255,20,.05);border-color:rgba(57,255,20,.2)}
.ib.ok b{color:var(--ok)}
.cr{background:#080b0f;border:1px solid var(--ok);border-radius:6px;padding:13px 15px;margin-bottom:13px;display:none}
.cr.show{display:block}
.crr{display:flex;justify-content:space-between;align-items:baseline;padding:3px 0}
.crr .cl{font-size:11px;color:var(--td)}
.crr .cv{font-family:var(--mono);font-size:13px;color:var(--ok)}
.wf{padding:13px 22px;border-top:1px solid var(--pb);display:flex;align-items:center;justify-content:space-between;gap:10px}
.wcanc{color:var(--td);font-size:12px;background:none;border:none;cursor:pointer;margin-right:auto}
.wcanc:hover{color:#ff5050}
.wback{background:transparent;border:1px solid var(--pb);color:var(--td);font-family:var(--ui);font-size:12px;font-weight:600;padding:7px 13px;border-radius:4px;cursor:pointer;transition:all .14s}
.wback:hover{border-color:var(--td);color:var(--text)}
.wnxt{background:rgba(0,211,243,.1);border:1px solid var(--ac);color:var(--ac);font-family:var(--ui);font-size:12px;font-weight:700;padding:7px 18px;border-radius:4px;cursor:pointer;transition:all .14s;letter-spacing:.4px}
.wnxt:hover{background:rgba(0,211,243,.2);box-shadow:0 0 12px rgba(0,211,243,.25)}
.wnxt:disabled{opacity:.35;cursor:not-allowed}

/* ── saved calibration panel (inside wizard) ── */
.saved-cal-panel{background:#080b0f;border:1px solid var(--pb);border-radius:6px;padding:12px;margin-bottom:14px}
.scp-title{font-family:var(--mono);font-size:9px;color:var(--ac);letter-spacing:2px;text-transform:uppercase;margin-bottom:0;display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;-webkit-user-select:none}
.scp-title:hover{color:var(--text)}
.scp-chevron{font-size:10px;opacity:.7;transition:transform .2s;flex-shrink:0;margin-left:6px}
.scp-body{overflow:hidden;max-height:0;transition:max-height .25s ease,margin-top .25s ease;margin-top:0}
.scp-body.open{max-height:400px;margin-top:10px}
.scp-empty{font-size:11px;color:var(--td);font-style:italic;padding:4px 0}
.scp-item{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:4px;border:1px solid var(--pb);margin-bottom:6px;cursor:pointer;transition:all .14s}
.scp-item:hover{border-color:var(--ac);background:rgba(0,211,243,.06)}
.scp-item:last-child{margin-bottom:0}
.scp-name{flex:1;font-family:var(--ui);font-size:12px;font-weight:600;color:var(--text)}
.scp-ppi{font-family:var(--mono);font-size:11px;color:var(--ac)}
.scp-date{font-size:10px;color:var(--td)}
.scp-del{background:none;border:none;cursor:pointer;color:rgba(255,80,80,.4);font-size:13px;padding:0 2px;transition:color .12s;flex-shrink:0}
.scp-del:hover{color:#ff5050}
.scp-load-btn{background:rgba(0,211,243,.1);border:1px solid var(--ac);color:var(--ac);font-family:var(--ui);font-size:10px;font-weight:700;padding:3px 8px;border-radius:3px;cursor:pointer;transition:all .14s;flex-shrink:0}
.scp-load-btn:hover{background:rgba(0,211,243,.2)}
.cal-name-row{display:flex;gap:8px;align-items:flex-end;margin-top:10px;margin-bottom:0}
.cal-name-row label{font-size:11px;color:var(--td);display:block;margin-bottom:4px}
.cal-name-inp{flex:1;background:#080b0f;border:1px solid var(--pb);color:var(--text);font-family:var(--ui);font-size:12px;padding:6px 10px;border-radius:4px;outline:none;transition:border-color .14s}

@media(max-width:600px){.sp{width:150px}.mg{grid-template-columns:1fr}.rg{grid-template-columns:1fr}.tgl{display:none}header{padding:5px 10px}.tb{padding:4px 8px}}
@media(max-width:420px){.sp{width:125px}.btn{font-size:10px;padding:3px 6px}}

.footer{
    flex-shrink:0;
    padding:4px 12px;
    text-align:center;
    font-size:12px;
    color:var(--td);
    border-top:1px solid rgba(255,255,255,.04);
}

.footer div{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    line-height:1;
    flex-wrap:wrap;
}