    <div class="mb-6 flex justify-between items-center">
        <div>
            <h1 class="text-2xl font-bold dark:text-white flex items-center gap-2">
                <span class="text-blue-500">🛡️</span> Role Diagnostics
            </h1>
            <p class="text-gray-500 dark:text-gray-400 text-sm">Find and fix Discord role mismatches</p>
        </div>
        <div>
            <button hx-get="/admin/roles/mismatches" 
                    hx-target="#mismatch-container"
                    class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium shadow transition-colors">
                🔍 Run Diagnostic Scan
            </button>
        </div>
    </div>

    <div class="bg-white dark:bg-darkcard rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm overflow-hidden">
        <div id="mismatch-container" class="p-8 text-center text-gray-500">
            Click "Run Diagnostic Scan" to query the Discord API. (This takes a few seconds).
        </div>
    </div>
