/* ═══════════════════════════════════════════════════════════
   Tesla Core Asset — Auth pages (login / register / forgot)
   Emerald design system: glass, glow, split layout
   ═══════════════════════════════════════════════════════════ */

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #03070a; }
::-webkit-scrollbar-thumb { background: rgba(16,185,129,.55); border-radius: 4px; }
#bgCanvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

/* ── Shared helpers ── */
.glass {
  background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.glass-strong {
  background: linear-gradient(165deg, rgba(16,185,129,.08), rgba(255,255,255,.015) 55%);
  border: 1px solid rgba(16,185,129,.22);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.grad-text {
  background: linear-gradient(100deg, rgb(52 211 153), rgb(45 212 191));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.btn-glow { transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .3s, filter .3s; }
.btn-glow:hover { transform: translateY(-2px); box-shadow: 0 14px 44px -10px rgba(16,185,129,.55); filter: brightness(1.06); }
.btn-glow:active { transform: translateY(0); }
.glow-orb { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; }

[x-cloak] { display: none !important; }

/* ── Form controls ── */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: #f0fdfa;
  -webkit-box-shadow: 0 0 0 1000px #0a1211 inset;
  transition: background-color 9999s ease-in-out 0s;
}

@media (prefers-reduced-motion: reduce) {
  .animate-slide-up { animation: none !important; }
}

/* ── Mobile scroll performance ──
   backdrop-filter and giant blurs force full-screen repaints on every
   scroll frame on phone GPUs. On small screens use flat surfaces. */
@media (max-width: 640px) {
  .glass, .glass-strong {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .glass { background: rgba(255,255,255,.03); }
  .glass-strong { background: #0a1210; }
  .glow-orb { display: none; }
  .animate-ping2 { animation: none !important; }
}