/* ═══════════════════════════════════════════
   AUTH.CSS — Authentication screen styles
═══════════════════════════════════════════ */

/* ── SCREEN WRAPPER ── */
.auth-screen {
  position:fixed; inset:0; z-index:500;
  background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:32px 20px; overflow-y:auto;
}
.auth-screen.hidden { display:none; }

/* ── LOGO ── */
.auth-logo {
  font-family:'Syne',sans-serif; font-size:36px; font-weight:800;
  background:linear-gradient(135deg,#c084fc,#a855f7,#7c3aed);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  margin-bottom:4px; text-align:center;
}
.auth-tagline { font-size:14px; color:var(--t2); text-align:center; margin-bottom:32px; }

/* ── BODY (динамическая зона) ── */
#auth-body { width:100%; max-width:400px; z-index:1; }

/* ── SECTION TITLE ── */
.auth-section-title {
  font-family:'Syne',sans-serif; font-size:22px; font-weight:800;
  margin-bottom:4px; letter-spacing:-.02em;
}
.auth-hint { font-size:13px; color:var(--t2); margin-bottom:20px; line-height:1.5; }

/* ── BACK BUTTON ── */
.auth-back {
  display:flex; align-items:center; gap:6px; padding:0; margin-bottom:16px;
  border:none; background:transparent; color:var(--t2); font-size:13px;
  cursor:pointer; transition:color var(--tr);
}
.auth-back:hover { color:var(--ph); }

/* ── INPUT ── */
.auth-input {
  width:100%; background:var(--s2); border:1px solid var(--b);
  border-radius:var(--Rsm); padding:13px 16px;
  font-size:15px; outline:none; transition:border-color var(--tr);
  margin-bottom:10px; color:var(--t);
}
.auth-input:focus { border-color:var(--bp); }
.auth-input::placeholder { color:var(--t2); }

/* ── BUTTONS ── */
/* OPTIMIZED: removed heavy box-shadow */
.auth-btn-primary {
  width:100%; padding:14px; border-radius:var(--Rsm); border:none;
  background:linear-gradient(135deg,#a855f7,#7c3aed);
  color:#fff; font-size:15px; font-weight:600;
  cursor:pointer; transition:transform .15s,opacity .2s;
  display:flex; align-items:center; justify-content:center; gap:8px;
  text-decoration:none; margin-top:4px;
}
.auth-btn-primary:active { transform:scale(.97); }
.auth-btn-primary:hover  { opacity:.9; }

.auth-btn-email {
  width:100%; padding:13px; border-radius:var(--Rsm);
  border:1px solid var(--b); background:var(--s2);
  color:var(--t); font-size:14px; font-weight:500;
  cursor:pointer; transition:all var(--tr);
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.auth-btn-email:hover { border-color:var(--bp); background:var(--s3); }

/* Social buttons — используем SVG inline поэтому иконки не пропадают */
.auth-btn-social-tg {
  width:100%; padding:14px; border-radius:var(--Rsm); margin-bottom:10px;
  border:1px solid rgba(36,160,237,.3); background:rgba(36,160,237,.1);
  color:#24a0ed; font-size:14px; font-weight:500; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:10px;
  transition:all var(--tr);
}
.auth-btn-social-tg:hover  { background:rgba(36,160,237,.18); border-color:rgba(36,160,237,.5); }
.auth-btn-social-tg:active { transform:scale(.97); }

.auth-btn-social-vk {
  width:100%; padding:14px; border-radius:var(--Rsm); margin-bottom:10px;
  border:1px solid rgba(74,144,226,.3); background:rgba(74,144,226,.1);
  color:#4a90e2; font-size:14px; font-weight:500; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:10px;
  transition:all var(--tr);
}
.auth-btn-social-vk:hover  { background:rgba(74,144,226,.18); border-color:rgba(74,144,226,.5); }
.auth-btn-social-vk:active { transform:scale(.97); }

.auth-tg-big {
  background:linear-gradient(135deg,#1d93d2,#38b0e3) !important;
  border:none !important; color:#fff !important;
  font-size:15px !important; font-weight:600 !important;
}
.auth-vk-big {
  background:linear-gradient(135deg,#2b5faa,#4a90e2) !important;
  border:none !important; color:#fff !important;
  font-size:15px !important; font-weight:600 !important;
}
.auth-btn-vk-outline {
  width:100%; padding:13px; border-radius:var(--Rsm);
  border:1px solid rgba(74,144,226,.3); background:rgba(74,144,226,.08);
  color:#4a90e2; font-size:14px; font-weight:500; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:10px;
  text-decoration:none; transition:all var(--tr); margin-bottom:4px;
}
.auth-btn-vk-outline:hover { background:rgba(74,144,226,.16); }

/* ── DIVIDER ── */
.auth-divider {
  display:flex; align-items:center; gap:12px;
  margin:16px 0; color:var(--t2); font-size:12px;
}
.auth-divider::before,.auth-divider::after {
  content:''; flex:1; height:1px; background:var(--b);
}

/* ── REGISTER ROW ── */
.auth-register-row {
  text-align:center; font-size:13px; color:var(--t2);
  margin-top:14px; display:flex; align-items:center; justify-content:center; gap:4px;
}
.auth-link {
  background:transparent; border:none; color:var(--ph);
  font-size:13px; cursor:pointer; padding:0;
  transition:opacity .2s;
}
.auth-link:hover { opacity:.8; text-decoration:underline; }

/* ── ERROR ── */
.auth-error {
  background:rgba(248,113,113,.12); border:1px solid rgba(248,113,113,.25);
  border-radius:var(--Rxs); padding:10px 14px;
  font-size:13px; color:var(--r); margin-bottom:10px; margin-top:2px;
}
@keyframes authShake {
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-6px);}
  40%{transform:translateX(6px);}
  60%{transform:translateX(-4px);}
  80%{transform:translateX(4px);}
}

/* ── RATE INFO ── */
.auth-rate-info {
  background:rgba(251,191,36,.1); border:1px solid rgba(251,191,36,.25);
  border-radius:var(--Rxs); padding:8px 12px;
  font-size:12px; color:var(--gold); margin-bottom:10px;
}

/* ── OTP INPUTS ── */
.auth-otp-inputs {
  display:flex; gap:8px; justify-content:center; margin-bottom:14px;
}
.auth-otp-digit {
  width:44px; height:52px; border-radius:10px;
  background:var(--s2); border:1px solid var(--b);
  text-align:center; font-family:'Syne',sans-serif;
  font-size:22px; font-weight:700; color:var(--t);
  outline:none; transition:border-color var(--tr);
}
.auth-otp-digit:focus { border-color:var(--bp); background:var(--s3); }

/* ── OTP TIMER ── */
.auth-resend-row {
  text-align:center; font-size:13px; color:var(--t2); margin-top:12px;
}

/* ── DEMO OTP BANNER ── */
.auth-demo-banner {
  background:rgba(168,85,247,.1); border:1px solid var(--bp);
  border-radius:var(--Rxs); padding:10px 14px;
  font-size:13px; color:var(--ph); margin-bottom:12px;
}

/* ── PENDING INDICATOR ── */
.auth-pending-indicator {
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:16px; border-radius:var(--Rsm);
  background:var(--s2); border:1px solid var(--b);
  margin:14px 0; font-size:14px; color:var(--t2);
}.auth-spinner {
  width:20px; height:20px; border-radius:50%;
  border:2px solid rgba(168,85,247,.3);
  border-top-color:var(--ph);
  animation:spin .8s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ── VK CODE BOX ── */
.auth-vk-code-box {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; border-radius:var(--Rsm);
  background:linear-gradient(135deg,rgba(168,85,247,.12),rgba(109,40,217,.07));
  border:1px solid var(--bp); margin-bottom:14px;
}
.auth-vk-code {
  font-family:'Syne',sans-serif; font-size:26px; font-weight:800;
  color:var(--ph); letter-spacing:.12em;
}
.auth-copy-btn {
  padding:8px 14px; border-radius:8px;
  background:var(--pg); border:1px solid var(--bp);
  color:var(--ph); font-size:13px; font-weight:500;
  cursor:pointer; transition:all var(--tr);
}
.auth-copy-btn:active { transform:scale(.95); }

/* ── PASSWORD STRENGTH ── */
.auth-pass-strength { font-size:12px; margin-bottom:8px; min-height:18px; }

/* ── CLOUDFLARE TURNSTILE ── */
.cf-turnstile-wrap { margin-bottom:12px; }
.cf-demo-notice {
  font-size:11px; color:var(--t2); padding:8px 0 0;
  display:flex; align-items:center; gap:6px;
}

/* ── AMBIENT GLOW ON AUTH SCREEN — removed ── */
.auth-glow {
  position:absolute; top:0; left:0; right:0; height:50%;
  pointer-events:none; display:none;
}