* {
    box-sizing: border-box;
}

body {
    background: #f5f6f7;
    color: #333;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto;
}

a {
    color: #444;
    text-decoration: none;
    transition: 0.2s;
}

a:hover {
    color: #111;
}

h1,h2,h3 {
    font-weight: 500;
    color: #222;
}

/* 布局 */
.detail-layout {
    display: flex;
    gap: 30px;
}

.detail-main {
    flex: 1;
}
/* 默认显示（PC） */
.pc-rank {
    width: 260px;
    flex-shrink: 0;
}
/* 手机端隐藏 */
@media screen and (max-width: 768px) {
    .pc-rank {
        display: none;
    }
}

/* col */
.col-pd,.col-lg-1,.col-lg-10,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-md-1,.col-md-10,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-sm-1,.col-sm-10,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-xs-1,.col-xs-10,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{position:relative;min-height:1px;padding:10px}.col-xs-1,.col-xs-10,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-wide-1,.col-xs-wide-10,.col-xs-wide-15,.col-xs-wide-2,.col-xs-wide-25,.col-xs-wide-3,.col-xs-wide-35,.col-xs-wide-4,.col-xs-wide-45,.col-xs-wide-5,.col-xs-wide-55,.col-xs-wide-6,.col-xs-wide-65,.col-xs-wide-7,.col-xs-wide-75,.col-xs-wide-8,.col-xs-wide-85,.col-xs-wide-9,.col-xs-wide-95{float:left}.col-xs-10{width:10%}.col-xs-9{width:11.1111111%}.col-xs-8{width:12.5%}.col-xs-7{width:14.2857143%}.col-xs-6{width:16.6666667%}.col-xs-5{width:20%}.col-xs-4{width:25%}.col-xs-3{width:33.3333333%}.col-xs-2{width:50%}.col-xs-1{width:100%}.col-xs-wide-10{width:10%}.col-xs-wide-9{width:90%}.col-xs-wide-8{width:80%}.col-xs-wide-7{width:70%}.col-xs-wide-6{width:60%}.col-xs-wide-5{width:50%}.col-xs-wide-4{width:40%}.col-xs-wide-3{width:30%}.col-xs-wide-2{width:20%}.col-xs-wide-15{width:15%}.col-xs-wide-95{width:95%}.col-xs-wide-85{width:85%}.col-xs-wide-75{width:75%}.col-xs-wide-65{width:65%}.col-xs-wide-55{width:55%}.col-xs-wide-45{width:45%}.col-xs-wide-35{width:35%}.col-xs-wide-25{width:25%}

@media (min-width: 768px){
.col-sm-1,.col-sm-10,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-wide-1,.col-sm-wide-10,.col-sm-wide-15,.col-sm-wide-2,.col-sm-wide-25,.col-sm-wide-3,.col-sm-wide-35,.col-sm-wide-4,.col-sm-wide-45,.col-sm-wide-5,.col-sm-wide-55,.col-sm-wide-6,.col-sm-wide-65,.col-sm-wide-7,.col-sm-wide-75,.col-sm-wide-8,.col-sm-wide-85,.col-sm-wide-9,.col-sm-wide-95{float:left}.col-sm-10{width:10%}.col-sm-9{width:11.1111111%}.col-sm-8{width:12.5%}.col-sm-7{width:14.2857143%}.col-sm-6{width:16.6666667%}.col-sm-5{width:20%}.col-sm-4{width:25%}.col-sm-3{width:33.3333333%}.col-sm-2{width:50%}.col-sm-1{width:100%}.col-sm-wide-10{width:10%}.col-sm-wide-9{width:90%}.col-sm-wide-8{width:80%}.col-sm-wide-7{width:70%}.col-sm-wide-6{width:60%}.col-sm-wide-5{width:50%}.col-sm-wide-4{width:40%}.col-sm-wide-3{width:30%}.col-sm-wide-2{width:20%}.col-sm-wide-15{width:15%}.col-sm-wide-95{width:95%}.col-sm-wide-85{width:85%}.col-sm-wide-75{width:75%}.col-sm-wide-65{width:65%}.col-sm-wide-55{width:55%}.col-sm-wide-45{width:45%}.col-sm-wide-35{width:35%}.col-sm-wide-25{width:25%}}

@media (min-width: 992px){	
.col-md-1,.col-md-10,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-wide-1,.col-md-wide-10,.col-md-wide-15,.col-md-wide-2,.col-md-wide-25,.col-md-wide-3,.col-md-wide-35,.col-md-wide-4,.col-md-wide-45,.col-md-wide-5,.col-md-wide-55,.col-md-wide-6,.col-md-wide-65,.col-md-wide-7,.col-md-wide-75,.col-md-wide-8,.col-md-wide-85,.col-md-wide-9,.col-md-wide-95{float:left}.col-md-10{width:10%}.col-md-9{width:11.1111111%}.col-md-8{width:12.5%}.col-md-7{width:14.2857143%}.col-md-6{width:16.6666667%}.col-md-5{width:20%}.col-md-4{width:25%}.col-md-3{width:33.3333333%}.col-md-2{width:50%}.col-md-1{width:100%}.col-md-wide-10{width:10%}.col-md-wide-9{width:90%}.col-md-wide-8{width:80%}.col-md-wide-7{width:70%}.col-md-wide-6{width:60%}.col-md-wide-5{width:50%}.col-md-wide-4{width:40%}.col-md-wide-3{width:30%}.col-md-wide-2{width:20%}.col-md-wide-15{width:15%}.col-md-wide-95{width:95%}.col-md-wide-85{width:85%}.col-md-wide-75{width:75%}.col-md-wide-65{width:65%}.col-md-wide-55{width:55%}.col-md-wide-45{width:45%}.col-md-wide-35{width:35%}.col-md-wide-25{width:25%}}

@media (min-width: 1200px){		
.col-lg-1,.col-lg-10,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-wide-1,.col-lg-wide-10,.col-lg-wide-15,.col-lg-wide-2,.col-lg-wide-25,.col-lg-wide-3,.col-lg-wide-35,.col-lg-wide-4,.col-lg-wide-45,.col-lg-wide-5,.col-lg-wide-55,.col-lg-wide-6,.col-lg-wide-65,.col-lg-wide-7,.col-lg-wide-75,.col-lg-wide-8,.col-lg-wide-85,.col-lg-wide-9,.col-lg-wide-95{float:left}.col-lg-10{width:10%}.col-lg-9{width:11.1111111%}.col-lg-8{width:12.5%}.col-lg-7{width:14.2857143%}.col-lg-6{width:16.6666667%}.col-lg-5{width:20%}.col-lg-4{width:25%}.col-lg-3{width:33.3333333%}.col-lg-2{width:50%}.col-lg-1{width:100%}.col-lg-wide-10{width:10%}.col-lg-wide-9{width:90%}.col-lg-wide-8{width:80%}.col-lg-wide-7{width:70%}.col-lg-wide-6{width:60%}.col-lg-wide-5{width:50%}.col-lg-wide-4{width:40%}.col-lg-wide-3{width:30%}.col-lg-wide-2{width:20%}.col-lg-wide-15{width:15%}.col-lg-wide-95{width:95%}.col-lg-wide-85{width:85%}.col-lg-wide-75{width:75%}.col-lg-wide-65{width:65%}.col-lg-wide-55{width:55%}.col-lg-wide-45{width:45%}.col-lg-wide-35{width:35%}.col-lg-wide-25{width:25%}}

@media (max-width: 767px){[class*=col-]{padding:5px}}
img {
    max-width:100%;
    height:auto;
    display:block;
}

.container {
    width:1200px;
    margin:auto;
    padding:0 15px;
}

/* Header */

.header {
    background:#222;
    padding:10px 0;
}

.header .container {
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
}

.logo img {
    height:40px;
}

.nav {
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    flex-wrap:wrap;
}

.nav li {
    margin-left:20px;
}

.nav li.active a {
    color: #ffcc00;
    font-weight: bold;
}

.nav a {
    color:#fff;
    text-decoration:none;
    font-size:14px;
}

.search input {
    padding:6px 8px;
    border:none;
    border-radius:3px;
}

/* 列表 */

.vod-item p {
    font-size: 14px;
    color: #333;
}

.vod-text-list li {
    color: #555;
}

/*.vod-item:hover {*/
/*    box-shadow:0 2px 10px rgba(0,0,0,0.1);*/
/*}*/

.vod-item p {
    margin:8px 0 0;
    font-size:14px;
    text-align:center;
}

.vod-item .pic-box {
    width: 100%;
    aspect-ratio: 2 / 3;   /* 统一海报比例 */
    overflow: hidden;
    background: #f5f5f5;
}

.vod-item .pic-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;     /* 自动裁剪填充 */
}

/* 排行榜 */

.rank-item {
    padding:10px;
    background:#fff;
    margin-bottom:8px;
    display:flex;
    justify-content:space-between;
    font-size:14px;
}

/* 留言 */

.gbook-form,
.gbook-list {
    background:#fff;
    padding:20px;
    margin-top:20px;
    border-radius:4px;
}

.form-group {
    margin-bottom:15px;
}

.form-group input,
.form-group textarea {
    width:100%;
    padding:8px;
    border:1px solid #ddd;
    border-radius:4px;
}

.form-group button {
    background:#222;
    color:#fff;
    padding:8px 20px;
    border:0;
    border-radius:4px;
    cursor:pointer;
}

/* stu */
/* pannel */
.stui-pannel{position: relative; margin-bottom: 20px;}
.stui-pannel.stui-pannel-x{ margin: -10px -10px 10px;}
.stui-pannel-bg{border-radius: 2px;}
.stui-pannel-side{ padding: 0 0 0 20px;}
.stui-pannel-box{ padding: 10px;}
.stui-pannel-box.active{ padding: 0; margin: -10px;}
.stui-pannel_hd{ padding: 10px;}
.stui-pannel_ft{ margin-top: 10px; padding: 10px 10px 0; text-align: center;}

/* pannel-head */
.stui-pannel__head{ position: relative; height: 30px;}
.stui-pannel__head.active{height: 40px;}
.stui-pannel__head .title{float: left; margin:0; padding-right: 10px; line-height: 24px;}
.stui-pannel__head .title img{ display: inline-block; width: 24px; height: 24px; margin-right: 10px; vertical-align: -5px;}
.stui-pannel__head .more{ line-height: 30px;}
/* 分页横向布局 */
.stui-page {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 30px;
    padding-left: 0;
}

.stui-page li {
    list-style: none;
}

.stui-page li a,
.stui-page li .num {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 4px;
    background: #f5f5f5;
}

.stui-page li.active a,
.stui-page li.active .num {
    background: #ff6600;
    color: #fff;
}

/* 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}

/* ===== 播放列表 ===== */

.stui-content__playlist {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    list-style: none;
    padding-left: 0;

    max-height: 150px;
    overflow-y: auto;
}

.stui-content__playlist li {
    width: auto !important;
    float: none !important;
    margin: 0;
    list-style: none;
}

.stui-content__playlist li a {
    display: inline-block;
    padding: 4px 10px;
    font-size: 12px;
    white-space: nowrap;
    border-radius: 4px;

    border: 1px solid #ddd;
    background: #fff;
    transition: all .2s ease;
}

.stui-content__playlist li a:hover{
    border-color: #ff4c4c;
    color: #ff4c4c;
}

/* ===== 移动端 ===== */
@media (max-width: 768px){
    .stui-content__playlist{
        max-height: 180px;
    }
}
.stui-content__playlist.overflow{ max-height: 300px; overflow-y: scroll;}


/* 当前播放集 */
.stui-content__playlist li.active a{
    border-color: #ff4c4c;
    background: #ff4c4c;
    color: #fff;
}

.stui-content__playlist.full li{ float: none; width: 100%; margin-right: 0;}
.stui-content__playlist.column3 li{ width: 33.3333333%; padding: 0 5px; margin-right: 0;}
.stui-content__playlist.column6 li{ width: 16.6666667%; padding: 0 5px; margin-right: 0;}
.stui-content__playlist.column8 li{ width: 12.5%; padding: 0 5px; margin-right: 0;}
.stui-content__playlist.column8 li.more,.stui-content__playlist.column10 li.narrow{ width: 15%;}
.stui-content__playlist.column10 li{ width: 10%; padding: 0 5px; margin-right: 0;}
.stui-content__playlist.column10 li.more,.stui-content__playlist.column10 li.narrow{ width: 20%;}
.stui-content__playlist.column12 li{ width: 8.33333333%; padding: 0 5px; margin-right: 0;}
.stui-content__playlist.column12 li.more,.stui-content__playlist.column12 li.narrow{ width: 16.6666667%;}
.stui-content__playlist.column3,.stui-content__playlist.column6,.stui-content__playlist.column8,.stui-content__playlist.column10,.stui-content__playlist.column12{ margin: 0 -5px;}
.stui-content__playlist.column3 li a,.stui-content__playlist.column6 li a,.stui-content__playlist.column8 li a,.stui-content__playlist.column10 li a,.stui-content__playlist.column12 li a{ padding: 5px;}
.stui-content__playlist.full li a,.stui-content__playlist.column3 li a,.stui-content__playlist.column6 li a,.stui-content__playlist.column8 li a,.stui-content__playlist.column10 li a,.stui-content__playlist.column12 li a{ display: block; text-align: center;overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; white-space:nowrap;}


/* 播放面板标题栏底线 */
.stui-pannel__head.bottom-line {
    position: relative;
    padding: 10px 15px;
    border-bottom: 1px solid #e5e5e5; /* 下边线 */
    font-size: 16px;
    font-weight: 500;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 播放面板主体 */
.stui-pannel_bd {
    padding: 10px 15px;
    background-color: #fff;
    overflow: hidden; /* 清除内部浮动 */
}

/* 响应式调整播放列表 */
@media screen and (max-width: 768px) {
    .stui-content__playlist li {
        width: calc(25% - 8px); /* 手机端 4 列显示 */
    }
}
/* ================= 移动端分页优化 ================= */
@media (max-width: 768px) {

    .stui-page {
        flex-wrap: nowrap;           /* 禁止换行 */
        overflow-x: auto;            /* 超出可滑动 */
        gap: 4px;                    /* 减小间距 */
    }

    .stui-page li {
        flex: 0 0 auto;              /* 不允许压缩 */
        white-space: nowrap;         /* 禁止文字换行 */
    }

    .stui-page li a,
    .stui-page li .num,
    .stui-page li span {
        padding: 4px 8px;            /* 减小按钮大小 */
        font-size: 13px;             /* 字体稍微缩小 */
        white-space: nowrap;         /* 禁止 3/173 换行 */
    }

}


/* 播放器 */

.player {
    width:100%;
    background:#000;
    margin-top:20px;
}

/* ========================= */
/* 响应式核心 */
/* ========================= */

@media (max-width: 1200px) {
    .container {
        width:100%;
    }

    .vod-list {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {

    .header .container {
        flex-direction:column;
        align-items:flex-start;
    }

    .nav {
        width:100%;
        flex-wrap:wrap;
        margin-top:10px;
    }

    .nav li {
        margin:5px 10px 5px 0;
    }

    .search {
        width:100%;
        margin-top:10px;
    }

    .search input {
        width:100%;
    }

    .vod-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .rank-item {
        font-size:13px;
    }

}

@media (max-width: 480px) {
    .vod-list {
        display:grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap:15px;
    }


    .vod-item {
        padding:6px;
    }

    .vod-item p {
        font-size:12px;
    }
}

.banner {
    position:relative;
    overflow:hidden;
    margin-bottom:30px;
}

.banner-wrapper {
    display:flex;
    gap:15px;
    transition:transform 0.5s ease;
}

.banner-item {
    flex:0 0 calc(20% - 12px); /* 5张 */
    background:#fff;
    border-radius:6px;
    overflow:hidden;
}

.banner-item img {
    width:100%;
    height:260px;
    object-fit:cover;
    display:block;
}

.banner-title {
    padding:8px;
    font-size:14px;
    text-align:center;
}

/* 平板 */
@media (max-width:1024px){
    .banner-item {
        flex:0 0 calc(25% - 12px); /* 4张 */
    }
}

/* 手机 */
@media (max-width:768px){
    .banner-item {
        flex:0 0 calc(50% - 12px); /* 2张 */
    }
}

@media (max-width:480px){
    .banner-item {
        flex:0 0 100%; /* 1张 */
    }
}


.search {
    position:relative;
}

.search-result {
    position:absolute;
    top:35px;
    left:0;
    width:100%;
    background:#fff;
    border:1px solid #ddd;
    display:none;
    z-index:999;
}

.search-result div {
    padding:8px;
    cursor:pointer;
}

.search-result div:hover {
    background:#f5f5f5;
}

/* =====================
   通用结构
===================== */

.home-section {
    margin-bottom: 50px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.section-header h2 {
    font-size: 22px;
    font-weight: 600;
    position: relative;
    padding-left: 12px;
}

.section-header h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    width: 4px;
    height: 20px;
    background: #ff4d4f;
    border-radius: 2px;
}

.section-header .more {
    font-size: 14px;
    color: #999;
}

.section-header .more:hover {
    color: #ff4d4f;
}

/* =====================
   主体布局
===================== */

.section-body {
    display: flex;
    gap: 25px;
    align-items: flex-start;
}

.section-left {
    flex: 3;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
}

.section-right {
    flex: 1;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
}

/* =====================
   子分类
===================== */

.subtype {
    margin-bottom: 18px;
}

.subtype a {
    display: inline-block;
    padding: 5px 12px;
    background: #f5f5f5;
    border-radius: 20px;
    font-size: 13px;
    color: #666;
    margin-right: 8px;
    margin-bottom: 8px;
    transition: all .2s;
}

.subtype a:hover {
    background: #ff4d4f;
    color: #fff;
}

/* =====================
   图片卡片
===================== */

.vod-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 25px;
}

/* 卡片 */
.vod-card {
    transition: transform .2s ease, box-shadow .2s ease;
}

.vod-card:hover {
    transform: translateY(-5px);
}

/* 封面比例控制（2:3 资源站标准比例） */
.vod-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    max-height: 300px;     /* ⭐ 限制高度 */
    overflow: hidden;
    border-radius: 8px;
    background: #f2f2f2;
}

/* 图片填充裁剪 */
.vod-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;        /* ⭐ 防变形 */
    display: block;
}

/* 标题 */
.vod-card p {
    margin-top: 8px;
    font-size: 14px;
    text-align: center;
}

.vod-update {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0,0,0,.7);
    color: #fff;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 4px;
}

.vod-title {
    font-size: 14px;
    margin-top: 8px;
    text-align: center;
}

/* =====================
   文字列表
===================== */

.vod-text-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 20px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.vod-text-list li a {
    font-size: 14px;
    color: #444;
}

.vod-text-list li a:hover {
    color: #ff4d4f;
}

/* =====================
   周榜
===================== */

.rank-header {
    margin-bottom: 15px;
}

.rank-header h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.rank-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.rank-list li {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.rank-num {
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    font-size: 12px;
    background: #eee;
    border-radius: 4px;
    margin-right: 8px;
}

/* 前三名高亮 */
.rank-list li:nth-child(1) .rank-num {
    background: #ff4d4f;
    color: #fff;
}

.rank-list li:nth-child(2) .rank-num {
    background: #ff7a45;
    color: #fff;
}

.rank-list li:nth-child(3) .rank-num {
    background: #ffa940;
    color: #fff;
}

.rank-list a {
    font-size: 14px;
    color: #333;
}

.rank-list a:hover {
    color: #ff4d4f;
}



@media (max-width:768px){
    .section-body {
        flex-direction:column;
    }

    .section-right {
        display:none;
    }

    .vod-grid {
        grid-template-columns:repeat(2,1fr);
    }

    .vod-text-list {
        grid-template-columns:repeat(2,1fr);
    }
}

.related {
    margin-top: 40px;
}

/* 默认PC三列 */
.related-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.related-item {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    transition: all .3s ease;
}

.related-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.related-item img {
    width: 100%;
    aspect-ratio: 2/3; /* 海报比例 */
    object-fit: cover;
    display: block;
}

.related-item p {
    padding: 8px 10px 0;
    font-size: 14px;
    line-height: 1.4;
    
    /* 限制两行 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.related-item .remark {
    display: block;
    padding: 0 10px 10px;
    font-size: 12px;
    color: #999;
}

/* 平板 */
@media (max-width: 992px) {
    .related-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

/* 手机 */
@media (max-width: 768px) {
    .related-list {
        grid-template-columns: repeat(2, 1fr); /* 每行2个 */
        gap: 10px;
    }

    .related-item p {
        font-size: 13px;
    }

    .related-item .remark {
        font-size: 11px;
    }
}

/* 小屏手机 */
@media (max-width: 480px) {
    .related-list {
        gap: 8px;
    }
}

/* 标题+标签布局 */
.related-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.related-tabs{
    display:flex;
    gap:12px;
}

.related-tabs a{
    font-size:13px;
    color:#666;
    cursor:pointer;
}

.related-tabs a.on{
    color:#ff6b00;
    font-weight:600;
}



.related-list:not(.show){
    display:none;
}

/* 锁死图片尺寸防止撑开 */
.related-item img{
    width:100%;
    height:220px !important;
    object-fit:cover;
    display:block;
}


.vod-meta {
    margin-top: 15px;
    line-height: 1.8;
    color: #555;
}

.vod-meta strong {
    color: #222;
}

.vod-detail-top {
    display: flex;
    gap: 20px;
}


.vod-pic {
    width: 220px;
    flex-shrink: 0;
}

.vod-pic img {
    width: 100%;
    border-radius: 6px;
}

.vod-info {
    flex: 1;
}

.vod-info h1 {
    margin-bottom: 20px;
    font-size: 22px;
}

.vod-info p {
    margin-bottom: 10px;
    color: #555;
}
/* 剧情简介 */
.vod-desc {
    line-height: 1.8;
    color: #555;
}

/* 排行榜 */
/* 每个排行榜模块间隔 */
.rank-box {
    background: #fff;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 25px;
}

/* 标题样式 */
.rank-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 15px;
    border-left: 3px solid #ff4c4c;
    padding-left: 8px;
}

/* 普通文字排行榜 */
.rank-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.rank-list li {
    margin-bottom: 8px;
}

.rank-list li a {
    font-size: 14px;
    color: #444;
}

.rank-list li a:hover {
    color: #000;
}

/* 带图片排行榜 */
.rank-list-img li {
    margin-bottom: 15px;
}

.rank-list-img li a {
    display: flex;
    gap: 10px;
    align-items: center;
}

.rank-list-img img {
    width: 60px;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
}

.rank-info {
    display: flex;
    flex-direction: column;
}

.rank-name {
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.rank-remark {
    font-size: 12px;
    color: #999;
}


/* 手机端 */
@media(max-width:768px) {
    .detail-layout {
        flex-direction: column;
    }

    .pc-rank {
        width: 100%;
    }

    .vod-detail-top {
        flex-direction: column;
    }

    .vod-pic {
        width: 180px;
    }
}

/* =========================
   分类筛选
========================= */

.filter-box {
    background: #fff;
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.filter-row {
    margin-bottom: 12px;
}

.filter-title {
    font-weight: bold;
    margin-right: 10px;
    color: #333;
}

.filter-row a {
    display: inline-block;
    padding: 4px 10px;
    margin: 0 6px 6px 0;
    background: #f5f5f5;
    border-radius: 20px;
    font-size: 13px;
    color: #666;
}

.filter-row a:hover {
    background: #ff4d4f;
    color: #fff;
}

.filter-row a.active {
    background: #ff4d4f;
    color: #fff;
}

.page-title{
    font-size:24px;
    margin-bottom:20px;
}

.search-list{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.search-item{
    display:flex;
    gap:20px;
    padding:15px;
    border:1px solid #eee;
    border-radius:8px;
    transition:all .3s;
    background:#fff;
}

.search-item:hover{
    box-shadow:0 4px 12px rgba(0,0,0,0.08);
}

.search-thumb{
    width:140px;
    flex-shrink:0;
}

.search-thumb img{
    width:100%;
    border-radius:6px;
}

.search-info{
    flex:1;
}

.search-title{
    font-size:18px;
    margin-bottom:6px;
}

.search-title a{
    color:#222;
    text-decoration:none;
}

.search-title a:hover{
    color:#e50914;
}

.search-sub{
    color:#999;
    margin-bottom:8px;
}

.search-meta{
    font-size:14px;
    color:#666;
    margin-bottom:4px;
}

.search-desc{
    font-size:14px;
    color:#444;
    margin-top:8px;
    line-height:1.6;
}

/* ========================= */
/*  排行榜页专用样式         */
/* ========================= */

.rankpage-title{
    font-size:26px;
    margin-bottom:20px;
}

/* Tabs */
.rankpage-tabs{
    margin-bottom:25px;
}

.rankpage-tabs a{
    display:inline-block;
    padding:8px 18px;
    margin-right:10px;
    border-radius:20px;
    background:#f5f5f5;
    text-decoration:none;
    color:#333;
    transition:.3s;
}

.rankpage-tabs a.active{
    background:#e50914;
    color:#fff;
}

/* 列表 */
.rankpage-list{
    display:flex;
    flex-direction:column;
    gap:20px;
}

/* 单条 */
.rankpage-item{
    display:flex;
    align-items:stretch;   /* 关键：拉伸对齐 */
    gap:20px;
    padding:18px;
    border:1px solid #eee;
    border-radius:12px;
    background:#fff;
    transition:.3s;
}

.rankpage-item:hover{
    box-shadow:0 6px 20px rgba(0,0,0,0.08);
}

/* 排名 */
.rankpage-num{
    width:40px;
    font-size:20px;
    font-weight:bold;
    text-align:center;
    color:#999;
    flex-shrink:0;
}

.rankpage-num.top{
    color:#e50914;
    font-size:24px;
}

/* 封面 */
.rankpage-thumb{
    width:120px;
    flex-shrink:0;
}

.rankpage-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;   /* 填充对齐 */
    border-radius:10px;
}

/* 信息 */
.rankpage-info{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.rankpage-name{
    font-size:18px;
    margin-bottom:6px;
}

.rankpage-name a{
    text-decoration:none;
    color:#222;
}

.rankpage-name a:hover{
    color:#e50914;
}

.rankpage-sub{
    color:#999;
    margin-bottom:6px;
}

.rankpage-meta{
    font-size:14px;
    color:#666;
    margin-bottom:4px;
}

.rankpage-hits{
    font-weight:bold;
    color:#e50914;
    margin-top:8px;
}

/* ========================= */
/* 移动端优化                */
/* ========================= */

@media(max-width:768px){

    .rankpage-item{
        gap:12px;
        padding:12px;
    }

    .rankpage-thumb{
        width:90px;
    }

    .rankpage-name{
        font-size:16px;
    }

    .rankpage-meta{
        font-size:13px;
    }

}

.seo-text{
  height:0;
  overflow:hidden;
  visibility:hidden;
}

/* 强制隐藏 breadcrumb（SEO 可读，用户不可见） */
.seo-breadcrumb{
  position: fixed !important;
  left: -99999px !important;
  top: -99999px !important;

  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;

  visibility: hidden !important;
  opacity: 0 !important;

  pointer-events: none !important;
}

/* 推荐标签 */
.relate-tabs{
    display:flex;
    gap:10px;
    margin-left:20px;
}

.relate-tabs .tab{
    font-size:13px;
    padding:2px 8px;
    border-radius:4px;
    background:#f2f2f2;
    cursor:pointer;
    transition:.2s;
}

.relate-tabs .tab:hover{
    background:#ff6600;
    color:#fff;
}

.relate-tabs .tab.active{
    background:#ff6600;
    color:#fff;
}

/* 切换面板 */
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }

/* 播放区域 */

.play-wrapper{
    background:#fff;
    border:1px solid #eee;
    border-radius:6px;
    padding:15px 20px;
}

/* 标题 */

.play-header{
    display:flex;
    align-items:center;
    gap:20px;
    border-bottom:1px solid #eee;
    padding-bottom:10px;
}

.play-title{
    font-size:16px;
    font-weight:600;
}

/* 播放源 */

.play-tabs{
    display:flex;
    align-items:center;
    gap:15px;
    flex-wrap:wrap;
}

.play-tabs .tab{
    font-size:14px;
    cursor:pointer;
    color:#666;
}

.play-tabs .tab.active{
    color:#ff6600;
    border-bottom:2px solid #ff6600;
}

/* 更多资源 */

.more-box{
    position:relative;
}

.more-btn{
    cursor:pointer;
    color:#666;
}

.more-list{
    position:absolute;
    top:25px;
    left:0;
    background:#fff;
    border:1px solid #eee;
    border-radius:4px;
    display:none;
    padding:8px;
    min-width:100px;
}

.more-list a{
    display:block;
    padding:4px 6px;
    font-size:13px;
}

.more-list a:hover{
    background:#f5f5f5;
}

/* 播放面板 */

.play-panel{
    display:none;
    margin-top:15px;
}

.play-panel.active{
    display:block;
}

/* 集数 */

.episode-list{
    display:grid;
    grid-template-columns:repeat(8,1fr);
    gap:10px;

    list-style:none;
    padding:0;

    max-height:150px;   /* 3行高度 */
    overflow-y:auto;    /* 滚动 */
}

/* 按钮 */

.episode-list li a{

    display:block;
    text-align:center;

    padding:8px 0;

    border-radius:6px;

    background:#f6f6f6;
    border:1px solid #e5e5e5;

    font-size:13px;
}

.episode-list li.active a{

    background:#ff6600;
    border-color:#ff6600;
    color:#fff;

}

/* 手机 */

@media(max-width:768px){

    .episode-list{
        grid-template-columns:repeat(4,1fr);
        max-height:180px;
    }

}