.image-crop-dialog { box-sizing:border-box; width:min(520px,calc(100% - 24px)); max-height:calc(100dvh - 24px); overflow:auto; margin:auto; border:1px solid #dce3ed; border-radius:16px; padding:20px; color:#202c3d; background:#fff; box-shadow:0 20px 70px #14223740; overscroll-behavior:contain; }
.image-crop-dialog::backdrop { background:#142237b8; }
.crop-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.crop-head h2 { margin:0; font-size:21px; }
.crop-help,.crop-progress { font-size:13px; color:#627187; line-height:1.6; margin:10px 0; overflow-wrap:anywhere; }
.crop-frame { position:relative; width:min(100%,var(--crop-frame-width,44dvh)); aspect-ratio:1; margin:12px auto; overflow:hidden; background:#edf1f6; touch-action:none; cursor:grab; user-select:none; -webkit-user-select:none; outline:1px solid #b8c6d8; }
.crop-frame:active { cursor:grabbing; }
.crop-frame:focus-visible { outline:3px solid #2563db; }
.crop-frame img { position:absolute; max-width:none; max-height:none; pointer-events:none; -webkit-user-drag:none; }
.crop-guide { position:absolute; inset:0; pointer-events:none; border:2px solid #fff; box-sizing:border-box; }
.crop-guide-circle { inset:5.47%; border-radius:50%; box-shadow:0 0 0 1000px #14223755; }
.crop-dimensions { display:flex; gap:16px; margin:12px 0; }
.crop-dimensions label { flex:1; min-width:0; font-size:12px; }
.crop-dimensions output { float:right; color:#627187; }
.crop-dimensions input { display:block; width:100%; min-height:28px; margin:5px 0; accent-color:#2563db; }
.crop-zoom { display:flex; align-items:center; gap:8px; margin:14px 0; }
.crop-zoom label { flex:1; min-width:0; font-size:12px; }
.crop-zoom input { display:block; width:100%; margin:5px 0; accent-color:#2563db; }
.crop-zoom output { font-size:12px; min-width:40px; }
.image-crop-dialog button { min-height:44px; border-radius:8px; font-size:14px; padding:8px 12px; }
.image-crop-dialog button:disabled { opacity:.5; cursor:default; }
.crop-actions { display:flex; gap:8px; position:sticky; bottom:-20px; background:white; padding:12px 0; }
.crop-actions .primary { width:auto; flex:1; background:#2563db; color:white; }
.crop-error { color:#b42318; font-size:13px; margin:8px 0; }
.manual-dropzone { padding:20px; border:2px dashed #b7c7dd; border-radius:10px; text-align:center; background:#f5f8fd; cursor:pointer; }
.manual-dropzone.is-dragover { border-color:#2563db; background:#e8f0ff; }
.manual-dropzone input { max-width:100%; margin-top:12px; }
.manual-dropzone:focus-within { outline:2px solid #2563db; }
.manual-upload-status { font-size:13px; color:#627187; }
@media(max-width:480px) { .image-crop-dialog { padding:14px; } .crop-actions { bottom:-14px; } .crop-head h2 { font-size:19px; } }

.crop-background-options { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:12px 0 4px; }
.crop-background-options > span { font-size:13px; color:#627187; }
.crop-background-options button { flex:1; white-space:nowrap; border:1px solid #b8c6d8; background:#fff; color:#202c3d; }
.crop-background-options button[aria-pressed="true"] { border-color:#2563db; background:#edf4ff; color:#174fb3; box-shadow:inset 0 0 0 1px #2563db; }
.crop-background-hint { font-size:12px; line-height:1.5; color:#627187; margin:4px 0 8px; }