body {
    margin:0;
    font-family: Arial;
    background: radial-gradient(circle,#0a1f4d,#000);
    color:white;
}

.topbar {
    display:flex;
    justify-content: space-between;
    padding:20px;
}

.grid {
    display:grid;
    grid-template-columns: repeat(3,1fr);
    gap:20px;
    padding:40px;
}

.card {
    padding:40px;
    border-radius:15px;
    text-align:center;
    cursor:pointer;
    transition:0.3s;
}

.card:hover { transform:scale(1.05); }

.live { background: linear-gradient(#00c6ff,#6f00ff); }
.movies { background: linear-gradient(#ff416c,#ff4b2b); }
.series { background: linear-gradient(#8e2de2,#4a00e0); }
.small { background:#5f8f6f; }

.container {
    display:flex;
    height:90vh;
}

.channels {
    width:30%;
    overflow-y:auto;
    background:#111;
}

.channel {
    padding:10px;
    border-bottom:1px solid #333;
    cursor:pointer;
}

.channel:hover {
    background:#222;
}

.player {
    width:70%;
}

video {
    width:100%;
    height:100%;
}

.footer {
    display:flex;
    justify-content: space-between;
    padding:20px;
}