html.image-cropper-open,
html.image-cropper-open body { overflow: hidden; }

.image-cropper-overlay {
  position: fixed; inset: 0; z-index: 1400; display: block;
  padding: 0; background: #101c24;
}
.image-cropper-dialog {
  display: flex; flex-direction: column; width: 100vw; height: 100vh; height: 100dvh; overflow: hidden;
  box-sizing: border-box; border: 0; border-radius: 0; background: #fff; color: #29465a;
}
.image-cropper-head { display: flex; align-items: flex-start; justify-content: space-between; flex: 0 0 auto; gap: 20px; padding: 17px 28px 14px; }
.image-cropper-head h2 { margin: 3px 0 0; color: #173449; font-size: 22px; letter-spacing: -.02em; }
.image-cropper-head p { max-width: 580px; margin: 6px 0 0; overflow: hidden; color: #7d8f9b; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.image-cropper-step { color: #e8790c; font-size: 11px; font-weight: 750; letter-spacing: .04em; }
.image-cropper-close {
  display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; padding: 0;
  border: 0; border-radius: 50%; background: #f0f4f5; color: #71838f; font-size: 21px; line-height: 1; cursor: pointer;
}
.image-cropper-close:hover { background: #fff0e2; color: #d96d00; }
.image-cropper-stage-wrap { position: relative; flex: 1 1 auto; min-height: 280px; margin: 0; overflow: hidden; border-radius: 0; background: #15232d; }
.image-cropper-canvas { display: block; width: 100%; height: 100%; min-height: 280px; touch-action: none; }
.image-cropper-drag-tip {
  position: absolute; left: 50%; bottom: 13px; transform: translateX(-50%); display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 999px; background: rgba(10, 20, 28, .72); color: #fff;
  font-size: 11px; white-space: nowrap; pointer-events: none; backdrop-filter: blur(4px);
}
.image-cropper-controls { display: grid; grid-template-columns: auto minmax(280px, 1fr); align-items: center; gap: 9px 32px; flex: 0 0 auto; padding: 14px 28px 12px; border-bottom: 1px solid #edf1f3; }
.image-cropper-ratios { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.image-cropper-ratios > span { margin-right: 4px; color: #586f7f; font-size: 12px; font-weight: 700; }
.image-cropper-ratios button {
  min-width: 56px; padding: 6px 10px; border: 1px solid #dbe4e9; border-radius: 7px;
  background: #fff; color: #617786; font: 600 12px inherit; cursor: pointer;
}
.image-cropper-ratios button:hover { border-color: #ffae61; color: #d96d00; }
.image-cropper-ratios button.is-active { border-color: #ff941f; background: #fff3e6; color: #d86b00; box-shadow: 0 0 0 2px rgba(255, 139, 24, .08); }
.image-cropper-zoom { display: grid; grid-template-columns: auto 32px minmax(160px, 1fr) 32px 48px; align-items: center; gap: 8px; color: #586f7f; font-size: 12px; font-weight: 700; }
.image-cropper-zoom button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid #d8e2e7; border-radius: 7px; background: #fff; color: #536d7d; font-size: 18px; cursor: pointer; }
.image-cropper-zoom button:hover { border-color: #ffae61; background: #fff8f0; color: #d96d00; }
.image-cropper-zoom input { width: 100%; accent-color: #ff8611; cursor: pointer; }
.image-cropper-zoom output { color: #6c7f8c; font-size: 11px; font-weight: 600; text-align: right; }
.image-cropper-help { grid-column: 1 / -1; margin: 0; color: #84949f; font-size: 11px; line-height: 1.55; }
.image-cropper-actions { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; flex: 0 0 auto; gap: 9px; padding: 12px 28px 16px; }
.image-cropper-actions button { min-height: 38px; padding: 8px 15px; border-radius: 8px; font: 700 12px inherit; cursor: pointer; }
.image-cropper-reset,
.image-cropper-secondary { border: 1px solid #d8e2e7; background: #fff; color: #587080; }
.image-cropper-reset:hover,
.image-cropper-secondary:hover { border-color: #ffad61; background: #fff8f0; color: #d86b00; }
.image-cropper-primary { min-width: 104px; border: 1px solid #ff8500; background: #ff8500; color: #fff; box-shadow: 0 7px 16px rgba(238, 120, 0, .2); }
.image-cropper-primary:hover { background: #ed7900; }
.image-cropper-primary:disabled { cursor: wait; opacity: .68; }

@media (max-width: 640px) {
  .image-cropper-dialog { width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; }
  .image-cropper-head { padding: 18px 16px 13px; }
  .image-cropper-head h2 { font-size: 19px; }
  .image-cropper-stage-wrap { min-height: 220px; margin: 0; }
  .image-cropper-canvas { min-height: 220px; }
  .image-cropper-controls { grid-template-columns: 1fr; padding: 12px 16px; }
  .image-cropper-ratios > span { flex-basis: 100%; }
  .image-cropper-ratios button { flex: 1; }
  .image-cropper-zoom { grid-template-columns: auto 30px minmax(80px, 1fr) 30px 42px; }
  .image-cropper-help { grid-column: 1; }
  .image-cropper-actions { grid-template-columns: auto 1fr auto; padding: 13px 16px calc(16px + env(safe-area-inset-bottom)); }
  .image-cropper-actions > span { display: none; }
  .image-cropper-secondary { justify-self: end; }
  .image-cropper-primary { grid-column: 1 / -1; grid-row: 2; width: 100%; }
}