diff --git a/frontend/packages/dashboard/src/dashboard.css b/frontend/packages/dashboard/src/dashboard.css
index ea2a096b..916518a6 100644
--- a/frontend/packages/dashboard/src/dashboard.css
+++ b/frontend/packages/dashboard/src/dashboard.css
@@ -650,12 +650,6 @@ ul form.inline { display: inline-block; }
   text-transform: uppercase;
 }
 .kind-spawn { color: var(--amber); border-color: var(--amber); }
-.spinner {
-  display: inline-block;
-  animation: spin 1s linear infinite;
-  color: var(--amber);
-}
-@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
 details { margin-top: 0.5em; }
 summary {
   cursor: pointer;
diff --git a/frontend/packages/shared/src/base.css b/frontend/packages/shared/src/base.css
index 7136b8eb..47c908da 100644
--- a/frontend/packages/shared/src/base.css
+++ b/frontend/packages/shared/src/base.css
@@ -11,3 +11,16 @@ body {
   font-family: "JetBrains Mono", "Fira Code", "Cascadia Code", "Source Code Pro", monospace;
   line-height: 1.6;
 }
+
+/* Loading spinner used by the shared `asyncBtn()` helper (forms.js) —
+   swapped into a button's content while its async action is in flight.
+   Lives here (not in a per-page stylesheet) because asyncBtn itself is
+   shared between the dashboard and the per-agent UI; keeping the CSS
+   with the JS component it styles avoids one consumer rendering an
+   unstyled, unanimated glyph. */
+.spinner {
+  display: inline-block;
+  animation: spin 1s linear infinite;
+  color: var(--amber);
+}
+@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }