/* The photo editor sits above the profile dialog in the native dialog top layer. */
.pyap-crop-dialog {
  width: min(94vw, 520px);
  max-height: min(92vh, 820px);
  padding: 0;
  border: 1px solid #161b1d;
  border-radius: 0;
  background: #f6f4ed;
  color: #161b1d;
  box-shadow: 0 24px 90px #0007;
  overflow: auto;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.pyap-crop-dialog::backdrop { background: #081719b8; }
.pyap-crop-card { padding: 24px 28px 27px; }
.pyap-crop-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pyap-crop-kicker { color: #d94732; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.pyap-crop-head h2 { margin: 5px 0 0; font: 400 39px/1 Georgia, 'Times New Roman', serif; letter-spacing: -.04em; }
.pyap-crop-head h2 span { color: #d94732; }
.pyap-crop-close { width: 44px; height: 44px; flex: none; border: 0; background: transparent; color: #161b1d; font-size: 30px; line-height: 1; }
.pyap-crop-instructions { max-width: 390px; margin: 13px 0 17px; color: #555a5a; font-size: 13px; line-height: 1.45; }
.pyap-crop-stage {
  position: relative;
  width: min(100%, 330px);
  aspect-ratio: 1;
  margin: 0 auto;
  overflow: hidden;
  background: #262b2d;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.pyap-crop-stage.dragging { cursor: grabbing; }
.pyap-crop-stage:focus-visible { outline: 3px solid #59afc2; outline-offset: 3px; }
.pyap-crop-image { position: absolute; top: 50%; left: 50%; max-width: none; pointer-events: none; }
.pyap-crop-frame {
  position: absolute;
  inset: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 250px #08171985;
  pointer-events: none;
}
.pyap-crop-controls { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 12px; align-items: center; margin: 18px 0; }
.pyap-crop-controls label { font-size: 12px; font-weight: 750; }
.pyap-crop-controls input[type=range] { width: 100%; accent-color: #2a40a5; min-height: 32px; }
.pyap-crop-reset { border: 0; border-bottom: 1px solid #d94732; padding: 2px 0; background: transparent; color: #d94732; font-size: 12px; font-weight: 750; }
.pyap-crop-foot { display: flex; align-items: end; justify-content: space-between; gap: 15px; border-top: 1px solid #b9bdba; padding-top: 16px; }
.pyap-crop-preview-wrap { display: flex; align-items: center; gap: 8px; color: #555a5a; font-size: 11px; }
.pyap-crop-preview { display: block; width: 54px; height: 54px; border: 1px solid #b9bdba; border-radius: 50%; }
.pyap-crop-actions { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }
.pyap-crop-actions button { min-height: 44px; padding: 10px 12px; border-radius: 0; font-size: 12px; font-weight: 750; }
.pyap-crop-cancel { border: 1px solid #161b1d; background: transparent; color: #161b1d; }
.pyap-crop-save { border: 1px solid #2a40a5; background: #2a40a5; color: #fff; }
.pyap-crop-save:hover { background: #1f327f; color: #fff; }
.pyap-crop-save:disabled { opacity: .55; cursor: wait; }
.pyap-crop-error { margin: 12px 0 0; padding: 9px; background: #fbe6e2; color: #8b2312; font-size: 12px; }
.pyap-crop-error[hidden] { display: none; }
#profile-photo, .pyap-avatar, .friend-avatar, .friend-photo { border-radius: 50%; object-fit: cover; }

@media (max-width: 560px) {
  .pyap-crop-dialog { width: min(100vw - 16px, 430px); max-height: calc(100dvh - 18px); }
  .pyap-crop-card { padding: 17px 17px 20px; }
  .pyap-crop-head h2 { font-size: 33px; }
  .pyap-crop-instructions { margin: 9px 0 13px; }
  .pyap-crop-stage { width: min(100%, 300px, 44dvh); }
  .pyap-crop-foot { align-items: center; }
  .pyap-crop-preview-wrap span { display: none; }
  .pyap-crop-preview { width: 46px; height: 46px; }
}
@media (max-width: 350px) {
  .pyap-crop-foot { align-items: stretch; flex-direction: column; }
  .pyap-crop-actions { justify-content: stretch; }
  .pyap-crop-actions button { flex: 1; }
}