:root {
  --line: rgba(255, 255, 255, 0.35);
  --text: #f3f4ff;
  --muted: #bec4ef;
  --electric-blue: #47b7ff;
  --neon-mint: #25f2b2;
  --acid-lime: #d7ff4d;
  --sun-orange: #ff9a3c;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: "Manrope", sans-serif;
  background:
    radial-gradient(circle at 20% 20%, rgba(71, 183, 255, 0.28), transparent 35%),
    radial-gradient(circle at 80% 12%, rgba(37, 242, 178, 0.24), transparent 30%),
    linear-gradient(145deg, #06131f, #04101a 45%, #071d18);
}

h1,
p {
  margin: 0;
}

.auth-page {
  width: min(580px, 92vw);
  margin: 2rem auto;
}

.back-link {
  display: inline-block;
  margin-bottom: 0.9rem;
  color: #ebf3ff;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.35rem 0.72rem;
  background: rgba(255, 255, 255, 0.08);
}

.auth-card {
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 1.3rem;
  backdrop-filter: blur(6px);
}

.eyebrow {
  display: inline-flex;
  padding: 0.24rem 0.62rem;
  border-radius: 999px;
  background: linear-gradient(120deg, var(--sun-orange), var(--acid-lime));
  color: #17051d;
  letter-spacing: 0.09em;
  font-size: 0.75rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

h1 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(1.5rem, 3.2vw, 2.2rem);
  margin-bottom: 0.35rem;
}

.sub {
  color: var(--muted);
  margin-bottom: 1rem;
}

.mode-switch {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.mode-btn {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #ecf2ff;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  font: inherit;
}

.mode-btn.active {
  color: #041018;
  border-color: transparent;
  background: linear-gradient(120deg, var(--electric-blue), var(--neon-mint), var(--acid-lime));
}

.auth-form {
  display: grid;
  gap: 0.85rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.field span {
  color: #dce6ff;
  font-size: 0.92rem;
}

input {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  border-radius: 12px;
  padding: 0.72rem 0.88rem;
  font: inherit;
}

input:focus {
  outline: none;
  border-color: transparent;
  box-shadow: 0 0 0 2px #47b7ff66;
}

.submit-btn {
  border: none;
  border-radius: 14px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 0.86rem 1rem;
  color: #041018;
  background: linear-gradient(120deg, var(--electric-blue), var(--neon-mint), var(--acid-lime));
}

.message {
  min-height: 1.5rem;
  margin-top: 0.8rem;
  color: #dbe6ff;
}

.message.error {
  color: #ffb0b0;
}

.hidden {
  display: none;
}