/* JDServer-Webs v6.0 — modules/live/live.css (v1.3.3 prod) */
#live { margin: 14px 0 20px; }

.live-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom: 10px; }
.live-title { font-weight: 600; }
.live-updated { font-size: .9rem; color: var(--muted); display:flex; align-items:center; gap:8px; }

.live-age {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.15rem .5rem; border-radius: 999px;
  font-size: .78rem; line-height: 1;
  border: 1px solid var(--border);
  background: var(--card); color: var(--muted);
}
.live-age .dot{ width: .55rem; height: .55rem; border-radius: 50%; box-shadow: 0 0 0 1px var(--border) inset; }
.live-age.ok .dot{ background: #16a34a; }
.live-age.warn .dot{ background: #f59e0b; }
.live-age.bad .dot{ background: #dc2626; }
.live-age.unk .dot{ background: #6b7280; }

.live-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.live-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: 14px;
  display:flex; flex-direction:column; gap:6px;
  min-height: 92px;
}
.metric-label { font-size: .88rem; color: var(--muted); }
.metric-main { font-size: 1.8rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.metric-unit { font-size: 1rem; opacity:.8; margin-left: .2rem; }
.metric-sub { font-size: .95rem; color: var(--muted); }

@media (max-width: 520px){
  .live-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}