.image-crop { width: min(520px, calc(100vw - 24px)); max-width: calc(100vw - 24px); max-height: 94vh; max-height: 94dvh; padding: 0; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); color: var(--c-text); box-shadow: 0 24px 80px rgb(0 0 0 / 25%); }
.image-crop[open] { display: flex; flex-direction: column; }
.image-crop::backdrop { background: rgb(16 24 40 / 75%); }
.image-crop__header { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--c-border); }
.image-crop__header h2 { margin: 0; font-size: 1.2rem; }
.image-crop__body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 20px; }
.image-crop__body > p { margin: 0 0 12px; }
#image-crop-hint { font-size: .84rem; text-align: center; color: var(--c-muted); }
.image-crop__filename { overflow-wrap: anywhere; color: var(--c-muted); font-size: .85rem; text-align: center; }
.image-crop__stage { padding: 14px; border-radius: var(--radius-sm); background: var(--c-bg); }
.image-crop__surface { position: relative; width: min(100%, calc(36vh * var(--crop-aspect))); width: min(100%, calc(36dvh * var(--crop-aspect))); aspect-ratio: var(--crop-aspect); margin-inline: auto; overflow: hidden; touch-action: none; user-select: none; cursor: crosshair; }
.image-crop__surface img { display: block; width: 100%; height: 100%; pointer-events: none; }
.image-crop__selection { position: absolute; border: 2px solid #fff; box-shadow: 0 0 0 100vmax rgb(0 0 0 / 55%); cursor: move; }
.image-crop__selection:focus-visible { outline: 3px solid var(--c-accent); outline-offset: -5px; }
.image-crop__selection::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, transparent 33%, rgb(255 255 255 / 40%) 33%, rgb(255 255 255 / 40%) 33.5%, transparent 33.5%, transparent 66%, rgb(255 255 255 / 40%) 66%, rgb(255 255 255 / 40%) 66.5%, transparent 66.5%), linear-gradient(to bottom, transparent 33%, rgb(255 255 255 / 40%) 33%, rgb(255 255 255 / 40%) 33.5%, transparent 33.5%, transparent 66%, rgb(255 255 255 / 40%) 66%, rgb(255 255 255 / 40%) 66.5%, transparent 66.5%); pointer-events: none; }
.image-crop__handle { position: absolute; z-index: 1; width: 30px; height: 30px; }
.image-crop__handle::before { content: ""; position: absolute; inset: 8px; border: 2px solid #fff; border-radius: 3px; background: var(--c-primary); }
.image-crop__handle[data-crop-corner="nw"] { top: -8px; left: -8px; cursor: nwse-resize; }
.image-crop__handle[data-crop-corner="ne"] { top: -8px; right: -8px; cursor: nesw-resize; }
.image-crop__handle[data-crop-corner="sw"] { bottom: -8px; left: -8px; cursor: nesw-resize; }
.image-crop__handle[data-crop-corner="se"] { bottom: -8px; right: -8px; cursor: nwse-resize; }
.image-crop__dimensions { margin-top: 12px !important; text-align: center; color: var(--c-muted); font-size: .85rem; }
.image-crop__actions { display: flex; flex: 0 0 auto; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--c-border); }
.image-crop__actions .btn { min-width: 0; min-height: 44px; white-space: normal; text-align: center; }
.image-crop [hidden] { display: none !important; }
.image-crop button:disabled { opacity: .55; }
@media (max-width: 480px) {
    .image-crop__header, .image-crop__body, .image-crop__actions { padding: 12px; }
    .image-crop__stage { padding: 8px; }
    .image-crop__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .image-crop__actions .btn { padding: 9px 6px; font-size: .8rem; }
}