/* css/styles.css */
:root{--bg-dark:#111114;--bg-panel:#18181C;--bg-input:#232328;--border:#2C2C33;--text:#D4D4D8;--text-dim:#71717A;--accent:#F97316;--accent-hover:#EA580C;--accent-glow:rgba(249,115,22,.15);--danger:#EF4444;--success:#059669;--sel-color:#F97316;--handle-bg:#fff;--handle-border:#F97316;}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Montserrat',sans-serif;background:var(--bg-dark);overflow:hidden;height:100vh;display:flex;flex-direction:column;color:var(--text);user-select:none;}
#topbar{height:40px;background:var(--bg-panel);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 10px;flex-shrink:0;z-index:100;}
.topbar-left{display:flex;align-items:center;gap:3px;}
.topbar-center{display:flex;align-items:center;gap:3px;}
.topbar-right{display:flex;align-items:center;gap:4px;}
.logo{font-weight:800;font-size:15px;color:var(--accent);letter-spacing:-.5px;}
.topbar-sep{width:1px;height:22px;background:var(--border);margin:0 3px;}
.tb{width:32px;height:30px;border-radius:5px;display:flex;align-items:center;justify-content:center;cursor:pointer;background:transparent;border:none;color:var(--text);font-size:13px;transition:all .1s;}
.tb:hover:not(:disabled){background:var(--bg-input);color:#fff;}.tb.active{background:var(--accent-glow);color:var(--accent);}.tb:disabled{opacity:.25;cursor:default;}
#bottombar{height:42px;background:var(--bg-panel);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:center;padding:0 10px;flex-shrink:0;z-index:100;}
.bottombar-center{display:flex;align-items:center;gap:4px;}
.bottombar-sep{width:1px;height:22px;background:var(--border);margin:0 2px;}
.zoom-display{font-size:10px;color:var(--text-dim);min-width:34px;text-align:center;}
.lop-label{font-size:9px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.3px;white-space:nowrap;}
.lop-slider-bottom{width:70px;accent-color:var(--accent);cursor:pointer;height:3px;}
.lop-val-bottom{font-size:10px;color:var(--text-dim);min-width:28px;text-align:right;}
.bb{width:30px;height:30px;border-radius:5px;display:flex;align-items:center;justify-content:center;cursor:pointer;background:transparent;border:none;color:var(--text);font-size:12px;transition:all .1s;}
.bb:hover:not(:disabled){background:var(--bg-input);color:#fff;}.bb.danger:hover:not(:disabled){background:rgba(239,68,68,.12);color:var(--danger);}.bb:disabled{opacity:.25;cursor:default;}
#exportBtn{background:var(--accent);color:#fff;border:none;padding:5px 14px;border-radius:6px;font-family:inherit;font-size:11px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:5px;transition:all .15s;white-space:nowrap;}
#exportBtn:hover{background:var(--accent-hover);transform:translateY(-1px);}
#main-area{display:flex;flex:1;overflow:hidden;}
#left-sidebar{width:236px;background:var(--bg-panel);border-right:1px solid var(--border);flex-shrink:0;overflow-y:auto;overflow-x:hidden;}
#left-sidebar::-webkit-scrollbar{width:3px;}#left-sidebar::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}
#left-sidebar.hidden-panel,
#right-sidebar.hidden-panel {
    display: none;
}
#workspace{flex:1;overflow:hidden;display:flex;align-items:flex-start;justify-content:flex-start;padding:0;background:#222228;background-image:radial-gradient(circle,#333339 .7px,transparent .7px);background-size:16px 16px;}
#canvas-wrapper{position:relative;flex-shrink:0;transform-origin:0 0;will-change:transform;}
#canvas{width:595px;height:842px;background:#fff;position:relative;overflow:visible;box-shadow:0 6px 36px rgba(0,0,0,.6);border-radius:2px;}
#canvas.show-checker{background-image:repeating-conic-gradient(#e0e0e0 0% 25%,#ffffff 0% 50%);background-size:12px 12px;}
.canvas-element{position:absolute;}
.canvas-element.editing{cursor:text;}
.canvas-element.hidden-el{display:none!important;}
body:not(.is-dragging) #canvas .canvas-element:not(.editing):hover{outline:1px dashed rgba(249,115,22,.4);outline-offset:-1px;}#selection-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:900;}
#selection-frame{position:absolute;border:var(--sel-border-w, 2px) solid var(--sel-color);pointer-events:none;display:none;}
.handle{position:absolute;width:var(--handle-size, 16px);height:var(--handle-size, 16px);background:var(--handle-bg);border:var(--handle-border-w, 2px) solid var(--handle-border);pointer-events:auto;z-index:10;border-radius:2px;}
.handle.rot-handle{top:-30px;left:calc(50% - 8px);border-radius:50%;cursor:crosshair;background:var(--handle-bg);border:2px solid var(--handle-border);width:16px;height:16px;}
.handle[data-h="nw"]{top:calc(var(--handle-offset, 8px)*-1);left:calc(var(--handle-offset, 8px)*-1);cursor:nw-resize;}
.handle[data-h="n"]{top:calc(var(--handle-offset, 8px)*-1);left:calc(50% - var(--handle-offset, 8px));cursor:ns-resize;}
.handle[data-h="ne"]{top:calc(var(--handle-offset, 8px)*-1);right:calc(var(--handle-offset, 8px)*-1);cursor:ne-resize;}
.handle[data-h="e"]{top:calc(50% - var(--handle-offset, 8px));right:calc(var(--handle-offset, 8px)*-1);cursor:ew-resize;}
.handle[data-h="se"]{bottom:calc(var(--handle-offset, 8px)*-1);right:calc(var(--handle-offset, 8px)*-1);cursor:se-resize;}
.handle[data-h="s"]{bottom:calc(var(--handle-offset, 8px)*-1);left:calc(50% - var(--handle-offset, 8px));cursor:ns-resize;}
.handle[data-h="sw"]{bottom:calc(var(--handle-offset, 8px)*-1);left:calc(var(--handle-offset, 8px)*-1);cursor:sw-resize;}
.handle[data-h="w"]{top:calc(50% - var(--handle-offset, 8px));left:calc(var(--handle-offset, 8px)*-1);cursor:ew-resize;}
#right-sidebar{width:210px;background:var(--bg-panel);border-left:1px solid var(--border);flex-shrink:0;display:flex;flex-direction:column;overflow:hidden;}
#page-tabs-bar{display:flex;align-items:center;gap:2px;padding:6px 6px 4px;border-bottom:1px solid var(--border);flex-shrink:0;overflow:hidden;}
#page-tabs-container{display:flex;gap:2px;flex:1;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;}
#page-tabs-container::-webkit-scrollbar{height:0;width:0;}
#page-tabs-container{scrollbar-width:none;}
.page-tab{flex-shrink:0;padding:5px 10px;border-radius:5px;font-size:11px;font-weight:500;cursor:pointer;background:transparent;border:1px solid transparent;color:var(--text);transition:all .12s;white-space:nowrap;text-align:center;}
.page-tab.active{background:var(--accent-glow);border-color:var(--accent);color:var(--accent);font-weight:600;}
.page-tab:hover:not(.active){background:var(--bg-input);}
#layersList{flex:1;overflow-y:auto;overflow-x:hidden;padding:2px;}
#layersList::-webkit-scrollbar{width:3px;}#layersList::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}
.layer-section{padding:4px 8px 2px;font-size:9px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.3px;display:flex;align-items:center;gap:4px;border-top:1px solid var(--border);margin-top:2px;}
.layer-section:first-child{border-top:none;margin-top:0;}
.layer-row{display:flex;align-items:center;gap:4px;padding:2px 4px;border-radius:3px;cursor:pointer;transition:background .08s;margin-bottom:1px;height:36px;}
.layer-row:hover{background:rgba(255,255,255,.04);}.layer-row.active{background:var(--accent-glow);}
.layer-row.drag-over-top{box-shadow:inset 0 2px 0 var(--accent);}
.layer-row.drag-over-bottom{box-shadow:inset 0 -2px 0 var(--accent);}
.layer-row.dragging{opacity:.4;}
.ln-eye{width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:9px;color:var(--text-dim);cursor:pointer;flex-shrink:0;transition:color .1s;background:none;border:none;padding:0;}
.ln-eye:hover{color:#fff;}.ln-eye.off{color:#333;}
.ln-thumb{width:22px;height:32px;border-radius:2px;flex-shrink:0;background:repeating-conic-gradient(#2a2a30 0% 25%,#222228 0% 50%) 50%/6px 6px;border:1px solid var(--border);overflow:hidden;}
.ln-thumb canvas{width:100%;height:100%;display:block;}
.layer-row.active .ln-thumb{border-color:var(--accent);}
.ln-name{font-size:10px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2;min-width:0;color:var(--text);transition:color .1s;}
.layer-row:hover .ln-name{color:#fff;}
.ln-lock{width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:9px;color:var(--text-dim);cursor:pointer;flex-shrink:0;transition:color .1s;background:none;border:none;padding:0;}
.ln-lock:hover{color:#fff;}.ln-lock.locked{color:var(--accent);}
.layer-name-input{font-size:10px;flex:1;min-width:0;background:var(--bg-input);border:1px solid var(--accent);border-radius:2px;padding:1px 4px;color:var(--text);font-family:inherit;outline:none;}
.props-header{padding:10px 12px;font-weight:700;font-size:12px;border-bottom:1px solid var(--border);color:#fff;display:flex;align-items:center;gap:6px;}
.props-header i{color:var(--accent);font-size:11px;}
.props-section{padding:10px 12px;border-bottom:1px solid var(--border);}
.props-section-title{font-size:9px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.3px;margin-bottom:7px;font-weight:600;}
.props-row{display:flex;align-items:center;gap:3px;margin-bottom:5px;}.props-row:last-child{margin-bottom:0;}
.props-row-stack{display:flex;flex-direction:column;gap:5px;margin-bottom:6px;}
.props-label{font-size:10px;color:var(--text);min-width:14px;flex-shrink:0;text-align:right;}
.props-input{flex:1;background:var(--bg-input);border:1px solid var(--border);border-radius:4px;padding:4px 5px;color:#fff;font-family:inherit;font-size:10px;outline:none;transition:border-color .12s;}
.props-input:focus{border-color:var(--accent);}
.props-input[type="number"]{width:48px;flex:none;text-align:center;}
.props-textarea{width:100%;background:var(--bg-input);border:1px solid var(--border);border-radius:4px;padding:5px 7px;color:#fff;font-family:inherit;font-size:10px;outline:none;resize:vertical;min-height:44px;transition:border-color .12s;}
.props-textarea:focus{border-color:var(--accent);}
.props-range{flex:1;accent-color:var(--accent);cursor:pointer;}
.props-range-val{font-size:9px;color:var(--text-dim);min-width:24px;text-align:center;}
.align-btns{display:flex;gap:2px;}
.align-btn{width:26px;height:26px;border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;background:var(--bg-input);border:1px solid var(--border);color:var(--text);font-size:10px;transition:all .1s;}
.align-btn.active{background:var(--accent-glow);border-color:var(--accent);color:var(--accent);}
.align-btn:hover:not(.active){border-color:#555;}
.upload-btn{display:flex;align-items:center;gap:6px;padding:6px 10px;background:var(--bg-input);border:1px dashed var(--border);border-radius:6px;cursor:pointer;color:var(--text);font-size:10px;font-family:inherit;transition:all .12s;width:100%;justify-content:center;}
.upload-btn:hover{border-color:var(--accent);color:var(--accent);}
.empty-props{padding:24px 14px;text-align:center;color:var(--text-dim);font-size:11px;}
.empty-props i{font-size:24px;margin-bottom:8px;display:block;opacity:.3;}
.alpha-picker{display:flex;align-items:center;gap:3px;flex:1;min-width:0;}
.ap-color{width:26px;height:24px;padding:1px;border:1px solid var(--border);border-radius:3px;cursor:pointer;background:none;flex-shrink:0;}
.ap-color::-webkit-color-swatch-wrapper{padding:0;}.ap-color::-webkit-color-swatch{border:none;border-radius:2px;}
.ap-color::-moz-color-swatch{border:none;border-radius:2px;}
.ap-alpha{flex:1;min-width:36px;height:3px;accent-color:var(--accent);cursor:pointer;}
.ap-preview{width:18px;height:18px;border-radius:2px;border:1px solid var(--border);flex-shrink:0;overflow:hidden;position:relative;background-image:repeating-conic-gradient(#ddd 0% 25%,#fff 0% 50%);background-size:6px 6px;}
.ap-swatch{position:absolute;inset:0;border-radius:1px;}
#toast-container{position:fixed;bottom:56px;left:50%;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;gap:5px;align-items:center;}
.toast{padding:7px 18px;border-radius:7px;font-size:11px;font-family:'Montserrat',sans-serif;color:#fff;opacity:0;transform:translateY(6px);transition:all .2s;pointer-events:none;}
.toast.show{opacity:1;transform:translateY(0);}
.toast-info{background:#333;}.toast-success{background:var(--success);}.toast-error{background:var(--danger);}
body.is-dragging,body.is-dragging *{user-select:none!important;}
.shape-dropdown{position:fixed;background:var(--bg-panel);border:1px solid var(--border);border-radius:8px;padding:4px;z-index:1000;min-width:155px;box-shadow:0 8px 24px rgba(0,0,0,.5);}
.shape-option{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:5px;cursor:pointer;font-size:11px;color:var(--text);transition:background .1s;}
.shape-option:hover{background:var(--bg-input);color:#fff;}
.shape-option i{width:16px;text-align:center;font-size:11px;color:var(--text-dim);}
.shape-option:hover i{color:var(--accent);}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}}
.context-menu{position:fixed;background:var(--bg-panel);border:1px solid var(--border);border-radius:8px;padding:4px;z-index:10000;min-width:180px;box-shadow:0 8px 30px rgba(0,0,0,.6);display:none;}
.ctx-item{display:flex;align-items:center;gap:10px;padding:7px 12px;border-radius:5px;cursor:pointer;font-size:11px;color:var(--text);transition:background .08s;}
.ctx-item:hover{background:var(--bg-input);color:#fff;}
.ctx-item.danger:hover{background:rgba(239,68,68,.12);color:var(--danger);}
.ctx-item i{width:14px;text-align:center;font-size:11px;color:var(--text-dim);}
.ctx-item:hover i{color:var(--accent);}
.ctx-item.danger:hover i{color:var(--danger);}
.ctx-sep{height:1px;background:var(--border);margin:4px 8px;}
.ctx-item.disabled{opacity:.3;pointer-events:none;}
.snap-guide{position:absolute;background:#00f7ff;z-index:999;pointer-events:none;}
.snap-guide.horizontal{height:var(--snap-w, 2px);left:0;right:0;}
.snap-guide.vertical{width:var(--snap-w, 2px);top:0;bottom:0;}
#grid-overlay{
    position:absolute;
    top:0;left:0;width:100%;height:100%;
    z-index:950; 
    pointer-events:none; 
    display:none;
}
body.space-pan-active,
body.space-pan-active * { cursor: grab !important; }
body.space-pan-active.is-panning,
body.space-pan-active.is-panning * { cursor: grabbing !important; }