.custom-video-container{position:relative;width:100%;max-width:1000px;margin:0 auto;background:#000;border-radius:8px;overflow:hidden}.custom-video-player{width:100%;height:auto}.custom-video-controls{position:absolute;bottom:0;left:0;right:0;padding:10px;background:rgb(0 0 0 / .5);display:flex;align-items:center;gap:10px}.play-pause-btn{background:none;border:none;padding:0;width:30px;height:30px;cursor:pointer}.play-pause-btn svg{width:100%;height:100%;fill:#fff}.pause-icon{display:none}.video-progress{flex-grow:1;height:5px;position:relative;padding:10px 0;cursor:pointer}.progress-bar{width:100%;height:5px;background:rgb(255 255 255 / .3);border-radius:3px;position:relative;transition:height 0.2s ease}.video-progress:hover .progress-bar{height:8px}.progress-filled{width:0;height:100%;background:linear-gradient(89.31deg,#309FD9 -52.39%,#492099 119.14%);border-radius:3px;position:absolute;top:0;left:0;transition:width 0.1s linear}.progress-handle{width:12px;height:12px;background:#fff;border-radius:50%;position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);transition:transform 0.2s ease;cursor:pointer}.video-progress:hover .progress-handle{transform:translate(-50%,-50%) scale(1)}.progress-hover-time{position:absolute;background:rgb(0 0 0 / .8);color:#fff;padding:4px 8px;border-radius:4px;font-size:12px;bottom:100%;left:0;transform:translateX(-50%);display:none;pointer-events:none;margin-bottom:10px}.progress-hover-time::after{content:'';position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);border-left:4px solid #fff0;border-right:4px solid #fff0;border-top:4px solid rgb(0 0 0 / .8)}.time{color:#fff;font-size:14px;min-width:100px;text-align:right}.custom-video-player::-webkit-media-controls{display:none!important}.video-progress{flex-grow:1;height:20px;position:relative;cursor:pointer;display:flex;align-items:center}.progress-bar{width:100%;height:4px;background:rgb(255 255 255 / .3);border-radius:2px;position:relative;transition:height 0.2s ease}.video-progress:hover .progress-bar{height:6px}.progress-filled{width:0;height:100%;background:linear-gradient(89.31deg,#309FD9 -52.39%,#492099 119.14%);border-radius:2px;position:absolute;top:0;left:0;transition:width 0.1s linear}.progress-hover{position:absolute;height:100%;background:rgb(255 255 255 / .2);width:0;opacity:0;transition:opacity 0.2s ease}.progress-handle{width:12px;height:12px;background:#fff;border-radius:50%;position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);transition:transform 0.2s ease;cursor:pointer}.video-progress:hover .progress-handle{transform:translate(-50%,-50%) scale(1)}.progress-tooltip{position:absolute;background:rgb(0 0 0 / .7);color:#fff;padding:4px 8px;border-radius:4px;font-size:12px;bottom:100%;transform:translateX(-50%);opacity:0;visibility:hidden;pointer-events:none;margin-bottom:10px;white-space:nowrap}.progress-tooltip::after{content:'';position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);border-left:4px solid #fff0;border-right:4px solid #fff0;border-top:4px solid rgb(0 0 0 / .7)}.video-progress:hover .progress-tooltip{opacity:1;visibility:visible}