/* 基础变量 */
:root {
    --wp-vp-bg-main: #ffffff;
    --wp-vp-bg-secondary: #f8f9fa;
    --wp-vp-bg-card: #ffffff;
    --wp-vp-text-main: #333333;
    --wp-vp-text-secondary: #999999;
    --wp-vp-border-color: #e0e0e0;
    --wp-vp-primary: #007bff;
    --wp-vp-primary-hover: #0056b3;
    --wp-vp-active: #ff0000;
    --wp-vp-active-text: #ffffff;
    --wp-vp-scroll-thumb: #ccc;
    --wp-vp-scroll-track: #f5f5f5;
    --wp-vp-player-bg: #000000;
    --wp-vp-like: #ff69b4;
    --wp-vp-like-active: #ff1493;
    transition: all 0.3s ease;
}

/* 暗黑模式变量 */
:root.wp-vp-dark {
    --wp-vp-bg-main: #121212;
    --wp-vp-bg-secondary: #1e1e1e;
    --wp-vp-bg-card: #2d2d2d;
    --wp-vp-text-main: #f0f0f0;
    --wp-vp-text-secondary: #cccccc;
    --wp-vp-border-color: #444444;
    --wp-vp-primary: #38a1f3;
    --wp-vp-primary-hover: #2196f3;
    --wp-vp-scroll-thumb: #666666;
    --wp-vp-scroll-track: #333333;
}

/* 核心：移除原生控制栏阴影 */
video#wp-video-player::-webkit-media-controls {
    box-shadow: none !important;
    text-shadow: none !important;
    background: none !important;
    background-color: transparent !important;
}
video#wp-video-player::-webkit-media-controls-enclosure {
    box-shadow: none !important;
    text-shadow: none !important;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
}
video#wp-video-player::-webkit-media-controls-panel {
    box-shadow: none !important;
    text-shadow: none !important;
    background: none !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    border: none !important;
}

/* 移除下载按钮 */
video#wp-video-player::-webkit-media-controls-download-button {
    display: none !important;
}

/* 播放器容器 */
.wp-video-player-container {
    max-width: 1600px;
    margin: 20px auto;
    padding: 0 10px;
    font-family: "Microsoft Yahei", sans-serif;
    position: relative;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* 主布局 */
.player-playlist-wrap {
    display: flex;
    gap: 20px;
    margin-bottom: 24px;
    width: 100%;
    height: 600px;
    flex-wrap: wrap;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* 全屏样式 */
body.fullscreen-video .player-controls,
body.fullscreen-video .playlist-side {
    display: none !important;
}
body.fullscreen-video .player-side {
    flex: none !important;
    width: 100% !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}
body.fullscreen-video .video-wrap {
    width: 100% !important;
    height: 100vh !important;
    aspect-ratio: unset !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

/* 左侧播放器区域 */
.player-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 400px;
    height: 100%;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* 视频容器 */
.video-wrap {
    position: relative;
    width: 100%;
    height: calc(100% - 60px);
    background-color: var(--wp-vp-player-bg);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--wp-vp-border-color);
    box-sizing: border-box;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* 视频封面 */
.video-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 10;
    transition: opacity 0.3s ease;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* 播放按钮 */
.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background-color: rgba(255, 0, 0, 0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 15;
    transition: all 0.3s ease;
    box-shadow: none !important;
    text-shadow: none !important;
    border: none !important;
    outline: none !important;
}
.play-button:hover {
    transform: translate(-50%, -50%) scale(1.1);
    background-color: rgba(255, 0, 0, 0.9);
    box-shadow: none !important;
    text-shadow: none !important;
}
.play-button i {
    color: #ffffff;
    font-size: 40px;
    margin-left: 8px;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* 视频元素 */
#wp-video-player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 20;
    opacity: 0;
    transition: opacity 0.3s ease;
    box-shadow: none !important;
    text-shadow: none !important;
    outline: none !important;
    border: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
#wp-video-player:hover {
    box-shadow: none !important;
    text-shadow: none !important;
    background: none !important;
}
#wp-video-player.playing {
    opacity: 1;
    box-shadow: none !important;
    text-shadow: none !important;
}
#wp-video-player.playing ~ .video-cover,
#wp-video-player.playing ~ .play-button {
    opacity: 0;
    pointer-events: none;
}

/* 播放器控制栏 */
.player-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 20px;
    background-color: var(--wp-vp-bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--wp-vp-border-color);
    align-items: center;
    justify-content: center;
    position: relative;
    height: 60px;
    box-sizing: border-box;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    box-shadow: none !important;
    text-shadow: none !important;
}
.player-controls::before {
    content: "若播放卡顿，请切换其他线路尝试";
    display: inline-block;
    font-size: 12px;
    color: var(--wp-vp-text-secondary);
    margin-right: 10px;
    white-space: nowrap;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* 线路选择框 */
#wp-video-line-select {
    padding: 8px 16px;
    background-color: var(--wp-vp-bg-card);
    color: var(--wp-vp-text-main);
    border: 1px solid var(--wp-vp-border-color);
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    min-width: 130px;
    position: static;
    padding-left: 16px;
    white-space: nowrap;
    box-shadow: none !important;
    text-shadow: none !important;
    outline: none !important;
}
#wp-video-line-select:hover {
    box-shadow: none !important;
    text-shadow: none !important;
}

/* 通用按钮样式 */
.control-btn {
    padding: 8px 16px;
    background-color: var(--wp-vp-bg-card);
    color: var(--wp-vp-text-main);
    border: 1px solid var(--wp-vp-border-color);
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    display: flex !important;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    white-space: nowrap;
    box-shadow: none !important;
    text-shadow: none !important;
    outline: none !important;
}
.control-btn:hover {
    background-color: var(--wp-vp-primary);
    color: var(--wp-vp-active-text);
    border-color: var(--wp-vp-primary);
    box-shadow: none !important;
    text-shadow: none !important;
}
.control-btn.active {
    background-color: var(--wp-vp-primary) !important;
    color: var(--wp-vp-active-text) !important;
    border-color: var(--wp-vp-primary) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
.control-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--wp-vp-bg-secondary);
    color: var(--wp-vp-text-secondary);
    border-color: var(--wp-vp-border-color);
    box-shadow: none !important;
    text-shadow: none !important;
}

/* 喜欢按钮样式 */
#wp-video-like {
    background-color: var(--wp-vp-bg-card);
    color: var(--wp-vp-like);
    border-color: var(--wp-vp-like);
}
#wp-video-like:hover {
    background-color: var(--wp-vp-like);
}
#wp-video-like.liked {
    background-color: var(--wp-vp-like-active) !important;
    color: white !important;
    border-color: var(--wp-vp-like-active) !important;
}

/* 收藏按钮样式 */
#wp-video-collection {
    min-width: 80px;
}
#wp-video-collection.active {
    background-color: var(--wp-vp-like-active) !important;
    border-color: var(--wp-vp-like-active) !important;
}

/* 分隔符 */
.control-sep {
    width: 1px;
    height: 20px;
    background-color: var(--wp-vp-border-color);
    margin: 0 4px;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* 缩放按钮组 */
.video-zoom-group {
    display: flex !important;
    gap: 6px !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* 右侧播放列表区域 */
.playlist-side {
    width: 320px;
    flex-shrink: 0;
    display: flex !important;
    flex-direction: column;
    gap: 12px;
    background-color: var(--wp-vp-bg-secondary);
    border: 1px solid var(--wp-vp-border-color);
    border-radius: 8px;
    padding: 16px;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* 播放列表标题栏 */
.playlist-header {
    display: flex !important;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--wp-vp-border-color);
    gap: 12px;
    flex-wrap: nowrap !important;
    height: 40px;
    box-sizing: border-box;
    box-shadow: none !important;
    text-shadow: none !important;
}
.playlist-title {
    display: none !important;
    text-shadow: none !important;
}

/* 排序按钮组 */
.playlist-sort-btns {
    display: flex !important;
    gap: 6px;
    height: 100%;
    align-items: center;
    box-shadow: none !important;
    text-shadow: none !important;
}
.playlist-sort-btns .sort-btn {
    padding: 6px 10px !important;
    font-size: 12px !important;
    display: inline-flex !important;
    height: 32px;
    align-items: center;
    box-sizing: border-box;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* 暗黑模式按钮 */
#wp-video-darkmode {
    padding: 6px 10px !important;
    font-size: 12px !important;
    display: inline-flex !important;
    height: 32px !important;
    align-items: center;
    box-sizing: border-box;
    min-width: 80px;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* 搜索框 */
.playlist-search-wrap {
    width: 100%;
    display: flex !important;
    gap: 8px;
    margin: 0 !important;
    height: 40px;
    box-sizing: border-box;
    box-shadow: none !important;
    text-shadow: none !important;
}
#wp-video-playlist-search {
    flex: 1;
    padding: 8px 12px !important;
    border: 1px solid var(--wp-vp-border-color) !important;
    border-radius: 4px !important;
    background-color: var(--wp-vp-bg-card) !important;
    color: var(--wp-vp-text-main) !important;
    font-size: 14px !important;
    outline: none !important;
    height: 100%;
    box-sizing: border-box;
    box-shadow: none !important;
    text-shadow: none !important;
}
#wp-video-playlist-search:focus {
    border-color: var(--wp-vp-primary) !important;
    box-shadow: none !important;
}
#wp-video-search-clear {
    padding: 8px 12px !important;
    min-width: 40px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 100%;
    box-sizing: border-box;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* 搜索无结果提示 */
#wp-video-search-empty {
    padding: 20px;
    text-align: center;
    color: var(--wp-vp-text-secondary);
    font-size: 14px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* 播放列表滚动区 */
.playlist-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 16px !important;
    margin-right: -8px !important;
    scroll-behavior: smooth !important;
    height: calc(100% - 92px);
    box-shadow: none !important;
    text-shadow: none !important;
}

/* 播放列表布局 */
.playlist-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 48px;
    gap: 8px;
    margin: 0;
    padding: 0 8px 0 8px !important;
    align-items: stretch;
    justify-items: stretch;
    width: calc(100% - 8px) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* 播放列表项 */
.playlist-item {
    height: 100%;
    padding: 0 8px !important;
    background-color: var(--wp-vp-bg-card);
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid var(--wp-vp-border-color);
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center !important;
    line-height: 1.4;
    color: var(--wp-vp-text-main);
    box-sizing: border-box;
    text-align: center;
    box-shadow: none !important;
    text-shadow: none !important;
    outline: none !important;
}
/* 喜欢标记 */
.playlist-item.liked::after {
    content: "❤️";
    position: absolute;
    top: 3px;
    left: 5px !important;
    font-size: 11px;
    opacity: 0.9;
}
.playlist-item::before {
    content: attr(data-ep);
    position: absolute;
    top: 3px;
    right: 5px !important;
    font-size: 11px;
    opacity: 0.9;
    font-weight: normal;
    color: inherit;
    box-shadow: none !important;
    text-shadow: none !important;
}
.playlist-item.active {
    background-color: #ff0000;
    color: #ffffff;
    font-weight: 700;
    border-color: #ff0000;
    box-shadow: none !important;
    text-shadow: none !important;
}
.playlist-item:hover:not(.active) {
    border-color: var(--wp-vp-primary);
    color: var(--wp-vp-primary);
    background-color: rgba(255,255,255,0.05);
    box-shadow: none !important;
    text-shadow: none !important;
}

/* 滚动条样式 */
.playlist-scroll::-webkit-scrollbar {
    width: 8px !important;
    height: 8px;
    margin-left: 8px !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
.playlist-scroll::-webkit-scrollbar-thumb {
    background: var(--wp-vp-scroll-thumb);
    border-radius: 4px;
    cursor: pointer;
    border: 2px solid transparent !important;
    background-clip: padding-box !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
.playlist-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--wp-vp-primary);
    box-shadow: none !important;
    text-shadow: none !important;
}
.playlist-scroll::-webkit-scrollbar-track {
    background: var(--wp-vp-scroll-track);
    border-radius: 4px;
    margin-right: 8px !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    box-shadow: none !important;
    text-shadow: none !important;
}
::-webkit-scrollbar-thumb {
    background: var(--wp-vp-scroll-thumb);
    border-radius: 4px;
    cursor: pointer;
    box-shadow: none !important;
    text-shadow: none !important;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--wp-vp-primary);
    box-shadow: none !important;
    text-shadow: none !important;
}
::-webkit-scrollbar-track {
    background: var(--wp-vp-scroll-track);
    border-radius: 4px;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* 响应式适配 */
@media (max-width: 992px) {
    .player-playlist-wrap { 
        flex-direction: column; 
        height: auto;
        min-height: 600px;
    }
    .player-side { 
        min-width: 100%; 
        height: auto;
    }
    .video-wrap {
        height: 400px;
    }
    .playlist-side { 
        width: 100%; 
        height: 400px;
        min-height: 300px;
    }
    .playlist-list { 
        grid-template-columns: repeat(4, 1fr); 
        grid-auto-rows: 48px;
        width: calc(100% - 8px) !important;
        padding: 0 8px !important;
    }
    .player-controls::before { display: none; }
    .playlist-scroll {
        height: calc(100% - 92px);
        padding-right: 16px !important;
        margin-right: -8px !important;
    }
    .play-button {
        width: 80px;
        height: 80px;
    }
    .play-button i {
        font-size: 32px;
    }
}
@media (max-width: 768px) {
    .player-controls {
        gap: 6px;
        padding: 8px 10px;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scrollbar-width: none;
        height: auto;
        min-height: 60px;
    }
    .player-controls::-webkit-scrollbar { display: none; }
    .control-btn { padding: 6px 8px; font-size: 12px; gap: 4px; }
    #wp-video-line-select { min-width: 100px; padding: 6px 8px; font-size: 12px; }
    .playlist-list { 
        grid-template-columns: repeat(3, 1fr); 
        grid-auto-rows: 44px;
        width: calc(100% - 8px) !important;
        padding: 0 8px !important;
    }
    .playlist-item { 
        padding: 0 8px !important; 
        font-size: 12px; 
        justify-content: center !important;
    }
    .video-wrap {
        height: 300px;
    }
    .playlist-side { padding: 12px; }
    .playlist-header { 
        gap: 8px; 
        height: auto; 
        flex-wrap: wrap !important;
    }
    .playlist-sort-btns .sort-btn,
    #wp-video-darkmode,
    #wp-video-collection {
        height: 30px !important;
        font-size: 11px !important;
        padding: 4px 8px !important;
    }
    .player-controls { border-radius: 4px; }
    #wp-video-playlist-search { padding: 6px 10px !important; font-size: 12px !important; }
    #wp-video-search-clear { padding: 6px 10px !important; }
    .video-zoom-group .control-btn { padding: 6px 8px !important; font-size: 11px !important; }
    .playlist-scroll {
        height: calc(100% - 80px);
        padding-right: 16px !important;
        margin-right: -8px !important;
    }
    .play-button {
        width: 70px;
        height: 70px;
    }
    .play-button i {
        font-size: 28px;
    }
}
@media (max-width: 480px) {
    .playlist-list { 
        grid-template-columns: repeat(2, 1fr); 
        grid-auto-rows: 40px;
        width: calc(100% - 8px) !important;
        padding: 0 8px !important;
    }
    .control-btn { padding: 5px 6px; font-size: 11px; }
    #wp-video-line-select { min-width: 90px; }
    .playlist-item { 
        font-size: 11px; 
        padding: 0 8px !important;
        justify-content: center !important;
    }
    .video-wrap {
        height: 200px;
    }
    .playlist-side {
        height: 300px;
    }
    .play-button {
        width: 60px;
        height: 60px;
    }
    .play-button i {
        font-size: 24px;
    }
}