#panel-dxcluster { width: 400px; }
.dx-body { gap: 6px; font-family: var(--mono, monospace); }
.dx-status { font-family: var(--mono, monospace); font-size: 0.7rem; color: var(--muted); letter-spacing: 0.04em; }
.dx-status.live { color: #3adb4a; text-shadow: 0 0 6px rgba(60, 220, 80, 0.55); }
.dx-status.bad { color: var(--bad); }

.dx-ctl { display: flex; align-items: center; gap: 6px; }
.dx-ctl button { min-width: 74px; }
.dx-ctl button[aria-pressed="true"] { color: #fff; background: #1d7a3a; border-color: #2a9a4c; }
.dx-ctl input { flex: 1; min-width: 0; text-transform: uppercase; }

.dx-head, .dx-row {
  display: grid;
  grid-template-columns: 40px 64px 86px minmax(0, 1fr);
  gap: 6px;
  align-items: baseline;
}
.dx-head { padding: 0 6px; color: #6f7b86; font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; }
.dx-list {
  max-height: 360px;
  overflow-y: auto;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.dx-row {
  width: 100%;
  min-height: 0;
  padding: 3px 6px;
  border: 0;
  border-radius: 0;
  background: none;
  color: #8a96a2;
  font: inherit;
  font-size: 0.74rem;
  text-align: left;
  cursor: pointer;
  opacity: 0.55;
}
.dx-row.here { opacity: 1; }
.dx-row:hover, .dx-row:focus-visible { background: rgba(29, 95, 174, 0.18); outline: none; }
.dx-row.tuned { background: rgba(29, 95, 174, 0.32); }
.dx-utc { color: #6f7b86; }
.dx-freq { text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.dx-call { overflow: hidden; color: #f0c040; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.dx-row.fresh .dx-call { color: #ffd966; text-shadow: 0 0 6px rgba(240, 192, 64, 0.5); }
.dx-info { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dx-spotter { color: #5b9bd5; }
.dx-cmt { color: #8a96a2; }
.dx-empty { padding: 14px 8px; color: #5b656e; font-size: 0.72rem; text-align: center; }
.dx-foot { overflow: hidden; color: #4a545e; font-size: 0.62rem; text-align: right; white-space: nowrap; text-overflow: ellipsis; }

.dx-spots {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  z-index: 3;
  pointer-events: none;
}
.dx-spot {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  min-height: 0;
  height: 16px;
  padding: 0 4px;
  border: 1px solid rgba(240, 192, 64, 0.55);
  border-radius: 2px;
  background: rgba(10, 14, 18, 0.78);
  color: #f0c040;
  font-family: var(--mono, monospace);
  font-size: 0.68rem;
  line-height: 14px;
  white-space: nowrap;
  pointer-events: auto;
  cursor: pointer;
}
.dx-spot::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 1px;
  height: 4px;
  background: rgba(240, 192, 64, 0.55);
}
.dx-spot.lane-1 { top: 19px; }
.dx-spot.lane-2 { top: 38px; }
.dx-spot.fresh { color: #ffe27a; border-color: #ffd966; box-shadow: 0 0 6px rgba(255, 217, 102, 0.45); }
.dx-spot.old { opacity: 0.55; }
.dx-spot:hover { z-index: 1; color: #fff; background: #1d5fae; border-color: #1d5fae; }

@media (max-width: 760px) {
  #panel-dxcluster { width: auto; }
  .dx-head, .dx-row { grid-template-columns: 36px 60px 80px minmax(0, 1fr); }
  .dx-spot.lane-2 { display: none; }
}