/* G10: touch-safe crop overlay, with native modal focus handling. */
.crop-dialog { margin: auto; border: 0; border-radius: 16px; background: var(--bg-elev); color: var(--text); width: min(900px, 100%); max-width: 100%; max-height: 100dvh; overflow: auto; padding: max(16px, var(--safe-top)) max(18px, env(safe-area-inset-right)) max(16px, var(--safe-bottom)) max(18px, env(safe-area-inset-left)); }
.crop-dialog::backdrop { background: rgba(0,0,0,.8); }
.crop-dialog h2 { margin: 0 0 8px; }
.crop-dialog p { font-size: 13px; color: var(--text-2); }
.crop-dialog select { width: 130px; margin-bottom: 16px; }
.crop-stage { position: relative; margin: 0 auto; overflow: hidden; touch-action: none; background: #222; }
.crop-stage canvas { display: block; width: 100%; height: 100%; }
.crop-selection { position: absolute; border: 2px solid white; box-shadow: 0 0 0 9999px #0009; cursor: move; touch-action: none; background: linear-gradient(to right, transparent 33%, #fff7 33%, #fff7 33.4%, transparent 33.4%, transparent 66.6%, #fff7 66.6%, #fff7 67%, transparent 67%), linear-gradient(to bottom, transparent 33%, #fff7 33%, #fff7 33.4%, transparent 33.4%, transparent 66.6%, #fff7 66.6%, #fff7 67%, transparent 67%); }
.crop-selection:focus-visible { outline: 2px solid var(--brand); outline-offset: -4px; }
.crop-handle { position: absolute; width: 36px; height: 36px; }
.crop-handle::after { content: ''; position: absolute; inset: 9px; background: white; border: 1px solid #333; border-radius: 2px; }
.crop-handle.nw, .crop-handle.n, .crop-handle.ne { top: -12px; }
.crop-handle.sw, .crop-handle.s, .crop-handle.se { bottom: -12px; }
.crop-handle.nw, .crop-handle.w, .crop-handle.sw { left: -12px; }
.crop-handle.ne, .crop-handle.e, .crop-handle.se { right: -12px; }
.crop-handle.n, .crop-handle.s { left: calc(50% - 14px); cursor: ns-resize; }
.crop-handle.e, .crop-handle.w { top: calc(50% - 14px); cursor: ew-resize; }
.crop-handle.nw, .crop-handle.se { cursor: nwse-resize; }
.crop-handle.ne, .crop-handle.sw { cursor: nesw-resize; }
.crop-status { display: block; text-align: center; margin: 12px; }
.crop-controls { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }