/* ============================================
 * YT STUDIO - Professional Design System
 * Netflix/YouTube/Amazon-inspired Colors
 * ============================================ */

:root {
  /* Primary Colors - Premium Studio */
  --primary: #e6b980;
  /* Deep Gold / Bronze */
  --primary-dark: #b8860b;
  /* Dark Gold */
  --primary-light: #f5d3ab;
  /* Light Gold / Champagne */

  /* Secondary Colors - Obsidian */
  --secondary: #1a1410;
  /* Warm Black */
  --secondary-dark: #0f0b08;
  /* Obsidian */
  --secondary-light: #251e18;
  /* Dark Coffee */

  /* Accent Colors - Crimson & Emerald */
  --accent: #8e1b1b;
  /* Crimson Red */
  --accent-gold: #ffd700;
  /* Pure Gold */
  --accent-green: #2d5a27;
  /* Deep Forest Green */
  --accent-blue: #1b3b5f;
  /* Midnight Blue */

  /* Neutral Colors */
  --text-primary: #f5f1e8;
  /* Parchment White */
  --text-secondary: #d1c7b7;
  /* Soft Beige */
  --text-soft: #a89f91;
  /* Muted Stone */
  --text-muted: #7a7267;
  /* Antique Gray */

  /* Background Colors - Layered */
  --bg-primary: #0a0806;
  /* Deepest background */
  --bg-secondary: #120e0b;
  /* Secondary layer */
  --bg-tertiary: #1c1712;
  /* Card / Panel layer */
  --bg-glass: rgba(10, 8, 6, 0.8);
  /* Glassmorphism base */

  /* Border & Shadows - Premium */
  --border-color: rgba(212, 165, 116, 0.15);
  /* Golden tint borders */
  --border-glow: 0 0 10px rgba(212, 165, 116, 0.2);
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.9);

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;

  /* Border Radius - Refined */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Typography */
  --font-sans: 'Inter', -apple-system, system-ui, sans-serif;
  --font-serif: 'Merriweather', serif;
  --font-display: 'Cinzel', serif;

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Light Mode */
body.light-mode {
  --primary: #e50914;
  --secondary: #ffffff;
  --secondary-dark: #f5f5f5;
  --secondary-light: #eeeeee;

  --text-primary: #1a1a1a;
  --text-secondary: #404040;
  --text-soft: #666666;
  --text-muted: #999999;

  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f5;
  --bg-tertiary: #eeeeee;
  --bg-hover: #e0e0e0;

  --border-color: #d0d0d0;
}

/* ============================================
 * BASE STYLES
 * ============================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  transition: background-color var(--transition-base), color var(--transition-base);
  overflow-x: hidden;
}

/* Accessibility: Skip Link */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--spacing-md);
  background: var(--primary);
  color: white;
  padding: var(--spacing-sm) var(--spacing-md);
  z-index: 9999;
  transition: top var(--transition-fast);
  text-decoration: none;
  font-weight: 700;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.skip-link:focus {
  top: 0;
}

/* Accessibility: Enhanced Focus States */
:focus-visible {
  outline: 3px solid var(--primary-light);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.card:focus-visible {
  outline-offset: 4px;
}

/* Accessibility: Reduced Motion */
@media (prefers-reduced-motion: reduce) {

  *,
  ::before,
  ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
}

  /* Theme Engine & Presets */

  body.theme-neon {
    --primary: #00ffcc;
    --primary-dark: #00ccaa;
    --bg-primary: #0a0a1a;
    --bg-secondary: #12122a;
    --accent: #ff00ff;
  }

  body.theme-neon .premium-gradient-text {
    background: linear-gradient(90deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }


  .theme-opt.active {
    color: var(--primary);
    font-weight: bold;
  }

  body.modal-open {
    overflow: hidden;
  }

  /* ============================================
 * GLASSMORPHISM & PREMIUM UTILITIES
 * ============================================ */

  .glass-card {
    background: var(--bg-glass);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
  }

  .premium-gradient {
    background: linear-gradient(135deg, var(--secondary-dark) 0%, var(--secondary) 100%);
    border: 1px solid var(--border-color);
  }

  .premium-gradient-text {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 50%, var(--primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
  }

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

  .floating {
    animation: float 6s ease-in-out infinite;
  }

  /* ============================================
 * ANIMATIONS
 * ============================================ */

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes slideIn {
    from {
      opacity: 0;
      transform: translateX(-20px);
    }

    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes pulse {

    0%,
    100% {
      opacity: 1;
    }

    50% {
      opacity: 0.5;
    }
  }

  @keyframes shimmer {
    0% {
      background-position: -1000px 0;
    }

    100% {
      background-position: 1000px 0;
    }
  }

  @keyframes float {

    0%,
    100% {
      transform: translateY(0px);
    }

    50% {
      transform: translateY(-20px);
    }
  }

  /* ============================================
 * NAVBAR / HEADER
 * ============================================ */

  .navbar {
    background: var(--bg-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: var(--spacing-md) var(--spacing-lg);
    position: sticky;
    top: 0;
    z-index: var(--z-dropdown);
    border-bottom: 1px solid var(--border-color);
    transition: all var(--transition-base);
  }

  .navbar.scrolled {
    background: var(--bg-secondary);
    padding: var(--spacing-sm) var(--spacing-lg);
    box-shadow: var(--shadow-md);
  }

  .navbar-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-lg);
  }

  .navbar-brand {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    cursor: pointer;
    transition: transform var(--transition-base);
  }

  .navbar-brand:hover {
    transform: scale(1.05);
  }

  .brand-icon {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
  }

  .brand-title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .brand-subtitle {
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-soft);
    margin-top: -4px;
  }

  .navbar-nav {
    display: flex;
    gap: var(--spacing-lg);
    align-items: center;
  }

  .nav-link {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    font-size: 14px;
    font-weight: 500;
  }

  .nav-link:hover {
    color: var(--primary);
    background-color: var(--bg-hover);
    transform: translateY(-2px);
  }

  .navbar-actions {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
  }

  .action-btn {
    background: none;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
    position: relative;
    font-size: 18px;
  }

  .action-btn:hover {
    background-color: var(--bg-hover);
    color: var(--primary);
    transform: scale(1.1);
  }

  .badge-btn {
    position: relative;
  }

  .badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--primary);
    color: white;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
  }

  /* ============================================
 * HERO SECTION
 * ============================================ */

  .hero {
    position: relative;
    height: 60vh;
    min-height: 500px;
    overflow: hidden;
    margin-bottom: var(--spacing-2xl);
  }

  .hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: brightness(0.6);
    transition: all var(--transition-slow);
  }

  .hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
        rgba(20, 20, 20, 0.9) 0%,
        rgba(20, 20, 20, 0.5) 50%,
        transparent 100%);
    z-index: 2;
  }

  .hero-container {
    position: relative;
    height: 100%;
    z-index: 3;
    display: flex;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--spacing-lg);
  }

  .hero-content {
    max-width: 600px;
    animation: slideIn 0.8s ease-out;
  }

  .hero-badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: white;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--spacing-md);
  }

  .hero-title {
    font-family: var(--font-display);
    font-size: clamp(32px, 5vw, 56px);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--spacing-md);
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  }

  .hero-description {
    font-size: 18px;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-lg);
    line-height: 1.6;
  }

  .hero-meta {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    flex-wrap: wrap;
  }

  .meta-item {
    background-color: rgba(229, 9, 20, 0.2);
    color: var(--text-secondary);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    font-size: 14px;
    border: 1px solid var(--border-color);
    transition: all var(--transition-base);
  }

  .meta-item:hover {
    background-color: var(--primary);
    color: white;
    border-color: var(--primary);
  }

  .hero-actions {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
  }

  .btn {
    padding: 12px 28px;
    border: none;
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-base);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: white;
    box-shadow: var(--shadow-md);
  }

  .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
  }

  .btn-primary:active {
    transform: translateY(0);
  }

  .btn-secondary {
    background-color: rgba(255, 255, 255, 0.15);
    color: white;
    border: 2px solid white;
    backdrop-filter: blur(10px);
  }

  .btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
  }

  .btn-lg {
    padding: 16px 32px;
    font-size: 16px;
  }

  .hero-thumbnail {
    flex: 1;
    display: none;
  }

  @media (min-width: 1024px) {
    .hero-thumbnail {
      display: block;
    }
  }

  /* ============================================
 * SEARCH & FILTER SECTION
 * ============================================ */

  .search-section {
    background-color: var(--bg-secondary);
    padding: var(--spacing-xl) var(--spacing-lg);
    margin: var(--spacing-2xl) 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
  }

  .container {
    max-width: 1400px;
    margin: 0 auto;
  }

  .search-wrapper {
    margin-bottom: var(--spacing-lg);
  }

  .search-input-group {
    position: relative;
    display: flex;
    align-items: center;
  }

  .search-icon {
    position: absolute;
    left: var(--spacing-md);
    color: var(--text-soft);
    pointer-events: none;
  }

  .search-input {
    width: 100%;
    padding: 12px var(--spacing-md) 12px 40px;
    background-color: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 15px;
    transition: all var(--transition-base);
  }

  .search-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.1);
  }

  .search-input::placeholder {
    color: var(--text-muted);
  }

  .search-kbd-hint {
    position: absolute;
    right: var(--spacing-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 2px 6px;
    font-size: 12px;
    color: var(--text-soft);
    pointer-events: none;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
    font-family: var(--font-sans);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.5);
  }

  .search-input:focus + .search-kbd-hint,
  .search-input:not(:placeholder-shown) + .search-kbd-hint {
    opacity: 0;
    transform: scale(0.8);
  }

  .search-clear {
    position: absolute;
    right: var(--spacing-md);
    background: none;
    border: none;
    color: var(--text-soft);
    cursor: pointer;
    font-size: 18px;
    transition: color var(--transition-base);
  }

  .search-clear:hover {
    color: var(--primary);
  }

  .search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    max-height: 400px;
    overflow-y: auto;
    z-index: var(--z-dropdown);
    display: none;
  }

  .suggestion-item {
    padding: var(--spacing-md);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    transition: all var(--transition-base);
    border-bottom: 1px solid var(--border-color);
  }

  .suggestion-item:hover,
  .suggestion-item.active {
    background-color: var(--bg-hover);
    color: var(--primary);
    padding-left: var(--spacing-lg);
  }

  .filter-wrapper {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
  }

  .filter-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .filter-tags {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
  }

  .filter-tag,
  .chip {
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all var(--transition-base);
  }

  .filter-tag:hover,
  .chip:hover {
    border-color: var(--primary);
    color: var(--primary);
  }

  .filter-tag.active,
  .chip.active {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: white;
    border-color: var(--primary);
  }

  /* ============================================
 * STATS SECTION
 * ============================================ */

  .stats-section {
    padding: var(--spacing-2xl) var(--spacing-lg);
  }

  .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
  }

  .stat-card {
    background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-secondary));
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    transition: all var(--transition-base);
    cursor: pointer;
  }

  .stat-card:hover {
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
  }

  .stat-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    flex-shrink: 0;
  }

  .stat-content {
    flex: 1;
  }

  .stat-label {
    color: var(--text-soft);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-sm);
  }

  .stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
  }

  /* ============================================
 * EPISODES SECTION
 * ============================================ */

  .episodes-section {
    padding: var(--spacing-2xl) var(--spacing-lg);
  }

  .section-header {
    margin-bottom: var(--spacing-2xl);
  }

  .section-title {
    font-family: var(--font-display);
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
    margin-bottom: var(--spacing-md);
  }

  .section-subtitle {
    color: var(--text-soft);
    font-size: 14px;
  }

  .episodes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--spacing-lg);
  }

  .card {
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition: all var(--transition-base);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .card:hover {
    transform: translateY(-8px);
    border-color: var(--primary);
    box-shadow: 0 0 20px rgba(230, 185, 128, 0.2), var(--shadow-lg);
  }

  .card-thumb-wrapper {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
  }

  .card-thumb-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all var(--transition-base);
  }

  .card:hover .card-thumb-wrapper img {
    transform: scale(1.05);
    filter: brightness(0.8);
  }

  .card-thumb-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
    opacity: 0;
  }

  .card:hover .card-thumb-overlay {
    background: rgba(0, 0, 0, 0.4);
    opacity: 1;
  }

  .play-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    transition: all var(--transition-base);
  }

  .card:hover .play-icon {
    transform: scale(1.1);
  }

  .duration-badge {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
  }

  .progress-bar-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: rgba(255, 255, 255, 0.2);
  }

  .progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    transition: width 0.3s ease;
  }

  .watch-later-btn {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid white;
    border-radius: var(--radius-md);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
    font-size: 18px;
    backdrop-filter: blur(5px);
  }

  .watch-later-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    transform: scale(1.1);
  }

  .watch-later-btn.active {
    background: var(--primary);
    border-color: var(--primary);
  }

  .card-copy {
    padding: var(--spacing-md);
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .card:hover .card-title {
    color: var(--primary);
  }

  .card-meta {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
    font-size: 12px;
    color: var(--text-soft);
    margin-top: auto;
  }

  .card-tag {
    background-color: rgba(229, 9, 20, 0.2);
    color: var(--primary);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-weight: 500;
  }

  /* ============================================
 * MODAL
 * ============================================ */

  .modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    display: none;
    flex-direction: column;
    z-index: var(--z-modal);
    overflow-y: auto;
    backdrop-filter: blur(5px);
  }

  .modal-content {
    position: relative;
    background-color: var(--bg-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    max-width: 900px;
    width: 90%;
    margin: var(--spacing-lg) auto;
    overflow: hidden;
    animation: slideIn 0.3s ease-out;
  }

  .modal-close {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: var(--radius-md);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all var(--transition-base);
    font-size: 24px;
  }

  .modal-close:hover {
    background: var(--primary);
    transform: scale(1.1);
  }

  .modal-header {
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
  }

  .modal-title {
    font-size: 24px;
    font-weight: 700;
  }

  .modal-body {
    padding: var(--spacing-lg);
  }

  .video-player {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: #000;
    margin-bottom: var(--spacing-lg);
  }

  .video-player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .modal-actions {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    margin-top: var(--spacing-lg);
  }

  .modal-action-btn {
    flex: 1;
    min-width: 120px;
    padding: 12px var(--spacing-md);
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    transition: all var(--transition-base);
    font-weight: 600;
  }

  .modal-action-btn:hover {
    background-color: var(--primary);
    border-color: var(--primary);
    color: white;
  }

  /* ============================================
 * WATCH LATER PANEL
 * ============================================ */

  .side-panel {
    position: fixed;
    right: -350px;
    top: 0;
    width: 350px;
    height: 100vh;
    background-color: var(--bg-secondary);
    z-index: var(--z-modal);
    transition: right var(--transition-base);
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
  }

  .side-panel[aria-hidden="false"] {
    right: 0;
  }

  .panel-header {
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    background-color: var(--bg-secondary);
    z-index: 10;
  }

  .panel-header h2 {
    font-size: 20px;
    font-weight: 700;
  }

  .panel-close {
    background: none;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 24px;
    transition: all var(--transition-base);
  }

  .panel-close:hover {
    color: var(--primary);
    transform: scale(1.1);
  }

  .panel-content {
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .empty-state {
    padding: var(--spacing-2xl) var(--spacing-lg);
    text-align: center;
    color: var(--text-soft);
  }

  /* ============================================
 * LOADING & ERROR STATES
 * ============================================ */

  .loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xl) var(--spacing-lg);
    gap: var(--spacing-lg);
  }

  .spinner {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-full);
    border: 3px solid var(--border-color);
    border-top-color: var(--primary);
    animation: spin 0.8s linear infinite;
  }

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

  .error-state {
    text-align: center;
    padding: var(--spacing-2xl) var(--spacing-lg);
  }

  .error-icon {
    font-size: 48px;
    margin-bottom: var(--spacing-md);
    color: var(--primary);
  }

  .error-state h3 {
    font-size: 20px;
    margin-bottom: var(--spacing-md);
  }

  .error-state p {
    color: var(--text-soft);
    margin-bottom: var(--spacing-lg);
  }

  .skeleton-card {
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-secondary);
    padding: 1rem;
  }

  .skeleton {
    background: linear-gradient(90deg, var(--bg-tertiary) 0%, var(--bg-hover) 50%, var(--bg-tertiary) 100%);
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
    border-radius: 4px;
  }

  .skeleton-thumb {
    width: 100%;
    height: 180px;
    margin-bottom: 12px;
  }

  .skeleton-title {
    width: 90%;
    height: 24px;
    margin-bottom: 8px;
  }

  .skeleton-meta {
    width: 40%;
    height: 16px;
  }

  /* Toast Notifications */
  #toast-container {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .toast {
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
    background: var(--bg-tertiary);
    color: white;
    box-shadow: var(--shadow-lg);
    border-left: 4px solid var(--primary);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    animation: toast-in 0.3s ease-out forwards;
    min-width: 250px;
  }

  .toast.success {
    border-left-color: var(--accent-green);
  }

  .toast.warning {
    border-left-color: var(--accent-orange);
  }

  .toast.info {
    border-left-color: var(--accent-blue);
  }

  @keyframes toast-in {
    from {
      transform: translateX(100%);
      opacity: 0;
    }

    to {
      transform: translateX(0);
      opacity: 1;
    }
  }

  @keyframes toast-out {
    from {
      transform: translateX(0);
      opacity: 1;
    }

    to {
      transform: translateX(100%);
      opacity: 0;
    }
  }

  .empty-state-card {
    text-align: center;
    padding: var(--spacing-2xl) var(--spacing-lg);
    color: var(--text-soft);
  }

  .empty-state-card i {
    font-size: 48px;
    margin-bottom: var(--spacing-md);
    opacity: 0.5;
  }

  /* ============================================
 * TOAST
 * ============================================ */

  .toast {
    position: fixed;
    bottom: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: white;
    padding: 16px 24px;
    border-radius: var(--radius-md);
    z-index: var(--z-toast);
    transition: bottom var(--transition-base);
    box-shadow: var(--shadow-lg);
    max-width: 90%;
  }

  .toast.show {
    bottom: 24px;
  }

  /* ============================================
   * FOOTER
   * ============================================ */
  .footer {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    padding: var(--spacing-2xl) 0 var(--spacing-lg);
    margin-top: var(--spacing-2xl);
  }

  .footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--spacing-2xl);
    margin-bottom: var(--spacing-2xl);
  }

  @media (max-width: 992px) {
    .footer-content {
      grid-template-columns: 1fr 1fr;
    }
  }

  @media (max-width: 576px) {
    .footer-content {
      grid-template-columns: 1fr;
    }
  }

  .footer-section h4 {
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: var(--spacing-lg);
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }

  .footer-section p {
    color: var(--text-soft);
    font-size: 0.9rem;
    line-height: 1.6;
    max-width: 300px;
  }

  .footer-section ul {
    list-style: none;
    padding: 0;
  }

  .footer-section ul li {
    margin-bottom: var(--spacing-sm);
  }

  .footer-section ul li a {
    color: var(--text-soft);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color var(--transition-fast);
  }

  .footer-section ul li a:hover {
    color: var(--primary);
  }

  .social-links {
    display: flex;
    gap: var(--spacing-md);
  }

  .social-links a {
    width: 36px;
    height: 36px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-soft);
    transition: all var(--transition-fast);
  }

  .social-links a:hover {
    background-color: var(--primary);
    transform: translateY(-4px);
  }

  .footer-bottom {
    text-align: center;
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
    color: var(--text-soft);
    font-size: 13px;
  }

  /* ============================================
 * RESPONSIVE
 * ============================================ */

  @media (max-width: 768px) {
    .navbar-container {
      gap: var(--spacing-md);
    }

    .navbar-nav {
      gap: var(--spacing-md);
    }

    .hero-container {
      padding: var(--spacing-md);
    }

    .hero-title {
      font-size: 28px;
    }

    .episodes-grid {
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: var(--spacing-md);
    }

    .side-panel {
      width: 100%;
      right: -100%;
    }

    .search-section {
      padding: var(--spacing-lg);
    }

    .stats-grid {
      grid-template-columns: 1fr;
    }

    .filter-wrapper {
      flex-direction: column;
      align-items: flex-start;
    }
  }

  @media (max-width: 480px) {
    .container {
      padding: 0;
    }

    .episodes-grid {
      grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
      gap: var(--spacing-sm);
    }

    .hero-title {
      font-size: 20px;
    }

    .hero-actions {
      flex-direction: column;
    }

    .btn,
    .btn-lg {
      width: 100%;
      justify-content: center;
    }

    .section-title {
      font-size: 22px;
    }

    .modal-content {
      width: 95%;
      margin: var(--spacing-md) auto;
    }
  }

  /* ============================================
 * UTILITY CLASSES
 * ============================================ */

  .hide {
    display: none !important;
  }

  .show {
    display: block !important;
  }

  .text-center {
    text-align: center;
  }

  .mt-1 {
    margin-top: var(--spacing-sm);
  }

  .mt-2 {
    margin-top: var(--spacing-md);
  }

  .mt-3 {
    margin-top: var(--spacing-lg);
  }

  .mb-1 {
    margin-bottom: var(--spacing-sm);
  }

  .mb-2 {
    margin-bottom: var(--spacing-md);
  }

  .mb-3 {
    margin-bottom: var(--spacing-lg);
  }

  .p-1 {
    padding: var(--spacing-sm);
  }

  .p-2 {
    padding: var(--spacing-md);
  }

  .p-3 {
    padding: var(--spacing-lg);
  }

  mark {
    background-color: rgba(255, 215, 0, 0.3);
    color: var(--accent);
    padding: 2px 4px;
    border-radius: 3px;
  }

  /* Scroll to Top */
  .scroll-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: white;
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-lg);
  }

  .scroll-to-top:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
  }

  .scroll-to-top.show {
    opacity: 1;
    visibility: visible;
  }
/* Mobile Menu Enhancements */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--spacing-sm);
  flex-direction: column;
  gap: 5px;
}

.menu-toggle span {
  display: block;
  width: 25px;
  height: 2px;
  background-color: var(--text-primary);
  transition: var(--transition-base);
}

@media (max-width: 768px) {
  .menu-toggle {
    display: flex;
  }

  .navbar-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--bg-secondary);
    flex-direction: column;
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
  }

  body.mobile-nav-active .navbar-nav {
    display: flex;
  }
}

.search-section {
    display: none;
    transition: var(--transition-base);
}

.search-section.active {
    display: block;
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Palette Utility Fallbacks */
.hidden { display: none !important; }
@keyframes slideIn{0%{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(24px);filter:blur(4px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes toast-in{0%{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes toast-out{0%{transform:translateX(0);opacity:1}to{transform:translateX(100%);opacity:0}}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}:root{--primary:#e6b980;--primary-dark:#b8860b;--primary-light:#f5d3ab;--secondary:#1a1410;--secondary-dark:#0f0b08;--secondary-light:#251e18;--accent:#8e1b1b;--accent-gold:#ffd700;--accent-green:#2d5a27;--accent-blue:#1b3b5f;--text-primary:#f5f1e8;--text-secondary:#d1c7b7;--text-soft:#a89f91;--text-muted:#7a7267;--bg-primary:#0a0806;--bg-secondary:#120e0b;--bg-tertiary:#1c1712;--bg-glass:rgba(10, 8, 6, 0.8);--border-color:rgba(212, 165, 116, 0.15);--border-glow:0 0 10px rgba(212, 165, 116, 0.2);--shadow-sm:0 4px 12px rgba(0, 0, 0, 0.5);--shadow-md:0 8px 24px rgba(0, 0, 0, 0.7);--shadow-lg:0 16px 48px rgba(0, 0, 0, 0.9);--spacing-xs:4px;--spacing-sm:8px;--spacing-md:16px;--spacing-lg:24px;--spacing-xl:32px;--spacing-2xl:48px;--radius-sm:4px;--radius-md:10px;--radius-lg:16px;--radius-xl:24px;--radius-full:9999px;--font-sans:'Inter', -apple-system, system-ui, sans-serif;--font-serif:'Merriweather', serif;--font-display:'Cinzel', serif;--transition-fast:150ms cubic-bezier(0.4, 0, 0.2, 1);--transition-base:300ms cubic-bezier(0.4, 0, 0.2, 1);--transition-slow:500ms cubic-bezier(0.4, 0, 0.2, 1)}body.light-mode{--primary:#e50914;--secondary:#ffffff;--secondary-dark:#f5f5f5;--secondary-light:#eeeeee;--text-primary:#1a1a1a;--text-secondary:#404040;--text-soft:#666666;--text-muted:#999999;--bg-primary:#ffffff;--bg-secondary:#f5f5f5;--bg-tertiary:#eeeeee;--bg-hover:#e0e0e0;--border-color:#d0d0d0}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-sans);background-color:var(--bg-primary);color:var(--text-primary);line-height:1.6;transition:background-color var(--transition-base),color var(--transition-base);overflow-x:hidden}.skip-link{position:absolute;top:-100px;left:var(--spacing-md);background:var(--primary);color:#fff;padding:var(--spacing-sm) var(--spacing-md);z-index:9999;transition:top var(--transition-fast);text-decoration:none;font-weight:700;border-radius:0 0 var(--radius-md) var(--radius-md)}.skip-link:focus{top:0}:focus-visible{outline:3px solid var(--primary-light);outline-offset:2px;border-radius:var(--radius-sm)}.card:focus-visible{outline-offset:4px}@media (prefers-reduced-motion:reduce){*,::after,::before{animation-delay:-1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important;transition-duration:0s!important;transition-delay:0s!important}}body.theme-neon{--primary:#00ffcc;--primary-dark:#00ccaa;--bg-primary:#0a0a1a;--bg-secondary:#12122a;--accent:#ff00ff}body.theme-neon .premium-gradient-text{background:linear-gradient(90deg,var(--primary),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}.theme-switcher:hover #themeMenu{display:block}.theme-opt.active{color:var(--primary);font-weight:700}body.modal-open{overflow:hidden}.glass-card,.premium-gradient{border:1px solid var(--border-color)}.glass-card{background:var(--bg-glass);backdrop-filter:blur(12px) saturate(180%);-webkit-backdrop-filter:blur(12px) saturate(180%);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}.premium-gradient{background:linear-gradient(135deg,var(--secondary-dark) 0%,var(--secondary) 100%)}.premium-gradient-text{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-light) 50%,var(--primary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700}.gold-glow{box-shadow:var(--border-glow)}.floating{animation:float 6s ease-in-out infinite}.navbar{background:var(--bg-glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:var(--spacing-md) var(--spacing-lg);position:sticky;top:0;z-index:var(--z-dropdown);border-bottom:1px solid var(--border-color);transition:all var(--transition-base)}.navbar.scrolled{background:var(--bg-secondary);padding:var(--spacing-sm) var(--spacing-lg);box-shadow:var(--shadow-md)}.navbar-container{max-width:1400px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-lg)}.navbar-brand{display:flex;align-items:center;gap:var(--spacing-md);cursor:pointer;transition:transform var(--transition-base)}.navbar-brand:hover{transform:scale(1.05)}.brand-icon,.brand-title{font-weight:700;background:linear-gradient(135deg,var(--primary) 0%,var(--accent) 100%)}.brand-icon{width:32px;height:32px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:#fff}.brand-title{font-family:var(--font-display);font-size:20px;letter-spacing:1px;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.brand-subtitle{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--text-soft);margin-top:-4px}.navbar-nav{display:flex;gap:var(--spacing-lg);align-items:center}.nav-link{background:0 0;border:0;color:var(--text-secondary);cursor:pointer;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);transition:all var(--transition-base);font-size:14px;font-weight:500}.action-btn:hover,.nav-link:hover{background-color:var(--bg-hover);color:var(--primary)}.nav-link:hover{transform:translateY(-2px)}.action-btn,.nav-link,.navbar-actions{display:flex;align-items:center}.navbar-actions{gap:var(--spacing-md)}.action-btn{background:0 0;border:0;width:36px;height:36px;border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;justify-content:center;transition:all var(--transition-base);font-size:18px}.action-btn:hover{transform:scale(1.1)}.action-btn,.badge-btn{position:relative}.badge{position:absolute;top:-8px;right:-8px;background:var(--primary);color:#fff;width:20px;height:20px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}.hero{position:relative;height:60vh;min-height:500px;overflow:hidden;margin-bottom:var(--spacing-2xl)}.hero-background,.hero-overlay{position:absolute;top:0;left:0;width:100%;height:100%}.hero-background{background-size:cover;background-position:center;background-repeat:no-repeat;filter:brightness(.6);transition:all var(--transition-slow)}.hero-overlay{background:linear-gradient(135deg,rgba(20,20,20,.9)0,rgba(20,20,20,.5) 50%,transparent 100%);z-index:2}.hero-container{position:relative;height:100%;z-index:3;display:flex;align-items:center;max-width:1400px;margin:0 auto;padding:var(--spacing-lg)}.hero-content{max-width:600px;animation:slideIn .8s ease-out}.hero-badge,.hero-title{font-weight:700;margin-bottom:var(--spacing-md)}.hero-badge{display:inline-block;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-full);font-size:12px;text-transform:uppercase;letter-spacing:1px}.hero-title{font-family:var(--font-display);font-size:clamp(32px,5vw,56px);line-height:1.2;text-shadow:0 4px 12px rgba(0,0,0,.5)}.hero-description,.hero-meta{margin-bottom:var(--spacing-lg)}.hero-description{font-size:18px;color:var(--text-secondary);line-height:1.6}.hero-meta{display:flex;gap:var(--spacing-md);flex-wrap:wrap}.meta-item{background-color:rgba(229,9,20,.2);color:var(--text-secondary);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);font-size:14px;border:1px solid var(--border-color);transition:all var(--transition-base)}.meta-item:hover{background-color:var(--primary);color:#fff;border-color:var(--primary)}.hero-actions{display:flex;gap:var(--spacing-md);flex-wrap:wrap}.btn{padding:12px 28px;border:0;border-radius:var(--radius-md);font-size:15px;font-weight:600;cursor:pointer;transition:all var(--transition-base);display:inline-flex;align-items:center;gap:var(--spacing-sm);text-transform:uppercase;letter-spacing:.5px}.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;box-shadow:var(--shadow-md)}.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);background:linear-gradient(135deg,var(--primary-dark),var(--primary))}.btn-primary:active{transform:translateY(0)}.btn-secondary{background-color:rgba(255,255,255,.15);color:#fff;border:2px solid #fff;backdrop-filter:blur(10px)}.btn-secondary:hover{background-color:rgba(255,255,255,.25);transform:translateY(-2px)}.btn-lg{padding:16px 32px;font-size:16px}.hero-thumbnail{flex:1;display:none}@media (min-width:1024px){.hero-thumbnail{display:block}}.search-section{background-color:var(--bg-secondary);padding:var(--spacing-xl) var(--spacing-lg);margin:var(--spacing-2xl)0;border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color)}.container{max-width:1400px;margin:0 auto}.search-wrapper{margin-bottom:var(--spacing-lg)}.search-input-group{position:relative;display:flex;align-items:center}.search-icon{position:absolute;left:var(--spacing-md);color:var(--text-soft);pointer-events:none}.search-input{width:100%;padding:12px var(--spacing-md) 12px 40px;background-color:var(--bg-tertiary);border:2px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);font-size:15px;transition:all var(--transition-base)}.search-input:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px rgba(229,9,20,.1)}.search-input::placeholder{color:var(--text-muted)}.search-kbd-hint{position:absolute;right:var(--spacing-md);background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-sm);padding:2px 6px;font-size:12px;color:var(--text-soft);pointer-events:none;transition:opacity var(--transition-fast),transform var(--transition-fast);font-family:var(--font-sans);box-shadow:inset 0-1px 0 rgba(0,0,0,.5)}.search-input:focus+.search-kbd-hint,.search-input:not(:placeholder-shown)+.search-kbd-hint{opacity:0;transform:scale(.8)}.search-clear{position:absolute;right:var(--spacing-md);background:0 0;border:0;color:var(--text-soft);cursor:pointer;font-size:18px;transition:color var(--transition-base)}.search-clear:hover{color:var(--primary)}.search-dropdown{position:absolute;top:100%;left:0;right:0;background-color:var(--bg-tertiary);border:1px solid var(--border-color);border-top:none;border-radius:0 0 var(--radius-md) var(--radius-md);max-height:400px;overflow-y:auto;z-index:var(--z-dropdown);display:none}.filter-wrapper,.suggestion-item{display:flex;align-items:center;gap:var(--spacing-md)}.suggestion-item{padding:var(--spacing-md);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-base);border-bottom:1px solid var(--border-color)}.suggestion-item.active,.suggestion-item:hover{background-color:var(--bg-hover);color:var(--primary);padding-left:var(--spacing-lg)}.filter-wrapper{flex-wrap:wrap}.filter-label{font-size:14px;font-weight:600;color:var(--text-soft);text-transform:uppercase;letter-spacing:.5px}.filter-tags{display:flex;gap:var(--spacing-sm);flex-wrap:wrap}.chip,.filter-tag{padding:var(--spacing-sm) var(--spacing-md);background-color:var(--bg-tertiary);color:var(--text-secondary);border:1px solid var(--border-color);border-radius:var(--radius-full);cursor:pointer;font-size:13px;font-weight:500;transition:all var(--transition-base)}.chip:hover,.filter-tag:hover{border-color:var(--primary);color:var(--primary)}.chip.active,.filter-tag.active{background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;border-color:var(--primary)}.stats-section{padding:var(--spacing-2xl) var(--spacing-lg)}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--spacing-lg)}.stat-card,.stat-icon{display:flex;align-items:center}.stat-card{background:linear-gradient(135deg,var(--bg-tertiary),var(--bg-secondary));padding:var(--spacing-lg);border-radius:var(--radius-lg);border:1px solid var(--border-color);gap:var(--spacing-lg);transition:all var(--transition-base);cursor:pointer}.stat-card:hover{border-color:var(--primary);transform:translateY(-4px);box-shadow:var(--shadow-md)}.stat-icon{width:56px;height:56px;background:linear-gradient(135deg,var(--primary),var(--accent));border-radius:var(--radius-md);justify-content:center;color:#fff;font-size:24px;flex-shrink:0}.stat-content{flex:1}.stat-label{color:var(--text-soft);font-size:13px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--spacing-sm)}.stat-value{font-size:28px;font-weight:700;color:var(--text-primary)}.episodes-section{padding:var(--spacing-2xl) var(--spacing-lg)}.section-header{margin-bottom:var(--spacing-2xl)}.section-title{font-family:var(--font-display);font-size:clamp(28px,4vw,40px);font-weight:700;margin-bottom:var(--spacing-md)}.section-subtitle{color:var(--text-soft);font-size:14px}.episodes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--spacing-lg)}.card{background-color:var(--bg-tertiary);border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;transition:all var(--transition-base),outline-color var(--transition-base);border:1px solid var(--border-color);display:flex;flex-direction:column;height:100%;outline:2px solid transparent;outline-offset:3px}.card.animate-in{animation:fadeInUp 600ms cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--index, 0)*80ms)}.card:focus-visible,.card:hover{transform:scale(1.02) translateY(-8px);border-color:var(--primary);box-shadow:0 0 24px rgba(230,185,128,.15),var(--shadow-lg)}.card:focus-visible{outline-color:var(--primary)}.card-thumb-wrapper{position:relative;overflow:hidden;aspect-ratio:16/9;background:linear-gradient(135deg,var(--bg-secondary),var(--bg-tertiary))}.card-thumb-wrapper img{width:100%;height:100%;object-fit:cover;transition:all var(--transition-base)}.card:hover .card-thumb-wrapper img{transform:scale(1.05);filter:brightness(.8)}.card-thumb-overlay,.play-icon{display:flex;align-items:center;justify-content:center;transition:all var(--transition-base)}.card-thumb-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:0 0;opacity:0}.card:hover .card-thumb-overlay{background:rgba(0,0,0,.4);opacity:1}.play-icon{width:50px;height:50px;background:linear-gradient(135deg,var(--primary),var(--primary-light));border-radius:var(--radius-full);color:#fff;font-size:20px}.duration-badge{position:absolute;top:var(--spacing-sm);right:var(--spacing-sm);background-color:rgba(0,0,0,.8);color:#fff;padding:4px 8px;border-radius:var(--radius-sm);font-size:12px;font-weight:600}.progress-bar-container{position:absolute;bottom:0;left:0;width:100%;height:3px;background-color:rgba(255,255,255,.2)}.progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--accent));transition:width .3s ease}.watch-later-btn{position:absolute;top:var(--spacing-md);right:var(--spacing-md);width:40px;height:40px;background:rgba(0,0,0,.6);border:2px solid #fff;border-radius:var(--radius-md);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-base);font-size:18px;backdrop-filter:blur(5px)}.card:hover .play-icon,.watch-later-btn:hover{transform:scale(1.1)}.watch-later-btn.active,.watch-later-btn:hover{background:var(--primary);border-color:var(--primary)}.card-copy{padding:var(--spacing-md);flex:1;display:flex;flex-direction:column}.card-title{font-size:15px;font-weight:600;color:var(--text-primary);margin-bottom:var(--spacing-sm);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.card:hover .card-title,.footer-section ul li a:hover{color:var(--primary)}.card-meta{display:flex;gap:var(--spacing-sm);align-items:center;font-size:12px;color:var(--text-soft);margin-top:auto}.card-tag{background-color:rgba(229,9,20,.2);color:var(--primary);padding:2px 8px;border-radius:var(--radius-sm);font-weight:500}.modal,.video-player iframe{top:0;left:0;width:100%;height:100%}.modal{position:fixed;background-color:rgba(0,0,0,.95);display:none;flex-direction:column;z-index:var(--z-modal);overflow-y:auto;backdrop-filter:blur(5px)}.modal-content{position:relative;background-color:var(--bg-glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-color);border-radius:var(--radius-lg);max-width:900px;width:90%;margin:var(--spacing-lg) auto;overflow:hidden;animation:slideIn .3s ease-out}.modal-close{position:absolute;top:var(--spacing-md);right:var(--spacing-md);width:40px;height:40px;background:rgba(0,0,0,.6);border:0;border-radius:var(--radius-md);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;transition:all var(--transition-base);font-size:24px}.modal-close:hover{background:var(--primary);transform:scale(1.1)}.modal-header{padding:var(--spacing-lg);border-bottom:1px solid var(--border-color)}.modal-title{font-size:24px;font-weight:700}.modal-body{padding:var(--spacing-lg)}.video-player{position:relative;width:100%;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:var(--radius-md);background:#000;margin-bottom:var(--spacing-lg)}.video-player iframe{position:absolute}.modal-actions{display:flex;gap:var(--spacing-md);flex-wrap:wrap;margin-top:var(--spacing-lg)}.modal-action-btn{flex:1;min-width:120px;padding:12px var(--spacing-md);background-color:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);transition:all var(--transition-base);font-weight:600}.modal-action-btn:hover{background-color:var(--primary);border-color:var(--primary);color:#fff}.panel-header,.side-panel{top:0;background-color:var(--bg-secondary)}.side-panel{position:fixed;right:-350px;width:350px;height:100vh;z-index:var(--z-modal);transition:right var(--transition-base);box-shadow:var(--shadow-lg);overflow-y:auto}.side-panel[aria-hidden=false]{right:0}.panel-header{padding:var(--spacing-lg);border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center;position:sticky;z-index:10}.panel-header h2{font-size:20px;font-weight:700}.panel-close{background:0 0;border:0;color:var(--text-primary);cursor:pointer;font-size:24px;transition:all var(--transition-base)}.panel-close:hover{color:var(--primary);transform:scale(1.1)}.panel-content{padding:var(--spacing-lg);display:flex;flex-direction:column;gap:var(--spacing-md)}.empty-state{padding:var(--spacing-2xl) var(--spacing-lg);text-align:center;color:var(--text-soft)}#toast-container,.loading-state{display:flex;flex-direction:column}.loading-state{align-items:center;justify-content:center;padding:var(--spacing-2xl) var(--spacing-lg);gap:var(--spacing-lg)}.spinner{width:50px;height:50px;border-radius:var(--radius-full);border:3px solid var(--border-color);border-top-color:var(--primary);animation:spin .8s linear infinite}.error-state{text-align:center;padding:var(--spacing-2xl) var(--spacing-lg)}.error-icon{font-size:48px;margin-bottom:var(--spacing-md);color:var(--primary)}.empty-state-card i,.error-state h3{font-size:20px;margin-bottom:var(--spacing-md)}.error-state p,.footer-section h4{color:var(--text-soft);margin-bottom:var(--spacing-lg)}.skeleton-card{border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-secondary);padding:1rem}.skeleton{background:linear-gradient(90deg,var(--bg-tertiary) 0%,var(--bg-hover) 50%,var(--bg-tertiary) 100%);background-size:200% 100%;animation:shimmer 2s infinite;border-radius:4px}.skeleton-thumb{width:100%;height:180px;margin-bottom:12px}.skeleton-title{width:90%;height:24px;margin-bottom:8px}.skeleton-meta{width:40%;height:16px}#toast-container{position:fixed;bottom:2rem;right:2rem;z-index:10000;gap:.5rem}.toast{padding:.75rem 1.25rem;border-radius:8px;background:var(--bg-tertiary);border-left:4px solid var(--primary);display:flex;align-items:center;gap:.75rem;animation:toast-in .3s ease-out forwards;min-width:250px}.toast.success{border-left-color:var(--accent-green)}.toast.warning{border-left-color:var(--accent-orange)}.toast.info{border-left-color:var(--accent-blue)}.empty-state-card{text-align:center;padding:var(--spacing-2xl) var(--spacing-lg);color:var(--text-soft)}.empty-state-card i{font-size:48px;opacity:.5}.social-links a,.toast{border-radius:var(--radius-md)}.toast{position:fixed;bottom:-100px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;padding:16px 24px;z-index:var(--z-toast);transition:bottom var(--transition-base);box-shadow:var(--shadow-lg);max-width:90%}.toast.show{bottom:24px}.footer{background:var(--bg-secondary);border-top:1px solid var(--border-color);padding:var(--spacing-2xl)0 var(--spacing-lg);margin-top:var(--spacing-2xl)}.footer-content{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--spacing-2xl);margin-bottom:var(--spacing-2xl)}@media (max-width:992px){.footer-content{grid-template-columns:1fr 1fr}}@media (max-width:576px){.footer-content{grid-template-columns:1fr}}.footer-section h4{color:var(--text-primary);font-family:var(--font-display);font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em}.footer-section p{color:var(--text-soft);font-size:.9rem;line-height:1.6;max-width:300px}.footer-section ul{list-style:none;padding:0}.footer-section ul li{margin-bottom:var(--spacing-sm)}.footer-section ul li a{color:var(--text-soft);text-decoration:none;font-size:.9rem;transition:color var(--transition-fast)}.social-links{display:flex;gap:var(--spacing-md)}.social-links a{width:36px;height:36px;background:var(--bg-tertiary);border:1px solid var(--border-color);display:flex;align-items:center;justify-content:center;color:var(--text-soft);transition:all var(--transition-fast)}.social-links a:hover{background-color:var(--primary);transform:translateY(-4px)}.footer-bottom{text-align:center;padding-top:var(--spacing-lg);border-top:1px solid var(--border-color);color:var(--text-soft);font-size:13px}@media (max-width:768px){.navbar-container,.navbar-nav{gap:var(--spacing-md)}.hero-container{padding:var(--spacing-md)}.hero-title{font-size:28px}.episodes-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--spacing-md)}.side-panel{width:100%;right:-100%}.search-section{padding:var(--spacing-lg)}.stats-grid{grid-template-columns:1fr}.filter-wrapper{flex-direction:column;align-items:flex-start}}@media (max-width:480px){.container{padding:0}.episodes-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:var(--spacing-sm)}.hero-title{font-size:20px}.hero-actions{flex-direction:column}.btn,.btn-lg{width:100%;justify-content:center}.section-title{font-size:22px}.modal-content{width:95%;margin:var(--spacing-md) auto}}.hide{display:none!important}.show{display:block!important}.text-center{text-align:center}.mt-1{margin-top:var(--spacing-sm)}.mt-2{margin-top:var(--spacing-md)}.mt-3{margin-top:var(--spacing-lg)}.mb-1{margin-bottom:var(--spacing-sm)}.mb-2{margin-bottom:var(--spacing-md)}.mb-3{margin-bottom:var(--spacing-lg)}.p-1{padding:var(--spacing-sm)}.p-2{padding:var(--spacing-md)}.p-3{padding:var(--spacing-lg)}mark{background-color:rgba(255,215,0,.3);color:var(--accent);padding:2px 4px;border-radius:3px}.scroll-to-top{position:fixed;bottom:30px;right:30px;width:50px;height:50px;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;border:0;border-radius:var(--radius-full);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:20px;z-index:99;opacity:0;visibility:hidden;transition:all var(--transition-base);box-shadow:var(--shadow-lg)}.scroll-to-top:hover{transform:translateY(-5px);box-shadow:0 8px 15px rgba(0,0,0,.3)}.scroll-to-top.show{opacity:1;visibility:visible}.menu-toggle{display:none;background:0 0;border:0;cursor:pointer;padding:var(--spacing-sm);flex-direction:column;gap:5px}.menu-toggle span{display:block;width:25px;height:2px;background-color:var(--text-primary);transition:var(--transition-base)}@media (max-width:768px){.menu-toggle,body.mobile-nav-active .navbar-nav{display:flex}.navbar-nav{display:none;position:absolute;top:100%;left:0;width:100%;background:var(--bg-secondary);flex-direction:column;padding:var(--spacing-lg);border-bottom:1px solid var(--border-color)}}.search-section{display:none;transition:var(--transition-base)}.search-section.active{display:block;animation:fadeIn .3s ease-out}.copy-feedback{position:absolute;top:-30px;left:50%;transform:translateX(-50%) translateY(10px);background:var(--primary);color:var(--secondary-dark);padding:4px 8px;border-radius:var(--radius-sm);font-size:10px;font-weight:700;pointer-events:none;opacity:0;transition:all var(--transition-fast);z-index:100;white-space:nowrap}.copy-feedback.show{opacity:1;transform:translateX(-50%) translateY(0)}.copy-feedback::after{content:"";position:absolute;top:100%;left:50%;margin-left:-4px;border-width:4px;border-style:solid;border-color:var(--primary) transparent transparent transparent}