.lsr-cropper-overlay { align-items: center; background: #000c; display: flex; inset: 0; justify-content: center; padding: 14px; position: fixed; z-index: 10000; }
.lsr-cropper { background: linear-gradient(145deg, #071727, #020712); border: 1px solid #4fd6ff73; border-top: 5px solid #4fd6ff; box-shadow: 0 30px 100px #000d; color: #f5f9fc; display: grid; max-height: calc(100vh - 28px); overflow: auto; width: min(980px, 100%); }
.lsr-cropper > header { align-items: center; border-bottom: 1px solid #4fd6ff38; display: flex; justify-content: space-between; padding: 16px 18px; }
.lsr-cropper > header span { color: #d9ad45; font-size: .67rem; font-weight: 950; text-transform: uppercase; }
.lsr-cropper h2 { font: 950 clamp(1.5rem, 4vw, 2.8rem)/.95 var(--display-font, "Arial Narrow", Impact, sans-serif); margin: 5px 0 0; text-transform: uppercase; }
.lsr-crop-close { align-items: center; background: #0b2133; border: 1px solid #4fd6ff4d; color: #fff; cursor: pointer; display: inline-flex; font-size: 1.65rem; height: 42px; justify-content: center; padding: 0; width: 42px; }
.lsr-crop-stage { align-items: center; background: radial-gradient(circle, #4fd6ff16, transparent 60%), #01050b; display: flex; justify-content: center; min-height: 300px; overflow: hidden; padding: 12px; }
.lsr-crop-stage canvas { background-color: #07111c; background-image: linear-gradient(45deg, #ffffff0d 25%, transparent 25%), linear-gradient(-45deg, #ffffff0d 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ffffff0d 75%), linear-gradient(-45deg, transparent 75%, #ffffff0d 75%); background-position: 0 0, 0 8px, 8px -8px, -8px 0; background-size: 16px 16px; border: 2px solid #d9ad45; box-shadow: 0 0 0 9999px #0006, 0 0 28px #4fd6ff2b; cursor: grab; max-width: 100%; touch-action: none; }
.lsr-crop-stage canvas.is-dragging { cursor: grabbing; }
.lsr-crop-controls { align-items: end; border-top: 1px solid #4fd6ff2f; display: grid; gap: 12px; grid-template-columns: minmax(160px, .8fr) minmax(220px, 1.5fr) auto auto; padding: 14px 18px; }
.lsr-crop-controls label { color: #9fb3bf; display: grid; font-size: .68rem; font-weight: 900; gap: 7px; margin: 0; text-transform: uppercase; }
.lsr-crop-controls select { background: #020812; border: 1px solid #4fd6ff4a; color: #fff; min-height: 42px; padding: 9px; }
.lsr-crop-controls input[type="range"] { accent-color: #4fd6ff; margin: 0; min-height: 42px; padding: 0; width: 100%; }
.lsr-cropper button { border: 0; cursor: pointer; font: 950 .75rem/1 var(--display-font, "Arial Narrow", Impact, sans-serif); min-height: 42px; padding: 12px 15px; text-transform: uppercase; }
.lsr-cropper button.ghost { background: #0b2133; border: 1px solid #4fd6ff42; color: #eefaff; }
.lsr-crop-error { color: #ffb7b7; font-size: .76rem; font-weight: 800; margin: 0; min-height: 1.1em; padding: 0 18px; text-align: right; }
.lsr-cropper > footer { border-top: 1px solid #4fd6ff38; display: flex; gap: 9px; justify-content: flex-end; padding: 14px 18px; }
.lsr-crop-apply { background: #4fd6ff; color: #02111d; min-width: 150px; }
.lsr-crop-apply:disabled { cursor: wait; opacity: .6; }

@media (max-width: 680px) {
  .lsr-cropper-overlay { align-items: stretch; padding: 0; }
  .lsr-cropper { border-inline: 0; max-height: 100vh; width: 100%; }
  .lsr-cropper > header { padding: 12px; }
  .lsr-crop-stage { min-height: 260px; padding: 8px; }
  .lsr-crop-controls { grid-template-columns: 1fr 1fr; padding: 12px; }
  .lsr-crop-controls label { grid-column: 1 / -1; }
  .lsr-cropper > footer { bottom: 0; padding: 12px; position: sticky; }
  .lsr-cropper > footer button { flex: 1; }
}