:root {
  color-scheme: dark;
  --logo-edge: #07011c;
  --midnight: #020019;
  --deep-sea: #080430;
  --horizon-glow: #ff9f42;
  --soft-text: #ece6f5;
  --muted-text: #9f97b8;
  --field-bg: rgba(255, 255, 255, 0.08);
  --field-border: rgba(255, 255, 255, 0.16);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Montserrat", sans-serif;
  background: var(--logo-edge);
  color: var(--soft-text);
}

.stage {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px;
}

.phone-shell {
  width: min(420px, 100%);
  min-height: 760px;
  border-radius: 48px;
  border: 2px solid rgba(215, 198, 255, 0.2);
  background:
    linear-gradient(180deg, rgba(1, 0, 15, 0) 0%, rgba(1, 0, 15, 0) 64%, rgba(1, 0, 15, 0.72) 100%),
    url("./Lumora-logov1.png") center 12% / 100% auto no-repeat,
    linear-gradient(180deg, var(--logo-edge) 0%, var(--logo-edge) 100%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.48), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  padding: 24px;
  display: flex;
  flex-direction: column;
}

.hero {
  height: 440px;
}

.pre-form {
  margin-top: auto;
  text-align: center;
  padding-bottom: 96px;
}

.set-sail {
  background: transparent;
  border: 0;
  color: #e4c4bc;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.72rem;
  letter-spacing: 0.04em;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  text-shadow:
    0 0 10px rgba(255, 198, 140, 0.58),
    0 0 22px rgba(255, 164, 92, 0.48),
    0 0 40px rgba(255, 132, 62, 0.34),
    0 0 62px rgba(255, 112, 50, 0.24);
}

.set-sail:hover,
.set-sail:focus-visible {
  color: #f0d1c8;
}

.auth-panel {
  margin-top: auto;
  display: grid;
  gap: 12px;
}

.oauth-buttons {
  display: grid;
  gap: 10px;
}

.oauth-btn {
  border: 1px solid rgba(238, 224, 245, 0.28);
  background: rgba(13, 10, 41, 0.72);
  color: rgba(245, 238, 252, 0.94);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 0.96rem;
  cursor: pointer;
}

.oauth-btn:hover,
.oauth-btn:focus-visible {
  border-color: rgba(255, 199, 137, 0.72);
  background: rgba(20, 14, 55, 0.9);
}

.email-toggle {
  justify-self: center;
  border: 0;
  background: transparent;
  color: rgba(190, 181, 214, 0.68);
  font-size: 0.73rem;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  cursor: pointer;
  padding: 2px 6px;
}

.email-toggle:hover,
.email-toggle:focus-visible {
  color: rgba(230, 220, 246, 0.92);
}

.login-form {
  margin-top: auto;
  display: grid;
  gap: 10px;
}

.login-form label {
  color: rgba(236, 230, 245, 0.82);
  font-size: 0.9rem;
}

.login-form input {
  width: 100%;
  border: 1px solid var(--field-border);
  background: var(--field-bg);
  color: #fff;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 0.95rem;
  outline: none;
}

.login-form input:focus {
  border-color: rgba(255, 170, 95, 0.8);
  box-shadow: 0 0 0 2px rgba(255, 170, 95, 0.2);
}

.login-form button {
  margin-top: 8px;
  border: 0;
  border-radius: 14px;
  padding: 13px 16px;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  color: #1f1334;
  background: linear-gradient(180deg, #ffbf6e 0%, #ff9954 100%);
}

.message {
  min-height: 1.5rem;
  margin: 12px 0 0;
  text-align: center;
  color: rgba(255, 209, 167, 0.95);
  font-size: 0.9rem;
}

.hidden {
  display: none !important;
}

@media (max-width: 540px) {
  .stage {
    padding: 10px;
  }

  .phone-shell {
    min-height: calc(100vh - 20px);
    border-radius: 28px;
  }

  .hero {
    height: 170px;
  }

  .pre-form {
    padding-bottom: 72px;
  }
}