:root {
  --background: 248 33% 8%;
  --foreground: 220 38% 96%;
  --primary: 278 92% 62%;
  --primary-foreground: 0 0% 100%;
  --secondary: 190 95% 52%;
  --secondary-foreground: 226 45% 9%;
  --muted: 246 22% 20%;
  --muted-foreground: 226 18% 74%;
  --destructive: 348 89% 60%;
  --destructive-foreground: 0 0% 100%;
  --border: 246 22% 26%;
  --card: 247 31% 12%;
  --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.18);
  --shadow-md: 0 18px 45px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 28px 80px rgba(111, 42, 255, 0.28);
  --transition-fast: 160ms ease;
  --transition-smooth: 260ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 30px;
}
.dark {
  --background: 248 33% 8%;
  --foreground: 220 38% 96%;
  --primary: 278 92% 62%;
  --secondary: 190 95% 52%;
  --muted: 246 22% 20%;
  --destructive: 348 89% 60%;
  --border: 246 22% 26%;
  --card: 247 31% 12%;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: hsl(var(--background)); }
body {
  margin: 0;
  min-height: 100vh;
  color: hsl(var(--foreground));
  background:
    radial-gradient(circle at 18% 0%, hsla(var(--primary), .38), transparent 32%),
    radial-gradient(circle at 90% 18%, hsla(var(--secondary), .22), transparent 30%),
    linear-gradient(145deg, hsl(var(--background)), hsl(250 34% 5%));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
input, select, textarea { font-size: max(16px, 1rem); }
.focus-ring:focus { outline: 3px solid hsla(var(--secondary), .42); outline-offset: 2px; }
.glass {
  background: linear-gradient(180deg, hsla(var(--card), .92), hsla(var(--card), .72));
  border: 1px solid hsla(var(--border), .85);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(18px);
}
.video-shimmer {
  background: linear-gradient(120deg, hsla(var(--primary), .28), hsla(var(--secondary), .18), hsla(var(--primary), .22));
  background-size: 220% 220%;
  animation: shimmer 7s ease infinite;
}
@keyframes shimmer { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.safe-bottom { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }