.modern-player{background:linear-gradient(90deg,#2c2f33,#23272a);padding:20px;border-radius:12px;display:flex;align-items:center;gap:20px;max-width:100%;overflow:hidden;flex-wrap:wrap;justify-content:space-between}.player-buttons{display:flex;align-items:center;gap:20px}.progress-group{display:flex;align-items:center;gap:10px;flex:1}.repeat-toggle{background-color:transparent !important;color:#fff;border:none;padding:6px;border-radius:50%;transition:background-color .3s ease}.repeat-toggle.active{background-color:#4caf50 !important;color:#fff}.repeat-toggle svg{display:block}.repeat-toggle.active svg{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.bar{flex:1;height:6px;background:#999;border-radius:4px;position:relative}.bar-fill{height:100%;background:#ff4d6d;width:0;position:absolute;top:0;right:0}.bar-handle{width:4px;height:16px;background:#fff;position:absolute;top:50%;transform:translate(50%,-50%);border-radius:2px}.time{color:#ccc;font-size:14px;white-space:nowrap}.volume-wrapper{display:flex;align-items:center;gap:10px}.volume-slider{width:120px;height:4px;accent-color:#ff4d6d;cursor:pointer}.play-toggle,.mute-toggle{background:0 0;border:none;color:#fff;font-size:18px;cursor:pointer;transition:color .3s}.play-toggle:hover,.mute-toggle:hover{color:#ff4d6d}.tooltip-container{position:relative;display:inline-block}.tooltip-text{visibility:hidden;opacity:0;background-color:#333;color:#fff;text-align:center;border-radius:6px;padding:4px 8px;position:absolute;bottom:85%;left:50%;transform:translateX(-50%);font-size:12px;white-space:nowrap;z-index:9999;transition:opacity .2s ease-in-out}.tooltip-container:hover .tooltip-text{visibility:visible;opacity:1}body.light-mode .modern-player{background:#f5f5f5;color:#111}body.light-mode .bar{background-color:#ccc}body.light-mode .bar-fill{background-color:#ff4d6d}body.light-mode .volume-slider{accent-color:#ff4d6d}body.light-mode .play-toggle{color:#222}body.light-mode .mute-toggle svg,body.light-mode .repeat-toggle svg{stroke:#222}body.light-mode .repeat-toggle.active svg{stroke:#fff}.modern-player{height:60px;width:690px;margin:0 auto}.hidden{display:none}.play-toggle{margin-top:-4px}body.light-mode .modern-player svg,body.light-mode .modern-player button{stroke:#000;color:#000}body.light-mode .modern-player .current-time,body.light-mode .modern-player .duration{color:#000}@media (max-width:600px){.modern-player{width:100%;max-width:100%;height:auto;display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:20px 16px;border-radius:12px;background:linear-gradient(90deg,#2c2f33,#23272a);box-sizing:border-box}.volume-wrapper{justify-content:center;gap:6px}.volume-slider{left:45% !important;transform:translateX(-50%) translateY(-10%)}.play-toggle{margin-top:-2px}}@media (max-width:768px){.volume-slider{top:100%;bottom:auto;transform:translateX(-50%);margin-top:8px}}