.video-container {position: relative;width: 100%;margin: 20px auto;background: #000;overflow: hidden;border-radius: 0px;}
.video-wrapper {position: relative;width: 100%;padding-top: 56.25%;overflow: hidden;}
.video-container video {position: absolute;top: 50%;left: 50%;width: 100%;height: 100%;object-fit: contain; transform: translate(-50%, -50%);}
.custom-controls {position: absolute;bottom: 0;left: 0;right: 0;background: linear-gradient(transparent, rgba(0,0,0,0.8));padding: 10px;display: flex;align-items: center;gap: 10px;color: white;transform: translateY(100%);transition: transform 0.3s;}
.video-container:hover .custom-controls,.video-container:active .custom-controls {transform: translateY(0);}
.controls-wrapper {width: 100%;display: flex;align-items: center;gap: 8px;}
.progress-container {flex: 1;height: 5px;background: #444;cursor: pointer;position: relative;}
.buffer-bar,.progress-bar {position: absolute;height: 100%;top: 0;left: 0;}
.buffer-bar {background: #666;width: 0;}
.progress-bar {background: #f00;width: 0;}
.volume-container {display: flex;align-items: center;gap: 5px;width: 150px;}
button {background: none;border: none;color: white;cursor: pointer;padding: 5px;}
input[type="range"] {height: 5px;background: #444;-webkit-appearance: none;}
input[type="range"]::-webkit-slider-thumb {-webkit-appearance: none;width: 12px;height: 12px;background: #fff;border-radius: 50%;}
.speed-select {background: rgba(255,255,255,1);border: none;padding: 5px;}
.time-display {color: white;font-family: Arial, sans-serif;font-size: 12px;min-width: 80px;text-align: center;margin-left: 10px;}
.volume-percent {color: white;font-family: Arial, sans-serif;font-size: 12px;min-width: 40px;margin-left: 5px;}
.volume-slider{max-width: 50px;}
.play-btn,.fullscreen-btn,.mute-btn{width: 30px;font-size: 14px;color: aqua;}
.play-btn,.fullscreen-btn,.volume-slider,.mute-btn:focus {outline: 0px;outline-offset: 0px;}
@media (max-width: 768px) {
.custom-controls {padding: 8px;gap: 5px;}
.speed-select {font-size: 12px;padding: 3px;}
.volume-container {width: 120px;}}
.touch-feedback {position: absolute;z-index: 9999;background: rgba(0,0,0,0.7);color: white;padding: 8px 16px;border-radius: 12px;font-size: 16px;pointer-events: none;white-space: nowrap;top: 20px;left: 50%;transform: translateX(-50%);transition: all 0.3s ease-out;box-shadow: 0 2px 10px rgba(0,0,0,0.3);}
.center-play-indicator {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-size: 50px;width: 90px;height: 90px; color: white;opacity: 0.8;display: none;pointer-events: none;z-index: 2;transition: opacity 1s;background: rgba(0,0,0,0.7);border-radius: 50%;text-align: center;line-height: 90px; padding: 20px; box-sizing: border-box;}
.video-container.paused .center-play-indicator {display: flex;align-items: center;justify-content: center;}
@media (max-width: 768px) {.center-play-indicator {font-size: 40px;width: 70px;height: 70px;line-height: 70px;}}
.speed-container {position: relative;display: inline-block;font-size: 12px;}
.speed-btn {padding: 4px 8px;cursor: pointer;min-width: 40px;text-align: left;transition: all 0.2s;}
.speed-btn:hover {background: rgba(0,0,0,1);}
.speed-options {display: none;position: absolute;bottom: 100%;left: 0;background: rgba(0,0,0,0.3);min-width: 100%;z-index: 999;}
.speed-option {padding: 6px 12px;cursor: pointer;transition: background 0.2s;}
.speed-option:hover {background: rgba(0,0,0,1);}
.speed-option.selected {background: rgba(0,0,0,0.5);font-weight: bold;}