/* container */
.nl-player-wrap {
  position: relative;
  background: #0a0a0a;
  border-radius: 12px;
  overflow: hidden;
  width: 98%;
  height: 98%;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* video fills */
#stream-video {
  display: block;
  width: 100%;
  height: 100%;
  background: #000;
}

/* control bar */
.nl-controls {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem .8rem;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.75) 100%);
  opacity: 0;
  transition: opacity .18s ease;
  z-index: 4;
}

.nl-player-wrap:hover .nl-controls,
.nl-controls.nl-show {
  opacity: 1;
}

/* buttons */
.nl-btn {
  appearance: none;
  border: 0;
  outline: none;
  background: rgba(255,255,255,.1);
  color: #fff;
  border-radius: 10px;
  padding: .45rem .6rem;
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  cursor: pointer;
}
.nl-btn:hover { background: rgba(255,255,255,.18); }

/* time + live badge */
.nl-time {
  color: #e8e8e8;
  font-weight: 600;
  letter-spacing: .02em;
  margin-right: .2rem;
}
.nl-live {
  color: #fff;
  background: #e92c2c;
  border-radius: 9999px;
  padding: .2rem .5rem;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
}

/* spacer */
.nl-spacer { flex: 1 1 auto; }

/* volume */
.nl-vol-wrap { display: inline-flex; align-items: center; gap: .4rem; }
.nl-range {
  -webkit-appearance: none; appearance: none;
  width: 120px; height: 4px; background: rgba(255,255,255,.25);
  border-radius: 9999px; outline: none; cursor: pointer;
}
.nl-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 0;
}

/* center play */
.nl-center-play {
  position: absolute; inset: 0; z-index: 5;
  display: grid; place-items: center;
  pointer-events: none;
}
.nl-center-play button {
  pointer-events: auto;
  width: 68px; height: 68px; border-radius: 50%;
  border: none; background: rgba(0,0,0,.65); color: #fff;
  font-size: 22px; backdrop-filter: blur(6px);
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.nl-center-play button:hover { background: rgba(0,0,0,.8); }

/* unmute pill */
.mejs__unmute-pill {
  position: absolute; right: 12px; bottom: 12px; z-index: 6;
  background: rgba(0,0,0,.7); color: #fff;
  padding: 8px 10px; border-radius: 10px; border: 0;
  font-weight: 700; cursor: pointer;
  box-shadow: 0 3px 14px rgba(0,0,0,.35);
}

/* quality menu */
.nl-menu {
  position: absolute; bottom: 50px; right: 8px; z-index: 6;
  background: rgba(15,15,15,.95); color: #fff; border-radius: 10px;
  padding: .5rem; display: none; min-width: 160px; box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.nl-menu.show { display: block; }
.nl-menu button {
  display: block; width: 100%;
  background: transparent; color: #fff; border: 0;
  text-align: left; padding: .45rem .5rem; border-radius: 8px; cursor: pointer;
}
.nl-menu button:hover { background: rgba(255,255,255,.08); }

/* small helper icon style */
.nl-ico { font-size: 15px; opacity: .95; }