:root{font-family:Inter,Segoe UI,Arial,sans-serif;color:#eef0f3;background:#101216;--panel:#191c22;--line:#30343d;--orange:#ff6b1a}
*{box-sizing:border-box}body{margin:0;height:100vh;overflow:hidden}header{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid var(--line);background:#15171c}header>div{display:flex;align-items:center;gap:11px;font-size:20px}.mark{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;background:var(--orange);font-weight:900;color:#101216}.sub,.muted,.hint{color:#9298a5;font-size:13px}.admin-badge{display:inline-block;margin-right:8px;padding:4px 7px;border-radius:999px;background:#ff6b1a22;border:1px solid #ff6b1a66;color:#ff8c4b;font-size:10px;font-weight:800;letter-spacing:.08em}main{display:grid;grid-template-columns:320px minmax(480px,1fr) 310px;height:calc(100vh - 64px);min-height:0;overflow:hidden}.panel{height:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain;background:var(--panel);padding:20px;border-right:1px solid var(--line);scrollbar-color:#555b68 #171a20;scrollbar-width:thin}.panel::-webkit-scrollbar{width:10px}.panel::-webkit-scrollbar-track{background:#171a20}.panel::-webkit-scrollbar-thumb{background:#555b68;border:2px solid #171a20;border-radius:8px}.right{border-right:0;border-left:1px solid var(--line)}h2{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#9da3af;margin:8px 0 12px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:#aeb4c0;margin-bottom:10px}input,button{font:inherit}input[type=number],input[type=text]{width:100%;padding:9px 10px;border-radius:7px;border:1px solid var(--line);background:#111318;color:#fff}input[type=color]{height:37px;width:100%;padding:3px;border:1px solid var(--line);border-radius:7px;background:#111318}button{width:100%;padding:10px 12px;margin-bottom:8px;border-radius:8px;border:1px solid #3a3f49;background:#242832;color:#fff;text-align:left;cursor:pointer}button:hover{border-color:#6d7482}.primary{background:var(--orange);color:#101216;border:0;font-weight:800;text-align:center}.danger{color:#ff7777}.stage{display:grid;grid-template-rows:auto minmax(0,1fr) auto;justify-items:center;min-width:0;min-height:0;padding:0 28px 14px;background:radial-gradient(circle at center,#242831,#101216 70%);overflow:hidden}.canvas-wrap{align-self:center;padding:18px;background:#0c0e12;border:1px solid #353a44;border-radius:14px;box-shadow:0 20px 50px #0008}canvas{display:block;max-height:calc(100vh - 150px);max-width:50vw;background:transparent}.hint{margin-top:10px}.layer{display:flex;align-items:center;gap:8px;padding:8px;border-radius:7px;cursor:pointer}.layer.active{background:#2a2f39}.swatch{width:13px;height:13px;border-radius:3px;border:1px solid #ffffff44}.layer-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.export-box{position:static;width:auto;margin-top:22px;padding-bottom:8px}.right{position:relative}.calculation-card{margin:2px 0 18px;padding:10px 11px;border:1px solid #343943;border-radius:8px;background:#111318;color:#aeb4c0;font-size:11px;line-height:1.55}.property-help{margin:-4px 0 12px;line-height:1.45}@media(max-width:1050px){body{height:auto;overflow:auto}main{grid-template-columns:260px 1fr;height:auto;overflow:visible}.panel{height:auto;max-height:none;overflow:visible}.right{grid-column:1/-1;min-height:280px}.stage{min-height:700px}.export-box{position:static;width:auto}canvas{max-width:65vw}}
.toolbar-row{display:flex;gap:8px}.toolbar-row button{flex:1;text-align:center;font-size:12px}.check{flex-direction:row;align-items:center}.check input{width:auto}.layer.locked{opacity:.55}.layer-controls{margin-left:auto;color:#7f8794}.color-summary{font-size:12px;color:#aeb4c0;margin-bottom:10px;line-height:1.5}select{width:100%;padding:9px 10px;border-radius:7px;border:1px solid var(--line);background:#111318;color:#fff}
.save-dialog{width:min(420px,90vw);border:1px solid #3a3f49;border-radius:12px;background:#191c22;color:#eef0f3;padding:22px;box-shadow:0 24px 80px #000c}.save-dialog::backdrop{background:#000a}.save-dialog h3{margin:0 0 8px}.save-dialog p{color:#aeb4c0;margin:0 0 20px}.save-dialog form{display:flex;gap:8px}.save-dialog button{margin:0;text-align:center}.save-dialog .primary{order:-1}

/* Local template zoom */
.stage-topbar{width:100%;min-width:0;display:flex;align-items:center;justify-content:flex-end;gap:10px;padding-top:8px}
.zoom-controls{display:flex;align-items:center;gap:5px;flex:none}
.zoom-controls button{width:34px;height:30px;min-width:34px;margin:0;padding:0;display:grid;place-items:center;text-align:center;border-radius:7px}
.zoom-controls button:nth-child(2){width:58px;min-width:58px;font-size:11px;color:#c5cad2}
.canvas-viewport{width:100%;height:100%;min-height:0;overflow:auto;display:flex;align-items:flex-start;justify-content:center;padding:18px;overscroll-behavior:contain;scrollbar-color:#555b68 #171a20;scrollbar-width:thin}
.canvas-viewport .canvas-wrap{flex:none;align-self:flex-start;margin:auto}
#canvas{max-width:none;max-height:none}