:root{
  --bg:#0B0820; --bg2:#120a2e; --card:#1A0F38; --card2:#23154a;
  --magenta:#C026D3; --cyan:#00D4FF; --gold:#FFB627;
  --txt:#EDE9FF; --muted:#9b8fce; --line:#2c1d57;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:radial-gradient(1200px 600px at 70% -10%, #1c0f4a 0%, var(--bg) 60%);
  color:var(--txt); font-family:"Cairo",system-ui,Segoe UI,sans-serif; min-height:100vh;
}
a{color:inherit;text-decoration:none}

/* ---------- topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:14px;
  padding:12px 18px; background:rgba(11,8,32,.82); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{font-weight:800; font-size:1.35rem; letter-spacing:.5px}
.brand span{color:var(--magenta)}
.search{
  flex:1; max-width:520px; margin-inline:auto; padding:10px 16px; border-radius:30px;
  border:1px solid var(--line); background:var(--card); color:var(--txt); font-family:inherit; font-size:.95rem;
}
.search:focus{outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px rgba(0,212,255,.15)}
.count{color:var(--muted); font-weight:600; white-space:nowrap}
.count span{font-size:.8rem}

/* ---------- tabs / groups ---------- */
.tabs{display:flex; gap:10px; padding:16px 18px 6px; flex-wrap:wrap}
.tab{
  padding:9px 18px; border-radius:30px; border:1px solid var(--line); background:var(--card);
  color:var(--txt); font-family:inherit; font-weight:600; cursor:pointer; transition:.15s;
}
.tab:hover{border-color:var(--magenta)}
.tab.active{background:linear-gradient(135deg,var(--magenta),#7d1ad6); border-color:transparent; box-shadow:0 4px 16px rgba(192,38,211,.35)}
.groupbar{display:flex; gap:8px; padding:6px 18px 14px; flex-wrap:wrap}
.chip{
  padding:6px 13px; border-radius:20px; border:1px solid var(--line); background:transparent;
  color:var(--muted); font-family:inherit; font-size:.82rem; cursor:pointer; transition:.15s;
}
.chip:hover{color:var(--txt); border-color:var(--cyan)}
.chip.active{background:var(--cyan); color:#04263b; border-color:transparent; font-weight:700}
.chip[hidden]{display:none}

/* ---------- grid ---------- */
.grid{
  display:grid; gap:14px; padding:8px 18px 50px;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
}
.card{
  background:linear-gradient(180deg,var(--card2),var(--card)); border:1px solid var(--line);
  border-radius:16px; padding:14px 12px; display:flex; flex-direction:column; align-items:center;
  gap:8px; transition:.18s; position:relative;
}
.card:hover{transform:translateY(-4px); border-color:var(--magenta); box-shadow:0 10px 28px rgba(0,0,0,.45)}
.card[hidden]{display:none}
.logo{
  width:84px; height:84px; border-radius:14px; background:#0d0826; display:flex;
  align-items:center; justify-content:center; overflow:hidden; position:relative; border:1px solid var(--line);
}
.logo img{width:100%; height:100%; object-fit:contain; padding:6px}
.logo-fallback{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:1.6rem; color:var(--gold); background:linear-gradient(135deg,#2a1856,#160a36);
}
.q{
  position:absolute; bottom:4px; inset-inline-end:4px; background:var(--magenta); color:#fff;
  font-size:.6rem; font-weight:800; padding:1px 6px; border-radius:8px; letter-spacing:.4px;
}
.q.small{position:static; font-size:.58rem}
.cname{font-weight:600; font-size:.92rem; text-align:center; line-height:1.25}
.cgroup{color:var(--muted); font-size:.7rem; text-align:center}
.empty{text-align:center; color:var(--muted); padding:40px; font-size:1.1rem}

/* ---------- watch ---------- */
body.watch{display:flex; flex-direction:column; height:100vh; overflow:hidden}
.back{font-weight:700; color:var(--cyan)}
.now{flex:1; text-align:center; font-weight:800; font-size:1.05rem}
.live-dot{color:#ff4060; font-weight:800; font-size:.85rem; animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.35}}
.player-wrap{flex:1; display:flex; gap:14px; padding:14px; min-height:0}
.player{flex:1; position:relative; background:#000; border-radius:16px; overflow:hidden; border:1px solid var(--line)}
.player video{width:100%; height:100%; background:#000; display:block}
.status{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--cyan); font-weight:600; background:rgba(0,0,0,.45); pointer-events:none; text-align:center; padding:20px;
}
.sidebar{
  width:300px; overflow-y:auto; background:var(--card); border:1px solid var(--line);
  border-radius:16px; padding:12px;
}
.sidebar h3{margin:6px 8px 12px; font-size:.95rem; color:var(--gold)}
.srow{display:flex; align-items:center; gap:10px; padding:8px; border-radius:10px; transition:.12s}
.srow:hover{background:var(--card2)}
.srow.current{background:linear-gradient(135deg,rgba(192,38,211,.30),rgba(0,212,255,.12));
  border:1px solid var(--magenta); box-shadow:0 0 0 1px rgba(192,38,211,.3) inset}
.srow.current .srow-name{font-weight:800; color:#fff}
.nowplay{font-size:.62rem; font-weight:800; color:var(--cyan); white-space:nowrap; flex:none}
.srow img{width:40px; height:40px; object-fit:contain; border-radius:8px; background:#0d0826}
.srow-fb{width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:8px;
  background:linear-gradient(135deg,#2a1856,#160a36); color:var(--gold); font-weight:800; font-size:.85rem; flex:none}
.srow-name{flex:1; font-size:.85rem}

@media(max-width:760px){
  .player-wrap{flex-direction:column}
  .sidebar{width:auto; max-height:38vh}
  .search{order:3; max-width:none; flex-basis:100%}
}