body {
        background-color: #333446;
        font-family: sans-serif;
        color:white;
}
        


.topbar{
  background:#333446;
  padding:15px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.back{
  color:#0f0;
  text-decoration:none;
}

.channel-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:20px;
  padding:20px;
}

.channel{
  background:#1b1c2f;
  padding:10px;
  border-radius:10px;
  cursor:pointer;
  text-align:center;
  
}

.channel img{
  width:100%;
  
  border-radius:10px;
}

#playerBox{
  padding:20px;
  background:#333446;
  
}
video{
  width:100%;
  max-height:400px;
}







/* ================== MOBILE LIVE TV ================== */
@media (max-width: 768px) {

  /* Header */
  .top-header {
    flex-wrap: wrap;
    height: auto;
    padding: 10px;
    gap: 10px;
  }

  .nav-links {
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 8px;
  }

  .nav-links a,
  .nav-links span {
    font-size: 14px;
  }

  /* EPG Bar */
  .epg-bar {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
  }

  .epg-item {
    min-width: 120px;
    text-align: center;
    flex-shrink: 0;
  }

  /* Now Playing */
  .now-playing {
    font-size: 14px;
    padding: 10px;
    text-align: center;
  }

  /* Topbar */
  .topbar {
    flex-direction: column;
    text-align: center;
    gap: 5px;
  }

  /* Channel Grid becomes Netflix-style rows */
  .channel-grid {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding: 10px;
  }

  .channel-grid::-webkit-scrollbar {
    display: none;
  }

  .channel {
    min-width: 120px;
    height: 150px;
    border-radius: 10px;
    flex-shrink: 0;
    background: #222;
  }

  .channel img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    border-radius: 10px;
  }

  .channel p {
    font-size: 12px;
    text-align: center;
    margin-top: 5px;
    color: white;
  }

  /* Player Box */
  #playerBox {
    padding: 10px;
  }

  #playerBox video {
    width: 100%;
    border-radius: 10px;
  }

  #liveTitle {
    font-size: 16px;
    text-align: center;
  }

  /* Footer */
  .footer-container {
    flex-direction: column;
    text-align: center;
  }

  .social-links {
    justify-content: center;
  }

}








.epg-bar{
  display:flex;
  gap:15px;
  padding:10px 20px;
  background:#333446;
  overflow-x:auto;
}

.epg-item{
  background:#333446;
  color:white;
  padding:8px 15px;
  border-radius:20px;
  white-space:nowrap;
  cursor:pointer;
  transition:0.3s;
}

.epg-item:hover{
  background:#ff0000;
}