.imgcrop-stage {
  display: flex;
  align-items: center;
  justify-content: center;
}

.imgcrop-image-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

.imgcrop-image {
  display: block;
  max-width: 100%;
  max-height: 520px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  user-select: none;
  -webkit-user-drag: none;
}

.imgcrop-overlay {
  position: absolute;
  inset: 0;
  touch-action: none;
}

.imgcrop-crop-rect {
  position: absolute;
  border: 2px solid #ffd700;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.35);
  cursor: move;
}

.imgcrop-move-area {
  position: absolute;
  inset: 0;
  cursor: move;
}

.imgcrop-handle {
  position: absolute;
  width: 14px;
  height: 14px;
  background: #ffd700;
  border: 1px solid #000;
  border-radius: 999px;
  z-index: 2;
}

.imgcrop-handle.nw { top: -7px; left: -7px; cursor: nwse-resize; }
.imgcrop-handle.ne { top: -7px; right: -7px; cursor: nesw-resize; }
.imgcrop-handle.sw { bottom: -7px; left: -7px; cursor: nesw-resize; }
.imgcrop-handle.se { bottom: -7px; right: -7px; cursor: nwse-resize; }
.imgcrop-handle.n { top: -7px; left: calc(50% - 7px); cursor: ns-resize; }
.imgcrop-handle.s { bottom: -7px; left: calc(50% - 7px); cursor: ns-resize; }
.imgcrop-handle.w { left: -7px; top: calc(50% - 7px); cursor: ew-resize; }
.imgcrop-handle.e { right: -7px; top: calc(50% - 7px); cursor: ew-resize; }

#imgcrop-dropzone.is-dragging #imgcrop-dropzone-panel {
  border-color: #000;
  background-color: #fffef2;
}