/* ================= 全局 ================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:-apple-system,BlinkMacSystemFont,"PingFang SC",
    "Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

body{
    background:#f7fafd;
    color:#111;
}

a{
    text-decoration:none;
    color:inherit;
}

/* ================= 容器 ================= */

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

/* 播放页容器 */
.play-container{
    max-width:900px;
    margin:0 auto;
    padding:0 10px;
}

/* ================= 头部 ================= */

header{
    padding:25px 0 15px;
    text-align:center;
    border-bottom:1px solid #e5eef5;
}

.logo{
    font-size:26px;
    font-weight:700;
    color:#2196f3;
}

.logo span{
    color:#ff4d4f;
}

header p{
    font-size:13px;
    color:#666;
    margin-top:6px;
}

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

.category{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
    margin:22px 0;
}

.category a{
    padding:8px 18px;
    border-radius:20px;
    background:#e3f2fd;
    color:#2196f3;
    font-size:14px;
    font-weight:500;
    transition:.2s;
}

.category a:hover{
    background:#2196f3;
    color:#fff;
}

/* ================= 搜索 ================= */

.search-box{
    display:flex;
    max-width:520px;
    margin:20px auto 28px;
}
.search-box input{
    flex:1;
    height:42px;
    border:1px solid #cfe3f5;
    border-radius:8px 0 0 8px;
    padding:0 12px;

    font-size:16px;        /* 防缩放 */
    line-height:42px;
    outline:none;

    -webkit-appearance:none;
    appearance:none;
}

.search-box button{
    width:90px;
    background:#2196f3;
    border:none;
    color:#fff;
    border-radius:0 8px 8px 0;

    font-size:16px;        /* 同步 */
    cursor:pointer;

    -webkit-appearance:none;
}

/* ================= 视频列表 ================= */

.video-list{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:15px;
}

/* 卡片 */

.video-card{
    background:#fff;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 2px 6px rgba(0,0,0,.05);
    transition:.2s;
}

.video-card:hover{
    transform:translateY(-3px);
}

/* 封面 */

.video-thumb{
    width:100%;
    aspect-ratio:1/1;
    background:#cce5ff;
    overflow:hidden;
}

.video-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* 信息 */

.video-info{
    padding:8px;
}

.video-title{
    font-size:14px;
    line-height:20px;
    height:40px;
    overflow:hidden;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}

.video-meta{
    font-size:12px;
    color:#999;
}

/* ================= 播放器 ================= */

.player-box{
    max-width:900px;
    margin:0 auto 20px;
    border-radius:10px;
    overflow:hidden;
    background:#000;
}

/* 播放器比例 */
#player{
    width:100%;
    aspect-ratio:16/9;
    background:#000;
}

/* ================= 播放信息 ================= */

.video-info-box{
    background:#fff;
    border-radius:10px;
    padding:15px;
    margin-bottom:20px;
    box-shadow:0 2px 6px rgba(0,0,0,.05);
    text-align:left;
}

.video-title h1{
    font-size:18px;
    font-weight:600;
    margin:6px 0;
    color:#111;
}

.video-desc{
    font-size:13px;
    color:#666;
    line-height:1.6;
}

/* ================= TAG ================= */

.vod-tag{
    display:inline-block;
    padding:7px 16px;
    border-radius:20px;
    background:#e3f2fd;
    color:#2196f3;
    font-size:13px;
    font-weight:500;
    margin:4px 6px 4px 0;
    transition:.2s;
}

.vod-tag:hover{
    background:#2196f3;
    color:#fff;
}

/* ================= 选集 ================= */

.playlist{
    background:#fff;
    border-radius:10px;
    padding:15px;
    margin-bottom:25px;
    box-shadow:0 2px 6px rgba(0,0,0,.05);
}

.playlist h3{
    font-size:16px;
    margin-bottom:12px;
}

.playlist-box{
    display:grid;
    grid-template-columns:repeat(8,1fr);
    gap:10px;
}

.playlist-box a{
    display:block;
    text-align:center;
    padding:7px 0;
    background:#e3f2fd;
    color:#2196f3;
    border-radius:6px;
    font-size:13px;
    transition:.2s;
}

.playlist-box a:hover,
.playlist-box a.active{
    background:#2196f3;
    color:#fff;
}

/* ================= 底部 ================= */

footer{
    margin-top:40px;
    padding:18px 0;
    text-align:center;
    font-size:12px;
    color:#888;
    border-top:1px solid #e5eef5;
}

/* ================= 自适应 ================= */

@media(max-width:1000px){

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

    .playlist-box{
        grid-template-columns:repeat(6,1fr);
    }
}

@media(max-width:700px){

    header{
        padding:20px 0 12px;
    }

    /* 分类两排 */
    .category a{
        width:30%;
        text-align:center;
        padding:8px 0;
    }

    /* 视频两列 */
    .video-list{
        grid-template-columns:repeat(2,1fr);
    }

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

    .search-box{
        width:100%;
        padding:0 5px;
    }

    .search-box button{
        width:70px;
    }
}
/* 灰色说明框 */
.notice-box{
    background:#f2f4f7;
    border-radius:10px;
    padding:15px;

    max-width:900px;
    margin:20px auto;

    box-shadow:0 2px 6px rgba(0,0,0,.04);

    font-size:15px;
    line-height:1.7;
    color:#333;
    text-align:left;
}
/* 分页容器 */
.page-box{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    margin:30px 0 20px;
}

/* 按钮样式 */
.page-btn{
    display:inline-block;
    min-width:70px;
    padding:8px 14px;
    text-align:center;
    border-radius:20px;
    background:#e3f2fd;
    color:#2196f3;
    text-decoration:none;
    font-size:14px;
    font-weight:500;
    transition:.2s;
}

/* 当前页 */
.page-btn.active{
    background:#2196f3;
    color:#fff;
    cursor:default;
}

/* 悬停 */
.page-btn:hover:not(.active){
    background:#2196f3;
    color:#fff;
}
.notice-box li{
    list-style: none;
}
.search-links{
    margin-top:20px;
    padding:10px;
    border-top:1px solid #eee;
}

.search-links a{
    display:inline-block;
    margin:4px 8px;
    color:#666;
    font-size:14px;
}
.video-thumb{
    position:relative;
}

.video-badge{
    position:absolute;
    top:6px;
    left:6px;
    background:#ff3b30;
    color:#fff;
    font-size:12px;
    padding:2px 6px;
    border-radius:3px;
    line-height:1;
}
.video-thumb{
    position:relative;
}

.video-views{
    position:absolute;
    right:6px;
    bottom:6px;
    background:rgba(0,0,0,0.6);
    color:#fff;
    font-size:12px;
    padding:2px 6px;
    border-radius:3px;
}
.player-btns{
    margin-top:1px;      /* 上方间距缩小 */
    text-align:left;     /* 不居中更像视频站 */
}

.player-btns a{
    display:inline-block;
    padding:3px 10px;    /* 按钮高度变小 */
    margin-right:6px;
    font-size:12px;      /* 字体变小 */
    border-radius:3px;
    text-decoration:none;
    line-height:18px;
}

.btn720{
    background:#4CAF50;
    color:#fff;
}

.btn1080{
    background:#2196F3;
    color:#fff;
}

.btnvip{
    background:#ff5722;
    color:#fff;
}