/* =========================================================
   CSS БЛОКА: МОДАЛЬНЫЕ ОКНА — PREMIUM DARK
   ========================================================= */

.modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:1000;
  padding:20px;
  overflow:hidden;
}

.modal.open{
  display:block;
}

/* затемнение страницы */
.modal__backdrop{
  position:absolute;
  inset:0;
  background:
    radial-gradient(
      circle at 50% 35%,
      rgba(255,255,255,.035),
      transparent 35%
    ),
    rgba(4,6,10,.76);

  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);

  animation:modalBackdropIn .25s ease both;
}

/* само окно */
.modal__dialog{
  position:absolute;
  left:50%;
  top:50%;

  transform:translate(-50%,-48%) scale(.96);

  width:min(540px,calc(100% - 32px));
  max-height:min(88vh,760px);

  overflow-x:hidden;
  overflow-y:auto;

  padding:30px;

  background:
    linear-gradient(
      145deg,
      rgba(25,28,35,.98),
      rgba(13,15,20,.98)
    );

  border:1px solid rgba(255,255,255,.09);
  border-radius:28px;

  box-shadow:
    0 35px 100px rgba(0,0,0,.55),
    0 10px 30px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.05);

  color:#fff;

  opacity:0;

  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.16) transparent;
}

/* плавное появление */
.modal.open .modal__dialog{
  animation:modalDialogIn .36s cubic-bezier(.22,1,.36,1) forwards;
}

@keyframes modalDialogIn{
  from{
    opacity:0;
    transform:translate(-50%,-47%) scale(.96);
  }

  to{
    opacity:1;
    transform:translate(-50%,-50%) scale(1);
  }
}

@keyframes modalBackdropIn{
  from{
    opacity:0;
  }

  to{
    opacity:1;
  }
}

/* скролл */
.modal__dialog::-webkit-scrollbar{
  width:5px;
}

.modal__dialog::-webkit-scrollbar-track{
  background:transparent;
}

.modal__dialog::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.14);
  border-radius:20px;
}

/* скрытые кнопки */
.modal__dialog button[hidden]{
  display:none!important;
}

/* кнопка закрытия */
.modal__close{
  position:absolute;
right: 4px;
    top: 5px;

  display:grid;
  place-items:center;

  width:38px;
  height:38px;

  padding:0;

  border:1px solid transparent;
  border-radius:50%;

  background:rgba(255,255,255,.035);

  color:#7f8796;

  font-size:25px;
  font-weight:300;
  line-height:1;

  cursor:pointer;

  transition:
    color .2s ease,
    background .2s ease,
    border-color .2s ease,
    transform .2s ease;
}

.modal__close:hover{
  color:#fff;
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.08);
  transform:rotate(4deg);
}

.modal__close:active{
  transform:scale(.92);
}

/* заголовок */
.modal h3{
  margin:2px 45px 26px;

  font:700 clamp(22px,3vw,27px) "Manrope",sans-serif;
  line-height:1.15;

  text-align:center;

  color:#f7f8fa;

  letter-spacing:-.035em;
}

/* форма */
.form-grid{
  display:grid;
  gap:18px;
}

/* поле */
.field{
  display:grid;
  gap:8px;
}

/* подпись */
.field label{
  padding-left:2px;

  color:#858d9c;

  font-size:10px;
  font-weight:700;

  letter-spacing:.12em;
  text-transform:uppercase;

  transition:color .2s ease;
}

/* input / textarea / select */
.field input,
.field select,
.field textarea{
  box-sizing:border-box;

  width:100%;

  border:1px solid rgba(255,255,255,.08);
  outline:none;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.035),
      rgba(255,255,255,.018)
    );

  color:#f4f5f7;

  border-radius:15px;

  padding:14px 15px;

  font:500 14px/1.5 "Manrope",sans-serif;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025);

  transition:
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease,
    transform .2s ease;
}

.field input:hover,
.field select:hover,
.field textarea:hover{
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.045);
}

.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:rgba(255,255,255,.28);

  background:rgba(255,255,255,.055);

  box-shadow:
    0 0 0 4px rgba(255,255,255,.035),
    inset 0 1px 0 rgba(255,255,255,.035);
}

.field:focus-within label{
  color:#c9ced7;
}

.field input::placeholder,
.field textarea::placeholder{
  color:#555d69;
}

.field textarea{
  min-height:110px;
  resize:vertical;
}

/* select */
.field select{
  cursor:pointer;
}

.field select option{
  color:#fff;
  background:#151820;
}

/* действия снизу */
.form-actions{
  display:flex;
  justify-content:flex-end;
  align-items:center;

  gap:10px;

  margin-top:8px;
  padding-top:18px;

  border-top:1px solid rgba(255,255,255,.055);
}

/* кнопки формы */
.form-actions button{
  min-height:42px;

  padding:0 18px;

  border:1px solid rgba(255,255,255,.08);
  border-radius:13px;

  background:rgba(255,255,255,.045);

  color:#bec4cf;

  font:700 12px "Manrope",sans-serif;

  cursor:pointer;

  transition:
    transform .2s ease,
    color .2s ease,
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.form-actions button:hover{
  color:#fff;

  background:rgba(255,255,255,.085);
  border-color:rgba(255,255,255,.13);

  transform:translateY(-1px);
}

/* последняя кнопка предполагается основной */
.form-actions button:last-child{
  color:#111;

  background:#f5f5f3;

  border-color:#f5f5f3;

  box-shadow:
    0 8px 25px rgba(0,0,0,.22);
}

.form-actions button:last-child:hover{
  background:#fff;
  border-color:#fff;

  box-shadow:
    0 12px 30px rgba(0,0,0,.3);

  transform:translateY(-2px);
}

.form-actions button:active{
  transform:scale(.97);
}


/* =========================================================
   ПЛАНШЕТ
   ========================================================= */

@media(max-width:900px){

  .modal{
    padding:16px;
  }

  .modal__dialog{
    width:min(520px,calc(100% - 28px));
    padding:26px;
    border-radius:24px;
  }
}


/* =========================================================
   ТЕЛЕФОН
   ========================================================= */

@media(max-width:650px){

  .modal{
    padding:12px;
  }

  .modal__backdrop{
    backdrop-filter:blur(9px);
    -webkit-backdrop-filter:blur(9px);
  }

  .modal__dialog{
    top:50%;
    bottom:auto;
    left:50%;

    width:min(620px,calc(100% - 24px));
    max-height:calc(100dvh - 24px);

    padding:
      24px
      18px
      max(18px,env(safe-area-inset-bottom));

    border-radius:22px;

    transform:translate(-50%,-46%) scale(.97);
  }

  .modal.open .modal__dialog{
    animation:modalDialogMobileIn .36s cubic-bezier(.22,1,.36,1) forwards;
  }

  @keyframes modalDialogMobileIn{
    from{
      opacity:0;
      transform:translate(-50%,-46%) scale(.97);
    }

    to{
      opacity:1;
      transform:translate(-50%,-50%) scale(1);
    }
  }

  .modal__dialog::before{
    display:none;
  }

  .modal__close{
    top:16px;
    right:14px;

    width:36px;
    height:36px;
  }

  .modal h3{
    margin: 0 -3px 24px 0;

    text-align:center;

    font-size:22px;
  }

  .form-grid{
    gap:15px;
  }

  .field input,
  .field select,
  .field textarea{
    min-height:48px;
    padding:13px 14px;

    border-radius:14px;

    font-size:16px;
  }

  .field textarea{
    min-height:105px;
    font-size: 13px;
  }

  .form-actions{
    display:grid;
    grid-template-columns:1fr;

    gap:8px;

    padding-top:16px;
  }

  .form-actions button{
    width:100%;
    min-height:46px;

    padding:0 12px;

    border-radius:14px;
  }
}
.avatar{
  position:relative;
  overflow:hidden;
  cursor:pointer;
  background-size:cover;
  background-position:center;
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    filter .2s ease;
}

.avatar:hover{
  transform:scale(1.04);
  filter:brightness(.85);
  box-shadow:0 0 0 3px rgba(255,255,255,.08);
}

.avatar::after{
  content:"";
  position:absolute;
  inset:0;

  display:grid;
  place-items:center;

  background:rgba(0,0,0,.35);
  color:#fff;

  font-size:18px;

  opacity:0;

  transition:opacity .2s ease;
}

.avatar:hover::after{
  opacity:1;
}

/* =========================================================
   ФОН ПРИЛОЖЕНИЯ
   ========================================================= */

.profile-background-field{
  gap:12px;
}

.profile-background-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;

  padding:14px 2px;
}

.profile-background-head > div{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.profile-background-head strong{
  color:#f2f3f5;
  font-size:14px;
  font-weight:600;
}

.profile-background-head small{
  color:#777f8c;
  font-size:12px;
}


/* =========================================================
   IOS SWITCH
   ========================================================= */

.profile-switch{
  position:relative;

  display:inline-flex;

  width:52px;
  height:30px;

  flex:0 0 52px;

  cursor:pointer;
}

.profile-switch input{
  position:absolute;

  width:1px;
  height:1px;

  opacity:0;
  pointer-events:none;
}

.profile-switch__slider{
  position:absolute;
  inset:0;

  border:1px solid rgba(255,255,255,.09);

  border-radius:999px;

  background:#292d35;

  box-shadow:
    inset 0 1px 3px rgba(0,0,0,.35);

  transition:
    background .28s cubic-bezier(.4,0,.2,1),
    border-color .28s ease;
}

.profile-switch__slider::before{
  content:"";

  position:absolute;

  width:24px;
  height:24px;

  left:2px;
  top:2px;

  border-radius:50%;

  background:#fff;

  box-shadow:
    0 2px 8px rgba(0,0,0,.35);

  transition:
    transform .28s cubic-bezier(.4,0,.2,1);
}


/* ВКЛЮЧЕНО */

.profile-switch input:checked
+ .profile-switch__slider{

  background:#34c759;

  border-color:#34c759;
}

.profile-switch input:checked
+ .profile-switch__slider::before{

  transform:translateX(22px);
}


/* НАВЕДЕНИЕ */

.profile-switch:hover
.profile-switch__slider{
  filter:brightness(1.08);
}


/* =========================================================
   ВЫБОР ФОНА
   ========================================================= */

.profile-background-picker{
  width:100%;

  overflow:hidden;

  animation:
    profileBackgroundPickerIn
    .25s ease both;
}

.profile-background-picker[hidden]{
  display:none!important;
}

.profile-background-select{
  width:100%;
  min-height:46px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;

  background:rgba(255,255,255,.035);

  color:#d7dbe3;

  cursor:pointer;

  transition:
    background .2s ease,
    border-color .2s ease,
    transform .2s ease;
}

.profile-background-select:hover{
  background:rgba(255,255,255,.07);

  border-color:
    rgba(255,255,255,.14);

  transform:translateY(-1px);
}

@keyframes profileBackgroundPickerIn{

  from{
    opacity:0;
    transform:translateY(-5px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }

}