* { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: Arial, sans-serif; background: #f5f5f5; }
    .header { background: #333; color: white; padding: 15px; display: flex; justify-content: space-between; align-items: center; }
    .logo { font-size: 24px; font-weight: bold; }
    .search-box input { padding: 8px; width: 300px; }
    .search-box button { padding: 8px 15px; background: #0066cc; color: white; border: none; cursor: pointer; }
    .container { display: flex; padding: 20px; }
    .sidebar { width: 200px; background: white; padding: 20px; margin-right: 20px; }
    .category-list { list-style: none; }
    .category-list li { margin: 10px 0; }
    .category-list a { text-decoration: none; color: #333; }
    .category-list a:hover { color: #0066cc; }
    .main-content { flex: 1; }
    .banner { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 40px; text-align: center; margin-bottom: 20px; border-radius: 10px; }
    .video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
    .video-card { background: white; border-radius: 8px; overflow: hidden; cursor: pointer; transition: transform 0.3s; }
    .video-card:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
    .video-thumbnail { position: relative; height: 140px; background: #ddd; }
    .video-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
    .video-duration { position: absolute; bottom: 5px; right: 5px; background: rgba(0,0,0,0.7); color: white; padding: 2px 5px; border-radius: 3px; font-size: 12px; }
    .video-info { padding: 10px; }
    .video-title { font-size: 14px; margin-bottom: 5px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .video-uploader { color: #666; font-size: 12px; margin-bottom: 5px; }
    .video-views { color: #999; font-size: 12px; }
    .pagination { margin-top: 20px; text-align: center; }
    .pagination button { margin: 0 5px; padding: 5px 10px; border: 1px solid #ddd; background: white; cursor: pointer; }
    .pagination button.active { background: #0066cc; color: white; border-color: #0066cc; }
    .footer { background: #333; color: white; padding: 15px; text-align: center; margin-top: 40px; }
    .video-container { display: flex; padding: 20px; }
    .video-player-section { flex: 3; }
    .recommendations-section { flex: 1; margin-left: 20px; background: white; padding: 20px; }
    .video-player { background: black; height: 400px; display: flex; align-items: center; justify-content: center; color: white; }
    .video-placeholder { text-align: center; }
    .mock-player { background: #222; padding: 20px; border-radius: 5px; margin-top: 20px; }
    .mock-controls button { margin: 0 5px; padding: 5px 10px; }
    .video-info-detailed { background: white; padding: 20px; margin-top: 20px; }
    .video-meta span { margin-right: 20px; color: #666; }
    .video-actions button { margin-right: 10px; padding: 8px 15px; background: #0066cc; color: white; border: none; border-radius: 4px; cursor: pointer; }
    .video-tags .tag { display: inline-block; background: #e0e0e0; padding: 3px 8px; margin: 5px 5px 5px 0; border-radius: 3px; font-size: 12px; }
    .recommend-video { display: flex; margin-bottom: 15px; cursor: pointer; }
    .recommend-video:hover { background: #f5f5f5; }
    .rec-thumbnail { margin-right: 10px; }
    .anti-crawler-warning { background: #fff3cd; color: #856404; padding: 10px; text-align: center; border: 1px solid #ffeaa7; margin: 20px; }