/* Auth modal */
.auth-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;z-index:1000}
.auth-backdrop.active{display:flex}
.auth-modal{width:min(520px,92vw);background:#fff;border-radius:22px;box-shadow:0 10px 40px rgba(0,0,0,.25);overflow:hidden}
.auth-modal header{padding:16px 22px;background:var(--blue,#0085FF);color:#fff;display:flex;align-items:center;justify-content:space-between}
.auth-modal header h3{font-size:1.4rem;font-weight:600}
.auth-modal .close{cursor:pointer;font-size:1.2rem;opacity:.9}
.auth-modal .content{padding:18px 22px;display:flex;flex-direction:column;gap:12px}
.auth-modal label{font-size:1.5rem;color:#333}
.auth-modal input{height:42px;border-radius:40px;border:1px solid #e5e5e5;background:#F5F5F5;padding:0 14px;font-size:1rem}
.auth-modal button{height:40px;border-radius:40px;border:1px solid var(--blue,#0085FF);color:var(--blue,#0085FF);background:#fff;cursor:pointer;letter-spacing:.5pxж; padding:10px;}
.auth-modal button.primary{background:var(--blue,#0085FF);color:#fff}
.auth-modal .row{display:flex;gap:10px;align-items:center}
.auth-modal .hint{font-size:.9rem;color:#666}
.auth-modal .sep{display:flex;align-items:center;gap:10px;margin:10px 0}
.auth-modal .sep:before,.auth-modal .sep:after{content:"";height:1px;flex:1;background:#eee}
.auth-modal .error{color:#d00;font-size:.9rem;display:none}
.auth-modal .error.active{display:block}
.auth-modal .success{color:green;font-size:.95rem;display:none}
.auth-modal .success.active{display:block}
.auth-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none!important;
  font-size: 28px;
  line-height: 1;
  color: #666;
  cursor: pointer;
}
.auth-close:hover {
  color: #000;
}
.auth-modal {
  position: relative; /* чтобы position:absolute у крестика работал */
}

/* --- Улучшения модалки авторизации --- */

/* уменьшаем синий блок */
.auth-modal header {
  padding: 12px 18px;
  font-size: 1.1rem;
}

/* увеличиваем основной контент */
.auth-modal .content {
  padding: 24px 26px;
  gap: 18px;
}

/* делаем заголовки способов входа заметнее */
.auth-modal .content h4 {
  font-size: 1.2rem;
  font-weight: 600;
  color: #222;
  margin: 10px 0 6px;
}

/* кнопки больше и контрастнее */
.auth-modal button {
  height: 46px;
  font-size: 1rem;
  padding: 0 18px;
  border-radius: 30px;
}

/* адаптивность */
@media (max-width: 480px) {
  .auth-modal {
    width: 92vw;
  }
  .auth-modal .content {
    padding: 18px;
    gap: 14px;
  }
 
}

.auth-close{
  font-size: 2rem!important;
}
/* --- Адаптив для телефонов --- */
@media (max-width: 480px) {
  .auth-modal {
    width: 96vw;              /* почти вся ширина */
    border-radius: 16px;      /* чуть компактнее скругления */
    max-height: 90vh;         /* не выше экрана */
    overflow-y: auto;         /* скролл если много контента */
    animation: slideUp 0.3s ease; /* анимация появления снизу */
  }

  .auth-modal header {
    padding: 10px 14px;
    font-size: 1rem;
  }

  .auth-modal .content {
    padding: 14px;
    gap: 10px;
  }

  .auth-modal label {
    font-size: 2rem;
  }

  .auth-modal input {
    height: 38px;
    font-size: 0.95rem;
  }

  .auth-modal button {
    height: 40px;
    font-size: 0.95rem;
    padding: 0 12px;
  }

  .auth-close {
    font-size: 1.6rem !important;
    top: 8px;
    right: 8px;
  }
}

/* --- Анимация появления --- */
@keyframes slideUp {
  from {
    transform: translateY(40px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}