:root {
  color-scheme: dark;
  --bg: #08080c;
  --panel: rgba(17,17,25,.9);
  --border: rgba(255,255,255,.08);
  --violet: #9d5cff;
  --violet-soft: #6c36c4;
  --text: #f4f1f7;
  --muted: #8b8592;
  --green: #57e39c;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  color: var(--text);
  background:
    radial-gradient(circle at 50% -10%, rgba(123,57,219,.16), transparent 34rem),
    linear-gradient(180deg,#0a0a0f,#07070b);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow: hidden;
}

.login-ambient { position: fixed; pointer-events: none; border-radius: 50%; filter: blur(100px); opacity: .15; }
.ambient-one { width: 26rem; height: 26rem; background: #7d3cdf; right: -8rem; top: 12%; }
.ambient-two { width: 20rem; height: 20rem; background: #39176e; left: -7rem; bottom: 5%; }

.login-shell { width: min(420px, calc(100vw - 32px)); position: relative; }
.login-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(157,92,255,.18);
  background: linear-gradient(180deg, rgba(19,19,28,.96), rgba(12,12,18,.96));
  box-shadow: 0 30px 90px rgba(0,0,0,.52), inset 0 1px rgba(255,255,255,.025);
  padding: 34px;
}
.login-card:before {
  content: "";
  position: absolute;
  inset: -110px auto auto -90px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(157,92,255,.11), transparent 68%);
  pointer-events: none;
}
.brand-mark {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(145deg,#a968ff,#5623ae);
  box-shadow: inset 0 1px rgba(255,255,255,.25), 0 12px 32px rgba(96,42,174,.26);
  font-weight: 900;
  margin-bottom: 22px;
}
.kicker { color: #775f9d; font-size: 9px; font-weight: 800; letter-spacing: .16em; margin-bottom: 10px; }
h1 { margin: 0; font-size: 27px; letter-spacing: -.035em; font-weight: 700; }
p { margin: 10px 0 24px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.discord-button {
  height: 48px;
  border-radius: 11px;
  border: 1px solid #a56aff;
  background: linear-gradient(180deg,#9255e9,#7135c7);
  box-shadow: inset 0 1px rgba(255,255,255,.15), 0 12px 30px rgba(91,40,167,.22);
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  color: white;
  text-decoration: none;
  font-size: 12px;
  font-weight: 650;
  transition: .16s ease;
}
.discord-button:hover { transform: translateY(-1px); filter: brightness(1.05); }
.discord-glyph { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; background: rgba(255,255,255,.1); }
.arrow { opacity: .8; font-size: 15px; }
.security-note {
  margin-top: 18px;
  padding: 12px 13px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.018);
  border-radius: 10px;
  color: #69636f;
  font-size: 9px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.shield { color: #8e6eb5; font-size: 14px; }
footer { display: flex; justify-content: space-between; align-items: center; padding: 13px 6px 0; color: #4f4a55; font-size: 8px; letter-spacing: .09em; }
.status { display: inline-flex; align-items: center; gap: 6px; }
.status i { width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px rgba(87,227,156,.45); }

:focus-visible { outline: 2px solid rgba(157,92,255,.72); outline-offset: 3px; }

@media (max-width: 520px) {
  .login-card { padding: 27px 23px; }
}