Navbar Status

<header class="ws-navbar sticky top-0 z-50 border-b border-[var(--ws-navbar-border)] bg-[var(--ws-navbar-bg)]">
  <div class="mx-auto flex max-w-7xl flex-wrap items-center gap-x-6 gap-y-3 px-6 py-3">
    <!-- Brand + live system status -->
    <div class="flex items-center gap-4">
      <a href="#" class="text-base font-semibold tracking-tight text-[var(--ws-navbar-text)]">Console</a>
      <span class="inline-flex items-center gap-2 rounded-full bg-[var(--ws-color-success-soft)] px-3 py-1 text-xs font-medium text-[var(--ws-navbar-text)]">
        <span class="h-2 w-2 rounded-full bg-[var(--ws-color-success)]" aria-hidden="true"></span>
        All systems operational
      </span>
    </div>

    <!-- Live metrics -->
    <dl class="flex items-center gap-x-6 text-sm">
      <div class="flex items-center gap-2">
        <dt class="text-[var(--ws-navbar-text-muted)]">Projects</dt>
        <dd class="font-semibold text-[var(--ws-navbar-text)]">24</dd>
      </div>
      <div class="flex items-center gap-2">
        <dt class="text-[var(--ws-navbar-text-muted)]">Open tickets</dt>
        <dd class="font-semibold text-[var(--ws-navbar-text)]">3</dd>
      </div>
      <div class="hidden items-center gap-2 sm:flex">
        <dt class="text-[var(--ws-navbar-text-muted)]">Build</dt>
        <dd class="font-semibold text-[var(--ws-navbar-text)]">#1482 passing</dd>
      </div>
    </dl>

    <!-- Actions -->
    <div class="ml-auto flex items-center gap-3">
      <button type="button" aria-label="Notifications (2 unread)" class="relative flex h-9 w-9 items-center justify-center rounded-md text-[var(--ws-navbar-text-muted)] transition hover:bg-[var(--ws-navbar-hover-bg)] hover:text-[var(--ws-navbar-text)]">
        <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1h6z"/></svg>
        <span class="absolute right-1.5 top-1.5 h-2 w-2 rounded-full bg-[var(--ws-color-danger)]" aria-hidden="true"></span>
      </button>
      <button type="button" aria-label="Account" class="flex h-9 w-9 items-center justify-center rounded-full bg-[var(--ws-navbar-hover-bg)] text-sm font-semibold text-[var(--ws-navbar-text)]">JS</button>
    </div>
  </div>
</header>