@charset "utf-8";

/* 演员标签样式 */
.actors-tags {
    margin-bottom: 15px;
}

.actors-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 5px;
}


/* 文章标签样式 */
.post-tags {
    margin-bottom: 15px;
}

.tags-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 5px;
}

.post-tag {
    margin: 0 8px 8px 0;
    display: inline-block;
}

.post-tag a {
    display: inline-block;
    padding: 2px 12px;
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: #fff;
    text-decoration: none;
    border-radius: 15px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(245, 87, 108, 0.3);
}

.post-tag a:hover {
    background: linear-gradient(135deg, #f5576c 0%, #f093fb 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(245, 87, 108, 0.4);
    color: #fff;
    text-decoration: none;
}

/* 文章类型样式 */
.post-type {
    margin-bottom: 15px;
}

.type-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 5px;
}

.type-tag {
    margin: 0 8px 8px 0;
    display: inline-block;
}

.type-tag a {
    display: inline-block;
    padding: 2px 12px;
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: #fff;
    text-decoration: none;
    border-radius: 15px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(56, 239, 125, 0.3);
}

.type-tag a:hover {
    background: linear-gradient(135deg, #38ef7d 0%, #11998e 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(56, 239, 125, 0.4);
    color: #fff;
    text-decoration: none;
}

/* 页面标题样式 */
.page-title {
    display: flex;              /* 一行排列 */
    align-items: center;        /* 垂直居中 */
    justify-content: center;    /* 整体水平居中 */

    padding: 5px 5px;
    margin-bottom: 5px;
}

.page-title-heading {
    font-size: 20px;
    margin: 0;                  /* 去掉 h1 默认 margin */
}

.page-title-page {
    font-size: 20px;
    padding: 3px 10px;
    display: inline-block;       /* 和标题在同一行 */
    margin: 0;                   /* 去掉多余 margin */
    width: fit-content;          /* 自适应内容 */
}


/* 面包屑导航样式 */
.breadcrumb {
    background: #101828;
    padding: 5px 5px;
    margin-bottom: 1px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.5;
}

.breadcrumb a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumb a:hover {
    color: #FF9900;
}

.breadcrumb-home {
    font-weight: 500;
}

.breadcrumb-category {
    color: #666;
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumb-category:hover {
    color: #FF9900;
}

.breadcrumb-separator {
    margin: 0 8px;
    color: #999;
    font-size: 12px;
}

.breadcrumb-current {
    color: #ffffff;
    font-weight: 500;
}

.breadcrumb-page {
    color: #666;
    font-size: 13px;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .page-title {
        display: flex;              /* 一行排列 */
        align-items: center;        /* 垂直居中 */
        justify-content: center;    /* 整体水平居中 */
        gap: 8px;                   /* 元素之间的间距，可调整 */
        padding: 5px 5px;
        margin-bottom: 5px;
    }
    
    .page-title-heading {
        font-size: 20px;
        margin: 0;                  /* 去掉 h1 默认 margin */
    }
    
    .page-title-page {
        font-size: 12px;
        padding: 3px 10px;
        display: inline-block;       /* 和标题在同一行 */
        margin: 0;                   /* 去掉多余 margin */
        width: fit-content;          /* 自适应内容 */
    }
    
    

    .breadcrumb {
        padding: 5px 5px;
        font-size: 13px;
        margin-bottom: 1px;
    }

    .breadcrumb-separator {
        margin: 0 5px;
    }
}

/* all  */
body{ background: #101828; color: #ffffff;}

/* text */
a,h1, h2, h3, h4, h5, h6{ color: #ffffff;}
a:hover{ color: #FF9900;}
.text-red{ color: red;}
.text-muted{ color: #ffffff;}

/* 应用 actor-tag 样式到 text-overflow 和 text-muted 中的链接 */
.text-overflow.text-muted a {
    display: inline-block;
    padding: 0px 5px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(102, 126, 234, 0.3);
    margin: 0 8px 4px 0;
}

.text-overflow.text-muted a:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(102, 126, 234, 0.4);
    color: #fff;
    text-decoration: none;
}


/* form */
.form-control{ background-color:#F5F5F5; color: #999999; border: 1px solid #EEEEEE;}
.form-control.colorfff{ background-color: #FFFFFF;}
.form-control:focus{border-color:#FF9900; -webkit-box-shadow:inset 0 1px 1px rgba(255,136,0,.075),0 0 8px rgba(255,136,0,.6);}

/* btn */
.btn,.btn:hover,.btn .icon{ color: #333333;}
.btn{ border: 1px solid #EEEEEE;}
.btn-default{ background-color: #f5f5f5; color: #333333;}
.btn-default:hover{ background-color: #f0eeee;}
.btn-primary{ background-color: #FF9900; border: 1px solid #FF9900; color: #FFFFFF;}
.btn-primary .icon{ color: #FFFFFF;}
.btn-primary:hover{ background-color: #FF6600; border: 1px solid #FF6600; color: #FFFFFF;}
.btn-primary:hover .icon{ color: #FFFFFF;}

/* dropdown */
.dropdown-menu{ background-color: #FFFFFF; border: 1px solid #EEEEEE;}
.dropdown-menu:before{background-color: #FFFFFF; border-color: #EEEEEE;}
.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover{ background-color: #FF9900; color: #FFFFFF;}

/* line */
.split-line{ background-color: #EEEEEE;}
.top-line:before{ border-top: 1px solid #EEEEEE;}
.bottom-line:after{ border-bottom: 1px solid #EEEEEE;}
.top-line-dot:before{ border-top: 1px dotted #EEEEEE;}
.bottom-line-dot:before{ border-bottom: 1px dotted #EEEEEE;}

/* badge */
.badge{ background-color: #EEEEEE;}
.badge-first{ background-color: #FF4A4A; color: #FFFFFF;}
.badge-second{ background-color: #FF7701; color: #FFFFFF;}
.badge-third{ background-color: #FFB400; color: #FFFFFF;}

/* nav */
.nav-head > li.active > a,.nav-tabs > li.active > a{ border-bottom: 2px solid #FF9900; color: #FF9900;}
.nav-tag > li > a,.nav-page > li > a{ background-color: #FFFFFF; border: 1px solid #EEEEEE; color: #333333;}
.nav-tag > li > a:hover,.nav-tag > li.active a,.nav-page > li > a:hover,.nav-page > li.active > a{ background-color: #FF9900; border: 1px solid #FF9900; color: #FFFFFF;}
.nav-page > li > a:hover > .icon{ color: #fff;}

/* tag */
.tag-btn li a{ background-color: #F8F8F8; color: #999999;}
.tag-btn li a:hover,.tag li.active a{ background-color: #FF9900; color: #FFFFFF;}
.tag-type li a{ background-color: #FFFFFF; border: 1px solid  #EEEEEE; color: #999999;}
.tag-type li a:hover,.tag-type li.active a{ background-color: #FF9900; border: 1px solid #FF9900; color: #FFFFFF;}
.tag-btn li a.active,.tag-text li a.active,.tag-type li a.active{ color: #FF9900;}

/* pic-tag */
.pic-tag{ background-color: rgba(0,0,0,0.6); color: #FFFFFF;}
.pic-tag.active,.pic-tag-h{ background-color: #FF9900; color: #FFFFFF;}
.pic-text{ background-repeat: no-repeat; background-image: linear-gradient(transparent,rgba(0,0,0,.5)); color: #FFFFFF;}
.pic-text.active{ background: rgba(0,0,0,0.6); color: #FFFFFF;}

/* pannel */
.stui-pannel-bg{background-color: #101828; box-shadow: 0 1px 2px rgba(0,0,0,.05);}

/* tabbar */
.stui_nav__taddar .item .icon,.stui_nav__taddar .item .title{ color: #999;}
.stui_nav__taddar .item.active .title,.stui_nav__taddar .item.active .icon{color: #FF9900;}
.stui_nav__taddar.fixed{ background-color: #FFFFFF;}

/* vodlist */
.stui-vodlist__bg{background-color: #FFFFFF; box-shadow: 0 1px 2px rgba(0,0,0,.05);}
.stui-vodlist__bg:hover{ box-shadow: 0 3px 5px rgba(0,0,0,.08);}

/* link */
.stui-link__pic li a{ background-color: #FFFFFF; border: 1px solid #F5F5F5;}
.stui-link__pic li a:hover{ border: 1px solid #FF9900;}

/* popup */
.popup{ background-color: #F8F8F8;}
.popup-head{ background-color: #FFFFFF;}

/* autocomplete */
.autocomplete-suggestions{ background-color: #FFFFFF; border:1px solid #EEEEEE; box-shadow: 0 2px 10px rgba(0,0,0,.05);}
.autocomplete-suggestion{ border-top: 1px solid #EEEEEE;}
@media (min-width: 767px){
	.toggle{display: none;}
}
@media (max-width: 767px){
	.toggle{display: block;}
	/* form */
	.form-control{ background-color:#F8F8F8; color: #999999; border: 0;}
	
	/*pannel*/
	.stui-pannel-bg,.stui-vodlist__bg,.stui-vodlist__bg:hover{box-shadow: none;}
	
	/* line */		
	.m-top-line:before{ border-top: 1px solid #EEEEEE;}
	.m-bottom-line:after{ border-bottom: 1px solid #EEEEEE;}
	.m-top-line-dot:before{ border-top: 1px dotted #EEEEEE;}
	.m-bottom-line-dot:before{ border-bottom: 1px dotted #EEEEEE;}
}

/* ----------------------------↑  stui http://v.shoutu.cn ↑----------------------------- */

/* header */
.stui-header__top{ background-color: #000000; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);}

/* header-menu */
.stui-header__menu li a{ color: #ffffff;}
.stui-header__menu li.current-menu-item a{ background-color: #6ad7f2; color: #FFFFFF;}

/* header-search */
.stui-header__search .submit .icon{ color: #999999;}

/* header-user */
.stui-header__user li a,.stui-header__user li a .icon{ color: #333333;}

/* screen */
.stui-screen__list li a{ color: #333333;}
.stui-screen__list li.active a{ background-color: #FF9900; color: #FFFFFF;}

/* playlist */
.stui-content__playlist li a{ border: 1px solid #EEEEEE;}
.stui-content__playlist li a:hover,.stui-content__playlist li.active a{ border: 1px solid #FF9900; background-color: #FF9900; color: #FFFFFF;}

/* player */
.stui-player__video{ background-color: #000000;}


/* page */
.stui-page li a,.stui-page li .num{background-color: #FFFFFF; border: 1px solid #000000; color: #000000;}
.stui-page li a:hover,.stui-page li.active a,.stui-page li.active .num{ background-color: #FF9900; color: #FFFFFF; border: 1px solid #FF9900;}

/* extra */
.stui-extra li a,.stui-extra li span{ background-color: #FFFFFF; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);}
.stui-extra li a.backtop{ background-color: rgba(0,0,0,0.6); color: #FFFFFF; }
.stui-extra li .sideslip{ background-color: #FFFFFF; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);}
.stui-extra li .sideslip:before{ background-color: #FFFFFF; border-color: rgba(0, 0, 0, 0.1);}

@media (max-width: 1024px){
	
	/* header-menu */
	.stui-header__menu:before{ border-top: 1px solid #EEEEEE;}
	.stui-header__menu li.active a{ background: none; color: #333333;}
	.stui-header__menu li.active a:before{ background-color: #FF9900;}
}

@media (max-width: 767px){

	/* screen */
	.stui-screen__list li.active a{ background: none; color: #FF9900;}
}

/* 无障碍性改进样式 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 键盘导航焦点样式 */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid #FF9900 !important;
    outline-offset: 2px !important;
}

/* 跳转到主内容的链接 */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: #000000;
    color: white;
    padding: 8px;
    text-decoration: none;
    z-index: 1000;
}

.skip-link:focus {
    top: 6px;
}

/* 提高链接和按钮的可访问性 */
.stui-vodlist__thumb:focus,
.toggle:focus,
.submit:focus {
    box-shadow: 0 0 0 2px #FF9900;
}

/* 图片背景的替代方案 - 为盲人用户提供文字描述 */
.stui-vodlist__thumb:not([alt]) {
    position: relative;
}

.stui-vodlist__thumb:not([alt])::after {
    content: attr(aria-label);
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* 屏幕阅读器专用文本 */
.screen-reader-text {
    position: absolute;
    margin: -1px;
    padding: 0;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
    word-wrap: normal !important;
}

/* 提高色彩对比度 */
.form-control {
    color: #333333;
    background-color: #ffffff;
    border: 1px solid #cccccc;
}

.form-control::placeholder {
    color: #666666;
}

/* 增强交互元素的视觉反馈 */
button:hover,
a:hover {
    text-decoration: underline;
}

/* 确保菜单项在键盘导航时的可见性 */
.sidenav a:focus,
.stui-header__menu a:focus {
    background-color: rgba(255, 153, 0, 0.3);
    color: #ffffff;
}