/* ============================================================
   FileHost — Auth Pages CSS
   ============================================================ */

.auth-page {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 16px;
  background: var(--bg);
  position: relative; overflow: hidden;
}

/* Animated background blobs */
.auth-page::before {
  content: '';
  position: fixed; top: -30%; left: -20%;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,.12) 0%, transparent 70%);
  pointer-events: none;
}
.auth-page::after {
  content: '';
  position: fixed; bottom: -20%; right: -20%;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(6,182,212,.08) 0%, transparent 70%);
  pointer-events: none;
}

.auth-card {
  width: 100%; max-width: 440px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
  position: relative; z-index: 1;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
  animation: authFadeIn .4s ease;
}

@keyframes authFadeIn {
  from { opacity: 0; transform: translateY(20px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.auth-logo {
  text-align: center; margin-bottom: 32px;
}
.auth-logo .logo-icon {
  width: 60px; height: 60px; border-radius: 16px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; color: white; margin: 0 auto 14px;
  box-shadow: 0 8px 24px rgba(99,102,241,.3);
}
.auth-logo h1 {
  font-size: 1.4rem; font-weight: 700; margin-bottom: 4px;
}
.auth-logo p { color: var(--text3); font-size: .875rem; }

.auth-divider {
  display: flex; align-items: center; gap: 12px;
  color: var(--text3); font-size: .8rem; margin: 20px 0;
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

.auth-footer {
  text-align: center; margin-top: 24px;
  font-size: .875rem; color: var(--text3);
}
.auth-footer a { color: var(--primary); font-weight: 500; }
.auth-footer a:hover { color: var(--primary-l); }

.password-toggle {
  position: relative;
}
.password-toggle input { padding-right: 44px; }
.password-toggle .toggle-btn {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--text3); cursor: pointer;
  padding: 4px; transition: color var(--transition);
}
.password-toggle .toggle-btn:hover { color: var(--text); }