/* V114 — Edit Profile modal. Geometry follows the reference AccountRight sheet
   (w-48 avatar, button-brand save, centered title). */

html.co-av-open,
html.co-av-open body {
  overflow: hidden;
}
html.co-av-open #app {
  visibility: hidden !important;
}

.co-av {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.32rem;
  background: rgba(0, 0, 0, 0.62);
}

.co-av *,
.co-av *:before,
.co-av *:after { box-sizing: border-box; }

.co-av__card {
  position: relative;
  width: 100%;
  max-width: 8.8rem;
  padding: 0.37213rem 0.37213rem 0.46516rem;
  border-radius: 0.2791rem;
  background: #232626;
  color: #fff;
  font-family: avertastd, avertastd-semibold, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.co-av__header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0.8rem;
  margin-bottom: 0.28rem;
}

.co-av__title {
  margin: 0;
  font-size: 0.46516rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}

.co-av__x {
  appearance: none;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 0.64rem;
  height: 0.64rem;
  border: 0;
  padding: 0;
  background: transparent;
  color: #849194;
  font-size: 0.56rem;
  line-height: 1;
  cursor: pointer;
}

.co-av__face-wrap {
  position: relative;
  width: 3.34917rem;
  height: 3.34917rem;
  margin: 0 auto;
  padding: 0.18606rem;
  border-radius: 50%;
  background: #3a4142;
  cursor: pointer;
}

.co-av__face {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}

.co-av__face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.co-av__edit-btn {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 0.59541rem;
  min-width: 2.38rem;
  padding: 0 0.2rem;
  border-radius: 0.18606rem;
  background-image: linear-gradient(90deg, #24ee89, #9fe871);
  box-shadow: 0 0 0.32rem rgba(35, 238, 136, 0.3), inset 0 -0.05333rem #1dca6a;
  color: #000;
  font-size: 0.2791rem;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
}

.co-av__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.16rem;
  margin: 0.28rem 0 0.08rem;
}

.co-av__cell {
  appearance: none;
  aspect-ratio: 1;
  border: 0.04rem solid transparent;
  border-radius: 50%;
  background: #3a4142;
  padding: 0.06rem;
  cursor: pointer;
}

.co-av__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.co-av__cell.is-on {
  border-color: #24ee89;
}

.co-av__label {
  margin: 0.37213rem 0 0.12rem;
  font-size: 0.32561rem;
  font-weight: 600;
}

.co-av__input {
  appearance: none;
  width: 100%;
  height: 1.11639rem;
  padding: 0 0.28rem;
  border: 0.02667rem solid #39404c;
  border-radius: 0.18606rem;
  background: #30353d;
  color: #fff;
  font-size: 0.37213rem;
  font-weight: 600;
  outline: none;
}

.co-av__input::placeholder {
  color: #849194;
  font-weight: 500;
}

.co-av__input:focus {
  border-color: #24ee89;
}

.co-av__hint {
  margin: 0.09303rem 0 0;
  font-size: 0.2791rem;
  font-weight: 400;
  color: #b3bec1;
  line-height: 1.35;
}

.co-av__err {
  min-height: 0.32rem;
  margin: 0.12rem 0 0;
  color: #ff5b5b;
  font-size: 0.2791rem;
  font-weight: 600;
  text-align: center;
}

.co-av__save {
  appearance: none;
  width: 100%;
  height: 1.11639rem;
  margin-top: 0.37213rem;
  border: 0;
  border-radius: 0.18606rem;
  background-image: linear-gradient(90deg, #24ee89, #9fe871);
  box-shadow: 0 0 0.32rem rgba(35, 238, 136, 0.3), inset 0 -0.05333rem #1dca6a;
  color: #000;
  font-size: 0.37213rem;
  font-weight: 800;
  cursor: pointer;
}

.co-av__save[disabled] {
  opacity: 0.55;
  pointer-events: none;
}

.co-av__save:active,
.co-av__cell:active,
.co-av__face-wrap:active {
  transform: scale(0.98);
}