*{margin:0;padding:0;box-sizing:border-box}:root{--bg: #0e0e10;--surface: #18181b;--surface2: #222225;--border: #2e2e33;--text: #e4e4e7;--text-dim: #71717a;--accent: #a78bfa;--accent-dim: #7c3aed;--danger: #ef4444}body{font-family:JetBrains Mono,monospace;background:var(--bg);color:var(--text);height:100vh;display:flex;flex-direction:column;overflow:hidden}header{padding:10px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);flex-shrink:0;background:var(--surface);z-index:50}header h1{font-size:13px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--text-dim)}header h1 span{color:var(--accent)}.toolbar{display:flex;gap:6px;align-items:center;flex-wrap:wrap}button{font-family:inherit;font-size:11px;font-weight:500;padding:6px 12px;border:none;border-radius:4px;cursor:pointer;background:transparent;color:var(--text-dim);transition:all .15s}button:hover{color:var(--text);background:var(--surface2)}.btn-primary{background:var(--accent-dim);color:#fff;padding:6px 16px;border-radius:6px}.btn-primary:hover{background:var(--accent);color:#fff}.btn-primary:disabled{opacity:.4;cursor:not-allowed}.btn-danger{color:var(--danger)}.btn-danger:hover{background:#ef44441a;color:var(--danger)}.sep{width:1px;height:20px;background:var(--border);margin:0 4px}.meta{font-size:10px;color:var(--text-dim);padding:0 6px;white-space:nowrap}.settings-wrap{position:relative}#btn-settings{font-size:14px;line-height:1}.settings-panel{display:none;position:absolute;top:calc(100% + 8px);right:0;width:240px;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:12px;z-index:200;box-shadow:0 8px 24px #0006}.settings-panel.open{display:block}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}.settings-row label{font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.3px;flex:1}.settings-row input[type=number],.settings-row select{width:70px;font-family:inherit;font-size:11px;padding:4px 6px;background:var(--surface2);color:var(--text);border:1px solid var(--border);border-radius:4px;text-align:right}.settings-row select{width:70px;text-align:left}.settings-reset{width:100%;font-size:10px;text-align:center;margin-top:4px;color:var(--text-dim)}label{font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;display:flex;align-items:center;gap:5px}input[type=color]{width:22px;height:22px;border:1px solid var(--border);border-radius:4px;padding:0;cursor:pointer;background:transparent}.canvas-area{flex:1;overflow:auto;position:relative;background:var(--bg)}.canvas-area.drag-over:after{content:"Drop images here";position:absolute;top:20px;right:20px;bottom:20px;left:20px;border:2px dashed var(--accent);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--accent);background:#a78bfa0d;pointer-events:none;z-index:100}#canvas{position:relative;min-width:100%;min-height:100%;background-image:radial-gradient(circle,rgba(255,255,255,.03) 1px,transparent 1px);background-size:24px 24px}.empty-state{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:var(--text-dim);-webkit-user-select:none;user-select:none;pointer-events:none}.empty-state kbd{background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:4px 10px;font-family:inherit;font-size:12px;color:var(--text)}.empty-state p{font-size:12px;margin-top:10px;line-height:1.8}.img-item{position:absolute;cursor:move;-webkit-user-select:none;user-select:none;outline:2px solid transparent;transition:outline-color .1s;touch-action:none}.img-item:hover{outline-color:#a78bfa66}.img-item.selected{outline-color:var(--accent)}.img-item img{display:block;width:100%;height:100%;pointer-events:none}.resize-handle{position:absolute;width:12px;height:12px;background:var(--accent);border:2px solid var(--bg);border-radius:2px;display:none;z-index:10;touch-action:none}.img-item.selected .resize-handle{display:block}.resize-handle.br{bottom:-6px;right:-6px;cursor:nwse-resize}.resize-handle.bl{bottom:-6px;left:-6px;cursor:nesw-resize}.resize-handle.tr{top:-6px;right:-6px;cursor:nesw-resize}.resize-handle.tl{top:-6px;left:-6px;cursor:nwse-resize}.remove-btn-img{position:absolute;top:-10px;right:-10px;width:20px;height:20px;padding:0;border-radius:50%;background:var(--danger);color:#fff;font-size:12px;display:none;align-items:center;justify-content:center;line-height:1;cursor:pointer;border:2px solid var(--bg);z-index:11}.img-item.selected .remove-btn-img{display:flex}