/* ==========================================================================
   TubeEngine Theme Overrides
   Layered on top of BlazorBlueprint's theme system.
   All accent colors flow through --color-neon which respects --tenant-accent.
   ========================================================================== */

/* --- Screen-reader only (visually hidden but accessible) --- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- FORCE design background #0a0a0a, override BB's lighter dark theme --- */
html.dark {
  --background: #0a0a0a !important;
  --card: #0a0a0a !important;
  --popover: #0a0a0a !important;
}

html.dark body {
  background-color: #0a0a0a !important;
}

/* --- Nav link active state with green underline --- */
.nav-link.active {
  color: #e5e5e5 !important;
  position: relative;
}
.nav-link.active::after {
  content: '';
  display: block;
  height: 2px;
  background: #39ff14;
  border-radius: 1px;
  margin-top: 3px;
  box-shadow: 0 0 6px rgba(57,255,20,0.4);
}

html:not(.dark) .nav-link.active::after {
  background: var(--color-neon);
  box-shadow: none;
}

/* --- Sidebar matches design --- */
html.dark aside {
  background: rgba(255,255,255,0.015) !important;
  border-left: 1px solid rgba(255,255,255,0.04) !important;
}

/* --- Light mode structural overrides --- */
/* Header: light glass */
html:not(.dark) .header-glass {
  background: rgba(255,255,255,0.85) !important;
  border-bottom-color: rgba(0,0,0,0.06) !important;
}

/* Sidebar */
html:not(.dark) aside {
  background: rgba(0,0,0,0.015) !important;
  border-left-color: rgba(0,0,0,0.06) !important;
}

/* Nav links */
html:not(.dark) .nav-link {
  color: #525252;
}
html:not(.dark) .nav-link:hover {
  color: #262626;
  background: rgba(0,0,0,0.03);
}
html:not(.dark) .nav-link.active {
  color: #171717 !important;
}
html:not(.dark) .nav-link.active::after {
  background: var(--primary);
}

/* Mobile tabs */
html:not(.dark) .mobile-tab {
  color: #525252;
}
html:not(.dark) .mobile-tab:hover {
  color: #262626;
}

/* Sidebar headings */
html:not(.dark) .sidebar-heading {
  color: #595959;
}

/* Theme toggle button */
html:not(.dark) .theme-toggle {
  border-color: rgba(0,0,0,0.08);
  background: rgba(0,0,0,0.03);
  color: #525252;
}
html:not(.dark) .theme-toggle:hover {
  border-color: rgba(0,0,0,0.15);
  background: rgba(0,0,0,0.06);
  color: #171717;
}

/* Logo — "Tub" part glows, "Tug" stays foreground color */
.logo-text {
  color: var(--color-neon);
  text-shadow: 0 0 8px color-mix(in srgb, var(--color-neon) 40%, transparent),
               0 0 20px color-mix(in srgb, var(--color-neon) 15%, transparent);
  transition: text-shadow 0.2s;
}
a:hover .logo-text {
  text-shadow: 0 0 12px color-mix(in srgb, var(--color-neon) 60%, transparent),
               0 0 30px color-mix(in srgb, var(--color-neon) 25%, transparent);
}
html:not(.dark) .logo-text {
  text-shadow: 0 1px 3px color-mix(in srgb, var(--color-neon) 25%, transparent);
}

/* Search trigger bar */
.search-trigger {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  color: #8a8a8a;
}
.search-trigger:hover {
  border-color: rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
}
.search-trigger .search-icon {
  color: #8a8a8a;
}
.search-trigger .search-kbd {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  color: #7a7a7a;
}

html:not(.dark) .search-trigger {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.08);
  color: #525252;
}
html:not(.dark) .search-trigger:hover {
  border-color: rgba(0,0,0,0.14);
  background: rgba(0,0,0,0.06);
}
html:not(.dark) .search-trigger .search-icon {
  color: #525252;
}
html:not(.dark) .search-trigger .search-kbd {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.08);
  color: #525252;
}

/* --- Light mode: override common inline patterns --- */
/*
 * Nuclear option: override ALL hardcoded dark-mode inline styles in one place.
 * Many .razor files have inline style="color: #a3a3a3; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08)"
 * which are invisible/readable on dark but broken on light.
 * We flip them all here instead of editing 39 razor files.
 */

/* === TEXT COLORS === */
/* Bright text (#e5e5e5, #d4d4d4) -> near-black */
html:not(.dark) [style*="color: #e5e5e5"] { color: #171717 !important; }
html:not(.dark) [style*="color: #d4d4d4"] { color: #262626 !important; }
html:not(.dark) [style*="color: #e5e5e5;"] { color: #171717 !important; }

/* Medium text (#a3a3a3) -> dark gray */
html:not(.dark) [style*="color: #a3a3a3"] { color: #404040 !important; }

/* Dim text (#737373) -> medium gray */
html:not(.dark) [style*="color: #737373"] { color: #525252 !important; }

/* Muted text (#525252) -> medium gray */
html:not(.dark) [style*="color: #525252"] { color: #525252 !important; }

/* Very dark text (#333, #262626) -> lighter for contrast on white */
html:not(.dark) [style*="color: #333"] { color: #737373 !important; }
html:not(.dark) [style*="color: #262626"] { color: #737373 !important; }

/* Dark text on dark bg (#404040) -> medium gray on light */
html:not(.dark) [style*="color: #404040"] { color: #525252 !important; }

/* === BACKGROUNDS === */
/* White-on-transparent surfaces */
html:not(.dark) [style*="background: rgba(255,255,255,0.02)"] { background: rgba(0,0,0,0.02) !important; }
html:not(.dark) [style*="background: rgba(255,255,255,0.03)"] { background: rgba(0,0,0,0.025) !important; }
html:not(.dark) [style*="background: rgba(255,255,255,0.04)"] { background: rgba(0,0,0,0.035) !important; }
html:not(.dark) [style*="background: rgba(255,255,255,0.05)"] { background: rgba(0,0,0,0.04) !important; }
html:not(.dark) [style*="background: rgba(255,255,255,0.06)"] { background: rgba(0,0,0,0.045) !important; }
html:not(.dark) [style*="background: rgba(255,255,255,0.08)"] { background: rgba(0,0,0,0.05) !important; }
html:not(.dark) [style*="background: rgba(255,255,255,0.1)"] { background: rgba(0,0,0,0.06) !important; }

/* Dark background fills (#0a0a0a, #111, #141414, #1a1a1a) */
html:not(.dark) [style*="background: #0a0a0a"] { background: #fafafa !important; }
html:not(.dark) [style*="background: #111"] { background: #f5f5f5 !important; }
html:not(.dark) [style*="background: #141414"] { background: #f0f0f0 !important; }
html:not(.dark) [style*="background: #1a1a1a"] { background: #e5e5e5 !important; }

/* Dark glass backgrounds */
html:not(.dark) [style*="background: rgba(10,10,10"] { background: rgba(255,255,255,0.85) !important; }
html:not(.dark) [style*="background: rgba(10, 10, 10"] { background: rgba(255,255,255,0.85) !important; }
html:not(.dark) [style*="background: rgba(12, 12, 18"] { background: rgba(255,255,255,0.97) !important; }
html:not(.dark) [style*="background: rgba(12,12,18"] { background: rgba(255,255,255,0.97) !important; }

/* === BORDERS === */
/* White-on-transparent borders */
html:not(.dark) [style*="rgba(255,255,255,0.03)"] { border-color: rgba(0,0,0,0.04) !important; }
html:not(.dark) [style*="rgba(255,255,255,0.04)"] { border-color: rgba(0,0,0,0.06) !important; }
html:not(.dark) [style*="rgba(255,255,255,0.06)"] { border-color: rgba(0,0,0,0.07) !important; }
html:not(.dark) [style*="rgba(255,255,255,0.08)"] { border-color: rgba(0,0,0,0.08) !important; }
html:not(.dark) [style*="rgba(255,255,255,0.1)"] { border-color: rgba(0,0,0,0.1) !important; }
html:not(.dark) [style*="rgba(255,255,255,0.12)"] { border-color: rgba(0,0,0,0.12) !important; }
html:not(.dark) [style*="rgba(255,255,255,0.14)"] { border-color: rgba(0,0,0,0.14) !important; }
html:not(.dark) [style*="rgba(255,255,255,0.15)"] { border-color: rgba(0,0,0,0.14) !important; }
html:not(.dark) [style*="rgba(255,255,255,0.2)"] { border-color: rgba(0,0,0,0.15) !important; }

/* border-bottom with white alpha */
html:not(.dark) [style*="border-bottom: 1px solid rgba(255,255,255"] { border-bottom-color: rgba(0,0,0,0.06) !important; }
html:not(.dark) [style*="border-left: 1px solid rgba(255,255,255"] { border-left-color: rgba(0,0,0,0.06) !important; }

/* Avatar borders in light mode */
html:not(.dark) [style*="border: 1px solid rgba(255,255,255"] { border-color: rgba(0,0,0,0.08) !important; }
html:not(.dark) [style*="border: 1px solid rgba(255, 255, 255"] { border-color: rgba(0,0,0,0.08) !important; }

/* === HOVER STATES === */
/* Sidebar items hover:bg-white */
html:not(.dark) aside .hover\:bg-white\/\[0\.03\]:hover,
html:not(.dark) aside [class*="hover:bg-white"] {
  background: rgba(0,0,0,0.03) !important;
}

/* === SPECIFIC OVERRIDES FOR LIGHT === */
/* Neon/green colors (#39ff14) are fine — they work on both backgrounds */
/* Purple gradients are fine — they work on both backgrounds */
/* White text (color: white) is fine on colored backgrounds */

/* === NEON GREEN (#39ff14) → deeper green in light mode === */
/* Catches ALL inline style="color: #39ff14" across every component */
html:not(.dark) [style*="#39ff14"] {
  color: #16a34a !important;
  text-shadow: none !important;
}
/* But preserve green-on-colored-bg where color is white/bg */
html:not(.dark) [style*="background: #39ff14"] {
  background: #16a34a !important;
  color: #fff !important;
  box-shadow: none !important;
}
html:not(.dark) [style*="background:rgba(57,255,20"] {
  background: rgba(22, 163, 74, 0.08) !important;
  box-shadow: none !important;
}
html:not(.dark) [style*="background: rgba(57,255,20"] {
  background: rgba(22, 163, 74, 0.08) !important;
  box-shadow: none !important;
}
html:not(.dark) [style*="background: rgba(57, 255, 20"] {
  background: rgba(22, 163, 74, 0.08) !important;
  box-shadow: none !important;
}
/* Neon background variants — map alpha values */
html:not(.dark) [style*="rgba(57,255,20,0.03)"] { border-color: rgba(22,163,74,0.04) !important; }
html:not(.dark) [style*="rgba(57,255,20,0.04)"] { border-color: rgba(22,163,74,0.05) !important; }
html:not(.dark) [style*="rgba(57,255,20,0.06)"] { border-color: rgba(22,163,74,0.06) !important; }
html:not(.dark) [style*="rgba(57,255,20,0.08)"] { border-color: rgba(22,163,74,0.07) !important; }
html:not(.dark) [style*="rgba(57,255,20,0.10)"] { border-color: rgba(22,163,74,0.08) !important; }
html:not(.dark) [style*="rgba(57,255,20,0.12)"] { border-color: rgba(22,163,74,0.1) !important; }
html:not(.dark) [style*="rgba(57, 255, 20, 0.03)"] { border-color: rgba(22,163,74,0.04) !important; }
html:not(.dark) [style*="rgba(57, 255, 20, 0.04)"] { border-color: rgba(22,163,74,0.05) !important; }
html:not(.dark) [style*="rgba(57, 255, 20, 0.06)"] { border-color: rgba(22,163,74,0.06) !important; }
html:not(.dark) [style*="rgba(57, 255, 20, 0.08)"] { border-color: rgba(22,163,74,0.07) !important; }
html:not(.dark) [style*="rgba(57, 255, 20, 0.10)"] { border-color: rgba(22,163,74,0.08) !important; }
html:not(.dark) [style*="rgba(57, 255, 20, 0.12)"] { border-color: rgba(22,163,74,0.1) !important; }
/* Higher alpha values for borders/badges */
html:not(.dark) [style*="rgba(57,255,20,0.15)"] { border-color: rgba(22,163,74,0.2) !important; }
html:not(.dark) [style*="rgba(57,255,20,0.2)"] { border-color: rgba(22,163,74,0.2) !important; }
html:not(.dark) [style*="rgba(57,255,20,0.25)"] { border-color: rgba(22,163,74,0.25) !important; }
html:not(.dark) [style*="rgba(57,255,20,0.3)"] { border-color: rgba(22,163,74,0.3) !important; }
html:not(.dark) [style*="rgba(57,255,20,0.35)"] { border-color: rgba(22,163,74,0.35) !important; }
html:not(.dark) [style*="rgba(57,255,20,0.4)"] { border-color: rgba(22,163,74,0.35) !important; }
html:not(.dark) [style*="rgba(57,255,20,0.5)"] { border-color: rgba(22,163,74,0.4) !important; }
html:not(.dark) [style*="rgba(57, 255, 20, 0.15)"] { border-color: rgba(22,163,74,0.2) !important; }
html:not(.dark) [style*="rgba(57, 255, 20, 0.2)"] { border-color: rgba(22,163,74,0.2) !important; }
html:not(.dark) [style*="rgba(57, 255, 20, 0.25)"] { border-color: rgba(22,163,74,0.25) !important; }
html:not(.dark) [style*="rgba(57, 255, 20, 0.3)"] { border-color: rgba(22,163,74,0.3) !important; }
html:not(.dark) [style*="rgba(57, 255, 20, 0.35)"] { border-color: rgba(22,163,74,0.35) !important; }
html:not(.dark) [style*="rgba(57, 255, 20, 0.4)"] { border-color: rgba(22,163,74,0.35) !important; }
html:not(.dark) [style*="rgba(57, 255, 20, 0.5)"] { border-color: rgba(22,163,74,0.4) !important; }
/* Box-shadow glow with neon green */
html:not(.dark) [style*="box-shadow: 0 0 8px rgba(57,255,20"] { box-shadow: none !important; }
html:not(.dark) [style*="box-shadow: 0 0 8px rgba(57, 255, 20"] { box-shadow: none !important; }
html:not(.dark) [style*="box-shadow: 0 0 6px rgba(57,255,20"] { box-shadow: none !important; }
html:not(.dark) [style*="box-shadow: 0 0 6px rgba(57, 255, 20"] { box-shadow: none !important; }
html:not(.dark) [style*="box-shadow: 0 0 4px rgba(57,255,20"] { box-shadow: none !important; }
html:not(.dark) [style*="box-shadow: 0 0 4px rgba(57, 255, 20"] { box-shadow: none !important; }
html:not(.dark) [style*="box-shadow: 0 0 12px 2px rgba(57, 255, 20"] { box-shadow: none !important; }
html:not(.dark) [style*="box-shadow: 0 0 24px rgba(57, 255, 20"] { box-shadow: none !important; }
html:not(.dark) [style*="box-shadow: 0 0 32px rgba(57, 255, 20"] { box-shadow: none !important; }
html:not(.dark) [style*="box-shadow: 0 0 3px rgba(57,255,20"] { box-shadow: none !important; }
/* Text-shadow glow */
html:not(.dark) [style*="text-shadow: 0 0 8px rgba(57,255,20"] { text-shadow: none !important; }
html:not(.dark) [style*="text-shadow: 0 0 8px rgba(57, 255, 20"] { text-shadow: none !important; }
html:not(.dark) [style*="text-shadow: 0 0 20px rgba(57, 255, 20"] { text-shadow: none !important; }
/* Accent-color for checkboxes/inputs */
html:not(.dark) [style*="accent-color: #39ff14"] { accent-color: #16a34a !important; }
/* linear-gradient with #39ff14 */
html:not(.dark) [style*="linear-gradient(90deg, #22c55e, #39ff14)"] { background: linear-gradient(90deg, #16a34a, #22c55e) !important; }
html:not(.dark) [style*="linear-gradient(135deg, rgba(57,255,20"] { background: linear-gradient(135deg, rgba(22,163,74,0.04) 0%, rgba(0,0,0,0.02) 100%) !important; }

/* === Embedded <style> classes from MainLayout.razor === */
html:not(.dark) .sidebar-badge {
  background: rgba(22,163,74,0.1) !important;
  color: #16a34a !important;
  border-color: rgba(22,163,74,0.2) !important;
}
html:not(.dark) .badge-name {
  color: #16a34a !important;
}
html:not(.dark) .save-account-dot {
  background: #16a34a !important;
  box-shadow: none !important;
}
html:not(.dark) .save-account-pulse {
  animation: none !important;
}
html:not(.dark) .sidebar-nudge-btn {
  background: rgba(22,163,74,0.08) !important;
  color: #16a34a !important;
  border-color: rgba(22,163,74,0.2) !important;
}
html:not(.dark) .xp-pulse-dot {
  background: #16a34a !important;
  box-shadow: none !important;
}

/* === Avatar ring fix for light mode === */
html:not(.dark) .avatar-ring {
  border-color: #d4d4d4 !important;
  border-top-color: #16a34a !important;
  border-right-color: #16a34a !important;
  animation: none !important;
}
/* Top-ranked user avatar glow in sidebar */
html:not(.dark) aside [style*="border-color: rgba(57,255,20"] {
  border-color: rgba(22,163,74,0.2) !important;
  box-shadow: none !important;
}

/* === Embedded <style> classes from Profile.razor === */
html:not(.dark) .pref-pill[data-selected] {
  background: rgba(22,163,74,0.08) !important;
  border-color: rgba(22,163,74,0.25) !important;
  color: #16a34a !important;
}
html:not(.dark) .pref-pill[data-selected]:hover {
  background: rgba(22,163,74,0.12) !important;
  border-color: rgba(22,163,74,0.3) !important;
}
html:not(.dark) .pref-save-btn:hover {
  background: rgba(22,163,74,0.06) !important;
  border-color: rgba(22,163,74,0.2) !important;
  color: #16a34a !important;
}

/* === Embedded <style> classes from AgeGateModal.razor === */
html:not(.dark) .age-verify-btn {
  background: #16a34a !important;
  box-shadow: none !important;
}
html:not(.dark) .age-verify-btn:hover {
  box-shadow: none !important;
}

/* === Embedded <style> classes from Collections/Index.razor === */
html:not(.dark) .create-collection-card:hover {
  border-color: rgba(22,163,74,0.3) !important;
  color: #16a34a !important;
}

/* Header bookmark button */
.bookmark-btn-header {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: #a3a3a3;
  text-decoration: none;
  cursor: pointer;
}
html:not(.dark) .bookmark-btn-header {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.08);
  color: #525252;
}

/* XP Pill */
.xp-pill {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  padding: 5px 14px 5px 10px;
  text-decoration: none;
  cursor: pointer;
}
.xp-pill-label {
  color: #525252;
}
.xp-pill-value {
  color: #e5e5e5;
}
html:not(.dark) .xp-pill {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.06);
}
html:not(.dark) .xp-pill-label {
  color: #737373;
}
html:not(.dark) .xp-pill-value {
  color: #171717;
}

/* Follow button */
.follow-btn {
  padding: 6px 16px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: #a3a3a3;
}
.follow-btn:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
}
/* Not following — accent CTA */
.follow-btn:not(.follow-btn--active) {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}
.follow-btn:not(.follow-btn--active):hover {
  opacity: 0.9;
}
html:not(.dark) .follow-btn {
  border-color: rgba(0,0,0,0.08);
  background: rgba(0,0,0,0.04);
  color: #525252;
}
html:not(.dark) .follow-btn:hover {
  background: rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.12);
}

/* --- Alias custom variables to BlazorBlueprint theme vars --- */
/* BB exposes --primary, --foreground, --muted-foreground, --background, etc. directly */
:root {
  --color-neon: var(--tenant-accent, #39ff14);
  --neon-glow: 0 0 6px var(--color-neon), 0 0 20px color-mix(in srgb, var(--color-neon) 40%, transparent);
  --neon-glow-strong: 0 0 8px var(--color-neon), 0 0 30px color-mix(in srgb, var(--color-neon) 50%, transparent);

  --color-text-1: var(--foreground);
  --color-text-2: var(--foreground);
  --color-text-3: var(--muted-foreground);
  --color-text-4: var(--muted-foreground);
  --color-primary: var(--primary);
  --color-background: var(--background);

  /* Dark mode surfaces */
  --color-border: rgba(255, 255, 255, 0.08);
  --color-surface: rgba(255, 255, 255, 0.05);
  --color-background-2: rgba(255, 255, 255, 0.08);
}

/* Light mode surfaces — BB handles --background/--foreground/--primary automatically */
:root:not(.dark) {
  --color-border: rgba(0, 0, 0, 0.08);
  --color-surface: rgba(0, 0, 0, 0.04);
  --color-background-2: rgba(0, 0, 0, 0.05);
  /* Neon green is painful on white — use a deeper, richer green */
  --color-neon: #16a34a;
  --neon-glow: none;
  --neon-glow-strong: none;
}

/* --- Glassmorphism --- */
/* glass: only for overlays/modals that need real blur */
.glass {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* glass-subtle: sidebar items, secondary surfaces */
.glass-subtle {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

/* surface-card: ultra-subtle card/strip background matching mockup */
.surface-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

:root:not(.dark) .glass {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

:root:not(.dark) .glass-subtle {
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

:root:not(.dark) .surface-card {
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

/* --- Neon Utilities --- */
.neon-text {
  color: var(--color-neon);
  text-shadow: 0 0 8px color-mix(in srgb, var(--color-neon) 60%, transparent);
}

html:not(.dark) .neon-text {
  text-shadow: none;
}

.neon-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-neon);
  box-shadow: 0 0 6px var(--color-neon);
}

html:not(.dark) .neon-dot {
  box-shadow: none;
}

.neon-dot-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-neon);
  box-shadow: 0 0 6px var(--color-neon);
  animation: neon-pulse 2s ease-in-out infinite;
}

html:not(.dark) .neon-dot-pulse {
  box-shadow: none;
}

.neon-glow {
  box-shadow: var(--neon-glow);
}

html:not(.dark) .neon-glow {
  box-shadow: none;
}

.neon-border {
  border: 1px solid var(--color-neon);
  box-shadow: var(--neon-glow);
}

html:not(.dark) .neon-border {
  box-shadow: none;
}

/* --- Animations --- */
@keyframes neon-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px var(--color-neon); }
  50% { opacity: 0.5; box-shadow: 0 0 12px var(--color-neon); }
}

@keyframes streak-flicker {
  0%, 100% { opacity: 1; }
  33% { opacity: 0.8; }
  66% { opacity: 0.95; }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.animate-flicker {
  animation: streak-flicker 3s ease-in-out infinite;
}

.animate-shimmer {
  animation: shimmer 2s linear infinite;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--color-neon) 15%, transparent) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
}

/* --- Header Glass --- */
.header-glass {
  background: rgba(10, 10, 15, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

:root:not(.dark) .header-glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* --- Card Hover --- */
.glow-hover {
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.glow-hover:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* --- Scrollbar --- */
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* --- Bookmark Snap Animation --- */
@keyframes bookmark-snap {
  0% { transform: scale(1); }
  40% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

@keyframes bookmark-pulse-ring {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-neon) 50%, transparent); }
  100% { box-shadow: 0 0 0 12px transparent; }
}

.bookmark-snap {
  animation: bookmark-snap 0.3s ease-out, bookmark-pulse-ring 0.4s ease-out;
}

/* --- Fade In (for hover cards) --- */
@keyframes fade-in {
  from { opacity: 0; transform: translateX(-50%) translateY(4px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.animate-fade-in {
  animation: fade-in 0.15s ease-out;
}

/* ==========================================================================
   Video Card — matches design mockup exactly
   In horizontal scroll rows: fixed 220px width
   In video grid: fills available space
   ========================================================================== */

.vcard-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.vcard {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  height: 100%;
}

:root:not(.dark) .vcard {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.vcard:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

:root:not(.dark) .vcard:hover {
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Thumbnail */
.vcard-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #111;
}

.vcard-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.vcard:hover .vcard-img {
  transform: scale(1.05);
}

.vcard-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #111, #1a1a2e);
}

/* Duration badge — bottom-right */
.vcard-duration {
  position: absolute;
  bottom: 5px;
  right: 5px;
  background: rgba(0, 0, 0, 0.75);
  color: #d4d4d4;
  font-size: 9px;
  padding: 2px 5px;
  border-radius: 3px;
  font-weight: 500;
}

/* Social proof — top-left */
.vcard-social-proof {
  position: absolute;
  top: 5px;
  left: 5px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  color: #a3a3a3;
  font-size: 8px;
  padding: 2px 6px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  gap: 3px;
}

.sp-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-neon);
  box-shadow: 0 0 4px rgba(57, 255, 20, 0.4);
}

/* XP indicator removed from card — no duplicate */

/* Hover play overlay */
.vcard-hover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0);
  transition: background 0.2s;
}

.vcard:hover .vcard-hover {
  background: rgba(0, 0, 0, 0.15);
}

.vcard-play-icon {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  opacity: 0;
  transition: opacity 0.2s;
}

.vcard:hover .vcard-play-icon {
  opacity: 1;
}

.vcard-play-icon::after {
  content: '▶';
  color: rgba(255, 255, 255, 0.9);
  font-size: 11px;
  margin-left: 2px;
}

/* Info section */
.vcard-thumb-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.vcard-info {
  padding: 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 56px;
}

.vcard-title {
  font-size: 12px;
  font-weight: 500;
  color: #d4d4d4;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-decoration: none;
  margin-bottom: 4px;
  /* Fixed height: 2 lines at 1.35 line-height × 12px = ~32px */
  height: 32px;
}

.vcard-title:hover {
  color: var(--color-neon);
}

:root:not(.dark) .vcard-title {
  color: #171717;
}

/* Tags row */
.vcard-tags {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  margin-bottom: 6px;
}

.vcard-tag-pill {
  font-size: 0.5625rem;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  color: #8a8a8a;
  border: 1px solid rgba(255, 255, 255, 0.04);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s;
}

.vcard-tag-pill:hover {
  color: var(--color-neon);
  border-color: rgba(57, 255, 20, 0.15);
}

:root:not(.dark) .vcard-tag-pill {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.06);
  color: #737373;
}

/* Actions row — username + buttons */
.vcard-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
}

.vcard-curator {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  text-decoration: none;
  font-size: 0.6875rem;
  min-width: 0;
  overflow: hidden;
}

.vcard-curator-label {
  color: #8a8a8a;
  flex-shrink: 0;
}

.vcard-curator-name {
  color: var(--color-neon);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vcard-curator:hover .vcard-curator-name {
  opacity: 0.8;
}

/* Curator badge ring around avatar */
.curator-avatar-ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  padding: 1px;
}
.curator-avatar-ring.has-badge {
  border: 2px solid var(--color-neon);
  box-shadow: 0 0 6px color-mix(in srgb, var(--color-neon) 40%, transparent);
}
.curator-avatar-ring.has-badge img {
  border-radius: 50%;
}

:root:not(.dark) .vcard-curator-label {
  color: #737373;
}

:root:not(.dark) .vcard-curator-name {
  color: var(--color-neon);
}

.vcard-action-btns {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  flex-shrink: 0;
}

/* Bookmark count on card */
.vcard-bookmark-count {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #7a7a7a;
  font-size: 10px;
  font-weight: 500;
}

/* View count badge on thumbnail — bottom-left */
.vcard-views-badge {
  position: absolute;
  bottom: 5px;
  left: 5px;
  background: rgba(0, 0, 0, 0.75);
  color: #a3a3a3;
  font-size: 9px;
  font-weight: 500;
  padding: 2px 5px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  gap: 3px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.vcard:hover .vcard-views-badge {
  opacity: 1;
}

/* View count in actions row */
.vcard-view-count {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #7a7a7a;
  font-size: 10px;
  font-weight: 500;
}

/* Add to collection button on card */
.vcard-collect-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
  color: #525252;
  cursor: pointer;
  transition: all 0.15s;
  padding: 0;
  flex-shrink: 0;
}

.vcard-collect-btn:hover {
  color: #60a5fa;
  border-color: rgba(96, 165, 250, 0.25);
  background: rgba(96, 165, 250, 0.08);
}

/* Bookmark button on card */
.vcard-bookmark-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
  color: #525252;
  cursor: pointer;
  transition: all 0.15s;
  padding: 0;
  flex-shrink: 0;
}

.vcard-bookmark-btn:hover {
  color: var(--color-neon);
  border-color: rgba(57, 255, 20, 0.2);
  background: rgba(57, 255, 20, 0.08);
}

/* Ghost bookmark button */
.vcard-ghost-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid rgba(167, 139, 250, 0.15);
  background: rgba(167, 139, 250, 0.06);
  color: #a78bfa;
  cursor: pointer;
  transition: all 0.15s;
  padding: 0;
  flex-shrink: 0;
}

.vcard-ghost-btn:hover {
  color: #c4b5fd;
  border-color: rgba(167, 139, 250, 0.3);
  background: rgba(167, 139, 250, 0.12);
}

/* Locked / insufficient XP state */
.vcard-ghost-btn--locked {
  color: #737373;
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  cursor: not-allowed;
  width: auto;
  padding: 0 6px;
  gap: 3px;
}

.vcard-ghost-btn--locked:hover {
  color: #737373;
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.vcard-ghost-xp {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #737373;
}

:root:not(.dark) .vcard-ghost-btn {
  border-color: rgba(124, 58, 237, 0.12);
  background: rgba(124, 58, 237, 0.04);
}

:root:not(.dark) .vcard-ghost-btn--locked {
  color: #a3a3a3;
  border-color: rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.02);
}

.vcard-time {
  font-size: 10px;
  color: #7a7a7a;
}

/* --- Horizontal Scroll Row (video-scroll) --- */
.video-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
  padding-bottom: 4px;
  margin: 0 -20px;
  padding-left: 20px;
  padding-right: 20px;
}

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

/* Cards in horizontal scroll rows get fixed 220px */
.video-scroll .vcard-link {
  flex: 0 0 220px;
  width: 220px;
}

/* --- Video Grid (responsive auto-fill) --- */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 14px;
}

/* --- Category Section (videos page rows) --- */
.category-section {
  margin-bottom: 24px;
}

.category-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.category-name {
  font-size: 14px;
  font-weight: 700;
  color: #d4d4d4;
}

html:not(.dark) .category-name { color: #171717; }

.category-count {
  font-size: 11px;
  color: #333;
}

html:not(.dark) .category-count { color: #737373; }

.cat-badge {
  font-size: 9px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
}

.cat-badge.hot {
  background: rgba(255, 107, 53, 0.08);
  color: #ff6b35;
  border: 1px solid rgba(255, 107, 53, 0.15);
}

.cat-badge.new {
  background: rgba(57, 255, 20, 0.08);
  color: var(--color-neon);
  border: 1px solid rgba(57, 255, 20, 0.15);
}

.cat-badge.rising {
  background: rgba(251, 191, 36, 0.08);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.15);
}

.category-see-all {
  margin-left: auto;
  font-size: 11px;
  color: #333;
  cursor: pointer;
  transition: color 0.15s;
  text-decoration: none;
}

.category-see-all:hover {
  color: #a3a3a3;
}

html:not(.dark) .category-see-all { color: #737373; }
html:not(.dark) .category-see-all:hover { color: #171717; }

.scroll-btns {
  display: flex;
  gap: 3px;
  margin-left: 6px;
}

.scroll-btn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s;
  padding: 0;
}

.scroll-btn:hover {
  color: #a3a3a3;
  background: rgba(255, 255, 255, 0.05);
}

html:not(.dark) .scroll-btn {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.06);
  color: #737373;
}
html:not(.dark) .scroll-btn:hover {
  color: #404040;
  background: rgba(0,0,0,0.06);
}

/* --- Page Context Bar (videos page) --- */
.page-context {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

html:not(.dark) .page-context {
  border-bottom-color: rgba(0,0,0,0.06);
}

.page-context-tabs {
  display: flex;
  gap: 2px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  padding: 3px;
}

html:not(.dark) .page-context-tabs {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.06);
}

.ctx-tab {
  padding: 7px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #404040;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.ctx-tab:hover {
  color: #737373;
}

.ctx-tab.active {
  background: rgba(255, 255, 255, 0.06);
  color: #e5e5e5;
}

html:not(.dark) .ctx-tab { color: #525252; }
html:not(.dark) .ctx-tab:hover { color: #262626; background: rgba(0,0,0,0.04); }
html:not(.dark) .ctx-tab.active { color: #171717; background: rgba(0,0,0,0.07); font-weight: 700; }

.ctx-tab-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(57, 255, 20, 0.1);
  color: var(--color-neon);
  border: 1px solid rgba(57, 255, 20, 0.15);
}

html:not(.dark) .ctx-tab-badge {
  background: rgba(22,163,74,0.1);
  color: #16a34a;
  border-color: rgba(22,163,74,0.2);
}

.page-filters {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.filter-btn {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 11px;
  color: #404040;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 4px;
  appearance: none;
  outline: none;
  font-family: inherit;
}

.filter-btn:hover {
  color: #a3a3a3;
  border-color: rgba(255, 255, 255, 0.1);
}

html:not(.dark) .filter-btn {
  color: #525252;
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.08);
}
html:not(.dark) .filter-btn:hover {
  color: #262626;
  border-color: rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.05);
}

.filter-active {
  color: #e5e5e5 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

html:not(.dark) .filter-active {
  color: #171717 !important;
  border-color: rgba(0,0,0,0.15) !important;
  background: rgba(0,0,0,0.06) !important;
}

/* Active filter chips — removable pills */
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #e5e5e5;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-decoration: none;
  transition: all 0.15s;
}
.filter-chip:hover {
  border-color: rgba(239, 68, 68, 0.3);
  background: rgba(239, 68, 68, 0.08);
}
.filter-chip-x {
  color: #525252;
  font-weight: 400;
  font-size: 13px;
  line-height: 1;
}
.filter-chip:hover .filter-chip-x { color: #ef4444; }

html:not(.dark) .filter-chip {
  color: #262626;
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
}
html:not(.dark) .filter-chip:hover {
  border-color: rgba(239, 68, 68, 0.3);
  background: rgba(239, 68, 68, 0.06);
}

/* --- Info Row (gamification nudge + weekly recap) --- */
.info-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.progress-nudge {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

html:not(.dark) .progress-nudge {
  background: rgba(0,0,0,0.02);
  border-color: rgba(0,0,0,0.06);
}

.nudge-icon {
  font-size: 18px;
}

.nudge-text {
  flex: 1;
}

.nudge-title {
  font-size: 12px;
  color: #a3a3a3;
  font-weight: 500;
}

html:not(.dark) .nudge-title { color: #262626; }

.nudge-sub {
  font-size: 11px;
  color: #404040;
  margin-top: 2px;
}

html:not(.dark) .nudge-sub { color: #525252; }

.nudge-sub strong {
  color: var(--color-neon);
}

.nudge-bar {
  width: 80px;
  height: 4px;
  background: #1a1a1a;
  border-radius: 2px;
  flex-shrink: 0;
}

html:not(.dark) .nudge-bar { background: #e5e5e5; }

html:not(.dark) .nudge-count { color: #404040; }

.nudge-bar-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--color-neon);
  box-shadow: 0 0 6px rgba(57, 255, 20, 0.3);
}

html:not(.dark) .nudge-bar-fill {
  box-shadow: none;
}

.nudge-count {
  font-size: 11px;
  color: #525252;
  font-weight: 600;
  flex-shrink: 0;
}

.weekly-recap {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

html:not(.dark) .weekly-recap {
  background: rgba(0,0,0,0.02);
  border-color: rgba(0,0,0,0.06);
}

.recap-icon {
  font-size: 18px;
}

.recap-text {
  flex: 1;
}

.recap-title {
  font-size: 12px;
  color: #a3a3a3;
  font-weight: 500;
}

html:not(.dark) .recap-title { color: #262626; }

.recap-detail {
  font-size: 11px;
  color: #404040;
  margin-top: 2px;
}

html:not(.dark) .recap-detail { color: #525252; }

html:not(.dark) .mini-bar { background: #e5e5e5; }

.mini-chart {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 24px;
  flex-shrink: 0;
}

.mini-bar {
  width: 4px;
  border-radius: 1px;
  background: #1a1a1a;
}

.mini-bar.filled {
  background: rgba(57, 255, 20, 0.25);
}

.mini-bar.today {
  background: var(--color-neon);
  box-shadow: 0 0 4px rgba(57, 255, 20, 0.3);
}

/* --- Gamification Strip (homepage) --- */
.gami-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  margin-bottom: 14px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

html:not(.dark) .gami-strip {
  background: rgba(0,0,0,0.02);
  border-color: rgba(0,0,0,0.06);
}

/* GamificationStrip component uses inline styles — override in light */
html:not(.dark) .gami-strip [style*="rgba(255,255,255,0.04)"] {
  border-color: rgba(0,0,0,0.06) !important;
}
html:not(.dark) .gami-strip [style*="background: rgba(255,255,255,0.02)"] {
  background: rgba(0,0,0,0.02) !important;
}
html:not(.dark) .gami-strip .hover\:bg-white\/\[0\.02\]:hover,
html:not(.dark) .gami-strip [class*="hover:bg-white"] {
  background: rgba(0,0,0,0.03) !important;
}

/* Desktop: challenges row horizontal with border-right dividers */
.gami-challenge-item {
  border-right: 1px solid rgba(255,255,255,0.04);
}
.gami-challenge-item:last-child {
  border-right: none;
}
html:not(.dark) .gami-challenge-item {
  border-right-color: rgba(0,0,0,0.06);
}

.gami-item {
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-right: 1px solid rgba(255, 255, 255, 0.04);
  position: relative;
  transition: background 0.15s;
}

.gami-item:hover {
  background: rgba(255, 255, 255, 0.02);
}

.gami-item:last-child {
  border-right: none;
}

.gami-icon {
  font-size: 14px;
  opacity: 0.6;
}

.gami-value {
  font-size: 14px;
  font-weight: 700;
  color: #a3a3a3;
  line-height: 1;
}

html:not(.dark) .gami-value { color: #262626; }
html:not(.dark) .gami-value.neon { color: #16a34a; text-shadow: none; }

html:not(.dark) .gami-label { color: #737373; }

.gami-label {
  font-size: 9px;
  color: #333;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-top: 1px;
}

.gami-value.neon {
  color: var(--color-neon);
  text-shadow: 0 0 10px rgba(57, 255, 20, 0.25);
}

.gami-item.streak .gami-icon {
  animation: streak-flicker 2s ease-in-out infinite;
  opacity: 0.8;
}

.gami-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.02);
}

.gami-progress-fill {
  height: 100%;
  background: var(--color-neon);
  box-shadow: 0 0 4px rgba(57, 255, 20, 0.3);
}

html:not(.dark) .gami-progress-fill {
  box-shadow: none;
}

.gami-rank {
  font-size: 9px;
  color: var(--color-neon);
  background: rgba(57, 255, 20, 0.08);
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: auto;
}

html:not(.dark) .gami-rank {
  background: rgba(22, 163, 74, 0.08);
}

/* --- Challenge Bar --- */
.challenge-bar {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  padding: 10px 16px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.challenge-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-neon);
  box-shadow: 0 0 8px rgba(57, 255, 20, 0.5);
  flex-shrink: 0;
  animation: neon-pulse 2s ease-in-out infinite;
}

html:not(.dark) .challenge-pulse {
  box-shadow: none;
}

.challenge-text {
  color: #525252;
  font-size: 12px;
  flex: 1;
}

.challenge-text strong {
  color: #a3a3a3;
}

html:not(.dark) .challenge-text { color: #404040; }
html:not(.dark) .challenge-text strong { color: #171717; }

.challenge-text .xp-reward {
  color: var(--color-neon);
  font-weight: 600;
}

.challenge-dots {
  display: flex;
  gap: 4px;
}

.challenge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #141414;
  border: 1px solid #262626;
}

.challenge-dot.done {
  background: var(--color-neon);
  border-color: var(--color-neon);
  box-shadow: 0 0 6px rgba(57, 255, 20, 0.4);
}

html:not(.dark) .challenge-dot {
  background: #e5e5e5;
  border-color: #d4d4d4;
}
html:not(.dark) .challenge-dot.done {
  box-shadow: none;
}

/* --- Tag Row (homepage) --- */
.tag-row {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.tag-pill {
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #525252;
  text-decoration: none;
}

.tag-pill:hover {
  border-color: rgba(255, 255, 255, 0.1);
  color: #a3a3a3;
}

.tag-pill.active {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  color: #e5e5e5;
}

/* Light mode tags — clean pill design */
html:not(.dark) .tag-pill {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
  color: #404040;
}
html:not(.dark) .tag-pill:hover {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.12);
  color: #171717;
}
html:not(.dark) .tag-pill.active {
  background: var(--color-neon);
  border-color: var(--color-neon);
  color: #fff;
  font-weight: 600;
}

.tag-indicator {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  margin-right: 4px;
}

.tag-indicator.new {
  background: var(--color-neon);
  box-shadow: 0 0 4px rgba(57, 255, 20, 0.4);
}

html:not(.dark) .tag-indicator.new {
  box-shadow: none;
}

.tag-indicator.hot {
  background: #ff6b35;
  box-shadow: 0 0 4px rgba(255, 107, 53, 0.4);
}

html:not(.dark) .tag-indicator.hot {
  box-shadow: none;
}

.tag-indicator.rising {
  background: #fbbf24;
  box-shadow: 0 0 4px rgba(251, 191, 36, 0.4);
}

html:not(.dark) .tag-indicator.rising {
  box-shadow: none;
}

/* --- Section Tabs (homepage) --- */
.section-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
}

.tab {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: #333;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.tab:hover {
  color: #737373;
  background: rgba(255, 255, 255, 0.02);
}

.tab.active {
  color: #e5e5e5;
  background: rgba(255, 255, 255, 0.04);
}

html:not(.dark) .tab { color: #525252; }
html:not(.dark) .tab:hover { color: #262626; background: rgba(0,0,0,0.03); }
html:not(.dark) .tab.active { color: #171717; background: rgba(0,0,0,0.05); font-weight: 600; }

.tab-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(57, 255, 20, 0.1);
  color: var(--color-neon);
  border: 1px solid rgba(57, 255, 20, 0.15);
  line-height: 1.3;
}

/* --- Glass Card (used by detail pages etc) --- */
.glass-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

:root:not(.dark) .glass-card {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.glass-card:hover {
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

:root:not(.dark) .glass-card:hover {
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* --- Profile Avatar --- */
.avatar-gradient {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: white;
}

.avatar-ring {
  border: 3px solid transparent;
  border-top-color: var(--color-neon);
  border-right-color: var(--color-neon);
  animation: ring-spin 8s linear infinite;
}

.avatar-sm {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 12px;
}

.avatar-md {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 14px;
}

.avatar-lg {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  font-size: 2rem;
}

.avatar-xl {
  width: 88px;
  height: 88px;
  border-radius: 50%;
}

/* --- Video Detail Player Container --- */
.video-player-container {
  border-radius: 16px;
  overflow: hidden;
}

.video-player-container .aspect-video {
  background: #0a0a0f;
}

/* --- Theme Toggle Button --- */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
  color: #a3a3a3;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
  font-size: 14px;
}

.theme-toggle:hover {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #e5e5e5;
}

/* Show moon in dark mode, sun in light mode */
html.dark .theme-toggle .dark-icon { display: inline-block; }
html.dark .theme-toggle .light-icon { display: none !important; }
html:not(.dark) .theme-toggle .dark-icon { display: none !important; }
html:not(.dark) .theme-toggle .light-icon { display: inline-block !important; }

:root:not(.dark) .theme-toggle {
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.03);
  color: #525252;
}

:root:not(.dark) .theme-toggle:hover {
  border-color: rgba(0, 0, 0, 0.15);
  background: rgba(0, 0, 0, 0.06);
  color: #171717;
}

/* --- Interaction Buttons Row --- */
.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s ease;
  cursor: pointer;
  border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--foreground) 3%, transparent);
  color: var(--muted-foreground);
}

.action-btn:hover {
  border-color: color-mix(in srgb, var(--foreground) 12%, transparent);
  background: color-mix(in srgb, var(--foreground) 6%, transparent);
}

/* --- Search Input Enhancements --- */
.search-input-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 12px 16px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.search-input-wrapper:focus-within {
  border-color: var(--color-neon);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-neon) 15%, transparent);
}

:root:not(.dark) .search-input-wrapper {
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

:root:not(.dark) .search-input-wrapper:focus-within {
  border-color: var(--color-neon);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-neon) 15%, transparent);
}

/* --- Tab Pills --- */
.tab-pill {
  padding: 7px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s ease;
  text-decoration: none;
  color: #525252;
}

.tab-pill.active {
  background: rgba(255, 255, 255, 0.06);
  color: #e5e5e5;
}

:root:not(.dark) .tab-pill.active {
  background: rgba(0, 0, 0, 0.06);
  color: #171717;
}

/* --- Profile Stats Row --- */
.profile-stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

/* --- Leaderboard Stats Bar --- */
.community-stats-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.community-stats-item {
  flex: 1;
  min-width: 60px;
}

/* --- Leaderboard Podium --- */
.leaderboard-podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px;
}

/* --- Leaderboard period pills — horizontal scroll on mobile --- */
.lb-period-pills {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.lb-period-pills::-webkit-scrollbar {
  display: none;
}

/* --- Stat Block --- */
.stat-block {
  text-align: center;
  padding: 0 16px;
  border-right: 1px solid var(--color-border);
}

.stat-block:last-child {
  border-right: none;
}

.stat-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--foreground);
}

.stat-label {
  font-size: 11px;
  color: var(--muted-foreground);
  margin-top: 2px;
}

.stat-value.neon {
  color: var(--color-neon);
  text-shadow: 0 0 8px color-mix(in srgb, var(--color-neon) 60%, transparent);
}

html:not(.dark) .stat-value.neon {
  text-shadow: none;
}

/* --- Search Overlay --- */
#search-overlay-root {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
}

.so-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.so-modal {
  position: relative;
  width: 90vw;
  max-width: 640px;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: rgba(12, 12, 18, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.04);
}

:root:not(.dark) .so-modal {
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.15);
}

.so-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.so-icon {
  color: #525252;
  font-size: 18px;
  flex-shrink: 0;
}

.so-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 17px;
  color: #e5e5e5;
  font-family: inherit;
}

:root:not(.dark) .so-input {
  color: #171717;
}

.so-input::placeholder {
  color: #525252;
}

.so-kbd {
  display: none;
}

@media (min-width: 640px) {
  .so-kbd {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 10px;
    font-family: monospace;
    color: #525252;
    cursor: pointer;
    flex-shrink: 0;
  }
}

.so-tabs {
  display: flex;
  gap: 2px;
  padding: 6px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.so-tab {
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  color: #525252;
  background: none;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
}

.so-tab:hover {
  color: #a3a3a3;
}

.so-tab.active {
  background: rgba(57, 255, 20, 0.08);
  color: var(--color-neon);
}

.so-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 20px 16px;
}

.so-empty {
  text-align: center;
  padding: 32px 0;
  color: #525252;
  font-size: 14px;
}

.so-empty-icon {
  font-size: 2rem;
  margin-bottom: 12px;
  opacity: 0.3;
}

.so-hints {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 12px;
  font-size: 11px;
  color: #333;
}

.so-hints kbd, .so-hints span {
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.so-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 0;
  color: #525252;
  font-size: 13px;
}

.so-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.06);
  border-top-color: var(--color-neon);
  border-radius: 50%;
  animation: so-spin 0.6s linear infinite;
}

@keyframes so-spin {
  to { transform: rotate(360deg); }
}

.so-section {
  margin-bottom: 12px;
}

.so-section-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #525252;
  padding: 0 4px;
  margin-bottom: 4px;
}

.so-result-item {
  border-radius: 10px;
  transition: background 0.1s;
}

.so-result-item:hover,
.so-result-item.so-selected {
  background: rgba(255, 255, 255, 0.04);
}

.so-result-item a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  text-decoration: none;
  color: inherit;
}

.so-result-thumb {
  position: relative;
  width: 72px;
  height: 44px;
  border-radius: 6px;
  overflow: hidden;
  background: #111;
  flex-shrink: 0;
}

.so-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.so-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  font-size: 16px;
}

.so-duration {
  position: absolute;
  bottom: 2px;
  right: 2px;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.85);
  color: #ccc;
  font-size: 9px;
}

.so-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}

.so-collection-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(99, 102, 241, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
}

.so-result-info {
  flex: 1;
  min-width: 0;
}

.so-result-title {
  font-size: 13px;
  font-weight: 500;
  color: #e5e5e5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

:root:not(.dark) .so-result-title {
  color: #171717;
}

.so-result-meta {
  font-size: 11px;
  color: #525252;
  margin-top: 1px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.so-platform {
  display: inline-block;
  padding: 0 4px;
  border-radius: 3px;
  background: rgba(57, 255, 20, 0.08);
  color: var(--color-neon);
  font-size: 9px;
  font-weight: 600;
}

.so-footer {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 8px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 11px;
  color: #333;
}

@media (min-width: 640px) {
  .so-footer {
    display: flex;
  }
}

.so-footer kbd {
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 10px;
  font-family: monospace;
  margin-right: 3px;
}

.so-success {
  text-align: center;
  padding: 32px 0;
}

.so-success-icon {
  font-size: 2rem;
  margin-bottom: 8px;
}

.so-success p {
  color: var(--color-neon);
  font-weight: 600;
  font-size: 14px;
}

.so-success-link {
  display: inline-block;
  margin-top: 8px;
  color: var(--color-neon);
  font-size: 13px;
  text-decoration: none;
}

.so-see-all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 0 4px;
  font-size: 12px;
  color: #525252;
  text-decoration: none;
  border-top: 1px solid rgba(255,255,255,0.04);
  margin-top: 8px;
}

.so-see-all:hover {
  color: var(--color-neon);
}

/* Tags grid in search overlay */
.so-tags-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0;
}

.so-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  color: #737373;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  text-decoration: none;
  transition: all 0.15s;
}

.so-tag-pill:hover {
  color: var(--color-neon);
  border-color: rgba(57,255,20,0.2);
  background: rgba(57,255,20,0.06);
}

.so-tag-count {
  font-size: 10px;
  opacity: 0.5;
}

/* Bookmark preview in search overlay */
.so-bookmark-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 16px;
}

.so-bookmark-url {
  font-size: 13px;
  color: #a3a3a3;
  word-break: break-all;
  max-width: 100%;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}

.so-bookmark-save {
  padding: 8px 24px;
  border-radius: 8px;
  border: 1px solid rgba(57,255,20,0.3);
  background: rgba(57,255,20,0.1);
  color: var(--color-neon);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.so-bookmark-save:hover {
  background: rgba(57,255,20,0.2);
  border-color: rgba(57,255,20,0.5);
}

.so-bookmark-hint {
  font-size: 11px;
  color: #525252;
}

.so-bookmark-hint kbd {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: #737373;
}

/* --- Focus Ring --- */
*:focus-visible {
  outline: 2px solid var(--color-neon);
  outline-offset: 2px;
  box-shadow: 0 0 6px color-mix(in srgb, var(--color-neon) 40%, transparent);
}

/* ── Channel autoplay overlay ── */
.channel-autoplay-overlay {
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 50;
  animation: autoplay-slide-in 0.3s ease-out;
}
.channel-autoplay-card {
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 14px;
  width: 260px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.autoplay-cancel-btn:hover { background: rgba(255,255,255,0.1) !important; color: #e5e5e5 !important; }
.autoplay-play-btn:hover { background: rgba(57,255,20,0.2) !important; }
@keyframes autoplay-slide-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 640px) {
  .channel-autoplay-overlay { bottom: 8px; right: 8px; left: 8px; }
  .channel-autoplay-card { width: auto; }
}

/* ── Extracted from MainLayout.razor ── */
.sidebar-heading {
        font-size: 10px;
        font-weight: 600;
        color: #8a8a8a;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .sidebar-badge {
        font-size: 9px;
        font-weight: 700;
        padding: 1px 6px;
        border-radius: 4px;
        background: rgba(57, 255, 20, 0.1);
        color: #39ff14;
        border: 1px solid rgba(57, 255, 20, 0.15);
    }

    .badge-name {
        color: #39ff14;
    }

    .nav-link {
        padding: 7px 14px;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 500;
        color: #8a8a8a;
        text-decoration: none;
        transition: all 0.15s;
    }

    .nav-link:hover {
        color: #b3b3b3;
        background: rgba(255, 255, 255, 0.03);
    }

    .nav-link.active {
        color: #e5e5e5;
    }

    .mobile-tab {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.125rem;
        padding: 0.25rem 0.75rem;
        font-size: 0.625rem;
        font-weight: 500;
        color: #8a8a8a;
        transition: color 0.15s;
        background: none;
        border: none;
        cursor: pointer;
    }

    .mobile-tab:hover {
        color: #737373;
    }

    /* ── Mobile search button: show on mobile, hide on sm+ where center search bar is visible ── */
    .mobile-search-btn {
        display: flex !important;
    }
    @media (min-width: 640px) {
        .mobile-search-btn {
            display: none !important;
        }
    }

    /* ── Header icon button (bell, etc.) ── */
    .header-icon-btn {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,255,255,0.06);
        color: #737373;
        cursor: pointer;
        transition: all 0.15s;
    }
    .header-icon-btn:hover { background: rgba(255,255,255,0.08); color: #a3a3a3; }
    html:not(.dark) .header-icon-btn { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.06); color: #525252; }

    .notif-dot {
        position: absolute;
        top: 6px;
        right: 6px;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #ef4444;
        border: 1.5px solid var(--color-background);
    }

    /* ── Header avatar button ── */
    .header-avatar-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        cursor: pointer;
        background: none;
        border: 2px solid rgba(255,255,255,0.06);
        padding: 1px;
        transition: border-color 0.15s;
    }
    .header-avatar-btn:hover { border-color: rgba(255,255,255,0.15); }

    /* ── Profile dropdown ── */
    .profile-dropdown-wrap { position: relative; }
    .profile-dropdown {
        display: none;
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        width: 240px;
        background: #1e1e1e;
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 12px;
        box-shadow: 0 8px 24px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.05);
        padding: 6px;
        z-index: 100;
    }
    html:not(.dark) .profile-dropdown { background: #fff; border-color: rgba(0,0,0,0.12); box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
    .profile-dropdown-wrap.open .profile-dropdown { display: block; }

    .profile-dropdown-user {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px;
        border-radius: 8px;
        text-decoration: none;
        transition: background 0.15s;
    }
    .profile-dropdown-user:hover { background: rgba(255,255,255,0.04); }
    .profile-dropdown-name { font-size: 13px; font-weight: 600; color: var(--color-text); }
    .profile-dropdown-level { font-size: 11px; color: var(--color-neon); font-weight: 500; }

    .profile-dropdown-divider {
        height: 1px;
        background: rgba(255,255,255,0.06);
        margin: 4px 6px;
    }
    html:not(.dark) .profile-dropdown-divider { background: rgba(0,0,0,0.06); }

    .profile-dropdown-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 10px;
        border-radius: 8px;
        font-size: 13px;
        color: var(--color-text-muted);
        text-decoration: none;
        cursor: pointer;
        transition: all 0.15s;
        background: none;
        border: none;
        width: 100%;
        font-family: inherit;
    }
    .profile-dropdown-item:hover { background: rgba(255,255,255,0.04); color: var(--color-text); }
    .profile-dropdown-save { color: #39ff14; }
    .profile-dropdown-lang { position: relative; }

    /* ── Left sidebar ── */
    .left-sidebar {
        border-right: 1px solid rgba(255,255,255,0.04);
    }
    html:not(.dark) .left-sidebar { border-right-color: rgba(0,0,0,0.06); }

    .left-sidebar-user {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 10px;
        border-radius: 10px;
        transition: background 0.15s;
    }
    .left-sidebar-user:hover { background: rgba(255,255,255,0.04); }
    .left-sidebar-username { font-size: 13px; font-weight: 600; color: var(--color-text); }
    .left-sidebar-level { font-size: 11px; color: var(--color-text-muted); display: flex; align-items: center; gap: 4px; }
    .left-sidebar-level-dot { width: 6px; height: 6px; border-radius: 50%; background: #39ff14; box-shadow: 0 0 6px rgba(57,255,20,0.4); }

    .left-sidebar-nav { display: flex; flex-direction: column; gap: 1px; }
    .left-sidebar-link {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 10px;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 500;
        color: #8a8a8a;
        text-decoration: none;
        transition: all 0.15s;
    }
    .left-sidebar-link:hover { background: rgba(255,255,255,0.04); color: #b3b3b3; }
    .left-sidebar-link.active { color: var(--color-text); background: rgba(255,255,255,0.04); }
    html:not(.dark) .left-sidebar-link { color: #525252; }
    html:not(.dark) .left-sidebar-link:hover { background: rgba(0,0,0,0.04); color: #262626; }
    html:not(.dark) .left-sidebar-link.active { color: #111; background: rgba(0,0,0,0.04); }

    /* ── Save Account pulse (header button) ── */
    .save-account-pulse {
        animation: saveAccountPulse 3s ease-in-out infinite;
    }

    @@keyframes saveAccountPulse {
        0%, 100% { box-shadow: 0 0 0 0 rgba(57, 255, 20, 0); }
        50% { box-shadow: 0 0 12px 2px rgba(57, 255, 20, 0.15); }
    }

    /* ── Mobile tab notification dot ── */
    .save-account-dot {
        position: absolute;
        top: 2px;
        right: 8px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #39ff14;
        box-shadow: 0 0 6px rgba(57, 255, 20, 0.5);
    }

/* ── Extracted from Home.razor ── */
/* ── Following feed strip ── */
    .home-feed-strip {
        margin-bottom: 16px;
        padding: 14px 0;
        border-bottom: 1px solid rgba(255,255,255,0.04);
    }

    .home-feed-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
    }

    .home-feed-title-group {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .home-feed-pulse {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        border-radius: 8px;
        background: color-mix(in srgb, var(--color-neon) 12%, transparent);
        color: var(--color-neon);
        animation: feed-pulse 3s ease-in-out infinite;
    }

    @@keyframes feed-pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.6; }
    }

    .home-feed-title {
        font-size: 13px;
        font-weight: 700;
        color: var(--foreground);
        margin: 0;
        letter-spacing: -0.01em;
    }

    .home-feed-count {
        font-size: 10px;
        font-weight: 600;
        color: var(--color-neon);
        background: color-mix(in srgb, var(--color-neon) 10%, transparent);
        padding: 2px 7px;
        border-radius: 10px;
        line-height: 1.4;
    }

    .home-feed-see-all {
        display: inline-flex;
        align-items: center;
        gap: 2px;
        font-size: 11px;
        font-weight: 500;
        color: var(--muted-foreground);
        text-decoration: none;
        padding: 4px 10px;
        border-radius: 6px;
        transition: all 0.15s ease;
    }
    .home-feed-see-all:hover {
        color: var(--color-neon);
        background: color-mix(in srgb, var(--color-neon) 8%, transparent);
    }

    /* ── Scroll container ── */
    .home-feed-scroll {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 4px;
        scroll-snap-type: x mandatory;
    }
    .home-feed-scroll::-webkit-scrollbar { display: none; }

    /* ── Feed cards ── */
    .home-feed-card {
        position: relative;
        flex-shrink: 0;
        width: 165px;
        border-radius: 10px;
        overflow: hidden;
        background: rgba(255,255,255,0.03);
        border: 1px solid rgba(255,255,255,0.05);
        text-decoration: none;
        scroll-snap-align: start;
        transition: border-color 0.2s ease, transform 0.2s ease;
    }
    .home-feed-card:hover {
        border-color: color-mix(in srgb, var(--color-neon) 30%, transparent);
        transform: translateY(-2px);
    }

    .home-feed-thumb-wrap {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 9;
        overflow: hidden;
        background: #111;
    }

    .home-feed-thumb {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.3s ease;
    }
    .home-feed-card:hover .home-feed-thumb {
        transform: scale(1.06);
    }

    .home-feed-hover-shine {
        position: absolute;
        inset: 0;
        background: linear-gradient(
            120deg,
            transparent 30%,
            rgba(255,255,255,0.06) 50%,
            transparent 70%
        );
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
    }
    .home-feed-card:hover .home-feed-hover-shine {
        opacity: 1;
    }

    /* ── Card info bar (avatar + meta) ── */
    .home-feed-card-bar {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 9px 9px;
    }

    .home-feed-avatar-wrap {
        flex-shrink: 0;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        padding: 1.5px;
        background: rgba(255,255,255,0.1);
    }
    .home-feed-avatar-wrap.feed-accent--bookmark { background: rgba(96, 165, 250, 0.4); }
    .home-feed-avatar-wrap.feed-accent--like { background: rgba(244, 114, 182, 0.4); }
    .home-feed-avatar-wrap.feed-accent--reaction { background: rgba(251, 191, 36, 0.4); }
    .home-feed-avatar-wrap.feed-accent--comment { background: rgba(52, 211, 153, 0.4); }
    .home-feed-avatar-wrap.feed-accent--repost { background: rgba(129, 140, 248, 0.4); }

    .home-feed-avatar-wrap img {
        border-radius: 50%;
    }

    .home-feed-meta {
        min-width: 0;
        flex: 1;
    }

    .home-feed-actor {
        display: block;
        font-size: 11px;
        font-weight: 600;
        color: var(--foreground);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.3;
    }

    .home-feed-action-row {
        display: flex;
        align-items: center;
        gap: 3px;
        margin-top: 1px;
    }

    .home-feed-type-icon {
        display: flex;
        align-items: center;
        color: var(--muted-foreground);
    }
    .home-feed-type-icon.feed-accent--bookmark { color: #60a5fa; }
    .home-feed-type-icon.feed-accent--like { color: #f472b6; }
    .home-feed-type-icon.feed-accent--reaction { color: #fbbf24; }
    .home-feed-type-icon.feed-accent--comment { color: #34d399; }
    .home-feed-type-icon.feed-accent--repost { color: #818cf8; }

    .home-feed-action {
        font-size: 10px;
        color: var(--muted-foreground);
    }

    .home-feed-dot {
        font-size: 9px;
        color: rgba(255,255,255,0.15);
    }

    .home-feed-time {
        font-size: 10px;
        color: rgba(255,255,255,0.25);
        white-space: nowrap;
    }

    /* ── Light mode ── */
    html:not(.dark) .home-feed-strip {
        border-bottom-color: rgba(0,0,0,0.06);
    }
    html:not(.dark) .home-feed-card {
        background: rgba(0,0,0,0.02);
        border-color: rgba(0,0,0,0.06);
    }
    html:not(.dark) .home-feed-card:hover {
        border-color: color-mix(in srgb, var(--color-neon) 40%, transparent);
    }
    html:not(.dark) .home-feed-time {
        color: rgba(0,0,0,0.3);
    }
    html:not(.dark) .home-feed-dot {
        color: rgba(0,0,0,0.15);
    }

/* ── Extracted from Feed.razor ── */
/* ── Engagement bar ── */
    .feed-engagement-bar {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 0;
        margin-bottom: 4px;
        flex-wrap: wrap;
        max-width: 620px;
        margin-left: auto;
        margin-right: auto;
    }

    .streak-badge {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 6px 12px;
        border-radius: 20px;
        background: rgba(249,115,22,0.1);
        border: 1px solid rgba(249,115,22,0.2);
        font-size: 13px;
        color: #f97316;
    }
    .streak-count { font-weight: 700; font-size: 15px; }
    .streak-label { opacity: 0.7; }
    .streak-best { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; background: rgba(249,115,22,0.2); padding: 1px 5px; border-radius: 4px; }

    .challenge-pill {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 6px 12px;
        border-radius: 20px;
        background: rgba(57,255,20,0.05);
        border: 1px solid rgba(57,255,20,0.12);
        font-size: 12px;
        color: var(--color-text-muted);
    }
    .challenge-progress { font-weight: 600; color: var(--color-neon); }
    .challenge-xp { font-size: 10px; font-weight: 600; color: var(--color-neon); opacity: 0.6; }

    /* ── Filter bar ── */
    .feed-bar {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 0 12px;
        flex-wrap: wrap;
        max-width: 620px;
        margin: 0 auto;
    }
    .feed-type-pills {
        display: flex;
        gap: 4px;
        flex-wrap: wrap;
        flex: 1;
    }
    .feed-pill {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 6px 14px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 500;
        font-family: inherit;
        color: var(--color-text-muted, #737373);
        background: rgba(255,255,255,0.03);
        border: 1px solid rgba(255,255,255,0.06);
        cursor: pointer;
        transition: all 0.15s;
        white-space: nowrap;
    }
    .feed-pill:hover {
        color: var(--color-text, #e5e5e5);
        background: rgba(255,255,255,0.06);
        border-color: rgba(255,255,255,0.1);
    }
    .feed-pill--active {
        color: var(--color-neon, #39ff14);
        background: rgba(57,255,20,0.08);
        border-color: rgba(57,255,20,0.2);
    }
    .feed-pill--active:hover {
        color: var(--color-neon, #39ff14);
        background: rgba(57,255,20,0.12);
    }
    html:not(.dark) .feed-pill { color: #525252; background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.06); }
    html:not(.dark) .feed-pill:hover { color: #262626; background: rgba(0,0,0,0.06); }
    html:not(.dark) .feed-pill--active { color: #16a34a; background: rgba(22,163,74,0.08); border-color: rgba(22,163,74,0.2); }

    .feed-platform-filter { margin-left: auto; }

    /* ── Timeline — single column, Facebook-style ── */
    .feed-timeline {
        display: flex;
        flex-direction: column;
        gap: 12px;
        max-width: 620px;
        margin: 0 auto;
    }

    /* ── Post card ── */
    .feed-post {
        border-radius: 10px;
        background: var(--color-surface);
        border: 1px solid rgba(255,255,255,0.08);
        overflow: hidden;
        box-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.03);
    }
    html:not(.dark) .feed-post { border-color: rgba(0,0,0,0.1); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }

    .feed-post--compact { overflow: visible; }

    .feed-post--milestone {
        background: rgba(139,92,246,0.04);
        border-color: rgba(139,92,246,0.12);
    }
    .milestone-text { color: #a78bfa !important; font-weight: 500; }

    /* ── Post header: avatar + name/action + time ── */
    .feed-post-header {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 14px;
    }
    .feed-post--compact .feed-post-header { padding: 10px 14px; }

    .feed-post-who {
        flex: 1;
        min-width: 0;
    }
    .feed-post-name {
        font-weight: 600;
        font-size: 14px;
        color: var(--color-text);
        text-decoration: none;
        line-height: 1.3;
    }
    .feed-post-name:hover { color: var(--color-neon); }
    .feed-post-sub {
        display: flex;
        align-items: center;
        gap: 5px;
        margin-top: 1px;
        font-size: 12px;
        color: var(--color-text-muted);
    }
    .feed-post-action { color: var(--color-text-muted); font-size: 12px; }
    .feed-post-dot { color: var(--color-text-muted); opacity: 0.4; font-size: 10px; }
    .feed-post-time { color: var(--color-text-muted); opacity: 0.5; font-size: 12px; white-space: nowrap; }
    .feed-post-header > .feed-post-time { margin-left: auto; }

    .feed-post-inline {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
        font-size: 14px;
        line-height: 1.4;
    }

    /* ── Activity type icon (small, in sub-line) ── */
    .feed-post-activity-icon {
        flex-shrink: 0;
        width: 18px;
        height: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(255,255,255,0.04);
        color: var(--color-text-muted);
    }
    .feed-post-icon {
        flex-shrink: 0;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(255,255,255,0.04);
        color: var(--color-text-muted);
    }
    .feed-post-icon--milestone { background: rgba(139,92,246,0.12); color: #a78bfa; }

    .feed-type-icon--bookmark { background: rgba(59,130,246,0.1); color: #60a5fa; }
    .feed-type-icon--reaction { background: rgba(249,115,22,0.1); color: #fb923c; }
    .feed-type-icon--like { background: rgba(239,68,68,0.1); color: #f87171; }
    .feed-type-icon--comment { background: rgba(34,211,238,0.1); color: #22d3ee; }
    .feed-type-icon--repost { background: rgba(57,255,20,0.1); color: #39ff14; }

    /* ── Media area (thumbnail) ── */
    .feed-post-media {
        position: relative;
        display: block;
        width: 100%;
        aspect-ratio: 16 / 9;
        overflow: hidden;
        background: rgba(255,255,255,0.02);
    }
    .feed-post-media:hover .feed-post-thumb { transform: scale(1.02); }
    .feed-post-thumb {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.2s ease;
    }
    .feed-post-placeholder {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(255,255,255,0.1);
    }
    .feed-post-platform {
        position: absolute;
        bottom: 8px;
        left: 8px;
        font-size: 10px;
        font-weight: 600;
        padding: 2px 8px;
        border-radius: 4px;
        background: rgba(0,0,0,0.7);
        color: rgba(255,255,255,0.85);
        text-transform: capitalize;
        backdrop-filter: blur(4px);
    }

    /* ── Post footer (title) ── */
    .feed-post-footer { padding: 10px 14px 14px; }
    .feed-post-title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.4;
        color: var(--color-text);
        text-decoration: none;
    }
    .feed-post-title:hover { color: var(--color-neon); }

    /* ── Follow chip ── */
    .feed-follow-chip {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 3px 10px 3px 3px;
        border-radius: 20px;
        background: rgba(139,92,246,0.08);
        border: 1px solid rgba(139,92,246,0.15);
        text-decoration: none;
        color: var(--color-text);
        font-size: 13px;
        font-weight: 500;
        transition: all 0.15s;
    }
    .feed-follow-chip:hover { background: rgba(139,92,246,0.14); border-color: rgba(139,92,246,0.25); }

    /* ── Empty state ── */
    .feed-empty-state {
        text-align: center;
        padding: 60px 24px 80px;
        max-width: 440px;
        margin: 0 auto;
    }
    .feed-empty-visual {
        color: var(--color-text-muted);
        opacity: 0.2;
        margin-bottom: 20px;
    }
    .feed-empty-title { font-size: 20px; font-weight: 600; margin: 0 0 8px; }
    .feed-empty-desc { font-size: 13px; color: var(--color-text-muted); margin: 0 0 24px; line-height: 1.5; }
    .feed-empty-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
    .feed-empty-btn {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 10px 20px;
        border-radius: 10px;
        font-size: 13px;
        font-weight: 500;
        text-decoration: none;
        color: var(--color-text);
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,255,255,0.08);
        transition: all 0.15s;
    }
    .feed-empty-btn:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.12); }
    .feed-empty-btn--primary { color: #000; background: var(--color-neon, #39ff14); border-color: transparent; }
    .feed-empty-btn--primary:hover { opacity: 0.9; background: var(--color-neon, #39ff14); }
    html:not(.dark) .feed-empty-btn { color: #262626; background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); }

    .feed-loading { padding: 16px 0; }
    .filter-active { border-color: var(--color-neon) !important; color: var(--color-neon) !important; }

    /* ── Responsive ── */
    @@media (max-width: 640px) {
        .feed-bar { flex-direction: column; align-items: stretch; }
        .feed-platform-filter { margin-left: 0; }
    }

/* ==========================================================================
   Video Detail Page
   ========================================================================== */

/* ── Back link ── */
.detail-back-link {
  color: var(--muted-foreground);
}
.detail-back-link:hover {
  color: var(--foreground);
}

/* ── Close button (modals) ── */
.detail-close-btn {
  color: var(--muted-foreground);
}
.detail-close-btn:hover {
  color: var(--foreground);
}

/* ── Content card ── */
.detail-content-card {
  border: 1px solid var(--color-border);
}

/* ── Actions area: first bookmarker + buttons row ── */
.detail-actions-area {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.detail-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.detail-actions-row .action-btn {
  padding: 6px 12px;
  font-size: 12px;
}

/* ── First bookmarker chip ── */
.detail-first-bookmarker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--color-neon) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-neon) 8%, transparent);
  white-space: nowrap;
  font-size: 12px;
}

.detail-xp-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--color-neon);
  background: color-mix(in srgb, var(--color-neon) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-neon) 15%, transparent);
}

/* ── Collected by — bookmarker chips ── */
.detail-bookmarker-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 4px;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--foreground) 3%, transparent);
  border: 1px solid var(--color-border);
  text-decoration: none;
  transition: background 0.15s;
}
.detail-bookmarker-chip:hover {
  background: color-mix(in srgb, var(--foreground) 6%, transparent);
}

/* ── Tag pills ── */
.detail-tag-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  background: color-mix(in srgb, var(--color-neon) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-neon) 10%, transparent);
  color: var(--color-neon);
  transition: all 0.15s;
  white-space: nowrap;
}
.detail-tag-pill:hover {
  background: color-mix(in srgb, var(--color-neon) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-neon) 20%, transparent);
}

/* Tags expandable — extras hidden until toggled */
.detail-tags-wrap .detail-tag-extra {
  display: none;
}
.detail-tags-wrap.tags-expanded .detail-tag-extra {
  display: inline-flex;
}
.detail-tags-toggle {
  cursor: pointer;
  font-weight: 600;
  color: var(--color-neon) !important;
  background: none;
  border: 1px solid color-mix(in srgb, var(--color-neon) 15%, transparent);
}

/* ── Description — expandable on mobile ── */
.detail-desc-more {
  display: none;
}

/* ── Mobile back button ── */
.detail-mobile-back {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--foreground);
  cursor: pointer;
}

/* ── Hot Takes trigger (mobile) ── */
.detail-hot-takes-trigger {
  display: none;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--color-neon) 3%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-neon) 8%, transparent);
  cursor: pointer;
  text-decoration: none;
}
.detail-ht-cta {
  margin-left: auto;
  font-size: 11px;
  color: var(--color-neon);
  font-weight: 600;
}

/* ── Hot Takes modal overlay ── */
.detail-ht-modal-overlay.hidden {
  display: none !important;
}
.detail-ht-modal-overlay {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
}
.detail-ht-modal {
  background: var(--background);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

/* ── Related videos — card grid, thumbnail dominant, info below ── */
.detail-related-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.detail-related-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  border-radius: 10px;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: border-color 0.15s;
}
.detail-related-card:hover {
  border-color: rgba(255,255,255,0.1);
}
.detail-related-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #111;
  overflow: hidden;
}
.detail-related-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s;
}
.detail-related-card:hover .detail-related-thumb img {
  transform: scale(1.03);
}
.detail-related-duration {
  position: absolute;
  bottom: 4px;
  right: 4px;
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  background: rgba(0,0,0,0.8);
  color: #ddd;
}
.detail-related-info {
  padding: 10px 12px 12px;
}
.detail-related-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--foreground);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}
.detail-related-meta {
  font-size: 11px;
  color: var(--muted-foreground);
  margin-top: 4px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* ── Report modal option ── */
.report-option {
  background: color-mix(in srgb, var(--foreground) 2%, transparent);
  border: 1px solid var(--color-border);
  color: var(--foreground);
}
.report-option:hover {
  background: color-mix(in srgb, var(--foreground) 5%, transparent);
}

/* ── Reaction emoji button ── */
.reaction-emoji-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  padding: 2px 4px;
  border-radius: 6px;
  transition: background 0.15s;
}
.reaction-emoji-btn:hover {
  background: color-mix(in srgb, var(--foreground) 8%, transparent);
}

/* ==========================================================================
   Video Detail — Mobile (≤768px)
   ========================================================================== */
@media (max-width: 768px) {
  /* Video title smaller on mobile */
  .detail-content-card h1 {
    font-size: 1.1rem !important;
    line-height: 1.35 !important;
  }

  /* Back link hidden, mobile back shown */
  .detail-back-link {
    display: none !important;
  }
  .detail-mobile-back {
    display: flex !important;
  }

  /* Actions area stacks vertically */
  .detail-actions-area {
    flex-direction: column;
    align-items: stretch;
  }

  /* Action buttons: horizontal scroll strip */
  .detail-actions-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    padding-bottom: 4px;
  }
  .detail-actions-row::-webkit-scrollbar {
    display: none;
  }
  .detail-actions-row .action-btn {
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Tags: horizontal scroll strip, show all */
  .detail-tags-wrap {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .detail-tags-wrap::-webkit-scrollbar {
    display: none;
  }
  .detail-tags-wrap .detail-tag-extra {
    display: inline-flex !important;
  }
  .detail-tags-wrap .detail-tags-toggle {
    display: none !important;
  }

  /* Description: expandable with "...more" */
  .detail-desc {
    max-height: 4.5em;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: max-height 0.3s ease;
  }
  .detail-desc::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2em;
    background: linear-gradient(transparent, var(--background));
    pointer-events: none;
    transition: opacity 0.3s;
  }
  .detail-desc .detail-desc-more {
    display: block;
    position: absolute;
    bottom: 2px;
    right: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-neon);
    z-index: 1;
  }
  .detail-desc.expanded {
    max-height: none;
  }
  .detail-desc.expanded::after {
    opacity: 0;
  }
  .detail-desc.expanded .detail-desc-more {
    display: none;
  }

  /* Collected by: horizontal scroll */
  .detail-collected-by .flex-wrap {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .detail-collected-by .flex-wrap::-webkit-scrollbar {
    display: none;
  }

  /* Hot Takes: show trigger, hide inline */
  .detail-hot-takes-trigger {
    display: flex !important;
  }
  .detail-hot-takes-inline {
    display: none !important;
  }

  /* Related: unified grid already handled by base styles */
}

/* ==========================================================================
   Global Mobile Overrides (≤768px)
   ========================================================================== */
@media (max-width: 768px) {

  /* ── Prevent ALL horizontal overflow on mobile ── */
  body, html {
    overflow-x: hidden !important;
  }
  .max-w-6xl {
    overflow-x: hidden;
  }

  /* ── Mood selector: horizontal scroll ── */
  .mood-pills-row {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .mood-pills-row::-webkit-scrollbar {
    display: none;
  }
  .mood-pills-row .mood-btn {
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* ── Tag row: horizontal scroll ── */
  .tag-row {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .tag-row::-webkit-scrollbar {
    display: none;
  }
  .tag-row .tag-pill {
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* ── Video card titles: smaller on mobile ── */
  .vcard-title {
    font-size: 11px !important;
    line-height: 1.3 !important;
  }

  /* ── Video card grid: 2 per row that fit ── */
  .grid[class*="auto-fill"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── Profile page: prevent horizontal scroll ── */
  .flex-col.lg\:flex-row {
    overflow-x: hidden;
  }

  /* ── Profile: stack gamification sidebar full-width ── */
  .w-full.lg\:w-80 {
    position: static !important;
  }

  /* ── Profile: compact gamification cards ── */
  .w-full.lg\:w-80 > .rounded-2xl {
    padding: 12px !important;
  }
  .w-full.lg\:w-80 > .rounded-2xl .text-center div[style*="font-size: 3rem"] {
    font-size: 2rem !important;
  }

  /* ── Profile stats row: horizontal scroll on mobile ── */
  .profile-stats-row {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start;
  }
  .profile-stats-row::-webkit-scrollbar {
    display: none;
  }
  .profile-stats-row .stat-block {
    padding: 0 10px;
    flex-shrink: 0;
  }
  .profile-stats-row .stat-value {
    font-size: 15px;
  }
  .profile-stats-row .stat-label {
    font-size: 10px;
  }

  /* ── Leaderboard: compact podium ── */
  .leaderboard-podium {
    gap: 6px !important;
  }
  .leaderboard-podium > div {
    padding: 12px 8px !important;
    min-width: 0 !important;
  }
  .leaderboard-podium > div a {
    font-size: 12px !important;
  }

  /* ── Leaderboard stats bar: compact row on mobile ── */
  .community-stats-bar {
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }
  .community-stats-bar .community-stats-item {
    min-width: 0;
  }
  .community-stats-bar .community-stats-item div:first-child {
    font-size: 14px !important;
  }

  /* ── Leaderboard entries: tighter on mobile ── */
  .lb-entry {
    padding: 10px 12px !important;
    gap: 10px !important;
  }

  /* ── GamificationStrip: horizontal scroll on mobile ── */
  .gami-challenges-row {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px !important;
    padding-bottom: 4px;
  }
  .gami-challenges-row::-webkit-scrollbar {
    display: none;
  }
  .gami-challenge-item {
    flex-shrink: 0;
    min-width: 200px;
  }
}

/* ─── Floating Legal Pill (always reachable over infinite scroll) ─── */
.legal-pill-btn {
  position: fixed;
  bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
  right: 1.5rem;
  z-index: 45;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(20, 20, 26, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(57, 255, 20, 0.35);
  color: var(--color-neon, #39ff14);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s, color 0.15s, border-color 0.15s, background 0.15s, box-shadow 0.15s;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(57, 255, 20, 0.08);
}
html:not(.dark) .legal-pill-btn {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(0, 0, 0, 0.15);
  color: #1a1a1a;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.legal-pill-btn:hover {
  border-color: rgba(57, 255, 20, 0.6);
  transform: scale(1.1);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.6), 0 0 0 3px rgba(57, 255, 20, 0.15);
}

.legal-popover {
  margin: 0;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(12, 12, 16, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: #e5e5e5;
  min-width: 240px;
  max-width: 280px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  inset: auto 1.5rem calc(5rem + env(safe-area-inset-bottom, 0px) + 44px) auto;
  position: fixed;
  font-size: 13px;
}
html:not(.dark) .legal-popover {
  background: rgba(255, 255, 255, 0.97);
  border-color: rgba(0, 0, 0, 0.08);
  color: #1a1a1a;
}
.legal-popover::backdrop {
  background: transparent;
}
.legal-popover-header {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7a7a7a;
  padding: 8px 10px 6px;
}
.legal-popover-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  transition: background 0.12s;
}
.legal-popover-item:hover {
  background: rgba(255, 255, 255, 0.06);
}
html:not(.dark) .legal-popover-item:hover {
  background: rgba(0, 0, 0, 0.05);
}
.legal-popover-item > span {
  flex: 1;
}
.legal-popover-divider {
  height: 1px;
  margin: 6px 8px;
  background: rgba(255, 255, 255, 0.07);
}
html:not(.dark) .legal-popover-divider {
  background: rgba(0, 0, 0, 0.07);
}
.legal-popover-footer {
  padding: 8px 10px 4px;
  font-size: 10px;
  color: #6a6a6a;
  text-align: center;
}