/* Extra login/signup layouts beyond split + minimal. Each targets the solo-card
   markup (.auth.<variant> > .form-side-solo) the login/signup pages render, so
   only the wrapper class changes per template. All read the brand's --saffron
   accent so per-brand auth colours still apply. */

/* ---- CLASSIC: a plain boxed card on a neutral canvas ------------------- */
.auth.auth-classic {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  background: var(--content-bg, var(--bg, #0a0e1a));
  padding: 24px;
}
.auth.auth-classic .form-side-solo {
  width: 100%;
  max-width: 400px;
  background: var(--surf, #141b30);
  border: 1px solid var(--line, #26314f);
  border-radius: 14px;
  padding: 28px 26px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.auth.auth-classic .minimal-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

/* ---- NEON: dark card with a glowing accent frame ---------------------- */
.auth.auth-neon {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(1200px 600px at 50% -10%, color-mix(in srgb, var(--saffron, #ff8a00) 18%, transparent), transparent 60%),
    #05070f;
  padding: 24px;
}
.auth.auth-neon .form-side-solo {
  width: 100%;
  max-width: 400px;
  background: rgba(10, 14, 26, 0.85);
  border: 1px solid color-mix(in srgb, var(--saffron, #ff8a00) 55%, transparent);
  border-radius: 16px;
  padding: 30px 26px;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--saffron, #ff8a00) 25%, transparent),
    0 0 28px color-mix(in srgb, var(--saffron, #ff8a00) 35%, transparent),
    inset 0 0 24px rgba(0, 0, 0, 0.4);
}
.auth.auth-neon .minimal-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 22px;
  text-shadow: 0 0 14px color-mix(in srgb, var(--saffron, #ff8a00) 60%, transparent);
}

/* ---- AURORA: gradient backdrop with slow drifting orbs ---------------- */
.auth.auth-aurora {
  position: relative;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #070b16;
  padding: 24px;
}
.auth.auth-aurora .aurora-bg {
  position: absolute;
  inset: -20% -20% -20% -20%;
  z-index: 0;
  background:
    radial-gradient(40% 40% at 20% 20%, color-mix(in srgb, var(--saffron, #ff8a00) 45%, transparent), transparent 70%),
    radial-gradient(45% 45% at 80% 30%, color-mix(in srgb, var(--gold, #f5c547) 40%, transparent), transparent 70%),
    radial-gradient(40% 40% at 60% 85%, color-mix(in srgb, var(--back, #3b82f6) 40%, transparent), transparent 70%);
  filter: blur(30px);
  animation: aurora-drift 18s ease-in-out infinite alternate;
}
@keyframes aurora-drift {
  from { transform: translate3d(-4%, -2%, 0) scale(1); }
  to   { transform: translate3d(4%, 3%, 0) scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .auth.auth-aurora .aurora-bg { animation: none; }
}
.auth.auth-aurora .form-side-solo {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 400px;
  background: rgba(10, 14, 26, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 30px 26px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}
.auth.auth-aurora .minimal-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 22px;
}

/* ======================================================================
   SIMPLE CONFIGURABLE TEMPLATES — centered / allpanel / slate
   Username + password only. Every colour & spacing value is driven by the
   --at-* CSS vars emitted by authThemeVars(); each `var(--at-x, <default>)`
   falls back to the template's own default when the brand hasn't set it, so
   an unconfigured brand still looks intentional. Owners tune colour, card
   width, radius, padding, field gap and vertical position from the admin.
   ====================================================================== */

.auth.auth-centered,
.auth.auth-allpanel,
.auth.auth-slate {
  min-height: 100dvh;
  display: flex;
  align-items: var(--at-valign, center);
  justify-content: center;
  padding: 40px 20px;
  background: var(--at-bg, #0a0e1a);
}

/* the solo card */
.auth.auth-centered .form-side-solo,
.auth.auth-allpanel .form-side-solo,
.auth.auth-slate .form-side-solo {
  width: 100%;
  max-width: var(--at-card-w, 400px);
  background: var(--at-card, #141b30);
  color: var(--at-text, #eef2ff);
  border: 1px solid var(--at-border, #26314f);
  border-radius: var(--at-radius, 14px);
  padding: var(--at-pad, 30px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}

/* brand row */
.auth.auth-centered .minimal-brand,
.auth.auth-allpanel .minimal-brand,
.auth.auth-slate .minimal-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--at-text, #eef2ff);
}

/* headings + helper text */
.auth.auth-centered .form-head h2,
.auth.auth-allpanel .form-head h2,
.auth.auth-slate .form-head h2 {
  color: var(--at-text, #eef2ff);
  font-size: 22px;
  font-weight: 800;
  text-align: center;
  margin: 0 0 4px;
}
.auth.auth-centered .form-head p,
.auth.auth-allpanel .form-head p,
.auth.auth-slate .form-head p {
  color: var(--at-muted, #93a0bd);
  font-size: 13px;
  text-align: center;
  margin: 0 0 18px;
}
/* neutralise the split-layout accent spans inside the heading */
.auth.auth-centered .form-head .ws,
.auth.auth-centered .form-head .gold,
.auth.auth-allpanel .form-head .ws,
.auth.auth-allpanel .form-head .gold,
.auth.auth-slate .form-head .ws,
.auth.auth-slate .form-head .gold {
  color: var(--at-accent, #ff8a00);
}

/* form + fields — driven by --at-gap */
.auth.auth-centered form,
.auth.auth-allpanel form,
.auth.auth-slate form {
  display: flex;
  flex-direction: column;
  gap: var(--at-gap, 16px);
}
.auth.auth-centered .field,
.auth.auth-allpanel .field,
.auth.auth-slate .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}
.auth.auth-centered .field label,
.auth.auth-allpanel .field label,
.auth.auth-slate .field label {
  color: var(--at-muted, #93a0bd);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.auth.auth-centered .field input,
.auth.auth-allpanel .field input,
.auth.auth-slate .field input,
.auth.auth-centered .pw-wrap input,
.auth.auth-allpanel .pw-wrap input,
.auth.auth-slate .pw-wrap input {
  width: 100%;
  background: var(--at-input, #0b1120);
  color: var(--at-text, #eef2ff);
  border: 1px solid var(--at-border, #26314f);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.auth.auth-centered .field input:focus,
.auth.auth-allpanel .field input:focus,
.auth.auth-slate .field input:focus,
.auth.auth-centered .pw-wrap input:focus,
.auth.auth-allpanel .pw-wrap input:focus,
.auth.auth-slate .pw-wrap input:focus {
  border-color: var(--at-accent, #ff8a00);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--at-accent, #ff8a00) 22%, transparent);
}
.auth.auth-centered .pw-wrap,
.auth.auth-allpanel .pw-wrap,
.auth.auth-slate .pw-wrap { position: relative; }
.auth.auth-centered .pw-wrap .toggle,
.auth.auth-allpanel .pw-wrap .toggle,
.auth.auth-slate .pw-wrap .toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--at-muted, #93a0bd);
  cursor: pointer;
}
.auth.auth-centered .field .hint,
.auth.auth-allpanel .field .hint,
.auth.auth-slate .field .hint {
  color: var(--at-muted, #93a0bd);
  font-size: 11px;
}

/* remember/forgot row + terms */
.auth.auth-centered .form-row,
.auth.auth-allpanel .form-row,
.auth.auth-slate .form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--at-muted, #93a0bd);
}
.auth.auth-centered .form-row .forgot,
.auth.auth-allpanel .form-row .forgot,
.auth.auth-slate .form-row .forgot,
.auth.auth-centered .signup-cta a,
.auth.auth-allpanel .signup-cta a,
.auth.auth-slate .signup-cta a,
.auth.auth-centered .login-cta a,
.auth.auth-allpanel .login-cta a,
.auth.auth-slate .login-cta a {
  color: var(--at-accent, #ff8a00);
  cursor: pointer;
}
.auth.auth-centered .terms,
.auth.auth-allpanel .terms,
.auth.auth-slate .terms {
  display: flex;
  gap: 8px;
  font-size: 11px;
  color: var(--at-muted, #93a0bd);
}
.auth.auth-centered .terms a,
.auth.auth-allpanel .terms a,
.auth.auth-slate .terms a { color: var(--at-accent, #ff8a00); }

/* primary button — force the accent regardless of the base .btn-saffron skin */
.auth.auth-centered .btn.btn-saffron,
.auth.auth-allpanel .btn.btn-saffron,
.auth.auth-slate .btn.btn-saffron {
  background: var(--at-accent, #ff8a00);
  color: var(--at-accent-text, #0a0e1a);
  border: none;
  border-radius: 10px;
  font-weight: 700;
}
.auth.auth-centered .btn.btn-saffron:hover,
.auth.auth-allpanel .btn.btn-saffron:hover,
.auth.auth-slate .btn.btn-saffron:hover {
  filter: brightness(1.06);
}

/* footer / cta text */
.auth.auth-centered .signup-cta,
.auth.auth-allpanel .signup-cta,
.auth.auth-slate .signup-cta,
.auth.auth-centered .login-cta,
.auth.auth-allpanel .login-cta,
.auth.auth-slate .login-cta {
  text-align: center;
  font-size: 13px;
  color: var(--at-muted, #93a0bd);
  margin-top: 16px;
}
.auth.auth-centered .form-foot,
.auth.auth-allpanel .form-foot,
.auth.auth-slate .form-foot {
  text-align: center;
  font-size: 11px;
  color: var(--at-muted, #93a0bd);
  margin-top: 14px;
  opacity: 0.85;
}

/* ---- CENTERED: light, airy, minimalist (distinct light default) ------- */
.auth.auth-centered {
  background: var(--at-bg, linear-gradient(180deg, #f4f6fb 0%, #e9edf6 100%));
}
.auth.auth-centered .form-side-solo {
  background: var(--at-card, #ffffff);
  color: var(--at-text, #1a2138);
  border: 1px solid var(--at-border, #e2e7f1);
  box-shadow: 0 20px 60px rgba(31, 45, 80, 0.14);
}
.auth.auth-centered .minimal-brand,
.auth.auth-centered .minimal-brand .name,
.auth.auth-centered .form-head h2 { color: var(--at-text, #1a2138); }
.auth.auth-centered .field input,
.auth.auth-centered .pw-wrap input {
  background: var(--at-input, #f6f8fc);
  color: var(--at-text, #1a2138);
  border-color: var(--at-border, #dbe1ee);
}
/* accent default = indigo (matches the admin swatch) */
.auth.auth-centered .btn.btn-saffron {
  background: var(--at-accent, #4f46e5);
  color: var(--at-accent-text, #ffffff);
}
.auth.auth-centered .form-row .forgot,
.auth.auth-centered .signup-cta a,
.auth.auth-centered .login-cta a,
.auth.auth-centered .form-head .ws,
.auth.auth-centered .form-head .gold,
.auth.auth-centered .terms a { color: var(--at-accent, #4f46e5); }
.auth.auth-centered .field input:focus,
.auth.auth-centered .pw-wrap input:focus {
  border-color: var(--at-accent, #4f46e5);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--at-accent, #4f46e5) 22%, transparent);
}

/* ---- ALLPANEL: betting-exchange look — accent header strip, boxed ------ */
.auth.auth-allpanel {
  background: var(--at-bg, #1c2733);
}
.auth.auth-allpanel .form-side-solo {
  background: var(--at-card, #22303f);
  border: 1px solid var(--at-border, #33475b);
  border-radius: var(--at-radius, 6px);
  padding: 0;
  overflow: hidden;
}
/* the coloured top bar carrying the brand — the exchange signature */
.auth.auth-allpanel .minimal-brand {
  margin: 0;
  padding: 16px 20px;
  background: var(--at-accent, #2f9e44);
  color: var(--at-accent-text, #ffffff);
  border-radius: 0;
}
.auth.auth-allpanel .minimal-brand .name { color: var(--at-accent-text, #ffffff); }
.auth.auth-allpanel .form-head { padding: 20px 22px 0; }
.auth.auth-allpanel form { padding: 14px 22px 4px; }
.auth.auth-allpanel .signup-cta,
.auth.auth-allpanel .login-cta { padding: 0 22px; }
.auth.auth-allpanel .form-foot { padding: 0 22px 18px; margin-top: 10px; }
.auth.auth-allpanel .field input,
.auth.auth-allpanel .pw-wrap input {
  background: var(--at-input, #1a2530);
  border-color: var(--at-border, #3a4d61);
  border-radius: 4px;
}
/* accent default = exchange green (matches the header strip) */
.auth.auth-allpanel .btn.btn-saffron {
  background: var(--at-accent, #2f9e44);
  color: var(--at-accent-text, #ffffff);
  border-radius: 4px;
}
.auth.auth-allpanel .form-row .forgot,
.auth.auth-allpanel .signup-cta a,
.auth.auth-allpanel .login-cta a,
.auth.auth-allpanel .terms a { color: var(--at-accent, #2f9e44); }
.auth.auth-allpanel .field input:focus,
.auth.auth-allpanel .pw-wrap input:focus {
  border-color: var(--at-accent, #2f9e44);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--at-accent, #2f9e44) 22%, transparent);
}

/* ---- SLATE: modern dark card with a left accent stripe ---------------- */
.auth.auth-slate {
  background: var(--at-bg, radial-gradient(1000px 500px at 50% -10%, #1b2440, #0a0e1a 70%));
}
.auth.auth-slate .form-side-solo {
  position: relative;
  background: var(--at-card, #10152a);
  border: 1px solid var(--at-border, #232c49);
  border-left: 4px solid var(--at-accent, #6366f1);
  border-radius: var(--at-radius, 16px);
}
.auth.auth-slate .form-head h2 { text-align: left; }
.auth.auth-slate .form-head p { text-align: left; }
.auth.auth-slate .minimal-brand { justify-content: flex-start; }
.auth.auth-slate .field input,
.auth.auth-slate .pw-wrap input {
  background: var(--at-input, #0b1022);
  border-color: var(--at-border, #232c49);
}
/* accent default = indigo (matches the left stripe) */
.auth.auth-slate .btn.btn-saffron {
  background: var(--at-accent, #6366f1);
  color: var(--at-accent-text, #ffffff);
  border-radius: 12px;
}
.auth.auth-slate .form-row .forgot,
.auth.auth-slate .signup-cta a,
.auth.auth-slate .login-cta a,
.auth.auth-slate .terms a { color: var(--at-accent, #6366f1); }
.auth.auth-slate .field input:focus,
.auth.auth-slate .pw-wrap input:focus {
  border-color: var(--at-accent, #6366f1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--at-accent, #6366f1) 22%, transparent);
}