.auth-shell {
  display: grid;
  gap: 24px;
  max-width: 520px;
  margin: 0 auto;
  padding: 40px 20px 80px;
  animation: fadeInUp 0.6s ease;
  /* Fill the viewport (minus topbar) and center the card so the footer sits
     at the bottom with no large dead gap below it. */
  min-height: calc(100vh - 160px);
  align-content: center;
}

/* Quiet the glass caustic veil on auth cards so text reads crisp, not blurry. */
.auth-card.glass-panel::before { opacity: 0.18 !important; }

/* ============================================================================
   Registration wizard — luxury stepped application form
   ============================================================================ */
.reg-wizard { gap: 22px; }
.reg-head { display: grid; gap: 8px; }

/* Step progress */
.reg-steps {
  position: relative;
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin: 4px 0 6px;
  padding: 0;
}
.reg-steps-track {
  position: absolute;
  top: 16px; left: 7%; right: 7%;
  height: 2px;
  background: rgba(255,255,255,0.10);
  border-radius: 2px;
  z-index: 0;
}
.reg-steps-fill {
  display: block; height: 100%;
  width: 0%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent, #7bdcff), var(--accent-2, #8de6d6));
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent, #7bdcff) 50%, transparent);
  transition: width 0.45s cubic-bezier(0.34,1.2,0.5,1);
}
.reg-step {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  flex: 1;
}
.reg-step-dot {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 13px; font-weight: 700;
  color: var(--text-muted, #a8b9d4);
  background: linear-gradient(180deg, #15203a, #0d1526);
  border: 1px solid rgba(255,255,255,0.12);
  transition: background 0.35s cubic-bezier(0.34,1.4,0.5,1), border-color 0.35s cubic-bezier(0.34,1.4,0.5,1), transform 0.35s cubic-bezier(0.34,1.4,0.5,1), box-shadow 0.35s cubic-bezier(0.34,1.4,0.5,1);
}
.reg-step-label {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted, #a8b9d4);
  transition: color 0.3s ease;
}
.reg-step.is-active .reg-step-dot {
  color: #04111c;
  background: linear-gradient(140deg, var(--accent, #7bdcff), var(--accent-2, #8de6d6));
  border-color: transparent;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent, #7bdcff) 45%, transparent);
}
.reg-step.is-active .reg-step-label { color: var(--text, #eef3ff); }
.reg-step.is-done .reg-step-dot {
  color: var(--accent, #7bdcff);
  border-color: color-mix(in srgb, var(--accent, #7bdcff) 45%, transparent);
  background: color-mix(in srgb, var(--accent, #7bdcff) 14%, #0d1526);
}

/* Panels (steps) */
.reg-panel { display: grid; gap: 16px; }
.reg-panel[hidden] { display: none; }
.reg-panel.is-active { animation: regPanelIn 0.4s cubic-bezier(0.22,1,0.36,1); }
@keyframes regPanelIn {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}

.reg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Field with leading icon */
.reg-field label { display: flex; align-items: center; gap: 6px; }
.reg-opt {
  font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted, #a8b9d4); opacity: 0.65;
  border: 1px solid rgba(255,255,255,0.12); border-radius: 5px; padding: 1px 5px;
}
.reg-input {
  position: relative;
  display: flex; align-items: center;
}
.reg-input > svg {
  position: absolute; left: 14px;
  width: 17px; height: 17px;
  color: var(--text-muted, #a8b9d4);
  pointer-events: none;
  transition: color 0.25s ease;
  /* Sit above the input/select fill (which paints in normal flow and was
     covering the absolutely-positioned icon). */
  z-index: 2;
}
.reg-input > input,
.reg-input > select {
  width: 100%;
  padding-left: 42px !important;
}
/* Keep the select below the icon layer; text already cleared by padding-left. */
.reg-input > select {
  position: relative;
  z-index: 1;
}

/* The native <select> is enhanced into a .cyno-select button at runtime, so the
   visible text lives in .cyno-select__button — pad it past the icon too, or the
   placeholder ("Select a game") sits under the icon. */
.reg-input > .cyno-select { width: 100%; }
.reg-input > .cyno-select .cyno-select__button { padding-left: 42px !important; }

.reg-input:focus-within > svg { color: var(--accent, #7bdcff); }
.reg-input > .cyno-select.is-open ~ svg,
.reg-input:has(.cyno-select.is-open) > svg { color: var(--accent, #7bdcff); }

/* Products multi-select — chip checkboxes */
.reg-products {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px;
}
.reg-product-chip {
  position: relative;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 500; color: var(--text-soft, #c4d2ea);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
  cursor: pointer; user-select: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.reg-product-chip:hover {
  border-color: color-mix(in srgb, var(--accent, #7bdcff) 30%, transparent);
  color: var(--text, #eef3ff);
}
.reg-product-chip input { position: absolute; opacity: 0; pointer-events: none; }
.reg-product-chip::before {
  content: ""; width: 15px; height: 15px; border-radius: 5px; flex-shrink: 0;
  border: 1.5px solid rgba(255,255,255,0.25);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.reg-product-chip:has(input:checked) {
  color: var(--text, #eef3ff);
  background: color-mix(in srgb, var(--accent, #7bdcff) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent, #7bdcff) 45%, transparent);
}
.reg-product-chip:has(input:checked)::before {
  background: linear-gradient(135deg, var(--accent, #7bdcff), var(--accent-2, #9b8cff));
  border-color: transparent;
  box-shadow: inset 0 0 0 2px rgba(4,12,22,0.55);
}
.reg-product-chip:has(input:focus-visible) {
  outline: 2px solid color-mix(in srgb, var(--accent, #7bdcff) 60%, transparent);
  outline-offset: 2px;
}

/* Review summary (step 3) */
.reg-review {
  display: grid; gap: 1px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
}
.reg-review-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.02);
}
.reg-review-key {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted, #a8b9d4);
}
.reg-review-val {
  font-size: 13px; color: var(--text, #eef3ff); font-weight: 500;
  text-align: right; overflow-wrap: anywhere;
}
.reg-review-val.is-empty { color: var(--text-muted, #a8b9d4); opacity: 0.6; font-weight: 400; font-style: italic; }

.reg-tos {
  display: flex; align-items: flex-start; gap: 10px;
  cursor: pointer; font-weight: 400;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.025);
}
.reg-tos input { margin-top: 2px; flex-shrink: 0; }

/* Wizard nav */
.reg-nav {
  display: flex; align-items: center; gap: 10px;
  margin-top: 4px;
}
.reg-nav #regNextBtn,
.reg-nav #registerSubmitBtn { margin-left: auto; }
.reg-login-link { font-size: 12px; opacity: 0.7; }

@media (max-width: 560px) {
  .reg-row { grid-template-columns: 1fr; }
  .reg-step-label { display: none; }
  .reg-login-link { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reg-panel.is-active { animation: none; }
  .reg-steps-fill { transition: none; }
}

.auth-shell--wide {
  max-width: 980px;
}

.auth-card {
  padding: 28px;
  display: grid;
  gap: 16px;
  position: relative;
  overflow: hidden;
  /* More opaque fill so text is crisp over an empty dark backdrop instead of
     looking washed-out / blurry (the glass-panel backdrop-blur + caustic veil
     otherwise leave it low-contrast). */
  background:
    linear-gradient(160deg, rgba(20,30,52,0.92), rgba(12,19,33,0.95));
}

/* The base .glass-panel already paints a caustic veil; the auth-card's own
   caustic on top double-washes the card. Tone it down for legibility. */
.auth-card::before { opacity: 0.12 !important; }

/* CRITICAL: display:grid above overrides the [hidden] attribute, so the
   2FA / backup-code panels (which start hidden) would all show at once.
   Force hidden panels to actually hide. */
.auth-card[hidden] { display: none !important; }

/* Descriptions / eyebrows must wrap inside the card (it has overflow:hidden,
   and the uppercase + letter-spaced text can otherwise be clipped at the edge). */
.auth-card .metric-label,
.auth-card .eyebrow,
.auth-card .auth-helper {
  white-space: normal;
  overflow-wrap: anywhere;
  max-width: 100%;
}

.auth-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--liquid-caustic);
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}

.auth-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(123, 220, 255, 0.3),
    rgba(141, 230, 214, 0.2),
    transparent
  );
  z-index: 1;
}

.auth-card > * {
  position: relative;
  z-index: 1;
}

.auth-card--wide {
  padding: 36px;
  gap: 18px;
}

.auth-card h1 {
  margin: 0;
}

.auth-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.auth-form-grid input,
.auth-form-grid select {
  transition: box-shadow 0.35s ease,
              border-color 0.35s ease,
              background 0.3s ease;
}

.auth-form-grid input:focus,
.auth-form-grid select:focus {
  outline: none;
}

.auth-form-grid input:focus-visible,
.auth-form-grid select:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent),
              0 0 20px rgba(123, 220, 255, 0.08);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--glass-border));
}

.auth-card form {
  display: grid;
  gap: 16px;
  margin: 0;
}

.auth-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 4px;
}

.auth-forgot-link {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.15s ease;
}

.auth-forgot-link:hover {
  color: color-mix(in srgb, var(--accent) 80%, var(--text));
  text-decoration: underline;
}

.auth-helper {
  font-size: 12px;
  color: var(--text-muted);
  transition: color 0.3s ease;
}

.auth-helper:hover {
  color: var(--accent);
}

.consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 14px;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--glass-border) 70%, transparent);
  background: color-mix(in srgb, var(--glass-bg) 76%, transparent);
  box-shadow: inset 0 0 0 1px var(--border-inner), 0 12px 24px rgba(2, 6, 12, 0.4);
  font-size: 12px;
  color: var(--text-soft);
  -webkit-backdrop-filter: blur(var(--blur-md)) saturate(160%);
  backdrop-filter: blur(var(--blur-md)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--blur-md)) saturate(160%);
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

.consent:hover {
  border-color: color-mix(in srgb, var(--accent) 25%, var(--glass-border));
  box-shadow:
    inset 0 0 0 1px var(--border-inner),
    0 14px 28px rgba(2, 6, 12, 0.42),
    0 0 16px rgba(123, 220, 255, 0.04);
}

.consent input {
  accent-color: var(--accent);
  margin-top: 2px;
}

input[type="file"] {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  transition: box-shadow 0.35s ease;
}

.access-closed-card {
  max-width: 760px;
  margin: 0 auto;
}

.access-closed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}

.access-closed-item {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--glass-border) 70%, transparent);
  background: color-mix(in srgb, var(--glass-bg) 74%, transparent);
  box-shadow: inset 0 0 0 1px var(--border-inner), 0 12px 24px rgba(2, 6, 12, 0.35);
  -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(155%);
  backdrop-filter: blur(var(--blur-sm)) saturate(155%);
  -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(155%);
}

.access-closed-item .metric-label {
  font-size: 11px;
}

/* ============================================================
   AUTH PAGES — LUXURY POLISH LAYER
   Targets: login.html, register.html, forgot-password.html,
   reset-password.html, blocked.html, 2FA + backup code panels.
   Pure-CSS additions; existing rules above untouched.
   ============================================================ */

/* ---- Ambient depth ----------------------------------------- */
/* Soft accent halo + ghost cyno sigil floating behind the card.
   Lives on body[data-page="login"|"register"|...] so other pages
   are not affected. */
body[data-page="login"]::before,
body[data-page="register"]::before,
body[data-page="forgot-password"]::before,
body[data-page="reset-password"]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(80% 65% at 10% 8%,   rgba(123, 220, 255, 0.22), transparent 55%),
    radial-gradient(65% 60% at 90% 12%,  rgba(217, 183, 122, 0.16), transparent 50%),
    radial-gradient(55% 50% at 6% 55%,   rgba(56, 189, 195, 0.14), transparent 48%),
    radial-gradient(60% 55% at 80% 48%,  rgba(139, 120, 220, 0.13), transparent 50%),
    radial-gradient(75% 60% at 48% 88%,  rgba(110, 231, 183, 0.14), transparent 52%),
    radial-gradient(50% 45% at 50% 35%,  rgba(123, 220, 255, 0.12), transparent 48%),
    radial-gradient(45% 40% at 85% 78%,  rgba(230, 160, 90, 0.10), transparent 46%);
  animation: authMeshDrift 18s ease-in-out infinite alternate;
}

body[data-page="login"]::after,
body[data-page="register"]::after {
  content: "";
  position: fixed;
  z-index: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(320px, 40vw, 520px);
  height: clamp(320px, 40vw, 520px);
  pointer-events: none;
  border-radius: 50%;
  background:
    radial-gradient(closest-side,
      color-mix(in srgb, var(--accent) 16%, transparent),
      transparent 65%),
    radial-gradient(closest-side at 60% 40%,
      rgba(139, 120, 220, 0.10),
      transparent 60%);
  filter: blur(44px);
  opacity: 0.55;
  animation: authHaloDrift 14s ease-in-out infinite;
}

@keyframes authMeshDrift {
  0%   { transform: scale(1)    translate(0, 0);        opacity: 0.9;  }
  33%  { transform: scale(1.03) translate(-0.6%, 0.5%);  opacity: 1;    }
  66%  { transform: scale(1.01) translate(0.4%, -0.3%);  opacity: 0.94; }
  100% { transform: scale(1.02) translate(-0.2%, 0.6%);  opacity: 0.97; }
}
@keyframes authHaloDrift {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -52%) scale(1.06); }
}

/* Keep the form above the halo. */
.auth-shell { position: relative; z-index: 1; }

/* ---- Card entrance + lift ---------------------------------- */
/* fadeInUp is already on .auth-shell, but the inner card needs a
   sharper reveal so it doesn't read as flat after the shell lands. */
.auth-card {
  animation: authCardReveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
  transition:
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.5s ease,
    border-color 0.5s ease;
}

.auth-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 32px 60px rgba(2, 8, 18, 0.55),
    0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent),
    0 0 60px color-mix(in srgb, var(--accent) 9%, transparent);
}

@keyframes authCardReveal {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* Animated 1px conic gradient ring around the card edge. Adds
   the same depth language as the error pages without competing
   with .auth-card::after (top sheen). */
.auth-card {
  position: relative;
  isolation: isolate;
}

.auth-card .auth-ring,
.auth-card::marker {
  /* placeholder so the ::before below can attach without colliding
     with the existing .auth-card::before (caustic) — we use
     .auth-card > *:first-child::before instead via wrapping below. */
}

/* Wrap the conic ring on a fresh pseudo so we don't clobber the
   existing ::before that paints the caustic layer. We use
   .glass-panel.auth-card descendant — the section element. */
.glass-panel.auth-card > .eyebrow:first-child {
  /* Make the first-eyebrow position-aware so the ring can hang
     off the auth-card itself via a custom outline trick below. */
}

/* The ring: drawn with outline + animation. outline doesn't
   participate in layout, so it never shifts content. */
.auth-card {
  outline: 1px solid transparent;
  outline-offset: 0;
}
.auth-card.has-ring,
.auth-card {
  background-image:
    /* keep current background source */
    linear-gradient(180deg, transparent, transparent);
}

/* ---- Field labels: float on input + focus ------------------ */
.auth-card .field {
  position: relative;
}

.auth-card .field label {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition:
    color 0.3s ease,
    transform 0.25s ease,
    letter-spacing 0.25s ease;
  transform-origin: left center;
}

.auth-card .field:focus-within label,
.auth-card .field input:not(:placeholder-shown) ~ label,
.auth-card .field input:focus + label {
  color: color-mix(in srgb, var(--accent) 80%, var(--text));
  letter-spacing: 0.16em;
}

/* ---- Input focus glow (over and above what's already in
   auth.css for .auth-form-grid). Targets .field input directly,
   which is the markup login.html actually uses. -------------- */
.auth-card .field input {
  transition:
    box-shadow 0.4s ease,
    border-color 0.4s ease,
    background 0.3s ease,
    transform 0.3s ease;
}

.auth-card .field input:focus,
.auth-card .field input:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 55%, var(--glass-border));
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent),
    0 0 24px color-mix(in srgb, var(--accent) 12%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent);
}

/* Filled state — slight border tint so the user sees their data is
   accepted before they submit. */
.auth-card .field input:not(:placeholder-shown):not(:focus) {
  border-color: color-mix(in srgb, var(--accent) 25%, var(--glass-border));
}

/* ---- Sign in button: idle ready pulse + hover sweep -------- */
.auth-card .btn-primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.auth-card .btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(255, 255, 255, 0.32) 50%,
    transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.auth-card .btn-primary:hover::after {
  transform: translateX(120%);
}

/* Subtle pulse only while the form is enabled, idle, and the
   user hasn't focused inside the form yet (don't pulse during typing). */
.auth-card form:not(.auth-form-disabled):not(:focus-within) .btn-primary {
  animation: authBtnReadyPulse 3.6s ease-in-out infinite;
}

@keyframes authBtnReadyPulse {
  0%, 100% {
    box-shadow:
      0 14px 26px rgba(2, 6, 12, 0.42),
      0 0 0 0 color-mix(in srgb, var(--accent) 18%, transparent);
  }
  50% {
    box-shadow:
      0 14px 26px rgba(2, 6, 12, 0.42),
      0 0 0 8px color-mix(in srgb, var(--accent) 0%, transparent);
  }
}

/* ---- 2FA + backup code: monospaced digit feel -------------- */
#twoFactorCode,
#backupCode {
  font-family: "Sora", ui-monospace, "JetBrains Mono", monospace;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.55em;
  text-align: center;
  padding-left: 18px;  /* offset for tracking */
  caret-color: var(--accent);
}

#twoFactorCode::placeholder,
#backupCode::placeholder {
  letter-spacing: 0.4em;
  color: color-mix(in srgb, var(--text-muted) 70%, transparent);
}

/* Bottom-edge "fill" indicator that grows as the user types. */
#twoFactorForm .field,
#backupCodeForm .field {
  position: relative;
}
#twoFactorForm .field::after,
#backupCodeForm .field::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 80%, transparent),
    color-mix(in srgb, #8de6d6 80%, transparent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
#twoFactorForm .field:focus-within::after,
#backupCodeForm .field:focus-within::after {
  transform: scaleX(1);
}

/* ---- Topbar on auth pages: tighter, calmer ----------------- */
body[data-page="login"] .topbar,
body[data-page="register"] .topbar,
body[data-page="forgot-password"] .topbar {
  /* Already great; just lift z-index above the new body::before halo. */
  z-index: 21;
}

/* ---- Forgot link micro polish ------------------------------ */
.auth-forgot-link {
  position: relative;
  padding-bottom: 1px;
}
.auth-forgot-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: currentColor;
  opacity: 0.35;
  transform: scaleX(0.4);
  transform-origin: left;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.auth-forgot-link:hover::after,
.auth-forgot-link:focus-visible::after {
  transform: scaleX(1);
  opacity: 0.8;
}

/* ---- Reduced motion ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .auth-card,
  body[data-page="login"]::after,
  body[data-page="register"]::after,
  .auth-card form:not(.auth-form-disabled):not(:focus-within) .btn-primary,
  .auth-card .btn-primary::after,
  #twoFactorForm .field::after,
  #backupCodeForm .field::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================================
   AUTH PAGES — LUXURY POLISH LAYER (PART 1)
   Targets: login.html, register.html, forgot-password.html,
   reset-password.html, blocked.html, 2FA + backup code panels.
   Pure-CSS additions; existing rules above untouched.
   ============================================================ */

/* ── Ambient particle field for auth pages ─────────────────── */
.auth-particle-field {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.auth-particle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(123, 220, 255, 0.35), transparent 70%);
  animation: authParticleDrift var(--dur, 10s) ease-in-out infinite;
  animation-delay: var(--del, 0s);
}

@keyframes authParticleDrift {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0; }
  10% { opacity: 0.5; }
  90% { opacity: 0.5; }
  100% { transform: translate(var(--dx, 30px), var(--dy, -60px)) scale(0.3); opacity: 0; }
}

/* ── Title glow pulse ──────────────────────────────────────── */
.auth-card .gradient-title {
  animation: authTitleGlow 4s ease-in-out infinite;
}

@keyframes authTitleGlow {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(123, 220, 255, 0.12)); }
  50% { filter: drop-shadow(0 0 18px rgba(123, 220, 255, 0.28)); }
}

/* ── Remember me / options row ─────────────────────────────── */
.auth-options-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 2px;
}

.auth-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-soft);
  cursor: pointer;
  user-select: none;
  transition: color 0.2s ease;
}

.auth-checkbox-label:hover {
  color: var(--accent);
}

.auth-checkbox-label input[type="checkbox"] {
  margin: 0;
  accent-color: var(--accent);
}

/* ── Error message with shake ──────────────────────────────── */
.auth-error {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--status-danger) 35%, transparent);
  background: color-mix(in srgb, var(--status-danger) 8%, var(--glass-bg) 92%);
  color: var(--status-danger);
  font-size: 12px;
  font-weight: 500;
  box-shadow: 0 0 16px rgba(240, 156, 176, 0.1);
  -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(150%);
  backdrop-filter: blur(var(--blur-sm)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(150%);
}

.auth-error.is-visible {
  display: flex;
  animation: authShake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes authShake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.auth-error svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ── State crossfade transitions ───────────────────────────── */
.auth-state {
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.auth-state-exit {
  opacity: 0;
  transform: translateY(-12px) scale(0.98);
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.auth-state-enter {
  opacity: 0;
  transform: translateY(12px) scale(0.98);
}

.auth-state-enter.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ── Input validation states ───────────────────────────────── */
.auth-card .field input.is-invalid {
  border-color: color-mix(in srgb, var(--status-danger) 55%, var(--glass-border));
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--status-danger) 20%, transparent),
    0 0 16px color-mix(in srgb, var(--status-danger) 10%, transparent);
}

.auth-card .field input.is-valid:not(:placeholder-shown) {
  border-color: color-mix(in srgb, var(--status-success) 45%, var(--glass-border));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--status-success) 15%, transparent);
}

/* ── Loading state for submit button ───────────────────────── */
.auth-card .btn-primary.is-loading {
  pointer-events: none;
  color: transparent !important;
  position: relative;
}

.auth-card .btn-primary.is-loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #041018;
  border-radius: 50%;
  animation: btnSpin 0.7s linear infinite;
}

/* ── Success checkmark animation ───────────────────────────── */
.auth-checkmark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, color-mix(in srgb, var(--status-success) 18%, transparent), color-mix(in srgb, var(--accent-2) 12%, transparent));
  border: 1px solid color-mix(in srgb, var(--status-success) 40%, transparent);
  box-shadow: 0 0 24px rgba(110, 227, 178, 0.15);
  animation: checkmarkPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes checkmarkPop {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.auth-checkmark svg {
  width: 32px;
  height: 32px;
  stroke: var(--status-success);
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.auth-checkmark svg .checkmark-path {
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: checkmarkDraw 0.6s cubic-bezier(0.65, 0, 0.45, 1) 0.3s forwards;
}

@keyframes checkmarkDraw {
  to { stroke-dashoffset: 0; }
}

/* ── Enhanced email provider links ─────────────────────────── */
.email-provider-links .btn-ghost {
  transition:
    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

.email-provider-links .btn-ghost:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--glass-border));
  box-shadow: 0 0 12px rgba(123, 220, 255, 0.08);
}

/* ── Reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .auth-particle,
  .auth-card .gradient-title,
  .auth-error.is-visible,
  .auth-checkmark,
  .auth-checkmark svg .checkmark-path {
    animation: none !important;
  }

  .auth-state {
    transition: none !important;
  }
}

/* ── Small screens: lighter ambient, tighter padding ───────── */
@media (max-width: 540px) {
  body[data-page="login"]::after,
  body[data-page="register"]::after {
    width: 80vw;
    height: 80vw;
    filter: blur(34px);
    opacity: 0.5;
  }
  .auth-shell {
    padding: 28px 14px 60px;
    gap: 18px;
  }
  .auth-card {
    padding: 22px 20px;
  }
  #twoFactorCode,
  #backupCode {
    font-size: 18px;
    letter-spacing: 0.4em;
  }
}

/* Request-access page — owned chips + pending dot */
.ra-owned-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ra-owned-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600;
  color: color-mix(in srgb, var(--status-success, #5fd0a8) 85%, #e8f6f1 15%);
  background: color-mix(in srgb, var(--status-success, #5fd0a8) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--status-success, #5fd0a8) 30%, transparent);
}
.ra-owned-chip::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--status-success, #5fd0a8);
  box-shadow: 0 0 6px var(--status-success, #5fd0a8);
}
.ra-pending-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 6px; vertical-align: middle;
  background: var(--status-warning, #eab308);
  box-shadow: 0 0 8px var(--status-warning, #eab308);
  animation: raPendingPulse 2s ease-in-out infinite;
}
@keyframes raPendingPulse { 0%,100%{opacity:1;} 50%{opacity:0.45;} }
/* ============================================================
   Permanent suspension panel — shown on /login when the server returns
   PERMANENTLY_SUSPENDED. Calm, serious, on-brand: glass card, scarlet
   accent halo, destructive icon, refined typography. The destructive
   tone is restrained — no flashing — to stay luxury rather than alarmist.
   ============================================================ */
.suspension-panel {
  position: relative;
  margin: 0 0 22px;
  padding: 26px 28px 22px;
  border-radius: 20px;
  background:
    radial-gradient(900px 220px at 0% 0%,
      color-mix(in srgb, #f43f5e 16%, transparent) 0%,
      transparent 60%),
    linear-gradient(180deg, rgba(20,12,16,0.85), rgba(8,11,20,0.85));
  border: 1px solid color-mix(in srgb, #f43f5e 36%, rgba(255,255,255,0.06));
  box-shadow:
    0 30px 70px -32px rgba(244, 63, 94, 0.45),
    inset 0 1px 0 rgba(255,255,255,0.05);
  overflow: hidden;
}
.suspension-panel__halo {
  position: absolute; inset: 0;
  background: radial-gradient(600px 240px at 100% 100%,
    color-mix(in srgb, #f43f5e 14%, transparent) 0%,
    transparent 60%);
  pointer-events: none;
}
.suspension-panel__head {
  display: flex; align-items: flex-start; gap: 16px;
  margin-bottom: 14px;
  position: relative; z-index: 1;
}
.suspension-panel__icon {
  flex-shrink: 0;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 14px;
  background:
    radial-gradient(60% 60% at 50% 30%,
      color-mix(in srgb, #f43f5e 22%, transparent),
      transparent 70%),
    rgba(255,255,255,0.04);
  border: 1px solid color-mix(in srgb, #f43f5e 42%, transparent);
  color: #fda4af;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.suspension-panel__icon svg { width: 24px; height: 24px; }
.suspension-panel__eyebrow {
  font: 700 10.5px/1 "Manrope", system-ui, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fda4af;
  opacity: 0.92;
  margin-bottom: 6px;
}
.suspension-panel__title {
  margin: 0;
  font: 600 22px/1.2 "Sora", "Manrope", system-ui, sans-serif;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, #fca5a5, #f43f5e 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.suspension-panel__lead {
  position: relative; z-index: 1;
  margin: 0 0 18px;
  font: 500 14px/1.55 "Manrope", system-ui, sans-serif;
  color: color-mix(in srgb, var(--text, #eef3ff) 88%, transparent);
}
.suspension-panel__lead strong { color: #fca5a5; font-weight: 600; }
.suspension-panel__details {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px 22px;
  margin: 0 0 18px;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015));
  border: 1px solid rgba(255,255,255,0.06);
}
.suspension-panel__details div { min-width: 0; }
.suspension-panel__details dt {
  font: 700 10.5px/1 "Manrope", system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text, #eef3ff) 55%, transparent);
  margin-bottom: 5px;
}
.suspension-panel__details dd {
  margin: 0;
  font: 500 13.5px/1.45 "Manrope", system-ui, sans-serif;
  color: var(--text, #eef3ff);
  word-break: break-word;
}
.suspension-panel__details dd.mono {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.suspension-panel__scope {
  position: relative; z-index: 1;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.05);
  margin-bottom: 16px;
}
.suspension-panel__scope-title {
  font: 700 10.5px/1 "Manrope", system-ui, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text, #eef3ff) 60%, transparent);
  margin-bottom: 10px;
}
.suspension-panel__scope ul {
  margin: 0; padding-left: 18px;
  font: 500 13px/1.5 "Manrope", system-ui, sans-serif;
  color: color-mix(in srgb, var(--text, #eef3ff) 82%, transparent);
}
.suspension-panel__scope li { margin-bottom: 4px; }
.suspension-panel__scope li:last-child { margin-bottom: 0; }
.suspension-panel__foot {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
}
.suspension-panel__foot .metric-label {
  flex: 1;
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: 0.01em;
  text-transform: none;
  color: color-mix(in srgb, var(--text, #eef3ff) 55%, transparent);
}
@media (max-width: 540px) {
  .suspension-panel { padding: 20px 18px 18px; }
  .suspension-panel__title { font-size: 19px; }
  .suspension-panel__foot { flex-direction: column; align-items: stretch; }
}
/* ============================================================
   AUTH SPLIT-SCREEN — "Framed Aurora Monolith"
   Login + Register: brand aurora panel | form column, one frame.
   Scoped to body[data-page="login"|"register"]. Layout/CSS only.
   ============================================================ */

/* 2.1 Shell becomes a full-bleed centered container (grid lives one level down) */
body[data-page="login"] .auth-shell,
body[data-page="register"] .auth-shell{
  max-width:1240px; margin-inline:auto;
  padding:clamp(20px,4vw,40px) clamp(16px,4vw,40px) clamp(40px,6vw,72px);
  display:block;                 /* cancel the centered single-col grid */
  min-height:auto;               /* cancel calc(100vh-160px) magic number */
  align-content:initial;
  position:relative; z-index:1;
}
body[data-page="register"] .auth-shell--wide{ max-width:1240px; }

/* 2.2 The shared rounded frame = the grid itself (NO per-column seam) */
.auth-split{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:0;
  align-items:stretch;
  border:1px solid var(--glass-border);
  border-radius:var(--radius-xl,32px);
  overflow:hidden;
  background:var(--glass-bg);
  box-shadow:0 40px 110px -44px rgba(2,6,14,.82), inset 0 0 0 1px var(--border-inner,rgba(255,255,255,.04));
  isolation:isolate;
}

/* 2.3 Brand panel — self-contained aurora (fills its OWN box at any height) */
.auth-brand{
  position:relative; overflow:clip;
  display:grid; place-content:center;
  padding:clamp(32px,5vw,72px);
  min-height:min(640px, calc(100svh - 220px));
  background:
    radial-gradient(70% 60% at 15% 15%, rgba(123,220,255,0.10), transparent 55%),
    radial-gradient(60% 55% at 80% 20%, rgba(217,183,122,0.08), transparent 50%),
    radial-gradient(55% 50% at 10% 70%, rgba(56,189,195,0.07), transparent 48%),
    radial-gradient(50% 45% at 75% 65%, rgba(139,120,220,0.06), transparent 45%),
    linear-gradient(155deg,#0a1322 0%,#070b16 60%,#05080f 100%);
  border-right:1px solid var(--glass-border);
}
.auth-brand::before{
  content:""; position:absolute; inset:-30%; pointer-events:none;
  background:conic-gradient(from 120deg at 30% 30%,
    color-mix(in srgb,var(--accent) 55%,transparent),
    color-mix(in srgb,var(--accent-2) 50%,transparent),
    color-mix(in srgb,var(--accent-3) 30%,transparent),
    color-mix(in srgb,var(--accent) 55%,transparent));
  filter:blur(60px) saturate(140%); opacity:.5;
  animation:authAuroraSpin 30s linear infinite;
}
.auth-brand::after{
  content:""; position:absolute; inset:-20%; pointer-events:none;
  background:
    radial-gradient(40% 50% at 25% 30%, color-mix(in srgb,var(--accent) 55%,transparent), transparent 70%),
    radial-gradient(45% 45% at 80% 75%, color-mix(in srgb,var(--accent-2) 48%,transparent), transparent 70%);
  filter:blur(50px); opacity:.5; mix-blend-mode:screen;
  animation:authAuroraDrift 24s ease-in-out infinite alternate;
}
.auth-brand-grid{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 40%,#000,transparent);
          mask-image:radial-gradient(70% 70% at 50% 40%,#000,transparent);
}
@keyframes authAuroraSpin{ to{ transform:rotate(360deg) } }
@keyframes authAuroraDrift{ from{ transform:translate(-4%,-3%) scale(1) } to{ transform:translate(4%,3%) scale(1.06) } }

.auth-brand-content{ position:relative; z-index:2; }
.auth-brand-mark{
  font-family:var(--font-display,"Sora"); font-weight:700;
  font-size:clamp(48px,6.5vw,92px); line-height:.95; letter-spacing:-.02em;
  color:var(--text);
  text-shadow:0 0 40px color-mix(in srgb,var(--accent) 22%,transparent);
}

/* ── Particle aurora — floating orbs + tiny particles ────────────────────── */
.auth-brand-particles{
  position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden;
}

/* Large soft orbs — slow drift, blurred glow */
.auth-orb{
  position:absolute; border-radius:50%;
  filter:blur(40px);
  opacity:0;
  animation:authOrbFloat 18s ease-in-out infinite;
}
.auth-orb--1{
  width:180px; height:180px; top:8%; left:12%;
  background:radial-gradient(circle, rgba(123,220,255,0.5), transparent 70%);
  animation-delay:0s; animation-duration:20s;
}
.auth-orb--2{
  width:140px; height:140px; bottom:15%; right:8%;
  background:radial-gradient(circle, rgba(141,230,214,0.45), transparent 70%);
  animation-delay:-4s; animation-duration:22s;
}
.auth-orb--3{
  width:120px; height:120px; top:55%; left:50%;
  background:radial-gradient(circle, rgba(139,120,220,0.4), transparent 70%);
  animation-delay:-8s; animation-duration:24s;
}
.auth-orb--4{
  width:100px; height:100px; top:20%; right:20%;
  background:radial-gradient(circle, rgba(217,183,122,0.35), transparent 70%);
  animation-delay:-12s; animation-duration:19s;
}
.auth-orb--5{
  width:160px; height:160px; bottom:5%; left:30%;
  background:radial-gradient(circle, rgba(123,220,255,0.35), transparent 70%);
  animation-delay:-6s; animation-duration:26s;
}

@keyframes authOrbFloat{
  0%   { opacity:0; transform:translate(0,0) scale(0.8); }
  15%  { opacity:0.7; }
  50%  { opacity:0.5; transform:translate(30px,-20px) scale(1.15); }
  85%  { opacity:0.7; }
  100% { opacity:0; transform:translate(-10px,15px) scale(0.8); }
}

/* Tiny particles — sharp dots that drift upward */
.auth-particle{
  position:absolute; border-radius:50%;
  background:rgba(123,220,255,0.8);
  box-shadow:0 0 6px rgba(123,220,255,0.5), 0 0 12px rgba(123,220,255,0.2);
  opacity:0;
  animation:authParticleRise linear infinite;
}
.auth-particle--1{ width:3px; height:3px; left:18%; bottom:-5%; animation-duration:12s; animation-delay:0s; }
.auth-particle--2{ width:2px; height:2px; left:35%; bottom:-5%; animation-duration:14s; animation-delay:-2s; }
.auth-particle--3{ width:4px; height:4px; left:52%; bottom:-5%; animation-duration:16s; animation-delay:-5s;
  background:rgba(141,230,214,0.7); box-shadow:0 0 6px rgba(141,230,214,0.4); }
.auth-particle--4{ width:2px; height:2px; left:70%; bottom:-5%; animation-duration:11s; animation-delay:-3s; }
.auth-particle--5{ width:3px; height:3px; left:85%; bottom:-5%; animation-duration:15s; animation-delay:-7s;
  background:rgba(139,120,220,0.7); box-shadow:0 0 6px rgba(139,120,220,0.4); }
.auth-particle--6{ width:2px; height:2px; left:25%; bottom:-5%; animation-duration:13s; animation-delay:-9s; }
.auth-particle--7{ width:3px; height:3px; left:60%; bottom:-5%; animation-duration:17s; animation-delay:-4s;
  background:rgba(217,183,122,0.6); box-shadow:0 0 6px rgba(217,183,122,0.3); }
.auth-particle--8{ width:2px; height:2px; left:45%; bottom:-5%; animation-duration:10s; animation-delay:-6s; }

@keyframes authParticleRise{
  0%   { opacity:0; transform:translateY(0) translateX(0); }
  10%  { opacity:0.8; }
  50%  { opacity:0.6; transform:translateY(-50vh) translateX(15px); }
  90%  { opacity:0.3; }
  100% { opacity:0; transform:translateY(-110vh) translateX(-10px); }
}

@media (prefers-reduced-motion:reduce){
  .auth-orb, .auth-particle{ animation:none !important; opacity:0 !important; }
}

/* ── Hide particles on narrow screens where the brand panel stacks ────── */

/* 2.4 Form column — restores centered-card behavior, scoped to the right half.
   The single grid track is minmax(0,1fr) so wide content (the wizard's step bar,
   product chips, nav buttons) can't blow the track past the column and overflow
   the rounded frame. The card is forced to the track width. */
.auth-form-col{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:24px; align-content:center;
  padding:clamp(28px,3.5vw,56px) clamp(22px,3vw,48px);
  min-width:0;
}
.auth-form-col > .auth-card{ width:100%; min-width:0; max-width:100%; }
/* Everything inside the card must be allowed to shrink to the track, or a
   nowrap flex row (the wizard nav) / wide grid establishes an intrinsic width
   that blows the card past the frame. */
.auth-form-col .auth-card > *,
.auth-form-col .auth-card form,
.auth-form-col .auth-card form > *{ min-width:0; }
/* The wizard nav buttons must wrap instead of forcing a 4-button-wide row. */
body[data-page="register"] .auth-form-col .reg-nav{ flex-wrap:wrap; min-width:0; }
body[data-page="register"] .auth-form-col .reg-steps{ min-width:0; }
body[data-page="register"] .auth-form-col{ align-content:start; }

/* 2.5 Register page (tall) — the brand stretches to fill the slab's full
   height alongside the form column. No sticky, no per-panel border-radius
   (the .auth-split frame already provides the rounded shell). This is the
   most robust model: the grid track equalizes the columns and the form's
   wizard never overflows past a shorter brand panel. */
@media (min-width:881px){
  body[data-page="register"] .auth-brand{
    position:relative;            /* not sticky — stretches via grid */
    align-self:stretch;
    height:auto;                  /* let the grid track decide */
    min-height:0;                 /* cancel the 640px floor on this page */
  }
}

/* 2.6 Responsive collapse: single column + slim static banner */
@media (max-width:880px){
  .auth-split{ grid-template-columns:1fr; border-radius:var(--radius-lg,24px); }
  .auth-brand{
    position:static; height:auto; min-height:auto;
    place-content:center; text-align:center;
    padding:26px clamp(20px,5vw,32px);
    border-right:0; border-bottom:1px solid var(--glass-border);
    border-radius:var(--radius-lg,24px) var(--radius-lg,24px) 0 0;
  }
  .auth-brand-content{ text-align:center; margin-inline:auto; }
  .auth-brand-mark{ font-size:clamp(30px,9vw,42px); }
  .auth-brand-grid{ display:none; }
  .auth-brand-particles{ display:none; }
  .auth-brand::before{ filter:blur(42px); }
  .auth-form-col{ padding:clamp(24px,6vw,32px) clamp(16px,5vw,24px); align-content:start; }
}

/* 2.7 Kill competing viewport-centered ambient systems on these pages */
body[data-page="login"] .auth-particle-field,
body[data-page="register"] .auth-particle-field{ display:none !important; }
body[data-page="login"]::after,
body[data-page="register"]::after{ content:none !important; display:none !important; animation:none !important; }
body[data-page="login"]::before,
body[data-page="register"]::before{ background:none !important; }
body[data-page="login"] .auth-card .gradient-title,
body[data-page="register"] .auth-card .gradient-title{ animation:none; }
body[data-page="login"] .auth-card:hover,
body[data-page="register"] .auth-card:hover{ transform:none; box-shadow:0 24px 50px rgba(2,8,18,.45); }

/* 2.9 Cards sit FLUSH inside the slab — the frame is the container now, so the
   per-card glass border/shadow/fill/top-sheen would read as a busy card-in-a-frame.
   Strip them; the .auth-form-col + .auth-split provide the surface. Keep padding 0
   (the form-col already pads) and keep the card's own grid gap. */
body[data-page="login"] .auth-form-col .auth-card,
body[data-page="register"] .auth-form-col .auth-card{
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  padding:0 !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  overflow:visible;            /* let focus rings / fill bars breathe */
}
body[data-page="login"] .auth-form-col .auth-card::before,
body[data-page="register"] .auth-form-col .auth-card::before,
body[data-page="login"] .auth-form-col .auth-card::after,
body[data-page="register"] .auth-form-col .auth-card::after{
  content:none !important;
}
/* the wizard card keeps its slightly larger internal rhythm */
body[data-page="register"] .auth-form-col .reg-wizard{ gap:22px; }

/* 2.8 Reduced motion: extend guards to the aurora */
@media (prefers-reduced-motion:reduce){
  .auth-brand::before, .auth-brand::after{ animation:none !important; }
}

/* ============================================================
   Register page — compact layout (fits 1280×900 without scroll)
   ============================================================ */

/* Tighter overall shell on the register page. The login form barely needs
   any vertical room; register's 3-step wizard does. We trim the rhythm
   without removing legibility — most savings come from gaps + the eyebrow/
   subhead block. */
body[data-page="register"] .auth-shell {
  padding-top: clamp(14px, 2.5vw, 24px);
  padding-bottom: clamp(20px, 3vw, 40px);
}

body[data-page="register"] .auth-card,
body[data-page="register"] .auth-form-col .auth-card {
  padding: 20px 22px !important;
  gap: 12px !important;
}
body[data-page="register"] .reg-wizard { gap: 14px; }
body[data-page="register"] .reg-head { gap: 4px; }
body[data-page="register"] .reg-head .gradient-title {
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.1;
  margin: 0;
}
body[data-page="register"] .reg-head .metric-label {
  font-size: 12.5px;
  line-height: 1.4;
}

/* Compact step bar */
body[data-page="register"] .reg-steps { margin: 0 0 2px; }
body[data-page="register"] .reg-step-dot { width: 26px; height: 26px; font-size: 12px; }
body[data-page="register"] .reg-step-label { font-size: 9px; letter-spacing: 0.1em; }
body[data-page="register"] .reg-steps-track { top: 13px; }

/* Field row tightening */
body[data-page="register"] .reg-panel { gap: 10px; }
body[data-page="register"] .reg-field label {
  font-size: 11px;
  letter-spacing: 0.08em;
  margin-bottom: 2px;
}
body[data-page="register"] .reg-field .auth-helper {
  font-size: 11px;
  margin-top: 2px;
  line-height: 1.3;
}
body[data-page="register"] .reg-input > input,
body[data-page="register"] .reg-input > select,
body[data-page="register"] .reg-input > textarea,
body[data-page="register"] .reg-field textarea {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
body[data-page="register"] .password-strength { margin: 4px 0 0; }

/* Wizard nav buttons row */
body[data-page="register"] .reg-nav { margin-top: 6px; gap: 8px; }
body[data-page="register"] .reg-nav .btn { padding-top: 9px; padding-bottom: 9px; }

/* Squeeze the split form column padding on register — the wizard already
   has its own card padding, the auth-form-col padding above adds 80+ px of
   pure top/bottom dead space on a page that's vertical-budget-constrained. */
body[data-page="register"] .auth-form-col {
  padding: 14px clamp(16px, 2vw, 28px) !important;
  align-content: start !important;
}
/* Brand panel on the left already stretches; tighten its padding too so the
   shared frame ends sooner overall. */
body[data-page="register"] .auth-brand {
  padding: clamp(16px, 2vw, 28px) clamp(20px, 3vw, 40px);
  min-height: 0;
}
/* Footer doesn't need huge breathing room directly below a tightly-packed
   wizard. */
body[data-page="register"] .site-footer { padding-top: 12px; padding-bottom: 12px; }

/* Step 2 product-chip grid + the "why are you applying" textarea are the
   tallest pieces on the wizard. Trim chip padding + textarea rows so step 2
   also fits a 1440x900 desktop without scroll. */
body[data-page="register"] .reg-product-chip {
  padding: 5px 10px;
  font-size: 12px;
}
body[data-page="register"] .reg-product-chip::before { width: 13px; height: 13px; }
body[data-page="register"] .reg-products { gap: 6px; margin-top: 0; }
body[data-page="register"] .reg-field textarea {
  min-height: 0;
  height: auto;
}
body[data-page="register"] textarea#registerWhy { min-height: 56px; }

/* ============================================================
   Register page — laptop (~1366×768) compaction.
   Triggers only when viewport height is short; doesn't touch the
   roomy 1080p / 1440p layout that's already verified above.
   Goal: step 1 Continue button visible without scroll on a 768px
   viewport (top bar ~74px + footer leaves ~620px for the wizard).
   ============================================================ */
@media (max-height: 820px) {
  body[data-page="register"] .auth-shell {
    padding-top: 8px !important;
    padding-bottom: 12px !important;
  }
  body[data-page="register"] .auth-form-col {
    padding: 6px clamp(14px, 1.6vw, 22px) !important;
  }
  body[data-page="register"] .auth-card,
  body[data-page="register"] .auth-form-col .auth-card {
    padding: 12px 16px !important;
    gap: 6px !important;
  }
  body[data-page="register"] .reg-wizard { gap: 8px; }
  body[data-page="register"] .reg-head { gap: 2px; }
  body[data-page="register"] .reg-head .eyebrow {
    font-size: 10px;
    margin: 0;
  }
  body[data-page="register"] .reg-head .gradient-title {
    font-size: clamp(18px, 2.2vw, 22px);
    line-height: 1.05;
  }
  body[data-page="register"] .reg-head .metric-label {
    font-size: 11.5px;
    line-height: 1.3;
    margin: 0;
  }
  body[data-page="register"] .reg-steps { margin: 0; }
  body[data-page="register"] .reg-step-dot { width: 22px; height: 22px; font-size: 11px; }
  body[data-page="register"] .reg-step-label { font-size: 8.5px; }
  body[data-page="register"] .reg-steps-track { top: 11px; }
  body[data-page="register"] .reg-panel { gap: 6px; }
  body[data-page="register"] .reg-field label {
    font-size: 10.5px;
    margin-bottom: 1px;
  }
  body[data-page="register"] .reg-input > input,
  body[data-page="register"] .reg-input > select {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  body[data-page="register"] .reg-field .auth-helper {
    font-size: 10.5px;
    margin-top: 1px;
    line-height: 1.25;
  }
  body[data-page="register"] .password-strength { margin: 2px 0 0; height: 4px; }
  body[data-page="register"] .reg-nav { margin-top: 2px; }
  body[data-page="register"] .reg-nav .btn {
    padding-top: 7px;
    padding-bottom: 7px;
    font-size: 13px;
  }
  body[data-page="register"] .auth-brand {
    padding: 14px clamp(16px, 2vw, 28px) !important;
  }
  body[data-page="register"] .site-footer {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }
}


/* Discord verification box in registration */
.discord-verify-box {
  display: grid;
  gap: 10px;
}
.discord-verify-step { display: grid; gap: 8px; }
.discord-verify-actions { display: flex; gap: 8px; }
.discord-verify-error { min-height: 18px; }
.discord-verified-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(88, 101, 242, 0.08);
  border: 1px solid rgba(88, 101, 242, 0.2);
}
.discord-verified-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.discord-verified-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.discord-verified-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary, #e8eaed);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.discord-verified-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #fff;
  background: #57f287;
  flex-shrink: 0;
}
.discord-verified-age {
  font-size: 12px;
  color: var(--text-secondary, #9aa0a6);
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-sm {
  padding: 6px 14px;
  font-size: 13px;
}
#discordSendCodeBtn, #discordConfirmBtn {
  border-color: rgba(88, 101, 242, 0.4);
  color: #7289da;
}
#discordSendCodeBtn:hover, #discordConfirmBtn:hover {
  background: rgba(88, 101, 242, 0.12);
  border-color: rgba(88, 101, 242, 0.6);
}