/* ═══════════════════════════════════════════════════════════════════
   STUDIO CSS — Enterprise Visual Editor
   TheConclave Dominion Page Studio v5.0
   ═══════════════════════════════════════════════════════════════════ */
@property --nia{syntax:'<angle>';initial-value:0deg;inherits:false;}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --void:#030208;--panel:#080814;--panel2:#0d0d1c;--panel3:#111120;
  --b:rgba(255,255,255,.07);--b2:rgba(255,255,255,.12);--b3:rgba(255,255,255,.2);
  --acc:#7B2FFF;--plasma:#FF4CD2;--cyan:#00D4FF;--gold:#FFB800;
  --gr:#35ED7E;--red:#FF4444;--blurple:#5865F2;--orange:#FF6B35;
  --txt:#fff;--txt2:rgba(255,255,255,.6);--txt3:rgba(255,255,255,.32);--txt4:rgba(255,255,255,.14);
  --font:'Exo 2',sans-serif;--mono:'Share Tech Mono',monospace;
  --display:'Cinzel',serif;--hero:'Cinzel Decorative',serif;--wide:'Unbounded',sans-serif;
  --lp:248px;--rp:308px;--tb:50px;--sb:26px;
  --spec:linear-gradient(90deg,#FF0080,#FF4CD2,#A855F7,#5865F2,#00D4FF,#35ED7E,#FFB800,#FF4CD2,#FF0080);
  --r:6px;--rl:12px;--rxl:18px;
  --eox:cubic-bezier(.16,1,.3,1);--esp:cubic-bezier(.34,1.56,.64,1);
}
html,body{height:100%;background:var(--void);color:var(--txt);font-family:var(--font);overflow:hidden;font-size:13px;}

/* ── PRISM BG ── */
#prism-bg{position:fixed;inset:0;z-index:0;pointer-events:none;}
#prism-bg::before{content:'';position:absolute;inset:-30%;
  background:radial-gradient(ellipse 55% 40% at 20% 30%,rgba(123,47,255,.12) 0%,transparent 60%),
  radial-gradient(ellipse 45% 35% at 80% 70%,rgba(0,212,255,.07) 0%,transparent 60%);
  animation:prismS 22s ease-in-out infinite alternate;}
@keyframes prismS{0%{transform:translate(0,0)rotate(0)}50%{transform:translate(-2%,3%)rotate(.4deg)}100%{transform:translate(2%,-2%)rotate(-.3deg)}}
#prism-bg::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,255,255,.006) 2px,rgba(255,255,255,.006) 4px);}
@keyframes specSpin{to{background-position:300% 0;}}

/* ── AUTH GATE ── */
#gate{position:fixed;inset:0;z-index:9999;background:rgba(2,2,10,.98);display:flex;align-items:center;justify-content:center;}
.gc{position:relative;background:rgba(8,7,20,.97);border:1px solid rgba(123,47,255,.3);border-radius:24px;padding:3rem 2.4rem;width:400px;text-align:center;overflow:hidden;}
.gc::before{content:'';position:absolute;inset:-1px;border-radius:24px;background:var(--spec);background-size:300%;z-index:-1;animation:specSpin 4s linear infinite;}
.gc::after{content:'';position:absolute;inset:1px;border-radius:23px;background:rgba(8,7,20,.97);z-index:-1;}
.gc img{width:76px;height:76px;border-radius:50%;margin:0 auto 1.1rem;display:block;filter:drop-shadow(0 0 28px rgba(123,47,255,.6));}
.gc h2{font-family:var(--hero);font-size:.9rem;margin-bottom:.5rem;letter-spacing:.1em;background:var(--spec);background-size:200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:specSpin 3s linear infinite;}
.gc p{font-size:.8rem;color:var(--txt2);margin-bottom:2rem;line-height:1.65;}
.gc a.dc-btn{display:flex;align-items:center;justify-content:center;gap:.65rem;padding:.95rem;background:linear-gradient(135deg,#5865F2,#7B2FFF);border-radius:12px;color:#fff;font-family:var(--display);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-decoration:none;transition:.2s;box-shadow:0 4px 22px rgba(123,47,255,.35);}
.gc a.dc-btn:hover{transform:translateY(-1px);box-shadow:0 8px 32px rgba(123,47,255,.5);}
.gc a.pin-btn{display:block;margin-top:.8rem;padding:.55rem;border:1px solid rgba(255,255,255,.1);border-radius:10px;color:rgba(255,255,255,.38);font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-decoration:none;text-align:center;cursor:pointer;background:none;transition:.18s;width:100%;}
.gc a.pin-btn:hover{border-color:rgba(123,47,255,.4);color:rgba(255,255,255,.65);}
#gate-err{margin-top:.8rem;padding:.5rem .8rem;background:rgba(255,50,50,.1);border:1px solid rgba(255,80,80,.2);border-radius:7px;font-family:var(--mono);font-size:.63rem;color:rgba(255,130,130,.9);display:none;}

/* ── TOPBAR ── */
#topbar{position:fixed;top:0;left:0;right:0;height:var(--tb);background:rgba(3,2,10,.95);border-bottom:1px solid var(--b);backdrop-filter:blur(28px);display:none;align-items:center;padding:0 .6rem;gap:.28rem;z-index:500;overflow:hidden;}
.tb-iris{position:absolute;bottom:0;left:0;right:0;height:1px;background:var(--spec);background-size:300%;animation:specSpin 6s linear infinite;opacity:.45;}
.tb-logo{display:flex;align-items:center;gap:.4rem;flex-shrink:0;margin-right:.2rem;}
.tb-logo img{width:26px;height:26px;border-radius:50%;filter:drop-shadow(0 0 9px rgba(123,47,255,.55));}
.tb-title{font-family:var(--wide);font-size:.48rem;font-weight:600;letter-spacing:.14em;background:var(--spec);background-size:200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:specSpin 5s linear infinite;white-space:nowrap;}
.tb-sep{width:1px;height:22px;background:var(--b2);flex-shrink:0;margin:0 .04rem;}
.tb-page-pill{display:flex;align-items:center;gap:.28rem;padding:.18rem .48rem;background:rgba(255,255,255,.04);border:1px solid var(--b2);border-radius:6px;cursor:pointer;transition:.15s;font-family:var(--mono);font-size:.62rem;color:var(--txt);max-width:160px;}
.tb-page-pill:hover{border-color:rgba(123,47,255,.4);background:rgba(123,47,255,.08);}
.tb-page-pill span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dev-grp{display:flex;background:rgba(255,255,255,.04);border:1px solid var(--b);border-radius:6px;overflow:hidden;}
.dev-btn{padding:.2rem .4rem;background:none;border:none;color:var(--txt3);cursor:pointer;font-size:.7rem;transition:.15s;line-height:1;}
.dev-btn:hover,.dev-btn.on{background:rgba(123,47,255,.18);color:var(--txt);}
.ur-grp{display:flex;gap:2px;}
.ur-btn{padding:.2rem .36rem;border-radius:5px;border:1px solid var(--b);background:none;color:var(--txt3);cursor:pointer;font-size:.62rem;transition:.15s;}
.ur-btn:hover{background:rgba(255,255,255,.07);color:var(--txt);}
#zoom-display{font-family:var(--mono);font-size:.57rem;color:var(--txt3);min-width:32px;text-align:center;}
.btn-s{padding:.2rem .46rem;border-radius:6px;border:1px solid var(--b);background:rgba(255,255,255,.04);color:var(--txt2);font-family:var(--mono);font-size:.57rem;cursor:pointer;transition:.15s;white-space:nowrap;}
.btn-s:hover{background:rgba(255,255,255,.09);color:var(--txt);border-color:var(--b2);}
.btn-a{padding:.2rem .46rem;border-radius:6px;border:1px solid rgba(123,47,255,.35);background:rgba(123,47,255,.1);color:#c4a0ff;font-family:var(--mono);font-size:.57rem;cursor:pointer;transition:.15s;white-space:nowrap;}
.btn-a:hover,.btn-a.on{background:rgba(123,47,255,.24);color:#fff;border-color:rgba(123,47,255,.55);}
.btn-pub{padding:.26rem .85rem;background:linear-gradient(135deg,var(--acc),var(--plasma));border:none;border-radius:7px;color:#fff;font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:.07em;cursor:pointer;transition:.18s;box-shadow:0 2px 14px rgba(123,47,255,.3);white-space:nowrap;}
.btn-pub:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 5px 24px rgba(123,47,255,.5);}
.btn-pub:disabled{opacity:.5;cursor:not-allowed;}
.tb-r{margin-left:auto;display:flex;align-items:center;gap:.26rem;}
/* Workspace badge */
.ws-badge-tb{display:flex;align-items:center;gap:.3rem;padding:.18rem .5rem;background:rgba(123,47,255,.08);border:1px solid rgba(123,47,255,.2);border-radius:5px;font-family:var(--mono);font-size:.54rem;color:rgba(200,180,255,.7);cursor:pointer;transition:.15s;}
.ws-badge-tb:hover{background:rgba(123,47,255,.16);color:#fff;}
/* Collab avatars */
#collab-avatars{display:flex;align-items:center;gap:-4px;margin-right:.15rem;}
.collab-avatar{width:24px;height:24px;border-radius:50%;border:2px solid;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:700;background:rgba(123,47,255,.3);color:#fff;margin-left:-6px;transition:.15s;cursor:pointer;flex-shrink:0;}
.collab-avatar:first-child{margin-left:0;}
.collab-avatar img{width:100%;height:100%;object-fit:cover;}
.collab-avatar.collab-more{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.15);font-size:.52rem;}

/* ── STATUSBAR ── */
#statusbar{position:fixed;bottom:0;left:0;right:0;height:var(--sb);background:rgba(2,2,10,.95);border-top:1px solid var(--b);backdrop-filter:blur(10px);display:none;align-items:center;padding:0 .7rem;gap:.5rem;z-index:500;font-family:var(--mono);font-size:.54rem;color:var(--txt3);}
.sb-dot{width:5px;height:5px;border-radius:50%;background:var(--gr);box-shadow:0 0 6px var(--gr);flex-shrink:0;}
.sb-sep{color:var(--txt4);}
.sb-status{font-family:var(--mono);font-size:.54rem;color:var(--txt3);}
.sb-status.ok{color:var(--gr);}
.sb-status.err{color:var(--red);}
.sb-r{margin-left:auto;display:flex;align-items:center;gap:.5rem;}
/* Draft status */
#draft-status{font-family:var(--mono);font-size:.52rem;padding:.1rem .4rem;border-radius:4px;}
#draft-status.saved{color:var(--gr);}
#draft-status.saving{color:var(--gold);}
#draft-status.dirty{color:var(--txt3);}
#draft-status.err{color:var(--red);}

/* ── APP LAYOUT ── */
#app{position:fixed;top:var(--tb);bottom:var(--sb);left:0;right:0;display:none;}
#app.open{display:flex;}
.rsz{width:4px;cursor:col-resize;flex-shrink:0;background:transparent;transition:.15s;z-index:10;}
.rsz:hover{background:rgba(123,47,255,.3);}

/* ── LEFT PANEL ── */
#lp{width:var(--lp);min-width:160px;max-width:400px;height:100%;background:var(--panel);border-right:1px solid var(--b);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden;}
.p-tabs{display:flex;border-bottom:1px solid var(--b);flex-shrink:0;background:rgba(0,0,0,.25);}
.p-tab{flex:1;padding:.38rem .1rem;text-align:center;font-family:var(--mono);font-size:.47rem;color:var(--txt3);cursor:pointer;border-bottom:2px solid transparent;transition:.13s;letter-spacing:.07em;text-transform:uppercase;}
.p-tab.on{color:var(--txt);border-bottom-color:var(--acc);}
.p-tab:hover:not(.on){color:var(--txt2);}
.p-body{flex:1;overflow-y:auto;overflow-x:hidden;display:none;}
.p-body.on{display:block;}
.p-body::-webkit-scrollbar{width:3px;}
.p-body::-webkit-scrollbar-thumb{background:rgba(123,47,255,.3);border-radius:2px;}
.p-search{margin:.3rem;position:relative;}
.p-search input{width:100%;padding:.24rem .36rem .24rem 1.4rem;background:rgba(255,255,255,.04);border:1px solid var(--b);border-radius:6px;color:var(--txt);font-family:var(--mono);font-size:.6rem;outline:none;transition:.12s;}
.p-search input:focus{border-color:rgba(123,47,255,.4);background:rgba(123,47,255,.04);}
.p-search::before{content:'⌕';position:absolute;left:.48rem;top:50%;transform:translateY(-50%);color:var(--txt3);font-size:.8rem;pointer-events:none;}
.p-sec{font-family:var(--mono);font-size:.46rem;color:var(--txt3);letter-spacing:.1em;text-transform:uppercase;padding:.26rem .55rem .2rem;border-bottom:1px solid var(--b);}
.p-add{padding:.3rem .55rem;font-family:var(--mono);font-size:.6rem;color:var(--txt3);cursor:pointer;border-bottom:1px solid var(--b);transition:.12s;display:flex;align-items:center;gap:.3rem;}
.p-add:hover{background:rgba(255,255,255,.04);color:var(--txt2);}
/* Layer items */
.layer{display:flex;align-items:center;gap:.3rem;padding:.26rem .4rem;cursor:pointer;border-left:2px solid transparent;transition:.1s;user-select:none;position:relative;}
.layer:hover{background:rgba(255,255,255,.04);}
.layer.sel{background:rgba(123,47,255,.1);border-left-color:var(--acc);}
.layer.hid{opacity:.32;}
.layer.locked-by-other{opacity:.5;cursor:not-allowed;}
.layer-ic{font-size:.85rem;flex-shrink:0;}
.layer-nm{font-family:var(--mono);font-size:.63rem;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.layer-nm.edit{background:transparent;border:none;color:var(--txt);font-family:var(--mono);font-size:.63rem;width:100%;outline:1px solid rgba(123,47,255,.5);border-radius:3px;padding:0 2px;}
.layer-vis{background:none;border:none;color:var(--txt3);cursor:pointer;font-size:.65rem;padding:.08rem;transition:.12s;flex-shrink:0;line-height:1;}
.layer-vis:hover{color:var(--txt);}
.layer-drag{color:var(--txt4);cursor:grab;font-size:.65rem;flex-shrink:0;}
.layer-drag:active{cursor:grabbing;}
.layer-lock-badge{font-size:.5rem;color:var(--gold);flex-shrink:0;}
/* Collab dot on layer */
.layer-collab-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
/* Page items */
.pg-item{padding:.36rem .55rem;cursor:pointer;font-family:var(--mono);font-size:.62rem;color:var(--txt2);border-left:2px solid transparent;transition:.12s;display:flex;align-items:center;justify-content:space-between;gap:.4rem;}
.pg-item:hover{background:rgba(255,255,255,.04);color:var(--txt);}
.pg-item.sel{border-left-color:var(--acc);color:var(--txt);background:rgba(123,47,255,.08);}
.pg-item-lbl{display:flex;align-items:center;gap:.35rem;overflow:hidden;}
.pg-status{font-size:.44rem;padding:.08rem .36rem;border-radius:10px;flex-shrink:0;}
.pg-status.published{background:rgba(53,237,126,.1);border:1px solid rgba(53,237,126,.2);color:var(--gr);}
.pg-status.draft{background:rgba(255,184,0,.08);border:1px solid rgba(255,184,0,.15);color:var(--gold);}
.pg-status.archived{background:rgba(255,255,255,.04);border:1px solid var(--b);color:var(--txt3);}

/* ── CANVAS CENTER ── */
#cv-wrap{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:200px;position:relative;}
.cv-tabbar{display:flex;align-items:center;border-bottom:1px solid var(--b);background:rgba(0,0,0,.28);flex-shrink:0;padding:0 .5rem;gap:.1rem;height:30px;}
.cv-tab{padding:.18rem .48rem;font-family:var(--mono);font-size:.54rem;color:var(--txt3);cursor:pointer;border-bottom:2px solid transparent;transition:.13s;white-space:nowrap;}
.cv-tab.on{color:var(--txt);border-bottom-color:var(--acc);}
.cv-tab:hover:not(.on){color:var(--txt2);}
.cv-tabbar-r{margin-left:auto;display:flex;align-items:center;gap:.28rem;}
.cv-url{display:flex;align-items:center;gap:.25rem;background:rgba(255,255,255,.03);border:1px solid var(--b);border-radius:5px;padding:.14rem .44rem;font-family:var(--mono);font-size:.52rem;color:var(--txt3);flex:1;max-width:280px;overflow:hidden;}
#cv-scroll{flex:1;overflow:auto;background:rgba(0,0,0,.38);position:relative;display:flex;align-items:flex-start;justify-content:center;padding:2rem 2rem 4rem;}
#cv-scroll::-webkit-scrollbar{width:6px;height:6px;}
#cv-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:3px;}
#cv-frame{position:relative;background:#030208;box-shadow:0 20px 80px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.05);border-radius:10px;overflow:visible;transform-origin:top center;transition:width .22s var(--eox),height .22s var(--eox);}
.cv-notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:120px;height:26px;background:rgba(0,0,0,.9);border-radius:0 0 16px 16px;z-index:10;display:none;}
.bp-badge{position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:.48rem;color:var(--txt3);white-space:nowrap;}
#cv-iframe{width:100%;height:100%;min-height:100%;border:none;display:block;pointer-events:auto;}
#cv-iframe.interactive{pointer-events:auto;}
#cv-overlay{position:absolute;inset:0;pointer-events:none;z-index:5;}
.ovl-hl{position:absolute;inset:0;border:1px solid transparent;transition:.1s;}
.ovl-hl:hover{border-color:rgba(123,47,255,.55);background:rgba(123,47,255,.04);cursor:pointer;pointer-events:all;}
.ovl-hl.sel{border:2px solid var(--acc)!important;background:rgba(123,47,255,.06);}
.ovl-hl.locked-by-other{border-color:rgba(255,184,0,.4)!important;cursor:not-allowed;}
.ovl-lbl{position:absolute;top:-20px;left:-1px;background:var(--acc);color:#fff;font-family:var(--mono);font-size:.46rem;padding:.05rem .3rem;border-radius:3px 3px 0 0;white-space:nowrap;display:none;}
.ovl-hl.sel .ovl-lbl{display:block;}
.ovl-collab-tag{position:absolute;top:-20px;right:0;font-family:var(--mono);font-size:.44rem;padding:.05rem .28rem;border-radius:3px;color:#fff;white-space:nowrap;}
.ovl-lock-tag{position:absolute;top:4px;right:4px;font-family:var(--mono);font-size:.46rem;padding:.1rem .3rem;background:rgba(255,184,0,.18);border:1px solid rgba(255,184,0,.35);border-radius:4px;color:var(--gold);}
.guide-v{position:absolute;top:0;bottom:0;width:1px;background:rgba(0,212,255,.3);pointer-events:none;z-index:7;}
.guide-h{position:absolute;left:0;right:0;height:1px;background:rgba(0,212,255,.3);pointer-events:none;z-index:7;}

/* ── CODE PANEL ── */
#code-panel{position:absolute;bottom:0;left:0;right:0;height:0;background:rgba(4,4,14,.98);border-top:1px solid var(--b);display:flex;flex-direction:column;transition:height .2s var(--eox);overflow:hidden;z-index:20;}
#code-panel.open{height:340px;}
.code-bar{display:flex;align-items:center;gap:.38rem;padding:.28rem .55rem;border-bottom:1px solid var(--b);flex-shrink:0;background:rgba(0,0,0,.32);}
.ctab{padding:.18rem .44rem;border-radius:5px;border:1px solid var(--b);background:none;color:var(--txt3);font-family:var(--mono);font-size:.54rem;cursor:pointer;transition:.12s;}
.ctab.on,.ctab:hover{background:rgba(123,47,255,.15);color:var(--txt);border-color:rgba(123,47,255,.3);}
#code-editor-wrap{flex:1;overflow:auto;padding:.65rem;}
#code-editor-wrap::-webkit-scrollbar{width:5px;}
#code-editor-wrap::-webkit-scrollbar-thumb{background:rgba(123,47,255,.2);}
#code-ta{width:100%;min-height:100%;background:transparent;border:none;color:#e2e2e2;font-family:var(--mono);font-size:.75rem;line-height:1.72;outline:none;resize:none;tab-size:2;white-space:pre;caret-color:#c4a0ff;}
.cv-bar{display:flex;align-items:center;padding:.25rem .55rem;background:rgba(0,0,0,.3);border-top:1px solid var(--b);flex-shrink:0;gap:.38rem;font-family:var(--mono);font-size:.5rem;color:var(--txt3);}

/* ── RIGHT PANEL ── */
#rp{width:var(--rp);min-width:200px;max-width:480px;height:100%;background:var(--panel);border-left:1px solid var(--b);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden;}
.rp-tabs{display:flex;border-bottom:1px solid var(--b);flex-shrink:0;background:rgba(0,0,0,.22);overflow-x:auto;}
.rp-tabs::-webkit-scrollbar{height:0;}
.rp-tab{flex-shrink:0;padding:.38rem .4rem;font-family:var(--mono);font-size:.45rem;color:var(--txt3);cursor:pointer;border-bottom:2px solid transparent;transition:.13s;letter-spacing:.06em;text-transform:uppercase;}
.rp-tab.on{color:var(--txt);border-bottom-color:var(--acc);}
.rp-tab:hover:not(.on){color:var(--txt2);}
#rp-scroll{flex:1;overflow-y:auto;overflow-x:hidden;}
#rp-scroll::-webkit-scrollbar{width:3px;}
#rp-scroll::-webkit-scrollbar-thumb{background:rgba(123,47,255,.3);border-radius:2px;}
.rp-body{display:none;}
.rp-body.on{display:block;}

/* ── INSPECTOR ── */
.insp-hdr{display:flex;align-items:center;gap:.38rem;padding:.48rem .55rem;border-bottom:1px solid var(--b);flex-shrink:0;background:rgba(0,0,0,.2);}
.insp-ic{font-size:1.1rem;}
.insp-nm{font-family:var(--wide);font-size:.54rem;font-weight:600;}
.insp-ty{font-family:var(--mono);font-size:.5rem;color:var(--txt3);margin-top:.05rem;}
.insp-acts{margin-left:auto;display:flex;gap:.2rem;}
.ia-btn{padding:.2rem .28rem;border-radius:5px;border:1px solid var(--b);background:none;color:var(--txt3);cursor:pointer;font-size:.65rem;transition:.12s;}
.ia-btn:hover{background:rgba(255,255,255,.07);color:var(--txt);}
.ia-btn.danger:hover{background:rgba(255,68,68,.1);border-color:rgba(255,68,68,.25);color:var(--red);}
.vis-tog,.lock-tog{padding:.2rem .35rem;border-radius:5px;border:1px solid var(--b);background:none;color:var(--txt3);cursor:pointer;font-size:.62rem;transition:.12s;font-family:var(--mono);}
.vis-tog.on,.lock-tog.on{background:rgba(53,237,126,.08);border-color:rgba(53,237,126,.25);color:var(--gr);}
.sec-h{display:flex;align-items:center;justify-content:space-between;padding:.3rem .54rem;cursor:pointer;background:rgba(0,0,0,.18);border-bottom:1px solid var(--b);font-family:var(--mono);font-size:.54rem;color:var(--txt2);letter-spacing:.07em;user-select:none;transition:.1s;}
.sec-h:hover{background:rgba(255,255,255,.03);}
.sec-chev{transition:transform .15s;font-size:.58rem;}
.sec-h.open .sec-chev{transform:rotate(180deg);}
.sec-b{padding:.38rem .5rem;border-bottom:1px solid var(--b);}
.sec-b.hide{display:none;}
.f-row{display:flex;align-items:center;gap:.38rem;margin-bottom:.26rem;}
.f-lbl{font-family:var(--mono);font-size:.54rem;color:var(--txt3);width:68px;flex-shrink:0;}
.f-inp{flex:1;background:rgba(255,255,255,.05);border:1px solid var(--b);border-radius:5px;color:var(--txt);font-family:var(--mono);font-size:.6rem;padding:.24rem .36rem;outline:none;transition:.12s;min-width:0;}
.f-inp:focus{border-color:rgba(123,47,255,.45);background:rgba(123,47,255,.05);}
.f-inp:hover{border-color:var(--b2);}
select.f-inp option{background:#0d0d1c;}
textarea.f-inp{resize:vertical;min-height:52px;line-height:1.5;}
.c-row{display:flex;align-items:center;gap:.38rem;margin-bottom:.26rem;}
.c-sw{width:26px;height:20px;border-radius:4px;border:1px solid var(--b);cursor:pointer;background:none;padding:0;flex-shrink:0;}
.c-txt{flex:1;background:rgba(255,255,255,.05);border:1px solid var(--b);border-radius:5px;color:var(--txt);font-family:var(--mono);font-size:.6rem;padding:.24rem .36rem;outline:none;min-width:0;}
.c-txt:focus{border-color:rgba(123,47,255,.45);}
.f-full textarea.f-inp{width:100%;margin-bottom:.26rem;}
.pre-row{display:flex;flex-wrap:wrap;gap:.2rem;margin:.15rem 0 .35rem;}
.pre-btn{padding:.18rem .4rem;background:rgba(255,255,255,.04);border:1px solid var(--b);border-radius:5px;font-family:var(--mono);font-size:.5rem;color:var(--txt3);cursor:pointer;transition:.12s;white-space:nowrap;}
.pre-btn:hover{background:rgba(123,47,255,.12);border-color:rgba(123,47,255,.3);color:var(--txt);}
.f-mini-lbl{font-family:var(--mono);font-size:.47rem;color:var(--txt4);letter-spacing:.08em;text-transform:uppercase;margin:.2rem 0 .1rem;}
.al-row{display:flex;gap:.2rem;margin-bottom:.26rem;}
.al-btn{flex:1;padding:.28rem;border-radius:5px;border:1px solid var(--b);background:none;color:var(--txt3);cursor:pointer;font-size:.72rem;transition:.12s;text-align:center;}
.al-btn:hover,.al-btn.on{background:rgba(123,47,255,.14);border-color:rgba(123,47,255,.3);color:var(--txt);}

/* ── PALETTE / BLOCKS TAB ── */
.pal-hdr{font-family:var(--mono);font-size:.46rem;color:var(--txt3);letter-spacing:.1em;text-transform:uppercase;padding:.28rem .55rem .2rem;border-bottom:1px solid var(--b);}
.pal-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.2rem;padding:.38rem;}
.pal-item{display:flex;flex-direction:column;align-items:center;gap:.18rem;padding:.36rem .18rem;background:rgba(255,255,255,.03);border:1px solid var(--b);border-radius:var(--r);cursor:pointer;transition:.14s;user-select:none;}
.pal-item:hover{background:rgba(123,47,255,.12);border-color:rgba(123,47,255,.3);transform:translateY(-1px);}
.pal-item:active{transform:scale(.95);}
.pal-ic{font-size:1rem;line-height:1;}
.pal-nm{font-family:var(--mono);font-size:.46rem;color:var(--txt3);text-align:center;line-height:1.3;}
.tpl-grid{display:grid;grid-template-columns:1fr 1fr;gap:.45rem;padding:.45rem;}
.tpl-item{background:rgba(255,255,255,.03);border:1px solid var(--b);border-radius:var(--rl);padding:.65rem;cursor:pointer;transition:.14s;}
.tpl-item:hover{background:rgba(123,47,255,.1);border-color:rgba(123,47,255,.3);}
.tpl-preview{width:100%;aspect-ratio:16/10;border-radius:6px;margin-bottom:.35rem;background:rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;font-size:1.2rem;}
.tpl-nm{font-family:var(--mono);font-size:.58rem;color:var(--txt2);}
.tpl-desc{font-family:var(--mono);font-size:.5rem;color:var(--txt3);margin-top:.16rem;}

/* ── FRAMER TOOLS ── */
.frm-sec{padding:.4rem .5rem;border-bottom:1px solid var(--b);}
.frm-sec h3{font-family:var(--mono);font-size:.5rem;color:var(--txt3);letter-spacing:.09em;text-transform:uppercase;margin-bottom:.32rem;}
.frm-row{display:flex;gap:.22rem;margin-bottom:.2rem;}
.frm-btn{flex:1;padding:.3rem .18rem;background:rgba(255,255,255,.04);border:1px solid var(--b);border-radius:6px;color:var(--txt2);font-family:var(--mono);font-size:.52rem;cursor:pointer;transition:.13s;text-align:center;}
.frm-btn:hover{background:rgba(0,212,255,.08);border-color:rgba(0,212,255,.25);color:var(--cyan);}
.smart-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.2rem;margin-bottom:.24rem;}
.smart-btn{padding:.28rem .12rem;background:rgba(255,255,255,.03);border:1px solid var(--b);border-radius:5px;color:var(--txt3);font-family:var(--mono);font-size:.48rem;cursor:pointer;transition:.12s;text-align:center;}
.smart-btn:hover{background:rgba(0,212,255,.07);border-color:rgba(0,212,255,.25);color:var(--cyan);}

/* ── LAYOUT PANEL ── */
.lm-grid{display:grid;grid-template-columns:1fr 1fr;gap:.38rem;padding:.38rem;}
.lm-item{background:rgba(255,255,255,.03);border:1px solid var(--b);border-radius:8px;padding:.48rem .38rem;cursor:pointer;transition:.14s;text-align:center;}
.lm-item:hover{background:rgba(123,47,255,.1);border-color:rgba(123,47,255,.3);}
.lm-ic{font-size:1.2rem;margin-bottom:.2rem;}
.lm-nm{font-family:var(--mono);font-size:.5rem;color:var(--txt2);}

/* ── WORKSPACE PANEL ── */
.ws-item{display:flex;align-items:center;gap:.5rem;padding:.42rem .6rem;cursor:pointer;border-left:2px solid transparent;transition:.12s;font-family:var(--mono);font-size:.62rem;color:var(--txt2);}
.ws-item:hover{background:rgba(255,255,255,.04);color:var(--txt);}
.ws-item.active{border-left-color:var(--acc);color:var(--txt);background:rgba(123,47,255,.08);}
.ws-icon{font-size:1rem;flex-shrink:0;}
.ws-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ws-badge{font-size:.44rem;padding:.08rem .4rem;background:rgba(123,47,255,.12);border:1px solid rgba(123,47,255,.25);border-radius:4px;color:rgba(200,180,255,.7);}
/* Drafts list */
.draft-item{display:flex;align-items:center;gap:.4rem;padding:.4rem .6rem;border-bottom:1px solid var(--b);font-family:var(--mono);font-size:.58rem;color:var(--txt2);cursor:pointer;transition:.12s;}
.draft-item:hover{background:rgba(255,255,255,.04);}
.draft-time{font-size:.5rem;color:var(--txt3);margin-top:.08rem;}
.draft-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.draft-actions{display:flex;gap:.2rem;opacity:0;transition:.12s;}
.draft-item:hover .draft-actions{opacity:1;}
.draft-act-btn{padding:.15rem .28rem;border-radius:4px;border:1px solid var(--b);background:none;color:var(--txt3);cursor:pointer;font-size:.52rem;transition:.1s;}
.draft-act-btn:hover{background:rgba(255,255,255,.07);color:var(--txt);}
.draft-act-btn.del:hover{background:rgba(255,68,68,.1);color:var(--red);}

/* ── REVISION LIST ── */
.rev-item{display:flex;align-items:center;gap:.4rem;padding:.38rem .6rem;border-bottom:1px solid var(--b);font-family:var(--mono);font-size:.56rem;color:var(--txt2);cursor:pointer;transition:.12s;}
.rev-item:hover{background:rgba(255,255,255,.04);}
.rev-ver{background:rgba(123,47,255,.1);border:1px solid rgba(123,47,255,.2);border-radius:4px;padding:.06rem .3rem;color:rgba(200,180,255,.8);font-size:.5rem;flex-shrink:0;}
.rev-time{font-size:.5rem;color:var(--txt3);flex:1;}
.rev-by{font-size:.5rem;color:var(--txt3);}
.rev-restore{padding:.15rem .4rem;border-radius:4px;border:1px solid rgba(123,47,255,.25);background:none;color:rgba(200,180,255,.7);cursor:pointer;font-size:.5rem;transition:.1s;opacity:0;}
.rev-item:hover .rev-restore{opacity:1;}
.rev-restore:hover{background:rgba(123,47,255,.18);color:#fff;}

/* ── MEDIA GRID ── */
.media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.26rem;padding:.38rem;}
.m-item{aspect-ratio:1;border-radius:6px;overflow:hidden;background:rgba(255,255,255,.04);border:1px solid var(--b);cursor:pointer;transition:.14s;display:flex;align-items:center;justify-content:center;}
.m-item:hover{border-color:rgba(123,47,255,.38);transform:scale(1.03);}
.m-item img{width:100%;height:100%;object-fit:cover;}

/* ── TOAST ── */
#toast-container{position:fixed;bottom:calc(var(--sb)+.65rem);right:.75rem;z-index:9999;display:flex;flex-direction:column;gap:.32rem;pointer-events:none;}
.toast{display:flex;align-items:center;gap:.65rem;padding:.38rem .75rem;min-width:240px;max-width:360px;background:rgba(6,6,18,.97);border:1px solid rgba(255,255,255,.1);border-radius:10px;backdrop-filter:blur(16px);font-family:var(--mono);font-size:.62rem;color:#fff;box-shadow:0 8px 28px rgba(0,0,0,.65);pointer-events:all;animation:tIn .2s var(--eox) both;position:relative;overflow:hidden;}
.toast.removing{animation:tOut .18s ease forwards;}
@keyframes tIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@keyframes tOut{to{opacity:0;transform:translateX(12px)}}
.toast-icon{font-size:.95rem;flex-shrink:0;}
.toast-body{flex:1;line-height:1.5;}
.toast-title{color:#fff;letter-spacing:.05em;font-size:.6rem;}
.toast-msg{color:rgba(255,255,255,.5);font-size:.56rem;margin-top:.06rem;}
.toast-close{background:none;border:none;color:rgba(255,255,255,.3);cursor:pointer;font-size:.75rem;padding:.08rem;transition:.12s;}
.toast-close:hover{color:#fff;}
.toast-bar{position:absolute;bottom:0;left:0;height:2px;border-radius:0 0 10px 10px;animation:tBar linear forwards;background:currentColor;}
@keyframes tBar{from{width:100%}to{width:0}}
.toast-success{border-color:rgba(53,237,126,.22);}
.toast-success .toast-bar{color:var(--gr);}
.toast-error{border-color:rgba(255,68,68,.22);}
.toast-error .toast-bar{color:var(--red);}
.toast-info{border-color:rgba(0,212,255,.2);}
.toast-info .toast-bar{color:var(--cyan);}
.toast-warn{border-color:rgba(255,184,0,.2);}
.toast-warn .toast-bar{color:var(--gold);}
.toast-save{border-color:rgba(53,237,126,.2);}
.toast-save .toast-bar{color:var(--gr);}
.toast-draft{border-color:rgba(255,184,0,.18);}
.toast-draft .toast-bar{color:var(--gold);}
.toast-collab{border-color:rgba(123,47,255,.2);}
.toast-collab .toast-bar{color:var(--acc);}
.toast-lock{border-color:rgba(255,184,0,.18);}
.toast-lock .toast-bar{color:var(--gold);}

/* ── CONTEXT MENU ── */
#ctx-menu{position:fixed;z-index:8000;background:rgba(6,6,20,.97);border:1px solid var(--b2);border-radius:10px;padding:.3rem;min-width:168px;display:none;backdrop-filter:blur(18px);box-shadow:0 8px 32px rgba(0,0,0,.65);}
#ctx-menu.open{display:block;}
.ctx-item{padding:.34rem .6rem;border-radius:5px;font-family:var(--mono);font-size:.6rem;color:var(--txt2);cursor:pointer;transition:.1s;display:flex;align-items:center;gap:.36rem;}
.ctx-item:hover{background:rgba(123,47,255,.12);color:var(--txt);}
.ctx-item.danger:hover{background:rgba(255,68,68,.08);color:var(--red);}
.ctx-sep{height:1px;background:var(--b);margin:.16rem 0;}

/* ── COLLAB CURSORS ── */
.collab-cursor{position:fixed;pointer-events:none;z-index:2147483600;transform:translate(-4px,-4px);}
.collab-cursor svg{display:block;}
.collab-cursor span{background:var(--cc,#7B2FFF);color:#fff;font-family:var(--mono);font-size:.5rem;padding:.08rem .35rem;border-radius:0 4px 4px 4px;white-space:nowrap;position:absolute;top:16px;left:8px;}

/* ── MODALS ── */
.modal{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.72);display:none;align-items:center;justify-content:center;backdrop-filter:blur(8px);}
.modal.open{display:flex;}
.modal-box{background:rgba(6,6,18,.99);border:1px solid var(--b2);border-radius:18px;padding:1.8rem 2rem;max-width:520px;width:90%;position:relative;max-height:85vh;overflow-y:auto;}
.modal-box::-webkit-scrollbar{width:3px;}
.modal-box::-webkit-scrollbar-thumb{background:rgba(123,47,255,.3);}
.modal-hdr{font-family:var(--wide);font-size:.7rem;font-weight:600;margin-bottom:1.2rem;background:var(--spec);background-size:200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:specSpin 4s linear infinite;}
.modal-close{position:absolute;top:.8rem;right:.9rem;background:none;border:none;color:var(--txt3);cursor:pointer;font-size:1rem;transition:.12s;}
.modal-close:hover{color:var(--txt);}
.modal-row{margin-bottom:.9rem;}
.modal-row label{display:block;font-family:var(--mono);font-size:.57rem;color:var(--txt3);margin-bottom:.3rem;letter-spacing:.07em;text-transform:uppercase;}
.modal-inp{width:100%;background:rgba(255,255,255,.05);border:1px solid var(--b);border-radius:7px;color:var(--txt);font-family:var(--mono);font-size:.7rem;padding:.52rem .72rem;outline:none;transition:.12s;}
.modal-inp:focus{border-color:rgba(123,47,255,.45);background:rgba(123,47,255,.05);}
select.modal-inp option{background:#0d0d1c;}
.modal-footer{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1.4rem;}
.kb-group{margin-bottom:1.1rem;}
.kb-grp-hdr{font-family:var(--mono);font-size:.52rem;color:var(--txt3);letter-spacing:.15em;text-transform:uppercase;margin-bottom:.45rem;padding-bottom:.25rem;border-bottom:1px solid var(--b);}
.kb-row{display:flex;align-items:center;justify-content:space-between;padding:.3rem 0;border-bottom:1px solid rgba(255,255,255,.03);}
.kb-label{font-family:var(--font);font-size:.72rem;color:var(--txt2);}
.kb-keys{display:flex;align-items:center;gap:.2rem;}
.kb-keys kbd{padding:.12rem .38rem;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);border-radius:4px;font-family:var(--mono);font-size:.55rem;color:var(--txt);}

/* ── DRAG GHOST ── */
#drag-ghost{position:fixed;z-index:9990;pointer-events:none;opacity:.72;font-family:var(--mono);font-size:.62rem;background:rgba(123,47,255,.28);border:1px solid rgba(123,47,255,.65);border-radius:6px;padding:.28rem .55rem;color:#fff;display:none;}
#drop-line{position:absolute;left:.5rem;right:.5rem;height:2px;background:var(--acc);border-radius:2px;display:none;pointer-events:none;z-index:20;}

/* ── ACTIVITY FEED ── */
.act-item{display:flex;align-items:flex-start;gap:.5rem;padding:.4rem .55rem;border-bottom:1px solid var(--b);font-family:var(--mono);font-size:.55rem;color:var(--txt3);}
.act-icon{font-size:.85rem;flex-shrink:0;margin-top:.05rem;}
.act-body{flex:1;}
.act-user{color:var(--txt2);}
.act-action{color:var(--txt3);}
.act-time{font-size:.48rem;color:var(--txt4);margin-top:.06rem;}

@media(max-width:900px){
  :root{--lp:0px;--rp:0px;}
  #lp,#rp{display:none;}
}