@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;600;700&display=swap');

/* =========================
   RESET
========================= */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Vazirmatn, sans-serif;
}

body{
  background:#05060a;
  color:#fff;
  overflow:hidden;
}

/* =========================
   BACKGROUND (CINEMATIC)
========================= */
#background{
  position:fixed;
  inset:0;
  background:
    radial-gradient(circle at 15% 20%, #00e5ff22, transparent 40%),
    radial-gradient(circle at 80% 30%, #7c4dff22, transparent 45%),
    radial-gradient(circle at 50% 80%, #00ffb822, transparent 50%);
  filter: blur(90px);
  z-index:-1;
}

/* =========================
   APP LAYOUT
========================= */
#app{
  display:flex;
  flex-direction:column;
  height:100vh;
}

/* =========================
   HEADER
========================= */
#app-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 18px;
  background:rgba(255,255,255,0.03);
  border-bottom:1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(15px);
}

.logo{
  font-size:18px;
  font-weight:700;
  color:#00e5ff;
  letter-spacing:2px;
  text-shadow:0 0 20px rgba(0,229,255,0.3);
}

/* search */
#searchInput{
  width:220px;
  padding:10px 12px;
  border-radius:12px;
  border:none;
  outline:none;
  background:rgba(255,255,255,0.06);
  color:#fff;
}

/* =========================
   MAIN LAYOUT
========================= */
#main-layout{
  display:grid;
  grid-template-columns:1.8fr 1fr;
  height:100%;
  gap:12px;
  padding:12px;
}

/* =========================
   PLAYER SECTION
========================= */
#player-section{
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* PLAYER BOX */
#player-box{
  position:relative;
  flex:1;
  background:#000;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 20px 60px rgba(0,0,0,0.6);
}

/* VIDEO */
#videoPlayer{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* STATUS */
#statusBox{
  position:absolute;
  top:12px;
  left:12px;
  padding:8px 12px;
  font-size:12px;
  border-radius:12px;
  background:rgba(0,0,0,0.45);
  backdrop-filter: blur(10px);
  color:#fff;
}

/* WATERMARK */
#watermark{
  position:absolute;
  bottom:12px;
  right:12px;
  font-size:12px;
  color:#00e5ff;
  opacity:0.85;
  user-select:none;
}

/* BRAND */
#brandTicker{
  position:absolute;
  bottom:12px;
  left:12px;
  font-size:12px;
  color:#ffffffaa;
}

/* =========================
   CONTROLS
========================= */
#player-controls{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

#player-controls button,
#player-controls select{
  padding:10px 12px;
  border:none;
  border-radius:12px;
  background:rgba(255,255,255,0.06);
  color:#fff;
  cursor:pointer;
  transition:.25s;
  border:1px solid rgba(255,255,255,0.08);
}

#player-controls button:hover{
  background:#00e5ff;
  color:#000;
  transform:scale(1.05);
}

/* =========================
   SIDEBAR (CHANNEL GRID)
========================= */
#sidebar{
  background:rgba(255,255,255,0.03);
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.06);
  padding:10px;
  overflow:auto;
}

/* GRID RESPONSIVE */
#channelGrid{
  display:grid;
  gap:10px;
}

/* 📱 MOBILE = 3 */
@media(max-width:768px){
  #main-layout{
    grid-template-columns:1fr;
  }

  #channelGrid{
    grid-template-columns:repeat(3, 1fr);
  }

  #searchInput{
    width:140px;
  }
}

/* 💻 LAPTOP = 4 */
@media(min-width:769px) and (max-width:1200px){
  #channelGrid{
    grid-template-columns:repeat(4, 1fr);
  }
}

/* 🖥 LARGE = 6 */
@media(min-width:1201px){
  #channelGrid{
    grid-template-columns:repeat(6, 1fr);
  }
}

/* =========================
   CHANNEL CARD (PREMIUM)
========================= */
.channel-card{
  height:70px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;

  border-radius:14px;
  background:linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  border:1px solid rgba(255,255,255,0.08);

  cursor:pointer;
  transition:.25s;
  font-size:12px;
  position:relative;
  overflow:hidden;
}

.channel-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at top left, #00e5ff22, transparent 60%);
}

.channel-card:hover{
  transform:scale(1.05);
  border-color:#00e5ff55;
}

/* scroll */
#sidebar::-webkit-scrollbar{
  width:6px;
}

#sidebar::-webkit-scrollbar-thumb{
  background:#00e5ff33;
  border-radius:10px;
}