.avatar-crop-modal {
  --crop-ink: var(--text-color, #2b2d42);
  --crop-surface: var(--bg-card, #fff);
  --crop-wash: var(--accent-light, #fff0f3);
  position: fixed;
  inset: 0;
  z-index: 110000;
  display: grid;
  place-items: center;
  overflow-y: auto;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  color: var(--crop-ink);
  background: rgb(18 18 28 / 78%);
  backdrop-filter: blur(8px);
}

.avatar-crop-modal[hidden] { display: none; }
.avatar-crop-card {
  width: min(100%, 440px);
  max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(16px, 4vw, 24px);
  border: 1px solid color-mix(in srgb, var(--primary-color) 23%, transparent);
  border-radius: 22px;
  background: var(--crop-surface);
  box-shadow: 0 24px 70px rgb(0 0 0 / 35%);
}

.avatar-crop-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.avatar-crop-head h2 { margin: 0; color: var(--primary-color); font: 700 1.55rem/1.15 var(--font-cursive, cursive); }
.avatar-crop-head p { margin: 5px 0 0; color: var(--text-muted, #6c757d); font-size: .87rem; }
.avatar-crop-icon-button { flex: 0 0 auto; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--crop-wash); color: var(--crop-ink); font-size: 1.4rem; cursor: pointer; }
.avatar-crop-view {
  position: relative;
  width: min(100%, 360px, calc(100dvh - 390px));
  min-width: min(100%, 230px);
  aspect-ratio: 1;
  margin: 0 auto;
  overflow: hidden;
  border: 3px solid color-mix(in srgb, var(--primary-color) 70%, white);
  border-radius: 50%;
  background: #24212a;
  box-shadow: 0 0 0 100vmax rgb(10 10 16 / 18%), 0 6px 24px rgb(0 0 0 / 18%);
  touch-action: none;
  cursor: grab;
}
.avatar-crop-view::after { position: absolute; inset: 0; border: 1px solid rgb(255 255 255 / 50%); border-radius: inherit; content: ""; pointer-events: none; }
.avatar-crop-view.is-dragging { cursor: grabbing; }
.avatar-crop-image { position: absolute; max-width: none; user-select: none; pointer-events: none; }
.avatar-crop-help { margin: 10px 0 14px; text-align: center; font-size: .84rem; color: var(--text-muted, #6c757d); }
.avatar-crop-zoom { display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; gap: 9px; }
.avatar-crop-zoom button { height: 40px; border: 1px solid var(--border-color, #ddd); border-radius: 12px; background: var(--crop-wash); color: var(--crop-ink); font-size: 1.2rem; cursor: pointer; }
.avatar-crop-range-wrap { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; }
.avatar-crop-range-wrap input { width: 100%; accent-color: var(--primary-color); }
.avatar-crop-range-wrap output { min-width: 3.2em; font-size: .84rem; font-variant-numeric: tabular-nums; }
.avatar-crop-actions { display: grid; grid-template-columns: 1fr 1.2fr; gap: 10px; margin-top: 18px; }
.avatar-crop-actions button { min-height: 46px; border-radius: 14px; font: 700 .95rem var(--font-main, sans-serif); cursor: pointer; }
.avatar-crop-cancel { border: 1px solid var(--border-color, #ddd); background: transparent; color: var(--crop-ink); }
.avatar-crop-save { border: 0; background: var(--primary-color); color: #fff; box-shadow: 0 5px 14px color-mix(in srgb, var(--primary-color) 32%, transparent); }
.avatar-crop-reset { display: block; margin: 8px auto 0; padding: 8px; border: 0; background: transparent; color: var(--primary-color); font: 700 .88rem var(--font-main, sans-serif); cursor: pointer; }
.avatar-crop-modal button:focus-visible, .avatar-crop-modal input:focus-visible { outline: 3px solid var(--primary-color); outline-offset: 3px; }
.avatar-upload-label:focus-visible { outline: 3px solid var(--primary-color); outline-offset: 3px; }
@media (max-height: 650px) {
  .avatar-crop-card { padding: 12px 16px; }
  .avatar-crop-head { margin-bottom: 8px; }
  .avatar-crop-head h2 { font-size: 1.3rem; }
  .avatar-crop-view { width: min(100%, 290px, calc(100dvh - 335px)); }
  .avatar-crop-help { margin: 6px 0 8px; }
  .avatar-crop-actions { margin-top: 10px; }
}