/* Log in and Sign up.
 *
 * Both pages are a 46% / 54% split: a blue gradient panel with the wordmark,
 * a headline and floating game cards on the left, the form on the right.
 *
 * These pages use the FIXED LIGHT scheme, like the marketing page — they do
 * not follow the light/dark toggle. That is how they are designed, and it is
 * deliberate: the sign-in screen is the product's front door and always looks
 * the same. So there is no theme-boot script on these two pages.
 *
 * The design file expresses all of this as inline styles with hard-coded hex.
 * Those values are lifted into tokens at the top of this file, so the auth
 * pages are still restyleable from one place rather than from 60 attributes.
 */

:root {
  /* Mapped to the design's marketing tokens where they exist. */
  --au-ink: var(--pm-ink);          /* #101317 headings and input text  */
  --au-body: var(--pm-body);        /* #49525d body copy                */
  --au-muted: var(--pm-muted);      /* #5f6874 secondary copy           */
  --au-link: var(--pm-kicker);      /* #4a83b8 links, small buttons     */
  --au-accent: var(--pa-accent);    /* #79abd9 primary                  */

  /* Auth-only values, not present in theme.css. */
  --au-label: #3c454f;
  --au-field-border: #e2e8ef;
  --au-field-border-hover: #c7dcee;
  --au-field-border-bad: #e8b9a3;
  --au-focus-ring: rgba(121, 171, 217, 0.18);
  --au-divider: #eceff4;
  --au-faint: #a2abb6;
  --au-soft-bg: #f7fbfd;
  --au-check-bg: #eff6fc;
  --au-check-border: #dbe8f5;
  --au-link-hover: #2f6da5;
  --au-accent-hover: var(--pa-accent-active);
  --au-accent-active: #4f89bf;

  /* Error card */
  --au-error-bg: #fdf3ef;
  --au-error-border: #f4ddd3;
  --au-error-icon: #c2673c;
  --au-error-text: #9c5230;

  /* Password strength meter */
  --au-meter-off: #eceff4;
  --au-meter-weak: #e8b06a;
  --au-meter-fair: var(--pa-accent);
  --au-meter-strong: #5aa87e;

  /* The art panel */
  --au-art: linear-gradient(166deg, #9cc4e6 0%, #79abd9 48%, #5f97cb 100%);
  --au-card-frame: linear-gradient(148deg, #fbfdff 0%, #cfdeed 22%, #93a9bf 48%, #eef4fa 70%, #a2b6c9 100%);
}

html,
body {
  margin: 0;
  background: #ffffff;
  color: var(--au-ink);
  font-family: var(--font-body);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

::selection {
  background: var(--au-accent);
  color: #ffffff;
}

*:focus-visible {
  outline: 2px solid var(--au-accent);
  outline-offset: 2px;
}

a {
  color: var(--au-link);
  text-decoration: none;
}

a:hover {
  color: var(--au-link-hover);
}

/* ── animation ────────────────────────────────────────────────────────────── */

@keyframes pa-bob {
  0%, 100% { transform: translateY(0) rotate(var(--tilt)); }
  50% { transform: translateY(-12px) rotate(var(--tilt)); }
}

@keyframes pa-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

@keyframes pa-pop {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to { opacity: 1; transform: none; }
}

@keyframes pa-drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  40% { transform: translate(14px, -18px) rotate(40deg); }
  70% { transform: translate(-9px, -8px) rotate(-24deg); }
}

@keyframes pa-spin {
  to { transform: rotate(360deg); }
}

/* ── shell ────────────────────────────────────────────────────────────────── */

.auth {
  display: grid;
  grid-template-columns: 46% 1fr;
  min-height: 100vh;
  color: var(--au-ink);
}

/* ── art panel ────────────────────────────────────────────────────────────── */

.auth__art {
  position: relative;
  overflow: hidden;
  padding: 40px;
  background: var(--au-art);
}

.auth__speck {
  position: absolute;
  background: rgba(255, 255, 255, .4);
  animation: pa-drift 13s ease-in-out infinite;
}

.auth__brand {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: #ffffff;
}

.auth__brand:hover {
  color: #ffffff;
}

.auth__brand img {
  width: 52px;
  height: 52px;
  display: block;
  transition: transform .32s var(--ease-spring);
}

.auth__brand:hover img {
  transform: rotate(-9deg) scale(1.08);
}

/* The wordmark is "payama" — never "payama.gg". */
.auth__wordmark {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 25px;
}

.auth__pitch {
  position: relative;
  z-index: 3;
  max-width: 380px;
  margin-top: 11vh;
  animation: pa-in .6s var(--ease-out) both;
}

.auth__pitch h1 {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 54px;
  line-height: .98;
  color: #ffffff;
}

.auth__pitch p {
  margin: 0 0 22px;
  font-size: 16.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .9);
  text-wrap: pretty;
}

.auth__perks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.auth__perks li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: #ffffff;
}

.auth__tick {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .24);
}

/* Floating game screenshots. */
.auth__card {
  position: absolute;
  animation: pa-bob 8.4s ease-in-out infinite;
}

.auth__card--a {
  --tilt: -4deg;
  left: 9%;
  bottom: 9%;
  width: 172px;
  height: 215px;
}

.auth__card--b {
  --tilt: 5deg;
  right: 7%;
  bottom: 20%;
  width: 152px;
  height: 190px;
  animation-duration: 9.6s;
  animation-delay: 1.2s;
}

.auth__card-frame {
  width: 100%;
  height: 100%;
  padding: 3px;
  border-radius: 20px;
  background: var(--au-card-frame);
  box-shadow: 0 30px 46px -22px rgba(12, 32, 54, .6), inset 0 2px 0 rgba(255, 255, 255, .9);
}

.auth__card-frame > div {
  width: 100%;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
}

.auth__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── form side ────────────────────────────────────────────────────────────── */

.auth__pane {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}

.auth__form {
  width: 100%;
  max-width: 390px;
  animation: pa-in .55s var(--ease-out) .08s both;
}

.auth__title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 34px;
}

.auth__sub {
  margin: 0 0 26px;
  font-size: 14.5px;
  color: var(--au-muted);
}

.auth__label {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--au-label);
}

.auth__label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 18px 0 7px;
}

.auth__label-row .auth__label {
  margin-bottom: 0;
}

.auth__input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--au-field-border);
  border-radius: 12px;
  background: #ffffff;
  color: var(--au-ink);
  font-family: var(--font-body);
  font-size: 15px;
  caret-color: var(--au-accent);
  transition: border-color .16s, box-shadow .16s;
}

.auth__input::placeholder {
  color: var(--au-faint);
}

.auth__input:hover {
  border-color: var(--au-field-border-hover);
}

.auth__input:focus {
  outline: none;
  border-color: var(--au-accent);
  box-shadow: 0 0 0 3px var(--au-focus-ring);
}

/* Set by JS after a failed submit, matching the design's `bad()` helper. */
.auth__input--bad {
  border-color: var(--au-field-border-bad);
}

.auth__mt {
  margin-top: 18px;
}

/* A text button that sits inside a label row: Show / Hide, Forgot password. */
.auth__mini {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--au-link);
  font-family: var(--font-body);
  font-size: 12.5px;
  cursor: pointer;
}

.auth__mini:hover {
  color: var(--au-link-hover);
}

/* ── checkbox ─────────────────────────────────────────────────────────────── */

.auth__check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--au-label);
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
}

.auth__box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border: 1px solid #d7dee6;
  border-radius: 6px;
  background: #ffffff;
  transition: background .16s, border-color .16s;
}

.auth__check[aria-checked="true"] .auth__box {
  border-color: var(--au-accent);
  background: var(--au-accent);
}

/* The tick is present in the DOM and revealed, rather than inserted, so
   toggling never reflows the row. */
.auth__box svg {
  opacity: 0;
  transition: opacity .16s;
}

.auth__check[aria-checked="true"] .auth__box svg {
  opacity: 1;
}

.auth__row {
  display: flex;
  align-items: center;
  margin: 16px 0 24px;
}

.auth__row .auth__mini {
  margin-left: auto;
  font-size: 13.5px;
  white-space: nowrap;
}

/* ── buttons ──────────────────────────────────────────────────────────────── */

.auth__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 50px;
  border: 0;
  border-radius: 14px;
  background: var(--au-accent);
  color: #ffffff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 12px 24px -14px rgba(121, 171, 217, 1);
  transition: background .18s, transform .16s, opacity .18s;
}

.auth__submit:hover:not(:disabled) {
  background: var(--au-accent-hover);
  transform: translateY(-2px);
}

.auth__submit:active:not(:disabled) {
  background: var(--au-accent-active);
  transform: translateY(0);
}

.auth__submit:disabled {
  opacity: .75;
  cursor: default;
}

.auth__spinner {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, .4);
  border-top-color: #ffffff;
  border-radius: 999px;
  animation: pa-spin .7s linear infinite;
}

.auth__oauth {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 48px;
  border: 1px solid var(--au-field-border);
  border-radius: 14px;
  background: #ffffff;
  color: #2f3740;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: border-color .16s, background .16s;
}

.auth__oauth:hover {
  border-color: var(--au-field-border-hover);
  background: var(--au-soft-bg);
}

.auth__oauth-icon {
  flex: none;
}

/* ── divider ──────────────────────────────────────────────────────────────── */

.auth__or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 26px 0;
}

.auth__or::before,
.auth__or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--au-divider);
}

.auth__or span {
  font-size: 12px;
  color: var(--au-faint);
}

/* ── strength meter ───────────────────────────────────────────────────────── */

.auth__meter {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
}

.auth__meter i {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--au-meter-off);
  transition: background .3s;
}

.auth__meter--1 i:nth-child(-n + 1) { background: var(--au-meter-weak); }
.auth__meter--2 i:nth-child(-n + 2) { background: var(--au-meter-fair); }
.auth__meter--3 i:nth-child(-n + 3) { background: var(--au-meter-strong); }

.auth__strength {
  min-width: 54px;
  font-size: 11.5px;
  color: #79828e;
  text-align: right;
}

/* ── messages ─────────────────────────────────────────────────────────────── */

.auth__error {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 14px;
  padding: 11px 13px;
  border: 1px solid var(--au-error-border);
  border-radius: 12px;
  background: var(--au-error-bg);
  font-size: 13px;
  line-height: 1.45;
  color: var(--au-error-text);
}

.auth__error svg {
  flex: none;
  margin-top: 1px;
}

.auth__notice {
  margin: 14px 0 0;
  font-size: 13px;
  color: #b4603a;
}

/* ── success card ─────────────────────────────────────────────────────────── */

.auth__done {
  text-align: center;
  animation: pa-pop .5s var(--ease-out) both;
}

.auth__done-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  margin-bottom: 18px;
  border: 1px solid var(--au-check-border);
  border-radius: 999px;
  background: var(--au-check-bg);
}

.auth__done h2 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 32px;
}

.auth__done p {
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--au-muted);
}

.auth__done a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 26px;
  border-radius: 14px;
  background: var(--au-accent);
  color: #ffffff;
  font-weight: 600;
  font-size: 16px;
  box-shadow: 0 12px 24px -14px rgba(121, 171, 217, 1);
  transition: background .18s, transform .16s;
}

.auth__done a:hover {
  background: var(--au-accent-hover);
  color: #ffffff;
  transform: translateY(-2px);
}

[hidden] {
  display: none !important;
}

/* ── responsive ───────────────────────────────────────────────────────────────
 * The design is desktop-only (min-width: 1080px). Everything below is added,
 * not designed — the mockup has no phone layout.
 *
 * The approach: below 900px the art panel stops being a column and becomes a
 * short banner above the form, keeping the gradient, the wordmark and the
 * headline. The floating game cards are dropped rather than shrunk, because at
 * that size they crowd the form without adding anything.
 */

@media (max-width: 1100px) {
  .auth {
    grid-template-columns: 40% 1fr;
  }

  .auth__pitch h1 {
    font-size: 44px;
  }

  .auth__card--b {
    display: none;
  }
}

@media (max-width: 900px) {
  .auth {
    grid-template-columns: 1fr;
    min-height: 100vh;
  }

  .auth__art {
    padding: 28px 24px 32px;
  }

  .auth__pitch {
    margin-top: 26px;
    max-width: none;
  }

  .auth__pitch h1 {
    font-size: 38px;
  }

  .auth__pitch p {
    margin-bottom: 0;
    font-size: 15.5px;
  }

  /* The perk list and the floating cards are the two things with no room. */
  .auth__perks,
  .auth__card {
    display: none;
  }

  .auth__pane {
    padding: 32px 24px 48px;
  }
}

@media (max-width: 420px) {
  .auth__art {
    padding: 22px 18px 26px;
  }

  .auth__pitch h1 {
    font-size: 31px;
  }

  .auth__brand img {
    width: 44px;
    height: 44px;
  }

  .auth__wordmark {
    font-size: 22px;
  }

  .auth__pane {
    padding: 28px 18px 40px;
  }

  .auth__title {
    font-size: 29px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ===== LOGIN ===== */
:root { --font-body: "Archivo", system-ui, sans-serif; --font-heading: "Coolvetica", sans-serif; }
*:focus-visible { outline: 2px solid #79abd9; outline-offset: 2px; }
input::placeholder { color: #a2abb6; }
@keyframes pa-bob { 0%,100% { transform: translateY(0) rotate(var(--tilt)); } 50% { transform: translateY(-12px) rotate(var(--tilt)); } }
@keyframes pa-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes pa-drift { 0%,100% { transform: translate(0,0) rotate(0); } 40% { transform: translate(14px,-18px) rotate(40deg); } 70% { transform: translate(-9px,-8px) rotate(-24deg); } }
body.lg-body { background: #fff; color: #101317; overflow: auto; }
.lg-body a { color: #4a83b8; text-decoration: none; }
.lg-body a:hover { color: #2f6da5; }
.lg-page { min-width: 1080px; min-height: 100vh; display: grid; grid-template-columns: 46% 1fr; font-family: var(--font-body); color: #101317; }
.lg-hero { position: relative; overflow: hidden; background: linear-gradient(166deg, #9cc4e6 0%, #79abd9 48%, #5f97cb 100%); padding: 40px; }
.lg-speck { position: absolute; background: rgba(255,255,255,.4); animation: pa-drift 13s ease-in-out infinite; }
.lg-speck--a { left: 12%; top: 30%; width: 15px; height: 15px; border-radius: 5px; }
.lg-speck--b { right: 16%; top: 66%; width: 11px; height: 11px; border-radius: 999px; background: rgba(255,255,255,.5); animation-duration: 15s; animation-delay: 1.3s; }
.lg-body .lg-brand, .lg-body .lg-brand:hover { position: relative; z-index: 3; display: inline-flex; align-items: center; gap: 11px; color: #fff; }
.lg-brand img { width: 52px; height: 52px; display: block; transition: transform .32s cubic-bezier(.34,1.6,.64,1); }
.lg-brand:hover img { transform: rotate(-9deg) scale(1.08); }
.lg-brand span { font-family: var(--font-heading); font-size: 25px; }
.lg-hero-copy { position: relative; z-index: 3; margin-top: 12vh; max-width: 380px; animation: pa-in .6s cubic-bezier(.2,.7,.3,1) both; }
.lg-hero-copy h1 { margin: 0 0 14px; font-family: var(--font-heading); font-weight: 400; font-size: 54px; line-height: .98; color: #fff; }
.lg-hero-copy p { margin: 0; font-size: 16.5px; line-height: 1.55; color: rgba(255,255,255,.9); text-wrap: pretty; }
.lg-float { position: absolute; animation: pa-bob 8s ease-in-out infinite; }
.lg-float--a { --tilt: -4deg; left: 8%; bottom: 12%; width: 180px; height: 225px; }
.lg-float--b { --tilt: 5deg; right: 6%; bottom: 22%; width: 158px; height: 198px; animation-duration: 9.4s; animation-delay: 1.1s; }
.lg-frame { width: 100%; height: 100%; box-sizing: border-box; border-radius: 20px; padding: 3px; background: linear-gradient(148deg, #fbfdff 0%, #cfdeed 22%, #93a9bf 48%, #eef4fa 70%, #a2b6c9 100%); box-shadow: 0 30px 46px -22px rgba(12,32,54,.6), inset 0 2px 0 rgba(255,255,255,.9); }
.lg-frame-inner { width: 100%; height: 100%; border-radius: 18px; overflow: hidden; }
.lg-frame-inner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lg-form-side { display: flex; align-items: center; justify-content: center; padding: 40px; }
.lg-form { width: 100%; max-width: 380px; animation: pa-in .55s cubic-bezier(.2,.7,.3,1) .08s both; }
.lg-title { margin: 0 0 6px; font-family: var(--font-heading); font-weight: 400; font-size: 34px; }
.lg-sub { margin: 0 0 28px; font-size: 14.5px; color: #5f6874; }
.lg-label { display: block; font-size: 13px; font-weight: 600; color: #3c454f; margin-bottom: 7px; }
.lg-label-row { display: flex; align-items: baseline; justify-content: space-between; margin: 18px 0 7px; }
.lg-label-row .lg-label { margin: 0; }
.lg-input { width: 100%; box-sizing: border-box; height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid #e2e8ef; background: #fff; font-family: var(--font-body); font-size: 15px; color: #101317; caret-color: #79abd9; transition: border-color .16s, box-shadow .16s; }
.lg-input:hover { border-color: #c7dcee; }
.lg-input:focus { outline: none; border-color: #79abd9; box-shadow: 0 0 0 3px rgba(121,171,217,.18); }
.lg-link-btn { border: 0; background: transparent; padding: 0; font-family: var(--font-body); font-size: 12.5px; color: #4a83b8; cursor: pointer; white-space: nowrap; }
.lg-link-btn:hover { color: #2f6da5; }
.lg-row { display: flex; align-items: center; margin: 16px 0 24px; }
.lg-row .lg-link-btn { margin-left: auto; font-size: 13.5px; }
.lg-check { display: flex; align-items: center; gap: 9px; border: 0; background: transparent; padding: 0; cursor: pointer; font-family: var(--font-body); font-size: 13.5px; color: #3c454f; }
.lg-check-box { width: 18px; height: 18px; box-sizing: border-box; border-radius: 6px; border: 1px solid #d7dee6; background: #fff; display: flex; align-items: center; justify-content: center; transition: background .16s, border-color .16s; }
.lg-check.is-on .lg-check-box { background: #79abd9; border-color: #79abd9; }
.lg-check:not(.is-on) .lg-check-box svg { display: none; }
.lg-submit { width: 100%; height: 50px; border-radius: 14px; border: 0; background: #79abd9; color: #fff; font-family: var(--font-body); font-weight: 600; font-size: 16px; cursor: pointer; box-shadow: 0 12px 24px -14px #79abd9; transition: background .18s, transform .16s; }
.lg-submit:hover { background: #5f97cb; transform: translateY(-2px); }
.lg-submit:active { background: #4f89bf; transform: none; }
.lg-notice { margin: 14px 0 0; font-size: 13px; color: #b4603a; }
.lg-divider { display: flex; align-items: center; gap: 12px; margin: 26px 0; }
.lg-divider span { flex: 1; height: 1px; background: #eceff4; }
.lg-divider em { font-style: normal; font-size: 12px; color: #a2abb6; }
.lg-roblox { width: 100%; height: 52px; border-radius: 14px; border: 0; background: #101317; color: #fff; font-family: var(--font-body); font-weight: 600; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 11px; box-shadow: 0 14px 26px -16px rgba(16,19,23,.9); transition: background .16s, transform .16s; }
.lg-roblox:hover { background: #232830; transform: translateY(-2px); }
.lg-roblox:active { transform: none; }
.lg-socials { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.lg-social { height: 46px; border-radius: 12px; border: 1px solid #e2e8ef; background: #fff; color: #2f3740; font-family: var(--font-body); font-weight: 600; font-size: 13.5px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: border-color .16s, background .16s; }
.lg-social:hover { border-color: #c7dcee; background: #f7fbfd; }
.lg-social svg, .lg-social svg path { fill: #2f3740; }

/* .lg-roblox and .lg-social are both <a> tags, so the generic ".lg-body a
   { color: #4a83b8 }" rule above (also from the pasted design) was
   silently winning over these two -- ".lg-body a" is a class+element
   selector, higher specificity than a single class, so it overrode their
   own color no matter what order either appeared in. Same values as
   .lg-roblox/.lg-social already declare above (#fff / #2f3740), just
   enough extra specificity for their own color to actually stick. */
.lg-body a.lg-roblox { color: #fff; }
.lg-body a.lg-social { color: #2f3740; }

/* ===== LOGIN 2a (frosted lobby on game wall) =====
   Ported from "Payama Login 2a.css". Scoped to .auth2-body so the dark
   theme, link colours and focus ring here never leak onto reset.html /
   verify.html, which also load this file and keep the old .auth__/.lg-
   design. Coolvetica and Archivo already come from fonts.css (site-wide),
   so no @font-face here and no shared --accent/--font-heading custom
   properties -- theme.css already defines those names for the whole site,
   so this block uses literal values instead of reusing/overriding them. */
.auth2-body { margin: 0; min-height: 100%; background: #0c0d10; color: #fafafa; font-family: "Archivo", system-ui, sans-serif; }
.auth2-body *:focus-visible { outline: 2px solid #79abd9; outline-offset: 2px; }
.auth2-body a { color: #a9c8e6; text-decoration: none; }
.auth2-body a:hover { color: #fff; }

/* Page + background */
.auth { position: relative; min-height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 40px 20px; box-sizing: border-box; }
.auth-bg { position: absolute; inset: -24px; width: calc(100% + 48px); height: calc(100% + 48px); object-fit: cover; filter: blur(4px) brightness(.48) saturate(1.2); display: block; pointer-events: none; }
.auth-shade { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(121,171,217,.2), rgba(12,13,16,.35) 60%, rgba(12,13,16,.7) 100%); pointer-events: none; }
.auth-brand { position: absolute; top: 22px; left: 26px; z-index: 2; display: flex; align-items: center; gap: 9px; color: #fff; }
.auth-brand:hover { color: #fff; }
.auth-brand img { width: 34px; height: 34px; display: block; }
.auth-brand span { font-family: "Coolvetica", sans-serif; font-size: 21px; }

/* Frosted card */
.auth-card { position: relative; z-index: 1; width: 100%; max-width: 350px; box-sizing: border-box; padding: 24px; border-radius: 22px; background: rgba(18,20,24,.62); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 40px 80px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.12); display: flex; flex-direction: column; }
.auth-title { margin: 0; font-family: "Coolvetica", sans-serif; font-weight: 400; font-size: 30px; line-height: 1.05; }
.auth-sub { margin: 4px 0 18px; font-size: 13px; color: rgba(255,255,255,.65); }
.auth-sub a { font-weight: 600; }

/* Icons: one colour via mask, inherits text colour */
.auth-icon { flex: none; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.auth-icon--roblox { --icon: url("/images/brand-roblox.svg"); width: 18px; height: 18px; }
.auth-icon--discord { --icon: url("/images/brand-discord.svg"); }
.auth-icon--github { --icon: url("/images/brand-github.svg"); }
.auth-icon--google { --icon: url("/images/brand-google.svg"); width: 15px; height: 15px; }

/* Buttons */
.auth-btn { font-family: "Archivo", system-ui, sans-serif; cursor: pointer; display: flex; align-items: center; justify-content: center; border: 0; text-decoration: none; transition: background .16s, border-color .16s, transform .16s, box-shadow .16s; }
.auth-roblox { height: 46px; border-radius: 13px; background: #fff; color: #101317; font-size: 14.5px; font-weight: 700; gap: 10px; width: 100%; }
.auth-roblox:hover { background: #eef2f6; color: #101317; transform: translateY(-1px); }
.auth-socials { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.auth-social { height: 40px; border-radius: 11px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: #fafafa; font-size: 12.5px; font-weight: 600; gap: 7px; }
.auth-social:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.22); color: #fafafa; }
/* .auth-roblox and .auth-social are <a> tags, so ".auth2-body a { color:
   #a9c8e6 }" above (class+element, higher specificity) was overriding
   their own color -- same bug/fix as the .lg-roblox/.lg-social block
   further up this file. */
.auth2-body a.auth-roblox { color: #101317; }
.auth2-body a.auth-social { color: #fafafa; }
.auth2-body a.auth-brand { color: #fff; }
.auth-submit { height: 42px; border-radius: 12px; background: #79abd9; color: #0d1a26; font-size: 14.5px; font-weight: 700; margin-top: 14px; width: 100%; box-shadow: 0 12px 24px -12px rgba(121,171,217,.8); }
.auth-submit:hover { background: #a9c8e6; color: #0d1a26; transform: translateY(-1px); }
.auth-submit:active, .auth-roblox:active { transform: none; }
.auth-submit:disabled { opacity: .6; cursor: default; transform: none; }

/* Divider */
.auth-divider { display: flex; align-items: center; gap: 10px; margin: 14px 0; font-size: 11.5px; color: rgba(255,255,255,.45); }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.12); }

/* Fields */
.auth-fields { display: flex; flex-direction: column; gap: 10px; }
.auth-field { display: flex; flex-direction: column; gap: 5px; }
.auth-label { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.7); }
.auth-label-row { display: flex; align-items: center; justify-content: space-between; }
.auth-label-row .auth-label { margin: 0; }
.auth-toggle { background: none; border: 0; padding: 0; font-family: "Archivo", system-ui, sans-serif; font-size: 11.5px; font-weight: 600; color: #a9c8e6; cursor: pointer; }
.auth-toggle:hover { color: #fff; }
.auth-input { height: 38px; box-sizing: border-box; width: 100%; border-radius: 10px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.12); padding: 0 12px; font-family: "Archivo", system-ui, sans-serif; font-size: 13.5px; color: #fafafa; caret-color: #79abd9; transition: border-color .16s, box-shadow .16s; }
.auth-input::placeholder { color: rgba(255,255,255,.4); }
.auth-input:hover { border-color: rgba(255,255,255,.22); }
.auth-input:focus { outline: none; border-color: #79abd9; box-shadow: 0 0 0 3px rgba(121,171,217,.2); }
.auth-input--bad { border-color: #d9775a; }

/* Password strength meter (signup only) */
.auth-meter { display: flex; align-items: center; gap: 4px; height: 0; overflow: hidden; opacity: 0; transition: height .16s, opacity .16s; margin-top: 0; }
.auth-meter--1, .auth-meter--2, .auth-meter--3 { height: 14px; opacity: 1; margin-top: 8px; }
.auth-meter i { flex: 0 0 26px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.14); font-style: normal; display: block; }
.auth-meter--1 i:nth-child(1) { background: #d9775a; }
.auth-meter--2 i:nth-child(1), .auth-meter--2 i:nth-child(2) { background: #e0a056; }
.auth-meter--3 i { background: #6fbf8b; }
.auth-strength { font-size: 11px; color: rgba(255,255,255,.55); margin-left: 2px; }

/* Checkboxes: remember-me, terms */
.auth-check { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12.5px; color: rgba(255,255,255,.7); }
.auth-check input { width: 15px; height: 15px; margin: 0; flex: none; accent-color: #79abd9; }

/* Login extras / sign-up note */
.auth-row { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: 12.5px; color: rgba(255,255,255,.7); }
.auth-terms { margin: 10px 0 0; font-size: 11px; color: rgba(255,255,255,.45); text-align: center; }
.auth-error { margin: 10px 0 0; font-size: 12.5px; color: #f0a58a; }

/* Success state (after sign-up) */
.auth-done { text-align: center; }
.auth-done-badge { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(121,171,217,.15); border: 1px solid rgba(121,171,217,.35); margin-bottom: 14px; }
.auth-done h2 { margin: 0 0 6px; font-family: "Coolvetica", sans-serif; font-weight: 400; font-size: 26px; }
.auth-done p { margin: 0 0 18px; font-size: 13px; color: rgba(255,255,255,.65); }
.auth-done a { display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 20px; border-radius: 12px; background: #79abd9; color: #0d1a26; font-weight: 700; font-size: 14.5px; }
.auth-done a:hover { background: #a9c8e6; color: #0d1a26; }