@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap");

:root {
    --background: oklch(0.9680 0.0020 70);
    --foreground: oklch(0.2101 0.0318 264.6645);
    --card: oklch(1.0000 0 0);
    --card-foreground: oklch(0.2101 0.0318 264.6645);
    --primary: oklch(0.6716 0.1368 48.5130);
    --primary-foreground: oklch(1.0000 0 0);
    --secondary: oklch(0.5360 0.0398 196.0280);
    --secondary-foreground: oklch(1.0000 0 0);
    --muted: oklch(0.9400 0.0030 70);
    --muted-foreground: oklch(0.5510 0.0234 264.3637);
    --accent: oklch(0.9280 0.0020 70);
    --accent-foreground: oklch(0.2101 0.0318 264.6645);
    --destructive: oklch(0.6368 0.2078 25.3313);
    --border: oklch(0.8700 0.0070 70);
    --input: oklch(0.9520 0.0030 70);
    --ring: oklch(0.6716 0.1368 48.5130);
    --chart-1: oklch(0.5940 0.0443 196.0233);
    --chart-2: oklch(0.7214 0.1337 49.9802);
    --chart-3: oklch(0.8721 0.0864 68.5474);
    --chart-4: oklch(0.6268 0 0);
    --chart-5: oklch(0.6830 0 0);
    --font-sans: "Geist", ui-sans-serif, sans-serif, system-ui;
    --font-mono: "Geist Mono", ui-monospace, monospace;
    --radius: 0.375rem;
    --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
    --shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.12), 0px 2px 4px -2px hsl(0 0% 0% / 0.08);
    --shadow-lg: 0px 8px 16px -2px hsl(0 0% 0% / 0.12), 0px 4px 6px -4px hsl(0 0% 0% / 0.08);
}

.dark {
    --background: oklch(0.1797 0.0043 308.1928);
    --foreground: oklch(0.8109 0 0);
    --card: oklch(0.1822 0 0);
    --card-foreground: oklch(0.8109 0 0);
    --primary: oklch(0.7214 0.1337 49.9802);
    --primary-foreground: oklch(0.1797 0.0043 308.1928);
    --secondary: oklch(0.5940 0.0443 196.0233);
    --secondary-foreground: oklch(0.1797 0.0043 308.1928);
    --muted: oklch(0.2520 0 0);
    --muted-foreground: oklch(0.6268 0 0);
    --accent: oklch(0.3211 0 0);
    --accent-foreground: oklch(0.8109 0 0);
    --destructive: oklch(0.5940 0.0443 196.0233);
    --border: oklch(0.2520 0 0);
    --input: oklch(0.2520 0 0);
    --ring: oklch(0.7214 0.1337 49.9802);
    --chart-1: oklch(0.5940 0.0443 196.0233);
    --chart-2: oklch(0.7214 0.1337 49.9802);
    --chart-3: oklch(0.8721 0.0864 68.5474);
    --chart-4: oklch(0.6268 0 0);
    --chart-5: oklch(0.6830 0 0);
    --shadow-sm: 0px 1px 4px 0px hsl(0 0% 0% / 0.05), 0px 1px 2px -1px hsl(0 0% 0% / 0.05);
    --shadow-md: 0px 1px 4px 0px hsl(0 0% 0% / 0.05), 0px 2px 4px -1px hsl(0 0% 0% / 0.05);
    --shadow-lg: 0px 1px 4px 0px hsl(0 0% 0% / 0.05), 0px 4px 6px -1px hsl(0 0% 0% / 0.05);
}

* { margin: 0; padding: 0; box-sizing: border-box; border-color: var(--border); }

html, body {
    background: var(--background);
    color: var(--foreground);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in oklch, var(--primary) 40%, transparent) transparent;
}

::selection { background-color: rgb(255 124 0); color: rgb(255 255 255); }

*::-webkit-scrollbar { width: 4px; height: 4px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background-color: color-mix(in oklch, var(--primary) 40%, transparent); border-radius: 2px; }
*::-webkit-scrollbar-thumb:hover { background-color: var(--primary); }

nav button:hover { color: var(--primary) !important; }

@keyframes pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.7; }
}

/* Responsive — stack video + stats vertically on small screens */
@media (max-width: 768px) {
  nav { flex-wrap: wrap; font-size: 0.7rem !important; }
  nav button { padding: 3px 6px !important; font-size: 0.65rem !important; }
}