diff --git a/css/style.css b/css/style.css index 4a6c0cb..dd39c36 100644 --- a/css/style.css +++ b/css/style.css @@ -1,1741 +1 @@ -/* ============================================ - * 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} +@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)}}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}@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}}@media (min-width:1024px){.hero-thumbnail{display:block}}.search-input::placeholder{color:var(--text-muted)}.card:hover{transform:translateY(-8px);border-color:var(--primary);box-shadow:0 0 20px rgba(230,185,128,.2),var(--shadow-lg)}.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)}.panel-header h2{font-size:20px;font-weight:700}@media (max-width:992px){.footer-content{grid-template-columns:1fr 1fr}}@media (max-width:576px){.footer-content{grid-template-columns:1fr}}.footer-section ul{list-style:none;padding:0}.footer-section ul li a{color:var(--text-soft);text-decoration:none;font-size:.9rem;transition:color var(--transition-fast)}.social-links a:hover{background-color:var(--primary);transform:translateY(-4px)}@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}}.footer-section ul li{margin-bottom:var(--spacing-sm)}mark{background-color:rgba(255,215,0,.3);color:var(--accent);padding:2px 4px;border-radius:3px}.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)}}.hidden{display:none!important}: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}.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-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-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-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)}.empty-state-card i,.error-icon,.error-state h3{margin-bottom:var(--spacing-md)}.error-icon{font-size:48px;color:var(--primary)}.empty-state-card i{font-size:48px;opacity:.5}.error-state h3{font-size:20px}.error-state p,.footer-section h4{color:var(--text-soft);margin-bottom:var(--spacing-lg)}.footer-section h4{color:var(--text-primary);font-family:var(--font-display);font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em}.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)}.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 p{color:var(--text-soft);font-size:.9rem;line-height:1.6;max-width:300px}.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)}.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)}.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}@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} \ No newline at end of file diff --git a/github-build.js b/github-build.js index 94a4f14..4ef8ef0 100644 --- a/github-build.js +++ b/github-build.js @@ -1,4 +1,4 @@ -let Build=require("github-build"),crypto=require("crypto"),config={repo:"siddharthkp/github-build",sha:process.env.GIT_COMMIT_SHA||"6954e71d46be1ae9b0529aae6e00b64d7a1023d4",token:process.env.GITHUB_TOKEN||"secret",label:"my CI service",description:"checking some stuff",url:"http://my-ci-service.com/builds/1",clientId:process.env.GITHUB_CLIENT_ID,clientSecret:process.env.GITHUB_CLIENT_SECRET,redirectUri:process.env.GITHUB_REDIRECT_URI||"http://localhost:3000/callback"};function generateState(){return crypto.randomBytes(16).toString("hex")}function redirectToGitHub(){var e=generateState(),e="https://github.com/login/oauth/authorize?"+new URLSearchParams({client_id:config.clientId,redirect_uri:config.redirectUri,scope:"repo,user:email",state:e,allow_signup:!1}).toString();return console.log("Redirect user to:",e),e}async function handleGitHubCallback(e,o,t){if(o!==t)throw new Error("State mismatch - possible CSRF attack");o=await(await fetch("https://github.com/login/oauth/access_token",{method:"POST",headers:{"Content-Type":"application/json",Accept:"application/json"},body:JSON.stringify({client_id:config.clientId,client_secret:config.clientSecret,code:e,redirect_uri:config.redirectUri})})).json();if(o.error)throw new Error("OAuth error: "+o.error_description);console.log("Access token obtained:",o.access_token);t=await fetch("https://api.github.com/user",{headers:{Authorization:"Bearer "+o.access_token,Accept:"application/json"}});return{accessToken:o.access_token,scope:o.scope,user:await t.json()}}async function deviceFlow(){var e=await(await fetch("https://github.com/login/device/code",{method:"POST",headers:{"Content-Type":"application/json",Accept:"application/json"},body:JSON.stringify({client_id:config.clientId,scope:"repo,user"})})).json();if(e.error)throw new Error("Device flow error: "+e.error_description);console.log("\n========================================"),console.log("๐Ÿ” GitHub Authorization Required"),console.log("========================================"),console.log("1. Open this URL: "+e.verification_uri),console.log("2. Enter this code: "+e.user_code),console.log(`3. The code expires in ${Math.floor(e.expires_in/60)} minutes`),console.log("========================================\n");let o=1e3*e.interval;for(var t=Date.now(),r=1e3*e.expires_in;Date.now()-tsetTimeout(e,o));var i=await(await fetch("https://github.com/login/oauth/access_token",{method:"POST",headers:{"Content-Type":"application/json",Accept:"application/json"},body:JSON.stringify({client_id:config.clientId,device_code:e.device_code,grant_type:"urn:ietf:params:oauth:grant-type:device_code"})})).json();if(i.access_token)return console.log("\nโœ… Authorization successful!"),i.access_token;if("authorization_pending"===i.error)console.log("โณ Waiting for authorization...");else{if("slow_down"!==i.error){if("expired_token"===i.error)throw new Error("Authorization code expired. Please restart the process.");throw new Error("Polling error: "+i.error_description)}o+=5e3,console.log("๐ŸŒ Rate limited, slowing down...")}}throw new Error("Authorization timeout. Please try again.")}async function runBuild(){var o=new Build(config);try{console.log("๐Ÿš€ Starting build..."),await o.start(),console.log("โœ… Build status set to pending"),console.log("\n๐Ÿงช Running tests..."),await runTests(),console.log("\nโœ… All tests passed!"),await o.pass(),console.log("โœ… Build status set to success")}catch(e){console.error("\nโŒ Build failed:",e.message),"config"===e.type?(await o.error(),console.log("โš ๏ธ Build status set to error")):(await o.fail(),console.log("โŒ Build status set to failure"))}}async function runTests(){var e;if(await new Promise(e=>setTimeout(e,2e3)),!(.3!config[e]);0setTimeout(e,o));var i=await(await fetch("https://github.com/login/oauth/access_token",{method:"POST",headers:{"Content-Type":"application/json",Accept:"application/json"},body:JSON.stringify({client_id:config.clientId,device_code:e.device_code,grant_type:"urn:ietf:params:oauth:grant-type:device_code"})})).json();if(i.access_token)return console.log("\nโœ… Authorization successful!"),i.access_token;if("authorization_pending"===i.error)console.log("โณ Waiting for authorization...");else{if("slow_down"!==i.error){if("expired_token"===i.error)throw new Error("Authorization code expired. Please restart the process.");throw new Error("Polling error: "+i.error_description)}o+=5e3,console.log("๐ŸŒ Rate limited, slowing down...")}}throw new Error("Authorization timeout. Please try again.")}async function runBuild(){var o=new Build(config);try{console.log("๐Ÿš€ Starting build..."),await o.start(),console.log("โœ… Build status set to pending"),console.log("\n๐Ÿงช Running tests..."),await runTests(),console.log("\nโœ… All tests passed!"),await o.pass(),console.log("โœ… Build status set to success")}catch(e){console.error("\nโŒ Build failed:",e.message),"config"===e.type?(await o.error(),console.log("โš ๏ธ Build status set to error")):(await o.fail(),console.log("โŒ Build status set to failure"))}}async function runTests(){var e;if(await new Promise(e=>setTimeout(e,2e3)),!(.3!config[e]);00 words -`;function initScriptStudio(){var t=document.getElementById("ptab-script");t&&!t.querySelector(".script-studio-container")&&(t.innerHTML=SCRIPT_HTML,initTextAreas(),initButtons(),loadTimelineBeats(),updateMetrics())}function initTextAreas(){document.querySelectorAll(".script-textarea").forEach(e=>{let a=e.dataset.section;var t=localStorage.getItem("script_section_"+a);t&&(e.value=t),e.addEventListener("input",t=>{localStorage.setItem("script_section_"+a,t.target.value),updateMetrics()}),e.addEventListener("mouseup",()=>{var t=e.value.substring(e.selectionStart,e.selectionEnd).trim();5insertAtCursor(" [PAUSE] ")),document.getElementById("insertEmphasisBtn")?.addEventListener("click",()=>insertAtCursor(" ** **")),document.getElementById("toggleFocusMode")?.addEventListener("click",toggleFocusMode),document.getElementById("exitFocusMode")?.addEventListener("click",exitFocusMode),document.getElementById("addBeatBtn")?.addEventListener("click",()=>addTimelineBeat("New Beat"))}let activeTextarea=null;function toggleFocusMode(){var t,e,a,i,s=document.activeElement;s?.classList?.contains("script-textarea")?(activeTextarea=s,t=document.getElementById("focusModeOverlay"),e=document.getElementById("focusTitle"),a=document.getElementById("focusTextArea"),i=s.closest(".script-section-block")?.querySelector("label"),e&&i&&(e.textContent=i.textContent),a&&(a.value=s.value,a.addEventListener("input",updateFocusMetrics)),t&&(t.setAttribute("aria-hidden","false"),t.classList.add("show"),a?.focus(),updateFocusMetrics())):alert("Please click inside a section to focus.")}function exitFocusMode(){var t=document.getElementById("focusModeOverlay"),e=document.getElementById("focusTextArea");activeTextarea&&e&&(activeTextarea.value=e.value,activeTextarea.dispatchEvent(new Event("input"))),t&&(t.setAttribute("aria-hidden","true"),t.classList.remove("show")),activeTextarea=null}function addTimelineBeat(t="New Beat"){var e,a=document.getElementById("timelineBeats");a&&((e=document.createElement("div")).className="timeline-beat",e.innerHTML=``,a.appendChild(e),e.querySelector("input").addEventListener("input",saveTimelineBeats),saveTimelineBeats())}function saveTimelineBeats(){var t=Array.from(document.querySelectorAll(".beat-input")).map(t=>t.value);localStorage.setItem("timeline_beats",JSON.stringify(t))}function loadTimelineBeats(){var t=JSON.parse(localStorage.getItem("timeline_beats")||"[]"),e=document.getElementById("timelineBeats");e&&(e.innerHTML=""),0===t.length?["Hook","Exposition","Climax","Resolution"].forEach(t=>addTimelineBeat(t)):t.forEach(t=>addTimelineBeat(t))}function updateMetrics(){let e="";document.querySelectorAll(".script-textarea").forEach(t=>e+=t.value+" ");var t=e.trim().split(/\s+/).filter(t=>00 Link to Reference',document.body.appendChild(a));t=t.getBoundingClientRect();a.style.display="block",a.style.top=window.scrollY+t.top-40+"px",a.style.left=window.scrollX+t.left+20+"px",document.getElementById("linkRefBtn").onclick=()=>{document.querySelector('.studio-nav-btn[data-tab="islamic"]')?.click(),hideMappingPopup()}}function hideMappingPopup(){var t=document.getElementById("mappingPopup");t&&(t.style.display="none")}function escapeHtml(t){var e=document.createElement("div");return e.textContent=t,e.innerHTML}document.addEventListener("DOMContentLoaded",initScriptStudio);export{initScriptStudio}; \ No newline at end of file +`;function initScriptStudio(){var t=document.getElementById("ptab-script");t&&!t.querySelector(".script-studio-container")&&(t.innerHTML=SCRIPT_HTML,initTextAreas(),initButtons(),loadTimelineBeats(),updateMetrics())}function initTextAreas(){document.querySelectorAll(".script-textarea").forEach(e=>{let a=e.dataset.section,t=localStorage.getItem("script_section_"+a);t&&(e.value=t),e.addEventListener("input",t=>{localStorage.setItem("script_section_"+a,t.target.value),updateMetrics()}),e.addEventListener("mouseup",()=>{var t=e.value.substring(e.selectionStart,e.selectionEnd).trim();5insertAtCursor(" [PAUSE] ")),document.getElementById("insertEmphasisBtn")?.addEventListener("click",()=>insertAtCursor(" ** **")),document.getElementById("toggleFocusMode")?.addEventListener("click",toggleFocusMode),document.getElementById("exitFocusMode")?.addEventListener("click",exitFocusMode),document.getElementById("addBeatBtn")?.addEventListener("click",()=>addTimelineBeat("New Beat"))}let activeTextarea=null;function toggleFocusMode(){var t,e,a,i,s=document.activeElement;s?.classList?.contains("script-textarea")?(activeTextarea=s,t=document.getElementById("focusModeOverlay"),e=document.getElementById("focusTitle"),a=document.getElementById("focusTextArea"),i=s.closest(".script-section-block")?.querySelector("label"),e&&i&&(e.textContent=i.textContent),a&&(a.value=s.value,a.addEventListener("input",updateFocusMetrics)),t&&(t.setAttribute("aria-hidden","false"),t.classList.add("show"),a?.focus(),updateFocusMetrics())):alert("Please click inside a section to focus.")}function exitFocusMode(){var t=document.getElementById("focusModeOverlay"),e=document.getElementById("focusTextArea");activeTextarea&&e&&(activeTextarea.value=e.value,activeTextarea.dispatchEvent(new Event("input"))),t&&(t.setAttribute("aria-hidden","true"),t.classList.remove("show")),activeTextarea=null}function addTimelineBeat(t="New Beat"){var e,a=document.getElementById("timelineBeats");a&&((e=document.createElement("div")).className="timeline-beat",e.innerHTML=``,a.appendChild(e),e.querySelector("input").addEventListener("input",saveTimelineBeats),saveTimelineBeats())}function saveTimelineBeats(){var t=Array.from(document.querySelectorAll(".beat-input")).map(t=>t.value);localStorage.setItem("timeline_beats",JSON.stringify(t))}function loadTimelineBeats(){var t=JSON.parse(localStorage.getItem("timeline_beats")||"[]"),e=document.getElementById("timelineBeats");e&&(e.innerHTML=""),0===t.length?["Hook","Exposition","Climax","Resolution"].forEach(t=>addTimelineBeat(t)):t.forEach(t=>addTimelineBeat(t))}function updateMetrics(){let e="";document.querySelectorAll(".script-textarea").forEach(t=>e+=t.value+" ");var t=e.trim().split(/\s+/).filter(t=>00 Link to Reference',document.body.appendChild(a)),t=t.getBoundingClientRect(),a.style.display="block",a.style.top=window.scrollY+t.top-40+"px",a.style.left=window.scrollX+t.left+20+"px",document.getElementById("linkRefBtn").onclick=()=>{document.querySelector('.studio-nav-btn[data-tab="islamic"]')?.click(),hideMappingPopup()}}function hideMappingPopup(){var t=document.getElementById("mappingPopup");t&&(t.style.display="none")}function escapeHtml(t){var e=document.createElement("div");return e.textContent=t,e.innerHTML}document.addEventListener("DOMContentLoaded",initScriptStudio);export{initScriptStudio}; \ No newline at end of file diff --git a/js/search.js b/js/search.js index 93e00d2..f7b44a4 100644 --- a/js/search.js +++ b/js/search.js @@ -1 +1 @@ -let DeepSearch={index:[],init(e){this.index=e.map(e=>({id:e.videoId,title:e.title,transcript:e.transcript||"",metadata:e}))},search(e){if(!e||e.length<2)return[];let i=e.toLowerCase(),n=[];return this.index.forEach(e=>{let t=0,r="";e.title.toLowerCase().includes(i)&&(t+=10);var a=e.transcript.toLowerCase().indexOf(i);-1!==a&&(t+=5,r=this.getSnippet(e.transcript,a,i)),0t.score-e.score)},getSnippet(e,t,r){var a=Math.max(0,t-40),t=Math.min(e.length,t+r.length+40);let i=e.substring(a,t);0$1")}};window.DeepSearch=DeepSearch;export{DeepSearch}; \ No newline at end of file +let DeepSearch={index:[],init(e){this.index=e.map(e=>({id:e.videoId,title:e.title,transcript:e.transcript||"",metadata:e}))},search(e){if(!e||e.length<2)return[];let i=e.toLowerCase(),n=[];return this.index.forEach(e=>{let t=0,r="";e.title.toLowerCase().includes(i)&&(t+=10);var a=e.transcript.toLowerCase().indexOf(i);-1!==a&&(t+=5,r=this.getSnippet(e.transcript,a,i)),0t.score-e.score)},getSnippet(e,t,r){var a=Math.max(0,t-40),t=Math.min(e.length,t+r.length+40);let i=e.substring(a,t);return 0$1")}};window.DeepSearch=DeepSearch;export{DeepSearch}; \ No newline at end of file diff --git a/optimize-report.md b/optimize-report.md index 6f35120..0a822de 100644 --- a/optimize-report.md +++ b/optimize-report.md @@ -48,3 +48,50 @@ - โœ… Minified: ./css/research.css - โœ… Minified: ./css/ai.css - โœ… Minified: ./css/editor.css +## ๐Ÿ–ผ๏ธ Image Optimization Report + +### PNG Images + +### JPEG Images + +### Code Minification +- โœ… Minified: ./github-build.js +- โœ… Minified: ./js/app.test.js +- โœ… Minified: ./js/script.js +- โœ… Minified: ./js/config.js +- โœ… Minified: ./js/repurpose.js +- โœ… Minified: ./js/voice.js +- โœ… Minified: ./js/ai.js +- โœ… Minified: ./js/automation.js +- โœ… Minified: ./js/seo.js +- โœ… Minified: ./js/search.js +- โœ… Minified: ./js/highlight.test.js +- โœ… Minified: ./js/planner.js +- โœ… Minified: ./js/dashboard.js +- โœ… Minified: ./js/islamic.js +- โœ… Minified: ./js/citation.js +- โœ… Minified: ./js/monitoring.js +- โœ… Minified: ./js/research.js +- โœ… Minified: ./js/versioning.js +- โœ… Minified: ./vite.config.js +- โœ… Minified: ./functions/.eslintrc.js +- โœ… Minified: ./sw.js +- โœ… Minified: ./tests/verify_ux.spec.js +- โœ… Minified: ./tests/shortcut.spec.js +- โœ… Minified: ./test.js +- โœ… Minified: ./generate-config.js +- โœ… Minified: ./github-status.js +- โœ… Minified: ./scripts/auto-enhance.js +- โœ… Minified: ./server.js +- โœ… Minified: ./vitest.config.js +- โœ… Minified: ./css/repurpose.css +- โœ… Minified: ./css/seo.css +- โœ… Minified: ./css/research.css +- โœ… Minified: ./css/islamic.css +- โœ… Minified: ./css/dashboard.css +- โœ… Minified: ./css/planner.css +- โœ… Minified: ./css/editor.css +- โœ… Minified: ./css/style.css +- โœ… Minified: ./css/ai.css +- โœ… Minified: ./css/voice.css +- โœ… Minified: ./css/manuscript.css diff --git a/scripts/auto-enhance.js b/scripts/auto-enhance.js index 235e33d..d744948 100644 --- a/scripts/auto-enhance.js +++ b/scripts/auto-enhance.js @@ -1,5 +1,5 @@ #!/usr/bin/env node -import dotenv from"dotenv";import fs from"fs";import path from"path";import{fileURLToPath}from"url";import https from"https";let __filename=fileURLToPath(import.meta.url),__dirname=path.dirname(__filename),GOOGLE_API_KEY=(dotenv.config(),process.env.GOOGLE_API_KEY);async function testGeminiAccess(){try{var e=await(await fetch("https://generativelanguage.googleapis.com/v1beta/models?key="+GOOGLE_API_KEY)).json();if(e.models&&0{await t.goto("http://localhost:5173"),await t.keyboard.press("/");t=await t.evaluate(()=>document.activeElement===document.getElementById("searchInput"));expect(t).toBe(!0)}); \ No newline at end of file +import{test,expect}from"@playwright/test";test("search shortcut / works",async({page:t})=>{await t.goto("http://localhost:5173"),await t.keyboard.press("/"),t=await t.evaluate(()=>document.activeElement===document.getElementById("searchInput")),expect(t).toBe(!0)}); \ No newline at end of file