/* Full-screen account pages (sign in, sign up, reset password): soft glowing clouds, big gradient
   title, centered underline fields, pearl button. Loaded after app.css. */
body { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 56px 16px 48px; }

.clouds { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: #020816; }
.clouds::before, .clouds::after, .clouds i { content: ''; position: absolute; border-radius: 50%; }
.clouds::before {
  width: 90vmax; height: 90vmax; left: -30vmax; top: -35vmax;
  background: radial-gradient(closest-side, rgba(10,132,255,0.28), rgba(10,132,255,0.08) 55%, transparent);
}
.clouds::after {
  width: 80vmax; height: 80vmax; right: -30vmax; bottom: -40vmax;
  background: radial-gradient(closest-side, rgba(100,210,255,0.2), rgba(10,132,255,0.07) 55%, transparent);
}
.clouds i {
  width: 60vmax; height: 60vmax; left: 20vmax; bottom: -32vmax;
  background: radial-gradient(closest-side, rgba(40,110,230,0.22), transparent);
}

.close {
  position: fixed; top: 18px; right: 18px; z-index: 5; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; color: var(--text); text-decoration: none;
  background: rgba(2,8,22,0.7); border: 1px solid rgba(255,255,255,0.14);
  transition: background 0.2s, border-color 0.2s;
}
.close:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.24); }
.close svg { width: 18px; height: 18px; }

.auth { width: 100%; max-width: 600px; text-align: center; }
.kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(200,222,255,0.85); }
.big {
  margin-top: 22px; font-size: clamp(54px, 11vw, 92px); font-weight: 800; letter-spacing: -0.05em; line-height: 0.95; text-transform: uppercase;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  background-image: linear-gradient(100deg, #7CC4FF 0%, #2E8BFF 45%, #0A6BFF 70%, #64D2FF 100%);
  padding-bottom: 0.06em;
}
.tagline { margin-top: 18px; color: rgba(215,230,252,0.85); font-size: 15.5px; }

/* Underline fields */
.uline { margin-top: 40px; }
.uline + .uline { margin-top: 28px; }
.uline label { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(200,222,255,0.85); }
.uline input {
  width: 100%; margin-top: 14px; padding: 6px 4px 18px; border: 0; border-bottom: 1px solid rgba(160,200,255,0.2);
  background: transparent; outline: none; text-align: center;
  color: var(--text); font-size: 20px; font-weight: 500; letter-spacing: 0.01em;
  transition: border-color 0.25s;
}
.uline input::placeholder { color: rgba(140,175,230,0.55); }
.uline input[type=password]::placeholder { letter-spacing: 0.12em; }
.uline input:focus { border-bottom-color: rgba(100,210,255,0.75); }
.uline .help { display: inline-block; margin-top: 10px; font-size: 13px; }

/* "Continue with Discord" + OR divider */
.discord-btn {
  margin-top: 34px; display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 30px; border-radius: 999px; cursor: pointer;
  background: rgba(2,8,22,0.55); border: 1px solid rgba(160,200,255,0.28); color: var(--text);
  font-size: 16px; font-weight: 700; text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}
.discord-btn:hover { background: rgba(88,101,242,0.16); border-color: rgba(150,160,255,0.55); }
.discord-btn svg { width: 24px; height: 24px; flex-shrink: 0; }
.discord-ok {
  margin: 34px auto 0; max-width: 360px; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 999px; text-align: left;
  border: 1px solid rgba(48,209,88,0.4); background: rgba(48,209,88,0.08);
}
.discord-ok img { width: 34px; height: 34px; border-radius: 50%; }
.discord-ok .grow { flex: 1; min-width: 0; }
.discord-ok .k { font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ok); font-weight: 700; }
.discord-ok .v { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.discord-ok button { background: none; border: 0; color: var(--muted); font-size: 13px; cursor: pointer; }
.discord-ok button:hover { color: var(--text); }
.wait { display: none; margin-top: 12px; font-size: 13.5px; color: var(--muted); }
.wait.on { display: block; }
.or {
  margin-top: 36px; display: flex; align-items: center; gap: 22px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(200,222,255,0.85);
}
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: rgba(160,200,255,0.18); }
.req { margin-top: 10px; font-size: 13px; color: var(--faint); }

.auth .pearl { margin-top: 34px; }

/* Options row, gradient checkbox, links */
.opts { margin-top: 26px; display: flex; justify-content: center; align-items: center; gap: 24px; flex-wrap: wrap; font-size: 14px; color: rgba(205,222,250,0.8); }
.keep { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.keep input { position: absolute; opacity: 0; pointer-events: none; }
/* Checkbox: a quiet rounded box; when ticked it fills solid blue and the check mark draws itself in */
.keep .box {
  width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; flex-shrink: 0;
  border: 1.5px solid rgba(160,200,255,0.35); background: rgba(255,255,255,0.03);
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.keep:hover .box { border-color: rgba(160,200,255,0.6); }
.keep:active .box { transform: scale(0.92); }
.keep .box svg { width: 12px; height: 12px; color: #fff; }
.keep .box path { stroke-dasharray: 26; stroke-dashoffset: 26; transition: stroke-dashoffset 0.25s ease-out; }
.keep input:checked + .box {
  border-color: #0A84FF; background: #0A84FF;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}
.keep input:checked + .box path { stroke-dashoffset: 0; transition-delay: 0.05s; }
.keep input:focus-visible + .box { outline: 2px solid var(--cyan); outline-offset: 2px; }
.ul-link { color: var(--text); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(160,200,255,0.5); padding-bottom: 1px; }
.ul-link:hover { border-bottom-color: var(--cyan); }
.new { margin-top: 30px; font-size: 14.5px; color: rgba(205,222,250,0.8); }
.demo-note {
  margin: 28px auto 0; max-width: 460px; padding: 10px 16px; border-radius: 12px; font-size: 14px;
  border: 1px solid rgba(255,214,10,0.35); background: rgba(255,214,10,0.07); color: #ffe58a;
}
.demo-note b { color: #fff3c4; }
.err { min-height: 22px; margin-top: 16px; color: #ff8a80; font-size: 14px; }
.ok-msg { min-height: 22px; margin-top: 16px; color: #6ee7a0; font-size: 14.5px; }

/* Entrance (transform/opacity only): the glow fades up, the big title grows into place, and the rest
   rises in one after another. */
.clouds { animation: auth-glow 1.4s ease-out both; }
@keyframes auth-glow { from { opacity: 0; } }
.close { animation: auth-fade 0.8s ease-out 0.4s both; }
@keyframes auth-fade { from { opacity: 0; } }
.auth > * { animation: auth-rise 0.9s var(--ease-out) both; animation-delay: calc(0.15s + var(--d, 0s)); }
@keyframes auth-rise { from { opacity: 0; transform: translate3d(0, 24px, 0); } }
.auth > .big { animation-name: auth-big; animation-duration: 1.1s; }
@keyframes auth-big { from { opacity: 0; transform: translate3d(0, 30px, 0) scale(0.9); } }

/* Short screens (phones held sideways, small laptop windows): smaller title so the form isn't pushed off-screen */
@media (max-height: 560px) {
  body { padding-top: 40px; }
  .big { margin-top: 12px; font-size: clamp(40px, 9vh, 60px); }
  .uline { margin-top: 26px; }
  .uline + .uline { margin-top: 20px; }
}