:root {
  --background: 260 35% 96%;
  --foreground: 258 25% 9%;
  --primary: 330 96% 56%;
  --primary-foreground: 0 0% 100%;
  --secondary: 190 96% 48%;
  --secondary-foreground: 250 30% 8%;
  --muted: 260 16% 48%;
  --muted-foreground: 260 10% 34%;
  --destructive: 0 88% 58%;
  --destructive-foreground: 0 0% 100%;
  --border: 260 22% 84%;
  --card: 0 0% 100%;
  --card-foreground: 258 25% 9%;
  --shadow-sm: 0 4px 14px rgba(9, 5, 20, 0.12);
  --shadow-md: 0 14px 34px rgba(9, 5, 20, 0.18);
  --shadow-lg: 0 28px 70px rgba(9, 5, 20, 0.35);
  --transition-fast: 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --transition-smooth: 360ms cubic-bezier(0.22, 1, 0.36, 1);
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 30px;
}

.dark {
  --background: 258 52% 4%;
  --foreground: 0 0% 98%;
  --primary: 330 96% 60%;
  --primary-foreground: 0 0% 100%;
  --secondary: 188 96% 53%;
  --secondary-foreground: 250 30% 7%;
  --muted: 258 15% 62%;
  --muted-foreground: 258 10% 76%;
  --destructive: 0 90% 62%;
  --destructive-foreground: 0 0% 100%;
  --border: 258 20% 20%;
  --card: 258 38% 9%;
  --card-foreground: 0 0% 98%;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

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

body {
  overscroll-behavior: none;
}

button,
a {
  transition: transform var(--transition-fast), opacity var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
}

button:active,
a:active {
  transform: scale(0.96);
}

.feed-scroll {
  height: 100dvh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
  touch-action: pan-y;
}

.feed-scroll::-webkit-scrollbar {
  display: none;
}

.feed-item {
  height: 100dvh;
  min-height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  position: relative;
  overflow: hidden;
  background: #000;
}

.video-vignette::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(circle at 50% 18%, rgba(255,255,255,0.08), transparent 34%), linear-gradient(to bottom, rgba(0,0,0,0.34), rgba(0,0,0,0.04) 30%, rgba(0,0,0,0.12) 54%, rgba(0,0,0,0.84));
}

.glass-panel {
  background: rgba(12, 8, 24, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(18px);
}

.action-button {
  background: rgba(255,255,255,0.13);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 10px 26px rgba(0,0,0,0.22);
  backdrop-filter: blur(14px);
}

.action-button:hover {
  background: rgba(255,255,255,0.2);
}

.video-fallback-motion {
  background-size: 260% 260%;
  animation: trovexGradient 9s ease-in-out infinite;
}

@keyframes trovexGradient {
  0% { background-position: 0% 45%; transform: scale(1); }
  50% { background-position: 100% 55%; transform: scale(1.03); }
  100% { background-position: 0% 45%; transform: scale(1); }
}

.pulse-ring {
  animation: pulseRing 1.8s ease-in-out infinite;
}

@keyframes pulseRing {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.08); }
}

.safe-bottom {
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
}

.safe-top {
  padding-top: max(0.75rem, env(safe-area-inset-top));
}

.focus-token:focus-visible {
  outline: 2px solid hsl(var(--secondary));
  outline-offset: 3px;
}