.audio-player-container{background:linear-gradient(145deg,var(--primary-color),var(--accent-color));border-radius:5px;padding:15px;box-shadow:0 8px 20px rgba(0,0,0,.3);color:var(--light-bg);max-width:100%;margin:auto 10px;box-sizing:border-box}.audio-player-controls{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:15px;flex:1}.play-pause-btn{background:linear-gradient(145deg,var(--secondary-color),#ee5253);border:none;border-radius:50%;width:50px;height:50px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s,background .3s;flex-shrink:0}.play-pause-btn:hover{transform:scale(1.1);background:linear-gradient(145deg,#ff8787,var(--secondary-color))}.play-pause-btn i{font-size:1.5em;color:var(--light-bg)}.progress-container{flex-grow:1;display:flex;align-items:center;gap:10px;min-width:0}.current-time,.duration{font-size:.9em;color:var(--light-bg);min-width:40px;text-align:center;flex-shrink:0}.progress-bar{flex-grow:1;height:6px;background:rgba(255,255,255,.2);border-radius:3px;position:relative;cursor:pointer;transition:background .3s}.progress-bar:hover,.volume-slider:hover{background:rgba(255,255,255,.3)}.alert.alert-danger,.progress,.speed-select:hover{background:var(--secondary-color)}.progress{width:0%;height:100%;border-radius:3px;position:absolute;top:0;left:0;transition:width .1s linear}.volume-control{display:flex;align-items:center;gap:8px;min-width:100px;flex-shrink:0}.volume-btn{background:0 0;border:none;color:var(--light-bg);cursor:pointer;transition:color .3s}.volume-btn:hover{color:var(--secondary-color)}.volume-btn i{font-size:1.2em}.volume-slider{-webkit-appearance:none;width:80px;height:4px;background:rgba(255,255,255,.2);border-radius:2px;outline:0;transition:background .3s}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;background:var(--secondary-color);border-radius:50%;cursor:pointer;box-shadow:var(--box-shadow)}.volume-slider::-moz-range-thumb{width:12px;height:12px;background:var(--secondary-color);border-radius:50%;cursor:pointer;box-shadow:var(--box-shadow)}.speed-control{min-width:50px;flex-shrink:0}.speed-select{background:var(--primary-color);border:none;color:var(--light-bg);padding:5px;border-radius:5px;cursor:pointer;transition:background .3s}.speed-select:focus{outline:0;box-shadow:var(--box-shadow)}.alert.alert-danger{margin-top:10px;padding:8px;color:var(--light-bg);border-radius:5px;font-size:.9em}@media (max-width:1024px){.audio-player-container{padding:12px}.audio-player-controls{gap:10px}.play-pause-btn{width:45px;height:45px}.play-pause-btn i{font-size:1.3em}.progress-container{gap:8px}.current-time,.duration{font-size:.85em;min-width:35px}.volume-control{min-width:90px}.volume-slider{width:60px}.speed-control{min-width:45px}.speed-select{padding:4px;font-size:.9em}}@media (max-width:768px){.audio-player-container{padding:10px}.audio-player-controls{flex-wrap:nowrap;gap:8px;justify-content:space-between}.play-pause-btn{width:40px;height:40px}.play-pause-btn i{font-size:1.2em}.progress-container{gap:5px;flex-grow:1;min-width:0}.current-time,.duration{font-size:.8em;min-width:30px}.progress-bar{height:5px}.volume-control{min-width:80px}.volume-slider{width:50px}.volume-slider::-webkit-slider-thumb{width:10px;height:10px}.volume-slider::-moz-range-thumb{width:10px;height:10px}.speed-control{min-width:40px}.speed-select{padding:3px 5px;font-size:.85em}}@media (max-width:480px){.audio-player-container{padding:8px}.audio-player-controls{gap:6px}.play-pause-btn{width:36px;height:36px}.play-pause-btn i,.volume-btn i{font-size:1em}.progress-container{gap:3px}.current-time,.duration{font-size:.75em;min-width:25px}.volume-control{min-width:70px;gap:5px}.volume-slider{width:40px}.volume-slider::-webkit-slider-thumb{width:8px;height:8px}.volume-slider::-moz-range-thumb{width:8px;height:8px}.speed-control{min-width:35px}.speed-select{padding:2px 4px;font-size:.8em}}@media (max-width:320px){.audio-player-container{padding:6px}.audio-player-controls{gap:4px}.play-pause-btn{width:32px;height:32px}.play-pause-btn i,.volume-btn i{font-size:.9em}.progress-container{gap:2px}.current-time,.duration{font-size:.7em;min-width:20px}.progress-bar{height:4px}.volume-control{min-width:60px;gap:4px}.volume-slider{width:30px}.volume-slider::-webkit-slider-thumb{width:6px;height:6px}.volume-slider::-moz-range-thumb{width:6px;height:6px}.speed-control{min-width:30px}.speed-select{padding:2px 3px}}