/* General Styles */
body { font-family: Arial, sans-serif; background:#0f0f0f; color:#fff; margin:0; }

/* Header Section */
.header { padding:60px 20px; text-align:center; position:relative; background:#1e1e1e; overflow:hidden; }
.banner { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; opacity:0.25; z-index:0; }
.profile-img { width:100px; height:100px; border-radius:50%; border:3px solid #fff; position:relative; z-index:1; }
.details-btn { transition:0.2s; }
.details-btn:hover { background:#e62117 !important; color:#fff !important; }

/* Search and Sort Bar */
.search-bar { padding:20px; display:flex; justify-content:center; align-items:center; gap:15px; background:#0f0f0f; position:sticky; top:0; z-index:10; flex-wrap:wrap; }
.search-bar input { width:100%; max-width:500px; padding:12px 20px; background:#222; border:1px solid #333; color:#fff; border-radius:25px; outline:none; }
.sort-container { display:flex; align-items:center; gap:10px; }
.sort-container label { color:#aaa; font-size:0.9em; white-space:nowrap; }
.sort-container select { padding:10px 15px; background:#222; border:1px solid #333; color:#fff; border-radius:8px; outline:none; cursor:pointer; font-size:0.9em; }
.sort-container select:hover { background:#2a2a2a; }

/* Video Grid */
.container { display:flex; flex-wrap:wrap; gap:20px; padding:20px; justify-content:center; min-height:400px; }
.video { background:#1e1e1e; width:340px; border-radius:12px; cursor:pointer; overflow:hidden; transition: 0.2s; }
.video:hover { transform: scale(1.02); background:#2a2a2a; }
.video img { width:100%; aspect-ratio:16/9; object-fit:cover; }
.video-info { padding:15px; }
.badge { padding:2px 6px; border-radius:4px; font-size:0.7em; font-weight:bold; background:#e62117; margin-right:5px; }

/* Pagination */
.pagination { display:flex; justify-content:center; align-items:center; gap:10px; padding:30px 20px; }
.pagination a, .pagination span { padding:10px 16px; background:#222; border-radius:8px; text-decoration:none; color:#fff; font-size:0.9em; transition:0.2s; }
.pagination a:hover { background:#3ea6ff; }
.pagination .current { background:#3ea6ff; font-weight:bold; }
.pagination .disabled { opacity:0.3; pointer-events:none; }

/* Modal and Comments */
.modal { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.95); z-index:100; overflow-y:auto; }
.modal-content { max-width:1100px; margin:20px auto; background:#0f0f0f; border-radius:15px; overflow:hidden; position:relative; box-shadow: 0 0 30px rgba(0,0,0,0.5); }
.comment { display:flex; gap:12px; padding:15px; border-bottom:1px solid #222; }
.comment.reply { margin-left:50px; border-left: 2px solid #333; }
.avatar { width:40px; height:40px; border-radius:50%; background:#333; object-fit: cover; }
.tag { display:inline-block; background:#333; padding:4px 10px; border-radius:6px; font-size:0.8em; margin:2px; }
.info-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap:10px; padding:20px; background:#181818; }
.close-btn { position:absolute; top:10px; right:25px; font-size:40px; cursor:pointer; z-index:110; color:#fff; text-shadow: 0 0 10px #000; }
.loading { text-align:center; padding:40px; color:#aaa; }

/* Footer */
.footer { text-align:center; padding:30px 20px; background:#1e1e1e; border-top:1px solid #333; color:#888; font-size:0.9em; margin-top:40px; }

/* Responsive Adjustments */
@media (max-width: 768px) {
    .search-bar { flex-direction:column; padding:15px; }
    .search-bar input { max-width:100%; }
    .sort-container { width:100%; justify-content:center; }
    .pagination { flex-wrap:wrap; }
}