.stream-state {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -4px 0 14px;
  color: var(--muted);
  font-size: 12px;
}

.stream-state b { color: var(--ink); }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: #a9b3ae; }
.live-dot.active { background: #35a853; box-shadow: 0 0 0 4px #35a8531f; }
.monitor-metrics { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.monitor-metrics .metric { padding: 13px; }
.monitor-metrics .metric strong { font-size: 21px; }
.monitor-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, .8fr);
  gap: 12px;
  margin-bottom: 14px;
}
.monitor-map {
  position: relative;
  min-height: 340px;
  overflow: hidden;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: linear-gradient(135deg, #eef5f1, #f8fbf9);
}
.monitor-map.empty { display: grid; place-content: center; }
.map-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(#56766b14 1px, transparent 1px), linear-gradient(90deg, #56766b14 1px, transparent 1px);
  background-size: 42px 42px;
}
.map-note {
  position: absolute;
  left: 10px;
  bottom: 9px;
  padding: 5px 8px;
  border-radius: 7px;
  background: #fffffff0;
  color: var(--muted);
}
.device-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  background: transparent;
  color: var(--green);
  padding: 4px;
  z-index: 2;
}
.device-marker span {
  width: 16px;
  height: 16px;
  border: 3px solid white;
  border-radius: 50% 50% 50% 0;
  background: var(--green2);
  box-shadow: 0 2px 8px #002d22aa;
  transform: rotate(-45deg);
}
.device-marker b {
  margin-top: 4px;
  padding: 3px 6px;
  border-radius: 6px;
  background: #fffffff0;
  font-size: 11px;
  white-space: nowrap;
}
.device-marker.selected span { background: #35a853; box-shadow: 0 0 0 5px #35a85333; }
.monitor-detail-head { display: flex; justify-content: space-between; gap: 10px; }
.monitor-detail-head h3 { margin: 0; }
.monitor-detail dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0 0; }
.monitor-detail dl div { padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.monitor-detail dt { font-size: 11px; color: var(--muted); text-transform: uppercase; }
.monitor-detail dd { margin: 3px 0 0; font-weight: 700; overflow-wrap: anywhere; }
.selectable { cursor: pointer; }
.selectable:hover { background: var(--mint); }

@media (max-width: 1200px) {
  .monitor-metrics { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1000px) {
  .monitor-layout { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .monitor-metrics { grid-template-columns: 1fr; }
  .monitor-detail dl { grid-template-columns: 1fr; }
  .stream-state { align-items: flex-start; flex-wrap: wrap; }
  .monitor-map { min-height: 290px; }
}