/* 基础变量 */
:root {
    --bg-color: #121212;
    --card-bg: #1e1e1e;
    --primary-color: #ff9900; /* LIBVIO 标志性的亮色 */
    --text-main: #ffffff;
    --text-dim: #999;
}

body { background: var(--bg-color); color: var(--text-main); line-height: 1.6; }
.container { max-width: 1400px; margin: 0 auto; padding: 0 20px; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }

/* 头部设计 */
.header { height: 70px; background: rgba(18, 18, 18, 0.95); position: sticky; top: 0; z-index: 100; border-bottom: 1px solid #222; }
.logo { font-size: 24px; font-weight: bold; color: var(--primary-color); text-decoration: none; }
.nav-menu a { margin-left: 25px; color: var(--text-main); text-decoration: none; font-weight: 500; transition: 0.3s; }
.nav-menu a:hover { color: var(--primary-color); }

/* 幻灯片大图 */
.banner-slider { height: 450px; border-radius: 12px; overflow: hidden; margin: 20px 0; position: relative; }
.banner-item { display: block; height: 100%; background-size: cover; background-position: center; position: relative; }
.banner-info { position: absolute; bottom: 40px; left: 40px; max-width: 600px; }
.banner-info h1 { font-size: 3rem; margin: 10px 0; }
.tag { background: var(--primary-color); padding: 4px 10px; border-radius: 4px; font-size: 12px; }

/* 视频网格布局 */
.module { margin-bottom: 40px; }
.module-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 20px; }
.module-title { font-size: 22px; font-weight: 600; }
.module-more { color: var(--text-dim); text-decoration: none; font-size: 14px; }

.vod-grid { 
    display: grid; 
    grid-template-columns: repeat(6, 1fr); 
    gap: 20px; 
}

/* 移动端适配：手机显示 3 列 */
@media (max-width: 768px) {
    .vod-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .banner-slider { height: 250px; }
    .nav-menu { display: none; } /* 手机端隐藏菜单或改用侧滑 */
}

/* 海报卡片细节 */
.vod-card { background: var(--card-bg); border-radius: 8px; overflow: hidden; transition: 0.3s; }
.vod-card:hover { transform: translateY(-8px); box-shadow: 0 10px 20px rgba(0,0,0,0.5); }
.vod-thumb { position: relative; display: block; padding-top: 145%; }
.vod-thumb img { position: absolute; top: 0; width: 100%; height: 100%; object-fit: cover; }
.vod-remarks { position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,0.8); font-size: 12px; padding: 2px 6px; border-radius: 4px; }
.vod-info { padding: 12px; }
.vod-name { font-size: 14px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vod-type { color: var(--text-dim); font-size: 12px; margin-top: 4px; }