/* Shared foundation primitives; page-specific styles remain in the legacy boundary for now. */
.ui-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ui-space-4); }
.ui-section { min-width: 0; }
.ui-section-header { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-3); }
.ui-status { display: inline-flex; align-items: center; gap: var(--ui-space-2); color: var(--ui-text-muted); font-size: .8125rem; }
.ui-status::before { width: 7px; height: 7px; border-radius: 50%; background: var(--ui-text-subtle); content: ""; }
.ui-status[data-status="live"]::before, .ui-status[data-status="success"]::before { background: var(--ui-success); }
.ui-status[data-status="stale"], .ui-status[data-status="warning"] { color: var(--ui-warning); }
.ui-status[data-status="stale"]::before, .ui-status[data-status="warning"]::before { background: var(--ui-warning); }
.ui-status[data-status="offline"], .ui-status[data-status="danger"] { color: var(--ui-danger); }
.ui-status[data-status="offline"]::before, .ui-status[data-status="danger"]::before { background: var(--ui-danger); }
@media (max-width: 720px) { .ui-page-header { flex-direction: column; } }