:root {
  --background: 240 33% 98%;
  --foreground: 236 35% 10%;
  --primary: 262 88% 55%;
  --secondary: 246 45% 94%;
  --muted: 236 13% 43%;
  --destructive: 350 84% 54%;
  --border: 240 22% 86%;
  --card: 0 0% 100%;
  --shadow-sm: 0 6px 18px hsl(236 35% 10% / 0.06);
  --shadow-md: 0 16px 45px hsl(236 35% 10% / 0.10);
  --shadow-lg: 0 28px 80px hsl(262 88% 35% / 0.18);
  --transition-fast: 160ms ease;
  --transition-smooth: 260ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
}

.dark {
  --background: 236 36% 7%;
  --foreground: 240 30% 96%;
  --primary: 268 96% 68%;
  --secondary: 237 25% 15%;
  --muted: 240 14% 72%;
  --destructive: 350 84% 62%;
  --border: 238 22% 22%;
  --card: 237 30% 11%;
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  background: hsl(var(--background));
}

body {
  margin: 0;
  min-height: 100%;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}

button, input { font: inherit; }
button { min-height: 44px; cursor: pointer; }
button:disabled { cursor: not-allowed; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.input {
  min-height: 52px;
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  padding: 0 16px;
  font-size: max(16px, 1rem);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);
}

.input:focus {
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 4px hsl(var(--primary) / 0.14);
}

.input:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.input::placeholder { color: hsl(var(--muted)); }

.btn-primary {
  min-height: 52px;
  width: 100%;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(276 94% 62%));
  color: white;
  padding: 12px 16px;
  font-weight: 800;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), opacity var(--transition-fast);
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

.btn-secondary {
  min-height: 52px;
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  padding: 12px 16px;
  font-weight: 800;
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), opacity var(--transition-fast);
}

.btn-secondary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.btn-primary:disabled, .btn-secondary:disabled { opacity: 0.6; }

.gradient-text {
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(188 92% 45%), hsl(318 86% 58%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-orb {
  background:
    radial-gradient(circle at 12% 18%, hsl(var(--primary) / 0.18), transparent 30%),
    radial-gradient(circle at 82% 10%, hsl(188 92% 45% / 0.14), transparent 28%),
    radial-gradient(circle at 70% 82%, hsl(318 86% 58% / 0.12), transparent 32%);
}

.auth-shell {
  position: relative;
  isolation: isolate;
}

.auth-glow {
  position: absolute;
  inset: -24px;
  z-index: -1;
  border-radius: 42px;
  background:
    radial-gradient(circle at 18% 12%, hsl(188 92% 45% / 0.22), transparent 34%),
    radial-gradient(circle at 82% 0%, hsl(var(--primary) / 0.24), transparent 36%),
    radial-gradient(circle at 55% 90%, hsl(318 86% 58% / 0.18), transparent 34%);
  filter: blur(10px);
}

.auth-topline {
  height: 4px;
  background: linear-gradient(90deg, hsl(var(--primary)), hsl(188 92% 45%), hsl(318 86% 58%));
}

.pulse-dot { animation: pulseDot 1.8s ease-in-out infinite; }

@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.45); opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}