.photo-crop-dialog {
  width: min(430px, calc(100vw - 24px));
  max-width: none;
  max-height: calc(100dvh - 24px);
  padding: 20px;
  border: 1px solid #dfe3e8;
  border-radius: 18px;
  background: #fff;
  color: #17191e;
  overflow-y: auto;
}
.photo-crop-dialog[open] { display: grid; gap: 14px; }
.photo-crop-dialog::backdrop { background: rgb(16 24 40 / 50%); }
.photo-crop-dialog h2 { margin: 0; font-size: 22px; font-weight: 400; }
.photo-crop-dialog p { margin: 0; color: #5f6570; font-size: 14px; }
.photo-crop-frame { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 12px; background: #f2f4f7; touch-action: none; cursor: grab; }
.photo-crop-frame.is-dragging { cursor: grabbing; }
.photo-crop-frame img { position: absolute; max-width: none; max-height: none; border: 0; border-radius: 0; pointer-events: none; user-select: none; }
.photo-crop-zoom { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; font-size: 14px; }
.photo-crop-zoom input { width: 100%; min-height: 44px; accent-color: #1769ff; }
.photo-crop-actions { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
.photo-crop-actions button { min-height: 44px; padding: 10px 14px; border: 1px solid #dfe3e8; border-radius: 12px; background: #fff; color: #17191e; font: inherit; cursor: pointer; }
.photo-crop-actions .photo-crop-accept { border-color: #1769ff; background: #1769ff; color: #fff; }
.photo-crop-actions button:disabled { opacity: .55; cursor: default; }
.photo-crop-dialog :focus-visible { outline: 3px solid #5b9dff; outline-offset: 2px; }
@media (max-width: 400px), (max-height: 650px) {
  .photo-crop-dialog { padding: 14px; }
  .photo-crop-dialog[open] { gap: 10px; }
  .photo-crop-frame { width: min(100%, calc(100dvh - 230px)); justify-self: center; }
}