.cs2-monitoring-row {
  display: flex;
  gap: 24px;
  justify-content: center;
  margin: 32px 0;
}
.cs2-monitoring-card {
  width: 500px;
  height: 120px;
  border-radius: 18px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 4px 24px 0 rgba(0,0,0,0.10);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px 24px 16px 16px;
  position: relative;
  overflow: hidden;
  border: 1.5px solid #222;
}
.cs2-monitoring-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.28);
  z-index: 0;
  border-radius: 18px;
}
.cs2-monitoring-top {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 1;
}
.cs2-tag.cs2-top {
  background: #ff4d4f;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  border-radius: 12px;
  padding: 2px 16px;
  margin-right: 8px;
  display: flex;
  align-items: center;
}
.cs2-title {
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  margin-right: 10px;
  white-space: nowrap;
}
.cs2-copy {
  width: 32px;
  height: 32px;
  background: url('data:image/svg+xml;utf8,<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="9" y="9" width="13" height="13" rx="2"/><rect x="3" y="3" width="13" height="13" rx="2"/></svg>') center/contain no-repeat;
  cursor: pointer;
  opacity: 0.7;
  margin-right: 14px;
  transition: opacity 0.15s, border 0.2s;
  display: inline-block;
  border: 2px solid #888;
  border-radius: 50%;
  background-color: #222c;
  position: relative;
  z-index: 1;
}
.cs2-copy:hover { opacity: 1; }
.cs2-play {
  border: 2px solid #bbb;
  background-color: #222c;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  cursor: pointer;
  position: relative;
  transition: border 0.2s;
  z-index: 1;
}
.cs2-play:after {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background: url('data:image/svg+xml;utf8,<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><polygon points="8,5 19,12 8,19"/></svg>') center/contain no-repeat;
  margin-left: 2px;
}
.cs2-monitoring-bottom {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  position: relative;
  z-index: 1;
}
.cs2-tag.cs2-online {
  background: #2ecc71;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  border-radius: 12px;
  padding: 2px 16px;
  display: flex;
  align-items: center;
}
.cs2-map {
  background: #222c;
  color: #fff;
  font-size: 15px;
  border-radius: 8px;
  padding: 2px 12px;
  margin: 0 4px;
}
.cs2-city {
  background: #222c;
  color: #fff;
  font-size: 15px;
  border-radius: 8px;
  padding: 2px 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.cs2-tooltip {
  position: fixed;
  background: #222;
  color: #fff;
  padding: 7px 18px;
  border-radius: 10px;
  font-size: 15px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.18);
  z-index: 99999;
  pointer-events: none;
  opacity: 0.97;
  transition: opacity 0.2s;
  white-space: nowrap;
}
.cs2-play.copied:after {
  background: url('data:image/svg+xml;utf8,<svg fill="%233fd1b2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.285 6.709a1 1 0 0 0-1.414 0l-8.285 8.285-4.285-4.285a1 1 0 1 0-1.414 1.414l5 5a1 1 0 0 0 1.414 0l9-9a1 1 0 0 0 0-1.414z"/></svg>') center/contain no-repeat;
  animation: cs2-check-bounce 0.7s cubic-bezier(.68,-0.55,.27,1.55);
}
@keyframes cs2-check-bounce {
  0% { transform: scale(1) rotate(-10deg); }
  40% { transform: scale(1.3) rotate(8deg); }
  70% { transform: scale(0.95) rotate(-4deg); }
  100% { transform: scale(1) rotate(0deg); }
}