:root {
  --radius: 0.9rem;
  --background: oklch(0.14 0.02 20);
  --foreground: oklch(0.98 0.005 90);
  --card: oklch(0.18 0.02 20);
  --card-foreground: oklch(0.98 0.005 90);
  --popover: oklch(0.16 0.02 20);
  --popover-foreground: oklch(0.98 0.005 90);
  --primary: oklch(0.98 0.005 90);
  --primary-foreground: oklch(0.14 0.02 20);
  --secondary: oklch(0.24 0.02 20);
  --secondary-foreground: oklch(0.98 0.005 90);
  --muted: oklch(0.22 0.015 20);
  --muted-foreground: oklch(0.7 0.02 60);
  --accent: oklch(0.28 0.02 20);
  --accent-foreground: oklch(0.98 0.005 90);
  --destructive: oklch(0.65 0.22 25);
  --destructive-foreground: oklch(0.98 0.005 90);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 12%);
  --ring: oklch(0.7 0.15 15);
  --hot: oklch(0.68 0.24 18);
  --hot-glow: oklch(0.78 0.2 45);
  --gold: oklch(0.85 0.16 85);
  --gradient-hot: linear-gradient(135deg, oklch(0.7 0.24 18), oklch(0.78 0.2 45));
  --gradient-gold: linear-gradient(135deg, oklch(0.85 0.16 85), oklch(0.7 0.18 55));
  --gradient-fade-top: linear-gradient(to bottom, oklch(0 0 0 / 60%), transparent);
  --gradient-fade-bottom: linear-gradient(to top, oklch(0 0 0 / 70%), transparent);
  --shadow-hot: 0 12px 40px -12px oklch(0.7 0.24 18 / 45%);
  --shadow-glow: 0 0 60px oklch(0.78 0.2 45 / 30%);
}
html, body, #root { height: 100%; }
body {
  background-color: var(--background); color: var(--foreground);
  -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none;
}
h1,h2,h3,h4 { font-family: 'Sora', ui-sans-serif, system-ui, sans-serif; letter-spacing: -0.01em; }

.bg-gradient-hot { background-image: var(--gradient-hot); }
.bg-gradient-gold { background-image: var(--gradient-gold); }
.shadow-hot { box-shadow: var(--shadow-hot); }
.shadow-glow { box-shadow: var(--shadow-glow); }
.text-gradient-hot { background-image: var(--gradient-hot); background-clip: text; -webkit-background-clip: text; color: transparent; }

/* Hide scrollbars on the shorts feed */
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

@keyframes fade-in { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }
@keyframes fade-out { from{opacity:1} to{opacity:0} }
@keyframes bounce-down { 0%,100%{transform:translateY(0);opacity:.9} 50%{transform:translateY(14px);opacity:1} }
@keyframes pulse-glow { 0%,100%{box-shadow:0 0 0 0 oklch(0.78 0.2 45 / 40%)} 50%{box-shadow:0 0 0 14px oklch(0.78 0.2 45 / 0%)} }
@keyframes xhs-install-glow { 0%,100%{box-shadow:0 0 0 0 oklch(0.7 0.22 15 / 55%)} 50%{box-shadow:0 0 0 12px oklch(0.7 0.22 15 / 0%)} }
@keyframes spin { to { transform: rotate(360deg); } }
.animate-spin { animation: spin 1s linear infinite; }
.animate-ping { animation: ping 1s cubic-bezier(0,0,.2,1) infinite; }
@keyframes ping { 75%,100% { transform: scale(2); opacity: 0; } }

/* icon size helpers used by lucide-injected svgs */
[data-lucide] { width: 1em; height: 1em; }