body{

margin:0;

font-family:system-ui;

background:#0b0b0b;

color:white;

height:100vh;

display:flex;

flex-direction:column;

}


/* CONTAINER */

.container{

max-width:500px;

margin:auto;

width:100%;

display:flex;

flex-direction:column;

height:100vh;

}


/* HEADER */

header{

position:sticky;

top:0;

z-index:1000;

text-align:center;

padding:20px;

background:#121212;

border-bottom:1px solid #333;

box-shadow:0 2px 10px rgba(0,0,0,0.5);

}


/* SEARCH */

.search{

position:sticky;

top:90px;

z-index:900;

background:#0b0b0b;

padding:15px;

}

.search input{

width:100%;

padding:12px;

border-radius:10px;

border:none;

font-size:16px;

box-sizing:border-box;

}


/* CHANNEL LIST */

.channel-grid{

flex:1;

display:grid;

grid-template-columns:repeat(2,1fr);

gap:12px;

padding:10px 15px 80px 15px;

overflow-y:auto;

}


/* CHANNEL CARD */

.channel{

background:#1c1c1c;

border-radius:12px;

padding:18px;

text-align:center;

cursor:pointer;

transition:.2s;

}

.channel:hover{

background:#2a2a2a;

}

.channel.active{

background:#ff7a00;

}


/* PLAYER */

.player{

position:fixed;

bottom:0;

left:0;

right:0;

max-width:500px;

margin:auto;

background:#181818;

padding:15px;

display:flex;

justify-content:space-between;

align-items:center;

border-top:1px solid #333;

}


/* PLAYER INFO */

.player-info{

display:flex;

align-items:center;

gap:10px;

}


.player-logo{

font-size:30px;

}


/* BUTTON */

.controls button{

background:#ff7a00;

border:none;

padding:10px 14px;

font-size:18px;

border-radius:8px;

color:white;

cursor:pointer;

}


/* EQUALIZER */

.equalizer{

display:flex;

gap:3px;

margin-top:4px;

}

.equalizer span{

width:4px;

height:12px;

background:#00ff88;

animation:eq 1s infinite;

}

.equalizer span:nth-child(2){animation-delay:.2s;}
.equalizer span:nth-child(3){animation-delay:.4s;}
.equalizer span:nth-child(4){animation-delay:.6s;}

@keyframes eq{

0%{height:6px}

50%{height:22px}

100%{height:6px}

}


/* RESPONSIVE */

@media (max-width:480px){

.channel-grid{

grid-template-columns:1fr;

}

}