fix: move spinner keyframes outside :root selector block

The @keyframes spin and .animate-spin rules were incorrectly placed
inside the first :root {} block, which is invalid CSS — @keyframes
cannot be nested inside selector blocks. Browsers silently ignore
them in that position, so the spinners would still get stuck on pages
without component CSS loaded.

Moves the rules to the stylesheet top level between the two :root
blocks. Also fixes the mobile-css regression test that parses the
first :root block with a non-greedy regex.

Addresses review feedback from Greptile (P1) and CodeRabbit on PR #40.

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

packages/dashboard/app/styles.css

@@ -164,17 +164,6 @@ html {
   --transition-normal: 0.2s ease;
   --transition-slow: 0.3s ease;
 
-/* Global spinner animation — used by 25+ components via className="animate-spin"
-   or inline animation: "spin ...". Must live here (not in TaskCard.css) so the
-   keyframes and utility class are available before any task cards are loaded. */
-@keyframes spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
-.animate-spin {
-  animation: spin 1s linear infinite;
-}
-
   /* Backward-compatible aliases */
   --radius: var(--radius-md);
   --shadow: var(--shadow-lg);
@@ -186,6 +175,18 @@ html {
   --xsmall-breakpoint: 640px;
 }
 
+/* Global spinner animation — used by 25+ components via className="animate-spin"
+   or inline animation: "spin ...". Must live at the stylesheet top level (not
+   inside any selector block) so the keyframes and utility class are available
+   before any task cards are loaded. */
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+
 :root {
   --bg: #0d1117;
   --surface: #161b22;