.yg-avatar{
  position: relative;
  display: inline-flex;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  outline: none;
  width: var(--yg-avatar-size, 100px);
  height: var(--yg-avatar-size, 100px);
}
.yg-avatar-img{
  display:block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Default (no photo): smaller camera icon, not cropped */
.yg-avatar.is-default .yg-avatar-img{
  object-fit: contain;
  padding: 18%;
  background: #f3f4f6;
}
.yg-avatar.is-default{
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}

/* Hover/focus overlay — single centered label */
.yg-avatar-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,0.45);
  color:#fff !important;
  opacity:0;
  transition: opacity .18s ease;
  pointer-events:none;       /* overlay is visual only; clicks go to the file input */
  z-index:1;
}
.yg-avatar.is-editable:focus .yg-avatar-overlay,
.yg-avatar.is-editable:hover .yg-avatar-overlay{
  opacity:1;
}

.yg-avatar-overlay-text{
  font-size:12px;
  line-height:1;
  font-weight:600;
  letter-spacing:.2px;
  color:#fff !important;
}

/* File input: off-screen, no hover tooltips; we trigger it via JS */
.yg-avatar-file{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  left:-9999px;          /* off-screen */
  top:auto;
  cursor:pointer;
  border:0;
  margin:0;
  padding:0;
}

/* Remove button kept hidden (we can expose elsewhere if needed) */
.yg-avatar-remove{
  position:absolute;
  bottom:6px;
  left:50%;
  transform: translateX(-50%);
  background:#fff;
  border:1px solid rgba(0,0,0,.1);
  border-radius:12px;
  font-size:11px;
  padding:2px 8px;
  display:none !important;
}

/* Toast */
.yg-avatar-toast{
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  background: rgba(0,0,0,.8);
  color:#fff;
  padding:8px 12px;
  border-radius: 8px;
  opacity:0;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 999999;
  font-size: 13px;
}
.yg-avatar-toast.show{ opacity:1; }
.yg-avatar-undo{
  margin-left:10px;
  font-size:12px;
  background:transparent;
  border:1px solid rgba(255,255,255,.7);
  color:#fff;
  border-radius:6px;
  padding:2px 8px;
}

/* Crop modal */
.yg-crop-overlay{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.6);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 999998;
}
.yg-crop-modal{
  background:#111;
  color:#fff;
  width: min(92vw, 520px);
  padding:16px;
  border-radius:12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
.yg-crop-frame{
  position:relative;
  width: 90%;
  padding-top: 90%;
  margin: 0 auto 12px;
  background:#222;
  border-radius: 12px;
  overflow: hidden;
}
.yg-crop-frame .yg-crop-img{
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;
  max-width:none;
}
.yg-crop-controls{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}
.yg-crop-controls input[type=range]{ flex: 1; }
.yg-btn{
  background:#fff;
  color:#111;
  border:none;
  border-radius:8px;
  padding:8px 12px;
  font-weight:600;
}
.yg-btn.yg-cancel{ background:#444; color:#fff; }

/* Mobile-friendly crop controls */
@media (pointer: coarse) {
  .yg-crop-controls {
    gap: 16px;
  }
  .yg-crop-controls input[type="range"] {
    height: 36px;
    min-width: 60%;
    touch-action: none;
  }
  /* Slider track/thumb (WebKit) */
  .yg-crop-controls input[type="range"]::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.35);
  }
  .yg-crop-controls input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    margin-top: -10px; /* center on 8px track */
    background: #fff;
    border: 0;
  }
  /* Slider (Firefox) */
  .yg-crop-controls input[type="range"]::-moz-range-track {
    height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.35);
  }
  .yg-crop-controls input[type="range"]::-moz-range-thumb {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: #fff;
  }

  .yg-zoom-btn {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 0;
    font-size: 22px;
    font-weight: 700;
    background: #fff;
    color: #111;
  }
}

/* Mobile-friendly crop controls */
@media (pointer: coarse) {
  .yg-crop-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;                /* allow 2nd row for actions */
    gap: 16px;
    margin-top: 8px;
  }

  /* Zoom controls row */
  .yg-zoom-btn {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 0;
    font-size: 22px;
    font-weight: 700;
    background: #fff !important;    /* force white */
    color: #111 !important;
    flex: 0 0 auto;                  /* stay compact */
  }
  .yg-crop-controls input[type="range"] {
    flex: 1 1 auto;                  /* grow between + and – */
    min-width: 50%;
    height: 36px;
    touch-action: none;
  }
  /* Slider track/thumb (WebKit) */
  .yg-crop-controls input[type="range"]::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.35);
  }
  .yg-crop-controls input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    margin-top: -10px;               /* center on 8px track */
    background: #fff;
    border: 0;
  }
  /* Slider (Firefox) */
  .yg-crop-controls input[type="range"]::-moz-range-track {
    height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.35);
  }
  .yg-crop-controls input[type="range"]::-moz-range-thumb {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: #fff;
  }

  /* Action buttons on their own row */
  .yg-crop-controls .yg-btn {
    flex: 1 1 48%;                   /* two buttons side-by-side on new row */
    margin-top: 8px;
    font-size: 16px;
    padding: 10px 14px;
  }
}

/* Mobile-friendly crop controls (slider + actions) */
@media (pointer: coarse) {
  .yg-crop-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;           /* actions to second row */
    gap: 16px;
    margin-top: 8px;
    text-align: center;
  }

  /* Big, easy slider */
  .yg-crop-controls input[type="range"] {
    flex: 1 1 100%;
    min-width: 70%;
    height: 36px;
    touch-action: none;
  }
  .yg-crop-controls input[type="range"]::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.35);
  }
  .yg-crop-controls input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    margin-top: -10px;
    background: #fff;
    border: 0;
  }
  .yg-crop-controls input[type="range"]::-moz-range-track {
    height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.35);
  }
  .yg-crop-controls input[type="range"]::-moz-range-thumb {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: #fff;
  }

  /* Action buttons on their own row */
  .yg-crop-controls .yg-btn {
    flex: 1 1 48%;
    margin-top: 8px;
    font-size: 16px;
    padding: 10px 14px;
  }
}