:root{--bg-color:#1a1a1a;--panel-bg:#1e1e1ed9;--panel-border:#ffffff1a;--accent:#4a80f0;--accent-hover:#5b8df5}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-color);color:#fff;touch-action:none;-webkit-user-select:none;user-select:none;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;overflow:hidden}input,textarea{-webkit-user-select:text;user-select:text}#app{background-color:#1a1a1a;background-image:linear-gradient(45deg,#222 25%,#0000 25%),linear-gradient(-45deg,#222 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#222 75%),linear-gradient(-45deg,#0000 75%,#222 75%);background-position:0 0,0 10px,10px -10px,-10px 0;background-size:20px 20px;width:100vw;height:100vh;position:relative}#drawing-canvas,#vector-canvas,#overlay-canvas{touch-action:none;width:100%;height:100%;position:absolute;top:0;left:0}#vector-canvas{z-index:10}#overlay-canvas{z-index:11;pointer-events:none}#transform-box{pointer-events:none;z-index:15;border:1px solid #00a8ff;position:absolute}.tf-handle{pointer-events:auto;background:#fff;border:1px solid #00a8ff;border-radius:50%;width:10px;height:10px;position:absolute;transform:translate(-50%,-50%)}.tf-handle.nw{cursor:nwse-resize;top:0;left:0}.tf-handle.n{cursor:ns-resize;top:0;left:50%}.tf-handle.ne{cursor:nesw-resize;top:0;left:100%}.tf-handle.w{cursor:ew-resize;top:50%;left:0}.tf-handle.e{cursor:ew-resize;top:50%;left:100%}.tf-handle.sw{cursor:nesw-resize;top:100%;left:0}.tf-handle.s{cursor:ns-resize;top:100%;left:50%}.tf-handle.se{cursor:nwse-resize;top:100%;left:100%}.tf-handle.rot{cursor:crosshair;top:-25px;left:50%}.floating-panel{background:var(--panel-bg);-webkit-backdrop-filter:blur(12px);border:1px solid var(--panel-border);z-index:100;border-radius:12px;display:flex;position:absolute;box-shadow:0 8px 32px #00000080}#toolbar-top{gap:6px;padding:6px;top:20px;left:20px}#toolbar-tools{gap:6px;padding:6px;top:70px;left:20px}#panel-properties{width:200px;padding:12px;bottom:20px;left:20px}#props-content{flex-direction:column;gap:8px;margin-top:8px;display:flex}.prop-row{color:#fffc;justify-content:space-between;align-items:center;font-size:12px;display:flex}.prop-row input{color:#fff;background:#0000004d;border:1px solid #ffffff1a;border-radius:4px;width:60px;padding:4px;font-family:inherit}.floating-panel.vertical{flex-direction:column}#toolbar-top button,#toolbar-tools button{color:#fff;cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;width:32px;height:32px;transition:all .2s;display:flex}#toolbar-top button svg,#toolbar-tools button svg{width:16px;height:16px}#toolbar-top button:hover,#toolbar-tools button:hover{background:#ffffff1a}#toolbar-top button.active,#toolbar-tools button.active{background:var(--accent)}#toolbar-top button.disabled,#toolbar-tools button.disabled{opacity:.3;pointer-events:none}.divider{background:var(--panel-border);width:1px;height:1px;margin:4px}#panel-planes{flex-direction:column;width:260px;height:calc(100vh - 40px);padding:16px;top:20px;right:20px}.panel-header{justify-content:space-between;align-items:center;margin-bottom:16px;font-size:14px;font-weight:600;display:flex}.panel-header button{color:#fff;cursor:pointer;background:#ffffff1a;border:none;border-radius:6px;justify-content:center;align-items:center;width:28px;height:28px;transition:all .2s;display:flex}.panel-header button svg{width:16px;height:16px}.panel-header button:hover{background:var(--accent)}.planes-grid{flex-wrap:wrap;gap:8px;margin-bottom:16px;display:flex}.plane-icon-btn{cursor:pointer;background:#ffffff0d;border:1px solid #0000;border-radius:6px;justify-content:center;align-items:center;width:36px;height:36px;transition:all .2s;display:flex;position:relative}.plane-icon-btn:hover{background:#ffffff1a}.plane-icon-btn.active{border-color:var(--accent);background:#ffffff1a}.plane-icon-btn .plane-icon-cube{transform:rotateX(-20deg)rotateY(30deg)scale(.8)}#btn-create-from-view{color:#fff;cursor:pointer;background:#ffffff1a;border:none;border-radius:6px;justify-content:center;align-items:center;width:36px;height:36px;transition:all .2s;display:flex}#btn-create-from-view:hover{background:var(--accent)}#btn-create-from-view svg{width:16px;height:16px}#active-plane-panel{flex-direction:column;flex:1;display:flex;overflow:hidden}.active-plane-header{border-bottom:1px solid #ffffff1a;justify-content:space-between;align-items:center;margin-bottom:12px;padding-bottom:8px;display:flex}.editable-name{cursor:text;font-weight:600}#btn-delete-plane{color:#fff6;cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;transition:all .2s;display:flex}#btn-delete-plane:hover{color:#f55}#btn-delete-plane svg{width:16px;height:16px}.offset-slider-container{align-items:center;gap:12px;margin-bottom:16px;display:flex}.offset-slider-container label{color:#aaa;font-size:12px}.offset-slider-container input[type=range]{accent-color:var(--accent);flex:1}.vector-list-header{color:#888;text-transform:uppercase;margin-bottom:8px;font-size:12px;font-weight:600}.vector-list{flex-direction:column;flex:1;gap:4px;padding-right:4px;display:flex;overflow-y:auto}.vector-item{color:#ffffffb3;cursor:pointer;background:#0000004d;border:1px solid #0000;border-radius:4px;justify-content:space-between;align-items:center;padding:4px 8px;font-size:11px;display:flex}.vector-item.selected{color:#fff;background:#00a8ff1a;border-color:#00a8ff}.vector-item:hover{background:#00000080}.vector-item.dragging{opacity:.5}.btn-del-vector{color:#fff6;cursor:pointer;background:0 0;border:none;padding:2px}.btn-del-vector:hover{color:#ff4757}.btn-del-vector svg{width:12px;height:12px}.plane-icon-cube{width:16px;height:16px;transform-style:preserve-3d;position:relative;transform:rotateX(-20deg)rotateY(30deg)}.plane-icon-cube-face{border:1px solid #ffffff26;width:100%;height:100%;position:absolute}.cube-front{transform:translateZ(8px)}.cube-back{transform:translateZ(-8px)rotateY(180deg)}.cube-left{transform:translate(-8px)rotateY(-90deg)}.cube-right{transform:translate(8px)rotateY(90deg)}.cube-top{transform:translateY(-8px)rotateX(90deg)}.cube-bottom{transform:translateY(8px)rotateX(-90deg)}.plane-icon-slice{background-color:rgba(var(--layer-color-rgb), .8);border:1px solid rgb(var(--layer-color-rgb));width:100%;height:100%;transform-style:preserve-3d;position:absolute}.plane-edge{background-color:inherit;border:inherit;position:absolute}.plane-edge-top{width:100%;height:2px;top:-1px;left:0;transform:rotateX(90deg)}.plane-edge-bottom{width:100%;height:2px;bottom:-1px;left:0;transform:rotateX(-90deg)}.plane-edge-left{width:2px;height:100%;top:0;left:-1px;transform:rotateY(-90deg)}.plane-edge-right{width:2px;height:100%;top:0;right:-1px;transform:rotateY(90deg)}.inline-name-input{color:#fff;background:0 0;border:none;border-bottom:1px solid #fff3;outline:none;width:150px;font-family:inherit;font-size:14px}#preview-window{background:var(--panel-bg);-webkit-backdrop-filter:blur(12px);border:1px solid var(--panel-border);z-index:100;border-radius:12px;flex-direction:column;width:320px;height:320px;display:flex;position:absolute;bottom:20px;right:300px;overflow:hidden;box-shadow:0 12px 48px #00000080}#preview-window.collapsed{height:36px!important}#preview-header{color:#ccc;cursor:grab;background:#0006;justify-content:space-between;align-items:center;height:36px;padding:0 12px;font-size:12px;font-weight:600;display:flex}#preview-header:active{cursor:grabbing}.window-controls button{color:#888;cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;transition:all .2s;display:flex}.window-controls button:hover{color:#fff}.window-controls button svg{width:16px;height:16px}#preview-body{touch-action:none;background:#0a0a0a;flex:1;position:relative}#preview-canvas{width:100%;height:100%;display:block}#preview-resize-handle{cursor:se-resize;z-index:21;width:15px;height:15px;position:absolute;bottom:0;right:0}.modal{backdrop-filter:blur(20px);border:1px solid var(--panel-border);z-index:100;background:#1e1e1ef2;border-radius:16px;padding:30px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 20px 60px #000000b3}.modal h2{margin-bottom:24px;font-size:22px;font-weight:600}.setup-grid{grid-template-columns:120px 120px;align-items:center;gap:16px;margin-bottom:30px;display:grid}.setup-grid label{color:#aaa;font-size:14px}.setup-grid input{color:#fff;background:#111;border:1px solid #444;border-radius:8px;padding:10px;font-size:14px}.primary-btn{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:10px;width:100%;padding:12px;font-size:16px;font-weight:600;transition:all .2s}.primary-btn:hover{background:var(--accent-hover)}.window-controls button.active{color:var(--accent)}