:root {
  color-scheme: dark;
  font-family: "Segoe UI", Arial, sans-serif;
  color: #f3f3f3;
  background: #0f0f0f;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  --orange: #a0a0a0;
  --orange-light: #c5c5c5;
  --muted: #a1a1a1;
}
* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; background: linear-gradient(transparent, transparent), linear-gradient(transparent, transparent), #0f0f0f; }
body::before,
body::after { position: fixed; z-index: 0; width: 260px; height: 260px; border-radius: 50%; background: #96969630; content: ""; filter: blur(95px); pointer-events: none; animation: ember 8s ease-in-out infinite alternate; }
body::before { top: -100px; right: 8%; }
body::after { bottom: -120px; left: 4%; animation-delay: -4s; }
.auth-layout { position: relative; z-index: 1; display: flex; min-height: 100vh; flex-direction: column; align-items: center; justify-content: center; padding: 34px 20px; }
.auth-brand { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; color: #f3f3f3; font-size: 17px; font-weight: 850; letter-spacing: -.7px; text-decoration: none; }
.auth-brand > span:last-child > span { color: var(--orange-light); }
.brand-mark { display: grid; width: 37px; height: 37px; place-items: center; border-radius: 12px; background: linear-gradient(#d2d2d2, #d2d2d2); color: #141414; font-size: 13px; font-weight: 900; box-shadow: none; }
.auth-card { width: min(100%, 390px); padding: clamp(21px, 5vw, 29px); border: 1px solid #c5c5c535; border-radius: 16px; background: linear-gradient(#1e1e1eed, #1e1e1eed); box-shadow: none; backdrop-filter: blur(18px); animation: rise .55s ease both; }
.auth-card h1 { margin: 15px 0 7px; font-size: clamp(25px, 7vw, 32px); letter-spacing: -1.1px; }
.auth-lead { margin: 0 0 18px; color: var(--muted); font-size: 11px; line-height: 1.65; }
.auth-message { min-height: 15px; margin: 0; color: #b6b6b6; font-size: 10px; line-height: 1.5; }
.auth-switch { margin: 16px 0 0; color: var(--muted); text-align: center; font-size: 11px; }
.auth-switch a { color: #c4c4c4; font-weight: 800; text-decoration: none; }
.auth-switch a:hover { text-decoration: underline; }
.auth-footnote { margin: 18px 0 0; color: #979797; text-align: center; font-size: 10px; }
.referral-note { margin: -9px 0 17px; padding: 10px 12px; border: 1px solid #78787870; border-radius: 8px; background: #3e3e3e33; color: #cecece; font-size: 10px; line-height: 1.6; }
@keyframes ember { to { transform: translate(35px, 28px) scale(1.12); opacity: .65; } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}
* { scrollbar-width: thin; scrollbar-color: #7c7c7c #0f0f0f; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0f0f0f; border-radius: 8px; }
::-webkit-scrollbar-thumb { background: linear-gradient(#5d5d5d, #5d5d5d); border: 2px solid #0f0f0f; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(#8f8f8f, #8f8f8f); }
.brand-mark img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: contain; }

.discord-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px 14px; border-radius: 10px; background: #5865f2; color: #ffffff; font-weight: 700; font-size: 13px; text-decoration: none; transition: filter .15s; }
.discord-btn:hover { filter: brightness(1.1); }