/* Auth — themed frosted-glass frame instead of the white panel */
:root { --night: #040814; --night-2: #07122e; --electric: #2f4bff; }

.auth-page {
  background:
    radial-gradient(58% 48% at 16% 6%, rgba(47, 75, 224, 0.36), transparent 62%),
    radial-gradient(42% 42% at 78% 96%, rgba(127, 227, 255, 0.12), transparent 64%),
    var(--night);
}

.auth-main {
  background:
    radial-gradient(38% 34% at 78% 24%, rgba(127, 227, 255, 0.16), transparent 70%),
    radial-gradient(46% 42% at 20% 76%, rgba(77, 107, 254, 0.3), transparent 72%);
  overflow: clip;
}
.auth-main::before {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(70% 72% at 32% 38%, #000, transparent 80%);
}
.auth-main::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: min(56vw, 620px);
  aspect-ratio: 1;
  left: -16%;
  top: 8%;
  border-radius: 50%;
  background: radial-gradient(circle at 45% 45%, rgba(77, 107, 254, 0.55), rgba(77, 107, 254, 0.08) 55%, transparent 70%);
  filter: blur(28px);
  pointer-events: none;
}

.auth-brand { z-index: 5; }
.auth-page .brand b { color: #fff; }
.auth-page .brand .tag {
  color: #9fb4ff;
  border-color: rgba(143, 164, 255, 0.34);
}
.auth-back { color: rgba(224, 232, 255, 0.62); }
.auth-back:hover { color: #fff; }

.auth-form {
  position: relative;
  z-index: 3;
  width: min(100%, 500px);
  margin-inline: auto;
  padding: clamp(24px, 3.6vw, 40px);
  background:
    radial-gradient(62% 42% at 84% 0%, rgba(127, 227, 255, 0.1), transparent 66%),
    linear-gradient(150deg, rgba(27, 45, 96, 0.58), rgba(7, 14, 32, 0.44));
  border: 1px solid rgba(155, 176, 255, 0.34);
  border-radius: 4px 38px 4px 38px;
  -webkit-backdrop-filter: blur(30px) saturate(160%);
  backdrop-filter: blur(30px) saturate(160%);
  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.56),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 0 70px rgba(127, 227, 255, 0.035);
  overflow: hidden;
}
.auth-form::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(125deg, rgba(255, 255, 255, 0.08), transparent 36%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  opacity: 0.075;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.auth-form::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(127, 227, 255, 0.85), transparent);
  pointer-events: none;
}
.auth-form > * { position: relative; z-index: 1; }

.auth-form h1 { color: #fff; }
.auth-sub { color: #9fb0dd; }
.auth-form .field > span { color: #8fa2d8; }
.auth-form .field > span i { color: #8fa4ff; }

.auth-form input {
  height: 52px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(143, 164, 255, 0.26);
  border-radius: 10px;
  color: #fff;
  caret-color: var(--cyan);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.auth-form input::placeholder { color: #7487b6; }
.auth-form input:focus {
  border-color: rgba(127, 227, 255, 0.8);
  background: rgba(255, 255, 255, 0.085);
  box-shadow: 0 0 0 3px rgba(127, 227, 255, 0.12);
  outline: none;
}
.auth-form input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

.send-code {
  height: 44px;
  border: 1px solid rgba(143, 164, 255, 0.3);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.06);
  color: #dbe6ff;
}
.send-code:hover { border-color: rgba(127, 227, 255, 0.7); background: rgba(77, 107, 254, 0.18); }

.form-error { color: #ff9d9d; }
.auth-form .btn-primary {
  box-shadow: 0 18px 44px rgba(47, 75, 224, 0.36);
}
.auth-meta { color: #9fb0dd; }
.auth-meta a { color: #9fb4ff; }
.auth-meta a:hover { border-bottom-color: currentColor; }

@media (max-width: 900px) {
  .auth-main { padding: 72px var(--gutter) 34px; }
  .auth-form { padding: 22px; border-radius: 4px 28px 4px 28px; }
}
@media (max-width: 520px) {
  .auth-form { padding: 20px 18px; }
  .auth-form h1 { font-size: 2.25rem; }
  .auth-sub { margin-bottom: 22px; }
}