body { display: flex; }
.last-update { font-size: 12px; color: var(--ink-3); }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 24px; }
.kpi { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.kpi-value { font-size: 26px; font-weight: 700; color: var(--ink-0); line-height: 1; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.kpi-label { font-size: 11px; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.06em; }

.section-title { font-size: 12px; font-weight: 600; color: var(--ink-2); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 12px; margin-top: 24px; }
.section-title:first-of-type { margin-top: 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-bottom: 8px; }

.scard { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.scard.online  { border-left: 3px solid var(--green); }
.scard.offline { border-left: 3px solid var(--red); }
.scard-header { display: flex; align-items: center; justify-content: space-between; }
.scard-name { font-size: 14px; font-weight: 600; color: var(--ink-0); }
.scard-meta { font-size: 12px; color: var(--ink-2); line-height: 1.6; }
.scard-meta span { color: var(--ink-3); }