refactor(FN-2206): centralize agent modal styling in dashboard CSS

- Move inline styles from AgentListModal and AgentGenerationModal into token-based stylesheet classes
- Polish NewAgentDialog step-zero layout, role grid, and AI generation button/summary presentation
- Improve AgentImportModal result stat visual hierarchy and semantic status coloring
- Expand dashboard modal CSS coverage with sectioned rules and mobile-specific refinements
- Update component and stylesheet tests to assert new class usage and modal responsive behavior

packages/dashboard/app/components/__tests__/AgentImportModal.test.tsx

@@ -1,6 +1,8 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import { render, screen, waitFor, fireEvent, act } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import fs from "node:fs";
+import path from "node:path";
 import { AgentImportModal } from "../AgentImportModal";
 
 interface MockResponse {
@@ -17,6 +19,9 @@ function mockResponse({ ok, status = ok ? 200 : 400, body }: MockResponse): Prom
   } as Response);
 }
 
+const stylesPath = path.join(__dirname, "../../styles.css");
+const readStyles = () => fs.readFileSync(stylesPath, "utf-8");
+
 describe("AgentImportModal", () => {
   const onClose = vi.fn();
   const onImported = vi.fn();
@@ -444,6 +449,17 @@ describe("AgentImportModal", () => {
     expect(onClose).toHaveBeenCalledTimes(1);
   });
 
+  it("uses token-based semantic colors for result and browse styling", () => {
+    const styles = readStyles();
+
+    expect(styles).toContain('.agent-import-result-stat--success');
+    expect(styles).toContain('color: var(--color-success);');
+    expect(styles).toContain('.agent-import-result-error');
+    expect(styles).toContain('background: color-mix(in srgb, var(--color-error) 8%, transparent);');
+    expect(styles).toContain('.agent-import-browse-selected');
+    expect(styles).toContain('background: color-mix(in srgb, var(--todo) 10%, transparent);');
+  });
+
   describe("Browse Catalog Mode", () => {
     function createMockResponse(body: unknown): Response {
       return {
@@ -490,6 +506,24 @@ describe("AgentImportModal", () => {
       });
     });
 
+    it("uses the shared small button class for selected catalog actions", async () => {
+      const mockCompanies = [
+        { slug: "test-company", name: "Test Company", tagline: "A great company" },
+      ];
+
+      globalThis.fetch = vi.fn().mockResolvedValue(createMockResponse({ companies: mockCompanies }));
+
+      renderModal(true);
+
+      const user = userEvent.setup();
+      await user.click(screen.getByRole("button", { name: "Browse Catalog" }));
+      await user.click(await screen.findByText("Test Company"));
+
+      const changeButton = await screen.findByRole("button", { name: "Change" });
+      expect(changeButton).toHaveClass("btn-sm");
+      expect(changeButton).not.toHaveClass("btn--small");
+    });
+
     it("shows Retry button when error occurs", async () => {
       globalThis.fetch = vi.fn().mockResolvedValue(createMockResponse({
         companies: [],