:root {
  --background: 250 28% 96%;
  --foreground: 248 22% 9%;
  --primary: 280 100% 58%;
  --primary-foreground: 0 0% 100%;
  --secondary: 185 100% 48%;
  --secondary-foreground: 248 22% 8%;
  --muted: 248 15% 88%;
  --muted-foreground: 248 9% 42%;
  --destructive: 0 86% 62%;
  --destructive-foreground: 0 0% 100%;
  --border: 248 16% 82%;
  --card: 0 0% 100%;
  --card-foreground: 248 22% 9%;
  --accent: 42 100% 61%;
  --accent-foreground: 248 22% 8%;
  --shadow-sm: 0 8px 24px hsl(248 30% 18% / 0.08);
  --shadow-md: 0 16px 42px hsl(248 30% 18% / 0.13);
  --shadow-lg: 0 28px 80px hsl(248 30% 18% / 0.22);
  --transition-fast: 150ms ease;
  --transition-smooth: 320ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 0.65rem;
  --radius-md: 1rem;
  --radius-lg: 1.45rem;
}

.dark {
  --background: 248 24% 7%;
  --foreground: 250 35% 96%;
  --primary: 285 100% 66%;
  --primary-foreground: 0 0% 100%;
  --secondary: 184 100% 52%;
  --secondary-foreground: 248 24% 7%;
  --muted: 248 18% 15%;
  --muted-foreground: 250 12% 68%;
  --destructive: 0 92% 66%;
  --destructive-foreground: 0 0% 100%;
  --border: 248 18% 20%;
  --card: 248 22% 10%;
  --card-foreground: 250 35% 96%;
  --accent: 42 100% 62%;
  --accent-foreground: 248 24% 7%;
  --shadow-sm: 0 8px 24px hsl(0 0% 0% / 0.22);
  --shadow-md: 0 18px 54px hsl(0 0% 0% / 0.32);
  --shadow-lg: 0 32px 95px hsl(0 0% 0% / 0.45);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 18% 8%, hsl(var(--primary) / 0.24), transparent 30rem),
    radial-gradient(circle at 86% 16%, hsl(var(--secondary) / 0.16), transparent 28rem),
    linear-gradient(180deg, hsl(var(--background)), hsl(var(--background)) 64%, hsl(250 28% 5%));
  color: hsl(var(--foreground));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button, input { font: inherit; }
button { cursor: pointer; }

.glass {
  background: linear-gradient(180deg, hsl(var(--card) / 0.88), hsl(var(--card) / 0.66));
  border: 1px solid hsl(var(--border) / 0.75);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(18px);
}

.neon-border {
  position: relative;
  overflow: hidden;
}
.neon-border::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, hsl(var(--primary) / 0.9), hsl(var(--secondary) / 0.65), hsl(var(--accent) / 0.75));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.scanline {
  background-image: linear-gradient(hsl(var(--foreground) / 0.05) 1px, transparent 1px);
  background-size: 100% 9px;
}

.fade-in { animation: fadeIn 420ms var(--transition-smooth) both; }
.slide-up { animation: slideUp 520ms var(--transition-smooth) both; }
.pulse-glow { animation: pulseGlow 2.2s ease-in-out infinite; }

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 hsl(var(--primary) / 0); }
  50% { box-shadow: 0 0 42px hsl(var(--primary) / 0.28); }
}

.video-frame {
  background:
    linear-gradient(135deg, hsl(var(--primary) / 0.18), hsl(var(--secondary) / 0.12)),
    hsl(var(--muted) / 0.32);
}

.skeleton {
  background: linear-gradient(90deg, hsl(var(--muted) / 0.45), hsl(var(--muted) / 0.82), hsl(var(--muted) / 0.45));
  background-size: 220% 100%;
  animation: shimmer 1.25s linear infinite;
}
@keyframes shimmer {
  from { background-position: 220% 0; }
  to { background-position: -220% 0; }
}

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: hsl(var(--background)); }
::-webkit-scrollbar-thumb { background: hsl(var(--muted)); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: hsl(var(--primary) / 0.55); }

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