body.login-page {
  min-height: 100vh;
  background: #07090d;
  color: #e6edf3;
  overflow: hidden;
  margin: 0;
}

@property --ratio-x {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --correction {
  syntax: "<percent>";
  inherits: true;
  initial-value: 0%;
}

@property --ratio-y {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  overflow: hidden;
  background: #07090d;
}

.auth-gate.hidden {
  display: none !important;
}

body.auth-pending > :not(#bootGate),
body.auth-locked > :not(#bootGate):not(#authGate) {
  visibility: hidden;
}

.boot-gate {
  z-index: 10000;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background:
    radial-gradient(circle at 50% 44%, rgba(124, 140, 255, 0.14), transparent 34rem),
    #07090d;
}

.boot-shell {
  width: min(920px, calc(100vw - 48px));
  height: min(540px, calc(100vh - 48px));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.boot-kicker,
.boot-center {
  display: none;
}

.boot-status {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
}

.boot-debug-text {
  color: rgba(174, 184, 198, 0.82);
  font: 700 0.82rem/1.3 "Inter", sans-serif;
  letter-spacing: 0.02em;
}

.boot-progress {
  width: 100%;
  height: 8px;
  border: 1px solid rgba(124, 140, 255, 0.22);
  border-radius: 999px;
  overflow: hidden;
  background: rgba(13, 17, 23, 0.92);
}

.boot-progress-bar {
  width: 8%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7c8cff, #aeb8c6);
  box-shadow: 0 0 20px rgba(124, 140, 255, 0.3);
  transition: width 0.18s ease;
}

#authGate.visible {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(1rem, 4vw, 2.5rem) !important;
}

.galaxy-submit .spark,
.galaxy-submit .backdrop,
.galaxy-submit .galaxy,
.galaxy-submit .galaxy__container {
  pointer-events: none;
  position: absolute;
}

.galaxy-submit .spark {
  inset: 0;
  border-radius: 14px;
  rotate: 0deg;
  overflow: hidden;
  mask: linear-gradient(white, transparent 50%);
  animation: flip calc(var(--spark) * 2) infinite steps(2, end);
}

.galaxy-submit .spark::before {
  content: "";
  position: absolute;
  width: 200%;
  aspect-ratio: 1;
  top: 0%;
  left: 50%;
  z-index: -1;
  translate: -50% -15%;
  rotate: 0;
  transform: rotate(-90deg);
  opacity: calc((var(--active)) + 0.4);
  background: conic-gradient(from 0deg, transparent 0 340deg, white 360deg);
  transition: opacity var(--transition);
  animation: rotate var(--spark) linear infinite both;
}

.galaxy-submit .spark::after {
  content: "";
  position: absolute;
  inset: var(--cut);
  border-radius: 14px;
}

.galaxy-submit .backdrop {
  inset: var(--cut);
  border-radius: 14px;
  background: var(--bg);
  transition: background var(--transition);
}

.galaxy-submit .galaxy,
.galaxy-submit .galaxy__container {
  inset: 0;
  opacity: var(--active);
  transition: opacity var(--transition);
}

.galaxy-submit .galaxy {
  width: 100%;
  aspect-ratio: 1;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  overflow: hidden;
}

.galaxy-submit .galaxy__container {
  mask: radial-gradient(white, transparent);
}

.galaxy-submit .galaxy__ring {
  height: 200%;
  width: 200%;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  transform: translate(-28%, -40%) rotateX(-24deg) rotateY(-30deg) rotateX(90deg);
  transform-style: preserve-3d;
}

.galaxy-submit .star {
  height: calc(var(--size) * 1px);
  aspect-ratio: 1;
  background: white;
  border-radius: 50%;
  position: absolute;
  opacity: var(--alpha);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(10deg) rotate(0deg) translateY(calc(var(--distance) * 1px));
  animation: orbit calc(var(--duration) * 1s) calc(var(--delay) * -1s) infinite linear;
}

.galaxy-submit .star--static {
  animation: none;
  top: 50%;
  left: 50%;
  transform: translate(0, 0);
  max-height: 4px;
  filter: brightness(4);
  opacity: 0.9;
  animation:
    move-x calc(var(--duration) * 0.1s) calc(var(--delay) * -0.1s) infinite linear,
    move-y calc(var(--duration) * 0.2s) calc(var(--delay) * -0.2s) infinite linear;
}

.auth-card {
  --hue: 245;
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: min(100%, 430px);
  height: auto;
  min-height: auto;
  padding: 0;
  background: transparent;
}

.auth-card::before {
  display: none;
}

.auth-brand-wordmark {
  --active: 0;
  --hue: 245;
  position: relative;
  z-index: 1;
  display: inline-block;
  align-self: center;
  margin: 0 auto 0.34rem;
  font-size: clamp(2.55rem, 5.4vw, 4.4rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.055em;
  background: linear-gradient(
    90deg,
    hsl(0 0% 72%) 0%,
    hsl(var(--hue) 97% 74%) 20%,
    hsl(0 0% 100%) 40%,
    hsl(var(--hue) 97% 70%) 60%,
    hsl(0 0% 72%) 80%,
    hsl(0 0% 72%) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: filter 0.25s ease, scale 0.25s ease, background 0.25s ease;
  animation: login-brand-shine 3s ease-in-out infinite alternate;
  white-space: nowrap;
}

.auth-card:has(.galaxy-submit:is(:hover, :focus-visible)) .auth-brand-wordmark {
  --active: 1;
  scale: 1.04;
  filter: drop-shadow(0 0 22px hsl(245 97% 61% / 0.38));
}

.auth-kicker {
  position: relative;
  z-index: 1;
  color: #aeb8c6;
  font: 800 0.72rem/1.2 "Inter", sans-serif;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.auth-title {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #e6edf3;
  font: 900 clamp(2.5rem, 5vw, 4rem)/0.95 "Inter", sans-serif;
  letter-spacing: -0.05em;
  text-align: center;
}

.auth-title-brand {
  display: none;
}

.auth-login-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 390px);
  margin: 0.72rem auto 0;
}

.auth-subtitle {
  margin: 0 auto 0.82rem;
  width: min(100%, 390px);
  max-width: 390px;
  color: rgba(218, 224, 238, 0.84);
  font: 700 0.82rem/1.25 "Inter", sans-serif;
  text-align: center;
  white-space: nowrap;
  padding: 0.72rem 1rem;
  border: 1px solid rgba(71, 82, 110, 0.54);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(15, 18, 27, 0.92), rgba(8, 11, 18, 0.86));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 12px 34px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.auth-form,
.auth-form-multi {
  display: flex;
  flex-direction: column;
  gap: 0.82rem;
  width: 100%;
}

.auth-key-wrap {
  position: relative;
  width: 100%;
}

.auth-form input {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(71, 82, 110, 0.78);
  border-radius: 7px;
  background: rgba(17, 27, 46, 0.78);
  color: #e6edf3;
  font: 700 0.88rem/1.2 "Inter", sans-serif;
  outline: none;
  padding: 0.72rem 2.7rem 0.72rem 0.78rem;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.auth-form input::placeholder {
  color: rgba(157, 184, 202, 0.76);
}

.auth-form input:focus,
.auth-key-wrap input.showing-key {
  border-color: rgba(124, 140, 255, 0.82);
  box-shadow: 0 0 0 3px rgba(124, 140, 255, 0.16);
  background: rgba(18, 31, 52, 0.92);
}

.auth-key-reveal {
  position: absolute;
  top: 50%;
  right: 0.55rem;
  z-index: 2;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  border: 1px solid rgba(178, 220, 211, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(230, 237, 243, 0.78);
  cursor: pointer;
  padding: 0;
}

.auth-key-reveal:hover,
.auth-key-reveal:focus-visible,
.auth-key-reveal[aria-pressed="true"] {
  outline: none;
  color: #ffffff;
  border-color: rgba(124, 140, 255, 0.58);
  background: rgba(124, 140, 255, 0.12);
}

.auth-action-row {
  display: flex;
  flex-direction: column-reverse;
  gap: 0.7rem;
}

.auth-form .galaxy-submit {
  --transition: 0.25s;
  --active: 0;
  --cut: 0.1em;
  --spark: 1.8s;
  --hue: 245;
  --bg:
    radial-gradient(
      120% 120% at 126% 126%,
      hsl(var(--hue) calc(var(--active) * 97%) 98% / calc(var(--active) * 0.9)) 40%,
      transparent 50%
    ) calc(100px - (var(--active) * 100px)) 0 / 100% 100% no-repeat,
    radial-gradient(
      120% 120% at 120% 120%,
      hsl(var(--hue) calc(var(--active) * 97%) 70% / calc(var(--active) * 1)) 30%,
      transparent 70%
    ) calc(100px - (var(--active) * 100px)) 0 / 100% 100% no-repeat,
    hsl(var(--hue) calc(var(--active) * 100%) calc(12% - (var(--active) * 8%)));
  background: var(--bg);
  min-height: 46px;
  font-size: 0.96rem;
  font-weight: 700;
  border: 0;
  cursor: pointer;
  padding: 0.86em 1.15em;
  display: flex;
  align-items: center;
  gap: 0.25em;
  white-space: nowrap;
  border-radius: 14px;
  position: relative;
  box-shadow:
    0 0 calc(var(--active) * 3em) calc(var(--active) * 1.5em) hsl(var(--hue) 97% 61% / 0.25),
    0 0.05em 0 0 hsl(var(--hue) calc(var(--active) * 97%) calc((var(--active) * 50%) + 30%)) inset,
    0 -0.05em 0 0 hsl(var(--hue) calc(var(--active) * 97%) calc(var(--active) * 10%)) inset;
  transition: box-shadow var(--transition), scale var(--transition), background var(--transition);
  scale: calc(1 + (var(--active) * 0.05));
  transform-style: preserve-3d;
  perspective: 100vmin;
  overflow: hidden;
}

.auth-action-row .galaxy-submit {
  align-self: center;
  width: 80%;
  justify-content: center;
  margin: 0;
}

.auth-form .galaxy-submit:is(:hover, :focus-visible) {
  --active: 1;
  --play-state: running;
  outline: none;
}

.auth-form .galaxy-submit:hover .star--static {
  animation-play-state: paused;
}

.auth-form .galaxy-submit:active {
  scale: 1;
}

.galaxy-submit .s1 { --size: 3px; --duration: 7s; --delay: -1s; --alpha: 0.88; }
.galaxy-submit .s2 { --size: 2px; --duration: 9s; --delay: -3s; --alpha: 0.68; }
.galaxy-submit .s3 { --size: 4px; --duration: 12s; --delay: -5s; --alpha: 0.78; }
.galaxy-submit .s4 { --size: 2px; --duration: 10s; --delay: -7s; --alpha: 0.82; }
.galaxy-submit .o1 { --size: 2px; --duration: 8s; --delay: -1s; --distance: 42px; --alpha: 0.8; }
.galaxy-submit .o2 { --size: 3px; --duration: 10s; --delay: -2s; --distance: 64px; --alpha: 0.58; }
.galaxy-submit .o3 { --size: 2px; --duration: 13s; --delay: -4s; --distance: 88px; --alpha: 0.7; }
.galaxy-submit .o4 { --size: 4px; --duration: 15s; --delay: -6s; --distance: 112px; --alpha: 0.54; }
.galaxy-submit .o5 { --size: 2px; --duration: 9s; --delay: -8s; --distance: 136px; --alpha: 0.76; }
.galaxy-submit .o6 { --size: 3px; --duration: 17s; --delay: -5s; --distance: 150px; --alpha: 0.5; }
.galaxy-submit .o7 { --size: 2px; --duration: 12s; --delay: -9s; --distance: 174px; --alpha: 0.62; }
.galaxy-submit .o8 { --size: 3px; --duration: 20s; --delay: -11s; --distance: 190px; --alpha: 0.46; }
.galaxy-submit .o9 { --size: 2px; --duration: 14s; --delay: -12s; --distance: 104px; --alpha: 0.68; }
.galaxy-submit .o10 { --size: 3px; --duration: 18s; --delay: -14s; --distance: 128px; --alpha: 0.58; }

.galaxy-submit .text {
  position: relative;
  z-index: 2;
  translate: 2% -6%;
  color: hsl(0 0% calc(60% + (var(--active) * 26%)));
  letter-spacing: 0.01ch;
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
}

.galaxy-submit .text svg {
  inline-size: 1.25em;
  translate: -25% -5%;
}

@keyframes orbit {
  to {
    transform: translate(-50%, -50%) rotate(10deg) rotate(360deg) translateY(calc(var(--distance) * 1px));
  }
}

@keyframes move-x {
  0% {
    translate: -100px 0;
  }
  100% {
    translate: 100px 0;
  }
}

@keyframes move-y {
  0% {
    transform: translate(0, -50px);
  }
  100% {
    transform: translate(0, 50px);
  }
}

@keyframes flip {
  to { rotate: 360deg; }
}

@keyframes rotate {
  to { transform: rotate(90deg); }
}

.auth-form button:disabled {
  cursor: wait;
  opacity: 0.72;
}

.auth-message {
  min-height: 1rem;
  margin: 0;
  color: rgba(174, 184, 198, 0.78);
  font: 700 0.78rem/1.25 "Inter", sans-serif;
  text-align: center;
}

.auth-message:empty {
  opacity: 0;
}

.auth-message.is-error {
  color: #ff9ab1;
}

.auth-message.is-info {
  color: #aeb8c6;
}

@keyframes login-brand-shine {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 100% 50%;
  }
}

@media (max-width: 860px) {
  body.login-page {
    overflow: auto;
  }

  #authGate.visible {
    min-height: 100vh;
    padding: 1.25rem !important;
    overflow: auto;
  }

  .auth-card {
    min-height: auto;
    padding: 0;
  }

  .auth-brand-wordmark {
    font-size: 3rem;
  }
}