/* ============================================
   TRANSFORM HANDLES (Move Tool)
   ============================================ */

.transform-box {
    position: absolute;
    border: 1px dashed var(--accent);
    pointer-events: none;
    z-index: 500;
    display: none;
}

.transform-box.active {
    display: block;
}

.transform-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #ffffff;
    border: 1px solid var(--accent);
    border-radius: 2px;
    pointer-events: auto;
    z-index: 501;
}

.transform-handle.corner {
    width: 10px;
    height: 10px;
}

.transform-handle.edge {
    width: 8px;
    height: 8px;
}

.transform-handle.nw { top: -5px; left: -5px; cursor: nwse-resize; }
.transform-handle.n { top: -5px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.transform-handle.ne { top: -5px; right: -5px; cursor: nesw-resize; }
.transform-handle.e { top: 50%; right: -5px; transform: translateY(-50%); cursor: ew-resize; }
.transform-handle.se { bottom: -5px; right: -5px; cursor: nwse-resize; }
.transform-handle.s { bottom: -5px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.transform-handle.sw { bottom: -5px; left: -5px; cursor: nesw-resize; }
.transform-handle.w { top: 50%; left: -5px; transform: translateY(-50%); cursor: ew-resize; }

/* Rotation handle */
.transform-handle.rotate {
    width: 14px;
    height: 14px;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    cursor: grab;
    border-radius: 50%;
    background: var(--accent);
    border-color: white;
}

.transform-handle.rotate:active {
    cursor: grabbing;
}

/* Rotation line connecting to box */
.transform-rotate-line {
    position: absolute;
    top: -20px;
    left: 50%;
    width: 1px;
    height: 15px;
    background: var(--accent);
    transform: translateX(-50%);
    pointer-events: none;
}