/* BLACK 主题全局黑色覆盖
   作用：无论后台 color.ms 配置为何，black 主题强制使用纯黑配色。
   由 public/include.html 引入（位于主题自身目录）。
*/
:root,
:root body,
html body {
    --tpl-accent: #e50914;
    --tpl-accent-hover: #f6121d;
    --tpl-accent-muted: rgba(229, 9, 20, .22);
    --tpl-text: #e5e5e5;
    --tpl-text-strong: #ffffff;
    --tpl-text-muted: #a3a3a3;
    --tpl-text-subtle: #737373;
    --tpl-social-name: #8aa0d4;
    --tpl-text-on-inverse: #ffffff;
    --tpl-border: #2a2a2a;
    --tpl-border-soft: #222;
    --tpl-bg-base: #0a0a0a;
    --tpl-bg-muted: #141414;
    --tpl-bg-login: #0a0a0a;
    --tpl-bg-elevated: #181818;
}

body,
body.bstem {
    background-color: #0a0a0a;
    color: var(--tpl-text);
}

.bstem,
body.bstem {
    --tpl-accent: #e50914;
    --tpl-accent-hover: #f6121d;
    --tpl-accent-muted: rgba(229, 9, 20, .22);
    --tpl-text: #e5e5e5;
    --tpl-text-strong: #ffffff;
    --tpl-text-muted: #a3a3a3;
    --tpl-text-subtle: #737373;
    --tpl-social-name: #8aa0d4;
    --tpl-text-on-inverse: #ffffff;
    --tpl-border: #2a2a2a;
    --tpl-border-soft: #222;
    --tpl-bg-base: #0a0a0a;
    --tpl-bg-muted: #141414;
    --tpl-bg-login: #0a0a0a;
    --tpl-bg-elevated: #181818;
}

/* 统一卡片/面板底色 */
.pannel,
.hot_banner,
.vodlist_thumb,
.detail_list,
.content_box,
.member-wrap,
#member,
#right,
.mac_results,
.all_menu_box,
.dropdown,
.commlist_row .pannel,
.input_wrap .pannel,
.play_boxbg,
.content_playlist li a,
.downlist_box,
.screen_list,
.rank_hom .rank_info,
.foot {
    background-color: #0f0f0f !important;
}

/* 页脚去除浅色背景图 */
.foot {
    background-image: none !important;
}

.foot-list .fo_t .color,
.foot .fo_t p,
.foot .color {
    color: #9a9a9a !important;
}

/* 充值/升级页去除浅色背景图 */
body.body-recharge-buy,
body#upgrade.body-buy-upgrade-combo {
    background-color: #0a0a0a !important;
    background-image: none !important;
}

/* 会员权益页去除浅色背景 */
body.user-benefits-page {
    background-color: #0a0a0a !important;
    background-image: none !important;
}

/* 登录注册页黑化 */
body#login,
body#reg,
.mac_login {
    background-color: #0a0a0a !important;
}

/* 搜索高亮等输入类控件 */
input,
textarea,
select {
    background-color: #1c1c1c;
    color: #e5e5e5;
    border-color: #333;
}

/* 链接基础色 */
a,
a:link,
a:visited {
    color: #c9c9c9;
}

a:hover {
    color: var(--tpl-accent);
}

/* 让默认 white 模式的隐藏黑色 logo 恢复显示：BLACK 主题统一显示白/深色 Logo */
.head_logo .white_logo {
    display: inline-block !important;
}

.head_logo .black_logo {
    display: none !important;
}

/* 提示等小文字 */
.text_muted,
.tips-box,
.upgrade-hint-line {
    color: #9a9a9a;
}

/* ===== 顶部导航栏颜色与页面背景一致 ===== */
#topnav,
#topnav .head_box,
#topnav .site-head-wrap,
.head_box,
.head_box.nav_fixed,
.head_box.nav_top {
    background-color: var(--tpl-bg-base) !important;
    box-shadow: none !important;
}

@media (max-width: 820px) {
    #topnav .head_box.is-header-end,
    #topnav .head_box.nav_fixed {
        background-color: var(--tpl-bg-base) !important;
    }
}

/* ===== 播放页布局：播放器放大占满（猜你喜欢已移到下方） ===== */
#play_page .play_box .left_row,
#play_page .play_box.play_video .left_row {
    float: none;
    width: 100% !important;
    margin: 0 auto;
}

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

/* 播放器按 16:9 自适应高度（随宽度缩放），避免固定高度导致比例失调 */
#play_page .player_video.embed-responsive,
#play_page .MacPlayer.embed-responsive {
    box-sizing: border-box;
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    width: 100%;
}

#play_page .player_video.embed-responsive .embed-responsive-item,
#play_page .player_video.embed-responsive iframe,
#play_page .player_video.embed-responsive video,
#play_page .MacPlayer.embed-responsive iframe {
    bottom: 0;
    height: 100% !important;
    left: 0;
    position: absolute;
    top: 0;
    width: 100% !important;
}

/* 播放器工具条正常显示在播放器下方 */
#play_page .play_but {
    clear: both;
    display: block;
    position: relative;
    width: 100%;
}

/* ===== 播放页标题下方信息条（播放量/时长/日期/收藏/下载） ===== */
#play_page .player_detail .black-play-meta {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 10px;
}

#play_page .black-play-meta__item {
    align-items: center;
    color: var(--tpl-text-muted);
    display: inline-flex;
    font-size: 13px;
    gap: 4px;
    line-height: 1;
}

#play_page .black-play-meta__item .iconfont {
    font-size: 14px;
}

#play_page .black-play-meta__item a {
    color: var(--tpl-text-muted);
}

#play_page .black-play-meta__item a:hover {
    color: var(--tpl-accent);
}

#play_page .black-play-meta__fav a {
    align-items: center;
    background: rgba(229, 9, 20, .12);
    border: 1px solid rgba(229, 9, 20, .4);
    border-radius: 14px;
    color: #e50914;
    display: inline-flex;
    gap: 4px;
    padding: 5px 12px;
}

#play_page .black-play-meta__fav a.is_fav {
    background: rgba(229, 9, 20, .2);
}

/* ===== 播放页下方内容区：统一间距与背景 ===== */
#play_page > .container {
    padding-top: 20px;
}

#play_page .container-wrap .pannel {
    background: #141414;
    border: 1px solid #242424;
    border-radius: 8px;
    box-sizing: border-box;
    margin: 0 0 16px;
    padding: 14px 16px;
}

#play_page .container-wrap .pannel_head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin: 0 0 14px;
}

#play_page .container-wrap .pannel_head .title {
    color: var(--tpl-text-strong);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0;
}

/* 猜你喜欢 / 相关推荐 标题前的红色短条 */
#play_page .container-wrap .pannel--vod-guess .pannel_head .title::before,
#play_page .container-wrap .pannel--vod-related .pannel_head .title::before {
    background: #e50914;
    border-radius: 2px;
    content: '';
    display: inline-block;
    height: 14px;
    margin-right: 8px;
    vertical-align: -2px;
    width: 4px;
}

/* 播放器区域工具条与标题信息条背景统一 */
#play_page .play_boxbg {
    background: #0f0f0f;
}

#play_page .play_but {
    background: #161616;
    border-top: 1px solid #242424;
}

/* 评论区标题与区块 */
#play_page #pinglun .pannel_head .title {
    color: var(--tpl-text-strong);
    font-size: 17px;
    font-weight: 700;
}

/* ===== 播放页下方：猜你喜欢网格 ===== */
#play_page .black-play-guess-grid {
    box-sizing: border-box;
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    width: 100%;
}

#play_page .black-play-guess-grid .play_vlist--recommend {
    box-sizing: border-box;
    margin: 0;
    width: 100%;
}

#play_page .black-play-guess-grid .play_vlist {
    display: block;
    float: none;
    margin: 0;
    width: 100%;
}

#play_page .black-play-guess-grid .play_vlist_img {
    float: none;
    width: 100%;
}

#play_page .black-play-guess-grid .play_vlist_thumb {
    background-position: 50% 50%;
    background-size: cover;
    float: none;
    height: auto;
    padding-top: 140%;
    position: relative;
    width: 100%;
}

#play_page .black-play-guess-grid .play_vlist_text {
    float: none;
    padding: 6px 2px 0;
    text-align: center;
    width: 100%;
}

#play_page .black-play-guess-grid .play_vlist_title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 820px) {
    #play_page .black-play-guess-grid {
        grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
    }
}

/* ===== 导航栏「成为VIP」按钮 ===== */
.head_box .head_vip_btn {
    margin-left: 8px;
}

.head_box .head_vip_btn a {
    align-items: center;
    background: linear-gradient(135deg, #e50914, #ff5f1f);
    border: none;
    border-radius: 18px;
    color: #fff !important;
    display: inline-flex;
    font-size: 13px;
    font-weight: 700;
    height: 28px;
    justify-content: center;
    line-height: 1;
    min-width: 76px;
    padding: 0 14px;
    position: relative;
    top: 6px;
    transition: box-shadow .2s ease, transform .2s ease;
}

.head_box .head_vip_btn a:hover {
    box-shadow: 0 0 14px rgba(229, 9, 20, .55);
    transform: translateY(-1px);
}

/* 移动端 VIP 按钮 */
.mobile-head .head_vip_btn a {
    background: linear-gradient(135deg, #e50914, #ff5f1f);
    border-radius: 18px;
    color: #fff !important;
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    line-height: 26px;
    padding: 0 12px;
}

/* 收藏图标 */
.head-nav-icon-svg {
    align-items: center;
    display: inline-flex;
    height: 22px;
    justify-content: center;
    width: 22px;
}

.head-nav-icon-theme--lightbg .head-nav-icon-svg {
    color: #333;
}

.head-nav-icon-theme--darkbg .head-nav-icon-svg {
    color: #e5e5e5;
}

/* ===== 悬停封面视频预览 ===== */
.vodlist_thumb {
    overflow: hidden;
    position: relative;
}

.vod_preview {
    background: rgba(0, 0, 0, .82);
    inset: 0;
    position: absolute;
    z-index: 5;
}

.vod_preview video {
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.vod_preview .vod_preview_spinner {
    animation: vodPreviewSpin .8s linear infinite;
    border: 2px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    border-top-color: #fff;
    height: 28px;
    left: 50%;
    margin: -14px 0 0 -14px;
    position: absolute;
    top: 50%;
    width: 28px;
}

@keyframes vodPreviewSpin {
    to {
        transform: rotate(360deg);
    }
}

/* ===== 封面人气角标 ===== */
.vodlist_thumb .mac_cover_hits {
    align-items: center;
    background: rgba(0, 0, 0, .55);
    border-radius: 3px;
    bottom: 4px;
    color: #fff;
    display: inline-flex;
    font-size: 11px;
    gap: 3px;
    left: 4px;
    line-height: 1;
    padding: 3px 6px;
    pointer-events: none;
    position: absolute;
    z-index: 3;
}

.vodlist_thumb .mac_cover_hits .iconfont {
    font-size: 12px;
}

/* ===== 封面时长角标 ===== */
.vodlist_thumb .mac_cover_duration {
    background: rgba(0, 0, 0, .55);
    border-radius: 3px;
    bottom: 4px;
    color: #fff;
    font-size: 11px;
    line-height: 1;
    padding: 3px 6px;
    pointer-events: none;
    position: absolute;
    right: 4px;
    z-index: 3;
}

/* ===== 视频标题：字号可调 + 两行显示 ===== */
.vodlist_item .vodlist_title,
.home-unified .vodlist_title,
.home-unified #js-home-type-sections .vodlist_title,
.mac-catalog-show .vodlist_title {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--black-title-lines, 2) !important;
    font-size: var(--black-title-font-size, 16px) !important;
    line-height: 1.35 !important;
    max-height: calc(var(--black-title-font-size, 16px) * 1.35 * var(--black-title-lines, 2)) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
    word-break: break-word;
}

.vodlist_item .vodlist_title a,
.home-unified .vodlist_title a,
.home-unified #js-home-type-sections .vodlist_title a,
.mac-catalog-show .vodlist_title a {
    display: block !important;
    font-size: inherit !important;
    line-height: inherit !important;
    white-space: normal !important;
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
}