*{box-sizing:border-box}html,body,#app{height:100%}.music-player{width:100%;height:100vh;transition:all .2s;display:flex;overflow:hidden}body{background:linear-gradient(45deg,#189189,#496ca3);margin:0}.control-panel{justify-content:center;align-items:center;height:100%;padding:0;display:flex}.player-content{text-align:center;width:100%;max-width:500px;margin:0 20px}.playlist-panel{color:#fff;background:#0000001a;justify-content:flex-start;align-items:flex-start;display:flex;overflow:auto}.playlist-content{width:100%}.playlist-header{background-color:#00000026;padding:30px 0 25px 25px}.playlist-list{max-height:100%;overflow-y:auto}.playlist-item{cursor:pointer;align-items:center;gap:12px;padding:10px 30px 10px 20px;display:flex}.playlist-item:hover{background:#0003}.playlist-item.active{background:#0006;box-shadow:0 2px 8px #0006}.item-pic{object-fit:cover;flex:0 0 56px;width:50px;height:50px}.item-body{flex:auto;min-width:0}.item-name{color:#fff;white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:600;overflow:hidden}.item-desc{color:#ffffffb3;white-space:nowrap;text-overflow:ellipsis;font-size:12px;overflow:hidden}.item-time{color:#ffffffd9;flex:none;margin-left:8px;font-size:12px}@media (max-width:699px){.music-player{flex-direction:column}.control-panel{flex:none;width:100%}.playlist-panel{display:none}}@media (min-width:700px){.music-player{flex-direction:row}.control-panel{flex:0 0 350px;width:350px}.playlist-panel{flex:auto;min-width:350px;display:block}}.player-inner{flex-direction:column;justify-content:flex-start;align-items:center;width:100%;height:100%;display:flex}.cover-wrap{flex:auto;justify-content:center;align-items:center;width:calc(100% - 20px);padding:10px 0;display:flex}.cover{aspect-ratio:1;color:#fff;background:linear-gradient(135deg,#222,#000);border-radius:4px;justify-content:center;align-items:center;width:100%;font-size:48px;display:flex}.cover-img{object-fit:cover;border-radius:4px;width:100%;height:100%}.cover-fallback{justify-content:center;align-items:center;width:100%;height:100%;display:flex}.media-name{color:#fff;text-align:center;width:calc(100% - 60px);margin-bottom:12px;font-size:14px;font-weight:400;display:inline-block}.progress-wrap{box-sizing:border-box;width:calc(100% - 20px);margin-bottom:12px}.progress-bar-outer{background:#ffffff1f;border-radius:1px;width:100%;height:10px;overflow:hidden}.progress-bar-inner{background:#18e9e9;width:0%;height:100%;transition:width .3s linear}.time-row{color:#ffffffbf;justify-content:space-between;margin-top:6px;font-size:12px;display:flex}.controls-row{justify-content:center;align-items:center;gap:12px;width:calc(100% - 20px);display:flex}.ctrl-btn{color:#fff;cursor:pointer;background:#ffffff0f;border:none;border-radius:8px;width:25%;height:48px;padding-top:3px;font-size:12px}.ctrl-btn.play{color:#012;background:#18e9e9;width:50%;height:48px;padding-top:0;font-size:18px}