.live-counters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
}
.live-counter {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 18px clamp(12px, 1.8vw, 24px);
}
.live-counter + .live-counter { border-inline-start: 1px solid var(--line); }
.live-counter dl { margin: 0; }
.live-counter-icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  flex-shrink: 0;
  border-radius: 9px;
  background: var(--soft);
  color: var(--accent);
}
.live-counter dt, .live-values dt, .live-filter > span, .live-count, .live-test-filter {
  font-size: .81rem;
  color: var(--muted);
}
.live-counter dd {
  margin: 0;
  color: var(--ink);
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
.live-count {
  min-width: 2em;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.live-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px 18px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
}
.live-filter { display: grid; gap: 4px; max-width: 100%; }
.live-filter select {
  min-width: 12em;
  max-width: 100%;
  min-height: 38px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--soft);
  color: var(--ink);
  font-size: .875rem;
}
.live-test-filter { display: flex; align-items: center; gap: 8px; min-height: 38px; cursor: pointer; }
.live-test-filter input { width: 16px; height: 16px; accent-color: var(--action); }
.live-list, .live-roster { margin: 0; padding: 0; list-style: none; }
.live-row {
  display: grid;
  grid-template-columns: minmax(105px, .95fr) minmax(108px, .75fr) minmax(120px, 1.3fr) minmax(120px, .9fr);
  gap: 12px 18px;
  align-items: center;
  padding: 18px 20px;
}
.live-row + .live-row { border-top: 1px solid var(--line); }
.live-identity, .live-roster li { display: flex; align-items: center; gap: 10px; }
.live-identity > div, .live-job, .live-roster li > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.live-identity strong, .live-route, .live-roster li { font-size: .9rem; }
.live-identity small, .live-state small, .live-sub, .live-cargo {
  display: block;
  color: var(--muted);
  font-size: .785rem;
}
.live-state { display: flex; flex-wrap: wrap; gap: 4px; }
.live-state small { width: 100%; font-variant-numeric: tabular-nums; }
.live-route, .live-cargo { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.live-route .icon, .live-cargo .icon { width: 15px; height: 15px; color: var(--muted); }
.live-cargo { margin-top: 4px; }
.live-values { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; margin: 0; }
.live-values dd { margin: 0; font-size: .9rem; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.live-roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(185px, 100%), 1fr)); gap: 12px 20px; padding: 18px 20px; }
@media (max-width: 1080px) {
  .live-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .live-values { justify-content: flex-start; column-gap: 24px; }
}
@media (max-width: 820px) {
  .live-counters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .live-counter:nth-child(3) { border-inline-start: 0; }
  .live-counter:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 520px) {
  .live-filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 12px; gap: 8px; }
  .live-filter select { width: 100%; min-width: 0; }
  .live-test-filter { grid-column: 1 / -1; }
  .live-counter { gap: 8px; padding: 12px 8px; }
  .live-counter-icon { width: 27px; height: 27px; }
  .live-counter-icon .icon { width: 16px; height: 16px; }
  .live-row { padding: 14px 12px; gap: 12px; }
  .live-identity .avatar { display: none; }
  .live-values { gap: 4px 12px; }
}
button.live-route { padding:0; border:0; background:none; color:var(--ink); font:inherit; text-align:left; }
button.live-route:hover strong,button.live-route:focus-visible strong { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
