#editor-modal {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(15, 15, 15, 0.98); z-index: 99999;
    display: flex; flex-direction: column; overflow: hidden;
    font-family: sans-serif; color: #fff; user-select: none;
}
.editor-toolbar {
    position: relative; z-index: 100005; display: flex; gap: 12px; 
    align-items: center; padding: 10px 20px; background: #222; 
    border-bottom: 1px solid #333; flex-shrink: 0;
}
.editor-tool-group {
    display: flex; align-items: center; gap: 6px;
    background: #2a2a2a; padding: 4px 8px; border-radius: 4px;
}
.editor-btn {
    padding: 6px 12px; background: #3a3a3a; color: #fff;
    border: none; border-radius: 4px; cursor: pointer; font-size: 13px;
}
.editor-btn:hover { background: #4a4a4a; }
.editor-btn.active { background: #0078d7; color: #fff; }
.editor-btn-save { background: #00ccff; color: #000; font-weight: bold; }
.editor-btn-save:hover { background: #00b3e6; }
.editor-btn-cancel { background: #555; }
.editor-label { font-size: 12px; color: #aaa; }
.editor-input-range { width: 80px; accent-color: #0078d7; }
.editor-viewport {
    flex-grow: 1;
    position: relative;
    cursor: grab;
    background: #111;
    z-index: 100000;
}

.editor-viewport.tool-brush, .editor-viewport.tool-eraser { cursor: none !important; }
.editor-viewport.tool-pan { cursor: grab !important; }
.editor-viewport.tool-pan:active { cursor: grabbing !important; }
#editor-transform-container {
    position: absolute; top: 0; left: 0; transform-origin: 0 0;
}
#editor-src-img {
    position: absolute; top: 0; left: 0; display: block; pointer-events: none;
}
#editor-canvas {
    position: absolute; top: 0; left: 0; display: block; 
    background: transparent; z-index: 10; pointer-events: none;
}
#editor-brush-cursor {
    position: fixed; border: 1px solid #ffffff; border-radius: 50%;
    box-shadow: 0 0 2px #000000; pointer-events: none;
    transform: translate(-50%, -50%); z-index: 100010; display: none;
}