.onboarding-backdrop {
  position: fixed; inset: 0; z-index: 140;
  background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(6px);
}

.onboarding-modal {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 18px); z-index: 141;
  width: min(calc(100vw - 28px), 430px); transform: translateX(-50%);
  color: var(--text-main); animation: onboarding-enter 240ms ease-out both;
}

.onboarding-skip {
  display: block; margin: 0 0 10px auto; min-height: 44px; padding: 0 14px;
  color: var(--text-muted); background: rgba(29, 29, 30, 0.82); border: 1px solid var(--line);
}

.onboarding-progress { display: flex; gap: 6px; margin-bottom: 12px; }
.onboarding-progress i { flex: 1; height: 4px; background: rgba(253, 255, 255, 0.2); }
.onboarding-progress .is-active { background: var(--accent); box-shadow: 0 0 14px var(--accent-soft); }

.onboarding-card {
  padding: 24px 22px; background: linear-gradient(160deg, #1D1D1E 0%, #350707 56%, #840F0E 100%);
  border: 1px solid rgba(253, 255, 255, 0.16); box-shadow: var(--shadow), 0 0 36px rgba(224, 24, 34, 0.2);
}

.onboarding-card span { color: var(--accent); font: 18px "Heading Now 44 Regular", sans-serif; }
.onboarding-card h2 { margin: 12px 0 10px; font: 34px/0.95 "HeadingNowTrial-27Extrabold", Impact, sans-serif; text-transform: uppercase; }
.onboarding-card p { margin: 0; color: rgba(253, 255, 255, 0.78); font-size: 16px; line-height: 1.45; }

.onboarding-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; margin-top: 12px; }
.onboarding-actions button { min-height: 52px; color: var(--text-main); border: 1px solid rgba(253, 255, 255, 0.16); background: #1D1D1E; font-weight: 800; }
.onboarding-actions [data-onboarding-next] { background: linear-gradient(180deg, #F1212E, #B70412); }
.onboarding-actions button:disabled { opacity: 0.42; }

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

@media (prefers-reduced-motion: reduce) {
  .onboarding-modal { animation: none; }
}
