/* OptimizeGIF - Crop GIF: interactive crop box */
.crop-layer { position: absolute; inset: 0; overflow: hidden; touch-action: none; }
.crop-box {
    position: absolute; cursor: move; outline: 1px solid #fff;
    box-shadow: 0 0 0 9999px rgba(10, 16, 13, .55);
}
.crop-box::before, .crop-box::after { content: ''; position: absolute; pointer-events: none; border: 0 dashed rgba(255,255,255,.55); }
.crop-box::before { left: 33.333%; right: 33.333%; top: 0; bottom: 0; border-left-width: 1px; border-right-width: 1px; }
.crop-box::after { top: 33.333%; bottom: 33.333%; left: 0; right: 0; border-top-width: 1px; border-bottom-width: 1px; }
.crop-h { position: absolute; width: 14px; height: 14px; background: #fff; border: 2px solid var(--accent); border-radius: 3px; z-index: 2; }
.crop-h[data-h="nw"] { left: -7px; top: -7px; cursor: nwse-resize; }
.crop-h[data-h="ne"] { right: -7px; top: -7px; cursor: nesw-resize; }
.crop-h[data-h="sw"] { left: -7px; bottom: -7px; cursor: nesw-resize; }
.crop-h[data-h="se"] { right: -7px; bottom: -7px; cursor: nwse-resize; }
.crop-h[data-h="n"] { left: 50%; top: -7px; margin-left: -7px; cursor: ns-resize; }
.crop-h[data-h="s"] { left: 50%; bottom: -7px; margin-left: -7px; cursor: ns-resize; }
.crop-h[data-h="w"] { top: 50%; left: -7px; margin-top: -7px; cursor: ew-resize; }
.crop-h[data-h="e"] { top: 50%; right: -7px; margin-top: -7px; cursor: ew-resize; }
.crop-size { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); background: rgba(10,16,13,.8); color: #fff; font-family: var(--font-mono); font-size: .72rem; padding: 2px 7px; border-radius: 4px; white-space: nowrap; pointer-events: none; }
.ratio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ratio-grid .preset { text-align: center; padding: 8px 6px; }
.ratio-grid .preset__name { justify-content: center; }