/*!
 */
@charset "utf-8";

/* header */
.stui-header__top{position: relative; margin-bottom: 20px; background-color: #fff;}
.stui-header__logo{float:left;}
.stui-header__logo{ width: 282px; margin: 15px 0;}
.stui-header__logo .logo{display:block; width:282px; height:60px; background:url(../images/logo_max.png) no-repeat; background-position:50% 50%; background-size:cover;}
.stui-header__menu{position:relative; background-color: #333; color: #fff;}
.stui-header__menu li{float:left;}
.stui-header__menu li a{display:inline-block; padding: 15px 25px; font-size:19px; color: #fff;}
.stui-header__menu li.active a,.stui-header__menu li a:hover{ background-color: #222;}
.stui-header__menu .more{ position: absolute; top: 0; right: 0; padding: 15px 0; color: #999;}
.stui-header__search{ float:left; position:relative; width: 380px; margin: 25px 30px 25px 50px; }
.stui-header__search .form-control{display:block; width:100%; height: 38px; padding: 0 45px 0 10px; font-size:16px; line-height: 25px; border-radius: 5px; transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s; background-color:#f5f5f5; color: #999; border: 0;}
.stui-header__search .submit{display:block; position:absolute; top: 0; right: 0; width:35px; height: 38px; border: 0; cursor: pointer; border: 0; background: none; color: #999;}
.stui-header__user{float:right}
.stui-header__user > li{ float:left; position: relative; padding: 35px 0 10px; margin-left: 30px}
.stui-header__user > li .icon{ font-size: 24px; line-height: 24px; vertical-align: -2px; color: #999;}
.stui-header__user > li .dropdown{ display: none; position: absolute; z-index: 999; width: 240px; top: 100%; right: -15px; padding: 15px; font-size: 12px; color: #999; background-color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.2); border-radius: 4px; background-color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.2);}
.stui-header__user > li .dropdown:before{ content:" "; width:10px; height:10px; -webkit-transform:rotate(-45deg); -ms-transform:rotate(-45deg); transform:rotate(-45deg); position: absolute; top:-5px; right: 30px; background-color: #fff; border-top: 1px solid #eee; border-right: 1px solid #eee;}

/* 电脑端兼容：支持 hover 或 active 时展开下拉 */
.stui-header__user > li:hover .dropdown, 
.stui-header__user > li.active .dropdown { display: block;} 

.stui-header__user .dropdown li{ position: relative; padding: 10px 0;}
.stui-header__user .dropdown li:first-child{ margin-top: 10px;}
.stui-header__user .dropdown li:last-child{ padding-bottom: 0;}

/* media */
.stui-vodlist__media li .score{ position: relative;}
.stui-vodlist__media li .score .star{ display: inline-block; position: relative; top: 5px; width: 80px; height: 13px; background: url(../images/star_min1.png) 0 0 no-repeat;}
.stui-vodlist__media li .score .branch{ display: inline-block; font-size: 12px; color: red; vertical-align: -4px;}
.stui-vodlist__media li .score .star .star-cur{display: inline-block; background: url(../images/star_min.png) 0 0 no-repeat; height: 25px; position: absolute; top: 0;  z-index: 1;}

/* content */
.stui-content__detail,.stui-content__thumb{display:table-cell;vertical-align:top}
.stui-content__thumb .v-thumb{width:190px}
.stui-content__thumb .w-thumb{width:300px}
.stui-content__detail{width:100%;padding:10px 20px;}
.stui-content__detail .title{margin: 0 0 10px; font-size: 24px; line-height:30px; font-weight: 700;}
.stui-content__detail .data{margin-bottom:10px}
.stui-content__detail .data li{float:left;margin-right:20px}
.stui-content__detail .desc{padding-left:42px}
.stui-content__detail .desc .left{margin-left:-42px}
.stui-content__detail .play-btn{padding-left:42px;margin-top:20px}
.stui-content__detail .play-btn .share{margin-top:5px}
.stui-content__detail .play-btn .btn{ margin-right: 10px;}

/* player */
.stui-player__video{ background-color: #000}
.stui-player__detail{ margin-top: 20px;}
.stui-player__detail .more-btn{ float: right; padding-top: 10px;}
.stui-player__detail .more-btn li{ display: inline-block; margin-left: 10px;}
.stui-player__detail .more-btn .btn{ padding: 6px 15px;}
.stui-player__detail .title{margin:0 0 10px}
.stui-player__detail .detail-content{padding-top:10px}
.stui-player__detail .desc{padding-left:42px}
.stui-player__detail .desc .left{margin-left:-42px}

/* autocomplete */
.autocomplete-suggestions{ padding: 0 10px; margin-top: 5px; border-radius:4px; background-color: #FFFFFF; box-shadow: 0 2px 10px rgba(0,0,0,.05);}
.autocomplete-suggestions.active{position: absolute; z-index: 9999; top: 100%; width: 100%;}
.autocomplete-suggestion{padding:10px 0; cursor:pointer; border-top: 1px solid #EEEEEE;}
.autocomplete-suggestion:first-child{border-top:0}
.mac_results{ z-index: 9999; padding: 0 10px; margin-top: 5px; border-radius:4px; background-color: #FFFFFF; border:1px solid #EEEEEE; box-shadow: 0 2px 10px rgba(0,0,0,.05);}
.mac_results li{padding:10px 0; cursor:pointer; border-top: 1px solid #EEEEEE;}
.mac_results li:first-child{ border: 0;}

@media (min-width:768px){ .container{width:750px} }
@media (min-width:992px){ .container{width:920px} }
@media (min-width:1200px){ .container{width:1170px} }
@media (max-width:1024px){
    .stui-header__top{ margin-bottom: 10px;}
	.stui-header__logo{margin:10px 0 10px}
	.stui-header__logo,.stui-header__logo .logo{ width:127px; height:30px;}
	.stui-header__logo .logo{width:127px;height:30px; background:url(../images/logo.png) no-repeat; background-position:50% 50%; background-size:cover;}
	.stui-header__search{ margin: 10px 0 10px 30px; width: 200px;}
	.stui-header__search .form-control{ height: 30px;}
	.stui-header__search .submit{ width: 30px; height: 30px;}
	.stui-header__menu ul{ overflow:hidden; white-space: nowrap;}
	.stui-header__menu li{ float: none; display: inline-block;}
	.stui-header__menu li a{ padding: 12px 15px; font-size: 18px; white-space:nowrap;}	
	.stui-header__user > li{ padding: 15px 0 10px; margin-right: 10px;}
	.stui-header__user > li .dropdown{ right: 0;}
	.stui-header__user > li .icon{ font-size: 18px; line-height: 18px;}
	.stui-header__menu li:hover .dropdown,.stui-header__user > li:hover .dropdown{ display: none;} 
}
@media (max-width:767px){
	.stui-header__logo{ margin-left:10px}
	.stui-header__search{ margin: 0; position:absolute; top: 10px; left: 150px; right:50px; width:auto;}	
	.stui-header__user{padding-right:10px}
	.stui-header__user > li{ padding: 14px 0; margin: 0;}
	.stui-header__user > li .dropdown:before{ right: 8px;}
	.stui-header__user > li .icon{ font-size: 24px; line-height: 24px;}
	.stui-content__thumb .v-thumb{width:115px}
	.stui-content__thumb .w-thumb{width:160px}
	.stui-content__detail{padding:0 10px}
	.stui-content__detail .title{ margin:0 0 8px; font-size:18px; line-height:18px; font-weight: 700;}
	.stui-content__detail .data{margin:0 0 8px;font-size:14px}
	.stui-content__detail .play-btn{margin:0;padding:0}	
	.stui-player__detail.detail .title{ margin-top: 10px; font-size: 16px;}
	.stui-player__detail{ margin-top: 0;}
	.stui-player__detail .title{ font-size:18px; font-weight: 700;}
	.stui-player__detail .more-btn{ margin-bottom: 10px;}
	.stui-player__detail .more-btn{ float: none; padding: 10px; background-color: #222; display: -webkit-box; display: -webkit-flex; display: flex;}
	.stui-player__detail .more-btn li{ margin: 0; padding: 0 5px; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; text-align: center;}
	.stui-player__detail .more-btn .btn{ display: block; padding: 6px;}
	.stui-mobile__type li{padding:0 20px}
	.stui-mobile__type li a{display:block;padding:10px 0;text-align:center}		
	.stui-foot{padding:20px 0}
}


/* ========================================================
   追加补丁 1：全站深浅换肤引擎 (动态 CSS Variables)
   ======================================================== */
:root {
    --body-bg: #121212;
    --panel-bg: #1c1c1e;
    --text-main: #eeeeee;
    --text-muted: #999999;
    --header-bg: #1c1c1e;
    --header-input-bg: #2b2b36;
    --header-border: #333338;
    --theme-color: #ff4a8b;
}
html[data-theme="light"] {
    --body-bg: #f5f5f5;
    --panel-bg: #ffffff;
    --text-main: #333333;
    --text-muted: #666666;
    --header-bg: #ffffff;
    --header-input-bg: #f5f5f5;
    --header-border: #eeeeee;
}

body { background-color: var(--body-bg) !important; background-image: none !important; color: var(--text-muted) !important; transition: background 0.3s, color 0.3s; }
a, h1, h2, h3, h4, h5, h6, .stui-vodlist__detail .title { color: var(--text-main) !important; transition: color 0.3s; }
a:hover { color: var(--theme-color) !important; }
.text-muted, .stui-vodlist__detail .text { color: var(--text-muted) !important; }
.stui-pannel-bg, .stui-vodlist__bg, .dropdown-menu { background-color: var(--panel-bg) !important; border: 1px solid var(--header-border) !important; box-shadow: none !important; transition: background 0.3s; }
.dropdown-menu:before { background-color: var(--panel-bg) !important; border-color: var(--header-border) !important; }
.form-control, .btn-default, .stui-page li a, .stui-page li .num, .nav-tag > li > a, .stui-screen__list li a { background-color: var(--header-input-bg) !important; color: var(--text-muted) !important; border: 1px solid var(--header-border) !important; transition: 0.3s; }
.stui-page li.active a, .stui-page li.active .num, .stui-screen__list li.active a { background-color: var(--theme-color) !important; color: #fff !important; border-color: var(--theme-color) !important; }

/* ========================================================
   追加补丁 2：骨架屏加载动画 (终极修复版，允许真实图片覆盖)
   ======================================================== */
.stui-vodlist__thumb,
.stui-vodlist__thumb.square,
.stui-vodlist__thumb.active {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400'%3E%3Ccircle cx='110' cy='200' r='12' fill='%23888'%3E%3Canimate attributeName='opacity' values='0.2;1;0.2' dur='1.5s' begin='0s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='150' cy='200' r='12' fill='%23888'%3E%3Canimate attributeName='opacity' values='0.2;1;0.2' dur='1.5s' begin='0.3s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='190' cy='200' r='12' fill='%23888'%3E%3Canimate attributeName='opacity' values='0.2;1;0.2' dur='1.5s' begin='0.6s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E");
    background-color: var(--header-input-bg) !important;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    display: block; 
    position: relative; 
    padding-top: 150%;
    overflow: hidden;
}

/* ========================================================
   追加补丁 3 & 4：导航栏颜色应用与手机端适配
   ======================================================== */
.custom-dark-header { background-color: var(--header-bg); color: var(--text-main); transition: background 0.3s; padding: 0; margin-bottom: 20px; border-bottom: none; }
.custom-dark-header a { color: var(--text-muted); }
.custom-dark-header a:hover { color: var(--theme-color) !important; }
.header-flex-box { display: flex; align-items: center; justify-content: space-between; height: 70px; width: 100%; }
.header-left { display: flex; align-items: center; }
.header-logo { font-size: 22px !important; font-weight: bold; color: var(--theme-color) !important; display: block; margin-left: 10px !important; margin-right: 20px !important;}
.header-nav { display: flex; margin: 0; padding: 0; list-style: none; white-space: nowrap; }
.header-nav li { margin-right: 15px; }
.header-nav li a { font-size: 16px; padding: 10px 5px; transition: color 0.3s; }
.header-nav li.active a, .header-nav li a:hover { color: var(--theme-color); }
.custom-dark-header .stui-header__search { background-color: transparent; border-radius: 30px; padding: 0; height: 42px; display: flex; align-items: center; flex: 1; max-width: 580px; margin: 0 20px; justify-content: flex-end;}
.custom-dark-header .search-form { display: flex; width: 100%; max-width: 420px; align-items: center; height: 100%; background-color: var(--header-input-bg); border-radius: 30px; padding: 2px; box-sizing: border-box; border: 1px solid var(--header-border);}
.custom-dark-header .search-select { padding: 0 15px; font-size: 14px; color: var(--text-muted); border-right: 1px solid var(--header-border); cursor: pointer; white-space: nowrap;}
.custom-dark-header .search-input { flex: 1; background: transparent; border: none; color: var(--text-main); padding: 0 15px; outline: none; height: 100%; box-shadow: none; font-size: 14px; margin:0;}
.custom-dark-header .search-submit { position: relative; background-color: var(--theme-color); color: #fff; border: none; border-radius: 50%; width: 38px; height: 38px; cursor: pointer; display: flex; align-items: center; justify-content: center; margin-right: 2px; transition: 0.3s; top:0; right:0;}
.custom-dark-header .search-submit .icon { color: #fff; font-size: 18px; }
.update-text { font-size: 13px; color: var(--text-muted); margin-left: 15px; white-space: nowrap; }
.update-text .text-color { color: var(--theme-color); margin: 0 3px; font-weight: bold; }
.custom-dark-header .header-user { display: flex; align-items: center; justify-content: flex-end; height: 100%; margin: 0; padding: 0;}
.custom-dark-header .header-user > li { padding: 0 !important; margin-left: 20px !important; text-align: center; display: flex; align-items: center; height: 100%;}
.custom-dark-header .header-user > li > a { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; }
.custom-dark-header .header-user > li .icon { font-size: 20px; line-height: 20px; margin-bottom: 2px; color: var(--text-main); }
.custom-dark-header .header-user > li p { font-size: 12px; margin: 0; color: var(--text-main); line-height: 14px; }
.custom-dark-header .header-user > li:hover a, .custom-dark-header .header-user > li:hover .icon, .custom-dark-header .header-user > li:hover p { color: var(--theme-color); }
.custom-dark-header .dropdown { background: var(--panel-bg); box-shadow: 0 5px 15px rgba(0,0,0,0.5); border: 1px solid var(--header-border); text-align:left;}
.custom-dark-header .dropdown:before { background: var(--panel-bg); border-top: 1px solid var(--header-border); border-right: 1px solid var(--header-border);}
.historyclean { color: var(--text-muted); }
.historyclean:hover { color: var(--theme-color); }
.mobile-show, .mobile-show-inline, .mobile-offcanvas, .mobile-offcanvas-mask { display: none !important; }

/* ========================================================
   手机端头部导航控制：左右分离布局调整
   ======================================================== */
@media (max-width: 991px) {
    /* 顶部整体外框控制 */
    .custom-dark-header .header-flex-box { 
        height: 60px; 
        padding: 0 5px !important; /* 控制屏幕左右两边的最外侧间距 */
    }

    /* ================= 控制左侧：私密影院哈哈 (Logo区域) ================= */
    .custom-dark-header .header-left { 
        display: flex; 
        align-items: center; 
        flex: 1; /* 关键：强制让左边占满剩余空间，把右边菜单挤过去 */
    }
    
    .custom-dark-header .stui-header__logo,
    .custom-dark-header .header-logo { 
        font-size: 28px !important; /* Logo文字大小 */
        margin-left: 5px !important; /* Logo距离屏幕最左边的缝隙 */
        margin-right: auto !important; 
        padding-left: 0 !important; 
        white-space: nowrap; /* 防止文字折行 */
    }

    /* ================= 控制右侧：导航 搜索 历史 登录 换肤 ================= */
    .custom-dark-header .header-user { 
        padding-right: 0 !important; 
        margin-left: auto !important; /* 强制贴紧右边缘 */
        position: relative; 
        z-index: 100001;
    }

    .custom-dark-header .header-user > li { 
        margin-left: 6px !important; /* ★ 控制右侧每一个菜单图标之间的距离，改小就更紧凑 */
    }

    .custom-dark-header .header-user > li:last-child { 
        margin-right: 5px !important; /* 最后一个图标(换肤)距离屏幕最右侧的缝隙 */
        padding-right: 0 !important; 
    }

    .custom-dark-header .header-user > li .icon { 
        font-size: 24px !important; /* 图标的大小 */
    } 

    .custom-dark-header .header-user > li p {
        font-size: 14px !important; /* 图标下方文字的大小 */
    }

    /* ================= 原有手机端其他功能控制 (搜索、历史、侧边栏) ================= */
    .mobile-show { display: block !important; }
    .mobile-show-inline { display: inline-block !important; }
    .hidden-xs { display: none !important; }
    .stui-header__user > li:hover .dropdown { display: none; }
    
    .custom-dark-header .stui-header__search { position: absolute !important; top: 60px !important; left: 0 !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; border-radius: 0 !important; padding: 10px 15px !important; background-color: var(--header-bg) !important; z-index: 100000 !important; transform-origin: top center; transform: scaleY(0); opacity: 0; pointer-events: none; transition: transform 0.2s ease, opacity 0.2s ease; justify-content: center; height: auto !important; }
    .custom-dark-header .stui-header__search .search-form { max-width: 100%; height: 42px !important; }
    .custom-dark-header .stui-header__search .search-input { height: 38px !important; line-height: 38px !important;}
    .custom-dark-header .stui-header__search.active { transform: scaleY(1); opacity: 1; pointer-events: auto;}
    
    .custom-dark-header .stui-header__user > li.history-wrap { position: static !important; }
    .custom-dark-header .stui-header__user .dropdown.history { position: fixed !important; top: 60px !important; left: 0 !important; right: 0 !important; width: 100vw !important; max-width: 100% !important; margin: 0 !important; padding: 15px !important; border-radius: 0 !important; background-color: var(--panel-bg) !important; z-index: 100000 !important; transform-origin: top center; transform: scaleY(0); opacity: 0; pointer-events: none; transition: transform 0.2s ease, opacity 0.2s ease; display: block !important; box-sizing: border-box !important; text-align: left !important; }
    .custom-dark-header .dropdown.history h5 { text-align: left !important; margin-bottom: 10px; }
    .custom-dark-header .dropdown.history ul { text-align: left !important; }
    .custom-dark-header .dropdown.history.active { transform: scaleY(1); opacity: 1; pointer-events: auto;}
    .custom-dark-header .stui-header__user .dropdown:before { display: none !important; }
    
    .mobile-offcanvas { position: fixed !important; top: 0; left: -260px; width: 200px; height: 100vh; background-color: var(--panel-bg); z-index: 100000 !important; overflow-y: auto; transition: left 0.3s ease; box-shadow: 5px 0 15px rgba(0,0,0,0.5); display: block !important; }
    .mobile-offcanvas.active { left: 0 !important; pointer-events: auto; }
    .mobile-offcanvas ul.mobile-nav-list { padding: 10px 0 !important; display: block !important; white-space: normal !important; list-style: none !important; margin: 0 !important;}
    .mobile-offcanvas ul.mobile-nav-list li { float: none !important; display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; text-align: left !important;}
    .mobile-offcanvas ul.mobile-nav-list li a { display: block !important; padding: 15px 20px !important; color: var(--text-main) !important; font-size: 16px !important; border-bottom: 1px solid var(--header-border) !important; }
    .mobile-offcanvas ul.mobile-nav-list li.active a, .mobile-offcanvas ul.mobile-nav-list li a:hover { color: var(--theme-color) !important; }
    .mobile-offcanvas-mask { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.6); z-index: 99999 !important; }
    .mobile-offcanvas-mask.active { display: block !important; pointer-events: auto; }
}

/* ========================================================
   追加补丁 5：右侧排行榜布局重构 (绝对定位脱离流，无视类名强制切断)
   ======================================================== */
/* 1. 将原本的 table-cell 改为区块，并使用相对定位 */
.stui-pannel-side .stui-vodlist__media li {
    display: block !important;
    position: relative !important;
    padding: 0 0 0 45px !important; 
    min-height: 55px !important;
    margin-bottom: 15px !important;
}

/* 2. 左侧图片使用绝对定位，彻底脱离文档流 */
.stui-pannel-side .stui-vodlist__media li .thumb {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 5px !important;
    width: 35px !important; 
    margin: 0 !important;
}

/* 3. 右侧文字区域 100% 占满剩余宽度 */
.stui-pannel-side .stui-vodlist__media li .detail.detail-side {
    display: block !important;
    width: 100% !important;
    padding: 5px 0 0 0 !important; 
}

/* 4. 强制截断长文字变省略号 */
.stui-pannel-side .stui-vodlist__media li .detail.detail-side p.margin-0,
.stui-pannel-side .stui-vodlist__media li .detail.detail-side p.margin-0 a {
    display: block !important;
    width: 100% !important;
    white-space: nowrap !important; 
    overflow: hidden !important;    
    text-overflow: ellipsis !important; 
    word-break: keep-all !important;
}

/* ========================================================
   追加补丁 6：纯 CSS 魔法生成“热门推荐”标题 (完全不动 HTML)
   ======================================================== */
/* 隐藏掉首页第一个面板里没用的空轮播图结构 */
.container > .row > .stui-pannel:first-of-type .stui-pannel-bd .carousel {
    display: none !important;
}

/* 将空壳容器改造成标题栏的尺寸和排版 */
.container > .row > .stui-pannel:first-of-type .stui-pannel-bd {
    display: block !important;
    position: relative !important;
    margin: 10px 10px 10px 10px !important;
    padding: 0 0 10px 35px !important;
    border-bottom: 1px solid var(--header-border) !important;
    height: 35px !important;
}

/* 使用伪元素注入粉色火焰图标 (调用模板自带的 icon-hot) */
.container > .row > .stui-pannel:first-of-type .stui-pannel-bd::before {
    content: "\e756" !important; 
    font-family: "iconfont" !important;
    font-size: 24px !important;
    color: var(--theme-color) !important;
    position: absolute !important;
    left: 5px !important;
    top: -4px !important;
}

/* 使用伪元素注入“热门推荐”文字 */
.container > .row > .stui-pannel:first-of-type .stui-pannel-bd::after {
    content: "热门推荐" !important;
    display: block !important;
    font-size: 18px !important;
    color: var(--text-main) !important;
    line-height: 24px !important;
    font-weight: normal !important;
}