.mobile-login-stage {
  --pointer-x: 72%; --pointer-y: 30%; position: relative; min-height: 100vh; overflow: hidden;
  color: #172033; background: #f6f8fc; isolation: isolate;
}
.mobile-login-stage::before {
  position: absolute; top: 0; right: 0; left: 0; 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-login-mesh 12s ease-in-out infinite alternate;
}
.mobile-login-grid {
  position: absolute; top: 0; right: 0; left: 0; 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-login-stripes 18s linear infinite;
}
.mobile-login-orb {
  display: none;
}
.mobile-login-orb::after {
  position: absolute; inset: 12%; content: ''; border-radius: inherit;
  background: radial-gradient(circle at 34% 26%, rgba(255, 255, 255, .82), rgba(255, 255, 255, .04) 42%, rgba(30, 27, 75, .12)); mix-blend-mode: soft-light;
}
.mobile-login-aurora { display: none; }
.mobile-login-shell {
  width: min(510px, calc(100% - 48px)); min-height: 100vh; margin: 0 auto; display: grid;
  grid-template-columns: minmax(0, 1fr); align-items: center; padding: 56px 0;
}
.mobile-login-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-login-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-login-brand:hover { color: #172033; }
.mobile-login-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-login-title { margin-bottom: 8px; font-size: clamp(1.65rem, 3vw, 2rem); letter-spacing: -.035em; }
.mobile-login-subtitle { margin-bottom: 28px; color: #697386; }
.mobile-login-stage .form-label { margin-bottom: 8px; color: #344054; font-weight: 650; }
.mobile-login-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-login-stage .form-control:focus { border-color: #7c72ff; box-shadow: 0 0 0 4px rgba(99, 91, 255, .12); }
.mobile-login-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-login-submit:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(99, 91, 255, .32); }
.mobile-login-link { color: #635bff; font-weight: 650; }
.mobile-login-divider { color: #7b8496; }
.mobile-login-divider::before, .mobile-login-divider::after { height: 1px; flex: 1; content: ''; background: #e2e5ed; }
.mobile-login-provider { min-height: 48px; border-color: #d8dce7; border-radius: 10px; font-weight: 600; }
.mobile-login-visual { display: none; }
.mobile-client-preview {
  position: absolute; top: 50%; left: 50%; width: min(350px, 32vw); padding: 12px; border: 1px solid rgba(255, 255, 255, .58); border-radius: 36px;
  background: rgba(18, 21, 48, .78); box-shadow: 0 38px 90px rgba(40, 25, 100, .3); transform: translate(-50%, -50%) perspective(1100px) rotateY(-8deg) rotateX(3deg); backdrop-filter: blur(18px); animation: mobile-login-phone 7s ease-in-out infinite alternate;
}
.mobile-client-screen { min-height: 525px; padding: 25px 20px; overflow: hidden; border-radius: 27px; background: rgba(249, 250, 255, .96); }
.mobile-client-notch { width: 74px; height: 6px; margin: 0 auto 34px; border-radius: 20px; background: #d8dbea; }
.mobile-preview-heading { width: 55%; height: 12px; margin-bottom: 24px; border-radius: 20px; background: #252b42; }
.mobile-preview-card { padding: 18px; margin-bottom: 13px; border: 1px solid #e5e7f0; border-radius: 16px; background: #fff; box-shadow: 0 8px 22px rgba(43, 46, 76, .06); }
.mobile-preview-line { height: 8px; border-radius: 20px; background: #dfe2ec; }
.mobile-preview-line.is-short { width: 44%; }
.mobile-preview-time { margin: 14px 0 12px; color: #242a40; font-size: 1.3rem; font-weight: 750; }
.mobile-preview-action { height: 42px; margin-top: 25px; border-radius: 10px; background: linear-gradient(135deg, #635bff, #8b5cf6); animation: mobile-login-pulse 4s ease-in-out infinite; }
@keyframes mobile-login-orb {
  0% { border-radius: 48% 52% 58% 42% / 42% 46% 54% 58%; transform: translate(-50%, -50%) rotate(-8deg) scale(1); }
  100% { border-radius: 57% 43% 45% 55% / 52% 58% 42% 48%; transform: translate(-49%, -51%) rotate(8deg) scale(1.04); }
}
@keyframes mobile-login-pulse { 50% { transform: scale(.97); opacity: .85; } }
@keyframes mobile-login-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-login-stripes { to { background-position: 192px 0; } }
@keyframes mobile-login-phone {
  0% { transform: translate(-50%, -51%) perspective(1100px) rotateY(-10deg) rotateX(3deg) rotateZ(-1deg); }
  100% { transform: translate(-50%, -48%) perspective(1100px) rotateY(-5deg) rotateX(1deg) rotateZ(1deg); }
}
@keyframes mobile-login-drift-a { to { transform: translate(115px, 85px) scale(1.2); } }
@keyframes mobile-login-drift-b { to { transform: translate(-125px, -70px) scale(.82); } }
@keyframes mobile-login-drift-c { to { transform: translate(75px, -110px) scale(1.35); } }
@media (max-width: 991.98px) {
  .mobile-login-shell { width: min(510px, calc(100% - 32px)); }
}
@media (max-width: 575.98px) {
  .mobile-login-shell { width: calc(100% - 24px); padding: 20px 0; }
  .mobile-login-card { padding: 26px 22px; border-radius: 18px; }
  .mobile-login-actions { align-items: flex-start !important; flex-direction: column; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-login-stage::before, .mobile-login-grid, .mobile-client-preview, .mobile-preview-action { animation: none !important; }
  .mobile-login-submit { transition: none; }
}