:root {
  --auth-cyan: #22d3ee;
  --auth-blue: #3b82f6;
  --auth-violet: #8b5cf6;
}

body {
  isolation: isolate;
  background:
    radial-gradient(circle at 12% 15%, rgba(34, 211, 238, .12), transparent 30%),
    radial-gradient(circle at 86% 78%, rgba(139, 92, 246, .14), transparent 34%),
    #050b14 !important;
}

body::before {
  transform: scale(1.035);
  filter: saturate(.78) contrast(1.08) brightness(.62) !important;
  opacity: .9;
  animation: authBackdropDrift 24s ease-in-out infinite alternate;
}

body::after {
  background:
    radial-gradient(circle at 18% 16%, rgba(34, 211, 238, .18), transparent 31%),
    radial-gradient(circle at 82% 78%, rgba(139, 92, 246, .21), transparent 36%),
    linear-gradient(112deg, rgba(3, 10, 22, .9) 0%, rgba(5, 13, 27, .66) 48%, rgba(10, 8, 25, .88) 100%) !important;
}

.auth-wrapper {
  position: relative;
  isolation: isolate;
}

.auth-wrapper::before {
  content: "";
  position: absolute;
  inset: 4%;
  z-index: -1;
  pointer-events: none;
  border-radius: 42px;
  background-image:
    linear-gradient(rgba(34, 211, 238, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, .055) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(59, 130, 246, .13), transparent 66%);
  background-size: 38px 38px, 38px 38px, 100% 100%;
  mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
  opacity: .75;
}

.auth-card {
  position: relative;
  background: linear-gradient(155deg, rgba(15, 27, 47, .91), rgba(7, 13, 26, .86)) !important;
  border: 1px solid rgba(125, 211, 252, .17) !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .55), 0 0 0 1px rgba(139, 92, 246, .06) inset !important;
  backdrop-filter: blur(22px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(130%) !important;
}

.auth-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 10%;
  right: 10%;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, var(--auth-cyan), var(--auth-violet), transparent);
  box-shadow: 0 0 24px rgba(34, 211, 238, .4);
}

.auth-logo {
  filter: drop-shadow(0 12px 30px rgba(34, 211, 238, .18));
}

.form-input:focus,
.phone-input-wrap:focus-within {
  border-color: rgba(34, 211, 238, .58) !important;
  box-shadow: 0 0 0 4px rgba(34, 211, 238, .09) !important;
}

.submit-btn {
  background: linear-gradient(120deg, var(--auth-cyan), var(--auth-blue) 48%, var(--auth-violet)) !important;
  color: #fff !important;
  box-shadow: 0 14px 35px rgba(59, 130, 246, .26) !important;
}

body.light-mode {
  background: #edf5fb !important;
}

body.light-mode::after {
  background:
    radial-gradient(circle at 16% 15%, rgba(6, 182, 212, .15), transparent 34%),
    radial-gradient(circle at 84% 80%, rgba(124, 58, 237, .13), transparent 36%),
    linear-gradient(120deg, rgba(239, 246, 255, .88), rgba(248, 250, 252, .76)) !important;
}

body.light-mode .auth-card {
  background: linear-gradient(155deg, rgba(255, 255, 255, .94), rgba(241, 245, 249, .9)) !important;
  border-color: rgba(14, 116, 144, .18) !important;
}

@keyframes authBackdropDrift {
  from { transform: scale(1.035) translate3d(-.25%, -.2%, 0); }
  to { transform: scale(1.065) translate3d(.35%, .25%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}

@media (max-width: 640px) {
  .auth-wrapper { width: calc(100% - 24px) !important; margin-left: auto !important; margin-right: auto !important; }
  .auth-wrapper::before { inset: 0; opacity: .45; }
  .auth-card { backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; }
}