.editor-photos .editor-photos__avatar {
  display: block;
  margin: 0 auto;
}

.editor-photos.editor-photos--empty .editor-photos__avatar--empty {
  width: calc(100% - 60px);
  max-width: 440px;
  height: 320px;
  aspect-ratio: auto;
}

.editor-photos .vue-avatar-editor__file-trigger {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 24px 20px;
  border: 2px dashed #b7d4fc;
  border-radius: 24px;
  background: linear-gradient(145deg, #f5f9ff, #edf5ff);
  color: #142748;
  -webkit-tap-highlight-color: transparent;
}

.editor-photos .vue-avatar-editor__file-trigger:active {
  background: #e5f0ff;
  border-color: #2877ff;
}

.editor-photos .vue-avatar-editor:focus-within .vue-avatar-editor__file-trigger {
  outline: 3px solid #2877ff;
  outline-offset: 4px;
}

.editor-photos .vue-avatar-editor__empty-icon {
  flex: none;
  width: 156px;
  height: 142px;
  margin-bottom: 20px;
  pointer-events: none;
}

.editor-photos .vue-avatar-editor__empty-title {
  display: block;
  font-family: Arial, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  pointer-events: none;
}

.editor-photos .vue-avatar-editor__empty-hint {
  display: block;
  max-width: 260px;
  margin-top: 10px;
  color: #61738e;
  font-family: Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
  pointer-events: none;
}

.editor-photos.editor-photos--empty .editor-photos__btn {
  margin-top: 24px;
}

@media (max-width: 359px) {
  .editor-photos.editor-photos--empty .editor-photos__avatar--empty { height: 300px; }
  .editor-photos .vue-avatar-editor__file-trigger { padding: 20px 16px; }
  .editor-photos .vue-avatar-editor__empty-title { font-size: 22px; }
  .editor-photos .vue-avatar-editor__empty-icon { width: 144px; height: 130px; }
}