.profile-crop-dialog {
  position: fixed; inset: 0; margin: auto;
  width: min(480px, calc(100vw - 28px)); max-height: calc(100dvh - 32px);
  padding: 24px; box-sizing: border-box; overflow: auto;
  border: 1px solid #35363c; border-radius: 12px;
  background: #232428; color: #f4f4f5; font: inherit;
  box-shadow: 0 24px 80px #0008;
}
.profile-crop-dialog::backdrop { background: #000b; }
.profile-crop-dialog[open] {
  animation: profile-crop-enter 280ms cubic-bezier(.16, 1, .3, 1) both;
  transform-origin: center;
}
.profile-crop-dialog[open]::backdrop {
  animation: profile-crop-backdrop-enter 240ms ease-out both;
}
.profile-crop-dialog[open].is-closing {
  animation: profile-crop-exit 200ms cubic-bezier(.4, 0, 1, 1) both;
  pointer-events: none;
}
.profile-crop-dialog[open].is-closing::backdrop {
  animation: profile-crop-backdrop-exit 200ms ease-in both;
}
@keyframes profile-crop-enter {
  from { opacity: 0; transform: translateY(10px) scale(.96); }
  to { opacity: 1; transform: none; }
}
@keyframes profile-crop-backdrop-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes profile-crop-exit {
  from { opacity: var(--crop-exit-opacity, 1); transform: var(--crop-exit-transform, none); }
  to { opacity: 0; transform: translateY(10px) scale(.96); }
}
@keyframes profile-crop-backdrop-exit {
  from { opacity: var(--crop-backdrop-exit-opacity, 1); }
  to { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .profile-crop-dialog[open],
  .profile-crop-dialog[open]::backdrop,
  .profile-crop-dialog[open].is-closing,
  .profile-crop-dialog[open].is-closing::backdrop { animation: none; }
}
.profile-crop-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.profile-crop-heading h2 { margin: 0; font-size: 20px; font-weight: 650; }
.profile-crop-dialog p { color: #a9abbc; font-size: 13px; line-height: 1.6; }
.profile-crop-dialog button { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; cursor: pointer; font: inherit; font-size: 13px; line-height: 1; color: inherit; border: 1px solid #3b3d4e; border-radius: 9px; padding: 10px 15px; background: #242632; transition: background-color .15s ease, color .15s ease; }
.profile-crop-dialog button:hover:not(:disabled),
.profile-crop-dialog button:active:not(:disabled) { transform: none; filter: none; }
.profile-crop-dialog button:hover { background: #343748; }
.profile-crop-dialog .profile-crop-close { font-size: 28px; font-weight: 300; padding: 0; width: 28px; height: 28px; border: 0; background: transparent; color: #b5b6bd; }
.profile-crop-close svg { display: block; width: 18px; height: 18px; flex: none; pointer-events: none; }
.profile-crop-workspace { padding: 25px 0; margin: 22px 0; background: #1b1c20; border-radius: 8px; overflow: hidden; isolation: isolate; }
.profile-crop-frame { position: relative; width: 100%; overflow: hidden; cursor: grab; touch-action: none; background: #282934; }
.profile-crop-frame::after { content: ""; position: absolute; inset: 0; box-sizing: border-box; border: 2px solid #fff; pointer-events: none; }
.profile-crop-frame.is-avatar { max-width: 300px; width: 78%; overflow: visible; margin: auto; background: transparent; }
.profile-crop-frame.is-avatar::after { border: 4px solid #fff; border-radius: 50%; box-shadow: 0 0 0 600px #1b1c207a; }
.profile-crop-frame:active { cursor: grabbing; }
.profile-crop-frame img { position: absolute; top: 0; left: 0; max-width: none; max-height: none; pointer-events: none; user-select: none; transform-origin: 0 0; }
.profile-crop-zoom { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 12px; padding: 0 0 0 20px; }
.profile-crop-zoom label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.profile-crop-zoom svg { flex-shrink: 0; fill: #b5b6bd; }
.profile-crop-zoom input { flex: 1; min-width: 0; height: 4px; margin: 0; appearance: none; border: 0; border-radius: 3px; background: #4e5059; cursor: pointer; padding: 0; }
.profile-crop-zoom input::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 0; }
.profile-crop-zoom input::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 0; }
.profile-crop-zoom output { width: 42px; text-align: right; font-variant-numeric: tabular-nums; }
.profile-crop-dialog .profile-crop-rotate { width: 34px; height: 34px; flex: 0 0 34px; padding: 6px; margin-left: 4px; border: 0; background: transparent; color: #b5b6bd; }
.profile-crop-rotate svg { display: block; pointer-events: none; }
.profile-crop-dialog .profile-crop-error { color: #ffb0b8; }
.profile-crop-actions { display: flex; align-items: center; gap: 8px; margin-top: 28px; }
.profile-crop-actions > span { flex: 1; }
.profile-crop-actions button { min-width: 90px; min-height: 40px; background: #35363c; border-color: transparent; border-radius: 8px; }
.profile-crop-dialog [data-crop-reset] { min-width: 0; padding: 10px 12px; background: transparent; color: #929bff; border: 0; }
.profile-crop-dialog [data-crop-apply] { background: #dc143c; color: #fff; border-color: transparent; font-weight: 600; }
.profile-crop-dialog [data-crop-apply]:hover { background: #b91032; }
.profile-crop-dialog [data-crop-apply]:active:not(:disabled) { background: #980d29; }
.profile-crop-dialog [data-crop-apply]:focus-visible { outline-color: #ff8ca3; }
.profile-crop-dialog button:disabled { opacity: .5; cursor: wait; }
.profile-crop-dialog :focus-visible { outline: 2px solid #c6b6ff; outline-offset: 4px; }
@media (max-width: 480px) {
  .profile-crop-dialog { padding: 18px; }
  .profile-crop-heading h2 { font-size: 18px; }
  .profile-crop-actions button { padding: 10px; }
  .profile-crop-zoom { padding: 0 8px; }
  .profile-crop-actions button { min-width: 76px; }
  .profile-crop-actions [data-crop-reset] { min-width: 0; padding: 10px 12px; }
}