*{margin:0;padding:0;box-sizing:border-box}body{font-family:Arial,sans-serif;background:#1a1a2e;color:#e0e0e0;overflow:hidden;height:100vh}#app{display:flex;height:100vh}#toolbar{width:220px;min-width:220px;background:#16213e;border-right:2px solid #0f3460;padding:10px;overflow-y:auto;display:flex;flex-direction:column}#toolbar h2{font-size:14px;color:#e94560;margin:10px 0 6px;text-transform:uppercase;letter-spacing:1px}.setting{margin-bottom:8px}.setting label{display:block;font-size:12px;margin-bottom:3px;color:#aaa}.setting input[type=number]{width:100%;padding:4px 6px;background:#0f3460;border:1px solid #1a1a5e;color:#e0e0e0;border-radius:3px;font-size:13px}.setting input[type=checkbox]{margin-right:5px}.setting button{width:100%;padding:6px;margin-bottom:4px;background:#0f3460;border:1px solid #1a1a5e;color:#e0e0e0;border-radius:3px;cursor:pointer;font-size:12px}.setting button:hover{background:#e94560}#palette{flex:1;overflow-y:auto}.palette-item{display:flex;align-items:center;gap:8px;padding:6px 4px;margin-bottom:4px;background:#0f3460;border:1px solid #1a1a5e;border-radius:4px;cursor:grab;-webkit-user-select:none;user-select:none;transition:background .15s}.palette-item:hover{background:#1a1a5e;border-color:#e94560}.palette-item:active{cursor:grabbing}.palette-item img{width:40px;height:30px;object-fit:contain;background:#222;border-radius:3px;padding:2px}.palette-item span{font-size:11px;color:#ccc}#canvas-wrapper{flex:1;overflow:hidden;background:#111;position:relative}#canvas{width:1920px;height:1080px;position:absolute;background:#1e1e1e;border:1px solid #333;transform-origin:0 0}#pdf-background{position:absolute;top:0;left:0;overflow:hidden;width:1920px;height:1080px;pointer-events:none;z-index:0}#pdf-background canvas{position:absolute;transform-origin:0 0;opacity:.35}#pdf-background.editing canvas{opacity:.6;cursor:move}.edit-bg-active{background:#e94560!important;color:#fff!important}#grid-overlay{position:absolute;top:0;left:0;width:1920px;height:1080px;pointer-events:none;z-index:1}#drop-zone{position:absolute;top:0;left:0;width:1920px;height:1080px;z-index:2}.placed-symbol{position:absolute;cursor:move;-webkit-user-select:none;user-select:none;border:1px solid transparent;transition:border-color .1s;resize:none}.placed-symbol:hover{border-color:#e94560}.placed-symbol.selected{border-color:#0f8;box-shadow:0 0 6px #0f86}.placed-symbol.dragging{opacity:.7;z-index:1000}.placed-symbol.collision{border-color:red;box-shadow:0 0 8px #f009}.placed-symbol img{width:100%;height:100%;pointer-events:none;display:block}.drag-ghost{position:fixed;pointer-events:none;opacity:.6;z-index:9999}.context-menu{position:fixed;background:#16213e;border:1px solid #0f3460;border-radius:4px;padding:4px 0;z-index:10000;min-width:140px}.context-menu-item{padding:6px 14px;font-size:12px;color:#e0e0e0;cursor:pointer}.context-menu-item:hover{background:#e94560}.resize-handle{position:absolute;top:50%;right:-5px;width:10px;height:10px;transform:translateY(-50%);background:#0f8;border:1px solid #009955;border-radius:2px;cursor:ew-resize;z-index:10}