* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: linear-gradient(135deg, #0a0e1a, #1a1e33); color: #d0d0ff; font-family: "Poppins", sans-serif; overflow: hidden; height: calc(var(--vh) * 100); display: flex; flex-direction: column; }
#video-container { position: relative; width: calc(100%-20px); max-width: 100%; aspect-ratio: 16/9; background: #0a0a14; z-index: 10; border-radius: 12px; margin: 10px auto; box-shadow: 0 0 20px rgba(0, 240, 255, 0.2), 0 0 30px rgba(255, 0, 255, 0.1); overflow: hidden; border: 1px solid #00f0ff; }
video, #AssFuck69 { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 15px; }
#AssFuck69 { position: absolute; top: 0; left: 0; z-index: 5; }
#overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgb(0, 0, 0);  display: flex; justify-content: center; align-items: center; z-index: 15; border-radius: 15px; opacity: 0; transition: opacity 0.4s ease; pointer-events: none; }
#overlay.show { opacity: 1; display: flex; pointer-events: auto; }
.buffering-loader { transform: rotateZ(45deg); perspective: 1000px; border-radius: 50%; width: 60px; height: 60px; color: #fff; position: relative; margin: auto; }
.buffering-loader:before, .buffering-loader:after { content: ''; display: block; position: absolute; top: 0; left: 0; width: inherit; height: inherit; border-radius: 50%; transform: rotateX(70deg); animation: spin 1s linear infinite; }
.buffering-loader:after { color: #ff0066; transform: rotateY(70deg); animation-delay: 0.4s; }
.error-message { background: linear-gradient(45deg, #ff004d, #ff0066); padding: 20px 30px; border-radius: 12px; font-size: 16px; font-weight: 600; text-align: center; max-width: 85%; color: #fff; box-shadow: 0 0 15px rgba(255, 0, 102, 0.6); animation: fadeIn 0.5s ease-in; display: flex; flex-direction: column; gap: 12px; }
.error-message button { background: linear-gradient(90deg, #00f0ff, #6b00ff); border: none; padding: 10px 20px; border-radius: 8px; color: #fff; font-size: 14px; cursor: pointer; transition: transform 0.3s, box-shadow 0.3s; box-shadow: 0 0 10px rgba(0, 240, 255, 0.5); }
.error-message button:hover { transform: scale(1.05); box-shadow: 0 0 15px rgba(0, 240, 255, 0.8); }
#search-bar { width: calc(100% - 20px); padding: 14px 20px; margin: 10px auto; border: 1px solid #6b00ff; border-radius: 12px; background: linear-gradient(145deg, #1a1e33, #0a0e1a); color: #d0d0ff; font-size: 16px; font-family: "Poppins", sans-serif; outline: none; box-shadow: 0 0 15px rgba(107, 0, 255, 0.4), inset 0 2px 4px rgba(0, 0, 0, 0.6);  transition: all 0.3s ease; display: block; position: relative; z-index: 1; }
#search-bar::placeholder { color: #a0a0ff; opacity: 0.7; font-style: italic; }
#search-bar:hover { box-shadow: 0 0 20px rgba(107, 0, 255, 0.6), inset 0 3px 6px rgba(0, 0, 0, 0.6); }
#search-bar:focus { background: linear-gradient(145deg, #0a0e1a, #1a1e33); box-shadow: 0 0 25px rgba(0, 240, 255, 0.7), inset 0 3px 6px rgba(0, 0, 0, 0.6); border-color: #00f0ff; }

#channel-container { flex: 1; background: #0a0a14; overflow-y: auto; padding: 5px; border-top: 2px solid #6b00ff; margin: 0 10px 10px 10px; border-radius: 15px; box-shadow: 0 0 15px rgba(107, 0, 255, 0.2); }
#channel-list { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
.channel { width: calc(50% - 5px); background: linear-gradient(145deg, #1a1e33, #0a0e1a); border-radius: 12px; overflow: hidden; cursor: pointer; position: relative; border: 1px solid #6b00ff; box-shadow: 0 0 15px rgba(107, 0, 255, 0.3), inset 0 2px 4px rgba(0, 0, 0, 0.6); transition: all 0.3s ease; display: flex; flex-direction: column; align-items: center; }
.channel img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 10px; transition: transform 0.3s ease; border-bottom: 2px solid #00f0ff; box-shadow: 0 0 10px rgba(0, 240, 255, 0.3); }
.channel span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; color: #d0d0ff; text-align: justify; text-align-last: justify; font-size: 14px; padding: 6px 0; border-radius: 0 0 5px 5px; margin: 3px; height: 60px; text-shadow: 0 0 5px rgba(0, 240, 255, 0.5); }
.channel:hover { transform: scale(1.02); box-shadow: 0 0 20px rgba(0, 240, 255, 0.5), 0 0 25px rgba(255, 0, 255, 0.3); }
.channel.active { background: linear-gradient(145deg, #0a0e1a, #1a1e33); box-shadow: 0 0 25px rgba(0, 240, 255, 0.7), 0 0 30px rgba(255, 0, 255, 0.5); border-color: #ff00ff; }
@keyframes spin { 0%, 100% { box-shadow: 0.2em 0px 0 0px currentColor; } 12% { box-shadow: 0.2em 0.2em 0 0 currentColor; } 25% { box-shadow: 0 0.2em 0 0px currentColor; } 37% { box-shadow: -0.2em 0.2em 0 0 currentColor; } 50% { box-shadow: -0.2em 0 0 0 currentColor; } 62% { box-shadow: -0.2em -0.2em 0 0 currentColor; } 75% { box-shadow: 0px -0.2em 0 0 currentColor; } 87% { box-shadow: 0.2em -0.2em 0 0 currentColor; } }
@keyframes fadeIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }

@media (max-width: 768px) { #video-container { margin: 5px; border-radius: 10px; } }
@media (max-width: 768px) { #search-bar { width: calc(100% - 10px); margin: 5px auto; padding: 12px 16px; font-size: 14px; box-shadow: 0 0 10px rgba(107, 0, 255, 0.3), inset 0 2px 4px rgba(0, 0, 0, 0.6); } }

#filter-buttons {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin: 5px auto;
    width: calc(100% - 10px);
    max-width: 1200px;
}

.filter-btn {
    background: linear-gradient(145deg, #1a1e33, #0a0e1a);
    border: 2px solid #6b00ff;
    border-radius: 10px;
    padding: 10px 0;
    width: calc(33.33% - 6.67px); /* 3 ta button er jonno equal width */
    color: #d0d0ff;
    font-family: "Poppins", sans-serif;
    font-size: 16px; /* Thoda chhoto kore dilam mobile er jonno */
    font-weight: 600;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 0 15px rgba(107, 0, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}

.filter-btn:hover {
    background: linear-gradient(145deg, #0a0e1a, #1a1e33);
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.5);
}

.filter-btn.active {
    background: linear-gradient(90deg, #00f0ff, #ff00ff);
    border-color: #ff00ff;
    color: #fff;
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.7), 0 0 25px rgba(255, 0, 255, 0.5);
}

@media (max-width: 768px) {
    #filter-buttons { gap: 8px; margin: 3px auto; width: calc(100% - 6px); }
    .filter-btn { padding: 8px 0; font-size: 14px; width: calc(33.33% - 5.33px); border-width: 1px; box-shadow: 0 0 10px rgba(107, 0, 255, 0.3); }
}


@media (max-width: 768px) { #channel-container { margin: 0 5px 5px 5px; padding: 5px; border-radius: 10px; } }
@media (max-width: 768px) { #channel-list { gap: 5px; } }
@media (max-width: 768px) { .channel { width: calc(50% - 5px); } }
@media (max-width: 768px) { .channel img { aspect-ratio: 16/9; } }
@media (max-width: 768px) { .channel span { font-size: 12px; height: 54px; } }