﻿/* 全局强制重置 */
*,*::before,*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
a { text-decoration: none; color: inherit; display: block; }
ul, li { list-style: none; }
input, button { border: none; outline: none; font-family: inherit; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
body {
    background: #ffffff;
    color: #ffffff;
    min-height: 100vh;
    line-height: 1.3;
    overflow-x: hidden;
    padding: 0 5px;
}

/* ========== 移动端缩小字体配置 ========== */
body {
    font-family: PingFang SC, system-ui, sans-serif;
    font-size: 12px;
}
.logo { font-size: 16px; font-weight: 600; letter-spacing: 0.5px; white-space: nowrap; }
.search-input { font-size: 12px; min-width: 0; padding: 10px 14px; }
.search-submit { font-size: 12px; padding: 0 12px; white-space: nowrap; }
.category-item { font-size: 11px; flex-shrink: 0; padding:6px 12px; }
.box-title { font-size: 15px; }
.video-name { font-size: 13px; min-width: 0; }
.video-meta { font-size: 10px; }

/* ========== PC端缩小字体配置 ≥768px ========== */
@media screen and (min-width:768px){
    body { font-family: "Microsoft YaHei", Helvetica, sans-serif; font-size:13px; }
    .logo { font-size:24px; font-weight:800; letter-spacing:1px; }
    .search-input { font-size:13px; padding:11px 16px; }
    .search-submit { font-size:13px; padding:0 20px; }
    .category-item { font-size:12px; padding:7px 14px; }
    .box-title { font-size:18px; }
    .video-name { font-size:14px; }
    .video-meta { font-size:11px; }
}

/* ========== 头部导航容器 ========== */
.header {
    background: linear-gradient(90deg, #9090eb, #e283c6);
    box-shadow:0 2px 16px #9d00ff28;
    position:sticky;
    top:0;
    z-index:9999;
    width:100%;
    max-width:1440px;
    margin:0 auto;
    padding:10px 10px;
}
.header-inner {
    width:100%;
}
.header-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    margin-bottom:10px;
}
.logo {
    background: linear-gradient(90deg, #ffffff, #ffffff);
    -webkit-background-clip:text;
    color:transparent;
}

/* ========== 汉堡菜单按钮（三线切换X动画） ========== */
.menu-btn {
    width: 34px;
    height: 34px;
    background:linear-gradient(135deg,#9d00ff,#3a0080);
    border-radius:8px;
    cursor:pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-shrink: 0;
    transition: 0.2s all;
}
.menu-btn span {
    width: 16px;
    height: 2px;
    background: #fff;
    border-radius: 1px;
    transition: 0.25s ease all;
}
/* 激活状态 变成关闭X */
.menu-btn.active span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
.menu-btn.active span:nth-child(2) {
    opacity: 0;
}
.menu-btn.active span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

.search-wrap {
    width:100%;
    display:flex;
    gap:0;
    margin-bottom:10px;
}

/* ========== PC端布局规则 ========== */
@media(min-width:768px){
    .menu-btn { display:none; }
    .header-top {
        display:flex;
        justify-content:space-between;
        align-items:center;
    }
    .search-wrap {
        margin-bottom:0;
        flex:0 1 620px;
    }
}

/* 搜索表单样式 */
.search-input {
    flex:1;
    background:#ffffff;
    border:1px solid #9d00ff40;
    border-radius:10px 0 0 10px;
    color:#000000;
    transition:0.3s all;
}
.search-input:focus { border-color:#36e0ff; box-shadow:0 0 10px #36e0ff35; }
.search-submit {
    background:linear-gradient(135deg,#ff2e9c,#9d00ff);
    color:#fff;
    border-radius:0 10px 10px 0;
    cursor:pointer;
    transition:0.3s;
}
.search-submit:hover { opacity:0.85; box-shadow:0 0 12px #ff2e9c40; }
/* 搜索禁用灰化 */
.search-disabled .search-input { background:#282838; border-color:#555; color:#888; cursor:not-allowed; }
.search-disabled .search-submit { background:#3c3c48; color:#999; cursor:not-allowed; box-shadow:none; }

/* ========== 分类区域 ========== */
.category-box { width:100%; }
.category-list {
    display:none;
    flex-wrap:wrap;
    gap:8px;
    max-height:300px;
    overflow-y:auto;
    padding:8px;
    background:#7bb3eb;
    border-radius:12px;
    margin-top:8px;
    width:100%;
}
.category-list.show { display:flex; }
.category-list::-webkit-scrollbar { width:3px; }
.category-list::-webkit-scrollbar-thumb { background:#ff2e9c; border-radius:3px; }
.category-item {
    background:#df4c4c;
    border-radius:24px;
    border:0px solid #ff2e9c35;
}
@media(min-width:768px){
    .category-list {
        display:flex !important;
        overflow-x:auto;
        overflow-y:hidden;
        padding:6px 4px;
        padding-bottom:6px;
        background:transparent;
        margin-top:0;
        max-height:none;
        flex-wrap:nowrap;
    }
    .category-list::-webkit-scrollbar { height:4px; }
    .category-list::-webkit-scrollbar-thumb { background:#9d00ff; border-radius:4px; }
    .category-item {
        background:#ce2b6a;
        border-radius:30px;
        border:0px solid #9d00ff30;
        white-space:nowrap;
    }
}
.category-item a { width:100%; height:100%; }
.category-item:hover { background:linear-gradient(135deg,#9d00ff,#3a0080); border-color:#36e0ff; }

/* ========== 主内容容器 ========== */
.main {
    max-width:1440px;
    margin:15px auto;
    display:flex;
    flex-direction:column;
    gap:15px;
    width:100%;
}
.module-box {
    background: linear-gradient(145deg, #e490d1, #8181ef);
    border:0px solid #9d00ff28;
    border-radius:0px;
    padding:10px;
    box-shadow:0 3px 24px #9d00ff15;
    width:100%;
}
.box-title {
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    padding-bottom:10px;
    border-bottom:1px solid #9d00ff25;
    margin-bottom:16px;
    position:relative;
    width:100%;
}
.box-title::after {
    content:"";
    position:absolute;
    left:0;
    bottom:-1px;
    width:100%;
    height:2px;
    background:linear-gradient(90deg,#ff2e9c,#36e0ff);
}

/* 播放器容器 */
.player-container {
    width:100%;
    background:#000;
    border-radius:10px;
    display:grid;
    place-items:center;
    color:#aaa;
    border:0px solid #9d00ff30;
}
/* 下载区域 */
.download-container {
    padding:14px;
    background:#0a0a22;
    border-radius:10px;
    border:1px dashed #36e0ff30;
    color:#ccc;
    width:100%;
}

/* ========== 视频自适应列表 ========== */
.video-grid {
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:12px;
    width:100%;
}
@media(min-width:768px){
    .video-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap:18px;
    }
}

.video-card {
    display:flex;
    flex-direction:column;
    gap:6px;
    width:100%;
    min-width:0;
}
.video-cover {
    width:100%;
    aspect-ratio:4/3;
    border-radius:0px;
    background:linear-gradient(135deg,#200540,#052040);
    overflow:hidden;
    transition:0.4s;
}
.video-cover:hover { transform:scale(1.03); box-shadow:0 0 16px #9d00ff40; }

.video-name {
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    font-weight:500;
    width:100%;
}

/* 底部日期+分类 */
.video-meta {
    display:flex;
    justify-content:space-between;
    width:100%;
    gap:4px;
    min-width:0;
}
.meta-date {
    color:#f0f0f0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    flex: 1 1 45%;
    min-width:0;
}
.meta-cate {
    color:#f0f0f0;
    text-align:right;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    flex: 1 1 45%;
    min-width:0;
	text-decoration: underline;
}