.page-header { max-width: 1200px; margin: 40px auto 30px; padding: 0 20px; }
.page-header h1 { font-size: 32px; margin-bottom: 12px; color: #1a1a1a; }
.page-desc { font-size: 16px; color: #666; line-height: 1.8; }

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

.site-intro { background: #fff; padding: 30px; margin-bottom: 40px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.site-intro h2 { font-size: 24px; margin-bottom: 15px; color: #1a1a1a; }
.site-intro p { font-size: 15px; line-height: 1.8; color: #555; }

.featured-section, .navigation-section, .recent-section { background: #fff; padding: 30px; margin-bottom: 30px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.featured-section h2, .navigation-section h2, .recent-section h2 { font-size: 24px; margin-bottom: 15px; color: #1a1a1a; }
.section-desc { font-size: 14px; color: #666; margin-bottom: 20px; }

.video-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.video-card { background: #fafafa; padding: 20px; border-radius: 6px; border: 1px solid #e8e8e8; transition: all 0.3s; }
.video-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); transform: translateY(-2px); }
.video-card h3 { font-size: 18px; margin-bottom: 8px; }
.video-card h3 a { color: #1a1a1a; }
.video-card h3 a:hover { color: #2c5aa0; }
.card-meta { font-size: 13px; color: #888; margin-bottom: 10px; }
.card-desc { font-size: 14px; color: #555; line-height: 1.6; }

.nav-links { list-style: none; }
.nav-links li { padding: 12px 0; border-bottom: 1px solid #f0f0f0; font-size: 15px; }
.nav-links li:last-child { border-bottom: none; }
.nav-links a { font-weight: 600; color: #2c5aa0; }

.video-list { list-style: none; }
.list-item { padding: 15px 0; border-bottom: 1px solid #f0f0f0; }
.list-item:last-child { border-bottom: none; }
.list-item h3 { font-size: 18px; margin-bottom: 8px; }
.list-item h3 a { color: #1a1a1a; }
.list-item h3 a:hover { color: #2c5aa0; }
.item-meta { font-size: 13px; color: #888; margin-bottom: 8px; }
.item-desc { font-size: 14px; color: #555; line-height: 1.6; }

.video-collection { background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.video-list-full { list-style: none; }
.list-item-full { padding: 20px 0; border-bottom: 1px solid #e8e8e8; position: relative; }
.list-item-full:last-child { border-bottom: none; }
.list-item-full h3 { font-size: 20px; margin-bottom: 10px; }
.list-item-full h3 a { color: #1a1a1a; }
.list-item-full h3 a:hover { color: #2c5aa0; }
.list-item-full .item-review { font-size: 14px; color: #666; margin-top: 10px; font-style: italic; background: #f9f9f9; padding: 10px; border-radius: 4px; }

.rank-badge { display: inline-block; background: #ff6b6b; color: #fff; font-size: 12px; font-weight: bold; padding: 4px 10px; border-radius: 12px; margin-right: 10px; }
.topic-tag { display: inline-block; background: #4ecdc4; color: #fff; font-size: 12px; font-weight: bold; padding: 4px 10px; border-radius: 4px; margin-right: 10px; }
.date-tag { display: inline-block; background: #95a5a6; color: #fff; font-size: 12px; font-weight: bold; padding: 4px 10px; border-radius: 4px; margin-right: 10px; }

.detail-page { background: #fff; max-width: 900px; margin: 30px auto; padding: 40px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.video-detail h1 { font-size: 32px; margin-bottom: 30px; color: #1a1a1a; border-bottom: 3px solid #2c5aa0; padding-bottom: 15px; }
.video-detail section { margin-bottom: 35px; }
.video-detail h2 { font-size: 22px; margin-bottom: 15px; color: #2c5aa0; }
.info-list { list-style: none; }
.info-list li { padding: 10px 0; border-bottom: 1px solid #f0f0f0; font-size: 15px; }
.info-list li:last-child { border-bottom: none; }
.highlight-text, .summary-text, .review-text { font-size: 15px; line-height: 1.9; color: #333; }
.highlight-text { font-weight: 600; background: #fff8dc; padding: 15px; border-left: 4px solid #ffa500; border-radius: 4px; }
.summary-text { text-indent: 2em; }
.review-text { font-style: italic; color: #555; background: #f9f9f9; padding: 15px; border-radius: 4px; }

.related-videos h2 { margin-top: 40px; }

footer { background: #2c3e50; color: #ecf0f1; text-align: center; padding: 30px 20px; margin-top: 50px; }
footer p { font-size: 14px; }

@media (max-width: 768px) {
  .page-header h1 { font-size: 24px; }
  .video-grid { grid-template-columns: 1fr; }
  .detail-page { padding: 20px; }
  main { padding: 15px; }
}

.ui-style-13 { --primary-color: hsl(299, 65%, 50%); }
.ui-style-13 nav a:hover { background: hsl(299, 65%, 95%); }
.ui-style-13 .video-card:hover { border-color: var(--primary-color); }