@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=DM+Sans:wght@400;500;600;700&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --g:#00e5b0;--pu:#a855f7;--y:#f59e0b;--r:#ef4444;
  --bg:#080b12;--sur:rgba(11,16,28,0.97);--bd:rgba(0,229,176,0.13);
  --tx:#cce4f5;--sub:rgba(204,228,245,0.4);
  --sg:0 0 10px #00e5b077,0 0 22px #00e5b022;
  --sp:0 0 10px #a855f777,0 0 22px #a855f722;
  --sy:0 0 8px #f59e0b66;
}
html,body{height:100%;background:var(--bg);font-family:'DM Sans',sans-serif;color:var(--tx);overflow:hidden}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(0,229,176,.012) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,229,176,.012) 1px,transparent 1px);
  background-size:54px 54px}

/* ══ LAYOUT ══ */
#app{position:relative;z-index:1;display:flex;flex-direction:column;height:100vh}
header{flex-shrink:0;height:50px;display:flex;align-items:center;padding:0 14px;gap:10px;
  border-bottom:1px solid var(--bd);background:rgba(8,11,18,.99)}
.logo{display:flex;align-items:center;gap:8px}
.gem{width:24px;height:24px;border-radius:6px;background:linear-gradient(135deg,var(--g),var(--pu));
  display:flex;align-items:center;justify-content:center;font-size:10px;box-shadow:var(--sg)}
.logo h1{font-size:.78rem;font-weight:700;letter-spacing:.1em;color:var(--g);text-shadow:var(--sg)}
.stats{display:flex;gap:5px;margin-left:auto}
.stat{display:flex;align-items:center;gap:3px;font-family:'Share Tech Mono',monospace;
  font-size:.52rem;padding:2px 7px;border:1px solid var(--bd);border-radius:100px}
.dot{width:5px;height:5px;border-radius:50%;background:#222;transition:all .3s}
.dg{background:var(--g);box-shadow:0 0 5px var(--g)}
.dp{background:var(--pu);box-shadow:0 0 5px var(--pu)}
.dy{background:var(--y);box-shadow:0 0 5px var(--y)}
#body{flex:1;min-height:0;display:flex;overflow:hidden}

/* ══ LEFT: EDITOR ══ */
#left{width:50%;flex-shrink:0;display:flex;flex-direction:column;
  border-right:1px solid var(--bd);background:rgba(9,13,23,.6);overflow:hidden}
.ph{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;
  padding:8px 14px 7px;border-bottom:1px solid var(--bd)}
.ph-title{font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--sub)}
.ph-tag{font-family:'Share Tech Mono',monospace;font-size:.52rem;letter-spacing:.07em;
  padding:2px 7px;border-radius:100px;border:1px solid rgba(168,85,247,.22);
  color:var(--pu);background:rgba(168,85,247,.06)}
#ed-wrap{flex:1;position:relative}
#ed-wrap.drag-over{background:rgba(168,85,247,.04);outline:2px solid rgba(168,85,247,.4)}
#ed-wrap.drag-over::after{content:'📌 Drop to insert here';position:absolute;bottom:0;left:0;right:0;
  text-align:center;padding:4px;font-family:'Share Tech Mono',monospace;font-size:.6rem;
  color:rgba(168,85,247,.7);background:rgba(168,85,247,.08);
  border-top:1px solid rgba(168,85,247,.2);pointer-events:none}
#ed{position:absolute;inset:0;resize:none;background:transparent;border:none;outline:none;
  color:var(--tx);font-family:'DM Sans',sans-serif;font-size:.88rem;line-height:1.82;
  padding:16px 18px;caret-color:var(--g);z-index:1}
#ed::selection{background:rgba(0,229,176,.2)}
#ed.sel-mode::selection{background:rgba(245,158,11,.3)}

/* ══ GLOBAL GESTURE CURSOR (fixed, whole screen) ══ */
#gc{
  position:fixed;z-index:99999;pointer-events:none;
  width:20px;height:20px;border-radius:50%;
  transform:translate(-50%,-50%);
  display:none;
  transition:width .07s,height .07s;
}
#gc.on  {display:block}
#gc.two {background:rgba(0,229,176,.15);border:2.5px solid var(--g);box-shadow:var(--sg)}
#gc.three{width:26px;height:26px;background:rgba(168,85,247,.2);border:2.5px solid var(--pu);box-shadow:var(--sp)}
#gc.pinch{background:rgba(0,229,176,.35);border:2px solid var(--g);box-shadow:var(--sg)}
#gc.point{background:transparent;border:2.5px solid var(--y);box-shadow:0 0 8px var(--y)}
#gc.point::after{content:'';position:absolute;inset:4px;border-radius:50%;background:var(--y)}
#gc.fist {width:24px;height:24px;background:rgba(239,68,68,.25);border:2px solid var(--r)}
#gc.palm {width:26px;height:26px;background:rgba(168,85,247,.25);border:2px solid var(--pu);box-shadow:var(--sp)}
@keyframes gcpop{0%{opacity:.8;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(2.8)}}
.gcring{position:absolute;inset:-4px;border-radius:50%;border:1.5px solid currentColor;
  animation:gcpop .5s ease forwards;pointer-events:none}

/* Card hover highlight */
.card.ghover{border-color:var(--g)!important;
  box-shadow:0 0 0 2px rgba(0,229,176,.3),0 4px 18px rgba(0,0,0,.35)!important;
  transform:translateY(-2px)!important}

/* Drag ghost */
#ghost{position:fixed;z-index:99998;pointer-events:none;display:none;
  background:rgba(10,16,32,.97);border:1.5px solid var(--pu);border-radius:10px;
  padding:8px 14px;font-family:'DM Sans',sans-serif;font-size:.8rem;color:var(--tx);
  max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  box-shadow:0 8px 32px rgba(0,0,0,.6),var(--sp);transform:translate(-50%,-120%)}
#ghost.on{display:block}
#ghost::before{content:'📋 ';font-size:.75rem}

/* ══ RIGHT PANEL ══ */
#right{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--sur);
  overflow:hidden;position:relative}

/* Camera PIP */
#cam-pip{position:absolute;top:10px;right:10px;z-index:300;width:164px;
  background:rgba(8,11,18,.97);border:1px solid var(--bd);border-radius:12px;
  overflow:hidden;box-shadow:0 6px 28px rgba(0,0,0,.6)}
#cam-pip.col #cv{display:none}
#cam-pip.col #cpbar{border-bottom:none}
#cpbar{display:flex;align-items:center;justify-content:space-between;
  padding:5px 8px;border-bottom:1px solid var(--bd);background:rgba(8,11,18,.9)}
.cplbl{font-family:'Share Tech Mono',monospace;font-size:.5rem;letter-spacing:.12em;color:var(--sub)}
.cpbtns{display:flex;gap:4px}
#camtoggle{width:22px;height:22px;border-radius:50%;border:1.5px solid rgba(0,229,176,.4);
  background:rgba(0,229,176,.09);color:var(--g);font-size:.62rem;
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .18s}
#camtoggle:hover{background:rgba(0,229,176,.2);border-color:var(--g);box-shadow:var(--sg)}
#camtoggle.camoff{border-color:rgba(239,68,68,.5);background:rgba(239,68,68,.09);color:var(--r)}
#cpcol{width:18px;height:18px;border-radius:50%;border:1px solid var(--bd);background:transparent;
  color:var(--sub);font-size:.6rem;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .18s}
#cpcol:hover{background:rgba(255,255,255,.07);color:var(--tx)}
#cv{position:relative;width:100%;aspect-ratio:4/3;background:#000;overflow:hidden}
#cv video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);opacity:.9}
#hcvs{position:absolute;inset:0;width:100%;height:100%;transform:scaleX(-1);z-index:2}
#camflash{position:absolute;inset:0;border:2px solid transparent;z-index:3;
  transition:all .15s;pointer-events:none}
#camflash.fg{border-color:var(--g);box-shadow:inset 0 0 16px rgba(0,229,176,.2)}
#camflash.fp{border-color:var(--pu);box-shadow:inset 0 0 16px rgba(168,85,247,.2)}
.bk{position:absolute;inset:4px;pointer-events:none;z-index:3}
.bk span{position:absolute;width:7px;height:7px;border-color:rgba(0,229,176,.55);border-style:solid}
.bk .tl{top:0;left:0;border-width:1.5px 0 0 1.5px}.bk .tr{top:0;right:0;border-width:1.5px 1.5px 0 0}
.bk .bl{bottom:0;left:0;border-width:0 0 1.5px 1.5px}.bk .br{bottom:0;right:0;border-width:0 1.5px 1.5px 0}
.cov{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:5px;
  background:rgba(8,11,18,.96);padding:8px;text-align:center}
.cov .ico{font-size:1.2rem}
.cov h3{font-size:.65rem;font-weight:600}
.cov p{font-size:.52rem;color:var(--sub);line-height:1.4;max-width:130px}
#cbtn{padding:5px 12px;background:linear-gradient(135deg,var(--g),var(--pu));
  border:none;border-radius:6px;font-family:'Share Tech Mono',monospace;
  font-size:.52rem;letter-spacing:.07em;color:#080b12;font-weight:700;
  cursor:pointer;box-shadow:var(--sg);transition:opacity .18s}
#cbtn:hover{opacity:.85}
#cbtn:disabled{opacity:.35;pointer-events:none}
.spin{width:20px;height:20px;border:2px solid rgba(0,229,176,.14);
  border-top-color:var(--g);border-radius:50%;animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.fixbox{background:rgba(239,68,68,.06);border:1px solid rgba(239,68,68,.18);
  border-radius:6px;padding:6px 9px;font-family:'Share Tech Mono',monospace;
  font-size:.5rem;line-height:1.7;color:rgba(204,228,245,.65);max-width:140px;text-align:left}
.fixbox b{color:var(--g)}
/* gesture pill inside cam */
#gpill{position:absolute;bottom:4px;left:50%;transform:translateX(-50%) scale(.85);
  z-index:10;border-radius:5px;padding:2px 9px;font-family:'Share Tech Mono',monospace;
  font-size:.52rem;border:1px solid var(--g);color:var(--g);
  background:rgba(8,11,18,.93);box-shadow:var(--sg);
  opacity:0;transition:opacity .2s,transform .2s;white-space:nowrap;pointer-events:none}
#gpill.on{opacity:1;transform:translateX(-50%) scale(1)}
#gpill.pu{border-color:var(--pu);color:var(--pu);box-shadow:var(--sp)}
/* confidence bar */
#cwrap{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);
  z-index:10;display:flex;flex-direction:column;align-items:center;gap:2px;
  pointer-events:none;opacity:0;transition:opacity .3s}
#cwrap.on{opacity:1}
#cwrap label{font-family:'Share Tech Mono',monospace;font-size:.42rem;
  color:rgba(0,229,176,.4);letter-spacing:.1em}
#ctrack{width:46px;height:2px;background:rgba(0,229,176,.1);border-radius:100px;overflow:hidden}
#cfill{height:100%;background:var(--g);border-radius:100px;transition:width .1s,background .2s}

/* Gesture HUD */
#ghud{flex-shrink:0;display:grid;grid-template-columns:1fr 1fr 1fr;gap:2px;
  padding:5px 8px;border-bottom:1px solid var(--bd);background:rgba(8,11,18,.55)}
.gr{display:flex;align-items:center;gap:4px;font-family:'Share Tech Mono',monospace;
  font-size:.47rem;letter-spacing:.03em;color:rgba(204,228,245,.25);
  padding:3px 5px;border-radius:5px;transition:all .2s;border:1px solid transparent}
.gr.on-g{color:var(--g);background:rgba(0,229,176,.08);border-color:rgba(0,229,176,.2)}
.gr.on-p{color:var(--pu);background:rgba(168,85,247,.08);border-color:rgba(168,85,247,.2)}
.gr.on-y{color:var(--y);background:rgba(245,158,11,.08);border-color:rgba(245,158,11,.2)}
.gr.on-r{color:var(--r);background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.2)}
.gr span{font-size:.78rem;flex-shrink:0}
.gr b{display:block;font-size:.44rem;color:inherit;opacity:.6}

/* Room section */
#room-sec{flex-shrink:0;border-bottom:1px solid var(--bd)}
.rrow{display:flex;align-items:center;gap:7px;padding:7px 12px;border-bottom:1px solid var(--bd)}
.rrow:last-child{border-bottom:none}
.rlbl{font-family:'Share Tech Mono',monospace;font-size:.52rem;letter-spacing:.12em;
  color:var(--sub);flex-shrink:0;text-transform:uppercase}
#rcode{flex:1;font-family:'Share Tech Mono',monospace;font-size:.9rem;
  letter-spacing:.22em;color:var(--y);font-weight:700;text-shadow:var(--sy)}
.hb{padding:5px 11px;border-radius:7px;font-family:'Share Tech Mono',monospace;font-size:.58rem;
  letter-spacing:.07em;cursor:pointer;border:1px solid;background:transparent;
  transition:background .18s;white-space:nowrap;min-height:30px;
  display:flex;align-items:center;flex-shrink:0}
.hby{border-color:rgba(245,158,11,.4);color:var(--y)}.hby:hover{background:rgba(245,158,11,.1)}
.hbw{border-color:var(--bd);color:var(--sub)}.hbw:hover{background:rgba(0,229,176,.06)}
.hbg{border-color:rgba(0,229,176,.35);color:var(--g)}.hbg:hover{background:rgba(0,229,176,.1)}
#jinp{flex:1;background:rgba(0,229,176,.04);border:1px solid var(--bd);border-radius:7px;
  padding:5px 9px;color:var(--tx);font-family:'Share Tech Mono',monospace;
  font-size:.75rem;letter-spacing:.14em;outline:none;text-transform:uppercase;
  transition:border-color .2s;min-height:30px}
#jinp:focus{border-color:rgba(0,229,176,.4)}
#jinp::placeholder{color:rgba(204,228,245,.2);font-size:.62rem;letter-spacing:.07em}
.send-row{display:flex;gap:6px;padding:6px 12px;border-top:1px solid var(--bd)}
#sendinp{flex:1;background:rgba(0,229,176,.04);border:1px solid var(--bd);border-radius:7px;
  padding:5px 9px;color:var(--tx);font-family:'DM Sans',sans-serif;font-size:.76rem;
  outline:none;resize:none;height:32px;transition:border-color .2s}
#sendinp:focus{border-color:rgba(0,229,176,.35)}
#sendinp::placeholder{color:rgba(204,228,245,.22)}
#sendbtn{padding:0 11px;background:rgba(0,229,176,.08);border:1px solid rgba(0,229,176,.25);
  border-radius:7px;color:var(--g);font-family:'Share Tech Mono',monospace;
  font-size:.56rem;letter-spacing:.07em;cursor:pointer;flex-shrink:0;transition:background .18s}
#sendbtn:hover{background:rgba(0,229,176,.16)}

/* Clipboard */
#clip-sec{flex:1;overflow:hidden;display:flex;flex-direction:column;min-height:0}
#clip-head{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;
  padding:7px 12px 5px;border-bottom:1px solid var(--bd)}
.clip-title{font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--sub)}
.clip-meta{display:flex;gap:5px;align-items:center}
.tag{font-family:'Share Tech Mono',monospace;font-size:.54rem;letter-spacing:.07em;
  padding:2px 7px;border-radius:100px;border:1px solid rgba(0,229,176,.2);
  color:var(--g);background:rgba(0,229,176,.06)}
#cards{flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:6px}
#cards::-webkit-scrollbar{width:3px}
#cards::-webkit-scrollbar-thumb{background:rgba(0,229,176,.15);border-radius:100px}
#empty{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:7px;flex:1;color:var(--sub);font-size:.72rem;text-align:center;padding:20px;line-height:1.65}
.eico{font-size:1.6rem;opacity:.2}
.card{background:rgba(16,22,40,.9);border:1px solid var(--bd);border-radius:10px;
  padding:9px 11px;cursor:grab;transition:border-color .15s,box-shadow .15s,transform .12s;
  position:relative;user-select:none;flex-shrink:0}
.card:hover{border-color:rgba(0,229,176,.28);box-shadow:0 3px 16px rgba(0,0,0,.28);transform:translateY(-1px)}
.card.dragging{opacity:.4;cursor:grabbing;transform:scale(.96)}
.card.fresh{animation:cpop .3s ease}
@keyframes cpop{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
.ctxt{font-size:.8rem;line-height:1.5;color:var(--tx);margin-bottom:7px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;word-break:break-word}
.cmeta{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px}
.cdev{font-family:'Share Tech Mono',monospace;font-size:.53rem;color:var(--sub)}
.cdev.remote{color:rgba(245,158,11,.65)}
.ctime{font-family:'Share Tech Mono',monospace;font-size:.5rem;color:rgba(204,228,245,.2)}
.cacts{display:flex;gap:4px}
.ca{padding:4px 9px;border-radius:6px;font-family:'Share Tech Mono',monospace;
  font-size:.54rem;letter-spacing:.05em;cursor:pointer;border:1px solid;
  background:transparent;transition:background .15s;min-height:26px;
  display:flex;align-items:center}
.cag{border-color:rgba(0,229,176,.22);color:var(--g)}.cag:hover{background:rgba(0,229,176,.1)}
.car{border-color:rgba(239,68,68,.18);color:rgba(239,68,68,.5)}.car:hover{background:rgba(239,68,68,.08)}
.dh{position:absolute;top:8px;right:8px;font-size:.58rem;opacity:0;color:var(--sub);
  transition:opacity .2s;pointer-events:none}
.card:hover .dh{opacity:.4}

/* Toasts */
#toasts{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);
  z-index:99990;display:flex;flex-direction:column;align-items:center;
  gap:5px;pointer-events:none;width:calc(100% - 28px);max-width:340px}
.toast{padding:7px 16px;border-radius:8px;font-family:'Share Tech Mono',monospace;
  font-size:.66rem;letter-spacing:.06em;white-space:nowrap;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;animation:tin .22s ease,tout .3s ease 2s forwards}
.tg2{background:rgba(0,229,176,.1);border:1px solid var(--g);color:var(--g);box-shadow:var(--sg)}
.tpu{background:rgba(168,85,247,.1);border:1px solid var(--pu);color:var(--pu);box-shadow:var(--sp)}
.ty2{background:rgba(245,158,11,.1);border:1px solid var(--y);color:var(--y);box-shadow:var(--sy)}
@keyframes tin{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@keyframes tout{to{opacity:0;transform:translateY(4px)}}
@keyframes pulse{0%,100%{opacity:.3}50%{opacity:1}}
.syncing{animation:pulse .9s ease infinite}

/* Mobile blocker */
#mob{display:none;position:fixed;inset:0;z-index:999999;background:var(--bg);
  flex-direction:column;align-items:center;justify-content:center;
  gap:18px;padding:32px;text-align:center}
.mb-ico{font-size:3rem;filter:drop-shadow(0 0 10px rgba(0,229,176,.3))}
.mb-h{font-size:1.1rem;font-weight:700;color:var(--g);text-shadow:var(--sg)}
.mb-p{font-size:.82rem;color:var(--sub);line-height:1.7;max-width:260px}
.mb-box{background:rgba(0,229,176,.05);border:1px solid var(--bd);border-radius:10px;
  padding:10px 18px;display:flex;flex-direction:column;gap:4px;align-items:center}
.mb-lbl{font-family:'Share Tech Mono',monospace;font-size:.54rem;letter-spacing:.15em;color:rgba(204,228,245,.3)}
.mb-url{font-family:'Share Tech Mono',monospace;font-size:.76rem;color:var(--g);word-break:break-all}
@media(max-width:900px){#mob{display:flex}}