:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #03090c;
  color: #edf7f4;
}

* { box-sizing: border-box; }

body {
  position: relative;
  isolation: isolate;
  margin: 0;
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 115%, rgba(45, 187, 153, .18) 0, transparent 48%),
    radial-gradient(circle at 14% 16%, rgba(20, 106, 114, .22) 0, transparent 32%),
    radial-gradient(circle at 86% 18%, rgba(190, 111, 54, .12) 0, transparent 29%),
    linear-gradient(145deg, #020709 0%, #071317 48%, #03090c 100%);
}

body::before,
body::after,
.login-shell::before,
.login-shell::after {
  content: "";
  position: fixed;
  pointer-events: none;
}

body::before {
  z-index: -3;
  inset: -55%;
  background:
    conic-gradient(
      from 20deg at 50% 50%,
      transparent 0 9%,
      rgba(52, 223, 185, .16) 15%,
      transparent 23% 40%,
      rgba(34, 117, 137, .2) 48%,
      transparent 58% 74%,
      rgba(255, 164, 84, .12) 82%,
      transparent 91% 100%
    );
  filter: blur(72px) saturate(135%);
  animation: aura-turn 38s linear infinite;
}

body::after {
  z-index: -1;
  inset: 0;
  opacity: .48;
  background-image:
    radial-gradient(circle at 8% 18%, rgba(224, 255, 247, .9) 0 1px, transparent 2px),
    radial-gradient(circle at 17% 63%, rgba(109, 229, 198, .72) 0 1.2px, transparent 2.4px),
    radial-gradient(circle at 27% 31%, rgba(255, 190, 126, .64) 0 1px, transparent 2.2px),
    radial-gradient(circle at 36% 79%, rgba(206, 255, 241, .75) 0 .8px, transparent 2px),
    radial-gradient(circle at 46% 12%, rgba(113, 225, 197, .68) 0 1px, transparent 2px),
    radial-gradient(circle at 58% 68%, rgba(229, 255, 248, .82) 0 1.2px, transparent 2.5px),
    radial-gradient(circle at 69% 24%, rgba(255, 183, 113, .58) 0 1px, transparent 2.2px),
    radial-gradient(circle at 78% 83%, rgba(113, 226, 197, .7) 0 .9px, transparent 2px),
    radial-gradient(circle at 87% 42%, rgba(225, 255, 247, .8) 0 1.1px, transparent 2.4px),
    radial-gradient(circle at 94% 14%, rgba(255, 194, 132, .5) 0 .8px, transparent 2px),
    radial-gradient(circle at 12% 88%, rgba(117, 220, 195, .48) 0 .7px, transparent 1.8px),
    radial-gradient(circle at 91% 72%, rgba(209, 255, 243, .55) 0 .8px, transparent 1.9px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0, rgba(0, 0, 0, .85) 62%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, rgba(0, 0, 0, .85) 62%, transparent 100%);
  animation: stars-glimmer 9s ease-in-out infinite;
}

.login-shell {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.login-shell::before {
  z-index: -1;
  top: 50%;
  left: 50%;
  width: min(94vw, 880px);
  aspect-ratio: 1;
  background:
    repeating-conic-gradient(
      from 0deg,
      rgba(111, 232, 199, .16) 0deg .35deg,
      transparent .35deg 15deg
    ),
    radial-gradient(
      circle,
      transparent 0 35%,
      rgba(93, 219, 184, .16) 35.2% 35.45%,
      transparent 35.7% 47%,
      rgba(255, 177, 103, .1) 47.15% 47.4%,
      transparent 47.7% 61%,
      rgba(89, 190, 170, .08) 61.15% 61.4%,
      transparent 61.7%
    );
  opacity: .72;
  filter: drop-shadow(0 0 34px rgba(85, 226, 190, .18));
  -webkit-mask-image: radial-gradient(circle, transparent 0 31%, #000 41%, rgba(0, 0, 0, .7) 58%, transparent 72%);
  mask-image: radial-gradient(circle, transparent 0 31%, #000 41%, rgba(0, 0, 0, .7) 58%, transparent 72%);
  animation: sigil-breathe 10s ease-in-out infinite;
}

.login-shell::after {
  z-index: -2;
  inset: 58% -20% -28%;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(70, 215, 179, .18), transparent 58%),
    linear-gradient(to top, rgba(8, 60, 61, .18), transparent 72%);
  filter: blur(46px);
  animation: mist-shift 15s ease-in-out infinite alternate;
}

.login-card {
  position: relative;
  z-index: 1;
  width: min(100%, 430px);
  padding: clamp(28px, 7vw, 46px);
  border: 1px solid rgba(144, 226, 201, .2);
  background: linear-gradient(145deg, rgba(10, 25, 29, .88), rgba(5, 16, 20, .94));
  box-shadow:
    0 34px 100px rgba(0, 0, 0, .52),
    0 0 80px rgba(50, 190, 157, .08),
    0 1px 0 rgba(255, 187, 118, .1) inset;
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
}

.login-logo {
  display: block;
  width: 104px;
  height: 104px;
  margin: 0 auto 32px;
  object-fit: contain;
}

form { display: grid; gap: 10px; }
form[hidden] { display: none; }
label { margin-top: 5px; color: #d7e8e3; font-size: .9rem; font-weight: 650; }

input {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid #29433f;
  outline: none;
  background: #081619;
  color: #f4fbf9;
  font: inherit;
}

input:focus { border-color: #67c9aa; box-shadow: 0 0 0 3px rgba(103, 201, 170, .14); }

button {
  margin-top: 13px;
  padding: 13px 16px;
  border: 0;
  background: #69d0ad;
  color: #071411;
  font: inherit;
  font-weight: 760;
  cursor: pointer;
}

button:disabled { opacity: .58; cursor: wait; }
.notice, .transport-note { padding: 12px 14px; line-height: 1.45; }
.notice { margin-bottom: 8px; background: rgba(105, 208, 173, .1); color: #c9ece0; }
.field-help { margin: -2px 0 2px; color: #91aaa4; font-size: .78rem; line-height: 1.4; }
.status { min-height: 1.4em; margin: 18px 0 0; color: #ff9e9e; font-size: .88rem; }
.transport-note { margin: 14px 0 0; background: rgba(233, 170, 75, .09); color: #e7c890; font-size: .78rem; }

@keyframes aura-turn {
  to { transform: rotate(360deg) scale(1.04); }
}

@keyframes stars-glimmer {
  0%, 100% { opacity: .34; }
  42% { opacity: .56; }
  68% { opacity: .43; }
}

@keyframes sigil-breathe {
  0%, 100% { transform: translate(-50%, -50%) rotate(-2deg) scale(.94); opacity: .48; }
  50% { transform: translate(-50%, -50%) rotate(2deg) scale(1.04); opacity: .82; }
}

@keyframes mist-shift {
  0% { transform: translate3d(-4%, 2%, 0) scale(1); opacity: .6; }
  100% { transform: translate3d(4%, -2%, 0) scale(1.12); opacity: .9; }
}

@media (max-width: 560px) {
  .login-shell { padding: 18px; }
  .login-shell::before { width: 150vw; }
  .login-card { padding: 30px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after,
  .login-shell::before,
  .login-shell::after {
    animation: none;
  }
}