:root {
  --auth-panel: rgba(6, 15, 26, .88);
  --auth-line: rgba(155, 190, 218, .28);
  --auth-gold: #e9bd68;
}

html { min-height: 100%; }

body.auth-splash {
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: clamp(22px, 5vw, 72px) !important;
  display: grid !important;
  place-items: center start !important;
  overflow-x: hidden;
  position: relative;
  isolation: isolate;
  background-color: #06101b !important;
  background-image: url('/assets/warfront-auth-splash.webp') !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center center !important;
  color: #f5f8fc;
}

body.auth-splash::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(3, 9, 16, .46) 0%, rgba(3, 9, 16, .20) 38%, transparent 64%),
    linear-gradient(180deg, rgba(2, 7, 13, .12), rgba(2, 7, 13, .38));
}

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

body.auth-splash .auth-card,
body.auth-splash .wizard .card {
  border: 1px solid var(--auth-line) !important;
  background: linear-gradient(145deg, rgba(7, 18, 31, .94), rgba(7, 16, 28, .80)) !important;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .50), inset 0 1px rgba(255, 255, 255, .06) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
  backdrop-filter: blur(20px) saturate(1.15);
}

body.auth-splash .auth-card {
  width: min(440px, 100%) !important;
  margin: 0;
  padding: clamp(26px, 3vw, 38px) !important;
  border-radius: 22px !important;
}

body.auth-splash.signup-splash .auth-card { width: min(480px, 100%) !important; }

body.auth-splash.signup-splash .auth-logo {
  width: min(230px, 72%);
  margin-bottom: 16px;
}

body.auth-splash.signup-splash .auth-card { padding: 28px 32px !important; }
body.auth-splash.signup-splash .auth-card h1 { margin-bottom: 7px; }
body.auth-splash.signup-splash .auth-card form { gap: 10px; margin-top: 16px; }
body.auth-splash.signup-splash .auth-card input { min-height: 44px; }
body.auth-splash.signup-splash .auth-card button { margin-top: 4px; }

.auth-logo {
  display: block;
  width: min(270px, 78%);
  height: auto;
  margin: 0 0 24px;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .48));
}

body.auth-splash .auth-card .ey,
body.auth-splash .wizard .eyebrow {
  color: var(--auth-gold) !important;
}

body.auth-splash .auth-card h1 {
  font-size: clamp(29px, 3vw, 38px);
  letter-spacing: -.035em;
}

body.auth-splash .auth-card p { line-height: 1.55; }

body.auth-splash .auth-card input,
body.auth-splash .wizard input {
  min-height: 48px;
  background: rgba(3, 10, 19, .74) !important;
  border-color: rgba(132, 169, 199, .32) !important;
}

body.auth-splash .auth-card input:focus,
body.auth-splash .wizard input:focus {
  outline: 2px solid rgba(87, 202, 255, .70);
  outline-offset: 1px;
  border-color: transparent !important;
}

body.auth-splash .auth-card .btn.primary,
body.auth-splash .wizard .primary {
  min-height: 48px;
  box-shadow: 0 10px 30px rgba(41, 164, 220, .24);
}

body.auth-splash .auth-hint {
  opacity: .72;
  font-size: 11px !important;
}

/* Initial alliance workspace setup */
body.auth-splash .main {
  width: min(1360px, 100%);
  max-width: none;
  margin: 0 auto;
  padding: 0;
}

body.auth-splash .wizard {
  width: min(540px, 100%);
  max-width: none;
  margin: 0;
}

body.auth-splash .wizard > .brand {
  margin: 0 0 24px;
}

body.auth-splash .wizard > .brand .auth-logo { margin: 0; }

body.auth-splash .wizard .steps {
  gap: 6px;
  margin-bottom: 12px;
  padding: 6px;
  border: 1px solid rgba(132, 169, 199, .18);
  border-radius: 14px;
  background: rgba(4, 12, 21, .64);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

body.auth-splash .wizard .step {
  min-width: 0;
  border-color: transparent;
  background: transparent;
  text-align: center;
}

body.auth-splash .wizard .step.active {
  border-color: rgba(91, 202, 255, .55);
  background: rgba(32, 72, 103, .70);
}

body.auth-splash .wizard .card {
  padding: clamp(24px, 3vw, 34px);
  border-radius: 22px;
}

body.auth-splash .wizard .title {
  font-size: clamp(28px, 3.2vw, 38px);
  line-height: 1.08;
  letter-spacing: -.04em;
}

@media (max-width: 700px) {
  body.auth-splash {
    min-height: 100dvh !important;
    padding: 18px !important;
    place-items: start center !important;
    background-image: url('/assets/warfront-auth-splash-mobile.webp') !important;
    background-position: center top !important;
    background-attachment: scroll !important;
  }

  body.auth-splash::before {
    background: linear-gradient(180deg, rgba(2, 8, 15, .42) 0%, rgba(2, 8, 15, .16) 48%, rgba(2, 8, 15, .42) 100%);
  }

  body.auth-splash .auth-card,
  body.auth-splash .main {
    margin-top: max(8px, env(safe-area-inset-top));
  }

  .auth-logo { width: min(230px, 76%); margin-bottom: 20px; }

  body.auth-splash .wizard .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.auth-splash .wizard .step { padding: 9px 4px; font-size: 10px; }
  body.auth-splash .wizard .actions { align-items: stretch; flex-direction: column-reverse; }
  body.auth-splash .wizard .actions > * { width: 100%; }
}

@media (min-width: 701px) and (max-height: 820px) {
  body.auth-splash { padding-block: 20px !important; }
  body.auth-splash.signup-splash .auth-card { padding-block: 22px !important; }
  body.auth-splash.signup-splash .auth-logo { width: 190px; margin-bottom: 10px; }
  body.auth-splash.signup-splash .auth-card h1 { font-size: 30px; margin-top: 3px; }
  body.auth-splash.signup-splash .auth-card > p { margin-block: 8px; }
  body.auth-splash.signup-splash .auth-card form { margin-top: 12px; gap: 7px; }
  body.auth-splash.signup-splash .auth-card label { gap: 3px; }
  body.auth-splash.signup-splash .auth-card input { min-height: 40px; padding-block: 9px; }
  body.auth-splash.signup-splash .auth-msg { min-height: 12px; }
}

@media (max-width: 430px) {
  body.auth-splash { padding: 12px !important; }
  body.auth-splash .auth-card,
  body.auth-splash .wizard .card { border-radius: 18px !important; }
  body.auth-splash .wizard .steps { overflow-x: auto; grid-template-columns: repeat(4, 92px); }
}

@media (prefers-reduced-motion: reduce) {
  body.auth-splash * { scroll-behavior: auto !important; }
}