body{
  margin:0;
  background:url("https://i.ibb.co.com/gLFbSs9D/gta-6-game-art-5k-3840x2160-14300.jpg") center/cover fixed;
  font-family:Arial,Helvetica,sans-serif
}

header{
  padding:10px;
  background:linear-gradient(90deg,#002d7a,#0047ab,#003a9e);
  color:#fff;
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:sticky;
  top:0;
  z-index:1000
}

.title{font-weight:700;font-size:18px}
.headerBtn{
  border:1px solid rgba(255,255,255,.8);
  padding:6px 10px;
  cursor:pointer;
  border-radius:10px;
  background:rgba(0,0,0,.15);
  user-select:none
}

#searchBox{
  display:none;
  background:rgba(0,0,0,.55);
  padding:8px
}
#searchInput{
  width:100%;
  padding:12px;
  border:none;
  outline:none;
  border-radius:14px;
  font-size:15px
}

#main{display:flex;gap:8px;padding:8px}
#left{flex:2;display:none;flex-direction:column;gap:8px}
#right{flex:1;overflow-y:auto;max-height:calc(100vh - 90px)}

#videoWrap{position:relative;width:100%;aspect-ratio:16/9;background:black;border-radius:3%}
#player{width:100%;height:100%;border-radius:3%}

#watermark{
  position:absolute;
  right:5px;
  bottom:2px;
  width:35px;
  height:35px;
  z-index:7;
  opacity:.9;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.8));
  pointer-events:none
}


#poster{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:radial-gradient(circle at 50% 20%,rgba(50,150,255,.25),rgba(0,0,0,.98));
  z-index:5
}
#poster img{
  width:120px;
  height:120px;
  border-radius:18px
}
#loadingText{color:#fff;margin-top:12px;font-size:14px}

#liveBadge{
  position:absolute;
  left:12px;
  top:12px;
  padding:6px 10px;
  font-size:12px;
  font-weight:700;
  color:#fff;
  background:rgba(255,0,0,.92);
  border-radius:999px;
  z-index:7
}

#playBox{
  position:absolute;
  left:10px;
  right:10px;
  bottom:10px;
  z-index:10;
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px;
  border-radius:18px;
  background:linear-gradient(180deg,rgba(0,0,0,.20),rgba(0,0,0,.90));
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12);
  transition:.25s opacity,.25s transform
}

#playBox.hideControls{
  opacity:0;
  pointer-events:none;
  transform:translateY(12px)
}

#playBox button{
  width:100%;
  height:100%;
  border:none;
  cursor:pointer;
  border-radius:14px;
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:18px
}

#vol{flex:1;height:6px}

#currentInfo{
  background:linear-gradient(90deg,#001b44,#002b6f,#001b44);
  padding:10px;
  display:flex;
  align-items:center;
  gap:10px;
  color:#fff;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08)
}
#currentLogo{
  width:40px;
  height:40px;
  border-radius:12px;
  background:#000
}

#category{
  display:flex;
  gap:6px;
  padding:10px;
  background:rgba(0,63,158,.92);
  overflow-x:auto;
  border-radius:16px
}
.catBtn{
  padding:9px 12px;
  background:rgba(1,42,106,.95);
  color:#fff;
  cursor:pointer;
  border-radius:999px;
  white-space:nowrap
}
.catBtn.active{
  background:#fff;
  color:#001b44;
  font-weight:700
}

#list{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(90px,1fr));
  gap:8px;
  padding:8px
}
.channelItem{
  background:rgba(255,255,255,.92);
  border-radius:16px;
  padding:10px;
  display:flex;
  justify-content:center;
  align-items:center;
  cursor:pointer
}
.channelItem img{
  width:65px;
  height:65px;
  border-radius:18px;
  object-fit:contain
}
.channelItem.active{outline:3px solid rgba(255,0,0,.9)}

#footer{text-align:center;padding:12px;background:#0047ab;color:#fff}

@media(max-width:968px){
  #main{flex-direction:column}
  #right{max-height:none}
  #left{position:sticky;top:56px;z-index:999}
  #videoWrap{height:100%}
}

/* ===== GTA 5 VIBE LOGIN (HI-FI) ===== */
#gtaLogin{
  position:fixed;
  inset:0;
  z-index:9999999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;

  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(0, 255, 180, .10), transparent 55%),
    radial-gradient(900px 500px at 85% 85%, rgba(120, 0, 255, .12), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.88), rgba(0,0,0,.94));

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

#gtaLogin .gtaGlow{
  position:absolute;
  inset:-40px;
  background:
    radial-gradient(600px 200px at 30% 30%, rgba(0,255,180,.10), transparent 60%),
    radial-gradient(500px 220px at 70% 70%, rgba(130,0,255,.10), transparent 60%);
  filter: blur(10px);
  pointer-events:none;
  animation: gtaFloat 6s ease-in-out infinite;
}

@keyframes gtaFloat{
  0%,100%{ transform: translateY(0px); opacity:.9; }
  50%{ transform: translateY(-10px); opacity:1; }
}

#gtaLogin .gtaCard{
  position:relative;
  width:100%;
  max-width:420px;
  border-radius:22px;
  padding:18px 18px 16px;
  background: rgba(10,12,16,.72);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  overflow:hidden;
}

#gtaLogin .gtaCard::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(0,255,180,.18), transparent 45%, rgba(120,0,255,.16)),
    radial-gradient(1000px 400px at 20% 10%, rgba(255,255,255,.06), transparent 50%);
  opacity:.7;
  pointer-events:none;
}

#gtaLogin .gtaTop{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
}

#gtaLogin .gtaLogoDot{
  width:14px;height:14px;border-radius:999px;
  background: radial-gradient(circle at 30% 30%, #00ffb4, #007a55);
  box-shadow: 0 0 18px rgba(0,255,180,.45);
  flex:0 0 auto;
}

#gtaLogin .gtaTitleMain{
  color:#fff;
  font-weight:800;
  letter-spacing:.6px;
  font-size:18px;
}
#gtaLogin .gtaTitleSub{
  color:rgba(255,255,255,.72);
  font-size:11px;
  letter-spacing:1.4px;
  margin-top:2px;
}

#gtaLogin .gtaLine{
  position:relative;
  height:1px;
  background: linear-gradient(90deg, rgba(0,255,180,.35), rgba(255,255,255,.08), rgba(120,0,255,.32));
  margin:14px 0 14px;
}

#gtaLogin .gtaBody{ position:relative; }

#gtaLogin .gtaHint{
  color:rgba(255,255,255,.78);
  font-size:13px;
  margin-bottom:10px;
}

#gtaLogin .gtaField{
  display:flex;
  gap:10px;
  align-items:center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  padding:10px 12px;
  border-radius:16px;
}

#gtaLogin input{
  flex:1;
  border:none;
  outline:none;
  background:transparent;
  color:#fff;
  font-size:16px;
  letter-spacing:1px;
}

#gtaLogin #pwToggle{
  border:none;
  background: rgba(255,255,255,.10);
  color:#fff;
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
}

#gtaLogin .gtaBtn{
  margin-top:12px;
  width:100%;
  border:none;
  cursor:pointer;
  padding:12px 14px;
  border-radius:16px;
  color:#fff;
  font-weight:800;
  letter-spacing:1.2px;
  background: linear-gradient(90deg, rgba(0,255,180,.65), rgba(0,71,171,.95), rgba(120,0,255,.60));
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  transform: translateY(0);
  transition: .18s transform, .18s filter;
}
#gtaLogin .gtaBtn:hover{ transform: translateY(-1px); filter: brightness(1.05); }
#gtaLogin .gtaBtn:active{ transform: translateY(1px); }

#gtaLogin .gtaErr{
  margin-top:10px;
  min-height:18px;
  color: #ff5a5a;
  font-size:13px;
  font-weight:700;
}

#gtaLogin .gtaFoot{
  margin-top:12px;
  color:rgba(255,255,255,.62);
  font-size:12px;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
#gtaLogin .gtaFoot .dot{
  width:8px;height:8px;border-radius:999px;
  background:#00ffb4;
  box-shadow:0 0 14px rgba(0,255,180,.5);
}
#gtaLogin .gtaFoot .sep{ opacity:.55; }

#gtaLogin .gtaLink{
  border:none;
  background:transparent;
  color:#c7d7ff;
  cursor:pointer;
  padding:0;
  text-decoration: underline;
}



/* Fullscreen corner fix */
#videoWrap:fullscreen{
  border-radius:0 !important;
  width:100vw !important;
  height:100vh !important;
  aspect-ratio:auto !important;
}

#videoWrap:fullscreen #player{
  border-radius:0 !important;
  width:100% !important;
  height:100% !important;
}