/* ═══════════════════════════════════════════════════════════════════
   TimePayer — Auth Pages CSS v2
═══════════════════════════════════════════════════════════════════ */

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

/* Subtle background gradient orbs */
.auth-page::before {
  content:        '';
  position:       absolute;
  top:            -280px;
  left:           -180px;
  width:          560px;
  height:         560px;
  background:     radial-gradient(circle, rgba(37,99,235,.1) 0%, transparent 68%);
  border-radius:  50%;
  pointer-events: none;
  animation:      orbFloat 9s ease-in-out infinite;
}
.auth-page::after {
  content:        '';
  position:       absolute;
  bottom:         -200px;
  right:          -160px;
  width:          480px;
  height:         480px;
  background:     radial-gradient(circle, rgba(16,185,129,.08) 0%, transparent 70%);
  border-radius:  50%;
  pointer-events: none;
  animation:      orbFloat 11s ease-in-out infinite reverse;
}
@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%       { transform: translate(24px, -18px) scale(1.04); }
  70%       { transform: translate(-16px, 12px) scale(.97); }
}

/* ─── Auth box ──────────────────────────────────────────────────── */
.auth-box {
  position:  relative;
  z-index:   1;
  width:     100%;
  max-width: 420px;
  animation: fadeInUp .45s ease both;
}

/* ─── Logo ──────────────────────────────────────────────────────── */
.auth-logo {
  display:         flex;
  align-items:     center;
  gap:             12px;
  justify-content: center;
  margin-bottom:   28px;
}
.auth-logo .logo-icon {
  width:         52px;
  height:        52px;
  border-radius: 14px;
  object-fit:    contain;
  filter:        drop-shadow(0 6px 20px rgba(37,99,235,.3));
}
.auth-logo .logo-name {
  font-size:      1.55rem;
  font-weight:    800;
  color:          var(--text);
  letter-spacing: -.02em;
}
.auth-logo .logo-name span { color: var(--blue); }

/* ─── Card ──────────────────────────────────────────────────────── */
.auth-card {
  background:    var(--bg-surface);
  border:        1px solid var(--border);
  border-radius: var(--radius-xl);
  padding:       36px 32px;
  box-shadow:    0 24px 64px rgba(0,0,0,.45);
}

.auth-title {
  font-size:     1.45rem;
  font-weight:   700;
  text-align:    center;
  margin-bottom: 5px;
  letter-spacing: -.015em;
}
.auth-subtitle {
  text-align:    center;
  color:         var(--text-muted);
  font-size:     .875rem;
  margin-bottom: 28px;
}

/* ─── Password strength ─────────────────────────────────────────── */
.password-strength {
  height:        3px;
  border-radius: 2px;
  background:    var(--border);
  margin-top:    8px;
  overflow:      hidden;
}
.password-strength-bar {
  height:        100%;
  border-radius: 2px;
  transition:    width .3s ease, background .3s ease;
  width:         0;
}
.strength-weak   { background: var(--red);    width: 30%; }
.strength-medium { background: var(--yellow); width: 65%; }
.strength-strong { background: var(--green);  width: 100%; }

/* ─── Eye toggle ────────────────────────────────────────────────── */
.input-icon-wrap { position: relative; }
.input-icon-wrap .form-control { padding-right: 44px; }
.input-eye-toggle {
  position:    absolute;
  right:       12px;
  top:         50%;
  transform:   translateY(-50%);
  background:  none;
  border:      none;
  color:       var(--text-subtle);
  padding:     4px;
  cursor:      pointer;
  transition:  color var(--transition);
  font-size:   1rem;
  line-height: 1;
}
.input-eye-toggle:hover { color: var(--text-muted); }

/* ─── Footer ────────────────────────────────────────────────────── */
.auth-footer {
  text-align:  center;
  margin-top:  20px;
  font-size:   .875rem;
  color:       var(--text-muted);
}
.auth-footer a { font-weight: 600; color: var(--blue); }
.auth-footer a:hover { color: var(--blue-light); }

/* ─── Trust notice ──────────────────────────────────────────────── */
.auth-notice {
  background:    var(--bg-elevated);
  border:        1px solid var(--border);
  border-radius: var(--radius-md);
  padding:       11px 14px;
  font-size:     .82rem;
  color:         var(--text-muted);
  display:       flex;
  align-items:   flex-start;
  gap:           9px;
  margin-top:    16px;
}
.auth-notice .notice-icon { font-size: .95rem; flex-shrink: 0; margin-top: 1px; }

@media (max-width: 480px) {
  .auth-card { padding: 24px 20px; }
  .auth-page { padding: 20px 16px; align-items: flex-start; padding-top: 48px; }
}