/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Nov 20 2025 | 09:40:02 */
*{margin:0;padding:0;box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
body{background:#f5faf5;min-height:100vh;color:#1a202c;padding:15px}
.container{max-width:1400px;margin:0 auto;padding:10px 0}
.scrollbar-hide{scrollbar-width:none;-ms-overflow-style:none}
.scrollbar-hide::-webkit-scrollbar{display:none}
button {border: none !important;outline: none !important;}
input[type=range]{-webkit-appearance:none;height:3px;border-radius:2px;background:#e6f4ea;outline:0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#38b2ac;cursor:pointer;transition:all .2s ease}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2);background:#2d9791}
@keyframes ecg{0%{height:5px}
5%{height:30px}
10%{height:8px}
15%{height:35px}
20%{height:12px}
25%{height:25px}
30%{height:4px}
35%{height:32px}
40%{height:10px}
45%{height:28px}
50%{height:8px}
55%{height:22px}
60%{height:3px}
65%{height:26px}
70%{height:15px}
75%{height:30px}
80%{height:4px}
85%{height:24px}
90%{height:5px}
95%{height:29px}
100%{height:8px}
}
.header{text-align:center;margin-bottom:20px;padding:10px 0}
.header-title{font-size:clamp(1.4rem,3vw,1.8rem);font-weight:700;color:#2d3748}
.player-wrapper{background:#fff;border-radius:12px;box-shadow:0 4px 14px rgba(0,0,0,.06);overflow:hidden}
.player-control{height:140px;display:flex;align-items:center;padding:0 0px;gap:20px}
.wave-container{width:100px;height:100px;background:#f0f8f0;border-radius:8px;display:flex;align-items:center;justify-content:center;gap:5px;border:1px solid #d4e7d4;flex-shrink:0}
.ecg-bar{width:4px;height:8px;background:#38b2ac;border-radius:2px}
.wave-container.playing .ecg-bar{animation:ecg 1.5s ease-in-out infinite}
.ecg-bar:nth-child(2){animation-delay:.1s}
.ecg-bar:nth-child(3){animation-delay:.2s}
.ecg-bar:nth-child(4){animation-delay:.3s}
.ecg-bar:nth-child(5){animation-delay:.4s}
.ecg-bar:nth-child(6){animation-delay:.5s}
.ecg-bar:nth-child(7){animation-delay:.6s}
.ecg-bar:nth-child(8){animation-delay:.7s}
.ecg-bar:nth-child(9){animation-delay:.8s}
.ecg-bar:nth-child(10){animation-delay:.9s}
.right-section{flex:1;height:100%;display:flex;flex-direction:column;justify-content:center;gap:15px}
.right-top{display:flex;align-items:center;gap:25px;width:100%}
.track-info{flex:1;min-width:0}
.track-title{font-size:1.2rem;font-weight:600;margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#2d3748}
.track-artist{font-size:.95rem;color:#687864;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.control-buttons{display:flex;align-items:center;gap:10px;flex-shrink:0}
.play-control{display:flex;align-items:center;gap:8px}
.control-btn{cursor:pointer;background:0 0;color:#4a5568;font-size:22px;transition:all .2s ease}
.control-btn:hover{transform:scale(1.1);color:#38b2ac}
.play-btn{cursor:pointer;border:none;background:#38b2ac;color:#fff;border-radius:50%;width:48px;height:48px;display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:0 2px 8px rgba(56,178,172,.3);transition:all .3s ease}
.play-btn:hover{transform:scale(1.05);box-shadow:0 3px 10px rgba(56,178,172,.4);background:#2d9791}
.loop-mode{display:flex;gap:5px;}
.loop-btn{cursor:pointer;border:none;background:0 0;color:#718096;font-size:20px;width:36px;height:36px;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:all .2s ease}
.loop-btn.active{background:rgba(56,178,172,.15);color:#38b2ac}
.loop-btn:hover{background:rgba(56,178,172,.08)}
.volume-control{display:flex;align-items:center;gap:10px;width:140px;flex-shrink:0}
.volume-icon-btn{cursor:pointer;height:28px;border:none;background:0 0;color:#4a5568;font-size:20px;transition:all .2s ease}
.volume-icon-btn:hover{color:#38b2ac}
.volume-bar{width:100%}
.right-bottom{width:100%}
.progress-bar{width:100%;height:3px}
.divider{height:1px;background:#e6f4ea;width:100%}
.music-list-section{padding:0px}
.list-title{font-size:1.1rem;font-weight:600;color:#2d3748;margin-bottom:15px}
.music-groups{display:grid;grid-template-columns:repeat(1,1fr);gap:6px}
@media (min-width:768px){.music-groups{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1200px){.music-groups{grid-template-columns:repeat(3,1fr)}}
.music-group{background:#fafcf9;border-radius:8px;padding:8px;border:1px solid #e6f4ea}
.group-title{font-size:1rem;font-weight:600;color:#2d3748;padding-bottom:10px;border-bottom:1px solid #e6f4ea}
.music-list{max-height:600px;overflow-y:auto;}
.music-item{display:flex;align-items:center;justify-content:space-between;padding:5px 0px;border-radius:6px;margin-bottom:2px;transition:all .2s ease;cursor:pointer}
.music-item:hover{background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.04)}
.music-item.active{background:rgba(56,178,172,.1);border-left:2px solid #38b2ac}
.music-name{max-width:125px;flex:1;min-width:0;font-size:.9rem;color:#2d3748;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.music-actions{display:flex;align-items:center;gap:2px;flex-shrink:0}
.music-meta{display:flex;align-items:center;gap:5px;font-size:.8rem;color:#687864;}
.action-btn{cursor:pointer;border:none;background:0 0;color:#718096;font-size:16px;transition:all .2s ease}
.action-btn:hover{color:#38b2ac}
.action-btn.favorite.active{color:#e53e3e}
.icon{display:inline-block;width:24px;height:24px;text-align:center;line-height:24px}
.icon-play::before { content: "▶"; font-size: 18px; margin-left: 2px; }
.icon-pause::before { content: "❚❚"; font-size: 15px; }
.icon-prev::before{content:"";display:inline-block;width:18px;height:18px;background:url('/wp-content/uploads/Images/music/syq.png') no-repeat center center;background-size:contain;}
.icon-next::before {content:"";display:inline-block;width:18px;height:18px;background:url('/wp-content/uploads/Images/music/xyq.png') no-repeat center center;background-size:cover;}
.icon-download::before { content: "⬇"; font-size: 16px; }
.icon-heart::before { content: "♥"; font-size: 16px; }
.icon-heart-o::before { content: "♡"; font-size: 16px; }
.icon-volume::before {content:"";display:inline-block;width:18px;height:18px;background:url('/wp-content/uploads/Images/music/yl.png') no-repeat center center;background-size:contain;}
.icon-volume-off::before {content:"";display:inline-block;width:18px;height:18px;background:url('/wp-content/uploads/Images/music/jy.png') no-repeat center center;background-size:contain;}
.icon-single::before {content:"";display:inline-block;width:18px;height:18px;background:url('/wp-content/uploads/Images/music/dqxh.png') no-repeat center center;background-size:contain;}
.icon-order::before {content:"";display:inline-block;width:18px;height:18px;background:url('/wp-content/uploads/Images/music/lbxh.png') no-repeat center center;background-size:contain;}
.icon-random::before {content:"";display:inline-block;width:18px;height:18px;background:url('/wp-content/uploads/Images/music/sjbf.png') no-repeat center center;background-size:contain;}