*{margin:0;padding:0;box-sizing:border-box;font-family:Arial,sans-serif}
body{background:#111;color:#fff}
header{display:flex;justify-content:space-between;padding:15px;background:#181818}
header input{padding:8px;border-radius:8px;border:none;width:240px}
.container{display:flex;height:calc(100vh - 60px)}
.player{flex:3;display:flex;align-items:center;justify-content:center;background:#000}
video{width:100%;height:100%;background:#000}
.sidebar{flex:1;background:#1b1b1b;overflow:auto}
.channel{padding:12px;border-bottom:1px solid #333;cursor:pointer}
.channel:hover,.active{background:#0066ff}
@media(max-width:768px){
.container{flex-direction:column}
.sidebar{height:40vh}
}