body {
    background:#111;
    color:white;
    margin:0;
    overflow:hidden;
}

#app{
    display:flex;
    height:100vh;
}

#sidebar{
    width:300px;
    background:#000;
    border-right:1px solid #333;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

#groupList{
    max-height:120px;
    overflow-y:auto;
    border-bottom:1px solid #333;
}

.group-btn{
    padding:10px;
    cursor:pointer;
    font-size:14px;
    color:#aaa;
}
.group-btn.active{
    background:#e50914;
    color:white;
}

#channelList{
    flex:1;
    overflow-y:auto;
}

.channel-item{
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px;
    border-bottom:1px solid #222;
    cursor:pointer;
}

.channel-item:hover,
.channel-item.active{
    background:#e50914;
    color:white;
}

.channel-logo{
    width:40px;
    height:40px;
    object-fit:contain;
}

#mainContent{
    flex:1;
    overflow-y:auto;
}
/* --- Responsive V8 --- */
@media(max-width: 768px){

    #app{
        flex-direction: column;
    }

    #sidebar{
        width: 100%;
        height: auto;
        position: relative;
    }

    #channelList{
        max-height: 250px;
        overflow-y: auto;
    }

    #mainContent{
        flex: auto;
        height: auto;
        margin: 0;
    }
}