.crop-preview-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
  border: 1.5px solid var(--ink-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--ink-50);
  line-height: 0;
}
.crop-preview-wrap canvas#previewCanvas { display: block; max-width: 100%; height: auto; }

.crop-box {
  position: absolute;
  border: 1.5px dashed var(--white);
  box-shadow: 0 0 0 2000px rgba(13, 27, 30, 0.55);
  cursor: move;
  touch-action: none;
  box-sizing: border-box;
}
.crop-handle {
  position: absolute;
  width: 14px; height: 14px;
  margin: -7px;
  background: var(--white);
  border: 1.5px solid var(--brand-600);
  border-radius: 50%;
  touch-action: none;
  z-index: 3;
}
.crop-handle.nw { top: 0; left: 0; cursor: nwse-resize; }
.crop-handle.ne { top: 0; left: 100%; cursor: nesw-resize; }
.crop-handle.sw { top: 100%; left: 0; cursor: nesw-resize; }
.crop-handle.se { top: 100%; left: 100%; cursor: nwse-resize; }

.crop-page-nav { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.crop-page-nav input[type="number"] { width: 70px; text-align: center; }
.crop-page-nav .reset-link { margin-left: auto; }