.moderator-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.name-draw-remote-controls {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  min-width: 255px;
  padding: 10px;
  border: 1px solid rgba(255, 197, 56, .34);
  border-radius: 13px;
  background:
    linear-gradient(
      180deg,
      rgba(18, 23, 38, .98),
      rgba(8, 11, 20, .98)
    );
  box-shadow:
    0 12px 32px rgba(0, 0, 0, .32),
    0 0 22px rgba(255, 56, 145, .10);
}

.name-draw-remote-controls[hidden] {
  display: none !important;
}

.name-draw-control-title {
  display: block;
  text-align: center;
  color: #ffd34d;
  font-size: .74rem;
  font-weight: 1000;
  letter-spacing: .10em;
}

.name-draw-remote-controls button {
  display: block;
  width: 100%;
  min-height: 42px;
  margin: 0;
  visibility: visible;
  opacity: 1;
}

.name-draw-remote-controls .name-draw-start {
  order: 1;
  background:
    linear-gradient(
      90deg,
      #008fd8,
      #6f49ee,
      #df2588
    );
}

.name-draw-remote-controls .name-draw-launch {
  order: 2;
  color: #fff;
  background: #171d2a;
  border: 1px solid rgba(255, 255, 255, .16);
}

.name-draw-obs-status {
  order: 3;
  display: block;
  min-height: 18px;
  text-align: center;
  color: #9aa8bc;
  font-size: .70rem;
  font-weight: 900;
  letter-spacing: .04em;
}

.name-draw-obs-status.online {
  color: #42ef99;
}

.name-draw-obs-status.busy {
  color: #ffd04a;
}

.name-draw-obs-status.offline {
  color: #ff6b82;
}

@media (max-width: 850px) {
  .name-draw-remote-controls {
    width: 100%;
    min-width: 0;
  }
}