      var ctaTextColor = qs('input[name="vsl_cta_text_color"]');
      var ctaSize = qs('input[name="vsl_cta_font_size"]');
      var ctaWeight = qs('select[name="vsl_cta_weight"]');
      var ctaRadius = qs('input[name="vsl_cta_radius"]');
      var ctaPy = qs('input[name="vsl_cta_padding_y"]');
      var ctaPx = qs('input[name="vsl_cta_padding_x"]');
      var ctaPulse = qs('input[name="vsl_cta_pulse"]');
      var ctaShadow = qs('input[name="vsl_cta_shadow"]');
      var progressColor = qs('input[name="vsl_progress_color"]');
      var progressUseCta = qs('input[name="vsl_progress_use_cta_color"]');
      var progressColorField = qs('[data-itp-progress-color-field]');
      var progressHeightOutput = qs('[data-itp-progress-height-output]');
      var progressHeight = qs('input[name="vsl_progress_height"]');
      var ctrlColor = qs('input[name="vsl_ctrl_color"]');
      var ctrlBg = qs('input[name="vsl_ctrl_bg"]');
      var overlayColor = qs('input[name="vsl_overlay_color"]');
      var overlayOpacity = qs('input[name="vsl_overlay_opacity"]');
      var overlayOpacityOutput = qs('[data-itp-overlay-opacity-output]');
      var overlayTextColor = qs('input[name="vsl_overlay_text_color"]');
      var overlayTemplate = qs('select[name="vsl_overlay_template"]');
      var overlayImage = qs('input[name="vsl_overlay_image"]');
      var overlayPulse = qs('input[name="vsl_overlay_pulse"]');
      var overlayTop = qs('input[name="vsl_overlay_top"]');
      var overlayBottom = qs('input[name="vsl_overlay_bottom"]');
      var videoUrl = qs('input[name="vsl_video_url"]');
      var previewUrl = qs('input[name="vsl_preview_video_url"]');
      var posterUrl = qs('input[name="vsl_poster_url"]');
      var hookText = qs('input[name="vsl_hook_text"]');
      var hookImage = qs('input[name="vsl_hook_image"]');
      var hookOn = qs('input[name="vsl_hook_on"]');
      var hookPosition = qs('select[name="vsl_hook_position"]');
      var hookOpacity = qs('input[name="vsl_hook_opacity"]');
      var ctrlBigPlay = qs('input[name="vsl_ctrl_big_play"]');
      var ctrlSmallPlay = qs('input[name="vsl_ctrl_small_play"]');
      var ctrlTime = qs('input[name="vsl_ctrl_time"]');
      var ctrlBack10 = qs('input[name="vsl_ctrl_back10"]');
      var ctrlForward10 = qs('input[name="vsl_ctrl_forward10"]');
      var ctrlVolume = qs('input[name="vsl_ctrl_volume"]');
      var ctrlFullscreen = qs('input[name="vsl_ctrl_fullscreen"]');
      var ctrlSpeed = qs('input[name="vsl_ctrl_speed"]');
      var b = qs('.itp-vsl-preview-cta');
      var progressWrap = qs('[data-itp-preview-progress]');
      var pbar = qs('.itp-vsl-preview-progress i');
      var overlay = qs('[data-itp-preview-overlay]');
      var overlayTopEl = qs('[data-itp-preview-overlay-top]');
      var overlayBottomEl = qs('[data-itp-preview-overlay-bottom]');
      var video = qs('[data-itp-preview-video]');
      var videoBox = qs('[data-itp-preview-video-box]');
      var empty = qs('[data-itp-preview-empty]');
      var hook = qs('[data-itp-preview-hook]');
      var previewControls = qs('[data-itp-preview-controls]');
      var previewWasStarted = !!(video && video.dataset.itpPreviewStarted === '1');
      var previewWasPaused = !!(video && video.paused);
      var previewWasMuted = !!(video && video.muted);
      var previewTime = video ? (video.currentTime || 0) : 0;
      if(videoBox){
        videoBox.style.setProperty('--itp-vsl-preview-bg', '#050816');
        var effectiveProgressColor = (progressUseCta && progressUseCta.checked && ctrlBg && ctrlBg.value) ? ctrlBg.value : ((progressColor && progressColor.value) ? progressColor.value : '#ff5a1f');
        videoBox.style.setProperty('--itp-vsl-preview-accent', effectiveProgressColor);
        videoBox.style.setProperty('--itp-vsl-control-color', (ctrlColor && ctrlColor.value) ? ctrlColor.value : '#ffffff');
        videoBox.style.setProperty('--itp-vsl-control-bg', (ctrlBg && ctrlBg.value) ? ctrlBg.value : '#111827');
      }
      var ctrlMap = {
        back10: ctrlBack10,
        small_play: ctrlSmallPlay,
        forward10: ctrlForward10,
        time: ctrlTime,
        volume: ctrlVolume,
        speed: ctrlSpeed,
        fullscreen: ctrlFullscreen
      };
      var anyCtrl = false;
      if(previewControls){
        Object.keys(ctrlMap).forEach(function(key){
          var el = qs('[data-preview-control="'+key+'"]', previewControls);
          var input = ctrlMap[key];
          var show = !!(input && input.checked);
          if(el) el.hidden = !show;
          if(show && el) anyCtrl = true;
        });
        previewControls.hidden = !anyCtrl;
      }
      [['back10', ctrlBack10], ['forward10', ctrlForward10]].forEach(function(pair){
        var el = qs('[data-preview-control="'+pair[0]+'"]', videoBox || document);
        var input = pair[1];
        if(el) el.hidden = !(input && input.checked);
      });
      var previewBig = qs('[data-preview-control="big_play"]', videoBox || document);
      if(previewBig){
        var pv = qs('[data-itp-preview-video]', videoBox || document);
        var started = pv && pv.dataset.itpPreviewStarted === '1';
        previewBig.hidden = !(ctrlBigPlay && ctrlBigPlay.checked && started && pv && pv.paused && !(overlay && !overlay.hidden));
      }
      if(overlay && smartOn){
        overlay.hidden = previewWasStarted ? true : !smartOn.checked;
      }
      if(progressWrap && progressOn) progressWrap.hidden = !progressOn.checked;
      if(b && ctaOn) b.hidden = !ctaOn.checked;
      if(b){
        var img = b.querySelector('img');
        if(ctaImage && ctaImage.value){
          if(!img){ img = document.createElement('img'); b.innerHTML = ''; b.appendChild(img); }
          img.src = ctaImage.value;
          img.alt = cta ? (cta.value || '') : '';
          b.classList.add('has-image');
        } else {
          b.classList.remove('has-image');
          b.textContent = cta ? (cta.value || 'Continue') : 'Continue';
        }
      }
      if(b && ctaColor) b.style.background = ctaColor.value || '#16a34a';
      if(b && ctaTextColor) b.style.color = ctaTextColor.value || '#ffffff';
      if(b && ctaSize) b.style.fontSize = (ctaSize.value || 16) + 'px';
      if(b && ctaWeight) b.style.fontWeight = ctaWeight.value || '900';
      if(b && ctaRadius) b.style.borderRadius = (ctaRadius.value || 999) + 'px';
      if(b && ctaPy && ctaPx) b.style.padding = (ctaPy.value || 14) + 'px ' + (ctaPx.value || 28) + 'px';
      if(b && ctaPulse) b.classList.toggle('pulse', !!ctaPulse.checked);
      if(b && ctaShadow) b.classList.toggle('shadow', !!ctaShadow.checked);
      if(b && ctaPosition){ b.classList.toggle('is-inside-preview', ctaPosition.value === 'inside'); }
      var effectiveProgressColor2 = (progressUseCta && progressUseCta.checked && ctrlBg && ctrlBg.value) ? ctrlBg.value : ((progressColor && progressColor.value) ? progressColor.value : '#ff5a1f');
      if(progressColorField) progressColorField.hidden = !!(progressUseCta && progressUseCta.checked);
      if(pbar) pbar.style.background = effectiveProgressColor2;
      if(progressWrap && progressHeight){
        var ph = progressHeight.value || '6';
        progressWrap.style.height = ph + 'px';
        progressWrap.style.setProperty('--itp-preview-progress-height', ph + 'px');
        var previewVideoBox = qs('[data-itp-preview-video-box]');
        if(previewVideoBox) previewVideoBox.style.setProperty('--itp-vsl-progress-h', ph + 'px');
      }
      if(progressHeightOutput && progressHeight) progressHeightOutput.textContent = progressHeight.value || '6';
      if(overlay && overlayColor) overlay.style.background = overlayColor.value || '#111827';
      if(overlay && overlayOpacity){ var op=Math.max(20,Math.min(100,parseInt(overlayOpacity.value||'92',10))); overlay.style.setProperty('--itp-overlay-opacity',(op/100).toString()); overlay.style.setProperty('--itp-overlay-opacity-pct',op+'%'); if(overlayOpacityOutput) overlayOpacityOutput.textContent=String(op);}
      if(overlay && overlayTextColor) overlay.style.color = overlayTextColor.value || '#ffffff';
      if(overlay && overlayTemplate){
        ['template-wide','template-square','template-play','template-minimal','template-large','template-full','template-compact','template-icon_sound','template-icon_play','template-icon_blink','template-custom'].forEach(function(c){overlay.classList.remove(c);});
        overlay.classList.add('template-' + (overlayTemplate.value || 'wide'));
      }
      if(overlay && overlayTemplate && overlayImage){
        overlay.classList.toggle('has-custom-image', overlayTemplate.value === 'custom' && !!overlayImage.value);
      }
      qsa('[data-itp-autoplay-text]').forEach(function(el){ el.hidden = !!(overlayTemplate && overlayTemplate.value === 'custom'); });
      qsa('[data-itp-autoplay-bg]').forEach(function(el){ el.hidden = !!(overlayTemplate && overlayTemplate.value === 'custom' && overlayImage && overlayImage.value); });
      qsa('[data-itp-autoplay-custom]').forEach(function(el){ el.hidden = !(overlayTemplate && overlayTemplate.value === 'custom'); });
      if(overlay && overlayPulse) overlay.classList.toggle('pulse', !!overlayPulse.checked);
      if(overlayTopEl && overlayTop) overlayTopEl.textContent = overlayTop.value || 'Your video has already started';
      if(overlayBottomEl && overlayBottom) overlayBottomEl.textContent = overlayBottom.value || 'Click to hear';
      if(overlay){
        var oimg = overlay.querySelector('img');
        if(overlayImage && overlayImage.value){ if(!oimg){ oimg=document.createElement('img'); overlay.insertBefore(oimg, overlay.firstChild); } oimg.src=overlayImage.value; }
        else if(oimg){ oimg.remove(); }
      }
      var mainSrcForPreview = videoUrl ? (videoUrl.value || '') : '';
      var teaserSrcForPreview = previewUrl ? (previewUrl.value || '') : '';
      var nextSrc = previewWasStarted ? mainSrcForPreview : (teaserSrcForPreview || mainSrcForPreview);
      if(videoBox && !video){
        video = document.createElement('video');
        video.setAttribute('data-itp-preview-video','1');
        video.muted = true; video.autoplay = true; video.loop = true; video.playsInline = true; video.preload = 'metadata';
        videoBox.insertBefore(video, videoBox.firstChild);
      }
      if(video){
        var source = video.querySelector('source');
        if(nextSrc){
          if(!source){ source = document.createElement('source'); source.type = 'video/mp4'; video.appendChild(source); }
          var sourceSrc = nextSrc;
          if(source.getAttribute('src') !== sourceSrc){
            source.setAttribute('src', sourceSrc);
            if(!previewWasStarted){ video.dataset.itpPreviewStarted = '0'; }
            try{ video.load(); }catch(e){}
            if(previewWasStarted){
              video.loop = false;
              video.muted = previewWasMuted;
              var restoreMain = function(){
                try{ if(previewTime && isFinite(previewTime)) video.currentTime = previewTime; }catch(e){}
                if(!previewWasPaused) video.play().catch(function(){});
              };
              if(video.readyState >= 1) restoreMain(); else setTimeout(restoreMain, 250);
            } else {
              video.muted = true;
              try{ video.play().catch(function(){}); }catch(e){}
            }
          } else if(previewWasStarted){
            video.dataset.itpPreviewStarted = '1';
            video.loop = false;
            video.muted = previewWasMuted;
            if(previewWasPaused){ try{ video.pause(); }catch(e){} } else { try{ video.play().catch(function(){}); }catch(e){} }
          }
          if(videoBox){ videoBox.classList.add('has-video'); videoBox.classList.remove('no-video'); }
          if(empty) empty.hidden = true;
        } else {
          if(source) source.removeAttribute('src');
          if(videoBox){ videoBox.classList.remove('has-video'); videoBox.classList.add('no-video'); }
          if(empty) empty.hidden = false;
        }
        if(posterUrl && posterUrl.value) video.setAttribute('poster', posterUrl.value); else video.removeAttribute('poster');
        video.oncanplay = function(){
          try{
            if(video.dataset.itpPreviewStarted !== '1' && video.muted) video.play().catch(function(){});
          }catch(e){}
        };
      }
      if(hook){
        var hasHook = (!hookOn || hookOn.checked) && ((hookText && hookText.value) || (hookImage && hookImage.value));
        hook.hidden = !hasHook;
        ['bottom_left','bottom_right','top_right','top_left'].forEach(function(c){hook.classList.remove(c);});
        if(hookPosition) hook.classList.add(hookPosition.value || 'bottom_left');
        if(hookOpacity) hook.style.opacity = Math.max(10, Math.min(100, parseInt(hookOpacity.value || '100',10))) / 100;
        var hookSpan = hook.querySelector('span');
        var hookImg = hook.querySelector('img');
        if(hookSpan && hookText) hookSpan.textContent = hookText.value || '';
        if(hookImage && hookImage.value){ if(!hookImg){ hookImg = document.createElement('img'); hook.insertBefore(hookImg, hook.firstChild); } hookImg.src = hookImage.value; }
        else if(hookImg){ hookImg.remove(); }
      }
      applyDesignTo(overlay, 'overlay');
      applyDesignTo(hook, 'hook');
      applyDesignTo(b, 'cta');
      initDesignables();
      if(typeof initVslPreviewPlayback === "function") initVslPreviewPlayback();
    }
    qsa('input[name^="vsl_"], textarea[name^="vsl_"], select[name^="vsl_"]').forEach(function(el){
      el.addEventListener('input', syncAdminVslPreview);
      el.addEventListener('change', syncAdminVslPreview);
    });
    syncAdminVslPreview();
    enhanceVslControls();

    function initVslPreviewPlayback(){
      var box = qs('[data-itp-preview-video-box]');
      if(!box) return;
      var video = qs('[data-itp-preview-video]', box);
      var overlay = qs('[data-itp-preview-overlay]', box);
      var playBtn = qs('[data-preview-control="small_play"]', box);
      var timeEl = qs('[data-preview-control="time"]', box);
      var progress = qs('[data-itp-preview-progress] i', box);
      var speedEl = qs('[data-preview-control="speed"]', box);
      var speeds = [1,1.25,1.5,2];
      var currentSpeed = 1;
      function fmt(t){ t = Math.max(0, Math.floor(t || 0)); return Math.floor(t/60)+':' + ((t%60)<10?'0':'') + (t%60); }
      function update(){
        if(!video) return;
        var bigPlayBtn = qs('[data-preview-control="big_play"]', box);
        var userStarted = video.dataset.itpPreviewStarted === '1';
        var ctrlBigPlayInput = qs('input[name="vsl_ctrl_big_play"]');
        if(bigPlayBtn){
          bigPlayBtn.textContent = '▶';
          var overlayVisible = !!(overlay && !overlay.hidden);
          bigPlayBtn.hidden = overlayVisible || !(ctrlBigPlayInput && ctrlBigPlayInput.checked && userStarted && video.paused);
          var c = qs('input[name="vsl_ctrl_color"]');
          var bg = qs('input[name="vsl_ctrl_bg"]');
          if(c) bigPlayBtn.style.setProperty('--itp-vsl-control-color', c.value || '#ffffff');
          if(bg) bigPlayBtn.style.setProperty('--itp-vsl-control-bg', bg.value || '#111827');
        }
        if(playBtn) playBtn.textContent = video.paused ? '▶' : 'Ⅱ';
        if(timeEl) timeEl.textContent = fmt(video.currentTime || 0);
        if(progress && video.duration && isFinite(video.duration)){ progress.style.width = Math.max(0, Math.min(100, video.currentTime / video.duration * 100)) + '%'; }
      }
      function begin(){
        if(!video) return;
        if(overlay) overlay.hidden = true;
        video.dataset.itpPreviewStarted = '1';
        var mainInput = qs('input[name="vsl_video_url"]');
        var mainSrc = mainInput ? (mainInput.value || '') : '';
        var source = video.querySelector('source');
        if(mainSrc && source && source.getAttribute('src') !== mainSrc){
          source.setAttribute('src', mainSrc);
          try{ video.load(); }catch(e){}
        }
        video.loop = false;
        video.muted = false;
        video.removeAttribute('muted');
        var playNow = function(){ try{ video.play().catch(function(){}); }catch(e){} update(); };
        if(video.readyState >= 2) playNow(); else { video.oncanplay = playNow; setTimeout(playNow, 350); }
        update();
      }
      if(overlay && !overlay.dataset.itpPreviewBound){ overlay.dataset.itpPreviewBound='1'; overlay.addEventListener('click', function(e){ e.preventDefault(); e.stopPropagation(); begin(); }); }
      if(!box.dataset.itpPreviewFrameClickBound){
        box.dataset.itpPreviewFrameClickBound = '1';
        box.addEventListener('click', function(e){
          if(!video) return;
          if(e.target.closest('[data-itp-preview-overlay], [data-preview-control], [data-itp-preview-progress], [data-itp-preview-cta], [data-itp-design-resize-handle]')) return;
          var allowPauseInput = qs('input[name="vsl_ctrl_allow_pause"]');
          var userStarted = video.dataset.itpPreviewStarted === '1';
          if(!userStarted){
            if(overlay && !overlay.hidden) begin();
            return;
          }
          if(!allowPauseInput || !allowPauseInput.checked) return;
          if(video.paused) video.play().catch(function(){}); else video.pause();
          update();
        });
      }
      qsa('[data-preview-control]', box).forEach(function(ctrl){
        if(ctrl.dataset.itpPreviewBound) return;
        ctrl.dataset.itpPreviewBound = '1';
        ctrl.addEventListener('click', function(e){
          e.preventDefault(); e.stopPropagation();
          if(!video) return;
          var key = ctrl.getAttribute('data-preview-control');
          if(key === 'small_play' || key === 'big_play'){
            if(overlay && !overlay.hidden){ begin(); }
            else if(video.paused){ video.play().catch(function(){}); }
            else {
              var allowPauseInput = qs('input[name="vsl_ctrl_allow_pause"]');
              if(allowPauseInput && allowPauseInput.checked) video.pause();
            }
          }
          if(key === 'back10') video.currentTime = Math.max(0, (video.currentTime || 0) - 10);
          if(key === 'forward10' && video.duration) video.currentTime = Math.min(video.duration, (video.currentTime || 0) + 10);
          if(key === 'volume'){ video.muted = !video.muted; ctrl.textContent = video.muted ? '🔇' : '🔊'; }
          if(key === 'speed'){ var i = speeds.indexOf(currentSpeed); currentSpeed = speeds[(i+1) % speeds.length]; try{ video.playbackRate = currentSpeed; }catch(err){} ctrl.textContent = currentSpeed + '×'; }
          if(key === 'fullscreen'){ var target = qs('[data-itp-admin-vsl-preview]') || box; if(target.requestFullscreen) target.requestFullscreen().catch(function(){}); }
          update();
        });
      });
      if(video && !video.dataset.itpPreviewPlaybackBound){
        video.dataset.itpPreviewPlaybackBound = '1';
        video.addEventListener('timeupdate', update);
        video.addEventListener('play', update);
        video.addEventListener('pause', update);
      }
      update();
    }
    initVslPreviewPlayback();

    document.addEventListener('click', function(e){
      var clear = e.target.closest('[data-itp-clear-media]');
      if(clear){
        e.preventDefault();
        var row = clear.closest('.itp-media-pick-row');
        var input = row ? row.querySelector('input.itp-media-url') : null;
        if(input){ input.value = ''; input.dispatchEvent(new Event('input', {bubbles:true})); input.dispatchEvent(new Event('change', {bubbles:true})); }
        syncAdminVslPreview();
        return;
      }
