fix: centre badge text on instance cards

.badge lacked text-align: center. Inside the card's flex-end right
column, badge text was left-justified within each pill, making state
labels (deployed / testing / degraded) appear skewed to the left.

TDD: CSS regression test added to tests/helpers.test.js — reads
css/app.css directly and asserts the rule is present, so this
cannot regress silently in future.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

tests/helpers.test.js

@@ -1,5 +1,7 @@
 // @vitest-environment jsdom
 import { describe, it, expect } from 'vitest'
+import { readFileSync } from 'fs'
+import { join } from 'path'
 
 // ── esc() ─────────────────────────────────────────────────────────────────────
 // Mirrors the implementation in ui.js exactly (DOM-based).
@@ -112,3 +114,16 @@ describe('fmtDateFull', () => {
     expect(fmtDateFull('')).toBe('—')
   })
 })
+
+// ── CSS regressions ───────────────────────────────────────────────────────────
+
+const css = readFileSync(join(__dirname, '../css/app.css'), 'utf8')
+
+describe('CSS regressions', () => {
+  it('.badge has text-align: center so state labels are not left-skewed on cards', () => {
+    // Regression: badges rendered left-aligned inside the card's flex-end column.
+    // Without text-align: center, short labels (e.g. "deployed") appear
+    // left-justified inside their pill rather than centred.
+    expect(css).toMatch(/\.badge\s*\{[^}]*text-align\s*:\s*center/s)
+  })
+})