/* VM stats page (vmstats.js). Builds on the app kit (/kit/mzo_theme.css). */
.vs-head .ui-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vs-meta { margin: 4px 0 0; font-size: 12.5px; color: var(--mzo-muted); }
.vs-live { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--mzo-muted); white-space: nowrap; }
.vs-live.on .ui-dot { animation: vs-pulse 2.4s ease-in-out infinite; }
@keyframes vs-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .vs-live.on .ui-dot { animation: none; } }
.vs-health { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 14px; }
.vs-health .ui-badge { display: inline-flex; align-items: center; gap: 6px; }
.vs-stats { --n: 6; }
.vs-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.vs-charts > .ui-panel + .ui-panel { margin-top: 0; }
.vs-plot { padding: 8px 12px 10px; min-height: 236px; }
.vs-skel { display: block; height: 190px; border-radius: 8px; }
.vs-empty { min-height: 190px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 24px; }
.vs-two { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.vs-two > .ui-panel + .ui-panel { margin-top: 0; }
.vs-procs { margin-top: 16px; }
.vs-table td { vertical-align: top; }
.vs-table .ui-badge { display: inline-flex; align-items: center; gap: 6px; }
.vs-unit { margin-top: 3px; font-size: 11.5px; color: var(--mzo-muted); }
.vs-storage { padding: 4px 16px 14px; }
.vs-sec { margin: 12px 0 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--mzo-muted); }
.vs-row { display: grid; grid-template-columns: 128px minmax(0, 1fr) 118px; align-items: center; gap: 12px; min-height: 30px; font-size: 12.5px; }
.vs-row .ui-bar { min-width: 0; }
.vs-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-name small { color: var(--mzo-muted); }
.vs-val { text-align: right; font-variant-numeric: tabular-nums; color: var(--mzo-muted); white-space: nowrap; }
.vs-foot { margin: 16px 2px 4px; font-size: 12px; color: var(--mzo-muted); }
@media (max-width: 1100px) { .vs-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .vs-charts, .vs-two { grid-template-columns: minmax(0, 1fr); }
  .vs-two > .ui-panel + .ui-panel { margin-top: 0; }
}
@media (max-width: 760px) {
  .vs-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vs-row { grid-template-columns: 96px minmax(0, 1fr) 104px; gap: 8px; }
}
/* The standalone stats site */
.vs-site { max-width: 1280px; margin: 0 auto; padding: 24px 20px 32px; }
@media (max-width: 760px) { .vs-site { padding: 16px 12px 24px; } }