.image-crop-dialog {
  box-sizing: border-box;
  width: min(720px, calc(100vw - 20px));
  max-height: calc(100dvh - 20px);
  padding: 20px;
  border: 1px solid #dbe4f0;
  border-radius: 16px;
  color: #162336;
  background: #fff;
  overflow: auto;
  overscroll-behavior: contain;
}
.image-crop-dialog::backdrop { background: rgb(15 23 42 / 72%); }
.image-crop-dialog h2 { margin: 0 0 8px; font-size: 22px; }
.image-crop-dialog p { margin: 8px 0 14px; font-size: 14px; line-height: 1.5; }
.image-crop-viewport { display: flex; justify-content: center; width: 100%; background: #101827; }
.image-crop-stage { position: relative; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.image-crop-stage canvas { display: block; width: 100%; height: 100%; }
.image-crop-box {
  position: absolute; box-sizing: border-box; border: 3px solid #3b82f6;
  box-shadow: 0 0 0 9999px rgb(0 0 0 / 55%); cursor: move; touch-action: none;
}
.image-crop-box:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }
.image-crop-label { position: absolute; left: 3px; top: 3px; font-size: 12px; color: white; background: #1d4ed8; padding: 2px 4px; pointer-events: none; white-space: nowrap; }
.image-crop-box button {
  position: absolute; width: 44px; height: 44px; min-width: 0; min-height: 0; margin: 0;
  padding: 0; border: 0; border-radius: 0; background: transparent; touch-action: none;
}
.image-crop-box button::after { content: ""; position: absolute; inset: 15px; background: #fff; border: 2px solid #2563eb; border-radius: 3px; }
.image-crop-box [data-corner="nw"] { left: -23px; top: -23px; cursor: nwse-resize; }
.image-crop-box [data-corner="ne"] { right: -23px; top: -23px; cursor: nesw-resize; }
.image-crop-box [data-corner="sw"] { left: -23px; bottom: -23px; cursor: nesw-resize; }
.image-crop-box [data-corner="se"] { right: -23px; bottom: -23px; cursor: nwse-resize; }
.image-crop-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.image-crop-actions button { min-height: 44px; flex: 1; padding: 10px 12px; font-size: 15px; }
.image-crop-actions [data-action="confirm"] { flex-basis: 100%; background: #1d4ed8; color: #fff; }
@media (max-width: 480px) { .image-crop-dialog { padding: 14px; } }