.crop-upload-error {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-align: center;
}

.crop-workspace { margin-top: 4px; display: flex; flex-direction: column; gap: 20px; }

.crop-stage-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }

.crop-stage {
  position: relative;
  max-width: 100%;
  touch-action: none;
  user-select: none;
  border-radius: var(--radius-sm);
  background:
    repeating-conic-gradient(var(--bg-alt) 0% 25%, var(--surface) 0% 50%) 0 0 / 22px 22px;
}
.crop-stage img {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-user-drag: none;
}

.crop-mask { position: absolute; background: rgba(24, 18, 12, 0.55); pointer-events: none; }

.crop-box {
  position: absolute;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
  cursor: move;
  touch-action: none;
}
.crop-box:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.crop-box-grid { position: absolute; inset: 0; pointer-events: none; }
.crop-box-grid span { position: absolute; background: rgba(255, 255, 255, 0.4); }
.crop-box-grid span:nth-child(1) { left: 33.333%; top: 0; width: 1px; height: 100%; }
.crop-box-grid span:nth-child(2) { left: 66.666%; top: 0; width: 1px; height: 100%; }
.crop-box-grid span:nth-child(3) { top: 33.333%; left: 0; width: 100%; height: 1px; }
.crop-box-grid span:nth-child(4) { top: 66.666%; left: 0; width: 100%; height: 1px; }

.crop-handle {
  position: absolute;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.crop-handle:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 2px; }
.crop-handle::after {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--accent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.crop-handle-n, .crop-handle-s { cursor: ns-resize; }
.crop-handle-e, .crop-handle-w { cursor: ew-resize; }
.crop-handle-nw, .crop-handle-se { cursor: nwse-resize; }
.crop-handle-ne, .crop-handle-sw { cursor: nesw-resize; }

.crop-handle-n { left: 50%; top: 0; }
.crop-handle-s { left: 50%; top: 100%; }
.crop-handle-e { left: 100%; top: 50%; }
.crop-handle-w { left: 0; top: 50%; }
.crop-handle-nw { left: 0; top: 0; }
.crop-handle-ne { left: 100%; top: 0; }
.crop-handle-sw { left: 0; top: 100%; }
.crop-handle-se { left: 100%; top: 100%; }

.crop-handle-n::after, .crop-handle-s::after { width: 26px; height: 8px; border-radius: 4px; }
.crop-handle-e::after, .crop-handle-w::after { width: 8px; height: 26px; border-radius: 4px; }

.crop-box.ratio-fixed .crop-handle-n,
.crop-box.ratio-fixed .crop-handle-s,
.crop-box.ratio-fixed .crop-handle-e,
.crop-box.ratio-fixed .crop-handle-w { display: none; }

.crop-info { font-size: 13px; color: var(--text-secondary); font-weight: 600; text-align: center; }
.crop-info b { color: var(--accent); font-family: var(--font-mono); font-weight: 700; }

.crop-settings { flex-direction: column; align-items: stretch; gap: 16px; }
.crop-ratio-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.crop-custom-ratio { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.crop-custom-ratio input[type="number"] {
  width: 64px;
  padding: 7px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--text);
  text-align: center;
}
.crop-custom-ratio span { color: var(--text-muted); font-weight: 700; }

.crop-actions-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.crop-result-actions { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }

@media (max-width: 640px) {
  .crop-handle-n::after, .crop-handle-s::after { width: 20px; }
  .crop-handle-e::after, .crop-handle-w::after { height: 20px; }
  .crop-ratio-group, .crop-actions-row { justify-content: center; }
}