.video-container{position:relative;width:100%;height:100%;max-width:800px;border-radius:8px;overflow:hidden;background-color:#000;box-shadow:0 10px 30px rgba(0,0,0,.2)}.video-background{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:120%;height:120%;z-index:1;overflow:hidden}.background-video{width:100%;height:100%;object-fit:cover;filter:blur(20px) brightness(.7);transform:scale(1.1)}.video-title{position:absolute;top:0;left:0;right:0;padding:16px;background:linear-gradient(180deg,rgba(0,0,0,.7) 0,rgba(0,0,0,0));color:white;font-weight:500;z-index:10;opacity:1;transition:opacity .3s ease}.video-container video{position:relative;width:100%;height:100%;display:block;cursor:pointer;z-index:2}.video-controls{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(0deg,rgba(0,0,0,.7) 0,rgba(0,0,0,0));padding:16px;opacity:0;transition:opacity .3s ease;z-index:10}.video-controls.visible{opacity:1}.progress-container{cursor:pointer;margin-bottom:12px}.progress-bar{height:4px;background-color:rgba(255,255,255,.3);border-radius:2px;overflow:hidden;position:relative}.progress-fill{height:100%;background-color:#ff4d4d;border-radius:2px;position:absolute;top:0;left:0;transition:width .1s linear}.controls-row{justify-content:space-between}.control-button,.controls-row{display:flex;align-items:center}.control-button{background:transparent;border:none;color:white;cursor:pointer;padding:8px;border-radius:50%;justify-content:center;transition:background-color .2s ease}.control-button:hover{background-color:rgba(255,255,255,.1)}.volume-container{display:flex;align-items:center}.volume-slider{width:0;opacity:0;transition:all .3s ease;margin-left:0;cursor:pointer;-webkit-appearance:none;background:transparent}.volume-container:hover .volume-slider{width:80px;opacity:1;margin-left:8px}.volume-slider::-webkit-slider-runnable-track{height:4px;background-color:rgba(255,255,255,.3);border-radius:2px}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background-color:white;margin-top:-4px;cursor:pointer}.volume-slider::-moz-range-track{height:4px;background-color:rgba(255,255,255,.3);border-radius:2px}.volume-slider::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background-color:white;border:none;cursor:pointer}.time-display{color:white;font-size:14px;margin:0 16px}.fullscreen-button{margin-left:auto}@media (max-width:640px){.volume-container:hover .volume-slider{width:60px}.time-display{font-size:12px;margin:0 8px}.video-controls{padding:12px}.video-title{padding:12px;font-size:14px}}