*{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}.main-content{display:-webkit-box;display:-ms-flexbox;display:flex;gap:20px}.video-list{-webkit-box-flex:1;-ms-flex:1;flex:1;max-width:250px;background-color:#fff;border-radius:8px;-webkit-box-shadow:0 4px 8px rgba(0,0,0,.1);box-shadow:0 4px 8px rgba(0,0,0,.1);padding:20px;max-height:600px;overflow-y:auto}.search-bar{width:100%;padding:8px;margin-bottom:10px;border:1px solid #ccc;border-radius:4px}.video-list ul{list-style:none}.video-item{padding:10px;cursor:pointer;-webkit-transition:background .3s;transition:background .3s;border-bottom:1px solid #f0f0f0}.video-item:hover{background-color:#e0e0e0}.video-item:last-child{border-bottom:none}.video-item.selected{background-color:#d0e0ff;font-weight:700}.video-player{-webkit-box-flex:3;-ms-flex:3;flex:3;background-color:#fff;border-radius:8px;-webkit-box-shadow:0 4px 8px rgba(0,0,0,.1);box-shadow:0 4px 8px rgba(0,0,0,.1);padding:20px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:5px}.video-info h2{font-size:20px;color:#333}.video-info p{font-size:14px;color:#666}video{width:100%;height:auto;border-radius:8px;outline:none}.video-list-header{border-bottom:1px solid #f0f0f0;margin-bottom:8px}.video-item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:8px}.video-item .video-content{-webkit-box-flex:1;-ms-flex:1;flex:1;cursor:pointer}.video-item .video-content:hover{color:#1890ff}.video-item.selected{background-color:#e6f7ff}