/* css/style.css - 稳定修复版 */
:root {
    --bg-color: #121212;
    --header-bg: #1c1c1c;
    --text-color: #d1d1d1;
    --accent-color: #ff2a6d; /* 绅士粉 */
    --card-bg: #252525;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
body { font-family: "Microsoft YaHei", sans-serif; background: var(--bg-color); color: var(--text-color); font-size: 14px; padding-top: 70px; }
a { text-decoration: none; color: var(--text-color); transition: 0.3s; }
a:hover { color: var(--accent-color); }
ul, li { list-style: none; }
img { border: 0; vertical-align: middle; }

/* --- 1. 头部 (解决图标巨大、代码乱码问题) --- */
.header {
    position: fixed; top: 0; left: 0; width: 100%; height: 60px;
    background: var(--header-bg); box-shadow: 0 2px 10px rgba(0,0,0,0.8);
    z-index: 1000; display: flex; align-items: center;
}
.h-con {
    width: 100%; max-width: 1600px; margin: 0 auto; padding: 0 20px;
    display: flex; align-items: center; justify-content: space-between;
}

/* Logo区域修复 */
.logo { display: flex; align-items: center; font-size: 20px; font-weight: bold; color: #fff; margin-right: 40px; }
/* 强制限制图标大小，解决巨型图标问题 */
.logo svg { width: 30px; height: 30px; fill: var(--accent-color); margin-right: 10px; }

/* 导航菜单 */
.nav { display: flex; gap: 20px; flex: 1; overflow-x: auto; align-items: center; height: 60px; }
.nav::-webkit-scrollbar { display: none; }
.nav a { font-size: 15px; font-weight: 500; white-space: nowrap; color: #aaa; display: block; height: 60px; line-height: 60px; }
.nav a:hover, .nav a.active { color: #fff; border-bottom: 2px solid var(--accent-color); }

/* 搜索框 */
.search-box { position: relative; width: 250px; }
.search-input {
    width: 100%; height: 34px; background: #333; border: 1px solid #444;
    border-radius: 17px; padding: 0 40px 0 15px; color: #fff; outline: none;
}
.search-btn {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; padding: 0;
}
.search-btn svg { width: 16px; height: 16px; fill: #888; }

/* --- 首页顶部链接 (彩色按钮) --- */
.partner-box { background: #333; padding: 15px; margin: 15px 0; border-radius: 4px; }
.partner-title { color: var(--accent); font-size: 15px; margin-bottom: 10px; font-weight: bold; border-left: 3px solid var(--accent); padding-left: 8px; }
.btn-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.btn-tag { 
    padding: 5px 12px; border-radius: 4px; font-size: 12px; color: #fff; text-align: center; flex-grow: 1; 
    background: #444; /* 默认 */
}
/* 模拟截图中的彩色标签 */
.btn-tag:nth-child(8n+1) { background: #f44336; }
.btn-tag:nth-child(8n+2) { background: #e91e63; }
.btn-tag:nth-child(8n+3) { background: #9c27b0; }
.btn-tag:nth-child(8n+4) { background: #673ab7; }
.btn-tag:nth-child(8n+5) { background: #3f51b5; }
.btn-tag:nth-child(8n+6) { background: #2196f3; }
.btn-tag:nth-child(8n+7) { background: #03a9f4; }
.btn-tag:nth-child(8n+8) { background: #00bcd4; }




/* --- 2. 视频列表 (解决错位、不显示图片) --- */
.container { max-width: 1600px; margin: 20px auto; padding: 0 15px; }

.module-head { 
    margin-bottom: 15px; border-left: 4px solid var(--accent-color); padding-left: 10px; 
    display: flex; justify-content: space-between; align-items: flex-end;
}
.module-title { font-size: 18px; font-weight: bold; color: #fff; line-height: 1; }
.module-more { font-size: 12px; color: #666; }

/* 网格布局 */
.video-list { display: flex; flex-wrap: wrap; margin: 0 -8px; }
.video-item { width: 16.666%; padding: 8px; margin-bottom: 15px; }

.video-box {
    display: block; background: var(--card-bg); border-radius: 4px; 
    overflow: hidden; transition: 0.2s;
}
.video-box:hover { transform: translateY(-4px); box-shadow: 0 4px 12px rgba(255, 42, 109, 0.2); }

/* 图片容器：强制比例，防止图片消失 */
.video-cover {
    position: relative; width: 100%; padding-bottom: 60%; /* 16:10 */
    background: #000; overflow: hidden;
}
.video-cover img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover;
}

.video-tag {
    position: absolute; top: 5px; left: 5px;
    background: linear-gradient(45deg, #ff2a6d, #ff5f85);
    color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 2px;
}
.video-time {
    position: absolute; bottom: 5px; right: 5px;
    background: rgba(0,0,0,0.7); color: #eee; font-size: 11px; padding: 2px 5px; border-radius: 2px;
}

.video-title {
    padding: 8px 10px 0; font-size: 13px; height: 26px; line-height: 18px;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #ddd;
}
.video-meta {
    padding: 0 10px 8px; font-size: 12px; color: #666; margin-top: 4px;
    display: flex; justify-content: space-between;
}

/* 响应式 */
@media (max-width: 1200px) { .video-item { width: 20%; } }
@media (max-width: 992px) { .video-item { width: 25%; } }
@media (max-width: 768px) { 
    .video-item { width: 50%; } 
    .nav { display: none; } 
    .header { height: 50px; }
}