.photo-cropper-modal{
  padding:0;
  border:0;
  background:transparent;
  color:#f3f5f9;
}

.photo-cropper-modal::backdrop{
  background:rgba(0,0,0,.72);
}

.photo-cropper-panel{
  width:min(94vw, 760px);
  background:#101217;
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
  box-shadow:0 22px 56px rgba(0,0,0,.62);
  overflow:hidden;
}

.photo-cropper-header,
.photo-cropper-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,.12);
}

.photo-cropper-footer{
  border-top:1px solid rgba(255,255,255,.12);
  border-bottom:0;
  flex-wrap:wrap;
}

.photo-cropper-title{
  margin:0;
  color:#ffd500;
  font-size:18px;
  font-weight:900;
  text-transform:uppercase;
}

.photo-cropper-body{
  padding:16px;
}

.photo-cropper-stage{
  position:relative;
  width:min(100%, 620px);
  height:min(68vh, 520px);
  min-height:330px;
  margin:0 auto;
  overflow:hidden;
  background:#050608;
  border:1px solid rgba(255,255,255,.2);
  border-radius:10px;
  touch-action:none;
}

.photo-cropper-image{
  position:absolute;
  left:50%;
  top:50%;
  max-width:none;
  user-select:none;
  -webkit-user-drag:none;
  transform-origin:center center;
}

.photo-cropper-mask{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:rgba(0,0,0,.45);
}

.photo-cropper-frame{
  position:absolute;
  left:50%;
  top:50%;
  width:min(72%, 360px);
  aspect-ratio:1;
  transform:translate(-50%, -50%);
  border:2px solid #ffd500;
  box-shadow:0 0 0 999px rgba(0,0,0,.48);
  pointer-events:none;
}

.photo-cropper-frame::before,
.photo-cropper-frame::after{
  content:"";
  position:absolute;
  inset:33.333% 0 auto;
  border-top:1px solid rgba(255,255,255,.35);
}

.photo-cropper-frame::after{
  inset:auto 0 33.333%;
}

.photo-cropper-grid{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.photo-cropper-grid::before,
.photo-cropper-grid::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  border-left:1px solid rgba(255,255,255,.35);
}

.photo-cropper-grid::before{ left:33.333%; }
.photo-cropper-grid::after{ left:66.666%; }

.photo-cropper-controls{
  display:grid;
  grid-template-columns:auto minmax(180px, 1fr) auto;
  gap:10px;
  align-items:center;
  width:min(100%, 440px);
}

.photo-cropper-controls label{
  color:#ffd500;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
}

.photo-cropper-controls input{
  width:100%;
}

.photo-cropper-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-left:auto;
}

.photo-cropper-button{
  border:1px solid #b79500;
  border-radius:10px;
  padding:9px 13px;
  background:#171a20;
  color:#ffd500;
  font-weight:900;
  cursor:pointer;
}

.photo-cropper-button.primary{
  background:linear-gradient(180deg,#ffe36c,#ffc400);
  color:#111;
}

@media (max-width: 640px){
  .photo-cropper-stage{
    height:min(62vh, 430px);
    min-height:280px;
  }

  .photo-cropper-controls,
  .photo-cropper-actions{
    width:100%;
    margin-left:0;
  }

  .photo-cropper-actions .photo-cropper-button{
    flex:1;
  }
}