/* V107 - Staff photo crop editor only. No change to customer-facing photos. */
.m56-dialog .m56-panel{
  display:block!important;
  width:100%!important;
  max-width:520px!important;
  min-width:0!important;
  margin:0 auto!important;
  box-sizing:border-box!important;
}
.m56-dialog .m56-stage{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  height:auto!important;
  max-width:none!important;
  flex:none!important;
}
.m56-dialog .m56-pair{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)!important;
  column-gap:14px!important;
  align-items:start!important;
}
.m56-dialog .m56-avatar{
  width:100%!important;
  max-width:192px!important;
  height:auto!important;
  aspect-ratio:1 / 1!important;
  border-radius:50%!important;
}
.m56-dialog .m56-home{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  height:auto!important;
  background:#EEF2E8!important;
}
.m56-dialog :is(.m56-avatar,.m56-home,.m56-stage)>img{
  position:absolute!important;
  width:100%!important;
  height:100%!important;
  inset:0!important;
  min-width:0!important;
  max-width:none!important;
  object-fit:cover!important;
}
@media (max-width:390px){
  .m56-dialog .m56-pair{column-gap:12px!important;}
}
/* Narrow staff screens: don't squeeze the two crop previews into tiny side-by-side cells. */
@media(max-width:580px){
  .m56-dialog .m56-pair{
    grid-template-columns:minmax(0,1fr)!important;
    row-gap:16px!important;
  }
  .m56-dialog .m56-avatar{
    width:min(100%,240px)!important;
    max-width:240px!important;
  }
  .m56-dialog .m56-home{width:100%!important;max-width:none!important;}
}