*{box-sizing:border-box}body{color:#333;background-color:#f5f5f5;margin:0;padding:0;font-family:Roboto,sans-serif;line-height:1.5}#app{flex-direction:column;min-height:100vh;display:flex}a{color:#069;text-decoration:none}a:hover{text-decoration:underline}.footer{color:#fff;text-align:center;background-color:#333}.toast{color:#fff;text-align:center;background-color:#d24444;border-radius:5px;width:clamp(300px,100vw,800px);padding:5px 20px;animation:2s ease-in-out forwards toastAnimation;position:fixed;top:35px;box-shadow:0 10px 20px #0003}.toast--off{animation:2s ease-in-out forwards toastAnimationOff}@keyframes toastAnimation{0%{opacity:.1;transform:translateY(-5%)}to{opacity:1;transform:translateY(0)}}@keyframes toastAnimationOff{0%{opacity:1;transform:translateY(0)}to{opacity:.1;transform:translateY(5%)}}.bottom-player-controls{background-color:#333;flex-direction:column;align-items:center;padding:10px;display:flex;position:sticky;bottom:0;left:0;right:0}.player-controls{flex-direction:column;align-items:center;width:100%;display:flex}.track-info{align-items:center;width:100%;display:none}.track-avatar{border-radius:50%;width:40px;height:40px;margin-right:10px}.track-title{text-align:left;color:#ccc;flex-grow:1;font-size:16px;font-weight:700}#player-progress{width:100%}#player-time{text-align:center;color:#ccc;margin-top:5px;font-size:14px}.player-buttons{justify-content:space-around;width:100%;margin-top:10px;display:flex}.btn-play,.btn-pause,.btn-stop,.btn-favorite{color:#fff;cursor:pointer;background-color:#444;border:none;border-radius:50%;padding:10px;transition:background-color .3s}.btn-play:hover,.btn-pause:hover,.btn-stop:hover,.btn-favorite:hover{background-color:#555}.btn-hidden{display:none}#volume-container{align-items:center;width:33%;margin-top:10px;display:flex}#volume{background:#444;border-radius:5px;outline:none;width:100%;height:5px;transition:background-color .3s}#volume::-webkit-slider-thumb{cursor:pointer;width:15px;height:15px}#volume::-moz-range-thumb{cursor:pointer;width:15px;height:15px}#volume+span{color:#ccc;margin-left:10px;font-size:14px}.spinner-overlay{z-index:1000;pointer-events:none;background-color:#0006;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.spinner{will-change:transform;pointer-events:auto;border:4px solid #ffffff4d;border-top-color:#0f9;border-radius:50%;width:50px;height:50px;animation:.8s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.is-hidden{display:none!important}