.login {
  display: grid;
  place-items: center;
  padding: max(var(--space-5), env(safe-area-inset-top)) var(--space-4) max(var(--space-5), env(safe-area-inset-bottom));
}

.login-card {
  width: min(100%, 22.5rem);
  text-align: center;
}

.login-mark {
  position: relative;
  width: 9.5rem;
  height: 9.5rem;
  margin: 0 auto var(--space-4);
}

.login-mark .logo {
  position: relative;
  filter: drop-shadow(0 0 6px oklch(65% 0.2 255 / 0.9)) drop-shadow(0 0 22px oklch(65% 0.2 255 / 0.55));
}

.login-glow {
  position: absolute;
  inset: -30%;
  border-radius: 50%;
  background: radial-gradient(closest-side, oklch(65% 0.2 255 / 0.5), transparent 72%);
  filter: blur(14px);
  animation: login-breathe 7s ease-in-out infinite;
}

@keyframes login-breathe {
  0%,
  100% {
    transform: scale(0.9);
    opacity: 0.65;
  }
  50% {
    transform: scale(1.06);
    opacity: 1;
  }
}

.login-title {
  font-family: var(--font-hud);
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: 0.32em;
  margin-right: -0.32em;
}

.login-lead {
  margin-top: var(--space-2);
  color: var(--ink-dim);
}

.login-form {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding: var(--space-5);
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.login-form label {
  font-family: var(--font-hud);
  font-size: var(--text-sm);
  color: var(--ink-dim);
}

.login-form input {
  min-height: 48px;
  margin-bottom: var(--space-3);
  padding: 0 var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: oklch(12% 0.035 265 / 0.8);
}

.login-form input:focus-visible {
  outline-offset: 1px;
}

.login-error {
  min-height: 1.5em;
  color: var(--danger);
  font-size: var(--text-sm);
}

.login-form .btn-talk {
  margin-top: var(--space-2);
  width: 100%;
}