/* =========================================================
   ФарФор Tools — Страницы авторизации / регистрации
   ========================================================= */

/* ═══════════ BODY ═══════════ */
.auth-body{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 20px;
  background:var(--bg);
  position:relative;
  overflow-x:hidden;
}

.auth-decor{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(700px 500px at 15% 20%, rgba(124,58,237,.16), transparent 60%),
    radial-gradient(600px 500px at 85% 80%, rgba(168,139,250,.14), transparent 60%),
    radial-gradient(500px 400px at 50% 50%, rgba(139,92,246,.06), transparent 70%);
  animation:authFloat 14s ease-in-out infinite alternate;
}
@keyframes authFloat{
  from{transform:translate(0,0) scale(1)}
  to{transform:translate(-10px,-14px) scale(1.05)}
}

/* ═══════════ WRAP ═══════════ */
.auth-wrap{
  position:relative;
  z-index:1;
  width:100%;
  max-width:440px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  animation:authIn .6s cubic-bezier(.34,1.2,.64,1) both;
}
@keyframes authIn{
  from{opacity:0;transform:translateY(24px) scale(.98)}
  to{opacity:1;transform:none}
}

/* ═══════════ КАРТОЧКА ═══════════ */
.auth-card{
  width:100%;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:26px;
  padding:38px 34px 30px;
  box-shadow:var(--shadow-lg);
  position:relative;
  overflow:hidden;
}
.auth-card-wide{max-width:560px;padding:38px 34px 30px}

.auth-card::before{
  content:'';
  position:absolute;
  top:-60px;
  right:-60px;
  width:200px;
  height:200px;
  border-radius:50%;
  background:radial-gradient(circle,var(--brand-400),transparent 70%);
  opacity:.16;
  pointer-events:none;
}

/* ═══════════════════════════════════════════
   ЛОГОТИП — КРУГЛЫЙ, БЕЗ ФОНА
   ═══════════════════════════════════════════ */
.auth-logo{
  position:relative;
  width:88px;
  height:88px;
  margin:0 auto 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:none;
  box-shadow:none;
  animation:authLogo 3s ease-in-out infinite;
}

.auth-logo img{
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
  display:block;
  filter:drop-shadow(0 10px 26px rgba(124,58,237,.5));
  position:relative;
  z-index:1;
}

.auth-logo::before{
  content:'';
  position:absolute;
  inset:-18px;
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(124,58,237,.55) 0%,
    rgba(168,139,250,.25) 45%,
    transparent 70%);
  filter:blur(20px);
  animation:authLogoGlow 3s ease-in-out infinite;
  z-index:0;
  pointer-events:none;
}

@keyframes authLogo{
  0%, 100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}
@keyframes authLogoGlow{
  0%, 100%{transform:scale(1);opacity:.7}
  50%{transform:scale(1.12);opacity:1}
}

/* ═══════════ ЗАГОЛОВКИ ═══════════ */
.auth-title{
  font-family:'Manrope';
  font-size:26px;
  font-weight:800;
  text-align:center;
  margin:0 0 4px;
  letter-spacing:-.5px;
}
.auth-sub{
  text-align:center;
  color:var(--text-mute);
  font-size:13.5px;
  margin:0 0 26px;
}

/* ═══════════ ФОРМА ═══════════ */
.auth-form{display:flex;flex-direction:column;gap:0}

.auth-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:4px 0 18px;
  font-size:13px;
}

.auth-link{
  color:var(--brand-600);
  font-weight:600;
  transition:color var(--trans-fast);
}
.auth-link:hover{color:var(--brand-800)}
.auth-link.small{
  font-size:12.5px;
  font-weight:500;
  color:var(--text-mute);
}
.auth-link.small:hover{color:var(--brand-600)}

.auth-submit{
  width:100%;
  margin-top:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.auth-submit .icon{
  color:#fff;
}

.auth-divider{
  position:relative;
  text-align:center;
  margin:22px 0 16px;
}
.auth-divider::before{
  content:'';
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:1px;
  background:var(--border);
}
.auth-divider span{
  position:relative;
  background:var(--bg-card);
  padding:0 14px;
  font-size:12px;
  color:var(--text-mute);
  text-transform:uppercase;
  letter-spacing:1px;
}

.auth-bottom{
  text-align:center;
  font-size:13.5px;
  color:var(--text-soft);
}
.auth-bottom p{margin:6px 0}

/* ═══════════ ОШИБКИ / УСПЕХ ═══════════ */
.auth-error{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:12px;
  background:var(--danger-soft);
  color:var(--danger);
  font-size:13.5px;
  font-weight:500;
  margin-bottom:18px;
  animation:authShake .4s;
  border-left:3px solid var(--danger);
}
@keyframes authShake{
  0%, 100%{transform:translateX(0)}
  25%{transform:translateX(-6px)}
  75%{transform:translateX(6px)}
}

.auth-success{
  text-align:center;
  padding:20px 0;
  animation:authIn .5s both;
}
.auth-success h2{
  font-family:'Manrope';
  font-size:22px;
  font-weight:800;
  margin:16px 0 8px;
  color:var(--success);
}
.auth-success p{
  color:var(--text-soft);
  font-size:14.5px;
  margin:0 0 22px;
}

.auth-terms{
  text-align:center;
  font-size:12px;
  color:var(--text-mute);
  margin:14px 0 0;
}

.auth-back{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--text-mute);
  font-size:13px;
  transition:color var(--trans-fast);
}
.auth-back:hover{color:var(--brand-600)}
.auth-back .icon{
  transform:rotate(90deg);
}

/* ═══════════════════════════════════════════
   РЕГИСТРАЦИЯ ЛИДЕРА — баннер приглашения
   ═══════════════════════════════════════════ */
.invite-banner{
  display:flex;
  gap:14px;
  align-items:center;
  padding:14px 18px;
  background:linear-gradient(135deg, rgba(124,58,237,.10), rgba(168,139,250,.05));
  border:1px solid var(--brand-200);
  border-radius:14px;
  margin-bottom:22px;
  animation:fadeInUp .5s ease both;
}
[data-theme="dark"] .invite-banner{border-color:var(--brand-800)}

.invite-banner-icon{
  width:44px;
  height:44px;
  border-radius:12px;
  background:linear-gradient(135deg,var(--brand-600),var(--brand-500));
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  flex-shrink:0;
  box-shadow:var(--shadow-brand);
}
.invite-banner-icon .icon{color:#fff}

.invite-banner-title{
  font-weight:700;
  font-size:14px;
  color:var(--text);
  margin-bottom:2px;
}
.invite-banner-meta{
  font-size:12px;
  color:var(--text-mute);
}

/* ═══════════════════════════════════════════
   PENDING — экран ожидания
   ═══════════════════════════════════════════ */
.pending-icon{
  position:relative;
  width:110px;
  height:110px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
}
.pending-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:3px solid transparent;
  border-top-color:var(--brand-500);
  border-right-color:var(--brand-500);
  animation:authSpin 1.6s linear infinite;
}
.pending-check{
  width:86px;
  height:86px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--success),#059669);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 30px rgba(16,185,129,.4);
  animation:authPulseSuccess 2s infinite;
}
.pending-check .icon,
.pending-check svg{
  color:#fff;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.2));
}
@keyframes authPulseSuccess{
  0%, 100%{box-shadow:0 10px 30px rgba(16,185,129,.4)}
  50%{box-shadow:0 10px 40px rgba(16,185,129,.7)}
}
@keyframes authSpin{to{transform:rotate(360deg)}}

/* ═══════════ АДАПТИВ ═══════════ */
@media (max-width:520px){
  .auth-card{
    padding:30px 22px 24px;
    border-radius:22px;
  }
  .auth-title{font-size:22px}
  .auth-logo{width:72px;height:72px;margin-bottom:16px}
  .auth-logo::before{inset:-14px}
  .invite-banner{padding:12px 14px;gap:10px}
  .invite-banner-icon{width:38px;height:38px}
  .invite-banner-title{font-size:13px}
  .pending-icon{width:90px;height:90px}
  .pending-check{width:70px;height:70px}
}