:root{
  --bg:#0b0f17; --bg2:#0e1420; --card:#131a29; --card2:#182134;
  --line:#223047; --txt:#e9eef7; --mut:#8fa0b8; --acc:#e11d2e; --acc2:#ff4757;
  --ok:#22c55e; --r:14px;
}
*{box-sizing:border-box; margin:0; padding:0}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--txt); min-height:100vh;
  font-family:"Segoe UI",Tahoma,"Noto Kufi Arabic","Noto Sans Arabic",Arial,sans-serif;
  display:flex; flex-direction:column;
}
button{font-family:inherit; cursor:pointer}
a{color:var(--acc2)}

/* ---------- header ---------- */
.top{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:14px; justify-content:space-between;
  padding:10px 18px; background:rgba(11,15,23,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--txt)}
.brand b{font-size:19px; display:block}
.brand span{font-size:11.5px; color:var(--mut); display:block}
#search{
  background:var(--card); border:1px solid var(--line); color:var(--txt);
  border-radius:999px; padding:9px 16px; width:min(340px,42vw); font-size:14px; outline:none;
  transition:border .15s;
}
#search:focus{border-color:var(--acc)}
#search::placeholder{color:var(--mut)}

/* ---------- player ---------- */
.player{position:sticky; top:62px; z-index:40; background:var(--bg2); border-bottom:1px solid var(--line)}
.vwrap{position:relative; max-width:1080px; margin:0 auto; background:#000}
video{display:block; width:100%; aspect-ratio:16/9; background:#000}
.pstatus{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.55); font-size:15px; color:#fff; text-align:center; padding:12px;
}
.pstatus.err{color:#ffb4b4}
.pbar{
  max-width:1080px; margin:0 auto; display:flex; align-items:center; gap:10px;
  justify-content:space-between; padding:9px 14px; flex-wrap:wrap;
}
.ptitle{display:flex; align-items:center; gap:9px; font-size:16px}
.livedot{width:10px; height:10px; border-radius:50%; background:var(--acc); box-shadow:0 0 0 0 rgba(225,29,46,.6); animation:pulse 1.6s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(225,29,46,0)}100%{box-shadow:0 0 0 0 rgba(225,29,46,0)}}
.pcat{font-size:12px; color:var(--mut); background:var(--card); padding:2px 9px; border-radius:999px}
.pacts{display:flex; gap:7px; flex-wrap:wrap}
.pacts button{
  background:var(--card); color:var(--txt); border:1px solid var(--line);
  border-radius:9px; padding:7px 13px; font-size:13.5px; transition:.15s;
}
.pacts button:hover{border-color:var(--acc); background:var(--card2)}

/* ---------- tabs ---------- */
.tabs{
  display:flex; gap:9px; padding:14px 18px 4px; max-width:1180px; margin:0 auto; width:100%;
  overflow-x:auto; scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tabs button{
  background:var(--card); color:var(--txt); border:1px solid var(--line);
  padding:9px 16px; border-radius:999px; font-size:14px; white-space:nowrap; transition:.15s;
}
.tabs button:hover{border-color:var(--acc)}
.tabs button.on{background:var(--acc); border-color:var(--acc); color:#fff}
.tabs i{
  font-style:normal; background:rgba(255,255,255,.14); border-radius:999px;
  padding:1px 7px; font-size:11.5px; margin-inline-start:4px;
}
.tabs button.on i{background:rgba(0,0,0,.25)}

/* ---------- grid ---------- */
main{flex:1; width:100%; max-width:1180px; margin:0 auto; padding:14px 18px 30px}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:12px}
.card{
  position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:14px 12px 12px; display:flex; flex-direction:column; align-items:center; gap:9px;
  color:var(--txt); transition:transform .12s, border-color .12s, background .12s;
}
.card:hover{transform:translateY(-3px); border-color:var(--acc); background:var(--card2)}
.card.active{border-color:var(--acc); background:var(--card2); box-shadow:0 0 0 1px var(--acc)}
.lwrap{width:64px; height:64px; border-radius:12px; overflow:hidden; background:var(--bg2); display:grid; place-items:center}
.lwrap img{width:100%; height:100%; object-fit:contain}
.ava{
  width:100%; height:100%; display:grid; place-items:center;
  font-size:26px; font-weight:700; color:#fff;
  background:linear-gradient(135deg,#283349,#3b2230);
}
.cname{font-size:13.5px; text-align:center; line-height:1.35; min-height:2.6em}
.cname .fv{font-style:normal; font-size:11px}
.live{
  font-size:10.5px; color:#fff; background:var(--acc); border-radius:999px; padding:2px 10px;
  display:inline-flex; align-items:center; gap:5px;
}
.live::before{content:""; width:6px; height:6px; border-radius:50%; background:#fff; animation:pulse 1.6s infinite}
.empty{text-align:center; color:var(--mut); padding:50px 0; font-size:15px}

/* ---------- footer ---------- */
footer{
  border-top:1px solid var(--line); padding:14px 18px; text-align:center;
  color:var(--mut); font-size:12.5px; margin-top:auto;
}

/* ---------- 404 ---------- */
.c404{display:grid; place-items:center; text-align:center; min-height:80vh}
.c404 h1{font-size:64px; color:var(--acc)}
.c404 p{color:var(--mut); margin:8px 0 16px}
.c404 a{background:var(--acc); color:#fff; text-decoration:none; padding:10px 22px; border-radius:10px}

@media (max-width:640px){
  .top{flex-wrap:wrap; gap:8px}
  #search{width:100%; order:2}
  .player{top:98px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:9px}
  .lwrap{width:52px; height:52px}
  .brand span{display:none}
}