/* static/css/style.css */
:root {
    /* Nord 配色方案 */
    --bg-body: #2e3440;     /* 深蓝灰背景 */
    --bg-card: #3b4252;     /* 卡片背景 */
    --bg-hover: #434c5e;    /* 悬停背景 */
    --text-main: #eceff4;   /* 主文字白 */
    --text-sub: #d8dee9;    /* 副文字灰 */
    --accent: #88c0d0;      /* 冰蓝色 */
    --red: #bf616a;         /* 红色 */
    --green: #a3be8c;       /* 绿色 */
    --border: #4c566a;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
body { 
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif; 
    background: var(--bg-body); 
    color: var(--text-main); 
    font-size: 14px; 
    line-height: 1.5;
}
a { text-decoration: none; color: var(--text-main); transition: 0.2s; }
a:hover { color: var(--accent); }
ul, li { list-style: none; }
img { width: 100%; height: 100%; object-fit: cover; display: block; background: #252932; }

/* 容器 */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 15px; }

/* --- 1. 头部 --- */
.header { background: #242933; padding: 15px 0; border-bottom: 1px solid var(--bg-card); }
.h-row { display: flex; align-items: center; justify-content: space-between; }

.logo { font-size: 24px; font-weight: bold; display: flex; align-items: center; }
.logo img { height: 40px; width: auto; margin-right: 10px; }
.logo span { color: var(--text-main); }
.logo span.hl { color: var(--red); }

/* 头部导航 (PC显示) */
.nav-pc { display: flex; gap: 20px; }
.nav-pc a { font-size: 15px; font-weight: 500; color: var(--text-sub); }
.nav-pc a:hover { color: var(--accent); }

/* --- 2. 首页搜索区 (大标题+搜索) --- */
.hero-section { text-align: center; padding: 40px 20px; }
.hero-title { font-size: 32px; margin-bottom: 30px; font-weight: bold; }
.hero-title span { color: var(--red); }

.search-group { 
    max-width: 600px; margin: 0 auto; display: flex; 
    background: #3b4252; border-radius: 8px; overflow: hidden; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.2); border: 1px solid var(--border);
}
.search-input { 
    flex: 1; background: transparent; border: none; color: #fff; 
    padding: 12px 20px; font-size: 16px; outline: none; 
}
.search-btn { 
    background: #4c566a; border: none; color: #fff; padding: 0 25px; 
    cursor: pointer; font-weight: bold; transition: 0.2s;
}
.search-btn:hover { background: var(--accent); color: #2e3440; }

/* --- 3. APP图标方块 (仿源码) --- */
.app-grid { 
    display: grid; 
    grid-template-columns: repeat(6, 1fr); 
    gap: 15px; 
    margin: 30px 0; 
}
.app-item { 
    display: flex; flex-direction: column; align-items: center; 
    background: var(--bg-card); padding: 15px; border-radius: 12px; 
    transition: 0.2s; text-align: center; border: 1px solid transparent;
}
.app-item:hover { transform: translateY(-5px); border-color: var(--accent); background: var(--bg-hover); }
.app-icon { width: 60px; height: 60px; border-radius: 12px; margin-bottom: 10px; }
.app-title { font-size: 14px; font-weight: bold; color: #fff; }

/* --- 4. 标签云/分类导航 --- */
.tags-section { margin-bottom: 30px; }
.tags-header { display: flex; justify-content: space-between; margin-bottom: 15px; border-bottom: 1px solid var(--border); padding-bottom: 10px; }
.tags-title { font-size: 18px; font-weight: bold; color: var(--accent); }
.tags-more { font-size: 12px; color: var(--text-sub); }

.tags-box { display: flex; flex-wrap: wrap; gap: 10px; }
.tag-btn { 
    display: inline-block; padding: 6px 15px; 
    background: var(--bg-card); color: var(--text-sub); 
    border-radius: 20px; font-size: 13px; transition: 0.2s; 
}
.tag-btn:hover { background: var(--accent); color: #2e3440; }

/* --- 5. 视频列表 --- */
.video-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.video-item { background: var(--bg-card); border-radius: 6px; overflow: hidden; transition: 0.2s; border: 1px solid var(--border); }
.video-item:hover { transform: translateY(-5px); border-color: var(--accent); }

.video-cover { position: relative; padding-bottom: 56.25%; overflow: hidden; }
.video-cover img { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
.video-hd { 
    position: absolute; top: 5px; right: 5px; 
    background: var(--red); color: #fff; font-size: 11px; 
    padding: 1px 5px; border-radius: 3px; 
}
.video-time {
    position: absolute; bottom: 5px; right: 5px;
    background: rgba(0,0,0,0.7); color: #fff; font-size: 11px; padding: 2px 5px; border-radius: 3px;
}

.video-info { padding: 10px; }
.video-title { 
    font-size: 14px; margin-bottom: 5px; height: 20px; line-height: 20px; 
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 
}
.video-meta { font-size: 12px; color: #81a1c1; display: flex; justify-content: space-between; }

/* --- 底部 --- */
.footer { 
    background: #242933; padding: 40px 0; margin-top: 50px; 
    text-align: center; color: var(--text-sub); font-size: 13px; 
    border-top: 1px solid var(--border);
}

/* 响应式 */
@media (max-width: 768px) {
    .app-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .video-list { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .nav-pc { display: none; } /* 手机端隐藏PC导航 */
    .hero-title { font-size: 24px; }
}




/* --- 新增：分类APP导航 (原广告位) --- */
.cate-section { margin-top: 30px; width: 100%; max-width: 1000px; padding: 0 10px; }
.cate-grid { 
    display: grid; 
    grid-template-columns: repeat(8, 1fr); /* 一行8个 */
    gap: 15px; 
}
.cate-item { 
    display: flex; flex-direction: column; align-items: center; 
    text-align: center; transition: 0.2s; 
}
.cate-item:hover { transform: translateY(-5px); }

/* 模拟APP图标 */
.cate-icon {
    width: 50px; height: 50px; border-radius: 12px; 
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    color: #fff;
}
.cate-icon svg { width: 28px; height: 28px; fill: #fff; }
.cate-title { font-size: 13px; color: #555; font-weight: bold; }

/* 颜色循环 (让图标多彩) */
.cate-item:nth-child(5n+1) .cate-icon { background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%); }
.cate-item:nth-child(5n+2) .cate-icon { background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%); }
.cate-item:nth-child(5n+3) .cate-icon { background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%); }
.cate-item:nth-child(5n+4) .cate-icon { background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); }
.cate-item:nth-child(5n+5) .cate-icon { background: linear-gradient(135deg, #cfd9df 0%, #e2ebf0 100%); }

/* --- 新增：热门标签云 --- */
.hot-tags-section { 
    width: 100%; max-width: 1000px; margin-top: 30px; 
    background: #f9f9f9; padding: 20px; border-radius: 8px; border: 1px solid #eee;
}
.tags-header { font-size: 15px; color: #999; margin-bottom: 15px; text-align: center; position: relative; }
.tags-header::before { content:""; position:absolute; top:50%; left:0; width:45%; height:1px; background:#e0e0e0; }
.tags-header::after { content:""; position:absolute; top:50%; right:0; width:45%; height:1px; background:#e0e0e0; }

.tags-box { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.tag-btn { 
    display: inline-block; padding: 5px 12px; background: #fff; 
    border: 1px solid #e0e0e0; border-radius: 20px; 
    font-size: 12px; color: #666; transition: 0.2s;
}
.tag-btn:hover { border-color: #ce6ad9; color: #ce6ad9; transform: scale(1.05); }

/* 手机适配 */
@media (max-width: 768px) {
    .cate-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; }
    .tags-header::before, .tags-header::after { width: 35%; }
}



/* --- 内页专用样式 (追加到 style.css 底部) --- */

/* 1. 分页条 (暗黑版) */
.pagination { margin: 30px 0; text-align: center; display: flex; justify-content: center; gap: 5px; }
.pagination a, .pagination span {
    display: inline-block; padding: 8px 16px; 
    background: var(--bg-card); color: var(--text-sub); border-radius: 4px;
}
.pagination a:hover, .pagination .current {
    background: var(--accent); color: #2e3440; font-weight: bold;
}

/* 2. 详情页布局 */
.detail-wrap { 
    background: var(--bg-card); padding: 30px; border-radius: 8px; 
    display: flex; gap: 30px; margin-bottom: 30px; 
}
.detail-cover { width: 240px; flex-shrink: 0; }
.detail-cover img { width: 100%; border-radius: 4px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); border: 1px solid var(--border); }

.detail-info { flex: 1; }
.detail-title { font-size: 28px; color: var(--text-main); margin-bottom: 20px; font-weight: bold; }
.detail-meta { font-size: 14px; color: var(--text-sub); line-height: 2.4; margin-bottom: 20px; }
.detail-meta span { color: var(--accent); margin-right: 10px; }

.detail-desc { 
    background: #2e3440; padding: 15px; border-radius: 6px; 
    color: #88909c; font-size: 13px; line-height: 1.6; margin-bottom: 20px; 
}

.btn-play {
    display: inline-block; padding: 12px 40px; 
    background: var(--red); color: #fff; 
    border-radius: 30px; font-size: 16px; font-weight: bold;
    box-shadow: 0 4px 10px rgba(191, 97, 106, 0.3);
    transition: 0.2s;
}
.btn-play:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(191, 97, 106, 0.5); color: #fff; }

/* 3. 播放页布局 */
.player-wrapper { background: #000; margin-bottom: 20px; border-radius: 4px; overflow: hidden; }
.player-box { position: relative; padding-bottom: 56.25%; height: 0; }
.player-box iframe, .player-box .MacPlayer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

.play-info { background: var(--bg-card); padding: 20px; border-radius: 8px; margin-bottom: 30px; }
.play-title { font-size: 22px; color: var(--text-main); margin-bottom: 10px; }
.play-stat { color: var(--text-sub); font-size: 13px; }

/* 4. 标题栏通用 */
.module-title-inner { 
    font-size: 20px; color: var(--text-main); margin-bottom: 20px; 
    border-left: 4px solid var(--accent); padding-left: 12px; 
}

/* 手机适配 */
@media (max-width: 768px) {
    .detail-wrap { flex-direction: column; padding: 20px; }
    .detail-cover { width: 100%; max-width: 200px; margin: 0 auto; }
    .detail-info { text-align: center; margin-top: 15px; }
    .detail-meta { text-align: left; }
}