State badges had identical foreground and background colors, making
the text invisible. Dropped background-color from c-ok/c-bad/c-muted
and added a status dot before state text so color pairs with shape.

Assisted-by: GLM-5.1 via pi

diff --git a/static/style.css b/static/style.css
index e155e8f..194d434 100644
--- a/static/style.css
+++ b/static/style.css
@@ -95,6 +95,13 @@ pre { white-space: pre-wrap; word-break: break-word; }
   width: 6px;
   height: 6px;
   border-radius: 3px;
+  background-color: currentColor;
+}
+
+.ci-state-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
 }
 
 .ci-commit-link {
@@ -189,9 +196,9 @@ pre { white-space: pre-wrap; word-break: break-word; }
 
 /* Color tokens */
 
-.c-ok { color: var(--ok); background-color: var(--ok); }
-.c-bad { color: var(--bad); background-color: var(--bad); }
-.c-muted { color: var(--muted); background-color: var(--muted); }
+.c-ok { color: var(--ok); }
+.c-bad { color: var(--bad); }
+.c-muted { color: var(--muted); }
 .c-accent { color: var(--accent); }
 
 /* Dark palette — activates when the OS signals dark mode. */
diff --git a/templates/ci/run_detail.html b/templates/ci/run_detail.html
index 1e65b0a..9c5f16a 100644
--- a/templates/ci/run_detail.html
+++ b/templates/ci/run_detail.html
@@ -11,7 +11,7 @@
   <div class="ci-meta-primary">
     <span class="c-accent">{{ run.sha_short() }}</span>
     · {{ run.branch_short() }}
-    · <span class="{{ run.state_class() }}">{{ run.state }}</span>
+    · <span class="ci-state-label {{ run.state_class() }}"><span class="ci-status-dot {{ run.state_class() }}"></span> {{ run.state }}</span>
   </div>
   <div class="ci-meta-secondary">
     queued <time title="{{ run.queued_iso() }}">{{ run.queued_relative() }}</time>
@@ -25,7 +25,7 @@
 <div class="ci-job">
   <div class="ci-job-header">
     {{ job.job_id }} · {{ job.duration_display() }}{% if let Some(code) = job.exit_code_filter_nonzero() %} · exit {{ code }}{% endif %}
-    · <span class="{{ job.state_class() }}">{{ job.state }}</span>
+    · <span class="ci-state-label {{ job.state_class() }}"><span class="ci-status-dot {{ job.state_class() }}"></span> {{ job.state }}</span>
   </div>
   {% for sh in job.sh_events %}
   <div class="ci-sh">