:root{font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:#fff;background:#07191c;font-size:13px}*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button{background:#17363b;border:1px solid #315157;color:#eaf4f3;border-radius:7px;padding:9px 12px;cursor:pointer}button:hover{background:#235057}.primary,.upload{background:#e0892a;color:#101d1f;border-color:#e0892a;font-weight:700}.primary:hover,.upload:hover{background:#f09a3d}header{height:74px;border-bottom:1px solid #234449;display:flex;align-items:center;justify-content:space-between;padding:10px 20px;gap:20px;background:#092126}.identity{display:flex;align-items:center;gap:13px;min-width:255px}.identity img{width:64px;height:55px;object-fit:cover;object-position:center}.identity strong{display:block;font-size:15px}.identity small{display:block;color:#9fbabd;margin-top:5px}.project-name{text-align:center}.project-name input{background:transparent;color:#fff;border:0;text-align:center;font-size:16px;font-weight:700;max-width:300px;outline:none}.project-name span{display:block;color:#86a5a7;font-size:11px;margin-top:5px}.toolbar{display:flex;gap:8px}main{display:grid;grid-template-columns:245px minmax(300px,1fr) 295px;height:calc(100vh - 74px)}aside{padding:19px 15px;background:#0d292d;overflow:auto}.left{border-right:1px solid #234449}.right{border-left:1px solid #234449}h3{color:#a9c0c1;letter-spacing:1.5px;font-size:11px;margin:9px 0 15px}.upload{display:block;text-align:center;border-radius:8px;padding:12px;cursor:pointer}.left h3:not(:first-child),.right h3:not(:first-child){margin-top:30px}.project-card,.slide-card{display:block;width:100%;text-align:left;margin:8px 0;padding:12px;background:#143238;border:1px solid #24494d;border-radius:9px;color:#fff}.project-card.active,.slide-card.active{border-color:#e0892a;background:#205057}.project-card small,.slide-card small{display:block;color:#a9c0c1;margin-top:5px}.foot{position:relative;color:#668d91;margin-top:50px;font-size:11px;line-height:1.8}.workspace{min-width:0;background:#0b2226;display:flex;flex-direction:column}.workspace-bar{height:53px;display:flex;justify-content:space-between;align-items:center;padding:0 20px;border-bottom:1px solid #234449;color:#a9c0c1}.workspace-bar button{padding:5px 10px}.workspace-bar span{margin:0 9px}.canvas-scroll{overflow:auto;flex:1;display:flex;align-items:flex-start;justify-content:center;padding:45px;background-image:radial-gradient(#28444a 1px,transparent 1px);background-size:20px 20px}#empty{text-align:center;margin:auto;color:#a9c0c1}#empty h2{color:white}#empty .upload{max-width:220px;margin:20px auto}.empty-icon{font-size:56px;color:#e0892a}#canvasWrap{transform-origin:top center;background:white;box-shadow:0 18px 65px #0008;flex:none;position:relative}#canvas{border:0;display:block;background:white;width:1080px;height:1350px}label{display:block;color:#a9c0c1;margin:12px 0;font-size:12px}label input:not([type=file]),textarea{display:block;width:100%;margin-top:6px;background:#071e22;color:white;border:1px solid #356068;border-radius:6px;padding:9px}textarea{resize:vertical}.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}.hint{color:#88a5a9;line-height:1.6}#inspector button{width:100%;margin-top:10px}.danger{border-color:#81464b;color:#f5a8a8}#source{min-height:250px;font:12px/1.6 monospace}#applyCode{margin-top:10px}#progress{color:#eeb675;margin-top:10px;overflow-wrap:anywhere}@media(max-width:1050px){main{grid-template-columns:190px minmax(250px,1fr) 235px}.identity{min-width:180px}.project-name input{max-width:170px}}

.format-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.format-toolbar select,.format-toolbar input{background:#123238;color:#f5ffff;border:1px solid #315157;border-radius:7px;padding:7px;max-width:185px}.format-toolbar input{max-width:88px}.slide-card{display:flex;flex-direction:column;gap:3px}.slide-card small{margin:0}.layers{max-height:260px;overflow:auto}.layer-item{display:flex;gap:7px;align-items:center;width:100%;text-align:left;font-size:11px;padding:8px;margin:3px 0;background:#143238}.layer-item.active{border-color:#e0892a}.slide-card .slide-number{color:#eeb675;font-size:11px;font-weight:700}#slideCount{color:#e0892a}.canvas-scroll{align-items:flex-start}@media(max-width:1300px){header{gap:8px;padding:8px}.identity{min-width:180px}main{grid-template-columns:205px minmax(300px,1fr) 245px}.format-toolbar select{max-width:145px}}

#canvasWrap{position:relative;transform-origin:top left!important}#selectionBox{position:absolute;z-index:20;pointer-events:none;border:2px solid #e0892a;box-shadow:0 0 0 1px #15151566;box-sizing:border-box}#selectionBox[hidden]{display:none}.handle{position:absolute;width:13px;height:13px;background:#fff;border:2px solid #e0892a;border-radius:3px;pointer-events:auto;touch-action:none;cursor:nwse-resize}.handle.nw{top:-7px;left:-7px}.handle.ne{top:-7px;right:-7px;cursor:nesw-resize}.handle.sw{bottom:-7px;left:-7px;cursor:nesw-resize}.handle.se{bottom:-7px;right:-7px}.handle.e{top:50%;right:-7px;cursor:ew-resize}.handle.w{top:50%;left:-7px;cursor:ew-resize}.handle.n{left:50%;top:-7px;cursor:ns-resize}.handle.s{left:50%;bottom:-7px;cursor:ns-resize}.layer-item[draggable=true]{cursor:grab}#selectionBox:before{content:'POMERI: prevuci element';position:absolute;bottom:calc(100% + 7px);left:0;color:#fff;background:#a96316;padding:4px 7px;font:11px system-ui;white-space:nowrap}
/* v2.3 — artboard centered within the actual viewport, independently of zoom. */
.canvas-scroll{display:flex;align-items:safe center;justify-content:safe center;min-height:0;min-width:0;overflow:auto;padding:36px;position:relative}
#canvasStage{flex:none;position:relative;margin:auto;display:block}
#canvasStage[hidden]{display:none!important}
#canvasWrap{position:absolute!important;left:0;top:0;margin:0!important;transform-origin:top left!important}
#canvas{display:block;border:0}
.workspace-bar{gap:12px;min-height:53px;height:auto;flex-wrap:wrap;padding:9px 16px}
.workspace-bar>div:last-child{white-space:nowrap}
.slide-card.active{box-shadow:inset 3px 0 #e0892a,0 6px 24px #0003}
.slide-card:hover,.project-card:hover{border-color:#52858a}
button:focus-visible,.upload:focus-within{outline:2px solid #e0892a;outline-offset:2px}
@media(max-width:1150px){.canvas-scroll{padding:18px}main{grid-template-columns:190px minmax(250px,1fr) 230px}}