/* 全局样式 */
* { box-sizing: border-box; }

body { line-height: 1.6; }

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

a { color: #3498db; transition: color 0.3s; }
a:hover { color: #e74c3c; }

h1, h2, h3, h4 { margin-top: 0; }

/* 导航栏已在HTML内联样式中定义 */

/* 首页样式 */
.hero { text-align: center; padding: 40px 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; border-radius: 8px; margin-bottom: 30px; }
.hero h1 { font-size: 28px; margin: 0; }

.site-intro { background: #fff; padding: 30px; border-radius: 8px; margin-bottom: 30px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.site-intro h2 { color: #333; border-bottom: 2px solid #e74c3c; padding-bottom: 10px; }

.hot-picks, .latest-updates, .quick-links { background: #fff; padding: 30px; border-radius: 8px; margin-bottom: 30px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }

.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }

.video-card { background: #f9f9f9; padding: 20px; border-radius: 6px; border-left: 4px solid #3498db; transition: transform 0.3s, box-shadow 0.3s; }
.video-card:hover { transform: translateY(-5px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.video-card h3 { margin-top: 0; font-size: 18px; }
.video-card .video-meta { font-size: 13px; color: #999; margin: 5px 0; }
.video-card .video-desc { font-size: 14px; color: #666; }

.video-list { display: flex; flex-direction: column; gap: 15px; }
.video-item { background: #f9f9f9; padding: 15px; border-radius: 6px; border-left: 3px solid #27ae60; }
.video-item h4 { margin: 0 0 8px 0; font-size: 16px; }
.video-item p { margin: 0; font-size: 14px; color: #666; }

.link-list { list-style: none; padding: 0; }
.link-list li { margin: 10px 0; }
.link-list a { font-size: 16px; text-decoration: none; }

.more-link { text-align: center; margin-top: 20px; }
.more-link a { font-size: 16px; }

/* 列表页样式 */
.list-page .page-title { font-size: 32px; margin-bottom: 10px; }
.list-page .page-desc { font-size: 16px; color: #666; margin-bottom: 30px; }

.video-list-section { background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }

.video-item.daquan-style { border-left: 4px solid #9b59b6; margin-bottom: 20px; padding: 15px; background: #fafafa; border-radius: 4px; }
.video-item.daquan-style .item-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.video-item.daquan-style .category-tag { background: #ecf0f1; padding: 4px 10px; border-radius: 3px; font-size: 12px; color: #555; }

.video-item.top-style { display: flex; align-items: flex-start; border-bottom: 1px solid #eee; padding: 20px 0; }
.video-item.top-style .rank-num { font-size: 36px; font-weight: bold; color: #e74c3c; margin-right: 20px; min-width: 50px; }
.video-item.top-style .item-content { flex: 1; }

.topic-group { margin-bottom: 40px; }
.topic-group .group-title { color: #2c3e50; border-left: 5px solid #f39c12; padding-left: 15px; margin-bottom: 20px; }
.video-item.topic-style { margin-bottom: 15px; padding: 12px; background: #f9f9f9; border-radius: 4px; border-left: 3px solid #f39c12; }

.video-item.latest-style { display: flex; gap: 15px; padding: 15px; background: #f9f9f9; margin-bottom: 15px; border-radius: 4px; border-left: 3px solid #1abc9c; }
.video-item.latest-style .item-date { font-weight: bold; color: #1abc9c; min-width: 60px; }

/* 详情页样式 */
.detail-page { background: #fff; }
.detail-page .container { max-width: 900px; }
.detail-page .page-title { font-size: 32px; margin-bottom: 20px; border-bottom: 3px solid #e74c3c; padding-bottom: 15px; }

.video-info { background: #ecf0f1; padding: 20px; border-radius: 8px; margin-bottom: 30px; }
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; }
.info-item { font-size: 15px; }
.info-item strong { color: #2c3e50; }

.video-highlight, .video-summary, .video-review { margin-bottom: 30px; }
.video-highlight h2, .video-summary h2, .video-review h2 { color: #2c3e50; border-left: 5px solid #3498db; padding-left: 15px; margin-bottom: 15px; }
.video-highlight p, .video-summary p, .video-review p { font-size: 16px; line-height: 1.8; color: #555; }

.related-videos { margin-top: 40px; padding-top: 30px; border-top: 2px solid #e0e0e0; }
.related-videos h2 { color: #2c3e50; border-left: 5px solid #27ae60; padding-left: 15px; margin-bottom: 20px; }

/* 响应式 */
@media (max-width: 768px) {
  .container { padding: 15px; }
  .hero h1 { font-size: 22px; }
  .video-grid { grid-template-columns: 1fr; }
  .detail-page .page-title { font-size: 24px; }
}

/* UI风格变体 */
.ui-style-0 .hero { background: linear-gradient(135deg, hsl(0, 70%, 60%) 0%, hsl(60, 70%, 50%) 100%); }
.ui-style-1 .hero { background: linear-gradient(135deg, hsl(22.5, 70%, 60%) 0%, hsl(82.5, 70%, 50%) 100%); }
.ui-style-2 .hero { background: linear-gradient(135deg, hsl(45, 70%, 60%) 0%, hsl(105, 70%, 50%) 100%); }
.ui-style-3 .hero { background: linear-gradient(135deg, hsl(67.5, 70%, 60%) 0%, hsl(127.5, 70%, 50%) 100%); }
.ui-style-4 .hero { background: linear-gradient(135deg, hsl(90, 70%, 60%) 0%, hsl(150, 70%, 50%) 100%); }
.ui-style-5 .hero { background: linear-gradient(135deg, hsl(112.5, 70%, 60%) 0%, hsl(172.5, 70%, 50%) 100%); }
.ui-style-6 .hero { background: linear-gradient(135deg, hsl(135, 70%, 60%) 0%, hsl(195, 70%, 50%) 100%); }
.ui-style-7 .hero { background: linear-gradient(135deg, hsl(157.5, 70%, 60%) 0%, hsl(217.5, 70%, 50%) 100%); }
.ui-style-8 .hero { background: linear-gradient(135deg, hsl(180, 70%, 60%) 0%, hsl(240, 70%, 50%) 100%); }
.ui-style-9 .hero { background: linear-gradient(135deg, hsl(202.5, 70%, 60%) 0%, hsl(262.5, 70%, 50%) 100%); }
.ui-style-10 .hero { background: linear-gradient(135deg, hsl(225, 70%, 60%) 0%, hsl(285, 70%, 50%) 100%); }
.ui-style-11 .hero { background: linear-gradient(135deg, hsl(247.5, 70%, 60%) 0%, hsl(307.5, 70%, 50%) 100%); }
.ui-style-12 .hero { background: linear-gradient(135deg, hsl(270, 70%, 60%) 0%, hsl(330, 70%, 50%) 100%); }
.ui-style-13 .hero { background: linear-gradient(135deg, hsl(292.5, 70%, 60%) 0%, hsl(352.5, 70%, 50%) 100%); }
.ui-style-14 .hero { background: linear-gradient(135deg, hsl(315, 70%, 60%) 0%, hsl(375, 70%, 50%) 100%); }
.ui-style-15 .hero { background: linear-gradient(135deg, hsl(337.5, 70%, 60%) 0%, hsl(397.5, 70%, 50%) 100%); }