.crop-shell { width: min(1280px, calc(100% - 40px)); }
.crop-layout { display: grid; grid-template-columns: 360px minmax(0, 1fr); }
.crop-controls { padding: 24px; border-right: 1px solid var(--line); }
.compact-drop { min-height: 190px; margin-bottom: 20px; padding: 20px; }
.compact-drop .drop-zone-icon { width: 46px; height: 46px; margin-bottom: 10px; border-radius: 14px; }
.crop-stage-wrap { min-width: 0; padding: 24px; }
.crop-stage { position: relative; min-height: 540px; display: grid; place-items: center; margin-top: 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #e9eef2; }
#cropCanvas { display: block; width: 100%; height: 540px; touch-action: none; cursor: crosshair; }
#cropEmpty { position: absolute; margin: 0; color: var(--muted); font-size: 13px; pointer-events: none; }
.custom-size[hidden] { display: none; }
@media (max-width: 900px) {
  .crop-layout { grid-template-columns: 1fr; }
  .crop-controls { border-right: 0; border-bottom: 1px solid var(--line); }
  .crop-stage, #cropCanvas { min-height: 430px; height: 430px; }
}
@media (max-width: 600px) {
  .crop-shell { width: min(100% - 24px, 1280px); }
  .crop-controls, .crop-stage-wrap { padding: 18px; }
  .crop-stage, #cropCanvas { min-height: 360px; height: 360px; }
}