/* 基本样式 */
.video-player-container {
    position: relative;
    width: 100%; /* 宽度占满父容器 */
}

#next-video {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
    margin-bottom: 5px;
    box-sizing: border-box; /* 让内边距和边框包含在宽度内 */
}

#next-video:hover {
    background-color: #0056b3;
}

.playlist-toggle {
    cursor: pointer;
    text-align: center;
    background-color: #f0f0f0;
    padding: 5px;
    box-sizing: border-box; /* 让内边距和边框包含在宽度内 */
}

.playlist {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.playlist li {
    padding: 10px;
    background-color: #f9f9f9;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
    box-sizing: border-box; /* 让内边距和边框包含在宽度内 */
}

.playlist li.active {
    background-color: #e0e0e0;
}

/* 小屏幕设备（例如手机，屏幕宽度小于 768px） */
@media (max-width: 767px) {
    #next-video {
        padding: 8px; /* 减少按钮内边距 */
        font-size: 14px; /* 减小按钮文字大小 */
    }

    .playlist-toggle {
        padding: 3px; /* 减少切换按钮内边距 */
        font-size: 14px; /* 减小切换按钮文字大小 */
    }

    .playlist li {
        padding: 8px; /* 减少播放列表项内边距 */
        font-size: 14px; /* 减小播放列表项文字大小 */
    }
}

/* 中等屏幕设备（例如平板，屏幕宽度在 768px 到 991px 之间） */
@media (min-width: 768px) and (max-width: 991px) {
    /* 可以根据需要在这里调整中等屏幕的样式 */
}

/* 大屏幕设备（例如笔记本电脑，屏幕宽度在 992px 到 1199px 之间） */
@media (min-width: 992px) and (max-width: 1199px) {
    /* 可以根据需要在这里调整大屏幕的样式 */
}

/* 超大屏幕设备（例如台式电脑，屏幕宽度大于等于 1200px） */
@media (min-width: 1200px) {
    /* 可以根据需要在这里调整超大屏幕的样式 */
}