.live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  border-radius: 50%;
  background: #35c982;
  box-shadow: 0 0 0 4px rgba(53, 201, 130, .13);
}

.connector-log {
  max-height: 420px;
  overflow: auto;
  background: #11251d;
  color: #dce9e2;
  padding: 8px 18px;
}

.connector-log-row {
  display: grid;
  grid-template-columns: 145px 78px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.connector-log-row:last-child { border-bottom: 0; }
.connector-log-row time {
  color: #91a79c;
  font: 11px ui-monospace, SFMono-Regular, Consolas, monospace;
  padding-top: 2px;
}
.connector-log-row b {
  display: block;
  font-size: 12px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.connector-log-row small {
  display: block;
  color: #91a79c;
  font-size: 10px;
  margin-top: 4px;
  overflow-wrap: anywhere;
}
.connector-log-level {
  color: #70d9a9;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  padding-top: 3px;
}
.level-warning .connector-log-level { color: #ffd166; }
.level-error .connector-log-level { color: #ff8585; }
.connector-log-empty { background: #11251d; color: #91a79c; }
.connector-log-empty b { color: #dce9e2; }

@media (max-width: 760px) {
  .connector-log-row { grid-template-columns: 1fr 70px; }
  .connector-log-row div { grid-column: 1 / -1; }
  .connector-log { padding: 8px 14px; }
}