/* Login hero (shared design with channels; Lr theme = purple) + Discord pill used on the admin pages. */

:root {
  --lp-accent: #a855f7;
  --lp-glow: rgba(168, 85, 247, .45);
}

.lp-root {
  --lp-accent: #ff7e2d;
  --lp-glow: rgba(255, 126, 45, .45);
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #000;
  color: #fff;
  font-family: 'League Spartan', system-ui, -apple-system, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  -webkit-font-smoothing: antialiased;
}
.lp-root[data-theme="lr"] {
  --lp-accent: #a855f7;
  --lp-glow: rgba(168, 85, 247, .45);
}

.lp-orbs { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.lp-orb {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--c1), var(--c2) 48%, transparent 72%);
  filter: blur(var(--blur, 48px));
  mix-blend-mode: screen;
  opacity: var(--alpha, .8);
  will-change: transform;
  animation: lp-drift var(--dur, 28s) ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
}
.lp-orb--halo {
  transform: translate(-50%, -50%);
  mix-blend-mode: normal;
  animation-name: lp-drift-halo;
}
@keyframes lp-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  33%  { transform: translate3d(var(--dx1), var(--dy1), 0) scale(1.08); }
  66%  { transform: translate3d(var(--dx2), var(--dy2), 0) scale(.94); }
  100% { transform: translate3d(var(--dx3), var(--dy3), 0) scale(1.04); }
}
@keyframes lp-drift-halo {
  0%   { transform: translate(-50%, -50%) translate3d(0, 0, 0); }
  50%  { transform: translate(-50%, -50%) translate3d(var(--dx1), var(--dy1), 0); }
  100% { transform: translate(-50%, -50%) translate3d(var(--dx2), var(--dy2), 0); }
}

.lp-grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
}

.lp-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: 0 24px;
  text-align: center;
  animation: lp-rise .9s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes lp-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.lp-logo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  box-shadow: 0 0 60px var(--lp-glow);
}
.lp-root[data-theme="lr"] .lp-logo { border-radius: 18px; }
.lp-title {
  margin: 0;
  font-weight: 600;
  font-size: clamp(2.1rem, 6vw, 3.6rem);
  line-height: 1;
  letter-spacing: -.03em;
  text-shadow: 0 0 40px var(--lp-glow);
}
.lp-discord {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 26px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #fff;
  font: 600 1.05rem/1 'League Spartan', system-ui, sans-serif;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.lp-discord:hover {
  transform: translateY(-2px);
  border-color: var(--lp-accent);
  background: rgba(255, 255, 255, .1);
  box-shadow: 0 10px 40px var(--lp-glow), inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.lp-discord:active { transform: translateY(0); }
.lp-discord:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 4px; }
.lp-discord svg { flex: none; }
.lp-status {
  margin: 0;
  min-height: 1.3em;
  font-size: .95rem;
  line-height: 1.3;
  color: rgba(255, 255, 255, .62);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
/* Keeps the one line people must read legible when an orb drifts behind it (phones): a dark chip
   that is invisible on the black centre and scrims the orb when one sits underneath. The negative
   margins cancel the padding, so the chip has the same layout footprint as the empty line. */
.lp-status:not(:empty) {
  padding: 4px 14px 3px;
  margin: -4px -14px -3px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .6);
}
.lp-status--error { color: #ffb4a8; }

@media (max-width: 640px) {
  .lp-orbs { transform: scale(.75); transform-origin: 50% 50%; }
  .lp-content { gap: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-orb, .lp-orb--halo, .lp-content { animation: none; }
}

/* ---- Lr-specific additions below (index page wrapper, tracker-id entry, admin-page pill) ---- */

/* The hero is position:fixed, so the #login-view wrapper must not add scrollable height. */
#login-view.lp-view { min-height: 0; padding: 0; }
#login-view.hidden .lp-root { display: none; }

/* Tiny muted toggle that reveals the tracker-id form. */
.lp-minor {
  background: none;
  border: 0;
  padding: 0;
  color: rgba(255, 255, 255, .38);
  font: 500 .85rem/1 'League Spartan', system-ui, sans-serif;
  letter-spacing: .02em;
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  transition: color .2s;
}
.lp-minor:hover { color: rgba(255, 255, 255, .7); transform: none; box-shadow: none; }
.lp-minor:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 4px; border-radius: 4px; }

/* Status line + tracker entry sit a little tighter than the main stack. */
.lp-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-top: -10px;
}

/* Tracker-id form, hidden until "have a tracker id?" is clicked. */
.lp-tracker {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 280px;
  animation: lp-fade .4s ease both;
}
@keyframes lp-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.lp-tracker input[type="text"] {
  width: 100%;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  padding: 15px 18px 13px;
  color: #fff;
  font: 600 1rem/1 'League Spartan', system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: center;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.lp-tracker input[type="text"]::placeholder {
  color: rgba(255, 255, 255, .35);
  font-weight: 500;
  text-transform: none;
  letter-spacing: .02em;
}
.lp-tracker input[type="text"]:focus {
  outline: none;
  border: 1px solid var(--lp-accent);
  background: rgba(255, 255, 255, .09);
  box-shadow: 0 0 0 3px var(--lp-glow);
}
.lp-tracker button {
  border: 0;
  border-radius: 999px;
  padding: 15px 26px 13px;
  background: var(--lp-accent);
  color: #fff;
  font: 600 1rem/1 'League Spartan', system-ui, sans-serif;
  letter-spacing: .01em;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.lp-tracker button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 40px var(--lp-glow);
  filter: brightness(1.08);
}
.lp-tracker button:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* Compact pill + "or" divider for the admin pages' password login views. */
.lp-discord--compact {
  padding: 12px 20px 11px;
  font-size: .95rem;
}
/* The admin pages reserve space for an (empty) error line above the divider; collapse it until it has text. */
.login-container .error-message:empty { min-height: 0; margin-top: 0; }
.lp-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 18px;
  color: rgba(255, 255, 255, .35);
  font: 500 .72rem/1 'League Spartan', system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .22em;
}
.lp-or::before,
.lp-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, .1);
}