.mobile-reset-stage {
  --pointer-x: 72%; --pointer-y: 30%; position: relative; min-height: 100vh; overflow: hidden;
  color: #172033; background: #f6f8fc; isolation: isolate;
}
.mobile-reset-stage::before {
  position: absolute; inset: 0 0 auto; z-index: -3; height: min(620px, 60vh); content: '';
  background:
    radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(255,255,255,.44) 0, transparent 20%),
    radial-gradient(circle at 12% 15%, #ffcb57 0, transparent 31%),
    radial-gradient(circle at 82% 8%, #80e9ff 0, transparent 34%),
    radial-gradient(circle at 72% 78%, #635bff 0, transparent 42%),
    radial-gradient(circle at 25% 82%, #ff6bd6 0, transparent 42%),
    linear-gradient(115deg, #ff8a5c 0%, #a960ee 45%, #635bff 72%, #00d4ff 100%);
  background-size: 125% 125%, 130% 130%, 135% 135%, 130% 140%, 145% 135%, 100% 100%;
  background-position: center, 0 0, 100% 0, 100% 100%, 0 100%, center;
  clip-path: polygon(0 0, 100% 0, 100% 72%, 0 100%);
  transition: background-position .16s linear;
  animation: mobile-reset-mesh 12s ease-in-out infinite alternate;
}
.mobile-reset-grid {
  position: absolute; inset: 0 0 auto; z-index: -2; height: min(620px, 60vh); opacity: .2;
  background-image: repeating-linear-gradient(115deg, transparent 0 48px, rgba(255,255,255,.32) 49px, transparent 50px 96px);
  clip-path: polygon(0 0, 100% 0, 100% 72%, 0 100%);
  animation: mobile-reset-stripes 18s linear infinite;
}
.mobile-reset-shell {
  width: min(510px, calc(100% - 48px)); min-height: 100vh; display: grid; align-items: center;
  margin: 0 auto; padding: 56px 0;
}
.mobile-reset-card {
  padding: clamp(28px, 4vw, 44px); border: 1px solid rgba(98,88,140,.13); border-radius: 22px;
  background: rgba(255,255,255,.96); box-shadow: 0 30px 80px rgba(50,50,93,.18), 0 2px 8px rgba(31,38,76,.06); backdrop-filter: blur(20px);
}
.mobile-reset-brand {
  display: inline-flex; align-items: center; gap: 11px; margin-bottom: 30px; color: #172033;
  font-size: 1.35rem; font-weight: 750; letter-spacing: -.03em;
}
.mobile-reset-brand:hover { color: #172033; }
.mobile-reset-mark {
  width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; color: #fff;
  background: linear-gradient(145deg, #635bff, #8b5cf6); box-shadow: 0 8px 22px rgba(99,91,255,.28);
}
.mobile-reset-title { margin-bottom: 8px; font-size: clamp(1.65rem, 3vw, 2rem); letter-spacing: -.035em; }
.mobile-reset-subtitle { margin-bottom: 28px; color: #697386; line-height: 1.55; }
.mobile-reset-stage .form-label { margin-bottom: 8px; color: #344054; font-weight: 650; }
.mobile-reset-stage .form-control {
  min-height: 52px; border-color: #d8dce7; border-radius: 10px; background: rgba(255,255,255,.94); box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.mobile-reset-stage .form-control:focus { border-color: #7c72ff; box-shadow: 0 0 0 4px rgba(99,91,255,.12); }
.mobile-reset-submit {
  min-height: 52px; border: 0; border-radius: 10px; background: linear-gradient(135deg,#635bff,#7c3aed);
  box-shadow: 0 10px 24px rgba(99,91,255,.25); transition: transform .18s ease, box-shadow .18s ease;
}
.mobile-reset-submit:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(99,91,255,.32); }
.mobile-reset-back { color: #635bff; font-weight: 650; }
@keyframes mobile-reset-mesh {
  0% { background-position: center,0 0,100% 0,100% 100%,0 100%,center; filter: saturate(1.05) hue-rotate(0deg); }
  50% { background-position: center,16% 12%,88% 18%,80% 86%,12% 76%,center; filter: saturate(1.22) hue-rotate(5deg); }
  100% { background-position: center,8% 22%,76% 4%,94% 68%,22% 92%,center; filter: saturate(1.12) hue-rotate(-5deg); }
}
@keyframes mobile-reset-stripes { to { background-position: 192px 0; } }
@media (max-width: 575.98px) {
  .mobile-reset-shell { width: calc(100% - 24px); padding: 20px 0; }
  .mobile-reset-card { padding: 26px 22px; border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-reset-stage::before, .mobile-reset-grid { animation: none !important; }
  .mobile-reset-submit { transition: none; }
}