.dropzone,
.avatar-drop,
[data-file-drop]{
  position:relative;
}

.avatar-drop{
  border:2px dashed #9ccfd0;
  border-radius:12px;
  min-height:118px;
  display:grid;
  place-items:center;
  text-align:center;
  background:#fbfdff;
  color:#0f172a;
  padding:16px;
  cursor:pointer;
  transition:border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.avatar-drop input[type="file"]{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer;
}

.avatar-drop span,
.dropzone span,
[data-file-drop] [data-drop-text]{
  font-weight:600;
}

.dropzone.dragover,
.avatar-drop.dragover,
[data-file-drop].dragover{
  border-color:#00857f!important;
  background:#ecfdf5!important;
  box-shadow:0 0 0 4px rgba(0,133,127,.12);
}

.dropzone.has-file,
.avatar-drop.has-file,
[data-file-drop].has-file{
  border-color:#00857f!important;
  background:#f0fdfa!important;
}

.dropzone.drop-error,
.avatar-drop.drop-error,
[data-file-drop].drop-error{
  border-color:#dc2626!important;
  background:#fff1f2!important;
}

.dropzone + .btn,
.avatar-drop + .btn,
.dropzone + button,
.avatar-drop + button{
  margin-top:8px;
}