:root{
  --shell:#f4f5f8;--sidebar:#ffffff;--panel:#ffffff;--topbar:#ffffff;
  --sidebar-w:280px;--panel-w:268px;--topbar-h:50px;
  --b:rgba(0,0,0,0.07);--b2:rgba(0,0,0,0.13);
  --txt:#1a2035;--txt2:#5a6478;--txt3:#9aa3b2;
  --accent:#3b82f6;--accent-d:rgba(59,130,246,0.10);
  --green:#16a34a;--red:#dc2626;
  --mono:'JetBrains Mono',monospace;--sans:'Outfit',sans-serif;
}
body.dark{
  --shell:#07090f;--sidebar:#0d1018;--panel:#0d1018;--topbar:#080b13;
  --b:rgba(255,255,255,0.07);--b2:rgba(255,255,255,0.13);
  --txt:#dde4f0;--txt2:#7a859a;--txt3:#404c60;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{background:var(--shell);color:var(--txt);font-family:var(--sans);font-size:13px;-webkit-font-smoothing:antialiased;transition:background .25s,color .25s}
button{cursor:pointer;border:none;background:none;color:inherit;font-family:inherit}
input,select,textarea{font-family:inherit;color:var(--txt)}
::-webkit-scrollbar{width:3px;height:3px}
::-webkit-scrollbar-thumb{background:rgba(128,128,128,0.18);border-radius:2px}

.app{display:grid;grid-template-rows:var(--topbar-h) 1fr;grid-template-columns:var(--sidebar-w) 1fr var(--panel-w);height:100vh;overflow:hidden}

/* TOPBAR */
.topbar{grid-column:1/-1;background:var(--topbar);border-bottom:1px solid var(--b);display:flex;align-items:center;padding:0 16px;z-index:100;box-shadow:0 1px 0 var(--b)}
.logo{display:flex;align-items:center;gap:8px;padding-right:16px;margin-right:12px;border-right:1px solid var(--b);flex-shrink:0}
.logo-mark{width:26px;height:26px;background:linear-gradient(135deg,#3b82f6,#8b5cf6);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:13px;color:white;font-weight:700}
.logo-text{font-family:var(--mono);font-weight:600;font-size:14px;color:var(--txt);letter-spacing:-.5px}
.logo-ver{font-family:var(--mono);font-size:8px;color:var(--txt3)}
.topbar-right{display:flex;align-items:center;gap:6px;margin-left:auto;padding-left:12px;border-left:1px solid var(--b)}
.btn{display:inline-flex;align-items:center;gap:5px;padding:6px 13px;border-radius:5px;font-size:11px;font-weight:600;font-family:var(--mono);transition:all .15s;white-space:nowrap;border:1px solid transparent}
.btn-ghost{background:rgba(128,128,128,0.06);color:var(--txt2);border-color:var(--b)}
.btn-ghost:hover{background:rgba(128,128,128,0.11);color:var(--txt);border-color:var(--b2)}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-danger{color:var(--red);border-color:rgba(220,38,38,0.2);background:rgba(220,38,38,0.06)}
.btn-icon{padding:6px 9px}

/* SIDEBAR — fixed tab bar + single scrollable pane */
.sidebar{background:var(--sidebar);border-right:1px solid var(--b);display:flex;flex-direction:column;overflow:hidden}
.sb-tabs{display:flex;border-bottom:1px solid var(--b);flex-shrink:0}
.sb-tab{flex:1;padding:11px 4px;text-align:center;font-family:var(--mono);font-size:9px;font-weight:700;color:var(--txt3);letter-spacing:1px;text-transform:uppercase;border-bottom:2px solid transparent;cursor:pointer;transition:all .15s}
.sb-tab:hover{color:var(--txt2)}
.sb-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
/* KEY: only active pane is displayed — no triple scrollers */
.sb-pane{flex:1;overflow-y:auto;display:none}
.sb-pane.active{display:block}

.sec{padding:14px 15px;border-bottom:1px solid var(--b)}
.sec:last-child{border-bottom:none}
.sec-title{font-size:9px;font-weight:700;color:var(--txt3);letter-spacing:1.8px;text-transform:uppercase;margin-bottom:10px;font-family:var(--mono)}
.field{margin-bottom:9px}.field:last-child{margin-bottom:0}
.fl{font-size:9px;color:var(--txt3);font-family:var(--mono);letter-spacing:.5px;text-transform:uppercase;margin-bottom:4px;display:block}
.sel-wrap{position:relative}
.sel-wrap::after{content:'v';position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:8px;color:var(--txt3);pointer-events:none}
select{width:100%;height:30px;background:rgba(128,128,128,0.05);border:1px solid var(--b);border-radius:4px;color:var(--txt);font-size:11px;padding:0 22px 0 8px;appearance:none;cursor:pointer}
select:focus{outline:none;border-color:var(--accent)}
.sg{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:9px}
.stepper{display:flex;align-items:center;background:rgba(128,128,128,0.05);border:1px solid var(--b);border-radius:4px;height:28px;overflow:hidden}
.sb2{width:24px;height:100%;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--txt2);transition:all .1s;flex-shrink:0;line-height:1}
.sb2:hover{background:rgba(128,128,128,0.1);color:var(--txt)}
.sv{flex:1;text-align:center;font-family:var(--mono);font-size:12px;font-weight:600;color:var(--txt)}
.chips{display:flex;flex-wrap:wrap;gap:4px}
.chip{padding:3px 9px;border-radius:20px;font-size:10px;font-family:var(--mono);font-weight:500;border:1px solid var(--b);color:var(--txt2);background:transparent;transition:all .15s;cursor:pointer}
.chip:hover{border-color:var(--b2);color:var(--txt)}
.chip.on{background:var(--accent-d);border-color:rgba(59,130,246,0.3);color:var(--accent)}
.tog-row{display:flex;align-items:center;justify-content:space-between;padding:5px 0}
.tog-label{font-size:11px;color:var(--txt2)}
.tog{position:relative;width:30px;height:16px;flex-shrink:0}
.tog input{opacity:0;width:0;height:0}
.tog-track{position:absolute;inset:0;background:rgba(128,128,128,0.14);border-radius:8px;transition:background .2s;cursor:pointer;border:1px solid var(--b)}
.tog input:checked+.tog-track{background:var(--accent);border-color:var(--accent)}
.tog-track::after{content:'';position:absolute;left:2px;top:2px;width:10px;height:10px;background:rgba(100,100,100,0.5);border-radius:50%;transition:transform .2s,background .2s}
.tog input:checked+.tog-track::after{transform:translateX(14px);background:#fff}
.gen-btn{width:100%;height:34px;background:linear-gradient(135deg,var(--accent),#6366f1);color:#fff;border-radius:6px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.4px;display:flex;align-items:center;justify-content:center;gap:6px;transition:all .2s;box-shadow:0 3px 14px rgba(59,130,246,0.2)}
.gen-btn:hover{transform:translateY(-1px);box-shadow:0 5px 20px rgba(59,130,246,0.32)}
.gen-btn:disabled{opacity:.5;pointer-events:none}

/* THEME PANE */
.mode-row{display:flex;gap:5px;margin-bottom:10px}
.mode-btn{flex:1;padding:7px;border-radius:5px;font-family:var(--mono);font-size:9px;font-weight:600;text-align:center;border:1px solid var(--b);color:var(--txt2);cursor:pointer;transition:all .15s}
.mode-btn:hover{border-color:var(--b2);color:var(--txt)}
.mode-btn.on{background:var(--accent-d);border-color:rgba(59,130,246,0.3);color:var(--accent)}
.theme-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;margin-bottom:2px}
.tc{border:1.5px solid var(--b);border-radius:6px;overflow:hidden;cursor:pointer;transition:all .15s}
.tc:hover{border-color:var(--b2);transform:translateY(-1px)}
.tc.on{border-color:var(--accent);box-shadow:0 0 8px var(--accent-d)}
.tc-prev{height:30px;position:relative;overflow:hidden}
.tc-lbl{padding:3px 5px;font-family:var(--mono);font-size:8px;color:var(--txt2)}
.pal-list{display:flex;flex-direction:column;gap:4px}
.pal-row{display:flex;align-items:center;gap:5px;padding:5px 7px;border:1.5px solid var(--b);border-radius:4px;cursor:pointer;transition:all .15s}
.pal-row:hover{border-color:var(--b2)}
.pal-row.on{border-color:rgba(59,130,246,0.4);background:var(--accent-d)}
.pal-sw{display:flex;gap:2px;flex:1}
.sw{flex:1;height:11px;border-radius:2px}
.pal-nm{font-family:var(--mono);font-size:8px;color:var(--txt3);white-space:nowrap}
.slider-wrap{margin-bottom:2px}
.slider-row{display:flex;justify-content:space-between;font-family:var(--mono);font-size:8px;color:var(--txt3);margin-top:3px}
input[type=range]{width:100%;height:3px;background:rgba(128,128,128,0.15);border-radius:2px;outline:none;appearance:none;cursor:pointer}
input[type=range]::-webkit-slider-thumb{appearance:none;width:12px;height:12px;border-radius:50%;background:var(--accent);cursor:pointer}
.typo-list{display:flex;flex-direction:column;gap:4px}
.typo-opt{padding:6px 8px;border:1.5px solid var(--b);border-radius:4px;cursor:pointer;transition:all .15s}
.typo-opt:hover{border-color:var(--b2)}
.typo-opt.on{border-color:rgba(59,130,246,0.4);background:var(--accent-d)}
.typo-name{font-size:11px;font-weight:600;color:var(--txt);margin-bottom:1px}
.typo-sub{font-size:9px;color:var(--txt3);font-family:var(--mono)}

/* BRAND PANE */
.logo-drop{width:100%;height:60px;border:1.5px dashed var(--b2);border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;position:relative;overflow:hidden;margin-bottom:8px}
.logo-drop:hover{border-color:rgba(59,130,246,0.4);background:var(--accent-d)}
.logo-drop input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.logo-drop-txt{font-family:var(--mono);font-size:8px;color:var(--txt3);text-align:center;pointer-events:none;line-height:1.7}
.logo-drop img{max-width:90%;max-height:48px;object-fit:contain;pointer-events:none}
.lc-row{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:10px}
.lc-sw{width:18px;height:18px;border-radius:3px;border:1px solid rgba(128,128,128,0.2);cursor:pointer;transition:transform .15s;title:attr(title)}
.lc-sw:hover{transform:scale(1.25)}
.sug-list{display:flex;flex-direction:column;gap:4px}
.sug{border:1.5px solid var(--b);border-radius:6px;overflow:hidden;cursor:pointer;transition:all .15s}
.sug:hover{border-color:var(--b2);transform:translateY(-1px)}
.sug.on{border-color:var(--accent)}
.sug-prev{height:26px;display:flex;align-items:center;gap:4px;padding:4px 8px}
.sug-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.sug-bars{flex:1;display:flex;flex-direction:column;gap:2px}
.sug-bar{height:3px;border-radius:1px;opacity:.65}
.sug-lbl{padding:3px 8px 5px;font-family:var(--mono);font-size:8px;color:var(--txt2)}
.custom-pal-wrap{margin-bottom:8px}

/* CANVAS */
.canvas-area{display:flex;flex-direction:column;background:#e4e7ef;overflow:hidden}
body.dark .canvas-area{background:#080c14}
.canvas-bar{height:33px;background:var(--sidebar);border-bottom:1px solid var(--b);display:flex;align-items:center;padding:0 10px;gap:4px;flex-shrink:0}
.tool-grp{display:flex;gap:2px}
.tool-sep{width:1px;height:13px;background:var(--b);margin:0 4px}
.tbtn{padding:3px 7px;border-radius:3px;font-size:9px;font-family:var(--mono);font-weight:500;color:var(--txt3);border:1px solid transparent;transition:all .1s}
.tbtn:hover{background:rgba(128,128,128,0.08);color:var(--txt2);border-color:var(--b)}
.tbtn.on{background:var(--accent-d);color:var(--accent);border-color:rgba(59,130,246,0.25)}
.meta{margin-left:auto;font-family:var(--mono);font-size:9px;color:var(--txt3);display:flex;gap:7px}
.meta-b{padding:2px 6px;background:rgba(128,128,128,0.07);border:1px solid var(--b);border-radius:3px}
.viewport{flex:1;overflow:hidden;position:relative;cursor:grab;display:flex;align-items:center;justify-content:center;user-select:none}
.viewport.panning{cursor:grabbing}
.canvas-wrap{position:relative;transform-origin:center center;will-change:transform}
#canvas{position:relative;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,0.07),0 16px 40px rgba(0,0,0,0.14)}
body.dark #canvas{box-shadow:0 0 0 1px rgba(255,255,255,0.04),0 16px 40px rgba(0,0,0,0.6)}
.grid-ov{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .2s;background-image:linear-gradient(rgba(128,128,128,0.1) 1px,transparent 1px),linear-gradient(90deg,rgba(128,128,128,0.1) 1px,transparent 1px);background-size:20px 20px;z-index:1}
.grid-ov.show{opacity:1}
.empty-state{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;pointer-events:none;z-index:2}
.empty-icon{width:52px;height:52px;border:2px dashed rgba(128,128,128,0.2);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;opacity:.3;color:var(--txt3)}
.empty-title{font-family:var(--mono);font-size:12px;color:rgba(128,128,128,0.3)}
.empty-sub{font-size:11px;color:rgba(128,128,128,0.2);text-align:center;max-width:230px;line-height:1.7}

/* BLOCKS */
.blk{position:absolute;display:flex;flex-direction:column;overflow:visible;cursor:pointer;z-index:2}
.blk-inner{width:100%;height:100%;border-radius:6px;overflow:hidden;display:flex;flex-direction:column}
.blk.selected .blk-inner{outline:2px solid var(--accent);outline-offset:0px}
.blk.selected{z-index:50}
.blk-hdr{height:var(--hdr-h,22px);display:flex;align-items:center;justify-content:space-between;padding:0 7px;flex-shrink:0}
.blk-title{font-family:var(--mono);font-size:var(--title-sz,10px);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.blk-badge{font-family:var(--mono);font-size:6px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;padding:1px 4px;border-radius:2px;flex-shrink:0}
.blk-body{flex:1;display:flex;align-items:center;justify-content:center;padding:5px;overflow:hidden}
.rh{position:absolute;z-index:60;background:var(--accent);border:2px solid #fff;border-radius:2px;opacity:0;transition:opacity .15s;pointer-events:all}
.blk.selected .rh{opacity:1}
.rh-c{width:8px;height:8px}
.rh-e{background:rgba(59,130,246,0.45);border-color:rgba(255,255,255,0.6)}
.rh-eh{width:18px;height:4px;border-radius:2px}
.rh-ev{width:4px;height:18px;border-radius:2px}
.rh-tl{top:-4px;left:-4px;cursor:nw-resize}
.rh-tr{top:-4px;right:-4px;cursor:ne-resize}
.rh-bl{bottom:-4px;left:-4px;cursor:sw-resize}
.rh-br{bottom:-4px;right:-4px;cursor:se-resize}
.rh-t{top:-2px;left:50%;transform:translateX(-50%);cursor:n-resize}
.rh-b{bottom:-2px;left:50%;transform:translateX(-50%);cursor:s-resize}
.rh-l{left:-2px;top:50%;transform:translateY(-50%);cursor:w-resize}
.rh-r{right:-2px;top:50%;transform:translateY(-50%);cursor:e-resize}
.blk-bar{position:absolute;top:-31px;left:50%;transform:translateX(-50%);background:var(--sidebar);border:1px solid var(--b2);border-radius:5px;display:flex;align-items:center;gap:2px;padding:3px 5px;opacity:0;pointer-events:none;transition:opacity .15s;z-index:70;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,0.1)}
.blk.selected .blk-bar{opacity:1;pointer-events:all}
.pb{padding:2px 6px;border-radius:3px;font-family:var(--mono);font-size:8px;font-weight:600;color:var(--txt2);border:1px solid transparent;transition:all .1s}
.pb:hover{background:var(--accent-d);color:var(--accent);border-color:rgba(59,130,246,0.25)}
.p-sep{width:1px;height:11px;background:var(--b);margin:0 2px}
.size-ro{font-family:var(--mono);font-size:7px;color:var(--txt3);padding:0 3px;border-left:1px solid var(--b);margin-left:2px}

/* RIGHT PANEL */
.rpanel{background:var(--panel);border-left:1px solid var(--b);display:flex;flex-direction:column;overflow:hidden}
.rp-tabs{display:flex;border-bottom:1px solid var(--b);flex-shrink:0}
.rp-tab{flex:1;padding:8px 3px;text-align:center;font-family:var(--mono);font-size:8px;font-weight:700;color:var(--txt3);letter-spacing:.5px;text-transform:uppercase;border-bottom:2px solid transparent;cursor:pointer;transition:all .15s}
.rp-tab:hover{color:var(--txt2)}
.rp-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.rp-body{flex:1;overflow-y:auto;padding:13px;display:none}
.rp-body.active{display:block}
.prop-sec{margin-bottom:12px}
.prop-title{font-size:8px;font-weight:700;color:var(--txt3);letter-spacing:1.5px;text-transform:uppercase;font-family:var(--mono);margin-bottom:7px}
.prop-row{display:flex;justify-content:space-between;align-items:center;padding:3px 0;border-bottom:1px solid var(--b)}
.prop-k{font-family:var(--mono);font-size:9px;color:var(--txt3)}
.prop-v{font-family:var(--mono);font-size:9px;font-weight:500;color:var(--txt)}
.leg-item{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9px;color:var(--txt2);padding:2px 0}
.leg-dot{width:6px;height:6px;border-radius:2px;flex-shrink:0}
.edit-field{margin-bottom:9px}
.edit-label{font-size:8px;font-family:var(--mono);color:var(--txt3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px;display:block}
.edit-inp{width:100%;height:27px;background:rgba(128,128,128,0.05);border:1px solid var(--b);border-radius:4px;color:var(--txt);font-size:11px;padding:0 7px}
.edit-inp:focus{outline:none;border-color:var(--accent)}

/* Power BI Reference panel */
.pbi-row{display:flex;align-items:center;gap:6px;padding:4px 0;border-bottom:1px solid var(--b)}
.pbi-swatch{width:20px;height:20px;border-radius:3px;flex-shrink:0;border:1px solid rgba(128,128,128,0.15)}
.pbi-label{font-family:var(--mono);font-size:8px;color:var(--txt2);flex:1;line-height:1.3}
.pbi-hex{font-family:var(--mono);font-size:8px;color:var(--txt3);letter-spacing:.3px}
.pbi-copy{padding:2px 5px;border-radius:3px;font-family:var(--mono);font-size:7px;font-weight:600;color:var(--accent);border:1px solid rgba(59,130,246,0.25);background:var(--accent-d);cursor:pointer;transition:all .1s;white-space:nowrap;flex-shrink:0}
.pbi-copy:hover{background:var(--accent);color:#fff}
.pbi-copy.copied{background:var(--green);color:#fff;border-color:var(--green)}
.pbi-section{font-family:var(--mono);font-size:7px;font-weight:700;color:var(--txt3);letter-spacing:1.5px;text-transform:uppercase;margin:10px 0 5px;padding-top:6px;border-top:1px solid var(--b)}
.pbi-note{font-size:9px;color:var(--txt3);line-height:1.6;margin-top:4px;padding:6px 8px;background:rgba(59,130,246,0.05);border-radius:4px;border-left:2px solid var(--accent)}

/* EXPORT MODAL */
.modal-back{position:fixed;inset:0;background:rgba(0,0,0,0.45);backdrop-filter:blur(4px);z-index:200;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s}
.modal-back.open{opacity:1;pointer-events:all}
.modal{background:var(--sidebar);border:1px solid var(--b2);border-radius:10px;width:560px;max-width:92vw;box-shadow:0 24px 60px rgba(0,0,0,0.15);transform:translateY(8px);transition:transform .2s}
body.dark .modal{box-shadow:0 24px 60px rgba(0,0,0,0.6)}
.modal-back.open .modal{transform:translateY(0)}
.modal-hdr{padding:16px 20px 12px;border-bottom:1px solid var(--b);display:flex;align-items:flex-start;justify-content:space-between}
.modal-title{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--txt);margin-bottom:2px}
.modal-sub{font-size:11px;color:var(--txt2)}
.modal-x{width:24px;height:24px;border-radius:4px;border:1px solid var(--b);display:flex;align-items:center;justify-content:center;color:var(--txt3);font-size:11px;transition:all .15s;cursor:pointer}
.modal-x:hover{background:rgba(128,128,128,0.08);color:var(--txt)}
.modal-body{padding:16px 20px}
.modal-foot{padding:11px 20px;border-top:1px solid var(--b);display:flex;align-items:center;justify-content:space-between}
.exp-cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-bottom:13px}
.exp-card{padding:11px;border:1.5px solid var(--b);border-radius:6px;cursor:pointer;transition:all .15s;background:rgba(128,128,128,0.02)}
.exp-card:hover{border-color:var(--b2)}
.exp-card.on{border-color:var(--accent);background:var(--accent-d)}
.exp-icon{font-size:18px;margin-bottom:5px}
.exp-name{font-family:var(--mono);font-size:10px;font-weight:600;color:var(--txt);margin-bottom:2px}
.exp-desc{font-size:10px;color:var(--txt2);line-height:1.4}
.exp-tag{display:inline-block;margin-top:4px;padding:1px 5px;border-radius:2px;font-family:var(--mono);font-size:7px;font-weight:600}
.code-pre{background:rgba(0,0,0,0.04);border:1px solid var(--b);border-radius:6px;padding:10px;font-family:var(--mono);font-size:9px;color:#1d4ed8;line-height:1.7;max-height:130px;overflow-y:auto;white-space:pre}
body.dark .code-pre{background:rgba(0,0,0,0.3);color:#7dd3fc}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(60px);background:var(--sidebar);border:1px solid var(--b2);border-radius:6px;padding:8px 14px;font-family:var(--mono);font-size:10px;color:var(--txt);display:flex;align-items:center;gap:6px;box-shadow:0 6px 20px rgba(0,0,0,0.1);transition:transform .3s cubic-bezier(.34,1.56,.64,1);z-index:300;white-space:nowrap}
.toast.show{transform:translateX(-50%) translateY(0)}
@keyframes blk-in{from{opacity:0;transform:scale(0.94)}to{opacity:1;transform:scale(1)}}
.blk{animation:blk-in .15s ease both}
#color-canvas{display:none}

/* ── DRAG & DROP ── */
.blk.dragging{opacity:.82;z-index:200;cursor:grabbing!important}
.blk.dragging .blk-inner{box-shadow:0 8px 32px rgba(0,0,0,0.22),0 0 0 2px var(--accent)!important}
.blk-inner{cursor:grab}
.blk-inner:active{cursor:grabbing}

/* ── SNAP GUIDES ── */
.snap-guide{position:absolute;z-index:500;pointer-events:none;opacity:0;transition:opacity .08s}
.snap-guide.show{opacity:1}
.snap-guide-h{left:0;right:0;height:1px;background:rgba(59,130,246,0.7);box-shadow:0 0 4px rgba(59,130,246,0.4)}
.snap-guide-v{top:0;bottom:0;width:1px;background:rgba(59,130,246,0.7);box-shadow:0 0 4px rgba(59,130,246,0.4)}

/* ── MULTI-SELECT ── */
.blk.multi-sel .blk-inner{outline:2px solid #f59e0b!important;outline-offset:0}
.sel-rect{position:absolute;z-index:400;pointer-events:none;border:1.5px dashed var(--accent);background:rgba(59,130,246,0.05);display:none}
.sel-rect.show{display:block}
.multi-toolbar{position:fixed;bottom:60px;left:50%;transform:translateX(-50%);background:var(--sidebar);border:1px solid var(--b2);border-radius:8px;padding:7px 10px;display:flex;align-items:center;gap:6px;box-shadow:0 8px 24px rgba(0,0,0,0.12);z-index:400;font-family:var(--mono);font-size:10px;opacity:0;pointer-events:none;transition:opacity .2s}
body.dark .multi-toolbar{box-shadow:0 8px 24px rgba(0,0,0,0.5)}
.multi-toolbar.show{opacity:1;pointer-events:all}
.multi-toolbar-label{color:var(--txt3);padding-right:6px;border-right:1px solid var(--b)}
.mt-btn{padding:4px 9px;border-radius:4px;border:1px solid var(--b);color:var(--txt2);cursor:pointer;transition:all .12s}
.mt-btn:hover{border-color:var(--b2);color:var(--txt);background:rgba(128,128,128,0.06)}
.mt-btn.danger:hover{border-color:rgba(220,38,38,0.3);color:var(--red);background:rgba(220,38,38,0.05)}

/* ── LOCKED BLOCKS ── */
.blk.locked .blk-inner{outline:1.5px dashed rgba(245,158,11,0.5)!important}
.blk.locked .rh{display:none!important}
.lock-icon{position:absolute;top:3px;right:3px;font-size:9px;z-index:60;opacity:0.5;pointer-events:none}

/* ── UNDO/REDO counter badge ── */
.undo-badge{padding:2px 7px;border-radius:3px;font-family:var(--mono);font-size:9px;color:var(--txt3);border:1px solid var(--b);background:rgba(128,128,128,0.04)}
.undo-badge.active{color:var(--accent);border-color:rgba(59,130,246,0.25)}

/* ── DUPLICATE flash ── */
@keyframes dup-flash{0%{outline:3px solid var(--accent);outline-offset:3px}100%{outline:none;outline-offset:0}}
.blk.dup-flash .blk-inner{animation:dup-flash .4s ease}

/* ── STYLE COPY cursor ── */
.style-copy-mode *{cursor:crosshair!important}
.style-copy-btn.active{background:rgba(168,85,247,0.12)!important;border-color:rgba(168,85,247,0.4)!important;color:#a855f7!important}

.page-bar{height:34px;background:var(--sidebar);border-bottom:1px solid var(--b);display:flex;align-items:center;padding:0 8px;gap:2px;flex-shrink:0;overflow-x:auto;overflow-y:hidden}
.page-bar::-webkit-scrollbar{height:2px}
.page-tab{display:flex;align-items:center;gap:5px;padding:4px 10px;border-radius:4px;font-family:var(--mono);font-size:9px;font-weight:600;color:var(--txt3);border:1px solid transparent;cursor:pointer;transition:all .15s;white-space:nowrap;flex-shrink:0;position:relative}
.page-tab:hover{background:rgba(128,128,128,0.07);color:var(--txt2)}
.page-tab.active{background:var(--accent-d);border-color:rgba(59,130,246,0.25);color:var(--accent)}
.page-tab-name{outline:none;background:none;border:none;font:inherit;color:inherit;cursor:text;max-width:100px;width:auto}
.page-tab-del{width:14px;height:14px;border-radius:2px;display:flex;align-items:center;justify-content:center;font-size:9px;color:var(--txt3);opacity:0;transition:all .1s;flex-shrink:0;cursor:pointer}
.page-tab:hover .page-tab-del{opacity:1}
.page-tab-del:hover{background:rgba(220,38,38,0.12);color:var(--red)}
.page-add-btn{padding:4px 8px;border-radius:4px;font-family:var(--mono);font-size:11px;font-weight:600;color:var(--txt3);border:1px dashed var(--b2);cursor:pointer;transition:all .15s;flex-shrink:0}
.page-add-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-d)}
.page-bar-sep{width:1px;height:14px;background:var(--b);margin:0 4px;flex-shrink:0}

/* PROJECT TOPBAR AREA */
.project-row{display:flex;align-items:center;gap:6px;flex:1;overflow:hidden}
.project-name-wrap{display:flex;align-items:center;gap:4px;padding:3px 8px;border-radius:4px;border:1px solid transparent;cursor:pointer;transition:all .15s;min-width:0}
.project-name-wrap:hover{border-color:var(--b);background:rgba(128,128,128,0.05)}
.project-name-inp{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--txt);background:none;border:none;outline:none;cursor:pointer;max-width:200px;min-width:60px;width:auto}
.project-name-inp:focus{cursor:text}
.save-chip{padding:2px 7px;border-radius:3px;font-family:var(--mono);font-size:8px;font-weight:600;display:flex;align-items:center;gap:3px;transition:all .2s}
.save-chip.saved{background:rgba(22,163,74,0.1);color:var(--green)}
.save-chip.unsaved{background:rgba(128,128,128,0.08);color:var(--txt3)}
.save-chip.saving{background:rgba(245,158,11,0.1);color:#d97706}

/* PROJECTS PANEL */
.proj-list{display:flex;flex-direction:column;gap:4px}
.proj-card{padding:9px 10px;border:1px solid var(--b);border-radius:6px;cursor:pointer;transition:all .15s;position:relative}
.proj-card:hover{border-color:var(--b2);background:rgba(128,128,128,0.02)}
.proj-card.active{border-color:var(--accent);background:var(--accent-d)}
.proj-card-name{font-family:var(--mono);font-size:10px;font-weight:600;color:var(--txt);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:18px}
.proj-card-meta{font-family:var(--mono);font-size:8px;color:var(--txt3)}
.proj-card-del{position:absolute;top:8px;right:8px;font-size:9px;color:var(--txt3);opacity:0;transition:opacity .15s;padding:1px 3px;border-radius:2px;cursor:pointer}
.proj-card:hover .proj-card-del{opacity:1}
.proj-card-del:hover{color:var(--red);background:rgba(220,38,38,0.08)}
.proj-empty-msg{font-family:var(--mono);font-size:9px;color:var(--txt3);text-align:center;padding:18px 8px;line-height:2}