diff --git a/internal/api/middleware/securityheaders.go b/internal/api/middleware/securityheaders.go
index bde556d..d2b4a86 100644
--- a/internal/api/middleware/securityheaders.go
+++ b/internal/api/middleware/securityheaders.go
@@ -32,9 +32,35 @@ type SecurityHeadersConfig struct {
 // CSP: default-src 'self' confines fetches to the same origin.
 // img-src 'self' data: allows inline base64 images (used by the
 // dashboard's certctl-logo and a few status icons).
-// style-src 'self' 'unsafe-inline' is required because Tailwind
-// (via Vite) injects per-component <style> blocks at build time;
-// without 'unsafe-inline' the dashboard would render unstyled.
+// style-src 'self' 'unsafe-inline' — the 'unsafe-inline' grant
+// is required by React's inline `style={...}` attribute model,
+// which emits HTML `style="..."` attributes that the browser
+// treats as inline styles for CSP purposes. The dashboard has 5
+// load-bearing dynamic-style sites: Tooltip's Floating-UI
+// position (left/top px values computed per-tick),
+// AgentFleetPage's dynamic color+width chart bars,
+// dashboard/charts.tsx Recharts color props, CertificatesPage's
+// progress-bar percent width, IssuerHierarchyPage's depth-based
+// marginLeft. The static-pixel uses (UsersPage filter + table UI,
+// DigestPage iframe min-height, AuthProvider demo-mode banner)
+// were migrated to Tailwind utility classes via FE-M6 closure
+// 2026-05-14.
+//
+// FE-M6 audit-framing correction: this comment USED TO say
+// "Tailwind (via Vite) injects per-component <style> blocks at
+// build time." That was factually wrong. Vite's CSS output is a
+// single .css file linked via <link rel="stylesheet"> — verified
+// against dist/index.html post-build: zero <style> tags emitted.
+// The 'unsafe-inline' grant exists for React's style-attribute
+// output path, not for Vite or Tailwind.
+//
+// Fully eliminating 'unsafe-inline' would require either banning
+// dynamic `style={...}` (rewriting the 5 load-bearing sites with
+// a CSS-in-JS library that emits hashed/nonce'd <style> blocks)
+// or adopting CSP nonces with React 18+'s style runtime. Neither
+// fits the original FE-M6 phase budget; tracked as a future
+// security-hardening item.
+//
 // 'unsafe-inline' is intentionally NOT in script-src — the
 // front-end ships as a bundled JS file, no inline scripts.
 //
diff --git a/web/src/components/AuthProvider.tsx b/web/src/components/AuthProvider.tsx
index 8cdea03..b67fefa 100644
--- a/web/src/components/AuthProvider.tsx
+++ b/web/src/components/AuthProvider.tsx
@@ -142,17 +142,13 @@ export default function AuthProvider({ children }: { children: ReactNode }) {
         the bypass — but the GUI still surfaces the state plainly.
       */}
       {authType === 'none' && !loading && (
+        // FE-M6 closure 2026-05-14: was a 6-prop style={...} attr;
+        // migrated to Tailwind utilities. Same visual: red banner,
+        // white text, 8px/16px padding, 13px semibold center.
         <div
           data-testid="demo-mode-banner"
           role="alert"
-          style={{
-            background: '#b91c1c',
-            color: '#fff',
-            padding: '8px 16px',
-            fontSize: 13,
-            fontWeight: 600,
-            textAlign: 'center',
-          }}
+          className="bg-red-700 text-white px-4 py-2 text-[13px] font-semibold text-center"
         >
           ⚠️ Demo mode active (CERTCTL_AUTH_TYPE=none). Every caller is anonymous admin.
           Production deployments MUST set CERTCTL_AUTH_TYPE=api-key or oidc.
diff --git a/web/src/pages/DigestPage.tsx b/web/src/pages/DigestPage.tsx
index ff29372..21f36db 100644
--- a/web/src/pages/DigestPage.tsx
+++ b/web/src/pages/DigestPage.tsx
@@ -76,8 +76,7 @@ export default function DigestPage() {
             <iframe
               srcDoc={html}
               title="Digest Preview"
-              className="w-full border-0"
-              style={{ minHeight: '600px' }}
+              className="w-full border-0 min-h-[600px]"
               sandbox="allow-same-origin"
             />
           </div>
diff --git a/web/src/pages/auth/UsersPage.tsx b/web/src/pages/auth/UsersPage.tsx
index 13ca683..76e04cb 100644
--- a/web/src/pages/auth/UsersPage.tsx
+++ b/web/src/pages/auth/UsersPage.tsx
@@ -74,23 +74,29 @@ export default function UsersPage() {
   return (
     <div>
       <PageHeader title="Federated Users" subtitle="One row per (oidc_provider_id, oidc_subject) tuple." />
-      <div style={{ marginBottom: 16 }}>
-        <label style={{ marginRight: 8 }}>Filter by provider:</label>
+      {/* FE-M6 closure 2026-05-14: migrated 9 inline-style attrs in this
+          page to Tailwind utility classes. Pre-closure these were the
+          single biggest concentration of style={...} in production tsx.
+          Closes the "static styles in inline-attr position" half of
+          FE-M6; load-bearing dynamic styles (Tooltip Floating-UI, chart
+          color props, computed widths) remain inline by necessity. */}
+      <div className="mb-4">
+        <label className="mr-2">Filter by provider:</label>
         <input
           type="text"
           placeholder="op-keycloak (leave empty for all)"
           value={providerFilter}
           onChange={(e) => setProviderFilter(e.target.value)}
-          style={{ width: 280, padding: 4 }}
+          className="w-[280px] p-1"
         />
       </div>
       {err && <ErrorState message={err} />}
       {usersQuery.isLoading && <p>Loading users…</p>}
       {usersQuery.error && <ErrorState message={usersQuery.error.message} />}
       {usersQuery.data && (
-        <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+        <table className="w-full border-collapse">
           <thead>
-            <tr style={{ borderBottom: '2px solid #ccc', textAlign: 'left' }}>
+            <tr className="border-b-2 border-gray-300 text-left">
               <th>ID</th>
               <th>Email</th>
               <th>Display Name</th>
@@ -104,7 +110,13 @@ export default function UsersPage() {
             {usersQuery.data.map((u) => {
               const deactivated = Boolean(u.deactivated_at);
               return (
-                <tr key={u.id} style={{ borderBottom: '1px solid #eee', opacity: deactivated ? 0.5 : 1 }}>
+                <tr
+                  key={u.id}
+                  className={
+                    'border-b border-gray-200 ' +
+                    (deactivated ? 'opacity-50' : 'opacity-100')
+                  }
+                >
                   <td><code>{u.id}</code></td>
                   <td>{u.email}</td>
                   <td>{u.display_name}</td>
@@ -116,7 +128,7 @@ export default function UsersPage() {
                       <button
                         onClick={() => deactivate(u)}
                         disabled={pending === u.id}
-                        style={{ padding: '4px 12px' }}
+                        className="px-3 py-1"
                       >
                         {pending === u.id ? 'Deactivating…' : 'Deactivate'}
                       </button>
@@ -125,7 +137,7 @@ export default function UsersPage() {
                       <button
                         onClick={() => reactivate(u)}
                         disabled={pending === u.id}
-                        style={{ padding: '4px 12px' }}
+                        className="px-3 py-1"
                       >
                         {pending === u.id ? 'Reactivating…' : 'Reactivate'}
                       </button>
@@ -135,7 +147,7 @@ export default function UsersPage() {
               );
             })}
             {usersQuery.data.length === 0 && (
-              <tr><td colSpan={7} style={{ padding: 12, textAlign: 'center' }}>No users matching filter.</td></tr>
+              <tr><td colSpan={7} className="p-3 text-center">No users matching filter.</td></tr>
             )}
           </tbody>
         </table>