.session-loading {
  position: fixed;
  inset: 0;
  z-index: 10000;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 28px 20px;
  overflow-y: auto;
  background:
    radial-gradient(ellipse at 15% 10%, #dbeedb 0, transparent 48%),
    radial-gradient(ellipse at 90% 90%, #e3f0d1 0, transparent 42%), #f5f8f3;
  opacity: 1;
  transition:
    opacity 280ms ease,
    visibility 280ms ease;
}

.session-loading.is-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.session-glow {
  position: absolute;
  width: min(78vw, 650px);
  aspect-ratio: 1;
  border: 1px solid #00800012;
  border-radius: 50%;
  pointer-events: none;
  animation: session-breathe 5s ease-in-out infinite;
}

.session-glow::after {
  content: "";
  position: absolute;
  inset: 32px;
  border: 1px solid #0080000d;
  border-radius: 50%;
}

.session-card {
  position: relative;
  width: min(100%, 460px);
  text-align: center;
  padding: 46px 40px 28px;
  border: 1px solid #ffffff;
  border-radius: 30px;
  background: #ffffffde;
  box-shadow:
    0 24px 80px #164b1710,
    0 2px 8px #164b1704;
  animation: session-enter 500ms ease both;
}

.session-logo {
  padding-bottom: 28px;
}

.session-logo img {
  width: 180px;
  max-width: 75%;
  height: auto;
}

.session-eyebrow {
  margin: 0 0 15px;
  font-size: 9px;
  letter-spacing: 2.4px;
  font-weight: 700;
  color: #547653;
}

.session-card h1 {
  margin: 0;
  font-size: clamp(29px, 5vw, 38px);
  line-height: 1.18;
  letter-spacing: -1.3px;
  color: #193d2c;
}

.session-card h1 span {
  color: #008000;
}

.session-caption {
  font-size: 12px;
  color: #6c8073;
  margin: 16px 0 32px;
}

.session-progress {
  height: 5px;
  border-radius: 10px;
  overflow: hidden;
  background: #e8efe6;
}

.session-progress span {
  position: relative;
  display: block;
  height: 100%;
  width: 16%;
  border-radius: inherit;
  background: linear-gradient(90deg, #006b00, #008000 60%, #72af42);
  transition: width 450ms cubic-bezier(0.2, 0.7, 0.2, 1);
  overflow: hidden;
}

.session-progress span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, #ffffff66, transparent);
  animation: session-shimmer 1.6s ease-in-out infinite;
}

.session-loading[data-stage="2"] .session-progress span {
  width: 48%;
}

.session-loading[data-stage="3"] .session-progress span {
  width: 78%;
}

.session-loading[data-stage="4"] .session-progress span {
  width: 100%;
}

.session-status {
  min-height: 36px;
  margin: 18px 0 4px;
  font-size: 12px;
  line-height: 1.5;
  color: #42614b;
}

.session-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between;
  color: #8a9b8e;
  font-size: 10px;
}

.session-steps li {
  display: flex;
  align-items: center;
  gap: 7px;
}

.session-steps li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #cfddce;
}

.session-steps li:first-child,
.session-loading[data-stage="2"] .session-steps li:nth-child(2),
.session-loading[data-stage="3"] .session-steps li,
.session-loading[data-stage="4"] .session-steps li {
  color: #008000;
}

.session-steps li:first-child::before,
.session-loading[data-stage="2"] .session-steps li:nth-child(2)::before,
.session-loading[data-stage="3"] .session-steps li::before,
.session-loading[data-stage="4"] .session-steps li::before {
  background: #008000;
}

.session-signature {
  margin: 32px 0 0;
  padding-top: 20px;
  border-top: 1px solid #e7eee4;
  font-size: 9px;
  color: #7d8f80;
  letter-spacing: 0.3px;
}

.session-signature span {
  margin: 0 5px;
  color: #008000;
}

@keyframes session-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes session-shimmer {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(100%);
  }
}

@keyframes session-breathe {
  0%,
  100% {
    transform: scale(0.96);
    opacity: 0.5;
  }

  50% {
    transform: scale(1.03);
    opacity: 1;
  }
}

@media (max-width: 480px) {
  .session-card {
    padding: 36px 24px 24px;
    border-radius: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .session-loading,
  .session-card,
  .session-glow,
  .session-progress span,
  .session-progress span::after {
    animation: none;
    transition: none;
  }
}