/* ==========================================================================
   tv-play.css — 播放页浅色皮肤（腾讯视频风格）2026-10-28
   只改视觉，不动播放器 DOM / JSON 配置块 / 播放列表交互
   ========================================================================== */

#play_page {
    --tvp-bg: #f5f6f8;
    --tvp-card: #ffffff;
    --tvp-line: #eef0f4;
    --tvp-text: #14161a;
    --tvp-text-2: #5a6270;
    --tvp-text-3: #8a9099;
    --tvp-brand: #0aa7ff;
    --tvp-brand-2: #0a6bff;
    --tpl-accent: #0aa7ff;
    --tpl-accent-hover: #0a6bff;
    background: var(--tvp-bg);
}

/* ---------------------------------------------------------------- 播放器区 */

/* 主题默认 #282832 深色底，改成透明白底 */
#play_page .play_boxbg,
#play_page .play_but {
    background: transparent !important;
}

#play_page .play_boxbg .container {
    min-height: 0 !important;
    padding-top: 20px;
}

#play_page .play_box.play_video {
    padding: 0 !important;
}

#play_page .player_video {
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(16, 24, 40, .14);
}

/* 播放器下方工具条：报错/刷新/分享/收藏/上下集 */
#play_page .play_but {
    padding-top: 10px;
}

#play_page .play-but-item a {
    color: var(--tvp-text-2) !important;
    font-size: 13px;
}

#play_page .play-but-item a:hover {
    color: var(--tvp-brand) !important;
}

#play_page .play-but-item a .iconfont,
#play_page .play-but-item a svg {
    opacity: .72;
}

/* ------------------------------------------------------------ 右侧信息栏 */

#play_page .play_box_right {
    background: var(--tvp-card) !important;
    border-radius: 12px;
    box-shadow: 0 2px 14px rgba(16, 24, 40, .07);
    overflow-x: hidden;
    overflow-y: auto;
}

#play_page .play_box_right::-webkit-scrollbar {
    background: #fff !important;
    width: 4px;
}

#play_page .play_box_right::-webkit-scrollbar-track {
    background: #fff !important;
}

#play_page .play_box_right::-webkit-scrollbar-thumb {
    background: #d8dde5 !important;
    border-radius: 4px;
}

#play_page .play_namebox {
    background: var(--tvp-card) !important;
    border-bottom: 1px solid var(--tvp-line) !important;
}

#play_page .play_namebox .title {
    color: var(--tvp-text) !important;
    font-size: 15px;
    font-weight: 700;
}

#play_page .play_namebox .fenlei {
    border-color: rgba(10, 167, 255, .45) !important;
    color: var(--tvp-brand) !important;
}

#play_page .play_clike {
    color: var(--tvp-text) !important;
    font-size: 14px;
    font-weight: 700;
}

#play_page .play_vlist_title,
#play_page .play_vlist--recommend .play_vlist_title {
    color: var(--tvp-text) !important;
    font-size: 13px;
}

#play_page .play_vlist_now,
#play_page .play_vlist_now a,
#play_page .play_vlist_tag,
#play_page .play_vlist--recommend .play_vlist_meta {
    color: var(--tvp-text-3) !important;
    font-size: 12px;
}

#play_page .play_vlist .vnow .play_vlist_title {
    color: var(--tvp-brand-2) !important;
}

#play_page .play_vlist_thumb,
#play_page .play_vlist_thumb--v,
#play_page .play_vlist_thumb--h {
    background-color: #eef1f5 !important;
    border: 0 !important;
    border-radius: 8px;
    overflow: hidden;
}

#play_page .play_vlist a:hover .play_vlist_title {
    color: var(--tvp-brand) !important;
}

/* ------------------------------------------------------ 标题 / 简介 / 元信息 */

#play_page .player_detail .video_title .title {
    color: var(--tvp-text) !important;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.4px;
}

/* 主题在「浅色模式」下把播放页标题强行反色成白色（vod-play.css 里的
   body:not(.bstem) 规则），这里用同等特异性 + 后加载的 !important 压回去 */
body:not(.bstem) #play_page .player .video_title .title,
body:not(.bstem) #play_page .player .video_title h1.title {
    color: var(--tvp-text) !important;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.4px;
}

body:not(.bstem) #play_page .player .play_now a.flip,
body:not(.bstem) #play_page .player .play_now a.flip span {
    color: var(--tvp-text-3) !important;
}

#play_page .play_text .nstem,
#play_page .play_text .nstem a {
    color: var(--tvp-text-3) !important;
    font-size: 13px;
}

#play_page .play_text .text_score {
    color: #ff9f0a !important;
    font-weight: 700;
}

#play_page .player_detail .play_now .flip {
    color: var(--tvp-text-3) !important;
}

#play_page .play_content p {
    color: var(--tvp-text-2);
    line-height: 1.9;
}

/* -------------------------------------------------------------- 白卡容器 */

#play_page .pannel {
    background: var(--tvp-card);
    border-radius: 12px;
    box-shadow: 0 2px 14px rgba(16, 24, 40, .06);
    margin-bottom: 16px;
    padding: 16px 18px;
    box-sizing: border-box;
}

#play_page .pannel_head {
    border-bottom: 0;
    margin-bottom: 6px;
    padding-bottom: 0;
}

#play_page .pannel_head .title {
    color: var(--tvp-text) !important;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.3px;
}

#play_page .text_muted,
#play_page .vod-playlist-head-sort a,
#play_page .vod-playlist-head-sort .sort_btn {
    color: var(--tvp-text-3) !important;
}

#play_page .player_infotip,
#play_page .player_infotip__name,
#play_page .player_infotip__chunk,
#play_page .player_infotip__tip {
    color: var(--tvp-text-3) !important;
}

#play_page .player_infotip__ico {
    color: var(--tvp-brand) !important;
}

/* -------------------------------------------------------------- 线路 Tab */

#play_page .title_nav {
    border-bottom: 1px solid var(--tvp-line);
}

#play_page .title_nav li a {
    color: var(--tvp-text-2) !important;
    font-size: 14px;
}

#play_page .title_nav li a .iconfont {
    color: var(--tvp-text-3);
}

#play_page .title_nav li.active a {
    color: var(--tvp-brand) !important;
    font-weight: 700;
}

#play_page .title_nav li.active a .iconfont {
    color: var(--tvp-brand);
}

/* -------------------------------------------------------------- 剧集按钮 */

#play_page .content_playlist {
    padding: 14px 0 6px !important;
}

/* 剧集按钮：主题在 .tabs.playlist .playlist_notfull 层级用了 !important，
   这里用同等深层级压过它 */
#play_page .content_playlist li>a,
#play_page .tabs.playlist .playlist_notfull .content_playlist li>a {
    background: #f4f6f9 !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    color: var(--tvp-text-2) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    min-height: 38px !important;
    padding: 8px 14px !important;
    transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}

#play_page .tabs.playlist .playlist_notfull .content_playlist li:not(.active)>a:hover,
#play_page .content_playlist li:not(.active)>a:hover {
    background: #e8f4ff !important;
    border-color: rgba(10, 167, 255, .35) !important;
    color: var(--tvp-brand) !important;
    box-shadow: none !important;
}

#play_page .content_playlist li.active>a,
#play_page .content_playlist li.active>a:hover,
#play_page .tabs.playlist .playlist_notfull .content_playlist li.active>a,
#play_page .tabs.playlist .playlist_notfull .content_playlist li.active>a:hover {
    background: linear-gradient(135deg, #25c2ff, #0a6bff) !important;
    border-color: transparent !important;
    box-shadow: 0 4px 12px rgba(10, 107, 255, .28) !important;
    color: #fff !important;
}

/* 播放中的三根音柱改成白色 */
#play_page .content_playlist li.active>a>.hl-play-active.hl-bg-conch,
#play_page .content_playlist li.active>a>.hl-play-active.hl-bg-conch::before,
#play_page .content_playlist li.active>a>.hl-play-active.hl-bg-conch::after {
    background-color: #fff !important;
}

#play_page .vod-playlist-expand {
    background: #f4f6f9 !important;
    border: 0 !important;
    border-radius: 8px !important;
    color: var(--tvp-text-2) !important;
}

#play_page .vod-playlist-expand:hover {
    background: #e8f4ff !important;
    color: var(--tvp-brand) !important;
}

/* ------------------------------------------------------------ 标签墙胶囊 */

#play_page .vod-play-tagwall {
    background: var(--tvp-card);
    border-radius: 12px;
    overflow: hidden;
    padding: 8px 18px 12px;
}

/* 跑马灯轨道本身超宽，必须由容器裁掉，否则窄屏会出现横向滚动条 */
#play_page .vod-play-tagwall__lane,
#play_page .vod-play-tagwall__marquee {
    overflow: hidden !important;
    max-width: 100% !important;
}

#play_page .vod-play-tagwall .vod-play-tagwall__pill,
#play_page .vod-play-tagwall .vod-play-tagwall__pill--c0,
#play_page .vod-play-tagwall .vod-play-tagwall__pill--c1,
#play_page .vod-play-tagwall .vod-play-tagwall__pill--c2,
#play_page .vod-play-tagwall .vod-play-tagwall__pill--c3,
#play_page .vod-play-tagwall .vod-play-tagwall__pill--c4,
#play_page .vod-play-tagwall .vod-play-tagwall__pill--c5 {
    background: #f4f6f9 !important;
    color: var(--tvp-text-2) !important;
    font-weight: 500 !important;
    transition: background-color .16s ease, color .16s ease;
}

#play_page .vod-play-tagwall .vod-play-tagwall__pill:hover {
    background: #e8f4ff !important;
    color: var(--tvp-brand) !important;
}

/* ---------------------------------------------------- 相关推荐 / 演职员卡 */

#play_page .pannel--vod-related .mac-vod-grouped-skeleton .thumb,
#play_page .mac-vod-grouped-skeleton .thumb {
    background: #eef1f5 !important;
    border-radius: 10px;
}

#play_page .mac-vod-grouped-skeleton .line {
    background: #eef1f5 !important;
}

#play_page #js-play-like-groups .vodlist_title a,
#play_page #js-play-like-groups .vodlist_title {
    color: var(--tvp-text) !important;
}

#play_page #js-play-like-groups .vodlist_sub,
#play_page #js-play-like-groups .vodlist_sub a {
    color: var(--tvp-text-3) !important;
}

/* 演职员 */
#play_page .actor_name {
    color: var(--tvp-text-2) !important;
}

#play_page .actor_pic {
    background-color: #eef1f5 !important;
    border-radius: 10px;
}

/* -------------------------------------------------------------- 评论框 */

#play_page .mac_comment,
#play_page .comm_list_box {
    background: transparent !important;
}

#play_page .input_wrap .comment_content,
#play_page .input_wrap .verify {
    background: #f4f6f9 !important;
    border: 1px solid var(--tvp-line) !important;
    border-radius: 8px !important;
    color: var(--tvp-text) !important;
}

/* 友情链接区在模板里写死 width:30rem（窄屏会撑出横向滚动条） */
#play_page>div[style*="30rem"],
#play_page #link.block,
#play_page #title,
#play_page #js-home-link-list {
    box-sizing: border-box;
    max-width: 100% !important;
    width: auto !important;
}

/* ------------------------------------------------------------ 移动端收敛 */

/* 平板/小笔电：主题把播放页容器写死 1200px（左栏 840 + 右栏 360），
   在 1024 以下会横向溢出，这里收成整宽并隐藏右栏 */
@media (max-width: 1199px) {

    #play_page .container,
    #play_page .play_boxbg .container,
    #play_page .left_row,
    #play_page .play_boxbg,
    #play_page .pannel {
        box-sizing: border-box;
        max-width: 100% !important;
        width: 100% !important;
    }

    #play_page .right_row {
        display: none !important;
    }

    #play_page .left_row {
        float: none !important;
        width: 100% !important;
    }
}

@media (max-width: 820px) {

    #play_page .pannel,
    #play_page .vod-play-tagwall {
        border-radius: 0;
        box-shadow: none;
        margin-bottom: 8px;
        padding: 12px 14px;
    }

    #play_page .play_boxbg .container {
        padding-top: 10px;
    }

    #play_page .player_video {
        border-radius: 0;
        box-shadow: none;
    }

    #play_page .player_detail .video_title .title {
        font-size: 17px;
    }
}