:root{--player-bg: #000;--control-bg: rgba(0, 0, 0, .8);--control-hover: rgba(255, 255, 255, .2);--primary-color: #3498db;--text-color: #fff;--error-color: #e74c3c}.universal-player{position:relative;width:100%;max-width:100%;background:var(--player-bg);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;user-select:none;overflow:hidden}.universal-player.fullscreen{position:fixed;top:0;left:0;width:100vw!important;height:100vh!important;z-index:9999}.player-canvas{display:block;width:100%;height:100%;object-fit:contain;background:#000}.player-controls{position:absolute;bottom:0;left:0;right:0;background:var(--control-bg);padding:10px;transition:opacity .3s}.universal-player:not(:hover) .player-controls{opacity:0}.universal-player:hover .player-controls,.player-controls.always-visible{opacity:1}.progress-container{width:100%;height:5px;background:#ffffff4d;cursor:pointer;margin-bottom:10px;border-radius:3px;position:relative}.progress-bar{height:100%;background:var(--primary-color);border-radius:3px;transition:width .1s;position:relative}.progress-bar:after{content:"";position:absolute;right:-6px;top:50%;transform:translateY(-50%);width:12px;height:12px;background:var(--primary-color);border-radius:50%;opacity:0;transition:opacity .2s}.progress-container:hover .progress-bar:after{opacity:1}.buffer-bar{position:absolute;top:0;left:0;height:100%;background:#ffffff80;border-radius:3px}.controls-row{display:flex;align-items:center;gap:10px}.control-button{background:transparent;border:none;color:var(--text-color);cursor:pointer;padding:5px 10px;border-radius:4px;font-size:18px;display:flex;align-items:center;justify-content:center;transition:background .2s}.control-button:hover{background:var(--control-hover)}.control-button:disabled{opacity:.5;cursor:not-allowed}.time-display{color:var(--text-color);font-size:14px;min-width:100px;text-align:center}.volume-container{display:flex;align-items:center;gap:5px}.volume-slider{width:80px;height:4px;-webkit-appearance:none;appearance:none;background:#ffffff4d;border-radius:2px;outline:none}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;background:var(--primary-color);border-radius:50%;cursor:pointer}.volume-slider::-moz-range-thumb{width:12px;height:12px;background:var(--primary-color);border-radius:50%;cursor:pointer;border:none}.spacer{flex:1}.loading-indicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--text-color);font-size:18px}.spinner{border:3px solid rgba(255,255,255,.3);border-top:3px solid var(--primary-color);border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite;margin:0 auto 10px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.error-message{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#000000e6;color:var(--error-color);padding:20px;border-radius:8px;text-align:center;max-width:80%}.error-message h3{margin:0 0 10px;color:var(--error-color)}.error-message p{margin:0;color:var(--text-color);font-size:14px}.big-play-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80px;height:80px;background:#000000b3;border:3px solid var(--text-color);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:32px;color:var(--text-color);transition:all .3s}.big-play-button:hover{background:#000000e6;transform:translate(-50%,-50%) scale(1.1)}.big-play-button.hidden{display:none}@media (max-width: 768px){.controls-row{gap:5px}.control-button{padding:5px;font-size:16px}.time-display{font-size:12px;min-width:80px}.volume-slider{width:60px}}