.ks-recovery .ks-auth-shell {
  grid-template-columns: minmax(0, 1.08fr) minmax(440px, 0.78fr);
}

.ks-recovery .ks-auth-panel {
  max-width: 560px;
}

.ks-recovery .ks-auth-card {
  padding-bottom: 30px;
}

.ks-recovery .ks-skip-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.ks-recovery-route {
  --route-rx: 0deg;
  --route-ry: 0deg;
  position: relative;
  width: min(620px, 100%);
  height: 340px;
  margin: 34px 0 24px;
  perspective: 1100px;
  transform: rotateX(var(--route-rx)) rotateY(var(--route-ry));
  transform-style: preserve-3d;
  transition: transform 420ms var(--ks-ease);
}

.ks-recovery-route__grid {
  position: absolute;
  inset: 30px 5% 8px;
  border: 1px solid rgba(55, 200, 235, 0.12);
  border-radius: 38px;
  opacity: 0.5;
  background-image:
    linear-gradient(rgba(55, 200, 235, 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(55, 200, 235, 0.13) 1px, transparent 1px);
  background-size: 32px 32px;
  transform: rotateX(58deg) translateZ(-46px);
  box-shadow: inset 0 0 90px rgba(2, 8, 23, 0.96);
}

.ks-recovery-route__line {
  position: absolute;
  top: 68px;
  bottom: 60px;
  left: 38px;
  width: 1px;
  background: linear-gradient(to bottom, var(--ks-cyan), var(--ks-gold), transparent);
  box-shadow: 0 0 14px rgba(55, 200, 235, 0.48);
}

.ks-recovery-step {
  position: absolute;
  left: 11px;
  z-index: 2;
  min-width: 216px;
  padding: 13px 14px;
  display: grid;
  grid-template-columns: 32px 1fr 8px;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(139, 179, 216, 0.22);
  border-radius: 15px;
  background: rgba(7, 22, 48, 0.88);
  box-shadow: 0 16px 38px rgba(0, 6, 20, 0.34);
  backdrop-filter: blur(12px);
}

.ks-recovery-step > span {
  color: var(--ks-gold);
  font-family: "Sora", sans-serif;
  font-size: 10px;
  font-weight: 700;
}

.ks-recovery-step div {
  display: grid;
  gap: 3px;
}

.ks-recovery-step small {
  color: var(--ks-text-muted);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ks-recovery-step strong {
  font-size: 11px;
}

.ks-recovery-step i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ks-success);
  box-shadow: 0 0 14px rgba(111, 213, 160, 0.72);
}

.ks-recovery-step--one { top: 35px; transform: translateZ(70px); }
.ks-recovery-step--two { top: 137px; left: 42px; transform: translateZ(92px); }
.ks-recovery-step--three { top: 239px; left: 73px; transform: translateZ(114px); }

.ks-recovery-shield {
  position: absolute;
  top: 78px;
  right: 5%;
  width: 220px;
  height: 220px;
  display: grid;
  place-items: center;
  align-content: center;
  border: 1px solid rgba(151, 193, 228, 0.28);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 26%, rgba(33, 91, 153, 0.96), rgba(5, 18, 42, 0.98) 64%);
  box-shadow: 0 34px 70px rgba(0, 5, 20, 0.46), inset 0 0 42px rgba(79, 180, 235, 0.13);
  transform: translateZ(58px);
}

.ks-recovery-shield > span {
  position: absolute;
  inset: -14px;
  border: 1px solid rgba(55, 200, 235, 0.26);
  border-radius: 50%;
  animation: ks-pulse 2.8s ease-out infinite;
}

.ks-recovery-shield svg {
  width: 68px;
  margin-bottom: 10px;
  fill: none;
  stroke: var(--ks-gold-light);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 18px rgba(244, 204, 78, 0.3));
}

.ks-recovery-shield strong {
  font-family: "Sora", sans-serif;
  font-size: 13px;
}

.ks-recovery-shield small {
  margin-top: 5px;
  color: var(--ks-text-muted);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ks-recovery-message {
  margin-bottom: 24px;
}

.ks-recovery-actions,
.ks-recovery-invalid {
  display: grid;
  gap: 16px;
}

.ks-auth-submit--link {
  text-decoration: none;
}

.ks-auth-submit--link span {
  position: relative;
  z-index: 1;
}

.ks-recovery-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ks-text-soft);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
}

.ks-recovery-link:hover,
.ks-recovery-link:focus-visible {
  color: var(--ks-gold-light);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.ks-auth-card__badge--warning {
  color: var(--ks-gold-light);
  border-color: rgba(244, 204, 78, 0.24);
  background: rgba(244, 204, 78, 0.08);
}

.ks-recovery-rules {
  min-height: 18px;
  margin: 2px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  list-style: none;
}

.ks-recovery-rules li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ks-text-muted);
  font-size: 9px;
  font-weight: 700;
  transition: color var(--ks-motion-fast) ease;
}

.ks-recovery-rules i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.ks-recovery-rules li.is-valid,
.ks-recovery-match.is-valid {
  color: var(--ks-success);
}

.ks-recovery-match {
  min-height: 17px;
  margin: 0;
  color: var(--ks-text-muted);
  font-size: 10px;
  font-weight: 700;
}

.ks-recovery-match.is-error {
  color: var(--ks-danger);
}

.ks-recovery-invalid {
  padding-top: 4px;
}

.ks-recovery-invalid__icon {
  width: 66px;
  height: 66px;
  margin: 0 auto 2px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(244, 204, 78, 0.23);
  border-radius: 50%;
  color: var(--ks-gold-light);
  background: rgba(244, 204, 78, 0.07);
}

.ks-recovery-invalid__icon svg {
  width: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}

.ks-recovery-invalid p {
  margin: 0 0 4px;
  color: var(--ks-text-soft);
  font-size: 13px;
  line-height: 1.65;
  text-align: center;
}

@media (max-width: 1120px) {
  .ks-recovery .ks-auth-shell {
    grid-template-columns: minmax(0, 1fr) minmax(410px, 0.82fr);
    gap: 36px;
  }

  .ks-recovery-route {
    transform: scale(0.92) rotateX(var(--route-rx)) rotateY(var(--route-ry));
    transform-origin: left center;
  }
}

@media (max-width: 980px) {
  .ks-recovery .ks-auth-shell {
    grid-template-columns: 1fr;
  }

  .ks-recovery .ks-auth-panel,
  .ks-recovery .ks-auth-visual {
    max-width: 680px;
    margin-inline: auto;
  }

  .ks-recovery-route {
    margin-inline: auto;
    transform-origin: center;
  }
}

@media (max-width: 600px) {
  .ks-recovery-route {
    height: 320px;
  }

  .ks-recovery-step {
    left: 0;
    min-width: 172px;
    grid-template-columns: 26px 1fr 7px;
  }

  .ks-recovery-step--two { left: 17px; }
  .ks-recovery-step--three { left: 34px; }

  .ks-recovery-shield {
    top: 95px;
    right: 0;
    width: 164px;
    height: 164px;
  }

  .ks-recovery-shield > span {
    inset: -10px;
  }

  .ks-recovery-shield svg {
    width: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ks-recovery-route {
    transform: none !important;
  }
}