{"id":262,"date":"2025-09-13T08:19:39","date_gmt":"2025-09-13T08:19:39","guid":{"rendered":"https:\/\/viewri.com\/?page_id=262"},"modified":"2025-12-29T08:53:31","modified_gmt":"2025-12-29T08:53:31","slug":"thumbnail","status":"publish","type":"page","link":"https:\/\/viewri.com\/youtube\/thumbnail\/","title":{"rendered":"YouTube Thumbnail Viewer"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; fullwidth=&#8221;on&#8221; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_fullwidth_code _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]    <style>\r\n        @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');\r\n\r\n        #ytv-widget-wrapper * {\r\n            margin: 0;\r\n            padding: 0;\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        #ytv-widget-wrapper {\r\n            \/* Renamed and scoped CSS Variables *\/\r\n            --ytv-primary-color: #e91e63;\r\n            --ytv-primary-dark: #c2185b;\r\n            --ytv-primary-light: #f06292;\r\n            --ytv-secondary-color: #9c27b0;\r\n            --ytv-accent-color: #ff5722;\r\n            --ytv-success-gradient: linear-gradient(135deg, #e91e63 0%, #c2185b 100%);\r\n            --ytv-purple-gradient: linear-gradient(135deg, #9c27b0 0%, #7b1fa2 100%);\r\n            --ytv-orange-gradient: linear-gradient(135deg, #ff5722 0%, #e64a19 100%);\r\n            --ytv-blue-gradient: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);\r\n            --ytv-glass-bg: rgba(255, 255, 255, 0.1);\r\n            --ytv-glass-border: rgba(255, 255, 255, 0.15);\r\n            --ytv-text-primary: #1a1a1a;\r\n            --ytv-text-secondary: #666666;\r\n            --ytv-text-light: #999999;\r\n            --ytv-surface: rgba(255, 255, 255, 0.95);\r\n            --ytv-surface-hover: rgba(255, 255, 255, 1);\r\n            --ytv-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);\r\n            --ytv-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12);\r\n            --ytv-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);\r\n            --ytv-shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.18);\r\n            --ytv-shadow-2xl: 0 20px 40px rgba(0, 0, 0, 0.25);\r\n\r\n            \/* Scoped Body Styles *\/\r\n            font-family: 'Inter', sans-serif;\r\n            background: linear-gradient(135deg, #8B7ED8 0%, #B794F6 50%, #D6BCFA 100%);\r\n            min-height: 100vh;\r\n            line-height: 1.6;\r\n            position: relative;\r\n            overflow-x: hidden;\r\n        }\r\n\r\n        #ytv-widget-wrapper::before {\r\n            content: '';\r\n            position: fixed;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            background:\r\n                radial-gradient(circle at 20% 30%, rgba(139, 126, 216, 0.3) 0%, transparent 50%),\r\n                radial-gradient(circle at 80% 70%, rgba(183, 148, 246, 0.3) 0%, transparent 50%),\r\n                radial-gradient(circle at 50% 50%, rgba(214, 188, 250, 0.2) 0%, transparent 50%);\r\n            pointer-events: none;\r\n            z-index: -1;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-container {\r\n            max-width: 1400px;\r\n            margin: 0 auto;\r\n            padding: 20px;\r\n            position: relative;\r\n            z-index: 1;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-header {\r\n            text-align: center;\r\n            margin-bottom: 50px;\r\n            padding: 40px 0;\r\n            animation: ytv-fadeInDown 1s ease-out;\r\n        }\r\n\r\n        @keyframes ytv-fadeInDown {\r\n            from {\r\n                opacity: 0;\r\n                transform: translateY(-30px);\r\n            }\r\n\r\n            to {\r\n                opacity: 1;\r\n                transform: translateY(0);\r\n            }\r\n        }\r\n\r\n        @keyframes ytv-fadeInUp {\r\n            from {\r\n                opacity: 0;\r\n                transform: translateY(30px);\r\n            }\r\n\r\n            to {\r\n                opacity: 1;\r\n                transform: translateY(0);\r\n            }\r\n        }\r\n\r\n        @keyframes ytv-slideInLeft {\r\n            from {\r\n                opacity: 0;\r\n                transform: translateX(-50px);\r\n            }\r\n\r\n            to {\r\n                opacity: 1;\r\n                transform: translateX(0);\r\n            }\r\n        }\r\n\r\n        @keyframes ytv-pulse {\r\n\r\n            0%,\r\n            100% {\r\n                transform: scale(1);\r\n            }\r\n\r\n            50% {\r\n                transform: scale(1.05);\r\n            }\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-logo {\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            gap: 20px;\r\n            margin-bottom: 25px;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-logo-icon {\r\n            width: 80px;\r\n            height: 80px;\r\n            background: var(--ytv-success-gradient);\r\n            border-radius: 20px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            color: white;\r\n            font-size: 36px;\r\n            font-weight: 900;\r\n            box-shadow: var(--ytv-shadow-2xl);\r\n            position: relative;\r\n            overflow: hidden;\r\n            animation: ytv-pulse 2s ease-in-out infinite;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-logo-icon::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: -50%;\r\n            left: -50%;\r\n            width: 200%;\r\n            height: 200%;\r\n            background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.4), transparent);\r\n            transform: rotate(45deg);\r\n            animation: ytv-shine 3s infinite;\r\n        }\r\n\r\n        @keyframes ytv-shine {\r\n            0% {\r\n                transform: translateX(-100%) translateY(-100%) rotate(45deg);\r\n            }\r\n\r\n            50% {\r\n                transform: translateX(100%) translateY(100%) rotate(45deg);\r\n            }\r\n\r\n            100% {\r\n                transform: translateX(-100%) translateY(-100%) rotate(45deg);\r\n            }\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-logo-text-container {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 15px;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-youtube-logo-icon {\r\n            width: 50px;\r\n            height: 50px;\r\n            background: #ff0000;\r\n            border-radius: 12px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            color: white;\r\n            font-size: 24px;\r\n            animation: ytv-youtubeFloat 3s ease-in-out infinite;\r\n            box-shadow: 0 4px 15px rgba(255, 0, 0, 0.3);\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-logo-text {\r\n            font-size: 48px;\r\n            font-weight: 900;\r\n            background: linear-gradient(135deg, #ffffff, #f0f0f0, #ffffff);\r\n            -webkit-background-clip: text;\r\n            -webkit-text-fill-color: transparent;\r\n            background-clip: text;\r\n            text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);\r\n            letter-spacing: -1px;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-camera-logo-icon {\r\n            width: 50px;\r\n            height: 50px;\r\n            background: var(--ytv-primary-color);\r\n            border-radius: 50%;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            color: white;\r\n            font-size: 24px;\r\n            animation: ytv-cameraBounce 2s ease-in-out infinite;\r\n            box-shadow: 0 4px 15px rgba(233, 30, 99, 0.3);\r\n        }\r\n\r\n        @keyframes ytv-youtubeFloat {\r\n\r\n            0%,\r\n            100% {\r\n                transform: translateY(0px) scale(1);\r\n            }\r\n\r\n            50% {\r\n                transform: translateY(-8px) scale(1.05);\r\n            }\r\n        }\r\n\r\n        @keyframes ytv-cameraBounce {\r\n\r\n            0%,\r\n            100% {\r\n                transform: translateY(0px) rotate(0deg);\r\n            }\r\n\r\n            25% {\r\n                transform: translateY(-5px) rotate(-5deg);\r\n            }\r\n\r\n            75% {\r\n                transform: translateY(-5px) rotate(5deg);\r\n            }\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-subtitle {\r\n            color: rgba(255, 255, 255, 0.95);\r\n            font-size: 20px;\r\n            font-weight: 500;\r\n            margin-bottom: 30px;\r\n            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-features-bar {\r\n            display: flex;\r\n            justify-content: center;\r\n            gap: 25px;\r\n            margin-bottom: 40px;\r\n            flex-wrap: wrap;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-feature-item {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 12px;\r\n            color: rgba(255, 255, 255, 0.95);\r\n            font-size: 15px;\r\n            font-weight: 600;\r\n            background: var(--ytv-glass-bg);\r\n            backdrop-filter: blur(20px);\r\n            padding: 14px 22px;\r\n            border-radius: 30px;\r\n            border: 1px solid var(--ytv-glass-border);\r\n            transition: all 0.3s ease;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-feature-item:hover {\r\n            transform: translateY(-3px);\r\n            box-shadow: var(--ytv-shadow-lg);\r\n            background: rgba(255, 255, 255, 0.25);\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-feature-icon {\r\n            width: 26px;\r\n            height: 26px;\r\n            background: var(--ytv-success-gradient);\r\n            border-radius: 50%;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            font-size: 12px;\r\n            color: white;\r\n            font-weight: 700;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-input-section {\r\n            background: var(--ytv-glass-bg);\r\n            backdrop-filter: blur(30px);\r\n            border: 1px solid var(--ytv-glass-border);\r\n            padding: 40px;\r\n            border-radius: 30px;\r\n            box-shadow: var(--ytv-shadow-2xl);\r\n            margin-bottom: 40px;\r\n            animation: ytv-fadeInUp 1s ease-out 0.2s both;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-input-group {\r\n            display: flex;\r\n            gap: 20px;\r\n            margin-bottom: 25px;\r\n            position: relative;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-url-input {\r\n            flex: 1;\r\n            padding: 22px 28px;\r\n            border: 2px solid rgba(255, 255, 255, 0.3);\r\n            border-radius: 20px;\r\n            font-size: 16px;\r\n            font-weight: 500;\r\n            background: rgba(255, 255, 255, 0.95);\r\n            backdrop-filter: blur(10px);\r\n            transition: all 0.3s ease;\r\n            outline: none;\r\n            color: var(--ytv-text-primary);\r\n            box-shadow: var(--ytv-shadow-md);\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-url-input:focus {\r\n            border-color: var(--ytv-primary-color);\r\n            box-shadow: 0 0 0 4px rgba(233, 30, 99, 0.2), var(--ytv-shadow-lg);\r\n            transform: translateY(-2px);\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-url-input.ytv-error {\r\n            border-color: #f44336;\r\n            box-shadow: 0 0 0 4px rgba(244, 67, 54, 0.2);\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-url-input::placeholder {\r\n            color: rgba(102, 102, 102, 0.6);\r\n            font-weight: 500;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-fetch-btn {\r\n            padding: 22px 45px;\r\n            background: var(--ytv-success-gradient);\r\n            color: white;\r\n            border: none;\r\n            border-radius: 20px;\r\n            font-size: 16px;\r\n            font-weight: 700;\r\n            cursor: pointer;\r\n            transition: all 0.3s ease;\r\n            min-width: 200px;\r\n            position: relative;\r\n            overflow: hidden;\r\n            box-shadow: var(--ytv-shadow-lg);\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-fetch-btn:hover:not(:disabled) {\r\n            transform: translateY(-3px);\r\n            box-shadow: var(--ytv-shadow-2xl);\r\n            background: linear-gradient(135deg, #f06292, #e91e63);\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-fetch-btn:disabled {\r\n            opacity: 0.7;\r\n            cursor: not-allowed;\r\n            transform: none;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-fetch-btn::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            left: -100%;\r\n            width: 100%;\r\n            height: 100%;\r\n            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);\r\n            transition: left 0.5s;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-fetch-btn:hover::before {\r\n            left: 100%;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-loading {\r\n            display: none;\r\n            text-align: center;\r\n            padding: 30px;\r\n            color: rgba(255, 255, 255, 0.9);\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-spinner {\r\n            width: 50px;\r\n            height: 50px;\r\n            border: 4px solid rgba(255, 255, 255, 0.3);\r\n            border-top: 4px solid var(--ytv-primary-color);\r\n            border-radius: 50%;\r\n            animation: ytv-spin 1s linear infinite;\r\n            margin: 0 auto 20px;\r\n        }\r\n\r\n        @keyframes ytv-spin {\r\n            0% {\r\n                transform: rotate(0deg);\r\n            }\r\n\r\n            100% {\r\n                transform: rotate(360deg);\r\n            }\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-thumbnails-preview-section {\r\n            display: none;\r\n            background: var(--ytv-glass-bg);\r\n            backdrop-filter: blur(30px);\r\n            border: 1px solid var(--ytv-glass-border);\r\n            padding: 40px;\r\n            border-radius: 30px;\r\n            box-shadow: var(--ytv-shadow-2xl);\r\n            margin-bottom: 40px;\r\n            animation: ytv-slideInLeft 0.8s ease-out;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-video-info-header {\r\n            background: rgba(255, 255, 255, 0.1);\r\n            backdrop-filter: blur(15px);\r\n            border-radius: 25px;\r\n            padding: 30px;\r\n            margin-bottom: 40px;\r\n            border: 1px solid rgba(255, 255, 255, 0.15);\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-video-preview-card {\r\n            display: grid;\r\n            grid-template-columns: auto 1fr auto;\r\n            gap: 25px;\r\n            align-items: center;\r\n            margin-bottom: 25px;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-video-thumbnail-preview {\r\n            width: 120px;\r\n            height: 90px;\r\n            border-radius: 15px;\r\n            object-fit: cover;\r\n            box-shadow: var(--ytv-shadow-lg);\r\n            transition: transform 0.3s ease;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-video-thumbnail-preview:hover {\r\n            transform: scale(1.05);\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-video-details {\r\n            flex: 1;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-video-title {\r\n            font-size: 24px;\r\n            font-weight: 700;\r\n            margin-bottom: 8px;\r\n            line-height: 1.3;\r\n            color: white;\r\n            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-video-channel {\r\n            font-size: 16px;\r\n            color: rgba(255, 255, 255, 0.8);\r\n            font-weight: 500;\r\n            margin-bottom: 5px;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-video-stats {\r\n            display: flex;\r\n            gap: 20px;\r\n            align-items: center;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-stat-item {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 8px;\r\n            color: rgba(255, 255, 255, 0.9);\r\n            font-size: 14px;\r\n            font-weight: 600;\r\n            background: rgba(255, 255, 255, 0.1);\r\n            padding: 8px 12px;\r\n            border-radius: 20px;\r\n            backdrop-filter: blur(10px);\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-stat-icon {\r\n            width: 20px;\r\n            height: 20px;\r\n            background: var(--ytv-orange-gradient);\r\n            border-radius: 6px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            font-size: 10px;\r\n            color: white;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-thumbnails-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\r\n            gap: 25px;\r\n            margin-bottom: 30px;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-thumbnail-card {\r\n            background: var(--ytv-surface);\r\n            border: 2px solid rgba(255, 255, 255, 0.2);\r\n            border-radius: 25px;\r\n            transition: all 0.3s ease;\r\n            position: relative;\r\n            overflow: hidden;\r\n            backdrop-filter: blur(20px);\r\n            box-shadow: var(--ytv-shadow-md);\r\n            padding: 20px;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-thumbnail-card::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            right: 0;\r\n            height: 4px;\r\n            background: var(--ytv-success-gradient);\r\n            transform: scaleX(0);\r\n            transition: transform 0.3s ease;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-thumbnail-card:hover::before {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-thumbnail-card:hover {\r\n            border-color: var(--ytv-primary-color);\r\n            transform: translateY(-8px);\r\n            box-shadow: var(--ytv-shadow-2xl);\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-thumbnail-header {\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n            margin-bottom: 15px;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-thumbnail-quality-badge {\r\n            background: var(--ytv-success-gradient);\r\n            color: white;\r\n            padding: 6px 12px;\r\n            border-radius: 20px;\r\n            font-size: 12px;\r\n            font-weight: 700;\r\n            text-transform: uppercase;\r\n            letter-spacing: 0.5px;\r\n            box-shadow: var(--ytv-shadow-sm);\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-thumbnail-resolution {\r\n            color: var(--ytv-text-secondary);\r\n            font-size: 14px;\r\n            font-weight: 600;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-thumbnail-image-container {\r\n            position: relative;\r\n            border-radius: 15px;\r\n            overflow: hidden;\r\n            margin-bottom: 20px;\r\n            box-shadow: var(--ytv-shadow-md);\r\n            transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-thumbnail-card:hover .ytv-thumbnail-image-container {\r\n            transform: scale(1.02);\r\n            box-shadow: var(--ytv-shadow-lg);\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-thumbnail-image {\r\n            width: 100%;\r\n            height: auto;\r\n            display: block;\r\n            border-radius: 15px;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-thumbnail-overlay {\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            background: linear-gradient(135deg, rgba(233, 30, 99, 0.8), rgba(156, 39, 176, 0.8));\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            opacity: 0;\r\n            transition: opacity 0.3s ease;\r\n            border-radius: 15px;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-thumbnail-card:hover .ytv-thumbnail-overlay {\r\n            opacity: 1;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-overlay-content {\r\n            text-align: center;\r\n            color: white;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-overlay-title {\r\n            font-size: 18px;\r\n            font-weight: 700;\r\n            margin-bottom: 5px;\r\n            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-overlay-subtitle {\r\n            font-size: 14px;\r\n            font-weight: 500;\r\n            opacity: 0.9;\r\n            text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-thumbnail-info {\r\n            display: grid;\r\n            grid-template-columns: 1fr 1fr;\r\n            gap: 15px;\r\n            margin-bottom: 20px;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-info-item {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 8px;\r\n            color: var(--ytv-text-secondary);\r\n            font-size: 13px;\r\n            font-weight: 600;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-info-icon {\r\n            width: 16px;\r\n            height: 16px;\r\n            background: var(--ytv-purple-gradient);\r\n            border-radius: 4px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            font-size: 8px;\r\n            color: white;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-thumbnail-actions {\r\n            text-align: center;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-thumbnail-download-btn {\r\n            width: 100%;\r\n            padding: 15px 25px;\r\n            background: var(--ytv-success-gradient);\r\n            color: white;\r\n            border: none;\r\n            border-radius: 15px;\r\n            font-size: 16px;\r\n            font-weight: 700;\r\n            cursor: pointer;\r\n            transition: all 0.3s ease;\r\n            position: relative;\r\n            overflow: hidden;\r\n            box-shadow: var(--ytv-shadow-md);\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            gap: 10px;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-thumbnail-download-btn:hover {\r\n            transform: translateY(-2px);\r\n            box-shadow: var(--ytv-shadow-xl);\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-thumbnail-download-btn::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            left: -100%;\r\n            width: 100%;\r\n            height: 100%;\r\n            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);\r\n            transition: left 0.5s;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-thumbnail-download-btn:hover::before {\r\n            left: 100%;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-download-icon {\r\n            font-size: 18px;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-error-message {\r\n            background: linear-gradient(135deg, #f44336, #d32f2f);\r\n            color: white;\r\n            padding: 20px;\r\n            border-radius: 18px;\r\n            margin-top: 20px;\r\n            display: none;\r\n            font-weight: 600;\r\n            box-shadow: var(--ytv-shadow-lg);\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-notification {\r\n            position: fixed;\r\n            top: 30px;\r\n            right: 30px;\r\n            background: var(--ytv-success-gradient);\r\n            color: white;\r\n            padding: 20px 25px;\r\n            border-radius: 18px;\r\n            font-weight: 600;\r\n            z-index: 1001;\r\n            transform: translateX(120%);\r\n            transition: transform 0.3s ease;\r\n            box-shadow: var(--ytv-shadow-xl);\r\n            backdrop-filter: blur(20px);\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-notification.ytv-show {\r\n            transform: translateX(0);\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-preview-modal {\r\n            display: none;\r\n            position: fixed;\r\n            z-index: 1000;\r\n            left: 0;\r\n            top: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            background-color: rgba(0, 0, 0, 0.8);\r\n            backdrop-filter: blur(10px);\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-preview-modal-content {\r\n            position: relative;\r\n            margin: 5% auto;\r\n            padding: 0;\r\n            width: 90%;\r\n            max-width: 600px;\r\n            background: var(--ytv-surface);\r\n            border-radius: 20px;\r\n            box-shadow: var(--ytv-shadow-2xl);\r\n            overflow: hidden;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-preview-modal-header {\r\n            background: var(--ytv-success-gradient);\r\n            color: white;\r\n            padding: 20px;\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-preview-modal-title {\r\n            font-size: 20px;\r\n            font-weight: 700;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-preview-modal-close {\r\n            background: rgba(255, 255, 255, 0.2);\r\n            border: none;\r\n            color: white;\r\n            font-size: 20px;\r\n            cursor: pointer;\r\n            width: 30px;\r\n            height: 30px;\r\n            border-radius: 50%;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-preview-modal-body {\r\n            padding: 20px;\r\n            text-align: center;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-preview-image {\r\n            max-width: 100%;\r\n            max-height: 400px;\r\n            border-radius: 10px;\r\n            box-shadow: var(--ytv-shadow-lg);\r\n            margin-bottom: 20px;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-preview-info {\r\n            display: grid;\r\n            grid-template-columns: repeat(2, 1fr);\r\n            gap: 15px;\r\n            margin-bottom: 20px;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-preview-info-item {\r\n            background: rgba(255, 255, 255, 0.1);\r\n            padding: 10px;\r\n            border-radius: 8px;\r\n            text-align: center;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-preview-info-label {\r\n            font-size: 12px;\r\n            color: var(--ytv-text-secondary);\r\n            font-weight: 600;\r\n            margin-bottom: 5px;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-preview-info-value {\r\n            font-size: 14px;\r\n            color: var(--ytv-text-primary);\r\n            font-weight: 700;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-preview-download-btn {\r\n            padding: 12px 24px;\r\n            background: var(--ytv-success-gradient);\r\n            color: white;\r\n            border: none;\r\n            border-radius: 10px;\r\n            font-size: 14px;\r\n            font-weight: 700;\r\n            cursor: pointer;\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 8px;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-thumbnail-preview-btn {\r\n            background: var(--ytv-purple-gradient);\r\n            color: white;\r\n            border: none;\r\n            border-radius: 10px;\r\n            font-size: 14px;\r\n            font-weight: 700;\r\n            cursor: pointer;\r\n            padding: 8px 16px;\r\n            margin-bottom: 8px;\r\n            width: 100%;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            gap: 6px;\r\n        }\r\n\r\n        \/* Enhanced Responsive Design *\/\r\n        @media (max-width: 1200px) {\r\n            #ytv-widget-wrapper .ytv-container {\r\n                max-width: 100%;\r\n                padding: 15px;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-thumbnails-grid {\r\n                grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\r\n                gap: 20px;\r\n            }\r\n\t\t\t\t\t#ytv-widget-wrapper .ytv-input-group {\r\n\tdisplay: flex;\r\n\tgap: 20px;\r\n\tmargin-bottom: 25px;\r\n\tposition: relative;\r\n\tflex-direction: column;\r\n}\r\n\t\t\t\t\t#ytv-widget-wrapper .ytv-video-preview-card {\r\n\tdisplay: flex;\r\n\tgap: 25px;\r\n\talign-items: center;\r\n\tmargin-bottom: 25px;\r\n\tflex-direction: column;\r\n}\r\n\t\t\t\t\t#ytv-widget-wrapper .ytv-logo-text-container {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tgap: 15px;\r\n\tflex-direction: column;\r\n}\r\n\t\t\t\t\t#ytv-widget-wrapper .ytv-logo {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n\tgap: 20px;\r\n\tmargin-bottom: 25px;\r\n\tflex-direction: column;\r\n}\r\n        }\r\n\r\n        @media (max-width: 1024px) {\r\n            #ytv-widget-wrapper .ytv-logo-text {\r\n                font-size: 40px;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-features-bar {\r\n                gap: 20px;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-feature-item {\r\n                font-size: 14px;\r\n                padding: 12px 18px;\r\n            }\r\n\t\t\t\t\t#ytv-widget-wrapper .ytv-input-group {\r\n\tdisplay: flex;\r\n\tgap: 20px;\r\n\tmargin-bottom: 25px;\r\n\tposition: relative;\r\n\tflex-direction: column;\r\n}\r\n\t\t\t\t\t#ytv-widget-wrapper .ytv-video-preview-card {\r\n\tdisplay: flex;\r\n\tgap: 25px;\r\n\talign-items: center;\r\n\tmargin-bottom: 25px;\r\n\tflex-direction: column;\r\n}\r\n\t\t\t\t\t#ytv-widget-wrapper .ytv-logo-text-container {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tgap: 15px;\r\n\tflex-direction: column;\r\n}\r\n\t\t\t\t\t#ytv-widget-wrapper .ytv-logo {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n\tgap: 20px;\r\n\tmargin-bottom: 25px;\r\n\tflex-direction: column;\r\n}\r\n\t\t\t\r\n        }\r\n\r\n        @media (max-width: 768px) {\r\n            #ytv-widget-wrapper .ytv-container {\r\n                padding: 10px;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-header {\r\n                margin-bottom: 30px;\r\n                padding: 20px 0;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-logo {\r\n                flex-direction: column;\r\n                gap: 15px;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-logo-text-container {\r\n                flex-direction: column;\r\n                gap: 10px;\r\n                align-items: center;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-youtube-logo-icon,\r\n            #ytv-widget-wrapper .ytv-camera-logo-icon {\r\n                width: 40px;\r\n                height: 40px;\r\n                font-size: 20px;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-logo-icon {\r\n                width: 60px;\r\n                height: 60px;\r\n                font-size: 28px;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-logo-text {\r\n                font-size: 32px;\r\n                text-align: center;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-subtitle {\r\n                font-size: 18px;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-features-bar {\r\n                gap: 15px;\r\n                justify-content: center;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-feature-item {\r\n                font-size: 13px;\r\n                padding: 10px 16px;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-input-section,\r\n            #ytv-widget-wrapper .ytv-thumbnails-preview-section {\r\n                padding: 25px;\r\n                margin-bottom: 25px;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-input-group {\r\n                flex-direction: column;\r\n                gap: 15px;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-url-input {\r\n                padding: 18px 22px;\r\n                font-size: 15px;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-fetch-btn {\r\n                padding: 18px 35px;\r\n                min-width: 100%;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-video-title {\r\n                font-size: 22px;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-thumbnails-grid {\r\n                grid-template-columns: 1fr;\r\n                gap: 20px;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-thumbnail-card {\r\n                padding: 20px;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-video-preview-card {\r\n                grid-template-columns: 1fr;\r\n                text-align: center;\r\n                gap: 15px;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-video-stats {\r\n                justify-content: center;\r\n            }\r\n\t\t\t\t\t#ytv-widget-wrapper .ytv-video-stats {\r\n\tdisplay: flex;\r\n\tgap: 20px;\r\n\talign-items: center;\r\n\tflex-direction: column;\r\n}\r\n\t\t\t\t\t#ytv-widget-wrapper .ytv-stat-item {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tgap: 8px;\r\n\tcolor: rgba(255, 255, 255, 0.9);\r\n\tfont-size: 14px;\r\n\tfont-weight: 600;\r\n\tbackground: rgba(255, 255, 255, 0.1);\r\n\tpadding: 8px 12px;\r\n\tborder-radius: 20px;\r\n\tbackdrop-filter: blur(10px);\r\n\tflex-direction: column;\r\n}\r\n\t\t\t\t\t#ytv-widget-wrapper .ytv-input-group {\r\n\tdisplay: flex;\r\n\tgap: 20px;\r\n\tmargin-bottom: 25px;\r\n\tposition: relative;\r\n\tflex-direction: column;\r\n}\r\n\t\t\t\t\t\r\n\t\t\t\t\t#ytv-widget-wrapper .ytv-video-preview-card {\r\n\tdisplay: flex;\r\n\tgap: 25px;\r\n\talign-items: center;\r\n\tmargin-bottom: 25px;\r\n\tflex-direction: column;\r\n}\r\n        }\r\n\r\n        @media (max-width: 480px) {\r\n            #ytv-widget-wrapper .ytv-container {\r\n                padding: 8px;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-logo-text {\r\n                font-size: 28px;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-subtitle {\r\n                font-size: 16px;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-features-bar {\r\n                flex-direction: column;\r\n                align-items: center;\r\n                gap: 10px;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-feature-item {\r\n                width: 100%;\r\n                max-width: 300px;\r\n                justify-content: center;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-input-section,\r\n            #ytv-widget-wrapper .ytv-thumbnails-preview-section {\r\n                padding: 20px;\r\n                border-radius: 25px;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-url-input {\r\n                padding: 16px 20px;\r\n                font-size: 14px;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-fetch-btn {\r\n                padding: 16px 30px;\r\n                font-size: 15px;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-video-title {\r\n                font-size: 20px;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-thumbnail-card {\r\n                padding: 15px;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-notification {\r\n                top: 20px;\r\n                right: 20px;\r\n                left: 20px;\r\n                padding: 15px 20px;\r\n                font-size: 14px;\r\n            }\r\n\t\t\t\t\t#ytv-widget-wrapper .ytv-video-stats {\r\n\tdisplay: flex;\r\n\tgap: 20px;\r\n\talign-items: center;\r\n\tflex-direction: column;\r\n}\r\n\t\t\t\t\t#ytv-widget-wrapper .ytv-stat-item {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tgap: 8px;\r\n\tcolor: rgba(255, 255, 255, 0.9);\r\n\tfont-size: 14px;\r\n\tfont-weight: 600;\r\n\tbackground: rgba(255, 255, 255, 0.1);\r\n\tpadding: 8px 12px;\r\n\tborder-radius: 20px;\r\n\tbackdrop-filter: blur(10px);\r\n\tflex-direction: column;\r\n}\r\n        }\r\n    <\/style>\r\n\r\n    <div id=\"ytv-widget-wrapper\">\r\n        <div class=\"ytv-container\">\r\n            <div class=\"ytv-header\">\r\n                <div class=\"ytv-logo\">\r\n                    <div class=\"ytv-logo-icon\">\ud83d\udcf8<\/div>\r\n                    <div class=\"ytv-logo-text-container\">\r\n                        <div class=\"ytv-youtube-logo-icon\">\u25b6<\/div>\r\n                        <div class=\"ytv-logo-text\">YouTube Thumbnail Viewer<\/div>\r\n                        <div class=\"ytv-camera-logo-icon\">\ud83d\udcf8<\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"ytv-subtitle\">View and Download high-quality thumbnails from YouTube videos instantly<\/div>\r\n\r\n                <div class=\"ytv-features-bar\">\r\n                    <div class=\"ytv-feature-item\">\r\n                        <div class=\"ytv-feature-icon\">\u2713<\/div>\r\n                        <span>All Resolutions<\/span>\r\n                    <\/div>\r\n                    <div class=\"ytv-feature-item\">\r\n                        <div class=\"ytv-feature-icon\">\u2713<\/div>\r\n                        <span>Instant Download<\/span>\r\n                    <\/div>\r\n                    <div class=\"ytv-feature-item\">\r\n                        <div class=\"ytv-feature-icon\">\u2713<\/div>\r\n                        <span>High Quality<\/span>\r\n                    <\/div>\r\n                    <div class=\"ytv-feature-item\">\r\n                        <div class=\"ytv-feature-icon\">\u2713<\/div>\r\n                        <span>No Watermark<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"ytv-input-section\">\r\n                <div class=\"ytv-input-group\">\r\n                    <input type=\"text\" class=\"ytv-url-input\"\r\n                        placeholder=\"https:\/\/www.youtube.com\/watch?v=dQw4w9WgXcQ (Paste YouTube URL here)\"\r\n                        id=\"ytv-urlInput\">\r\n                    <button class=\"ytv-fetch-btn\" onclick=\"ytv_fetchThumbnails()\" id=\"ytv-fetchBtn\">\r\n                        <span id=\"ytv-btnText\">\ud83d\udcf8 Get Thumbnails<\/span>\r\n                    <\/button>\r\n                <\/div>\r\n\r\n                <div class=\"ytv-loading\" id=\"ytv-loading\">\r\n                    <div class=\"ytv-spinner\"><\/div>\r\n                    <div>\ud83d\uddbc\ufe0f Fetching thumbnails...<\/div>\r\n                <\/div>\r\n\r\n                <div class=\"ytv-error-message\" id=\"ytv-errorMessage\"><\/div>\r\n            <\/div>\r\n\r\n            <div class=\"ytv-thumbnails-preview-section\" id=\"ytv-thumbnailsPreview\">\r\n                <div class=\"ytv-video-info-header\">\r\n                    <div class=\"ytv-video-preview-card\">\r\n                        <img decoding=\"async\" src=\"\/placeholder.svg\" alt=\"Video Thumbnail\" class=\"ytv-video-thumbnail-preview\"\r\n                            id=\"ytv-mainThumbnail\">\r\n                        <div class=\"ytv-video-details\">\r\n                            <h2 class=\"ytv-video-title\" id=\"ytv-videoTitle\">Video Title<\/h2>\r\n                            <div class=\"ytv-video-channel\" id=\"ytv-videoChannel\">Channel Name<\/div>\r\n                        <\/div>\r\n                        <div class=\"ytv-video-stats\">\r\n                            <div class=\"ytv-stat-item\">\r\n                                <div class=\"ytv-stat-icon\">\ud83d\udcf8<\/div>\r\n                                <span id=\"ytv-thumbnailCount\">5 Thumbnails<\/span>\r\n                            <\/div>\r\n                            <div class=\"ytv-stat-item\">\r\n                                <div class=\"ytv-stat-icon\">\u26a1<\/div>\r\n                                <span>Instant Download<\/span>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"ytv-thumbnails-grid\" id=\"ytv-thumbnailsGrid\">\r\n                    <!-- Thumbnails will be populated here -->\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"ytv-preview-modal\" id=\"ytv-previewModal\">\r\n            <div class=\"ytv-preview-modal-content\">\r\n                <div class=\"ytv-preview-modal-header\">\r\n                    <div class=\"ytv-preview-modal-title\">Thumbnail Preview<\/div>\r\n                    <button class=\"ytv-preview-modal-close\" onclick=\"ytv_closePreviewModal()\">\u00d7<\/button>\r\n                <\/div>\r\n                <div class=\"ytv-preview-modal-body\">\r\n                    <img decoding=\"async\" src=\"\" alt=\"Thumbnail Preview\" class=\"ytv-preview-image\" id=\"ytv-previewImage\">\r\n                    <div class=\"ytv-preview-info\">\r\n                        <div class=\"ytv-preview-info-item\">\r\n                            <div class=\"ytv-preview-info-label\">Quality<\/div>\r\n                            <div class=\"ytv-preview-info-value\" id=\"ytv-previewQuality\">High Quality<\/div>\r\n                        <\/div>\r\n                        <div class=\"ytv-preview-info-item\">\r\n                            <div class=\"ytv-preview-info-label\">Resolution<\/div>\r\n                            <div class=\"ytv-preview-info-value\" id=\"ytv-previewResolution\">480\u00d7360<\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <button class=\"ytv-preview-download-btn\" onclick=\"ytv_downloadFromPreview()\">\r\n                        <span>\ud83d\udce5<\/span>\r\n                        <span>Download<\/span>\r\n                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n    <script src=\"https:\/\/tools.xrespond.com\/api\/rate-limit-handler.js\"><\/script>\r\n<script src=\"https:\/\/tools.xrespond.com\/api\/js\/client-ip-detector.js\"><\/script>\r\n \r\n    <script>\r\n        let ytv_currentVideoData = null;\r\n        let ytv_currentPreviewData = null;\r\n\r\n        \/\/ Prefixing all functions to avoid global scope conflicts\r\n        function ytv_isValidYouTubeURL(url) {\r\n            const patterns = [\r\n                \/^https:\\\/\\\/(?:www\\.)?youtube\\.com\\\/watch\\?v=[\\w-]+\/,\r\n                \/^https:\\\/\\\/(?:www\\.)?youtube\\.com\\\/embed\\\/[\\w-]+\/,\r\n                \/^https:\\\/\\\/(?:www\\.)?youtube\\.com\\\/v\\\/[\\w-]+\/,\r\n                \/^https:\\\/\\\/youtu\\.be\\\/[\\w-]+\/\r\n            ];\r\n            return patterns.some(pattern => pattern.test(url));\r\n        }\r\n\r\n        function ytv_extractVideoId(url) {\r\n            const patterns = [\r\n                \/youtube\\.com\\\/watch\\?v=([^&\\n?#]+)\/,\r\n                \/youtube\\.com\\\/embed\\\/([^&\\n?#]+)\/,\r\n                \/youtube\\.com\\\/v\\\/([^&\\n?#]+)\/,\r\n                \/youtu\\.be\\\/([^&\\n?#]+)\/\r\n            ];\r\n\r\n            for (const pattern of patterns) {\r\n                const match = url.match(pattern);\r\n                if (match) return match[1];\r\n            }\r\n            return null;\r\n        }\r\n\r\n        function ytv_showError(message) {\r\n            const errorDiv = document.getElementById('ytv-errorMessage');\r\n            const urlInput = document.getElementById('ytv-urlInput');\r\n\r\n            errorDiv.textContent = message;\r\n            errorDiv.style.display = 'block';\r\n            urlInput.classList.add('ytv-error');\r\n\r\n            setTimeout(() => {\r\n                errorDiv.style.display = 'none';\r\n                urlInput.classList.remove('ytv-error');\r\n            }, 5000);\r\n        }\r\n\r\n        function ytv_hideError() {\r\n            const errorDiv = document.getElementById('ytv-errorMessage');\r\n            const urlInput = document.getElementById('ytv-urlInput');\r\n\r\n            errorDiv.style.display = 'none';\r\n            urlInput.classList.remove('ytv-error');\r\n        }\r\n\r\n        function ytv_showLoading() {\r\n            document.getElementById('ytv-loading').style.display = 'block';\r\n            document.getElementById('ytv-fetchBtn').disabled = true;\r\n            document.getElementById('ytv-btnText').textContent = '\u23f3 Processing...';\r\n        }\r\n\r\n        function ytv_hideLoading() {\r\n            document.getElementById('ytv-loading').style.display = 'none';\r\n            document.getElementById('ytv-fetchBtn').disabled = false;\r\n            document.getElementById('ytv-btnText').textContent = '\ud83d\udcf8 Get Thumbnails';\r\n        }\r\n\r\n        function ytv_showNotification(message) {\r\n            const wrapper = document.getElementById('ytv-widget-wrapper');\r\n            const notification = document.createElement('div');\r\n            notification.className = 'ytv-notification';\r\n            notification.textContent = message;\r\n            wrapper.appendChild(notification);\r\n\r\n            setTimeout(() => notification.classList.add('ytv-show'), 100);\r\n            setTimeout(() => {\r\n                notification.classList.remove('ytv-show');\r\n                setTimeout(() => wrapper.removeChild(notification), 300);\r\n            }, 3000);\r\n        }\r\n\r\n        function ytv_createThumbnailCard(thumbnail) {\r\n            return `\r\n                <div class=\"ytv-thumbnail-card\">\r\n                    <div class=\"ytv-thumbnail-header\">\r\n                        <div class=\"ytv-thumbnail-quality-badge\">${thumbnail.quality}<\/div>\r\n                        <div class=\"ytv-thumbnail-resolution\">${thumbnail.resolution}<\/div>\r\n                    <\/div>\r\n                    <div class=\"ytv-thumbnail-image-container\">\r\n                        <img decoding=\"async\" src=\"${thumbnail.url}\" alt=\"${thumbnail.quality} Thumbnail\" class=\"ytv-thumbnail-image\">\r\n                        <div class=\"ytv-thumbnail-overlay\">\r\n                            <div class=\"ytv-overlay-content\">\r\n                                <div class=\"ytv-overlay-title\">${thumbnail.quality}<\/div>\r\n                                <div class=\"ytv-overlay-subtitle\">${thumbnail.resolution}<\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"ytv-thumbnail-info\">\r\n                        <div class=\"ytv-info-item\"><div class=\"ytv-info-icon\">\ud83d\udcd0<\/div><span>${thumbnail.resolution}<\/span><\/div>\r\n                        <div class=\"ytv-info-item\"><div class=\"ytv-info-icon\">\ud83d\udcc1<\/div><span>JPG<\/span><\/div>\r\n                        <div class=\"ytv-info-item\"><div class=\"ytv-info-icon\">\u26a1<\/div><span>Instant<\/span><\/div>\r\n                        <div class=\"ytv-info-item\"><div class=\"ytv-info-icon\">\ud83c\udfaf<\/div><span>HD Quality<\/span><\/div>\r\n                    <\/div>\r\n                    <div class=\"ytv-thumbnail-actions\">\r\n                        <button class=\"ytv-thumbnail-preview-btn\" onclick=\"ytv_previewThumbnail('${thumbnail.url}', '${thumbnail.quality}', '${thumbnail.resolution}', '${thumbnail.filename}')\">\r\n                            <span>\ud83d\udc41\ufe0f<\/span><span>Preview<\/span>\r\n                        <\/button>\r\n                        <button class=\"ytv-thumbnail-download-btn\" onclick=\"ytv_downloadThumbnail('${thumbnail.url}', '${thumbnail.filename}', '${thumbnail.quality}')\">\r\n                            <span class=\"ytv-download-icon\">\ud83d\udce5<\/span><span>Download ${thumbnail.quality}<\/span>\r\n                        <\/button>\r\n                    <\/div>\r\n                <\/div>`;\r\n        }\r\n\r\n        async function ytv_downloadThumbnail(url, filename, quality) {\r\n            try {\r\n                ytv_showNotification(`\u23f3 Downloading ${quality} thumbnail...`);\r\n                const response = await fetch(url);\r\n                if (!response.ok) throw new Error('Failed to fetch image');\r\n                const blob = await response.blob();\r\n                const downloadUrl = URL.createObjectURL(blob);\r\n                const a = document.createElement('a');\r\n                a.href = downloadUrl;\r\n                a.download = filename;\r\n                document.body.appendChild(a);\r\n                a.click();\r\n                document.body.removeChild(a);\r\n                setTimeout(() => URL.revokeObjectURL(downloadUrl), 100);\r\n                ytv_showNotification(`\u2705 ${quality} thumbnail downloaded!`);\r\n            } catch (error) {\r\n                console.error('Download failed:', error);\r\n                ytv_showNotification(`\u274c Download failed. Please try again.`);\r\n            }\r\n        }\r\n\r\n        function ytv_previewThumbnail(url, quality, resolution, filename) {\r\n            ytv_currentPreviewData = { url, quality, resolution, filename };\r\n            document.getElementById('ytv-previewImage').src = url;\r\n            document.getElementById('ytv-previewQuality').textContent = quality;\r\n            document.getElementById('ytv-previewResolution').textContent = resolution;\r\n            document.getElementById('ytv-previewModal').style.display = 'block';\r\n        }\r\n\r\n        function ytv_closePreviewModal() {\r\n            document.getElementById('ytv-previewModal').style.display = 'none';\r\n            ytv_currentPreviewData = null;\r\n        }\r\n\r\n        async function ytv_downloadFromPreview() {\r\n            if (ytv_currentPreviewData) {\r\n                await ytv_downloadThumbnail(ytv_currentPreviewData.url, ytv_currentPreviewData.filename, ytv_currentPreviewData.quality);\r\n                ytv_closePreviewModal();\r\n            }\r\n        }\r\n\r\n        function ytv_fetchThumbnails() {\r\n            const urlInput = document.getElementById('ytv-urlInput');\r\n            const url = urlInput.value.trim();\r\n\r\n            if (!url) { ytv_showError('Please enter a YouTube URL'); return; }\r\n            if (!ytv_isValidYouTubeURL(url)) { ytv_showError('\u274c Invalid YouTube URL format!'); return; }\r\n            const videoId = ytv_extractVideoId(url);\r\n            if (!videoId) { ytv_showError('Could not extract video ID from URL'); return; }\r\n\r\n            ytv_hideError();\r\n            document.getElementById('ytv-thumbnailsPreview').style.display = 'none';\r\n            ytv_showLoading();\r\n\r\n            setTimeout(() => {\r\n                const thumbnailSizes = [\r\n                    { key: 'maxresdefault', quality: 'Maximum', resolution: '1280\u00d7720' },\r\n                    { key: 'hqdefault', quality: 'High', resolution: '480\u00d7360' },\r\n                    { key: 'mqdefault', quality: 'Medium', resolution: '320\u00d7180' },\r\n                    { key: 'sddefault', quality: 'Standard', resolution: '640\u00d7480' },\r\n                    { key: 'default', quality: 'Default', resolution: '120\u00d790' }\r\n                ];\r\n                const thumbnails = thumbnailSizes.map(size => ({\r\n                    url: `https:\/\/img.youtube.com\/vi\/${videoId}\/${size.key}.jpg`,\r\n                    quality: size.quality,\r\n                    resolution: size.resolution,\r\n                    filename: `youtube-${videoId}-${size.quality.toLowerCase()}.jpg`\r\n                }));\r\n\r\n                ytv_currentVideoData = { videoId, url, title: `YouTube Video (${videoId})`, thumbnails };\r\n                ytv_displayThumbnails(thumbnails);\r\n                ytv_hideLoading();\r\n                ytv_showNotification('\u2705 Thumbnails loaded successfully!');\r\n            }, 1000);\r\n        }\r\n\r\n        function ytv_displayThumbnails(thumbnails) {\r\n            document.getElementById('ytv-videoTitle').textContent = `Thumbnails for Video ID: ${ytv_currentVideoData.videoId}`;\r\n            document.getElementById('ytv-videoChannel').textContent = 'YouTube Video';\r\n            document.getElementById('ytv-thumbnailCount').textContent = `${thumbnails.length} Qualities`;\r\n            document.getElementById('ytv-mainThumbnail').src = `https:\/\/img.youtube.com\/vi\/${ytv_currentVideoData.videoId}\/hqdefault.jpg`;\r\n            document.getElementById('ytv-thumbnailsGrid').innerHTML = thumbnails.map(ytv_createThumbnailCard).join('');\r\n            document.getElementById('ytv-thumbnailsPreview').style.display = 'block';\r\n        }\r\n\r\n        \/\/ --- Event Listeners ---\r\n        document.getElementById('ytv-urlInput').addEventListener('keypress', function (e) {\r\n            if (e.key === 'Enter') ytv_fetchThumbnails();\r\n        });\r\n        document.getElementById('ytv-urlInput').addEventListener('input', function (e) {\r\n            const url = e.target.value.trim();\r\n            if (url && !ytv_isValidYouTubeURL(url)) {\r\n                e.target.classList.add('ytv-error');\r\n            } else {\r\n                e.target.classList.remove('ytv-error');\r\n                ytv_hideError();\r\n            }\r\n        });\r\n        document.getElementById('ytv-previewModal').addEventListener('click', function (e) {\r\n            if (e.target === this) ytv_closePreviewModal();\r\n        });\r\n\r\n        \/\/ Auto-focus on input on page load\r\n        document.getElementById('ytv-urlInput').focus();\r\n    <\/script>\r\n[\/et_pb_fullwidth_code][\/et_pb_section][et_pb_section fb_built=&#8221;1&#8243; fullwidth=&#8221;on&#8221; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; hover_enabled=&#8221;0&#8243; global_colors_info=&#8221;{}&#8221; max_width=&#8221;1280px&#8221; module_alignment=&#8221;center&#8221; custom_padding=&#8221;50px||50px||true|false&#8221; sticky_enabled=&#8221;0&#8243; locked=&#8221;off&#8221;][et_pb_fullwidth_code _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; hover_enabled=&#8221;0&#8243; global_colors_info=&#8221;{}&#8221; sticky_enabled=&#8221;0&#8243;][\/et_pb_fullwidth_code][\/et_pb_section][et_pb_section fb_built=&#8221;1&#8243; fullwidth=&#8221;on&#8221; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_fullwidth_code _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<style>\r\n        \/* Prefixed CSS Variables *\/\r\n        :root {\r\n            --yt-thumb-primary: #FF0000;\r\n            --yt-thumb-secondary: #282828;\r\n            --yt-thumb-accent: #f1f1f1;\r\n            --yt-thumb-text-dark: #030303;\r\n            --yt-thumb-text-light: #606060;\r\n            --yt-thumb-bg-light: #f9f9f9;\r\n            --yt-thumb-border-light: #e5e5e5;\r\n            --yt-thumb-success: #34a853;\r\n            --yt-thumb-warning: #fbbc05;\r\n        }\r\n        \r\n        \r\n        \/* Prefixed Section Styles *\/\r\n        .yt-thumb-section {\r\n            padding: 80px 0;\r\n            position: relative;\r\n        }\r\n        \r\n        .yt-thumb-section-heading {\r\n            font-size: 2.75rem;\r\n            font-weight: 700;\r\n            margin-bottom: 1rem;\r\n            text-align: center;\r\n        }\r\n        \r\n        .yt-thumb-section-description {\r\n            font-size: 1.25rem;\r\n            color: var(--yt-thumb-text-light);\r\n            text-align: center;\r\n            max-width: 700px;\r\n            margin: 0 auto 3rem;\r\n        }\r\n        \r\n        \/* Prefixed Hero Section *\/\r\n        #yt-thumb-hero {\r\n            background: linear-gradient(135deg, rgba(255, 0, 0, 0.9), rgba(40, 40, 40, 0.95));\r\n            color: white;\r\n            padding: 120px 0;\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n        \r\n        #yt-thumb-hero::before {\r\n            content: \"\";\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            background-image: \r\n                radial-gradient(circle at 20% 50%, rgba(255,255,255,0.1) 0%, transparent 50%),\r\n                radial-gradient(circle at 80% 80%, rgba(255,255,255,0.1) 0%, transparent 50%),\r\n                radial-gradient(circle at 40% 20%, rgba(255,255,255,0.05) 0%, transparent 50%);\r\n        }\r\n        \r\n        .yt-thumb-hero-content {\r\n            position: relative;\r\n            z-index: 2;\r\n        }\r\n        \r\n        .yt-thumb-hero-title {\r\n            font-size: 3.5rem;\r\n            font-weight: 700;\r\n            margin-bottom: 1.5rem;\r\n            line-height: 1.2;\r\n        }\r\n        \r\n        .yt-thumb-hero-subtitle {\r\n            font-size: 1.5rem;\r\n            margin-bottom: 3rem;\r\n            opacity: 0.95;\r\n            font-weight: 400;\r\n        }\r\n        \r\n        .yt-thumb-url-container {\r\n            max-width: 700px;\r\n            margin: 0 auto 3rem;\r\n            position: relative;\r\n        }\r\n        \r\n        .yt-thumb-url-input {\r\n            width: 100%;\r\n            padding: 18px 60px 18px 25px;\r\n            border-radius: 50px;\r\n            border: none;\r\n            font-size: 1.1rem;\r\n            box-shadow: 0 10px 30px rgba(0,0,0,0.1);\r\n            font-family: 'Fira Sans', sans-serif;\r\n        }\r\n        \r\n        .yt-thumb-url-btn {\r\n            position: absolute;\r\n            right: 8px;\r\n            top: 50%;\r\n            transform: translateY(-50%);\r\n            background-color: var(--yt-thumb-primary);\r\n            color: white;\r\n            border: none;\r\n            border-radius: 50%;\r\n            width: 45px;\r\n            height: 45px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            font-size: 1.2rem;\r\n            transition: all 0.3s ease;\r\n        }\r\n        \r\n        .yt-thumb-url-btn:hover {\r\n            background-color: var(--yt-thumb-secondary);\r\n            transform: translateY(-50%) scale(1.05);\r\n        }\r\n        \r\n        .yt-thumb-btn-container {\r\n            display: flex;\r\n            justify-content: center;\r\n            gap: 15px;\r\n            margin-bottom: 3rem;\r\n        }\r\n        \r\n        .yt-thumb-btn-hero {\r\n            padding: 14px 32px;\r\n            font-size: 1.1rem;\r\n            font-weight: 600;\r\n            border-radius: 50px;\r\n            transition: all 0.3s ease;\r\n            text-decoration: none;\r\n            display: inline-block;\r\n        }\r\n        \r\n        .yt-thumb-btn-primary-hero {\r\n            background-color: white;\r\n            color: var(--yt-thumb-primary);\r\n            border: none;\r\n            box-shadow: 0 4px 15px rgba(0,0,0,0.1);\r\n        }\r\n        \r\n        .yt-thumb-btn-primary-hero:hover {\r\n            transform: translateY(-3px);\r\n            box-shadow: 0 8px 25px rgba(0,0,0,0.15);\r\n            color: var(--yt-thumb-primary);\r\n        }\r\n        \r\n        .yt-thumb-btn-secondary-hero {\r\n            background-color: transparent;\r\n            color: white;\r\n            border: 2px solid white;\r\n        }\r\n        \r\n        .yt-thumb-btn-secondary-hero:hover {\r\n            background-color: white;\r\n            color: var(--yt-thumb-primary);\r\n            transform: translateY(-3px);\r\n        }\r\n        \r\n        .yt-thumb-thumbnail-preview {\r\n            max-width: 500px;\r\n            margin: 0 auto;\r\n            background-color: rgba(255, 255, 255, 0.1);\r\n            backdrop-filter: blur(10px);\r\n            border-radius: 16px;\r\n            padding: 20px;\r\n            box-shadow: 0 10px 30px rgba(0,0,0,0.2);\r\n            border: 1px solid rgba(255, 255, 255, 0.2);\r\n        }\r\n        \r\n        .yt-thumb-thumbnail-img {\r\n            width: 100%;\r\n            aspect-ratio: 16\/9;\r\n            background-color: rgba(0,0,0,0.2);\r\n            border-radius: 8px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            color: white;\r\n            font-size: 3rem;\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n        \r\n        .yt-thumb-thumbnail-img::before {\r\n            content: \"\";\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            background: linear-gradient(135deg, rgba(255,0,0,0.3), rgba(40,40,40,0.3));\r\n        }\r\n        \r\n        .yt-thumb-thumbnail-overlay {\r\n            position: absolute;\r\n            bottom: 10px;\r\n            right: 10px;\r\n            background-color: rgba(0,0,0,0.7);\r\n            color: white;\r\n            padding: 5px 10px;\r\n            border-radius: 4px;\r\n            font-size: 0.8rem;\r\n            z-index: 1;\r\n        }\r\n        \r\n        .yt-thumb-floating-icon {\r\n            position: absolute;\r\n            opacity: 0.15;\r\n            animation: float 15s infinite ease-in-out;\r\n            color: white;\r\n        }\r\n        \r\n        .yt-thumb-floating-icon:nth-child(1) {\r\n            top: 15%;\r\n            left: 10%;\r\n            font-size: 40px;\r\n            animation-delay: 0s;\r\n        }\r\n        \r\n        .yt-thumb-floating-icon:nth-child(2) {\r\n            top: 60%;\r\n            right: 10%;\r\n            font-size: 60px;\r\n            animation-delay: 2s;\r\n        }\r\n        \r\n        .yt-thumb-floating-icon:nth-child(3) {\r\n            bottom: 15%;\r\n            left: 20%;\r\n            font-size: 50px;\r\n            animation-delay: 5s;\r\n        }\r\n        \r\n        @keyframes float {\r\n            0%, 100% {\r\n                transform: translateY(0) rotate(0deg);\r\n            }\r\n            50% {\r\n                transform: translateY(-20px) rotate(10deg);\r\n            }\r\n        }\r\n        \r\n        \/* Prefixed How It Works Section *\/\r\n        #yt-thumb-how-it-works {\r\n            background-color: var(--yt-thumb-bg-light);\r\n        }\r\n        \r\n        .yt-thumb-steps-container {\r\n            max-width: 1000px;\r\n            margin: 0 auto;\r\n        }\r\n        \r\n        .yt-thumb-step-card {\r\n            background-color: white;\r\n            border-radius: 16px;\r\n            padding: 40px 30px;\r\n            height: 100%;\r\n            box-shadow: 0 5px 20px rgba(0,0,0,0.05);\r\n            transition: all 0.3s ease;\r\n            text-align: center;\r\n            border: 1px solid var(--yt-thumb-border-light);\r\n            position: relative;\r\n        }\r\n        \r\n        .yt-thumb-step-card:hover {\r\n            transform: translateY(-10px);\r\n            box-shadow: 0 15px 35px rgba(0,0,0,0.1);\r\n        }\r\n        \r\n        .yt-thumb-step-number {\r\n            display: inline-flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            width: 60px;\r\n            height: 60px;\r\n            background-color: var(--yt-thumb-primary);\r\n            color: white;\r\n            border-radius: 50%;\r\n            font-size: 1.5rem;\r\n            font-weight: 700;\r\n            margin-bottom: 25px;\r\n        }\r\n        \r\n        .yt-thumb-step-icon {\r\n            font-size: 3rem;\r\n            color: var(--yt-thumb-primary);\r\n            margin-bottom: 20px;\r\n        }\r\n        \r\n        .yt-thumb-step-title {\r\n            font-size: 1.5rem;\r\n            font-weight: 600;\r\n            margin-bottom: 15px;\r\n            color: var(--yt-thumb-text-dark);\r\n        }\r\n        \r\n        .yt-thumb-step-description {\r\n            font-size: 1.1rem;\r\n            color: var(--yt-thumb-text-light);\r\n            line-height: 1.6;\r\n        }\r\n        \r\n        \/* Prefixed Live Preview Panel *\/\r\n        #yt-thumb-preview {\r\n            background-color: var(--yt-thumb-bg-light);\r\n        }\r\n        \r\n        .yt-thumb-preview-container {\r\n            max-width: 1000px;\r\n            margin: 0 auto;\r\n            background-color: white;\r\n            border-radius: 16px;\r\n            overflow: hidden;\r\n            box-shadow: 0 5px 20px rgba(0,0,0,0.05);\r\n        }\r\n        \r\n        .yt-thumb-preview-header {\r\n            background-color: var(--yt-thumb-primary);\r\n            color: white;\r\n            padding: 20px 30px;\r\n            font-size: 1.5rem;\r\n            font-weight: 600;\r\n        }\r\n        \r\n        .yt-thumb-preview-content {\r\n            padding: 30px;\r\n        }\r\n        \r\n        .yt-thumb-preview-display {\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: center;\r\n            margin-bottom: 30px;\r\n        }\r\n        \r\n        .yt-thumb-preview-img {\r\n            max-width: 100%;\r\n            max-height: 400px;\r\n            border-radius: 8px;\r\n            box-shadow: 0 5px 15px rgba(0,0,0,0.1);\r\n            margin-bottom: 20px;\r\n        }\r\n        \r\n        .yt-thumb-preview-options {\r\n            display: flex;\r\n            flex-wrap: wrap;\r\n            justify-content: center;\r\n            gap: 15px;\r\n            margin-bottom: 20px;\r\n        }\r\n        \r\n        .yt-thumb-format-option {\r\n            background-color: var(--yt-thumb-bg-light);\r\n            border: 1px solid var(--yt-thumb-border-light);\r\n            border-radius: 8px;\r\n            padding: 10px 15px;\r\n            cursor: pointer;\r\n            transition: all 0.3s ease;\r\n            text-align: center;\r\n            min-width: 120px;\r\n        }\r\n        \r\n        .yt-thumb-format-option:hover, .yt-thumb-format-option.active {\r\n            background-color: var(--yt-thumb-primary);\r\n            color: white;\r\n            border-color: var(--yt-thumb-primary);\r\n        }\r\n        \r\n        .yt-thumb-format-name {\r\n            font-weight: 600;\r\n            margin-bottom: 5px;\r\n        }\r\n        \r\n        .yt-thumb-format-size {\r\n            font-size: 0.9rem;\r\n            opacity: 0.8;\r\n        }\r\n        \r\n        .yt-thumb-preview-info {\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n            background-color: var(--yt-thumb-bg-light);\r\n            padding: 15px 20px;\r\n            border-radius: 8px;\r\n            margin-bottom: 20px;\r\n        }\r\n        \r\n        .yt-thumb-filename {\r\n            font-weight: 600;\r\n            color: var(--yt-thumb-text-dark);\r\n        }\r\n        \r\n        .yt-thumb-download-btn {\r\n            background-color: var(--yt-thumb-primary);\r\n            color: white;\r\n            border: none;\r\n            border-radius: 8px;\r\n            padding: 10px 20px;\r\n            font-weight: 600;\r\n            transition: all 0.3s ease;\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 8px;\r\n        }\r\n        \r\n        .yt-thumb-download-btn:hover {\r\n            background-color: var(--yt-thumb-secondary);\r\n            transform: translateY(-2px);\r\n        }\r\n        \r\n        .yt-thumb-warning {\r\n            font-size: 0.9rem;\r\n            color: var(--yt-thumb-text-light);\r\n            font-style: italic;\r\n            text-align: center;\r\n        }\r\n        \r\n        \/* Prefixed Features Section *\/\r\n        .yt-thumb-features-container {\r\n            max-width: 1000px;\r\n            margin: 0 auto;\r\n        }\r\n        \r\n        .yt-thumb-feature-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n            gap: 20px;\r\n        }\r\n        \r\n        .yt-thumb-feature-card {\r\n            background-color: white;\r\n            border-radius: 12px;\r\n            padding: 25px;\r\n            box-shadow: 0 3px 10px rgba(0,0,0,0.05);\r\n            transition: all 0.3s ease;\r\n            height: 100%;\r\n            display: flex;\r\n            align-items: flex-start;\r\n        }\r\n        \r\n        .yt-thumb-feature-card:hover {\r\n            transform: translateY(-5px);\r\n            box-shadow: 0 8px 20px rgba(0,0,0,0.1);\r\n        }\r\n        \r\n        .yt-thumb-feature-icon {\r\n            font-size: 2rem;\r\n            color: var(--yt-thumb-primary);\r\n            margin-right: 15px;\r\n            min-width: 40px;\r\n            text-align: center;\r\n        }\r\n        \r\n        .yt-thumb-feature-content {\r\n            flex: 1;\r\n        }\r\n        \r\n        .yt-thumb-feature-title {\r\n            font-size: 1.2rem;\r\n            font-weight: 600;\r\n            margin-bottom: 8px;\r\n            color: var(--yt-thumb-text-dark);\r\n        }\r\n        \r\n        .yt-thumb-feature-description {\r\n            font-size: 1rem;\r\n            color: var(--yt-thumb-text-light);\r\n            line-height: 1.5;\r\n        }\r\n        \r\n        \/* Prefixed FAQ Section *\/\r\n        #yt-thumb-faq {\r\n            background-color: var(--yt-thumb-bg-light);\r\n        }\r\n        \r\n        .yt-thumb-faq-container {\r\n            max-width: 800px;\r\n            margin: 0 auto;\r\n        }\r\n        \r\n        .yt-thumb-accordion-item {\r\n            border: none;\r\n            margin-bottom: 15px;\r\n            border-radius: 12px;\r\n            overflow: hidden;\r\n            box-shadow: 0 3px 10px rgba(0,0,0,0.05);\r\n        }\r\n        \r\n        .yt-thumb-accordion-button {\r\n            font-size: 1.2rem;\r\n            font-weight: 600;\r\n            padding: 20px 25px;\r\n            background-color: white;\r\n            color: var(--yt-thumb-text-dark);\r\n            border: none;\r\n            box-shadow: none;\r\n        }\r\n        \r\n        .yt-thumb-accordion-button:not(.collapsed) {\r\n            color: var(--yt-thumb-primary);\r\n            background-color: white;\r\n            box-shadow: none;\r\n        }\r\n        \r\n        .yt-thumb-accordion-button:focus {\r\n            box-shadow: none;\r\n            border: none;\r\n        }\r\n        \r\n        .yt-thumb-accordion-button::after {\r\n            background-image: url(\"data:image\/svg+xml,%3csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 16 16' fill='%23FF0000'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'\/%3e%3c\/svg%3e\");\r\n        }\r\n        \r\n        .yt-thumb-accordion-body {\r\n            padding: 5px 25px 25px;\r\n            font-size: 1.1rem;\r\n            color: var(--yt-thumb-text-light);\r\n            line-height: 1.7;\r\n        }\r\n        \r\n        \/* Prefixed Modal Styles *\/\r\n        .yt-thumb-modal-content {\r\n            border-radius: 16px;\r\n            border: none;\r\n            box-shadow: 0 20px 60px rgba(0,0,0,0.2);\r\n        }\r\n        \r\n        .yt-thumb-modal-header {\r\n            background: linear-gradient(135deg, var(--yt-thumb-primary), var(--yt-thumb-secondary));\r\n            color: white;\r\n            border-radius: 16px 16px 0 0;\r\n            padding: 25px 30px;\r\n            border: none;\r\n        }\r\n        \r\n        .yt-thumb-modal-title {\r\n            font-size: 1.5rem;\r\n            font-weight: 700;\r\n        }\r\n        \r\n        .yt-thumb-btn-close {\r\n            filter: brightness(0) invert(1);\r\n            opacity: 0.8;\r\n        }\r\n        \r\n        .yt-thumb-btn-close:hover {\r\n            opacity: 1;\r\n        }\r\n        \r\n        .yt-thumb-modal-body {\r\n            padding: 30px;\r\n        }\r\n        \r\n        .yt-thumb-form-control {\r\n            border-radius: 10px;\r\n            border: 1px solid var(--yt-thumb-border-light);\r\n            padding: 12px 15px;\r\n            font-size: 1.1rem;\r\n            font-family: 'Fira Sans', sans-serif;\r\n        }\r\n        \r\n        .yt-thumb-form-control:focus {\r\n            border-color: var(--yt-thumb-primary);\r\n            box-shadow: 0 0 0 0.2rem rgba(255, 0, 0, 0.25);\r\n        }\r\n        \r\n        .yt-thumb-form-check-input {\r\n            width: 1.2em;\r\n            height: 1.2em;\r\n            margin-top: 0.3em;\r\n        }\r\n        \r\n        .yt-thumb-form-check-label {\r\n            font-size: 1.1rem;\r\n            padding-left: 10px;\r\n        }\r\n        \r\n        .yt-thumb-modal-footer {\r\n            padding: 20px 30px;\r\n            border: none;\r\n        }\r\n        \r\n        .yt-thumb-btn-modal {\r\n            padding: 10px 25px;\r\n            font-size: 1.1rem;\r\n            font-weight: 600;\r\n            border-radius: 8px;\r\n            transition: all 0.3s ease;\r\n        }\r\n        \r\n        \/* Prefixed Responsive Design *\/\r\n        @media (max-width: 768px) {\r\n            .yt-thumb-section {\r\n                padding: 60px 0;\r\n            }\r\n            \r\n            .yt-thumb-section-heading {\r\n                font-size: 2.2rem;\r\n            }\r\n            \r\n            .yt-thumb-section-description {\r\n                font-size: 1.1rem;\r\n            }\r\n            \r\n            .yt-thumb-hero-title {\r\n                font-size: 2.5rem;\r\n            }\r\n            \r\n            .yt-thumb-hero-subtitle {\r\n                font-size: 1.2rem;\r\n            }\r\n            \r\n            .yt-thumb-btn-container {\r\n                flex-direction: column;\r\n                align-items: center;\r\n            }\r\n            \r\n            .yt-thumb-btn-hero {\r\n                width: 250px;\r\n            }\r\n            \r\n            .yt-thumb-step-card {\r\n                margin-bottom: 30px;\r\n            }\r\n            \r\n            .yt-thumb-preview-options {\r\n                flex-direction: column;\r\n                align-items: center;\r\n            }\r\n            \r\n            .yt-thumb-preview-info {\r\n                flex-direction: column;\r\n                gap: 15px;\r\n            }\r\n        }\r\n    <\/style>\r\n    <!-- Prefixed Hero Section -->\r\n  \r\n\r\n    <!-- Prefixed How It Works Section -->\r\n    <section id=\"yt-thumb-how-it-works\" class=\"yt-thumb-section\">\r\n        <div class=\"container\">\r\n            <h2 class=\"yt-thumb-section-heading\" data-aos=\"fade-up\">How It Works<\/h2>\r\n            <p class=\"yt-thumb-section-description\" data-aos=\"fade-up\" data-aos-delay=\"100\">Simple steps to view and download YouTube thumbnails<\/p>\r\n            \r\n            <div class=\"yt-thumb-steps-container\">\r\n                <div class=\"row g-4\">\r\n                    <div class=\"col-md-4\" data-aos=\"fade-up\" data-aos-delay=\"200\">\r\n                        <div class=\"yt-thumb-step-card\">\r\n                            <div class=\"yt-thumb-step-number\">1<\/div>\r\n                            <div class=\"yt-thumb-step-icon\">\r\n                                <i class=\"fas fa-clipboard\"><\/i>\r\n                            <\/div>\r\n                            <h3 class=\"yt-thumb-step-title\">Paste the YouTube video link<\/h3>\r\n                            <p class=\"yt-thumb-step-description\">Copy and paste the URL of the YouTube video you want to extract the thumbnail from<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"col-md-4\" data-aos=\"fade-up\" data-aos-delay=\"300\">\r\n                        <div class=\"yt-thumb-step-card\">\r\n                            <div class=\"yt-thumb-step-number\">2<\/div>\r\n                            <div class=\"yt-thumb-step-icon\">\r\n                                <i class=\"fas fa-search\"><\/i>\r\n                            <\/div>\r\n                            <h3 class=\"yt-thumb-step-title\">Click \"View\" to fetch the thumbnail<\/h3>\r\n                            <p class=\"yt-thumb-step-description\">Our tool instantly retrieves the thumbnail in the highest available quality<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"col-md-4\" data-aos=\"fade-up\" data-aos-delay=\"400\">\r\n                        <div class=\"yt-thumb-step-card\">\r\n                            <div class=\"yt-thumb-step-number\">3<\/div>\r\n                            <div class=\"yt-thumb-step-icon\">\r\n                                <i class=\"fas fa-download\"><\/i>\r\n                            <\/div>\r\n                            <h3 class=\"yt-thumb-step-title\">Download the image in HD, SD, or preview mode<\/h3>\r\n                            <p class=\"yt-thumb-step-description\">Choose your preferred resolution and save the thumbnail to your device<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- Prefixed Live Preview Panel -->\r\n    <section id=\"yt-thumb-preview\" class=\"yt-thumb-section\">\r\n        <div class=\"container\">\r\n            <h2 class=\"yt-thumb-section-heading\" data-aos=\"fade-up\">Live Preview Panel<\/h2>\r\n            <p class=\"yt-thumb-section-description\" data-aos=\"fade-up\" data-aos-delay=\"100\">See and download YouTube thumbnails in different resolutions<\/p>\r\n            \r\n            <div class=\"yt-thumb-preview-container\" data-aos=\"fade-up\" data-aos-delay=\"200\">\r\n                <div class=\"yt-thumb-preview-header\">\r\n                    <i class=\"fas fa-image me-2\"><\/i> Thumbnail Preview\r\n                <\/div>\r\n                <div class=\"yt-thumb-preview-content\">\r\n                    <div class=\"yt-thumb-preview-display\">\r\n                        <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/youtube-thumbnail\/1280\/720.jpg\" alt=\"YouTube Thumbnail\" class=\"yt-thumb-preview-img\" id=\"yt-thumb-preview-img\">\r\n                        \r\n                        <div class=\"yt-thumb-preview-options\">\r\n                            <div class=\"yt-thumb-format-option active\" data-resolution=\"hd\">\r\n                                <div class=\"yt-thumb-format-name\">HD<\/div>\r\n                                <div class=\"yt-thumb-format-size\">1280\u00d7720<\/div>\r\n                            <\/div>\r\n                            <div class=\"yt-thumb-format-option\" data-resolution=\"medium\">\r\n                                <div class=\"yt-thumb-format-name\">Medium<\/div>\r\n                                <div class=\"yt-thumb-format-size\">480\u00d7360<\/div>\r\n                            <\/div>\r\n                            <div class=\"yt-thumb-format-option\" data-resolution=\"low\">\r\n                                <div class=\"yt-thumb-format-name\">Low<\/div>\r\n                                <div class=\"yt-thumb-format-size\">320\u00d7180<\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                        \r\n                        <div class=\"yt-thumb-preview-info\">\r\n                            <div class=\"yt-thumb-filename\" id=\"yt-thumb-filename\">youtube-thumbnail-hd.jpg<\/div>\r\n                            <button class=\"yt-thumb-download-btn\" id=\"yt-thumb-download-preview-btn\">\r\n                                <i class=\"fas fa-download\"><\/i> Download\r\n                            <\/button>\r\n                        <\/div>\r\n                        \r\n                        <p class=\"yt-thumb-warning\">Right-click has been disabled to protect content. Please use the download button.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- Prefixed Features Section -->\r\n    <section id=\"yt-thumb-features\" class=\"yt-thumb-section\">\r\n        <div class=\"container\">\r\n            <h2 class=\"yt-thumb-section-heading\" data-aos=\"fade-up\">Tool Features<\/h2>\r\n            <p class=\"yt-thumb-section-description\" data-aos=\"fade-up\" data-aos-delay=\"100\">Why our YouTube Thumbnail Viewer stands out<\/p>\r\n            \r\n            <div class=\"yt-thumb-features-container\">\r\n                <div class=\"yt-thumb-feature-grid\">\r\n                    <div class=\"yt-thumb-feature-card\" data-aos=\"fade-up\" data-aos-delay=\"200\">\r\n                        <div class=\"yt-thumb-feature-icon\">\r\n                            <i class=\"fas fa-user-times\"><\/i>\r\n                        <\/div>\r\n                        <div class=\"yt-thumb-feature-content\">\r\n                            <h3 class=\"yt-thumb-feature-title\">No login required<\/h3>\r\n                            <p class=\"yt-thumb-feature-description\">Use our tool without creating an account or logging in anywhere<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"yt-thumb-feature-card\" data-aos=\"fade-up\" data-aos-delay=\"300\">\r\n                        <div class=\"yt-thumb-feature-icon\">\r\n                            <i class=\"fas fa-mobile-alt\"><\/i>\r\n                        <\/div>\r\n                        <div class=\"yt-thumb-feature-content\">\r\n                            <h3 class=\"yt-thumb-feature-title\">Works on all devices<\/h3>\r\n                            <p class=\"yt-thumb-feature-description\">Fully responsive design that works perfectly on mobile, tablet, and desktop<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"yt-thumb-feature-card\" data-aos=\"fade-up\" data-aos-delay=\"400\">\r\n                        <div class=\"yt-thumb-feature-icon\">\r\n                            <i class=\"fas fa-ban\"><\/i>\r\n                        <\/div>\r\n                        <div class=\"yt-thumb-feature-content\">\r\n                            <h3 class=\"yt-thumb-feature-title\">No watermark<\/h3>\r\n                            <p class=\"yt-thumb-feature-description\">Download clean thumbnails without any watermarks or branding<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"yt-thumb-feature-card\" data-aos=\"fade-up\" data-aos-delay=\"500\">\r\n                        <div class=\"yt-thumb-feature-icon\">\r\n                            <i class=\"fas fa-bolt\"><\/i>\r\n                        <\/div>\r\n                        <div class=\"yt-thumb-feature-content\">\r\n                            <h3 class=\"yt-thumb-feature-title\">Fast CDN rendering<\/h3>\r\n                            <p class=\"yt-thumb-feature-description\">Lightning-fast thumbnail loading using our optimized CDN infrastructure<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"yt-thumb-feature-card\" data-aos=\"fade-up\" data-aos-delay=\"600\">\r\n                        <div class=\"yt-thumb-feature-icon\">\r\n                            <i class=\"fas fa-mouse-pointer\"><\/i>\r\n                        <\/div>\r\n                        <div class=\"yt-thumb-feature-content\">\r\n                            <h3 class=\"yt-thumb-feature-title\">Download in one click<\/h3>\r\n                            <p class=\"yt-thumb-feature-description\">Save thumbnails to your device with a single click of a button<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"yt-thumb-feature-card\" data-aos=\"fade-up\" data-aos-delay=\"700\">\r\n                        <div class=\"yt-thumb-feature-icon\">\r\n                            <i class=\"fas fa-lock\"><\/i>\r\n                        <\/div>\r\n                        <div class=\"yt-thumb-feature-content\">\r\n                            <h3 class=\"yt-thumb-feature-title\">Secure and private<\/h3>\r\n                            <p class=\"yt-thumb-feature-description\">We don't store your URLs or track your activity<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- Prefixed FAQ Section -->\r\n    <section id=\"yt-thumb-faq\" class=\"yt-thumb-section\">\r\n        <div class=\"container\">\r\n            <h2 class=\"yt-thumb-section-heading\" data-aos=\"fade-up\">Frequently Asked Questions<\/h2>\r\n            <p class=\"yt-thumb-section-description\" data-aos=\"fade-up\" data-aos-delay=\"100\">Get answers to common questions about our YouTube Thumbnail Viewer<\/p>\r\n            \r\n            <div class=\"yt-thumb-faq-container\">\r\n                <div class=\"accordion\" id=\"yt-thumb-faqAccordion\">\r\n                    <div class=\"yt-thumb-accordion-item\" data-aos=\"fade-up\" data-aos-delay=\"200\">\r\n                        <h2 class=\"accordion-header\" id=\"yt-thumb-headingOne\">\r\n                            <button class=\"yt-thumb-accordion-button\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#yt-thumb-collapseOne\" aria-expanded=\"true\" aria-controls=\"yt-thumb-collapseOne\">\r\n                                Can I download thumbnails from private videos?\r\n                            <\/button>\r\n                        <\/h2>\r\n                        <div id=\"yt-thumb-collapseOne\" class=\"accordion-collapse collapse show\" aria-labelledby=\"yt-thumb-headingOne\" data-bs-parent=\"#yt-thumb-faqAccordion\">\r\n                            <div class=\"yt-thumb-accordion-body\">\r\n                                No, our tool can only access thumbnails from public YouTube videos. We respect YouTube's privacy settings and cannot bypass any privacy restrictions. If a video is private or unlisted, its thumbnail cannot be accessed through our tool.\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"yt-thumb-accordion-item\" data-aos=\"fade-up\" data-aos-delay=\"300\">\r\n                        <h2 class=\"accordion-header\" id=\"yt-thumb-headingTwo\">\r\n                            <button class=\"yt-thumb-accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#yt-thumb-collapseTwo\" aria-expanded=\"false\" aria-controls=\"yt-thumb-collapseTwo\">\r\n                                Is this tool free to use?\r\n                            <\/button>\r\n                        <\/h2>\r\n                        <div id=\"yt-thumb-collapseTwo\" class=\"accordion-collapse collapse\" aria-labelledby=\"yt-thumb-headingTwo\" data-bs-parent=\"#yt-thumb-faqAccordion\">\r\n                            <div class=\"yt-thumb-accordion-body\">\r\n                                Yes, our YouTube Thumbnail Viewer is completely free to use. There are no hidden fees, premium features, or usage limits. We believe in providing unrestricted access to YouTube thumbnails for everyone.\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"yt-thumb-accordion-item\" data-aos=\"fade-up\" data-aos-delay=\"400\">\r\n                        <h2 class=\"accordion-header\" id=\"yt-thumb-headingThree\">\r\n                            <button class=\"yt-thumb-accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#yt-thumb-collapseThree\" aria-expanded=\"false\" aria-controls=\"yt-thumb-collapseThree\">\r\n                                Will the image include watermark?\r\n                            <\/button>\r\n                        <\/h2>\r\n                        <div id=\"yt-thumb-collapseThree\" class=\"accordion-collapse collapse\" aria-labelledby=\"yt-thumb-headingThree\" data-bs-parent=\"#yt-thumb-faqAccordion\">\r\n                            <div class=\"yt-thumb-accordion-body\">\r\n                                No, the downloaded thumbnails are exactly as they appear on YouTube, without any watermarks or alterations added by our tool. You get the original thumbnail in the selected resolution.\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"yt-thumb-accordion-item\" data-aos=\"fade-up\" data-aos-delay=\"500\">\r\n                        <h2 class=\"accordion-header\" id=\"yt-thumb-headingFour\">\r\n                            <button class=\"yt-thumb-accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#yt-thumb-collapseFour\" aria-expanded=\"false\" aria-controls=\"yt-thumb-collapseFour\">\r\n                                Is it legal to use the thumbnails?\r\n                            <\/button>\r\n                        <\/h2>\r\n                        <div id=\"yt-thumb-collapseFour\" class=\"accordion-collapse collapse\" aria-labelledby=\"yt-thumb-headingFour\" data-bs-parent=\"#yt-thumb-faqAccordion\">\r\n                            <div class=\"yt-thumb-accordion-body\">\r\n                                YouTube thumbnails are generally considered fair use for personal, educational, or research purposes. However, commercial use may require permission from the copyright holder. Always respect copyright laws and terms of service when using downloaded thumbnails.\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <script>\r\n        \/\/ Initialize AOS\r\n        AOS.init({\r\n            duration: 800,\r\n            once: true\r\n        });\r\n<\/script>[\/et_pb_fullwidth_code][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>    <style>\r\n        @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');\r\n\r\n        #ytv-widget-wrapper * {\r\n            margin: 0;\r\n            padding: 0;\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        #ytv-widget-wrapper {\r\n            \/* Renamed and scoped CSS Variables *\/\r\n            --ytv-primary-color: #e91e63;\r\n            --ytv-primary-dark: #c2185b;\r\n            --ytv-primary-light: #f06292;\r\n            --ytv-secondary-color: #9c27b0;\r\n            --ytv-accent-color: #ff5722;\r\n            --ytv-success-gradient: linear-gradient(135deg, #e91e63 0%, #c2185b 100%);\r\n            --ytv-purple-gradient: linear-gradient(135deg, #9c27b0 0%, #7b1fa2 100%);\r\n            --ytv-orange-gradient: linear-gradient(135deg, #ff5722 0%, #e64a19 100%);\r\n            --ytv-blue-gradient: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);\r\n            --ytv-glass-bg: rgba(255, 255, 255, 0.1);\r\n            --ytv-glass-border: rgba(255, 255, 255, 0.15);\r\n            --ytv-text-primary: #1a1a1a;\r\n            --ytv-text-secondary: #666666;\r\n            --ytv-text-light: #999999;\r\n            --ytv-surface: rgba(255, 255, 255, 0.95);\r\n            --ytv-surface-hover: rgba(255, 255, 255, 1);\r\n            --ytv-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);\r\n            --ytv-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12);\r\n            --ytv-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);\r\n            --ytv-shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.18);\r\n            --ytv-shadow-2xl: 0 20px 40px rgba(0, 0, 0, 0.25);\r\n\r\n            \/* Scoped Body Styles *\/\r\n            font-family: 'Inter', sans-serif;\r\n            background: linear-gradient(135deg, #8B7ED8 0%, #B794F6 50%, #D6BCFA 100%);\r\n            min-height: 100vh;\r\n            line-height: 1.6;\r\n            position: relative;\r\n            overflow-x: hidden;\r\n        }\r\n\r\n        #ytv-widget-wrapper::before {\r\n            content: '';\r\n            position: fixed;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            background:\r\n                radial-gradient(circle at 20% 30%, rgba(139, 126, 216, 0.3) 0%, transparent 50%),\r\n                radial-gradient(circle at 80% 70%, rgba(183, 148, 246, 0.3) 0%, transparent 50%),\r\n                radial-gradient(circle at 50% 50%, rgba(214, 188, 250, 0.2) 0%, transparent 50%);\r\n            pointer-events: none;\r\n            z-index: -1;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-container {\r\n            max-width: 1400px;\r\n            margin: 0 auto;\r\n            padding: 20px;\r\n            position: relative;\r\n            z-index: 1;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-header {\r\n            text-align: center;\r\n            margin-bottom: 50px;\r\n            padding: 40px 0;\r\n            animation: ytv-fadeInDown 1s ease-out;\r\n        }\r\n\r\n        @keyframes ytv-fadeInDown {\r\n            from {\r\n                opacity: 0;\r\n                transform: translateY(-30px);\r\n            }\r\n\r\n            to {\r\n                opacity: 1;\r\n                transform: translateY(0);\r\n            }\r\n        }\r\n\r\n        @keyframes ytv-fadeInUp {\r\n            from {\r\n                opacity: 0;\r\n                transform: translateY(30px);\r\n            }\r\n\r\n            to {\r\n                opacity: 1;\r\n                transform: translateY(0);\r\n            }\r\n        }\r\n\r\n        @keyframes ytv-slideInLeft {\r\n            from {\r\n                opacity: 0;\r\n                transform: translateX(-50px);\r\n            }\r\n\r\n            to {\r\n                opacity: 1;\r\n                transform: translateX(0);\r\n            }\r\n        }\r\n\r\n        @keyframes ytv-pulse {\r\n\r\n            0%,\r\n            100% {\r\n                transform: scale(1);\r\n            }\r\n\r\n            50% {\r\n                transform: scale(1.05);\r\n            }\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-logo {\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            gap: 20px;\r\n            margin-bottom: 25px;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-logo-icon {\r\n            width: 80px;\r\n            height: 80px;\r\n            background: var(--ytv-success-gradient);\r\n            border-radius: 20px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            color: white;\r\n            font-size: 36px;\r\n            font-weight: 900;\r\n            box-shadow: var(--ytv-shadow-2xl);\r\n            position: relative;\r\n            overflow: hidden;\r\n            animation: ytv-pulse 2s ease-in-out infinite;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-logo-icon::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: -50%;\r\n            left: -50%;\r\n            width: 200%;\r\n            height: 200%;\r\n            background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.4), transparent);\r\n            transform: rotate(45deg);\r\n            animation: ytv-shine 3s infinite;\r\n        }\r\n\r\n        @keyframes ytv-shine {\r\n            0% {\r\n                transform: translateX(-100%) translateY(-100%) rotate(45deg);\r\n            }\r\n\r\n            50% {\r\n                transform: translateX(100%) translateY(100%) rotate(45deg);\r\n            }\r\n\r\n            100% {\r\n                transform: translateX(-100%) translateY(-100%) rotate(45deg);\r\n            }\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-logo-text-container {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 15px;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-youtube-logo-icon {\r\n            width: 50px;\r\n            height: 50px;\r\n            background: #ff0000;\r\n            border-radius: 12px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            color: white;\r\n            font-size: 24px;\r\n            animation: ytv-youtubeFloat 3s ease-in-out infinite;\r\n            box-shadow: 0 4px 15px rgba(255, 0, 0, 0.3);\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-logo-text {\r\n            font-size: 48px;\r\n            font-weight: 900;\r\n            background: linear-gradient(135deg, #ffffff, #f0f0f0, #ffffff);\r\n            -webkit-background-clip: text;\r\n            -webkit-text-fill-color: transparent;\r\n            background-clip: text;\r\n            text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);\r\n            letter-spacing: -1px;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-camera-logo-icon {\r\n            width: 50px;\r\n            height: 50px;\r\n            background: var(--ytv-primary-color);\r\n            border-radius: 50%;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            color: white;\r\n            font-size: 24px;\r\n            animation: ytv-cameraBounce 2s ease-in-out infinite;\r\n            box-shadow: 0 4px 15px rgba(233, 30, 99, 0.3);\r\n        }\r\n\r\n        @keyframes ytv-youtubeFloat {\r\n\r\n            0%,\r\n            100% {\r\n                transform: translateY(0px) scale(1);\r\n            }\r\n\r\n            50% {\r\n                transform: translateY(-8px) scale(1.05);\r\n            }\r\n        }\r\n\r\n        @keyframes ytv-cameraBounce {\r\n\r\n            0%,\r\n            100% {\r\n                transform: translateY(0px) rotate(0deg);\r\n            }\r\n\r\n            25% {\r\n                transform: translateY(-5px) rotate(-5deg);\r\n            }\r\n\r\n            75% {\r\n                transform: translateY(-5px) rotate(5deg);\r\n            }\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-subtitle {\r\n            color: rgba(255, 255, 255, 0.95);\r\n            font-size: 20px;\r\n            font-weight: 500;\r\n            margin-bottom: 30px;\r\n            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-features-bar {\r\n            display: flex;\r\n            justify-content: center;\r\n            gap: 25px;\r\n            margin-bottom: 40px;\r\n            flex-wrap: wrap;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-feature-item {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 12px;\r\n            color: rgba(255, 255, 255, 0.95);\r\n            font-size: 15px;\r\n            font-weight: 600;\r\n            background: var(--ytv-glass-bg);\r\n            backdrop-filter: blur(20px);\r\n            padding: 14px 22px;\r\n            border-radius: 30px;\r\n            border: 1px solid var(--ytv-glass-border);\r\n            transition: all 0.3s ease;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-feature-item:hover {\r\n            transform: translateY(-3px);\r\n            box-shadow: var(--ytv-shadow-lg);\r\n            background: rgba(255, 255, 255, 0.25);\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-feature-icon {\r\n            width: 26px;\r\n            height: 26px;\r\n            background: var(--ytv-success-gradient);\r\n            border-radius: 50%;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            font-size: 12px;\r\n            color: white;\r\n            font-weight: 700;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-input-section {\r\n            background: var(--ytv-glass-bg);\r\n            backdrop-filter: blur(30px);\r\n            border: 1px solid var(--ytv-glass-border);\r\n            padding: 40px;\r\n            border-radius: 30px;\r\n            box-shadow: var(--ytv-shadow-2xl);\r\n            margin-bottom: 40px;\r\n            animation: ytv-fadeInUp 1s ease-out 0.2s both;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-input-group {\r\n            display: flex;\r\n            gap: 20px;\r\n            margin-bottom: 25px;\r\n            position: relative;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-url-input {\r\n            flex: 1;\r\n            padding: 22px 28px;\r\n            border: 2px solid rgba(255, 255, 255, 0.3);\r\n            border-radius: 20px;\r\n            font-size: 16px;\r\n            font-weight: 500;\r\n            background: rgba(255, 255, 255, 0.95);\r\n            backdrop-filter: blur(10px);\r\n            transition: all 0.3s ease;\r\n            outline: none;\r\n            color: var(--ytv-text-primary);\r\n            box-shadow: var(--ytv-shadow-md);\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-url-input:focus {\r\n            border-color: var(--ytv-primary-color);\r\n            box-shadow: 0 0 0 4px rgba(233, 30, 99, 0.2), var(--ytv-shadow-lg);\r\n            transform: translateY(-2px);\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-url-input.ytv-error {\r\n            border-color: #f44336;\r\n            box-shadow: 0 0 0 4px rgba(244, 67, 54, 0.2);\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-url-input::placeholder {\r\n            color: rgba(102, 102, 102, 0.6);\r\n            font-weight: 500;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-fetch-btn {\r\n            padding: 22px 45px;\r\n            background: var(--ytv-success-gradient);\r\n            color: white;\r\n            border: none;\r\n            border-radius: 20px;\r\n            font-size: 16px;\r\n            font-weight: 700;\r\n            cursor: pointer;\r\n            transition: all 0.3s ease;\r\n            min-width: 200px;\r\n            position: relative;\r\n            overflow: hidden;\r\n            box-shadow: var(--ytv-shadow-lg);\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-fetch-btn:hover:not(:disabled) {\r\n            transform: translateY(-3px);\r\n            box-shadow: var(--ytv-shadow-2xl);\r\n            background: linear-gradient(135deg, #f06292, #e91e63);\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-fetch-btn:disabled {\r\n            opacity: 0.7;\r\n            cursor: not-allowed;\r\n            transform: none;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-fetch-btn::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            left: -100%;\r\n            width: 100%;\r\n            height: 100%;\r\n            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);\r\n            transition: left 0.5s;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-fetch-btn:hover::before {\r\n            left: 100%;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-loading {\r\n            display: none;\r\n            text-align: center;\r\n            padding: 30px;\r\n            color: rgba(255, 255, 255, 0.9);\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-spinner {\r\n            width: 50px;\r\n            height: 50px;\r\n            border: 4px solid rgba(255, 255, 255, 0.3);\r\n            border-top: 4px solid var(--ytv-primary-color);\r\n            border-radius: 50%;\r\n            animation: ytv-spin 1s linear infinite;\r\n            margin: 0 auto 20px;\r\n        }\r\n\r\n        @keyframes ytv-spin {\r\n            0% {\r\n                transform: rotate(0deg);\r\n            }\r\n\r\n            100% {\r\n                transform: rotate(360deg);\r\n            }\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-thumbnails-preview-section {\r\n            display: none;\r\n            background: var(--ytv-glass-bg);\r\n            backdrop-filter: blur(30px);\r\n            border: 1px solid var(--ytv-glass-border);\r\n            padding: 40px;\r\n            border-radius: 30px;\r\n            box-shadow: var(--ytv-shadow-2xl);\r\n            margin-bottom: 40px;\r\n            animation: ytv-slideInLeft 0.8s ease-out;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-video-info-header {\r\n            background: rgba(255, 255, 255, 0.1);\r\n            backdrop-filter: blur(15px);\r\n            border-radius: 25px;\r\n            padding: 30px;\r\n            margin-bottom: 40px;\r\n            border: 1px solid rgba(255, 255, 255, 0.15);\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-video-preview-card {\r\n            display: grid;\r\n            grid-template-columns: auto 1fr auto;\r\n            gap: 25px;\r\n            align-items: center;\r\n            margin-bottom: 25px;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-video-thumbnail-preview {\r\n            width: 120px;\r\n            height: 90px;\r\n            border-radius: 15px;\r\n            object-fit: cover;\r\n            box-shadow: var(--ytv-shadow-lg);\r\n            transition: transform 0.3s ease;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-video-thumbnail-preview:hover {\r\n            transform: scale(1.05);\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-video-details {\r\n            flex: 1;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-video-title {\r\n            font-size: 24px;\r\n            font-weight: 700;\r\n            margin-bottom: 8px;\r\n            line-height: 1.3;\r\n            color: white;\r\n            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-video-channel {\r\n            font-size: 16px;\r\n            color: rgba(255, 255, 255, 0.8);\r\n            font-weight: 500;\r\n            margin-bottom: 5px;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-video-stats {\r\n            display: flex;\r\n            gap: 20px;\r\n            align-items: center;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-stat-item {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 8px;\r\n            color: rgba(255, 255, 255, 0.9);\r\n            font-size: 14px;\r\n            font-weight: 600;\r\n            background: rgba(255, 255, 255, 0.1);\r\n            padding: 8px 12px;\r\n            border-radius: 20px;\r\n            backdrop-filter: blur(10px);\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-stat-icon {\r\n            width: 20px;\r\n            height: 20px;\r\n            background: var(--ytv-orange-gradient);\r\n            border-radius: 6px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            font-size: 10px;\r\n            color: white;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-thumbnails-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\r\n            gap: 25px;\r\n            margin-bottom: 30px;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-thumbnail-card {\r\n            background: var(--ytv-surface);\r\n            border: 2px solid rgba(255, 255, 255, 0.2);\r\n            border-radius: 25px;\r\n            transition: all 0.3s ease;\r\n            position: relative;\r\n            overflow: hidden;\r\n            backdrop-filter: blur(20px);\r\n            box-shadow: var(--ytv-shadow-md);\r\n            padding: 20px;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-thumbnail-card::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            right: 0;\r\n            height: 4px;\r\n            background: var(--ytv-success-gradient);\r\n            transform: scaleX(0);\r\n            transition: transform 0.3s ease;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-thumbnail-card:hover::before {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-thumbnail-card:hover {\r\n            border-color: var(--ytv-primary-color);\r\n            transform: translateY(-8px);\r\n            box-shadow: var(--ytv-shadow-2xl);\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-thumbnail-header {\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n            margin-bottom: 15px;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-thumbnail-quality-badge {\r\n            background: var(--ytv-success-gradient);\r\n            color: white;\r\n            padding: 6px 12px;\r\n            border-radius: 20px;\r\n            font-size: 12px;\r\n            font-weight: 700;\r\n            text-transform: uppercase;\r\n            letter-spacing: 0.5px;\r\n            box-shadow: var(--ytv-shadow-sm);\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-thumbnail-resolution {\r\n            color: var(--ytv-text-secondary);\r\n            font-size: 14px;\r\n            font-weight: 600;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-thumbnail-image-container {\r\n            position: relative;\r\n            border-radius: 15px;\r\n            overflow: hidden;\r\n            margin-bottom: 20px;\r\n            box-shadow: var(--ytv-shadow-md);\r\n            transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-thumbnail-card:hover .ytv-thumbnail-image-container {\r\n            transform: scale(1.02);\r\n            box-shadow: var(--ytv-shadow-lg);\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-thumbnail-image {\r\n            width: 100%;\r\n            height: auto;\r\n            display: block;\r\n            border-radius: 15px;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-thumbnail-overlay {\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            background: linear-gradient(135deg, rgba(233, 30, 99, 0.8), rgba(156, 39, 176, 0.8));\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            opacity: 0;\r\n            transition: opacity 0.3s ease;\r\n            border-radius: 15px;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-thumbnail-card:hover .ytv-thumbnail-overlay {\r\n            opacity: 1;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-overlay-content {\r\n            text-align: center;\r\n            color: white;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-overlay-title {\r\n            font-size: 18px;\r\n            font-weight: 700;\r\n            margin-bottom: 5px;\r\n            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-overlay-subtitle {\r\n            font-size: 14px;\r\n            font-weight: 500;\r\n            opacity: 0.9;\r\n            text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-thumbnail-info {\r\n            display: grid;\r\n            grid-template-columns: 1fr 1fr;\r\n            gap: 15px;\r\n            margin-bottom: 20px;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-info-item {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 8px;\r\n            color: var(--ytv-text-secondary);\r\n            font-size: 13px;\r\n            font-weight: 600;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-info-icon {\r\n            width: 16px;\r\n            height: 16px;\r\n            background: var(--ytv-purple-gradient);\r\n            border-radius: 4px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            font-size: 8px;\r\n            color: white;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-thumbnail-actions {\r\n            text-align: center;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-thumbnail-download-btn {\r\n            width: 100%;\r\n            padding: 15px 25px;\r\n            background: var(--ytv-success-gradient);\r\n            color: white;\r\n            border: none;\r\n            border-radius: 15px;\r\n            font-size: 16px;\r\n            font-weight: 700;\r\n            cursor: pointer;\r\n            transition: all 0.3s ease;\r\n            position: relative;\r\n            overflow: hidden;\r\n            box-shadow: var(--ytv-shadow-md);\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            gap: 10px;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-thumbnail-download-btn:hover {\r\n            transform: translateY(-2px);\r\n            box-shadow: var(--ytv-shadow-xl);\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-thumbnail-download-btn::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            left: -100%;\r\n            width: 100%;\r\n            height: 100%;\r\n            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);\r\n            transition: left 0.5s;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-thumbnail-download-btn:hover::before {\r\n            left: 100%;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-download-icon {\r\n            font-size: 18px;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-error-message {\r\n            background: linear-gradient(135deg, #f44336, #d32f2f);\r\n            color: white;\r\n            padding: 20px;\r\n            border-radius: 18px;\r\n            margin-top: 20px;\r\n            display: none;\r\n            font-weight: 600;\r\n            box-shadow: var(--ytv-shadow-lg);\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-notification {\r\n            position: fixed;\r\n            top: 30px;\r\n            right: 30px;\r\n            background: var(--ytv-success-gradient);\r\n            color: white;\r\n            padding: 20px 25px;\r\n            border-radius: 18px;\r\n            font-weight: 600;\r\n            z-index: 1001;\r\n            transform: translateX(120%);\r\n            transition: transform 0.3s ease;\r\n            box-shadow: var(--ytv-shadow-xl);\r\n            backdrop-filter: blur(20px);\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-notification.ytv-show {\r\n            transform: translateX(0);\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-preview-modal {\r\n            display: none;\r\n            position: fixed;\r\n            z-index: 1000;\r\n            left: 0;\r\n            top: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            background-color: rgba(0, 0, 0, 0.8);\r\n            backdrop-filter: blur(10px);\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-preview-modal-content {\r\n            position: relative;\r\n            margin: 5% auto;\r\n            padding: 0;\r\n            width: 90%;\r\n            max-width: 600px;\r\n            background: var(--ytv-surface);\r\n            border-radius: 20px;\r\n            box-shadow: var(--ytv-shadow-2xl);\r\n            overflow: hidden;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-preview-modal-header {\r\n            background: var(--ytv-success-gradient);\r\n            color: white;\r\n            padding: 20px;\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-preview-modal-title {\r\n            font-size: 20px;\r\n            font-weight: 700;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-preview-modal-close {\r\n            background: rgba(255, 255, 255, 0.2);\r\n            border: none;\r\n            color: white;\r\n            font-size: 20px;\r\n            cursor: pointer;\r\n            width: 30px;\r\n            height: 30px;\r\n            border-radius: 50%;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-preview-modal-body {\r\n            padding: 20px;\r\n            text-align: center;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-preview-image {\r\n            max-width: 100%;\r\n            max-height: 400px;\r\n            border-radius: 10px;\r\n            box-shadow: var(--ytv-shadow-lg);\r\n            margin-bottom: 20px;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-preview-info {\r\n            display: grid;\r\n            grid-template-columns: repeat(2, 1fr);\r\n            gap: 15px;\r\n            margin-bottom: 20px;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-preview-info-item {\r\n            background: rgba(255, 255, 255, 0.1);\r\n            padding: 10px;\r\n            border-radius: 8px;\r\n            text-align: center;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-preview-info-label {\r\n            font-size: 12px;\r\n            color: var(--ytv-text-secondary);\r\n            font-weight: 600;\r\n            margin-bottom: 5px;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-preview-info-value {\r\n            font-size: 14px;\r\n            color: var(--ytv-text-primary);\r\n            font-weight: 700;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-preview-download-btn {\r\n            padding: 12px 24px;\r\n            background: var(--ytv-success-gradient);\r\n            color: white;\r\n            border: none;\r\n            border-radius: 10px;\r\n            font-size: 14px;\r\n            font-weight: 700;\r\n            cursor: pointer;\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 8px;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        #ytv-widget-wrapper .ytv-thumbnail-preview-btn {\r\n            background: var(--ytv-purple-gradient);\r\n            color: white;\r\n            border: none;\r\n            border-radius: 10px;\r\n            font-size: 14px;\r\n            font-weight: 700;\r\n            cursor: pointer;\r\n            padding: 8px 16px;\r\n            margin-bottom: 8px;\r\n            width: 100%;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            gap: 6px;\r\n        }\r\n\r\n        \/* Enhanced Responsive Design *\/\r\n        @media (max-width: 1200px) {\r\n            #ytv-widget-wrapper .ytv-container {\r\n                max-width: 100%;\r\n                padding: 15px;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-thumbnails-grid {\r\n                grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\r\n                gap: 20px;\r\n            }\r\n\t\t\t\t\t#ytv-widget-wrapper .ytv-input-group {\r\n\tdisplay: flex;\r\n\tgap: 20px;\r\n\tmargin-bottom: 25px;\r\n\tposition: relative;\r\n\tflex-direction: column;\r\n}\r\n\t\t\t\t\t#ytv-widget-wrapper .ytv-video-preview-card {\r\n\tdisplay: flex;\r\n\tgap: 25px;\r\n\talign-items: center;\r\n\tmargin-bottom: 25px;\r\n\tflex-direction: column;\r\n}\r\n\t\t\t\t\t#ytv-widget-wrapper .ytv-logo-text-container {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tgap: 15px;\r\n\tflex-direction: column;\r\n}\r\n\t\t\t\t\t#ytv-widget-wrapper .ytv-logo {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n\tgap: 20px;\r\n\tmargin-bottom: 25px;\r\n\tflex-direction: column;\r\n}\r\n        }\r\n\r\n        @media (max-width: 1024px) {\r\n            #ytv-widget-wrapper .ytv-logo-text {\r\n                font-size: 40px;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-features-bar {\r\n                gap: 20px;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-feature-item {\r\n                font-size: 14px;\r\n                padding: 12px 18px;\r\n            }\r\n\t\t\t\t\t#ytv-widget-wrapper .ytv-input-group {\r\n\tdisplay: flex;\r\n\tgap: 20px;\r\n\tmargin-bottom: 25px;\r\n\tposition: relative;\r\n\tflex-direction: column;\r\n}\r\n\t\t\t\t\t#ytv-widget-wrapper .ytv-video-preview-card {\r\n\tdisplay: flex;\r\n\tgap: 25px;\r\n\talign-items: center;\r\n\tmargin-bottom: 25px;\r\n\tflex-direction: column;\r\n}\r\n\t\t\t\t\t#ytv-widget-wrapper .ytv-logo-text-container {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tgap: 15px;\r\n\tflex-direction: column;\r\n}\r\n\t\t\t\t\t#ytv-widget-wrapper .ytv-logo {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n\tgap: 20px;\r\n\tmargin-bottom: 25px;\r\n\tflex-direction: column;\r\n}\r\n\t\t\t\r\n        }\r\n\r\n        @media (max-width: 768px) {\r\n            #ytv-widget-wrapper .ytv-container {\r\n                padding: 10px;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-header {\r\n                margin-bottom: 30px;\r\n                padding: 20px 0;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-logo {\r\n                flex-direction: column;\r\n                gap: 15px;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-logo-text-container {\r\n                flex-direction: column;\r\n                gap: 10px;\r\n                align-items: center;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-youtube-logo-icon,\r\n            #ytv-widget-wrapper .ytv-camera-logo-icon {\r\n                width: 40px;\r\n                height: 40px;\r\n                font-size: 20px;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-logo-icon {\r\n                width: 60px;\r\n                height: 60px;\r\n                font-size: 28px;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-logo-text {\r\n                font-size: 32px;\r\n                text-align: center;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-subtitle {\r\n                font-size: 18px;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-features-bar {\r\n                gap: 15px;\r\n                justify-content: center;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-feature-item {\r\n                font-size: 13px;\r\n                padding: 10px 16px;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-input-section,\r\n            #ytv-widget-wrapper .ytv-thumbnails-preview-section {\r\n                padding: 25px;\r\n                margin-bottom: 25px;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-input-group {\r\n                flex-direction: column;\r\n                gap: 15px;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-url-input {\r\n                padding: 18px 22px;\r\n                font-size: 15px;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-fetch-btn {\r\n                padding: 18px 35px;\r\n                min-width: 100%;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-video-title {\r\n                font-size: 22px;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-thumbnails-grid {\r\n                grid-template-columns: 1fr;\r\n                gap: 20px;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-thumbnail-card {\r\n                padding: 20px;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-video-preview-card {\r\n                grid-template-columns: 1fr;\r\n                text-align: center;\r\n                gap: 15px;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-video-stats {\r\n                justify-content: center;\r\n            }\r\n\t\t\t\t\t#ytv-widget-wrapper .ytv-video-stats {\r\n\tdisplay: flex;\r\n\tgap: 20px;\r\n\talign-items: center;\r\n\tflex-direction: column;\r\n}\r\n\t\t\t\t\t#ytv-widget-wrapper .ytv-stat-item {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tgap: 8px;\r\n\tcolor: rgba(255, 255, 255, 0.9);\r\n\tfont-size: 14px;\r\n\tfont-weight: 600;\r\n\tbackground: rgba(255, 255, 255, 0.1);\r\n\tpadding: 8px 12px;\r\n\tborder-radius: 20px;\r\n\tbackdrop-filter: blur(10px);\r\n\tflex-direction: column;\r\n}\r\n\t\t\t\t\t#ytv-widget-wrapper .ytv-input-group {\r\n\tdisplay: flex;\r\n\tgap: 20px;\r\n\tmargin-bottom: 25px;\r\n\tposition: relative;\r\n\tflex-direction: column;\r\n}\r\n\t\t\t\t\t\r\n\t\t\t\t\t#ytv-widget-wrapper .ytv-video-preview-card {\r\n\tdisplay: flex;\r\n\tgap: 25px;\r\n\talign-items: center;\r\n\tmargin-bottom: 25px;\r\n\tflex-direction: column;\r\n}\r\n        }\r\n\r\n        @media (max-width: 480px) {\r\n            #ytv-widget-wrapper .ytv-container {\r\n                padding: 8px;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-logo-text {\r\n                font-size: 28px;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-subtitle {\r\n                font-size: 16px;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-features-bar {\r\n                flex-direction: column;\r\n                align-items: center;\r\n                gap: 10px;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-feature-item {\r\n                width: 100%;\r\n                max-width: 300px;\r\n                justify-content: center;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-input-section,\r\n            #ytv-widget-wrapper .ytv-thumbnails-preview-section {\r\n                padding: 20px;\r\n                border-radius: 25px;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-url-input {\r\n                padding: 16px 20px;\r\n                font-size: 14px;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-fetch-btn {\r\n                padding: 16px 30px;\r\n                font-size: 15px;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-video-title {\r\n                font-size: 20px;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-thumbnail-card {\r\n                padding: 15px;\r\n            }\r\n\r\n            #ytv-widget-wrapper .ytv-notification {\r\n                top: 20px;\r\n                right: 20px;\r\n                left: 20px;\r\n                padding: 15px 20px;\r\n                font-size: 14px;\r\n            }\r\n\t\t\t\t\t#ytv-widget-wrapper .ytv-video-stats {\r\n\tdisplay: flex;\r\n\tgap: 20px;\r\n\talign-items: center;\r\n\tflex-direction: column;\r\n}\r\n\t\t\t\t\t#ytv-widget-wrapper .ytv-stat-item {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tgap: 8px;\r\n\tcolor: rgba(255, 255, 255, 0.9);\r\n\tfont-size: 14px;\r\n\tfont-weight: 600;\r\n\tbackground: rgba(255, 255, 255, 0.1);\r\n\tpadding: 8px 12px;\r\n\tborder-radius: 20px;\r\n\tbackdrop-filter: blur(10px);\r\n\tflex-direction: column;\r\n}\r\n        }\r\n    <\/style>\r\n\r\n    <div id=\"ytv-widget-wrapper\">\r\n        <div class=\"ytv-container\">\r\n            <div class=\"ytv-header\">\r\n                <div class=\"ytv-logo\">\r\n                    <div class=\"ytv-logo-icon\">\ud83d\udcf8<\/div>\r\n                    <div class=\"ytv-logo-text-container\">\r\n                        <div class=\"ytv-youtube-logo-icon\">\u25b6<\/div>\r\n                        <div class=\"ytv-logo-text\">YouTube Thumbnail Viewer<\/div>\r\n                        <div class=\"ytv-camera-logo-icon\">\ud83d\udcf8<\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"ytv-subtitle\">View and Download high-quality thumbnails from YouTube videos instantly<\/div>\r\n\r\n                <div class=\"ytv-features-bar\">\r\n                    <div class=\"ytv-feature-item\">\r\n                        <div class=\"ytv-feature-icon\">\u2713<\/div>\r\n                        <span>All Resolutions<\/span>\r\n                    <\/div>\r\n                    <div class=\"ytv-feature-item\">\r\n                        <div class=\"ytv-feature-icon\">\u2713<\/div>\r\n                        <span>Instant Download<\/span>\r\n                    <\/div>\r\n                    <div class=\"ytv-feature-item\">\r\n                        <div class=\"ytv-feature-icon\">\u2713<\/div>\r\n                        <span>High Quality<\/span>\r\n                    <\/div>\r\n                    <div class=\"ytv-feature-item\">\r\n                        <div class=\"ytv-feature-icon\">\u2713<\/div>\r\n                        <span>No Watermark<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"ytv-input-section\">\r\n                <div class=\"ytv-input-group\">\r\n                    <input type=\"text\" class=\"ytv-url-input\"\r\n                        placeholder=\"https:\/\/www.youtube.com\/watch?v=dQw4w9WgXcQ (Paste YouTube URL here)\"\r\n                        id=\"ytv-urlInput\">\r\n                    <button class=\"ytv-fetch-btn\" onclick=\"ytv_fetchThumbnails()\" id=\"ytv-fetchBtn\">\r\n                        <span id=\"ytv-btnText\">\ud83d\udcf8 Get Thumbnails<\/span>\r\n                    <\/button>\r\n                <\/div>\r\n\r\n                <div class=\"ytv-loading\" id=\"ytv-loading\">\r\n                    <div class=\"ytv-spinner\"><\/div>\r\n                    <div>\ud83d\uddbc\ufe0f Fetching thumbnails...<\/div>\r\n                <\/div>\r\n\r\n                <div class=\"ytv-error-message\" id=\"ytv-errorMessage\"><\/div>\r\n            <\/div>\r\n\r\n            <div class=\"ytv-thumbnails-preview-section\" id=\"ytv-thumbnailsPreview\">\r\n                <div class=\"ytv-video-info-header\">\r\n                    <div class=\"ytv-video-preview-card\">\r\n                        <img decoding=\"async\" src=\"\/placeholder.svg\" alt=\"Video Thumbnail\" class=\"ytv-video-thumbnail-preview\"\r\n                            id=\"ytv-mainThumbnail\">\r\n                        <div class=\"ytv-video-details\">\r\n                            <h2 class=\"ytv-video-title\" id=\"ytv-videoTitle\">Video Title<\/h2>\r\n                            <div class=\"ytv-video-channel\" id=\"ytv-videoChannel\">Channel Name<\/div>\r\n                        <\/div>\r\n                        <div class=\"ytv-video-stats\">\r\n                            <div class=\"ytv-stat-item\">\r\n                                <div class=\"ytv-stat-icon\">\ud83d\udcf8<\/div>\r\n                                <span id=\"ytv-thumbnailCount\">5 Thumbnails<\/span>\r\n                            <\/div>\r\n                            <div class=\"ytv-stat-item\">\r\n                                <div class=\"ytv-stat-icon\">\u26a1<\/div>\r\n                                <span>Instant Download<\/span>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"ytv-thumbnails-grid\" id=\"ytv-thumbnailsGrid\">\r\n                    <!-- Thumbnails will be populated here -->\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"ytv-preview-modal\" id=\"ytv-previewModal\">\r\n            <div class=\"ytv-preview-modal-content\">\r\n                <div class=\"ytv-preview-modal-header\">\r\n                    <div class=\"ytv-preview-modal-title\">Thumbnail Preview<\/div>\r\n                    <button class=\"ytv-preview-modal-close\" onclick=\"ytv_closePreviewModal()\">\u00d7<\/button>\r\n                <\/div>\r\n                <div class=\"ytv-preview-modal-body\">\r\n                    <img decoding=\"async\" src=\"\" alt=\"Thumbnail Preview\" class=\"ytv-preview-image\" id=\"ytv-previewImage\">\r\n                    <div class=\"ytv-preview-info\">\r\n                        <div class=\"ytv-preview-info-item\">\r\n                            <div class=\"ytv-preview-info-label\">Quality<\/div>\r\n                            <div class=\"ytv-preview-info-value\" id=\"ytv-previewQuality\">High Quality<\/div>\r\n                        <\/div>\r\n                        <div class=\"ytv-preview-info-item\">\r\n                            <div class=\"ytv-preview-info-label\">Resolution<\/div>\r\n                            <div class=\"ytv-preview-info-value\" id=\"ytv-previewResolution\">480\u00d7360<\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <button class=\"ytv-preview-download-btn\" onclick=\"ytv_downloadFromPreview()\">\r\n                        <span>\ud83d\udce5<\/span>\r\n                        <span>Download<\/span>\r\n                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n    <script src=\"https:\/\/tools.xrespond.com\/api\/rate-limit-handler.js\"><\/script>\r\n<script src=\"https:\/\/tools.xrespond.com\/api\/js\/client-ip-detector.js\"><\/script>\r\n \r\n    <script>\r\n        let ytv_currentVideoData = null;\r\n        let ytv_currentPreviewData = null;\r\n\r\n        \/\/ Prefixing all functions to avoid global scope conflicts\r\n        function ytv_isValidYouTubeURL(url) {\r\n            const patterns = [\r\n                \/^https:\\\/\\\/(?:www\\.)?youtube\\.com\\\/watch\\?v=[\\w-]+\/,\r\n                \/^https:\\\/\\\/(?:www\\.)?youtube\\.com\\\/embed\\\/[\\w-]+\/,\r\n                \/^https:\\\/\\\/(?:www\\.)?youtube\\.com\\\/v\\\/[\\w-]+\/,\r\n                \/^https:\\\/\\\/youtu\\.be\\\/[\\w-]+\/\r\n            ];\r\n            return patterns.some(pattern => pattern.test(url));\r\n        }\r\n\r\n        function ytv_extractVideoId(url) {\r\n            const patterns = [\r\n                \/youtube\\.com\\\/watch\\?v=([^&\\n?#]+)\/,\r\n                \/youtube\\.com\\\/embed\\\/([^&\\n?#]+)\/,\r\n                \/youtube\\.com\\\/v\\\/([^&\\n?#]+)\/,\r\n                \/youtu\\.be\\\/([^&\\n?#]+)\/\r\n            ];\r\n\r\n            for (const pattern of patterns) {\r\n                const match = url.match(pattern);\r\n                if (match) return match[1];\r\n            }\r\n            return null;\r\n        }\r\n\r\n        function ytv_showError(message) {\r\n            const errorDiv = document.getElementById('ytv-errorMessage');\r\n            const urlInput = document.getElementById('ytv-urlInput');\r\n\r\n            errorDiv.textContent = message;\r\n            errorDiv.style.display = 'block';\r\n            urlInput.classList.add('ytv-error');\r\n\r\n            setTimeout(() => {\r\n                errorDiv.style.display = 'none';\r\n                urlInput.classList.remove('ytv-error');\r\n            }, 5000);\r\n        }\r\n\r\n        function ytv_hideError() {\r\n            const errorDiv = document.getElementById('ytv-errorMessage');\r\n            const urlInput = document.getElementById('ytv-urlInput');\r\n\r\n            errorDiv.style.display = 'none';\r\n            urlInput.classList.remove('ytv-error');\r\n        }\r\n\r\n        function ytv_showLoading() {\r\n            document.getElementById('ytv-loading').style.display = 'block';\r\n            document.getElementById('ytv-fetchBtn').disabled = true;\r\n            document.getElementById('ytv-btnText').textContent = '\u23f3 Processing...';\r\n        }\r\n\r\n        function ytv_hideLoading() {\r\n            document.getElementById('ytv-loading').style.display = 'none';\r\n            document.getElementById('ytv-fetchBtn').disabled = false;\r\n            document.getElementById('ytv-btnText').textContent = '\ud83d\udcf8 Get Thumbnails';\r\n        }\r\n\r\n        function ytv_showNotification(message) {\r\n            const wrapper = document.getElementById('ytv-widget-wrapper');\r\n            const notification = document.createElement('div');\r\n            notification.className = 'ytv-notification';\r\n            notification.textContent = message;\r\n            wrapper.appendChild(notification);\r\n\r\n            setTimeout(() => notification.classList.add('ytv-show'), 100);\r\n            setTimeout(() => {\r\n                notification.classList.remove('ytv-show');\r\n                setTimeout(() => wrapper.removeChild(notification), 300);\r\n            }, 3000);\r\n        }\r\n\r\n        function ytv_createThumbnailCard(thumbnail) {\r\n            return `\r\n                <div class=\"ytv-thumbnail-card\">\r\n                    <div class=\"ytv-thumbnail-header\">\r\n                        <div class=\"ytv-thumbnail-quality-badge\">${thumbnail.quality}<\/div>\r\n                        <div class=\"ytv-thumbnail-resolution\">${thumbnail.resolution}<\/div>\r\n                    <\/div>\r\n                    <div class=\"ytv-thumbnail-image-container\">\r\n                        <img decoding=\"async\" src=\"${thumbnail.url}\" alt=\"${thumbnail.quality} Thumbnail\" class=\"ytv-thumbnail-image\">\r\n                        <div class=\"ytv-thumbnail-overlay\">\r\n                            <div class=\"ytv-overlay-content\">\r\n                                <div class=\"ytv-overlay-title\">${thumbnail.quality}<\/div>\r\n                                <div class=\"ytv-overlay-subtitle\">${thumbnail.resolution}<\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"ytv-thumbnail-info\">\r\n                        <div class=\"ytv-info-item\"><div class=\"ytv-info-icon\">\ud83d\udcd0<\/div><span>${thumbnail.resolution}<\/span><\/div>\r\n                        <div class=\"ytv-info-item\"><div class=\"ytv-info-icon\">\ud83d\udcc1<\/div><span>JPG<\/span><\/div>\r\n                        <div class=\"ytv-info-item\"><div class=\"ytv-info-icon\">\u26a1<\/div><span>Instant<\/span><\/div>\r\n                        <div class=\"ytv-info-item\"><div class=\"ytv-info-icon\">\ud83c\udfaf<\/div><span>HD Quality<\/span><\/div>\r\n                    <\/div>\r\n                    <div class=\"ytv-thumbnail-actions\">\r\n                        <button class=\"ytv-thumbnail-preview-btn\" onclick=\"ytv_previewThumbnail('${thumbnail.url}', '${thumbnail.quality}', '${thumbnail.resolution}', '${thumbnail.filename}')\">\r\n                            <span>\ud83d\udc41\ufe0f<\/span><span>Preview<\/span>\r\n                        <\/button>\r\n                        <button class=\"ytv-thumbnail-download-btn\" onclick=\"ytv_downloadThumbnail('${thumbnail.url}', '${thumbnail.filename}', '${thumbnail.quality}')\">\r\n                            <span class=\"ytv-download-icon\">\ud83d\udce5<\/span><span>Download ${thumbnail.quality}<\/span>\r\n                        <\/button>\r\n                    <\/div>\r\n                <\/div>`;\r\n        }\r\n\r\n        async function ytv_downloadThumbnail(url, filename, quality) {\r\n            try {\r\n                ytv_showNotification(`\u23f3 Downloading ${quality} thumbnail...`);\r\n                const response = await fetch(url);\r\n                if (!response.ok) throw new Error('Failed to fetch image');\r\n                const blob = await response.blob();\r\n                const downloadUrl = URL.createObjectURL(blob);\r\n                const a = document.createElement('a');\r\n                a.href = downloadUrl;\r\n                a.download = filename;\r\n                document.body.appendChild(a);\r\n                a.click();\r\n                document.body.removeChild(a);\r\n                setTimeout(() => URL.revokeObjectURL(downloadUrl), 100);\r\n                ytv_showNotification(`\u2705 ${quality} thumbnail downloaded!`);\r\n            } catch (error) {\r\n                console.error('Download failed:', error);\r\n                ytv_showNotification(`\u274c Download failed. Please try again.`);\r\n            }\r\n        }\r\n\r\n        function ytv_previewThumbnail(url, quality, resolution, filename) {\r\n            ytv_currentPreviewData = { url, quality, resolution, filename };\r\n            document.getElementById('ytv-previewImage').src = url;\r\n            document.getElementById('ytv-previewQuality').textContent = quality;\r\n            document.getElementById('ytv-previewResolution').textContent = resolution;\r\n            document.getElementById('ytv-previewModal').style.display = 'block';\r\n        }\r\n\r\n        function ytv_closePreviewModal() {\r\n            document.getElementById('ytv-previewModal').style.display = 'none';\r\n            ytv_currentPreviewData = null;\r\n        }\r\n\r\n        async function ytv_downloadFromPreview() {\r\n            if (ytv_currentPreviewData) {\r\n                await ytv_downloadThumbnail(ytv_currentPreviewData.url, ytv_currentPreviewData.filename, ytv_currentPreviewData.quality);\r\n                ytv_closePreviewModal();\r\n            }\r\n        }\r\n\r\n        function ytv_fetchThumbnails() {\r\n            const urlInput = document.getElementById('ytv-urlInput');\r\n            const url = urlInput.value.trim();\r\n\r\n            if (!url) { ytv_showError('Please enter a YouTube URL'); return; }\r\n            if (!ytv_isValidYouTubeURL(url)) { ytv_showError('\u274c Invalid YouTube URL format!'); return; }\r\n            const videoId = ytv_extractVideoId(url);\r\n            if (!videoId) { ytv_showError('Could not extract video ID from URL'); return; }\r\n\r\n            ytv_hideError();\r\n            document.getElementById('ytv-thumbnailsPreview').style.display = 'none';\r\n            ytv_showLoading();\r\n\r\n            setTimeout(() => {\r\n                const thumbnailSizes = [\r\n                    { key: 'maxresdefault', quality: 'Maximum', resolution: '1280\u00d7720' },\r\n                    { key: 'hqdefault', quality: 'High', resolution: '480\u00d7360' },\r\n                    { key: 'mqdefault', quality: 'Medium', resolution: '320\u00d7180' },\r\n                    { key: 'sddefault', quality: 'Standard', resolution: '640\u00d7480' },\r\n                    { key: 'default', quality: 'Default', resolution: '120\u00d790' }\r\n                ];\r\n                const thumbnails = thumbnailSizes.map(size => ({\r\n                    url: `https:\/\/img.youtube.com\/vi\/${videoId}\/${size.key}.jpg`,\r\n                    quality: size.quality,\r\n                    resolution: size.resolution,\r\n                    filename: `youtube-${videoId}-${size.quality.toLowerCase()}.jpg`\r\n                }));\r\n\r\n                ytv_currentVideoData = { videoId, url, title: `YouTube Video (${videoId})`, thumbnails };\r\n                ytv_displayThumbnails(thumbnails);\r\n                ytv_hideLoading();\r\n                ytv_showNotification('\u2705 Thumbnails loaded successfully!');\r\n            }, 1000);\r\n        }\r\n\r\n        function ytv_displayThumbnails(thumbnails) {\r\n            document.getElementById('ytv-videoTitle').textContent = `Thumbnails for Video ID: ${ytv_currentVideoData.videoId}`;\r\n            document.getElementById('ytv-videoChannel').textContent = 'YouTube Video';\r\n            document.getElementById('ytv-thumbnailCount').textContent = `${thumbnails.length} Qualities`;\r\n            document.getElementById('ytv-mainThumbnail').src = `https:\/\/img.youtube.com\/vi\/${ytv_currentVideoData.videoId}\/hqdefault.jpg`;\r\n            document.getElementById('ytv-thumbnailsGrid').innerHTML = thumbnails.map(ytv_createThumbnailCard).join('');\r\n            document.getElementById('ytv-thumbnailsPreview').style.display = 'block';\r\n        }\r\n\r\n        \/\/ --- Event Listeners ---\r\n        document.getElementById('ytv-urlInput').addEventListener('keypress', function (e) {\r\n            if (e.key === 'Enter') ytv_fetchThumbnails();\r\n        });\r\n        document.getElementById('ytv-urlInput').addEventListener('input', function (e) {\r\n            const url = e.target.value.trim();\r\n            if (url && !ytv_isValidYouTubeURL(url)) {\r\n                e.target.classList.add('ytv-error');\r\n            } else {\r\n                e.target.classList.remove('ytv-error');\r\n                ytv_hideError();\r\n            }\r\n        });\r\n        document.getElementById('ytv-previewModal').addEventListener('click', function (e) {\r\n            if (e.target === this) ytv_closePreviewModal();\r\n        });\r\n\r\n        \/\/ Auto-focus on input on page load\r\n        document.getElementById('ytv-urlInput').focus();\r\n    <\/script>\r\n<style>\r\n        \/* Prefixed CSS Variables *\/\r\n        :root {\r\n            --yt-thumb-primary: #FF0000;\r\n            --yt-thumb-secondary: #282828;\r\n            --yt-thumb-accent: #f1f1f1;\r\n            --yt-thumb-text-dark: #030303;\r\n            --yt-thumb-text-light: #606060;\r\n            --yt-thumb-bg-light: #f9f9f9;\r\n            --yt-thumb-border-light: #e5e5e5;\r\n            --yt-thumb-success: #34a853;\r\n            --yt-thumb-warning: #fbbc05;\r\n        }\r\n        \r\n        \r\n        \/* Prefixed Section Styles *\/\r\n        .yt-thumb-section {\r\n            padding: 80px 0;\r\n            position: relative;\r\n        }\r\n        \r\n        .yt-thumb-section-heading {\r\n            font-size: 2.75rem;\r\n            font-weight: 700;\r\n            margin-bottom: 1rem;\r\n            text-align: center;\r\n        }\r\n        \r\n        .yt-thumb-section-description {\r\n            font-size: 1.25rem;\r\n            color: var(--yt-thumb-text-light);\r\n            text-align: center;\r\n            max-width: 700px;\r\n            margin: 0 auto 3rem;\r\n        }\r\n        \r\n        \/* Prefixed Hero Section *\/\r\n        #yt-thumb-hero {\r\n            background: linear-gradient(135deg, rgba(255, 0, 0, 0.9), rgba(40, 40, 40, 0.95));\r\n            color: white;\r\n            padding: 120px 0;\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n        \r\n        #yt-thumb-hero::before {\r\n            content: \"\";\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            background-image: \r\n                radial-gradient(circle at 20% 50%, rgba(255,255,255,0.1) 0%, transparent 50%),\r\n                radial-gradient(circle at 80% 80%, rgba(255,255,255,0.1) 0%, transparent 50%),\r\n                radial-gradient(circle at 40% 20%, rgba(255,255,255,0.05) 0%, transparent 50%);\r\n        }\r\n        \r\n        .yt-thumb-hero-content {\r\n            position: relative;\r\n            z-index: 2;\r\n        }\r\n        \r\n        .yt-thumb-hero-title {\r\n            font-size: 3.5rem;\r\n            font-weight: 700;\r\n            margin-bottom: 1.5rem;\r\n            line-height: 1.2;\r\n        }\r\n        \r\n        .yt-thumb-hero-subtitle {\r\n            font-size: 1.5rem;\r\n            margin-bottom: 3rem;\r\n            opacity: 0.95;\r\n            font-weight: 400;\r\n        }\r\n        \r\n        .yt-thumb-url-container {\r\n            max-width: 700px;\r\n            margin: 0 auto 3rem;\r\n            position: relative;\r\n        }\r\n        \r\n        .yt-thumb-url-input {\r\n            width: 100%;\r\n            padding: 18px 60px 18px 25px;\r\n            border-radius: 50px;\r\n            border: none;\r\n            font-size: 1.1rem;\r\n            box-shadow: 0 10px 30px rgba(0,0,0,0.1);\r\n            font-family: 'Fira Sans', sans-serif;\r\n        }\r\n        \r\n        .yt-thumb-url-btn {\r\n            position: absolute;\r\n            right: 8px;\r\n            top: 50%;\r\n            transform: translateY(-50%);\r\n            background-color: var(--yt-thumb-primary);\r\n            color: white;\r\n            border: none;\r\n            border-radius: 50%;\r\n            width: 45px;\r\n            height: 45px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            font-size: 1.2rem;\r\n            transition: all 0.3s ease;\r\n        }\r\n        \r\n        .yt-thumb-url-btn:hover {\r\n            background-color: var(--yt-thumb-secondary);\r\n            transform: translateY(-50%) scale(1.05);\r\n        }\r\n        \r\n        .yt-thumb-btn-container {\r\n            display: flex;\r\n            justify-content: center;\r\n            gap: 15px;\r\n            margin-bottom: 3rem;\r\n        }\r\n        \r\n        .yt-thumb-btn-hero {\r\n            padding: 14px 32px;\r\n            font-size: 1.1rem;\r\n            font-weight: 600;\r\n            border-radius: 50px;\r\n            transition: all 0.3s ease;\r\n            text-decoration: none;\r\n            display: inline-block;\r\n        }\r\n        \r\n        .yt-thumb-btn-primary-hero {\r\n            background-color: white;\r\n            color: var(--yt-thumb-primary);\r\n            border: none;\r\n            box-shadow: 0 4px 15px rgba(0,0,0,0.1);\r\n        }\r\n        \r\n        .yt-thumb-btn-primary-hero:hover {\r\n            transform: translateY(-3px);\r\n            box-shadow: 0 8px 25px rgba(0,0,0,0.15);\r\n            color: var(--yt-thumb-primary);\r\n        }\r\n        \r\n        .yt-thumb-btn-secondary-hero {\r\n            background-color: transparent;\r\n            color: white;\r\n            border: 2px solid white;\r\n        }\r\n        \r\n        .yt-thumb-btn-secondary-hero:hover {\r\n            background-color: white;\r\n            color: var(--yt-thumb-primary);\r\n            transform: translateY(-3px);\r\n        }\r\n        \r\n        .yt-thumb-thumbnail-preview {\r\n            max-width: 500px;\r\n            margin: 0 auto;\r\n            background-color: rgba(255, 255, 255, 0.1);\r\n            backdrop-filter: blur(10px);\r\n            border-radius: 16px;\r\n            padding: 20px;\r\n            box-shadow: 0 10px 30px rgba(0,0,0,0.2);\r\n            border: 1px solid rgba(255, 255, 255, 0.2);\r\n        }\r\n        \r\n        .yt-thumb-thumbnail-img {\r\n            width: 100%;\r\n            aspect-ratio: 16\/9;\r\n            background-color: rgba(0,0,0,0.2);\r\n            border-radius: 8px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            color: white;\r\n            font-size: 3rem;\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n        \r\n        .yt-thumb-thumbnail-img::before {\r\n            content: \"\";\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            background: linear-gradient(135deg, rgba(255,0,0,0.3), rgba(40,40,40,0.3));\r\n        }\r\n        \r\n        .yt-thumb-thumbnail-overlay {\r\n            position: absolute;\r\n            bottom: 10px;\r\n            right: 10px;\r\n            background-color: rgba(0,0,0,0.7);\r\n            color: white;\r\n            padding: 5px 10px;\r\n            border-radius: 4px;\r\n            font-size: 0.8rem;\r\n            z-index: 1;\r\n        }\r\n        \r\n        .yt-thumb-floating-icon {\r\n            position: absolute;\r\n            opacity: 0.15;\r\n            animation: float 15s infinite ease-in-out;\r\n            color: white;\r\n        }\r\n        \r\n        .yt-thumb-floating-icon:nth-child(1) {\r\n            top: 15%;\r\n            left: 10%;\r\n            font-size: 40px;\r\n            animation-delay: 0s;\r\n        }\r\n        \r\n        .yt-thumb-floating-icon:nth-child(2) {\r\n            top: 60%;\r\n            right: 10%;\r\n            font-size: 60px;\r\n            animation-delay: 2s;\r\n        }\r\n        \r\n        .yt-thumb-floating-icon:nth-child(3) {\r\n            bottom: 15%;\r\n            left: 20%;\r\n            font-size: 50px;\r\n            animation-delay: 5s;\r\n        }\r\n        \r\n        @keyframes float {\r\n            0%, 100% {\r\n                transform: translateY(0) rotate(0deg);\r\n            }\r\n            50% {\r\n                transform: translateY(-20px) rotate(10deg);\r\n            }\r\n        }\r\n        \r\n        \/* Prefixed How It Works Section *\/\r\n        #yt-thumb-how-it-works {\r\n            background-color: var(--yt-thumb-bg-light);\r\n        }\r\n        \r\n        .yt-thumb-steps-container {\r\n            max-width: 1000px;\r\n            margin: 0 auto;\r\n        }\r\n        \r\n        .yt-thumb-step-card {\r\n            background-color: white;\r\n            border-radius: 16px;\r\n            padding: 40px 30px;\r\n            height: 100%;\r\n            box-shadow: 0 5px 20px rgba(0,0,0,0.05);\r\n            transition: all 0.3s ease;\r\n            text-align: center;\r\n            border: 1px solid var(--yt-thumb-border-light);\r\n            position: relative;\r\n        }\r\n        \r\n        .yt-thumb-step-card:hover {\r\n            transform: translateY(-10px);\r\n            box-shadow: 0 15px 35px rgba(0,0,0,0.1);\r\n        }\r\n        \r\n        .yt-thumb-step-number {\r\n            display: inline-flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            width: 60px;\r\n            height: 60px;\r\n            background-color: var(--yt-thumb-primary);\r\n            color: white;\r\n            border-radius: 50%;\r\n            font-size: 1.5rem;\r\n            font-weight: 700;\r\n            margin-bottom: 25px;\r\n        }\r\n        \r\n        .yt-thumb-step-icon {\r\n            font-size: 3rem;\r\n            color: var(--yt-thumb-primary);\r\n            margin-bottom: 20px;\r\n        }\r\n        \r\n        .yt-thumb-step-title {\r\n            font-size: 1.5rem;\r\n            font-weight: 600;\r\n            margin-bottom: 15px;\r\n            color: var(--yt-thumb-text-dark);\r\n        }\r\n        \r\n        .yt-thumb-step-description {\r\n            font-size: 1.1rem;\r\n            color: var(--yt-thumb-text-light);\r\n            line-height: 1.6;\r\n        }\r\n        \r\n        \/* Prefixed Live Preview Panel *\/\r\n        #yt-thumb-preview {\r\n            background-color: var(--yt-thumb-bg-light);\r\n        }\r\n        \r\n        .yt-thumb-preview-container {\r\n            max-width: 1000px;\r\n            margin: 0 auto;\r\n            background-color: white;\r\n            border-radius: 16px;\r\n            overflow: hidden;\r\n            box-shadow: 0 5px 20px rgba(0,0,0,0.05);\r\n        }\r\n        \r\n        .yt-thumb-preview-header {\r\n            background-color: var(--yt-thumb-primary);\r\n            color: white;\r\n            padding: 20px 30px;\r\n            font-size: 1.5rem;\r\n            font-weight: 600;\r\n        }\r\n        \r\n        .yt-thumb-preview-content {\r\n            padding: 30px;\r\n        }\r\n        \r\n        .yt-thumb-preview-display {\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: center;\r\n            margin-bottom: 30px;\r\n        }\r\n        \r\n        .yt-thumb-preview-img {\r\n            max-width: 100%;\r\n            max-height: 400px;\r\n            border-radius: 8px;\r\n            box-shadow: 0 5px 15px rgba(0,0,0,0.1);\r\n            margin-bottom: 20px;\r\n        }\r\n        \r\n        .yt-thumb-preview-options {\r\n            display: flex;\r\n            flex-wrap: wrap;\r\n            justify-content: center;\r\n            gap: 15px;\r\n            margin-bottom: 20px;\r\n        }\r\n        \r\n        .yt-thumb-format-option {\r\n            background-color: var(--yt-thumb-bg-light);\r\n            border: 1px solid var(--yt-thumb-border-light);\r\n            border-radius: 8px;\r\n            padding: 10px 15px;\r\n            cursor: pointer;\r\n            transition: all 0.3s ease;\r\n            text-align: center;\r\n            min-width: 120px;\r\n        }\r\n        \r\n        .yt-thumb-format-option:hover, .yt-thumb-format-option.active {\r\n            background-color: var(--yt-thumb-primary);\r\n            color: white;\r\n            border-color: var(--yt-thumb-primary);\r\n        }\r\n        \r\n        .yt-thumb-format-name {\r\n            font-weight: 600;\r\n            margin-bottom: 5px;\r\n        }\r\n        \r\n        .yt-thumb-format-size {\r\n            font-size: 0.9rem;\r\n            opacity: 0.8;\r\n        }\r\n        \r\n        .yt-thumb-preview-info {\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n            background-color: var(--yt-thumb-bg-light);\r\n            padding: 15px 20px;\r\n            border-radius: 8px;\r\n            margin-bottom: 20px;\r\n        }\r\n        \r\n        .yt-thumb-filename {\r\n            font-weight: 600;\r\n            color: var(--yt-thumb-text-dark);\r\n        }\r\n        \r\n        .yt-thumb-download-btn {\r\n            background-color: var(--yt-thumb-primary);\r\n            color: white;\r\n            border: none;\r\n            border-radius: 8px;\r\n            padding: 10px 20px;\r\n            font-weight: 600;\r\n            transition: all 0.3s ease;\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 8px;\r\n        }\r\n        \r\n        .yt-thumb-download-btn:hover {\r\n            background-color: var(--yt-thumb-secondary);\r\n            transform: translateY(-2px);\r\n        }\r\n        \r\n        .yt-thumb-warning {\r\n            font-size: 0.9rem;\r\n            color: var(--yt-thumb-text-light);\r\n            font-style: italic;\r\n            text-align: center;\r\n        }\r\n        \r\n        \/* Prefixed Features Section *\/\r\n        .yt-thumb-features-container {\r\n            max-width: 1000px;\r\n            margin: 0 auto;\r\n        }\r\n        \r\n        .yt-thumb-feature-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n            gap: 20px;\r\n        }\r\n        \r\n        .yt-thumb-feature-card {\r\n            background-color: white;\r\n            border-radius: 12px;\r\n            padding: 25px;\r\n            box-shadow: 0 3px 10px rgba(0,0,0,0.05);\r\n            transition: all 0.3s ease;\r\n            height: 100%;\r\n            display: flex;\r\n            align-items: flex-start;\r\n        }\r\n        \r\n        .yt-thumb-feature-card:hover {\r\n            transform: translateY(-5px);\r\n            box-shadow: 0 8px 20px rgba(0,0,0,0.1);\r\n        }\r\n        \r\n        .yt-thumb-feature-icon {\r\n            font-size: 2rem;\r\n            color: var(--yt-thumb-primary);\r\n            margin-right: 15px;\r\n            min-width: 40px;\r\n            text-align: center;\r\n        }\r\n        \r\n        .yt-thumb-feature-content {\r\n            flex: 1;\r\n        }\r\n        \r\n        .yt-thumb-feature-title {\r\n            font-size: 1.2rem;\r\n            font-weight: 600;\r\n            margin-bottom: 8px;\r\n            color: var(--yt-thumb-text-dark);\r\n        }\r\n        \r\n        .yt-thumb-feature-description {\r\n            font-size: 1rem;\r\n            color: var(--yt-thumb-text-light);\r\n            line-height: 1.5;\r\n        }\r\n        \r\n        \/* Prefixed FAQ Section *\/\r\n        #yt-thumb-faq {\r\n            background-color: var(--yt-thumb-bg-light);\r\n        }\r\n        \r\n        .yt-thumb-faq-container {\r\n            max-width: 800px;\r\n            margin: 0 auto;\r\n        }\r\n        \r\n        .yt-thumb-accordion-item {\r\n            border: none;\r\n            margin-bottom: 15px;\r\n            border-radius: 12px;\r\n            overflow: hidden;\r\n            box-shadow: 0 3px 10px rgba(0,0,0,0.05);\r\n        }\r\n        \r\n        .yt-thumb-accordion-button {\r\n            font-size: 1.2rem;\r\n            font-weight: 600;\r\n            padding: 20px 25px;\r\n            background-color: white;\r\n            color: var(--yt-thumb-text-dark);\r\n            border: none;\r\n            box-shadow: none;\r\n        }\r\n        \r\n        .yt-thumb-accordion-button:not(.collapsed) {\r\n            color: var(--yt-thumb-primary);\r\n            background-color: white;\r\n            box-shadow: none;\r\n        }\r\n        \r\n        .yt-thumb-accordion-button:focus {\r\n            box-shadow: none;\r\n            border: none;\r\n        }\r\n        \r\n        .yt-thumb-accordion-button::after {\r\n            background-image: url(\"data:image\/svg+xml,%3csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 16 16' fill='%23FF0000'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'\/%3e%3c\/svg%3e\");\r\n        }\r\n        \r\n        .yt-thumb-accordion-body {\r\n            padding: 5px 25px 25px;\r\n            font-size: 1.1rem;\r\n            color: var(--yt-thumb-text-light);\r\n            line-height: 1.7;\r\n        }\r\n        \r\n        \/* Prefixed Modal Styles *\/\r\n        .yt-thumb-modal-content {\r\n            border-radius: 16px;\r\n            border: none;\r\n            box-shadow: 0 20px 60px rgba(0,0,0,0.2);\r\n        }\r\n        \r\n        .yt-thumb-modal-header {\r\n            background: linear-gradient(135deg, var(--yt-thumb-primary), var(--yt-thumb-secondary));\r\n            color: white;\r\n            border-radius: 16px 16px 0 0;\r\n            padding: 25px 30px;\r\n            border: none;\r\n        }\r\n        \r\n        .yt-thumb-modal-title {\r\n            font-size: 1.5rem;\r\n            font-weight: 700;\r\n        }\r\n        \r\n        .yt-thumb-btn-close {\r\n            filter: brightness(0) invert(1);\r\n            opacity: 0.8;\r\n        }\r\n        \r\n        .yt-thumb-btn-close:hover {\r\n            opacity: 1;\r\n        }\r\n        \r\n        .yt-thumb-modal-body {\r\n            padding: 30px;\r\n        }\r\n        \r\n        .yt-thumb-form-control {\r\n            border-radius: 10px;\r\n            border: 1px solid var(--yt-thumb-border-light);\r\n            padding: 12px 15px;\r\n            font-size: 1.1rem;\r\n            font-family: 'Fira Sans', sans-serif;\r\n        }\r\n        \r\n        .yt-thumb-form-control:focus {\r\n            border-color: var(--yt-thumb-primary);\r\n            box-shadow: 0 0 0 0.2rem rgba(255, 0, 0, 0.25);\r\n        }\r\n        \r\n        .yt-thumb-form-check-input {\r\n            width: 1.2em;\r\n            height: 1.2em;\r\n            margin-top: 0.3em;\r\n        }\r\n        \r\n        .yt-thumb-form-check-label {\r\n            font-size: 1.1rem;\r\n            padding-left: 10px;\r\n        }\r\n        \r\n        .yt-thumb-modal-footer {\r\n            padding: 20px 30px;\r\n            border: none;\r\n        }\r\n        \r\n        .yt-thumb-btn-modal {\r\n            padding: 10px 25px;\r\n            font-size: 1.1rem;\r\n            font-weight: 600;\r\n            border-radius: 8px;\r\n            transition: all 0.3s ease;\r\n        }\r\n        \r\n        \/* Prefixed Responsive Design *\/\r\n        @media (max-width: 768px) {\r\n            .yt-thumb-section {\r\n                padding: 60px 0;\r\n            }\r\n            \r\n            .yt-thumb-section-heading {\r\n                font-size: 2.2rem;\r\n            }\r\n            \r\n            .yt-thumb-section-description {\r\n                font-size: 1.1rem;\r\n            }\r\n            \r\n            .yt-thumb-hero-title {\r\n                font-size: 2.5rem;\r\n            }\r\n            \r\n            .yt-thumb-hero-subtitle {\r\n                font-size: 1.2rem;\r\n            }\r\n            \r\n            .yt-thumb-btn-container {\r\n                flex-direction: column;\r\n                align-items: center;\r\n            }\r\n            \r\n            .yt-thumb-btn-hero {\r\n                width: 250px;\r\n            }\r\n            \r\n            .yt-thumb-step-card {\r\n                margin-bottom: 30px;\r\n            }\r\n            \r\n            .yt-thumb-preview-options {\r\n                flex-direction: column;\r\n                align-items: center;\r\n            }\r\n            \r\n            .yt-thumb-preview-info {\r\n                flex-direction: column;\r\n                gap: 15px;\r\n            }\r\n        }\r\n    <\/style>\r\n    <!-- Prefixed Hero Section -->\r\n  \r\n\r\n    <!-- Prefixed How It Works Section -->\r\n    <section id=\"yt-thumb-how-it-works\" class=\"yt-thumb-section\">\r\n        <div class=\"container\">\r\n            <h2 class=\"yt-thumb-section-heading\" data-aos=\"fade-up\">How It Works<\/h2>\r\n            <p class=\"yt-thumb-section-description\" data-aos=\"fade-up\" data-aos-delay=\"100\">Simple steps to view and download YouTube thumbnails<\/p>\r\n            \r\n            <div class=\"yt-thumb-steps-container\">\r\n                <div class=\"row g-4\">\r\n                    <div class=\"col-md-4\" data-aos=\"fade-up\" data-aos-delay=\"200\">\r\n                        <div class=\"yt-thumb-step-card\">\r\n                            <div class=\"yt-thumb-step-number\">1<\/div>\r\n                            <div class=\"yt-thumb-step-icon\">\r\n                                <i class=\"fas fa-clipboard\"><\/i>\r\n                            <\/div>\r\n                            <h3 class=\"yt-thumb-step-title\">Paste the YouTube video link<\/h3>\r\n                            <p class=\"yt-thumb-step-description\">Copy and paste the URL of the YouTube video you want to extract the thumbnail from<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"col-md-4\" data-aos=\"fade-up\" data-aos-delay=\"300\">\r\n                        <div class=\"yt-thumb-step-card\">\r\n                            <div class=\"yt-thumb-step-number\">2<\/div>\r\n                            <div class=\"yt-thumb-step-icon\">\r\n                                <i class=\"fas fa-search\"><\/i>\r\n                            <\/div>\r\n                            <h3 class=\"yt-thumb-step-title\">Click \"View\" to fetch the thumbnail<\/h3>\r\n                            <p class=\"yt-thumb-step-description\">Our tool instantly retrieves the thumbnail in the highest available quality<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"col-md-4\" data-aos=\"fade-up\" data-aos-delay=\"400\">\r\n                        <div class=\"yt-thumb-step-card\">\r\n                            <div class=\"yt-thumb-step-number\">3<\/div>\r\n                            <div class=\"yt-thumb-step-icon\">\r\n                                <i class=\"fas fa-download\"><\/i>\r\n                            <\/div>\r\n                            <h3 class=\"yt-thumb-step-title\">Download the image in HD, SD, or preview mode<\/h3>\r\n                            <p class=\"yt-thumb-step-description\">Choose your preferred resolution and save the thumbnail to your device<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- Prefixed Live Preview Panel -->\r\n    <section id=\"yt-thumb-preview\" class=\"yt-thumb-section\">\r\n        <div class=\"container\">\r\n            <h2 class=\"yt-thumb-section-heading\" data-aos=\"fade-up\">Live Preview Panel<\/h2>\r\n            <p class=\"yt-thumb-section-description\" data-aos=\"fade-up\" data-aos-delay=\"100\">See and download YouTube thumbnails in different resolutions<\/p>\r\n            \r\n            <div class=\"yt-thumb-preview-container\" data-aos=\"fade-up\" data-aos-delay=\"200\">\r\n                <div class=\"yt-thumb-preview-header\">\r\n                    <i class=\"fas fa-image me-2\"><\/i> Thumbnail Preview\r\n                <\/div>\r\n                <div class=\"yt-thumb-preview-content\">\r\n                    <div class=\"yt-thumb-preview-display\">\r\n                        <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/youtube-thumbnail\/1280\/720.jpg\" alt=\"YouTube Thumbnail\" class=\"yt-thumb-preview-img\" id=\"yt-thumb-preview-img\">\r\n                        \r\n                        <div class=\"yt-thumb-preview-options\">\r\n                            <div class=\"yt-thumb-format-option active\" data-resolution=\"hd\">\r\n                                <div class=\"yt-thumb-format-name\">HD<\/div>\r\n                                <div class=\"yt-thumb-format-size\">1280\u00d7720<\/div>\r\n                            <\/div>\r\n                            <div class=\"yt-thumb-format-option\" data-resolution=\"medium\">\r\n                                <div class=\"yt-thumb-format-name\">Medium<\/div>\r\n                                <div class=\"yt-thumb-format-size\">480\u00d7360<\/div>\r\n                            <\/div>\r\n                            <div class=\"yt-thumb-format-option\" data-resolution=\"low\">\r\n                                <div class=\"yt-thumb-format-name\">Low<\/div>\r\n                                <div class=\"yt-thumb-format-size\">320\u00d7180<\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                        \r\n                        <div class=\"yt-thumb-preview-info\">\r\n                            <div class=\"yt-thumb-filename\" id=\"yt-thumb-filename\">youtube-thumbnail-hd.jpg<\/div>\r\n                            <button class=\"yt-thumb-download-btn\" id=\"yt-thumb-download-preview-btn\">\r\n                                <i class=\"fas fa-download\"><\/i> Download\r\n                            <\/button>\r\n                        <\/div>\r\n                        \r\n                        <p class=\"yt-thumb-warning\">Right-click has been disabled to protect content. Please use the download button.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- Prefixed Features Section -->\r\n    <section id=\"yt-thumb-features\" class=\"yt-thumb-section\">\r\n        <div class=\"container\">\r\n            <h2 class=\"yt-thumb-section-heading\" data-aos=\"fade-up\">Tool Features<\/h2>\r\n            <p class=\"yt-thumb-section-description\" data-aos=\"fade-up\" data-aos-delay=\"100\">Why our YouTube Thumbnail Viewer stands out<\/p>\r\n            \r\n            <div class=\"yt-thumb-features-container\">\r\n                <div class=\"yt-thumb-feature-grid\">\r\n                    <div class=\"yt-thumb-feature-card\" data-aos=\"fade-up\" data-aos-delay=\"200\">\r\n                        <div class=\"yt-thumb-feature-icon\">\r\n                            <i class=\"fas fa-user-times\"><\/i>\r\n                        <\/div>\r\n                        <div class=\"yt-thumb-feature-content\">\r\n                            <h3 class=\"yt-thumb-feature-title\">No login required<\/h3>\r\n                            <p class=\"yt-thumb-feature-description\">Use our tool without creating an account or logging in anywhere<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"yt-thumb-feature-card\" data-aos=\"fade-up\" data-aos-delay=\"300\">\r\n                        <div class=\"yt-thumb-feature-icon\">\r\n                            <i class=\"fas fa-mobile-alt\"><\/i>\r\n                        <\/div>\r\n                        <div class=\"yt-thumb-feature-content\">\r\n                            <h3 class=\"yt-thumb-feature-title\">Works on all devices<\/h3>\r\n                            <p class=\"yt-thumb-feature-description\">Fully responsive design that works perfectly on mobile, tablet, and desktop<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"yt-thumb-feature-card\" data-aos=\"fade-up\" data-aos-delay=\"400\">\r\n                        <div class=\"yt-thumb-feature-icon\">\r\n                            <i class=\"fas fa-ban\"><\/i>\r\n                        <\/div>\r\n                        <div class=\"yt-thumb-feature-content\">\r\n                            <h3 class=\"yt-thumb-feature-title\">No watermark<\/h3>\r\n                            <p class=\"yt-thumb-feature-description\">Download clean thumbnails without any watermarks or branding<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"yt-thumb-feature-card\" data-aos=\"fade-up\" data-aos-delay=\"500\">\r\n                        <div class=\"yt-thumb-feature-icon\">\r\n                            <i class=\"fas fa-bolt\"><\/i>\r\n                        <\/div>\r\n                        <div class=\"yt-thumb-feature-content\">\r\n                            <h3 class=\"yt-thumb-feature-title\">Fast CDN rendering<\/h3>\r\n                            <p class=\"yt-thumb-feature-description\">Lightning-fast thumbnail loading using our optimized CDN infrastructure<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"yt-thumb-feature-card\" data-aos=\"fade-up\" data-aos-delay=\"600\">\r\n                        <div class=\"yt-thumb-feature-icon\">\r\n                            <i class=\"fas fa-mouse-pointer\"><\/i>\r\n                        <\/div>\r\n                        <div class=\"yt-thumb-feature-content\">\r\n                            <h3 class=\"yt-thumb-feature-title\">Download in one click<\/h3>\r\n                            <p class=\"yt-thumb-feature-description\">Save thumbnails to your device with a single click of a button<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"yt-thumb-feature-card\" data-aos=\"fade-up\" data-aos-delay=\"700\">\r\n                        <div class=\"yt-thumb-feature-icon\">\r\n                            <i class=\"fas fa-lock\"><\/i>\r\n                        <\/div>\r\n                        <div class=\"yt-thumb-feature-content\">\r\n                            <h3 class=\"yt-thumb-feature-title\">Secure and private<\/h3>\r\n                            <p class=\"yt-thumb-feature-description\">We don't store your URLs or track your activity<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- Prefixed FAQ Section -->\r\n    <section id=\"yt-thumb-faq\" class=\"yt-thumb-section\">\r\n        <div class=\"container\">\r\n            <h2 class=\"yt-thumb-section-heading\" data-aos=\"fade-up\">Frequently Asked Questions<\/h2>\r\n            <p class=\"yt-thumb-section-description\" data-aos=\"fade-up\" data-aos-delay=\"100\">Get answers to common questions about our YouTube Thumbnail Viewer<\/p>\r\n            \r\n            <div class=\"yt-thumb-faq-container\">\r\n                <div class=\"accordion\" id=\"yt-thumb-faqAccordion\">\r\n                    <div class=\"yt-thumb-accordion-item\" data-aos=\"fade-up\" data-aos-delay=\"200\">\r\n                        <h2 class=\"accordion-header\" id=\"yt-thumb-headingOne\">\r\n                            <button class=\"yt-thumb-accordion-button\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#yt-thumb-collapseOne\" aria-expanded=\"true\" aria-controls=\"yt-thumb-collapseOne\">\r\n                                Can I download thumbnails from private videos?\r\n                            <\/button>\r\n                        <\/h2>\r\n                        <div id=\"yt-thumb-collapseOne\" class=\"accordion-collapse collapse show\" aria-labelledby=\"yt-thumb-headingOne\" data-bs-parent=\"#yt-thumb-faqAccordion\">\r\n                            <div class=\"yt-thumb-accordion-body\">\r\n                                No, our tool can only access thumbnails from public YouTube videos. We respect YouTube's privacy settings and cannot bypass any privacy restrictions. If a video is private or unlisted, its thumbnail cannot be accessed through our tool.\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"yt-thumb-accordion-item\" data-aos=\"fade-up\" data-aos-delay=\"300\">\r\n                        <h2 class=\"accordion-header\" id=\"yt-thumb-headingTwo\">\r\n                            <button class=\"yt-thumb-accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#yt-thumb-collapseTwo\" aria-expanded=\"false\" aria-controls=\"yt-thumb-collapseTwo\">\r\n                                Is this tool free to use?\r\n                            <\/button>\r\n                        <\/h2>\r\n                        <div id=\"yt-thumb-collapseTwo\" class=\"accordion-collapse collapse\" aria-labelledby=\"yt-thumb-headingTwo\" data-bs-parent=\"#yt-thumb-faqAccordion\">\r\n                            <div class=\"yt-thumb-accordion-body\">\r\n                                Yes, our YouTube Thumbnail Viewer is completely free to use. There are no hidden fees, premium features, or usage limits. We believe in providing unrestricted access to YouTube thumbnails for everyone.\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"yt-thumb-accordion-item\" data-aos=\"fade-up\" data-aos-delay=\"400\">\r\n                        <h2 class=\"accordion-header\" id=\"yt-thumb-headingThree\">\r\n                            <button class=\"yt-thumb-accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#yt-thumb-collapseThree\" aria-expanded=\"false\" aria-controls=\"yt-thumb-collapseThree\">\r\n                                Will the image include watermark?\r\n                            <\/button>\r\n                        <\/h2>\r\n                        <div id=\"yt-thumb-collapseThree\" class=\"accordion-collapse collapse\" aria-labelledby=\"yt-thumb-headingThree\" data-bs-parent=\"#yt-thumb-faqAccordion\">\r\n                            <div class=\"yt-thumb-accordion-body\">\r\n                                No, the downloaded thumbnails are exactly as they appear on YouTube, without any watermarks or alterations added by our tool. You get the original thumbnail in the selected resolution.\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"yt-thumb-accordion-item\" data-aos=\"fade-up\" data-aos-delay=\"500\">\r\n                        <h2 class=\"accordion-header\" id=\"yt-thumb-headingFour\">\r\n                            <button class=\"yt-thumb-accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#yt-thumb-collapseFour\" aria-expanded=\"false\" aria-controls=\"yt-thumb-collapseFour\">\r\n                                Is it legal to use the thumbnails?\r\n                            <\/button>\r\n                        <\/h2>\r\n                        <div id=\"yt-thumb-collapseFour\" class=\"accordion-collapse collapse\" aria-labelledby=\"yt-thumb-headingFour\" data-bs-parent=\"#yt-thumb-faqAccordion\">\r\n                            <div class=\"yt-thumb-accordion-body\">\r\n                                YouTube thumbnails are generally considered fair use for personal, educational, or research purposes. However, commercial use may require permission from the copyright holder. Always respect copyright laws and terms of service when using downloaded thumbnails.\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <script>\r\n        \/\/ Initialize AOS\r\n        AOS.init({\r\n            duration: 800,\r\n            once: true\r\n        });\r\n<\/script><\/p>\n","protected":false},"author":3,"featured_media":0,"parent":144,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-262","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/viewri.com\/wp-json\/wp\/v2\/pages\/262","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/viewri.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/viewri.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/viewri.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/viewri.com\/wp-json\/wp\/v2\/comments?post=262"}],"version-history":[{"count":4,"href":"https:\/\/viewri.com\/wp-json\/wp\/v2\/pages\/262\/revisions"}],"predecessor-version":[{"id":1309,"href":"https:\/\/viewri.com\/wp-json\/wp\/v2\/pages\/262\/revisions\/1309"}],"up":[{"embeddable":true,"href":"https:\/\/viewri.com\/wp-json\/wp\/v2\/pages\/144"}],"wp:attachment":[{"href":"https:\/\/viewri.com\/wp-json\/wp\/v2\/media?parent=262"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}