/* Shared by login and registration. Decorative layers never intercept input. */
.auth.auth .auth__actions :is(button[type="submit"], a[href="/login"])::before {
  content: "";
  display: inline-block;
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4M10 17l5-5-5-5M15 12H3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4M10 17l5-5-5-5M15 12H3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.auth.auth .auth__actions :is(button[type="submit"], a[href="/login"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.auth.auth .auth__actions button[type="submit"]:disabled::before {
  display: none;
}
.auth.auth:has(input[autocomplete="new-password"]) button[type="submit"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M2 21v-2a7 7 0 0 1 14 0v2M20 8v6M17 11h6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M2 21v-2a7 7 0 0 1 14 0v2M20 8v6M17 11h6'/%3E%3C/svg%3E");
}
.auth.auth {
  isolation: isolate;
  background: #05080c;
}
.auth.auth::before {
  content: "";
  position: fixed;
  inset: -12%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 23% 30%, #39bde32e 0%, transparent 42%),
    radial-gradient(ellipse at 78% 65%, #2879d938 0%, transparent 43%),
    radial-gradient(ellipse at 55% 8%, #80dfff14 0%, transparent 38%),
    #05080c;
  animation: dropflow-auth-aurora 18s ease-in-out infinite alternate;
}
.auth.auth::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(#8bd9fb0b 1px, transparent 1px),
    linear-gradient(90deg, #8bd9fb0b 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 15%, transparent 75%);
  mask-image: radial-gradient(ellipse at center, #000 15%, transparent 75%);
}
.auth.auth .auth__card {
  z-index: 1;
  box-shadow: 0 24px 80px #0006, 0 0 60px #66cfff0a;
}
@keyframes dropflow-auth-aurora {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to { transform: translate3d(3%, 2%, 0) scale(1.07); }
}
@media (max-width: 600px) {
  .auth.auth::after { background-size: 48px 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .auth.auth::before { animation: none; }
  .auth.auth .auth__card,
  .auth.auth .auth__card::before,
  .auth.auth .auth__card::after { animation: none; }
}

/* Input icons remain visible with browser autofill and password reveal. */
.auth.auth .field__wrap:has(input[type="email"]),
.auth.auth .field__wrap:has(.field__control--password) { position: relative; }
.auth.auth input[type="email"],
.auth.auth input.field__control--password { padding-left: 46px; }
.auth.auth .field__wrap:has(input[type="email"])::before,
.auth.auth .field__wrap:has(.field__control--password)::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  z-index: 1;
  pointer-events: none;
  background: #617481;
}
.auth.auth .field__wrap:has(input[type="email"])::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%275%27%20width%3D%2718%27%20height%3D%2714%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27m3%206%209%207%209-7%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%275%27%20width%3D%2718%27%20height%3D%2714%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27m3%206%209%207%209-7%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
.auth.auth .field__wrap:has(.field__control--password)::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%275%27%20y%3D%2710%27%20width%3D%2714%27%20height%3D%2711%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M8%2010V7a4%204%200%200%201%208%200v3M12%2014v3%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%275%27%20y%3D%2710%27%20width%3D%2714%27%20height%3D%2711%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M8%2010V7a4%204%200%200%201%208%200v3M12%2014v3%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}