.auth-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(0, 0, 0, 0.68);
  backdrop-filter: blur(5px);
}

.auth-modal {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 18px);
  z-index: 121;
  width: min(calc(100vw - 28px), 390px);
  transform: translateX(-50%);
  padding: 22px 20px 20px;
  color: var(--text-main);
  background: linear-gradient(165deg, #1D1D1E 0%, #3A0909 58%, #840F0E 100%);
  border: 1px solid rgba(253, 255, 255, 0.14);
  box-shadow: 0 -12px 44px rgba(0, 0, 0, 0.52), 0 0 34px rgba(224, 24, 34, 0.25);
  animation: auth-modal-enter 220ms ease-out both;
}

.auth-modal img { width: 72px; height: 72px; object-fit: contain; margin-bottom: 12px; }
.auth-kicker { margin: 0 0 6px; color: var(--accent); font: 14px "Heading Now 44 Regular", sans-serif; text-transform: uppercase; }
.auth-modal h2 { margin: 0 0 8px; font: 28px/1 "HeadingNowTrial-27Extrabold", Impact, sans-serif; text-transform: uppercase; }
.auth-modal p:not(.auth-kicker) { margin: 0 0 18px; color: var(--text-muted); line-height: 1.45; }
.auth-action { display: grid; min-height: 52px; place-items: center; color: #fff; background: linear-gradient(180deg, #F1212E, #B70412); text-decoration: none; font-weight: 800; }
.auth-modal small { display: block; margin-top: 12px; color: rgba(253, 255, 255, 0.58); line-height: 1.35; }

@keyframes auth-modal-enter {
  from { opacity: 0; transform: translate(-50%, 18px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}